From ebbec7d68c6b7afcd06d705ae5109e661fd81e53 Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Sun, 31 Mar 2024 12:24:47 -0700 Subject: [PATCH] clean up resource links --- .../components/resources/alerter/index.tsx | 2 + .../src/components/resources/build/index.tsx | 5 ++- .../src/components/resources/build/table.tsx | 15 ++----- .../components/resources/builder/index.tsx | 2 + .../components/resources/deployment/index.tsx | 3 +- .../components/resources/deployment/table.tsx | 42 ++++--------------- .../components/resources/procedure/index.tsx | 3 +- .../components/resources/procedure/table.tsx | 16 +------ .../src/components/resources/repo/index.tsx | 12 ++---- .../src/components/resources/server/index.tsx | 2 + .../src/components/resources/server/table.tsx | 20 ++------- frontend/src/types.d.ts | 1 + 12 files changed, 33 insertions(+), 90 deletions(-) diff --git a/frontend/src/components/resources/alerter/index.tsx b/frontend/src/components/resources/alerter/index.tsx index 52b3b7c41..e483f3350 100644 --- a/frontend/src/components/resources/alerter/index.tsx +++ b/frontend/src/components/resources/alerter/index.tsx @@ -18,6 +18,7 @@ import { ResourceComponents } from ".."; import { Link } from "react-router-dom"; import { Card, CardDescription, CardHeader, CardTitle } from "@ui/card"; import { AlerterConfig } from "./config"; +import { ResourceLink } from "@components/util"; const useAlerter = (id?: string) => useRead("ListAlerters", {}).data?.find((d) => d.id === id); @@ -26,6 +27,7 @@ export const AlerterComponents: RequiredResourceComponents = { Name: ({ id }: { id: string }) => <>{useAlerter(id)?.name}, Icon: () => , Description: ({ id }) => <>{useAlerter(id)?.info.alerter_type} alerter, + Link: ({ id }) => , Info: [], Status: () => <>, Page: { diff --git a/frontend/src/components/resources/build/index.tsx b/frontend/src/components/resources/build/index.tsx index 81a4be437..e780a316c 100644 --- a/frontend/src/components/resources/build/index.tsx +++ b/frontend/src/components/resources/build/index.tsx @@ -1,5 +1,5 @@ import { NewResource } from "@components/layouts"; -import { ConfirmButton } from "@components/util"; +import { ConfirmButton, ResourceLink } from "@components/util"; import { useExecute, useRead, useWrite } from "@lib/hooks"; import { RequiredResourceComponents } from "@types"; import { Input } from "@ui/input"; @@ -26,8 +26,9 @@ const Icon = ({ id }: { id: string }) => { export const BuildComponents: RequiredResourceComponents = { Table: BuildTable, Dashboard: BuildChart, - Name: ({ id }: { id: string }) => <>{useBuild(id)?.name}, + Name: ({ id }) => <>{useBuild(id)?.name}, Description: ({ id }) => <>{fmt_version(useBuild(id)?.info.version)}, + Link: ({ id }) => , Info: [ ({ id }) => { const ts = useBuild(id)?.info.last_built_at; diff --git a/frontend/src/components/resources/build/table.tsx b/frontend/src/components/resources/build/table.tsx index fc0107447..653f6cf51 100644 --- a/frontend/src/components/resources/build/table.tsx +++ b/frontend/src/components/resources/build/table.tsx @@ -1,9 +1,8 @@ import { TagsWithBadge, useTagsFilter } from "@components/tags"; import { useRead } from "@lib/hooks"; import { DataTable } from "@ui/data-table"; -import { Link } from "react-router-dom"; -import { ResourceComponents } from ".."; import { fmt_date_with_minutes, fmt_version } from "@lib/formatting"; +import { ResourceComponents } from ".."; export const BuildTable = () => { const builds = useRead("ListBuilds", {}).data; @@ -19,15 +18,9 @@ export const BuildTable = () => { { accessorKey: "id", header: "Name", - cell: ({ row }) => { - const id = row.original.id; - return ( - - - - - ); - }, + cell: ({ row }) => ( + + ), }, { header: "Repo", diff --git a/frontend/src/components/resources/builder/index.tsx b/frontend/src/components/resources/builder/index.tsx index 2b22fae68..eba5f5bbe 100644 --- a/frontend/src/components/resources/builder/index.tsx +++ b/frontend/src/components/resources/builder/index.tsx @@ -18,6 +18,7 @@ import { Cloud, Bot, Factory } from "lucide-react"; import { useState } from "react"; import { Link } from "react-router-dom"; import { BuilderConfig } from "./config"; +import { ResourceLink } from "@components/util"; const useBuilder = (id?: string) => useRead("ListBuilders", {}).data?.find((d) => d.id === id); @@ -25,6 +26,7 @@ const useBuilder = (id?: string) => export const BuilderComponents: RequiredResourceComponents = { Name: ({ id }: { id: string }) => <>{useBuilder(id)?.name}, Description: () => <>, + Link: ({ id }) => , Info: [ ({ id }) => (
diff --git a/frontend/src/components/resources/deployment/index.tsx b/frontend/src/components/resources/deployment/index.tsx index 442932a7c..adac987df 100644 --- a/frontend/src/components/resources/deployment/index.tsx +++ b/frontend/src/components/resources/deployment/index.tsx @@ -35,6 +35,7 @@ export const useDeployment = (id?: string) => export const DeploymentComponents: RequiredResourceComponents = { Name: ({ id }) => <>{useDeployment(id)?.name}, Description: ({ id }) => <>{useDeployment(id)?.info.status}, + Link: ({ id }) => , Info: [ ({ id }) => { const info = useDeployment(id)?.info; @@ -62,7 +63,7 @@ export const DeploymentComponents: RequiredResourceComponents = { const color = fill_color_class_by_intention( deployment_state_intention(state) ); - return ; + return ; }, Status: ({ id }) => { const state = diff --git a/frontend/src/components/resources/deployment/table.tsx b/frontend/src/components/resources/deployment/table.tsx index 0d396580d..2f6a4fcad 100644 --- a/frontend/src/components/resources/deployment/table.tsx +++ b/frontend/src/components/resources/deployment/table.tsx @@ -1,8 +1,6 @@ import { TagsWithBadge, useTagsFilter } from "@components/tags"; import { Types } from "@monitor/client"; -import { Button } from "@ui/button"; import { DataTable } from "@ui/data-table"; -import { Link } from "react-router-dom"; import { useRead } from "@lib/hooks"; import { ResourceComponents } from ".."; import { @@ -27,17 +25,9 @@ export const DeploymentTable = ({ columns={[ { header: "Name", - cell: ({ row }) => { - const id = row.original.id; - return ( - - - - ); - }, + cell: ({ row }) => ( + + ), }, { header: "Image", @@ -52,17 +42,7 @@ export const DeploymentTable = ({ if (build_id) { const build = builds?.find((build) => build.id === build_id); if (build) { - return ( - - - - ); + return ; } else { return undefined; } @@ -74,17 +54,9 @@ export const DeploymentTable = ({ }, { header: "Server", - cell: ({ row }) => { - const id = row.original.info.server_id; - return ( - - - - ); - }, + cell: ({ row }) => ( + + ), }, { header: "State", diff --git a/frontend/src/components/resources/procedure/index.tsx b/frontend/src/components/resources/procedure/index.tsx index 0707702fd..126e22792 100644 --- a/frontend/src/components/resources/procedure/index.tsx +++ b/frontend/src/components/resources/procedure/index.tsx @@ -1,5 +1,5 @@ import { NewResource } from "@components/layouts"; -import { ConfirmButton } from "@components/util"; +import { ConfirmButton, ResourceLink } from "@components/util"; import { useExecute, useRead, useWrite } from "@lib/hooks"; import { Types } from "@monitor/client"; import { RequiredResourceComponents } from "@types"; @@ -24,6 +24,7 @@ const useProcedure = (id?: string) => export const ProcedureComponents: RequiredResourceComponents = { Name: ({ id }) => <>{useProcedure(id)?.name}, Description: ({ id }) => <>{useProcedure(id)?.info.procedure_type}, + Link: ({ id }) => , Info: [({ id }) => <>{useProcedure(id)?.info.procedure_type}], Icon: () => , Status: () => <>Procedure, diff --git a/frontend/src/components/resources/procedure/table.tsx b/frontend/src/components/resources/procedure/table.tsx index f9655dc14..79698590d 100644 --- a/frontend/src/components/resources/procedure/table.tsx +++ b/frontend/src/components/resources/procedure/table.tsx @@ -1,6 +1,5 @@ import { useRead } from "@lib/hooks"; import { DataTable } from "@ui/data-table"; -import { Link } from "react-router-dom"; import { ProcedureComponents } from "."; import { TagsWithBadge } from "@components/tags"; @@ -13,18 +12,7 @@ export const ProcedureTable = () => { { accessorKey: "id", header: "Name", - cell: ({ row }) => { - const id = row.original.id; - return ( - - - - - ); - }, + cell: ({ row }) => , }, { header: "Type", @@ -43,4 +31,4 @@ export const ProcedureTable = () => { ]} /> ); -}; \ No newline at end of file +}; diff --git a/frontend/src/components/resources/repo/index.tsx b/frontend/src/components/resources/repo/index.tsx index b122c4703..f65b84fa3 100644 --- a/frontend/src/components/resources/repo/index.tsx +++ b/frontend/src/components/resources/repo/index.tsx @@ -6,6 +6,7 @@ import { DataTable } from "@ui/data-table"; import { GitBranch } from "lucide-react"; import { Link } from "react-router-dom"; import { RepoConfig } from "./config"; +import { ResourceLink } from "@components/util"; const useRepo = (id?: string) => useRead("ListRepos", {}).data?.find((d) => d.id === id); @@ -14,6 +15,7 @@ export const RepoComponents: RequiredResourceComponents = { Name: ({ id }: { id: string }) => <>{useRepo(id)?.name}, Description: ({ id }) => <>{id}, Icon: () => , + Link: ({ id }) => , Info: [], Status: () => <>, Actions: () => <>, @@ -30,15 +32,7 @@ export const RepoComponents: RequiredResourceComponents = { { accessorKey: "id", header: "Name", - cell: ({ row }) => { - const id = row.original.id; - return ( - - - - - ); - }, + cell: ({ row }) => , }, { header: "Tags", diff --git a/frontend/src/components/resources/server/index.tsx b/frontend/src/components/resources/server/index.tsx index 8662fc1b8..051c1d547 100644 --- a/frontend/src/components/resources/server/index.tsx +++ b/frontend/src/components/resources/server/index.tsx @@ -18,6 +18,7 @@ import { DeploymentTable } from "../deployment/table"; import { ServerTable } from "./table"; import { ServerInfo } from "./info"; import { ServersChart } from "./dashboard"; +import { ResourceLink } from "@components/util"; export const useServer = (id?: string) => useRead("ListServers", {}).data?.find((d) => d.id === id); @@ -25,6 +26,7 @@ export const useServer = (id?: string) => export const ServerComponents: RequiredResourceComponents = { Name: ({ id }: { id: string }) => <>{useServer(id)?.name}, Description: ({ id }) => <>{useServer(id)?.info.status}, + Link: ({ id }) => , Info: [({ id }) => ], Icon: ({ id }) => { const status = useServer(id)?.info.status; diff --git a/frontend/src/components/resources/server/table.tsx b/frontend/src/components/resources/server/table.tsx index 13b0d989c..94a487f9e 100644 --- a/frontend/src/components/resources/server/table.tsx +++ b/frontend/src/components/resources/server/table.tsx @@ -1,8 +1,8 @@ import { TagsWithBadge, useTagsFilter } from "@components/tags"; import { useRead } from "@lib/hooks"; import { DataTable } from "@ui/data-table"; -import { Link } from "react-router-dom"; import { ServerComponents } from "."; +import { ResourceComponents } from ".."; export const ServerTable = () => { const servers = useRead("ListServers", {}).data; @@ -19,24 +19,10 @@ export const ServerTable = () => { { header: "Name", accessorKey: "id", - cell: ({ - row: { - original: { id }, - }, - }) => { - return ( - - - - - ); + cell: ({ row }) => { + return ; }, }, - // { - // header: "Description", - // accessorKey: "description", - // }, - { header: "Deployments", cell: ({ row }) => , diff --git a/frontend/src/types.d.ts b/frontend/src/types.d.ts index 4002dafd4..158597a80 100644 --- a/frontend/src/types.d.ts +++ b/frontend/src/types.d.ts @@ -18,6 +18,7 @@ export interface RequiredResourceComponents { Description: IdComponent; Info: IdComponent[]; Status: IdComponent; + Link: IdComponent; Actions: IdComponent; Table: React.FC;