From 0db97fd5d5d04fd55f6c71d82fffdd011338ef03 Mon Sep 17 00:00:00 2001 From: karamvir Date: Tue, 25 Jul 2023 02:39:15 -0700 Subject: [PATCH] refactor useRead, improve dx alot --- frontend/src/components/header/index.tsx | 4 +- frontend/src/components/updates/desktop.tsx | 31 +++++++ frontend/src/components/updates/update.tsx | 5 +- frontend/src/components/updates/updates.tsx | 85 ++++++------------- frontend/src/hooks.ts | 28 +++++- .../components/deployments-chart.tsx | 5 +- .../dashboard/components/servers-chart.tsx | 5 +- frontend/src/pages/dashboard/index.tsx | 25 ++++-- frontend/src/resources/build/card.tsx | 2 +- frontend/src/resources/build/util.tsx | 8 +- frontend/src/resources/builder/card.tsx | 36 ++++++++ frontend/src/resources/builder/page.tsx | 0 frontend/src/resources/deployment/card.tsx | 2 +- .../deployment/components/actions.tsx | 13 +-- .../deployment/components/deployment-logs.tsx | 11 +-- frontend/src/resources/deployment/util.tsx | 8 +- frontend/src/resources/pages.tsx | 51 ++++++++--- frontend/src/resources/server/card.tsx | 4 +- frontend/src/resources/server/util.tsx | 15 ++-- frontend/src/router.tsx | 16 +++- 20 files changed, 223 insertions(+), 131 deletions(-) create mode 100644 frontend/src/components/updates/desktop.tsx create mode 100644 frontend/src/resources/builder/card.tsx create mode 100644 frontend/src/resources/builder/page.tsx diff --git a/frontend/src/components/header/index.tsx b/frontend/src/components/header/index.tsx index 6e2019fd2..76a64d6cb 100644 --- a/frontend/src/components/header/index.tsx +++ b/frontend/src/components/header/index.tsx @@ -7,6 +7,7 @@ import { Link, useLocation, useParams } from "react-router-dom"; import { useUser } from "@hooks"; import { ServerName } from "@resources/server/util"; import { DeploymentName } from "@resources/deployment/util"; +import { DesktopUpdates } from "@components/updates/desktop"; export const Paths = () => { const path = useLocation().pathname.split("/")[1]; @@ -61,12 +62,13 @@ export const Header = () => { -
+
{user && ( )} + {user && } {user && ( + + + {updates?.map((update) => ( + + + + ))} + + + ); +}; diff --git a/frontend/src/components/updates/update.tsx b/frontend/src/components/updates/update.tsx index cd88342fd..b398dbf24 100644 --- a/frontend/src/components/updates/update.tsx +++ b/frontend/src/components/updates/update.tsx @@ -22,12 +22,13 @@ import { CardHeader, CardTitle, } from "@ui/card"; +// import { useRead } from "@hooks"; export const UpdateUser = ({ userId }: { userId: string }) => { - // const { data } = useUpdateUser(userId); + // const { data } = useRead({ type: "GetUser", params: {} }); if (userId === "github") return <>GitHub; if (userId === "auto redeploy") return <>Auto Redeploy; - return <>{userId}; + return <>{userId.slice(0, 5)}...; }; export const UpdateDetails = ({ update }: { update: Update }) => { diff --git a/frontend/src/components/updates/updates.tsx b/frontend/src/components/updates/updates.tsx index b5e00dcd3..fc006cf16 100644 --- a/frontend/src/components/updates/updates.tsx +++ b/frontend/src/components/updates/updates.tsx @@ -1,62 +1,31 @@ -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@ui/card"; -import { Types } from "@monitor/client"; -import { cn, version_to_string } from "@util/helpers"; +import { version_to_string } from "@util/helpers"; import { Calendar, User } from "lucide-react"; import { UpdateDetails, UpdateUser } from "./update"; +import { Update } from "@monitor/client/dist/types"; -export const Updates = ({ - updates, - className, -}: { - updates?: Types.Update[]; - className?: string; -}) => ( - - - Updates - - - {updates?.map((update) => ( - - -
- - {update.operation - .split("_") - .map((s) => s[0].toUpperCase() + s.slice(1)) - .join(" ")}{" "} - {version_to_string(update.version)} - -
-
- - - {update.end_ts - ? new Date(update.end_ts).toLocaleString() - : "ongoing"} - -
-
- - - - -
-
-
- - - - ))} - - +export const SingleUpdate = ({ update }: { update: Update }) => ( +
+
+ {update.operation + .split("_") + .map((s) => s[0].toUpperCase() + s.slice(1)) + .join(" ")}{" "} + {version_to_string(update.version)} +
+
+
+ +
+ {update.end_ts ? new Date(update.end_ts).toLocaleString() : "ongoing"} +
+
+
+
+ +
+ +
+
+ +
); diff --git a/frontend/src/hooks.ts b/frontend/src/hooks.ts index 5bcd5dd49..56be7aa34 100644 --- a/frontend/src/hooks.ts +++ b/frontend/src/hooks.ts @@ -3,6 +3,7 @@ import { client } from "./main"; import { useQuery, useMutation, + UseQueryOptions, UseMutationOptions, } from "@tanstack/react-query"; import { useAtomValue, useSetAtom } from "jotai"; @@ -10,11 +11,32 @@ import { atomWithStorage } from "jotai/utils"; import { useNavigate } from "react-router-dom"; import { ExecuteResponses, + ReadResponses, WriteResponses, } from "@monitor/client/dist/responses"; -export const useRead = (req: T) => - useQuery([req], () => client.read(req)); +export const useRead = < + T extends Types.ReadRequest["type"], + P = Extract["params"] +>( + type: T, + params: P, + config?: Omit< + UseQueryOptions, + "initialData" | "queryFn" | "queryKey" + > +) => + useQuery( + [type, params], + async () => + (await client.read({ type, params } as any)) as ReadResponses[T], + config + ); + +// export const useRead = ( +// req: T, +// options?: UseQueryOptions +// ) => useQuery([req], () => client.read(req), options); export const useWrite = < T extends Types.WriteRequest["type"], @@ -50,7 +72,7 @@ export const useExecute = < config ); -export const useUser = () => useRead({ type: "GetUser", params: {} }); +export const useUser = () => useRead("GetUser", {}); export const useLogin = () => { const { refetch } = useUser(); diff --git a/frontend/src/pages/dashboard/components/deployments-chart.tsx b/frontend/src/pages/dashboard/components/deployments-chart.tsx index 306d8ee00..2ef1ee2cb 100644 --- a/frontend/src/pages/dashboard/components/deployments-chart.tsx +++ b/frontend/src/pages/dashboard/components/deployments-chart.tsx @@ -12,10 +12,7 @@ import { useRead } from "@hooks"; import { DockerContainerState } from "@monitor/client/dist/types"; export const DeploymentsChart = () => { - const { data, isLoading, isError } = useRead({ - type: "ListDeployments", - params: {}, - }); + const { data, isLoading, isError } = useRead("ListDeployments", {}); const running = data?.filter( (d) => d.state === DockerContainerState.Running diff --git a/frontend/src/pages/dashboard/components/servers-chart.tsx b/frontend/src/pages/dashboard/components/servers-chart.tsx index 3a8440fe3..1538666e5 100644 --- a/frontend/src/pages/dashboard/components/servers-chart.tsx +++ b/frontend/src/pages/dashboard/components/servers-chart.tsx @@ -12,10 +12,7 @@ import { useRead } from "@hooks"; import { ServerStatus } from "@monitor/client/dist/types"; export const ServersChart = () => { - const { data, isLoading, isError } = useRead({ - type: "ListServers", - params: {}, - }); + const { data, isLoading, isError } = useRead("ListServers", {}); const running = data?.filter((d) => d.status === ServerStatus.Ok).length; const stopped = data?.filter((d) => d.status === ServerStatus.NotOk).length; diff --git a/frontend/src/pages/dashboard/index.tsx b/frontend/src/pages/dashboard/index.tsx index 0e54c5247..d5ad51509 100644 --- a/frontend/src/pages/dashboard/index.tsx +++ b/frontend/src/pages/dashboard/index.tsx @@ -10,26 +10,33 @@ export const Dashboard = () => {
- {/*

All Resources

*/}

