clean up resource links

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: () => <AlarmClock className="w-4 h-4" />,
   Description: ({ id }) => <>{useAlerter(id)?.info.alerter_type} alerter</>,
+  Link: ({ id }) => <ResourceLink type="Alerter" id={id} />,
   Info: [],
   Status: () => <></>,
   Page: {

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 }) => <ResourceLink type="Build" id={id} />,
   Info: [
     ({ id }) => {
       const ts = useBuild(id)?.info.last_built_at;

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 (
-              <Link to={`/builds/${id}`} className="flex items-center gap-2">
-                <ResourceComponents.Build.Icon id={id} />
-                <ResourceComponents.Build.Name id={id} />
-              </Link>
-            );
-          },
+          cell: ({ row }) => (
+            <ResourceComponents.Build.Link id={row.original.id} />
+          ),
         },
         {
           header: "Repo",

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 }) => <ResourceLink type="Builder" id={id} />,
   Info: [
     ({ id }) => (
       <div className="flex items-center gap-2">

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 }) => <ResourceLink type="Deployment" id={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 <Rocket className={cn("w-4", color)} />;
+    return <Rocket className={cn("w-4 h-4", state && color)} />;
   },
   Status: ({ id }) => {
     const state =

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 (
-              <Link to={`/deployments/${id}`}>
-                <Button variant="link" className="flex gap-2 items-center p-0">
-                  <ResourceComponents.Deployment.Icon id={id} />
-                  <ResourceComponents.Deployment.Name id={id} />
-                </Button>
-              </Link>
-            );
-          },
+          cell: ({ row }) => (
+            <ResourceComponents.Deployment.Link id={row.original.id} />
+          ),
         },
         {
           header: "Image",
@@ -52,17 +42,7 @@ export const DeploymentTable = ({
             if (build_id) {
               const build = builds?.find((build) => build.id === build_id);
               if (build) {
-                return (
-                  <Link to={`/builds/${build_id}`}>
-                    <Button
-                      variant="link"
-                      className="flex gap-2 items-center p-0"
-                    >
-                      <ResourceComponents.Build.Icon id={build_id} />
-                      <ResourceComponents.Build.Name id={build_id} />
-                    </Button>
-                  </Link>
-                );
+                return <ResourceComponents.Build.Link id={build_id} />;
               } else {
                 return undefined;
               }
@@ -74,17 +54,9 @@ export const DeploymentTable = ({
         },
         {
           header: "Server",
-          cell: ({ row }) => {
-            const id = row.original.info.server_id;
-            return (
-              <Link to={`/servers/${id}`}>
-                <Button variant="link" className="flex items-center gap-2 p-0">
-                  <ResourceComponents.Server.Icon id={id} />
-                  <ResourceComponents.Server.Name id={id} />
-                </Button>
-              </Link>
-            );
-          },
+          cell: ({ row }) => (
+            <ResourceComponents.Server.Link id={row.original.info.server_id} />
+          ),
         },
         {
           header: "State",

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 }) => <ResourceLink type="Procedure" id={id} />,
   Info: [({ id }) => <>{useProcedure(id)?.info.procedure_type}</>],
   Icon: () => <Route className="w-4" />,
   Status: () => <>Procedure</>,

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 (
-              <Link
-                to={`/procedures/${id}`}
-                className="flex items-center gap-2"
-              >
-                <ProcedureComponents.Icon id={id} />
-                <ProcedureComponents.Name id={id} />
-              </Link>
-            );
-          },
+          cell: ({ row }) => <ProcedureComponents.Link id={row.original.id} />,
         },
         {
           header: "Type",
@@ -43,4 +31,4 @@ export const ProcedureTable = () => {
       ]}
     />
   );
-};
+};

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: () => <GitBranch className="w-4 h-4" />,
+  Link: ({ id }) => <ResourceLink type="Repo" id={id} />,
   Info: [],
   Status: () => <></>,
   Actions: () => <></>,
@@ -30,15 +32,7 @@ export const RepoComponents: RequiredResourceComponents = {
           {
             accessorKey: "id",
             header: "Name",
-            cell: ({ row }) => {
-              const id = row.original.id;
-              return (
-                <Link to={`/repos/${id}`} className="flex items-center gap-2">
-                  <RepoComponents.Icon id={id} />
-                  <RepoComponents.Name id={id} />
-                </Link>
-              );
-            },
+            cell: ({ row }) => <RepoComponents.Link id={row.original.id} />,
           },
           {
             header: "Tags",

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 }) => <ResourceLink type="Server" id={id} />,
   Info: [({ id }) => <ServerInfo id={id} />],
   Icon: ({ id }) => {
     const status = useServer(id)?.info.status;

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 (
-              <Link to={`/servers/${id}`} className="flex gap-2">
-                <ServerComponents.Icon id={id} />
-                <ServerComponents.Name id={id} />
-              </Link>
-            );
+          cell: ({ row }) => {
+            return <ResourceComponents.Server.Link id={row.original.id} />;
           },
         },
-        // {
-        //   header: "Description",
-        //   accessorKey: "description",
-        // },
-
         {
           header: "Deployments",
           cell: ({ row }) => <DeploymentCountOnServer id={row.original.id} />,

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;