diff --git a/frontend/src/components/resources/alerter/index.tsx b/frontend/src/components/resources/alerter/index.tsx index a9eb3163e..11f782b7a 100644 --- a/frontend/src/components/resources/alerter/index.tsx +++ b/frontend/src/components/resources/alerter/index.tsx @@ -13,16 +13,14 @@ import { RequiredResourceComponents } from "@types"; import { Input } from "@ui/input"; import { AlarmClock } from "lucide-react"; import { useState } from "react"; -import { Link } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; import { Card, CardDescription, CardHeader, CardTitle } from "@ui/card"; import { AlerterConfig } from "./config"; import { DeleteResource } from "../common"; import { AlerterTable } from "./table"; const useAlerter = (id?: string) => - useRead("ListAlerters", {}).data?.find( - (d) => d.id === id - ); + useRead("ListAlerters", {}).data?.find((d) => d.id === id); export const AlerterComponents: RequiredResourceComponents = { Dashboard: () => { @@ -45,6 +43,7 @@ export const AlerterComponents: RequiredResourceComponents = { }, New: () => { + const nav = useNavigate(); const { mutateAsync } = useWrite("CreateAlerter"); const [name, setName] = useState(""); const [type, setType] = useState(); @@ -52,9 +51,12 @@ export const AlerterComponents: RequiredResourceComponents = { return ( - !!type && mutateAsync({ name, config: { type, params: {} } }) - } + onSuccess={async () => { + if (!type) return; + const id = (await mutateAsync({ name, config: { type, params: {} } })) + ._id?.$oid!; + nav(`/alerters/${id}`); + }} enabled={!!name && !!type} >
diff --git a/frontend/src/components/resources/builder/index.tsx b/frontend/src/components/resources/builder/index.tsx index 08926960d..b6abfdbce 100644 --- a/frontend/src/components/resources/builder/index.tsx +++ b/frontend/src/components/resources/builder/index.tsx @@ -14,7 +14,7 @@ import { } from "@ui/select"; import { Cloud, Bot, Factory } from "lucide-react"; import { useState } from "react"; -import { Link } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; import { BuilderConfig } from "./config"; import { DeleteResource, ResourceLink } from "../common"; import { BuilderTable } from "./table"; @@ -56,6 +56,7 @@ export const BuilderComponents: RequiredResourceComponents = { }, New: () => { + const nav = useNavigate(); const { mutateAsync } = useWrite("CreateBuilder"); const [name, setName] = useState(""); const [type, setType] = useState(); @@ -63,9 +64,11 @@ export const BuilderComponents: RequiredResourceComponents = { return ( - !!type && mutateAsync({ name, config: { type, params: {} } }) - } + onSuccess={async () => { + if (!type) return + const id = (await mutateAsync({ name, config: { type, params: {} } }))._id?.$oid!; + nav(`/builders/${id}`); + }} enabled={!!name && !!type} >
diff --git a/frontend/src/components/resources/common.tsx b/frontend/src/components/resources/common.tsx index fdd58a6fa..f3b4f7cf5 100644 --- a/frontend/src/components/resources/common.tsx +++ b/frontend/src/components/resources/common.tsx @@ -220,9 +220,8 @@ export const NewResource = ({ type }: { type: UsableResource }) => { { - const res = await mutateAsync({ name, config: {} }); - nav(``); - return res; + const id = (await mutateAsync({ name, config: {} }))._id?.$oid!; + nav(`/${usableResourcePath(type)}/${id}`); }} enabled={!!name} onOpenChange={() => setName("")} diff --git a/frontend/src/components/resources/server-template/index.tsx b/frontend/src/components/resources/server-template/index.tsx index d316f12e1..428a504a8 100644 --- a/frontend/src/components/resources/server-template/index.tsx +++ b/frontend/src/components/resources/server-template/index.tsx @@ -3,7 +3,7 @@ import { RequiredResourceComponents } from "@types"; import { DeleteResource } from "../common"; import { Bot, Cloud, ServerCog } from "lucide-react"; import { ServerTemplateConfig } from "./config"; -import { Link } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; import { Card, CardDescription, CardHeader, CardTitle } from "@ui/card"; import { useState } from "react"; import { Types } from "@monitor/client"; @@ -43,6 +43,7 @@ export const ServerTemplateComponents: RequiredResourceComponents = { }, New: () => { + const nav = useNavigate(); const { mutateAsync } = useWrite("CreateServerTemplate"); const [name, setName] = useState(""); const [type, setType] = useState("Aws"); @@ -50,9 +51,11 @@ export const ServerTemplateComponents: RequiredResourceComponents = { return ( - !!type && mutateAsync({ name, config: { type, params: {} } }) - } + onSuccess={async () => { + if (!type) return + const id = (await mutateAsync({ name, config: { type, params: {} } }))._id?.$oid!; + nav(`/server-templates/${id}`); + }} enabled={!!name && !!type} >