My Resources

-
- - - - Builds - - - +
+ + + + Builds + + + + + + + Builders + + + +
diff --git a/frontend/src/resources/build/card.tsx b/frontend/src/resources/build/card.tsx index 50fe47978..a5bff9b09 100644 --- a/frontend/src/resources/build/card.tsx +++ b/frontend/src/resources/build/card.tsx @@ -13,7 +13,7 @@ import { BuildInfo } from "./util"; import { Hammer } from "lucide-react"; export const BuildCard = ({ id }: { id: string }) => { - const builds = useRead({ type: "ListBuilds", params: {} }).data; + const builds = useRead("ListBuilds", {}).data; const build = builds?.find((server) => server.id === id); if (!build) return null; diff --git a/frontend/src/resources/build/util.tsx b/frontend/src/resources/build/util.tsx index 1cffd3bbe..04da13eb5 100644 --- a/frontend/src/resources/build/util.tsx +++ b/frontend/src/resources/build/util.tsx @@ -4,25 +4,25 @@ import { version_to_string } from "@util/helpers"; import { Factory, History } from "lucide-react"; export const BuildName = ({ id }: { id: string }) => { - const builds = useRead({ type: "ListBuilds", params: {} }).data; + const builds = useRead("ListBuilds", {}).data; const build = builds?.find((b) => b.id === id); return <>{build?.name ?? "..."}; }; export const BuildVersion = ({ id }: { id: string }) => { - const builds = useRead({ type: "ListBuilds", params: {} }).data; + const builds = useRead("ListBuilds", {}).data; const build = builds?.find((b) => b.id === id); return <>{version_to_string(build?.version) ?? "..."}; }; export const BuildBuilder = ({ id }: { id: string }) => { - const builds = useRead({ type: "ListBuilds", params: {} }).data; + const builds = useRead("ListBuilds", {}).data; const build = builds?.find((b) => b.id === id); return <>{"build.builder " + build?.id ?? "..."}; }; export const BuildLastBuilt = ({ id }: { id: string }) => { - const builds = useRead({ type: "ListBuilds", params: {} }).data; + const builds = useRead("ListBuilds", {}).data; const build = builds?.find((b) => b.id === id); const last = build?.last_built_at; return <>{last ? new Date(last).toLocaleString() : "not yet built"}; diff --git a/frontend/src/resources/builder/card.tsx b/frontend/src/resources/builder/card.tsx new file mode 100644 index 000000000..a8ebe6d4c --- /dev/null +++ b/frontend/src/resources/builder/card.tsx @@ -0,0 +1,36 @@ +import { useRead } from "@hooks"; +import { ServerStatusIcon } from "@resources/server/util"; +import { + Card, + CardHeader, + CardTitle, + CardDescription, + CardContent, +} from "@ui/card"; +import { Link } from "react-router-dom"; +import { Factory } from "lucide-react"; + +export const BuilderCard = ({ id }: { id: string }) => { + const builders = useRead("ListBuilders", {}).data; + const builder = builders?.find((builder) => builder._id?.$oid === id); + if (!builder) return null; + + return ( + + + +
+ {builder.name} + +
+ + + + +
+
{builder.description}
+ + + + ); +}; diff --git a/frontend/src/resources/builder/page.tsx b/frontend/src/resources/builder/page.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/resources/deployment/card.tsx b/frontend/src/resources/deployment/card.tsx index b77dd7a28..a371b3642 100644 --- a/frontend/src/resources/deployment/card.tsx +++ b/frontend/src/resources/deployment/card.tsx @@ -11,7 +11,7 @@ import { DeploymentInfo, DeploymentStatusIcon } from "./util"; import { Rocket } from "lucide-react"; export const DeploymentCard = ({ id }: { id: string }) => { - const deployments = useRead({ type: "ListDeployments", params: {} }).data; + const deployments = useRead("ListDeployments", {}).data; const deployment = deployments?.find((d) => d.id === id); if (!deployment) return null; return ( diff --git a/frontend/src/resources/deployment/components/actions.tsx b/frontend/src/resources/deployment/components/actions.tsx index 021cdc8e3..c0a9296b8 100644 --- a/frontend/src/resources/deployment/components/actions.tsx +++ b/frontend/src/resources/deployment/components/actions.tsx @@ -20,7 +20,7 @@ interface DeploymentId { export const RedeployContainer = ({ deployment_id }: DeploymentId) => { const { mutate, isLoading } = useExecute("Deploy"); - const deployments = useRead({ type: "ListDeployments", params: {} }).data; + const deployments = useRead("ListDeployments", {}).data; const deployment = deployments?.find((d) => d.id === deployment_id); return ( { }; export const StartOrStopContainer = ({ deployment_id }: DeploymentId) => { - const { data } = useRead({ type: "ListDeployments", params: {} }); - const deployment = data?.find((d) => d.id == deployment_id); + const deployments = useRead("ListDeployments", {}).data; + const deployment = deployments?.find((d) => d.id === deployment_id); if (deployment?.state === DockerContainerState.Running) return ; return ; @@ -83,7 +83,8 @@ export const RemoveContainer = ({ deployment_id }: DeploymentId) => { export const DeleteDeployment = ({ id }: { id: string }) => { const nav = useNavigate(); - const { data } = useRead({ type: "GetDeployment", params: { id } }); + const deployments = useRead("ListDeployments", {}).data; + const deployment = deployments?.find((d) => d.id === id); const { mutate, isLoading } = useWrite("DeleteDeployment", { onSuccess: () => nav("/deployments"), }); @@ -107,7 +108,7 @@ export const DeleteDeployment = ({ id }: { id: string }) => {

Are you sure you wish to delete this deployment? If so, please - type in {data?.name} below + type in {deployment?.name} below

setName(e.target.value)} />
@@ -115,7 +116,7 @@ export const DeleteDeployment = ({ id }: { id: string }) => {