navigate on table row click

frontend/src/components/resources/alerter/index.tsx

@@ -14,7 +14,7 @@ import { Input } from "@ui/input";
 import { AlarmClock, AlertTriangle } from "lucide-react";
 import { useState } from "react";
 import { DataTable } from "@ui/data-table";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { Card, CardDescription, CardHeader, CardTitle } from "@ui/card";
 import { AlerterConfig, DeleteAlerter } from "./config";
 import { CopyResource, ResourceLink } from "@components/util";
@@ -44,11 +44,13 @@ export const AlerterComponents: RequiredResourceComponents = {
   },
   Actions: [],
   Table: ({ search }) => {
+    const nav = useNavigate();
     const tags = useTagsFilter();
     const alerters = useRead("ListAlerters", {}).data;
     const searchSplit = search?.split(" ") || [];
     return (
       <DataTable
+        onRowClick={(alerter) => nav(`/alerters/${alerter.id}`)}
         data={
           alerters?.filter((resource) =>
             tags.every((tag) => resource.tags.includes(tag)) &&

frontend/src/components/resources/build/table.tsx

@@ -3,13 +3,16 @@ import { useRead } from "@lib/hooks";
 import { DataTable } from "@ui/data-table";
 import { fmt_date_with_minutes, fmt_version } from "@lib/formatting";
 import { ResourceComponents } from "..";
+import { useNavigate } from "react-router-dom";
 
 export const BuildTable = ({ search }: { search?: string }) => {
+  const nav = useNavigate();
   const builds = useRead("ListBuilds", {}).data;
   const tags = useTagsFilter();
   const searchSplit = search?.split(" ") || [];
   return (
     <DataTable
+      onRowClick={(build) => nav(`/builds/${build.id}`)}
       data={
         builds?.filter((resource) =>
           tags.every((tag) => resource.tags.includes(tag)) &&

frontend/src/components/resources/builder/index.tsx

@@ -16,7 +16,7 @@ import {
 } from "@ui/select";
 import { Cloud, Bot, Factory, AlertTriangle } from "lucide-react";
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { BuilderConfig, DeleteBuilder } from "./config";
 import { CopyResource, ResourceLink } from "@components/util";
 
@@ -57,11 +57,13 @@ export const BuilderComponents: RequiredResourceComponents = {
     ),
   },
   Table: ({ search }) => {
+    const nav = useNavigate();
     const tags = useTagsFilter();
     const builders = useRead("ListBuilders", {}).data;
     const searchSplit = search?.split(" ") || [];
     return (
       <DataTable
+        onRowClick={(builder) => nav(`/builders/${builder.id}`)}
         data={
           builders?.filter((resource) =>
             tags.every((tag) => resource.tags.includes(tag)) &&

frontend/src/components/resources/deployment/table.tsx

@@ -8,6 +8,7 @@ import {
   text_color_class_by_intention,
 } from "@lib/color";
 import { snake_case_to_upper_space_case } from "@lib/formatting";
+import { useNavigate } from "react-router-dom";
 
 export const DeploymentTable = ({
   deployments,
@@ -16,13 +17,16 @@ export const DeploymentTable = ({
   deployments: Types.DeploymentListItem[] | undefined;
   search: string | undefined;
 }) => {
+  const nav = useNavigate();
   const tags = useTagsFilter();
   const searchSplit = search?.split(" ") || [];
   return (
     <DataTable
+      onRowClick={(deployment) => nav(`/deployments/${deployment.id}`)}
       data={
         deployments?.filter((resource) =>
-          tags.every((tag) => resource.tags.includes(tag)) && searchSplit.length > 0
+          tags.every((tag) => resource.tags.includes(tag)) &&
+          searchSplit.length > 0
             ? searchSplit.every((search) => resource.name.includes(search))
             : true
         ) ?? []

frontend/src/components/resources/procedure/table.tsx

@@ -2,13 +2,16 @@ import { useRead } from "@lib/hooks";
 import { DataTable } from "@ui/data-table";
 import { ProcedureComponents } from ".";
 import { TagsWithBadge, useTagsFilter } from "@components/tags";
+import { useNavigate } from "react-router-dom";
 
 export const ProcedureTable = ({ search }: { search: string | undefined }) => {
+  const nav = useNavigate();
   const tags = useTagsFilter();
   const procedures = useRead("ListProcedures", {}).data;
   const searchSplit = search?.split(" ") || [];
   return (
     <DataTable
+      onRowClick={(procedure) => nav(`/procedures/${procedure.id}`)}
       data={
         procedures?.filter((resource) =>
           tags.every((tag) => resource.tags.includes(tag)) &&

frontend/src/components/resources/repo/index.tsx

@@ -4,7 +4,7 @@ import { RequiredResourceComponents } from "@types";
 import { Card, CardDescription, CardHeader, CardTitle } from "@ui/card";
 import { DataTable } from "@ui/data-table";
 import { AlertTriangle, GitBranch } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { DeleteRepo, RepoConfig } from "./config";
 import { CopyResource, ResourceLink } from "@components/util";
 import { useState } from "react";
@@ -36,11 +36,13 @@ export const RepoComponents: RequiredResourceComponents = {
     ),
   },
   Table: ({ search }) => {
+    const nav = useNavigate();
     const tags = useTagsFilter();
     const repos = useRead("ListRepos", {}).data;
     const searchSplit = search?.split(" ") || [];
     return (
       <DataTable
+        onRowClick={(repo) => nav(`/repos/${repo.id}`)}
         data={
           repos?.filter((resource) =>
             tags.every((tag) => resource.tags.includes(tag)) &&

frontend/src/components/resources/server/table.tsx

@@ -3,14 +3,16 @@ import { useRead } from "@lib/hooks";
 import { DataTable } from "@ui/data-table";
 import { ServerComponents } from ".";
 import { ResourceComponents } from "..";
+import { useNavigate } from "react-router-dom";
 
 export const ServerTable = ({ search }: { search: string | undefined }) => {
+  const nav = useNavigate();
   const servers = useRead("ListServers", {}).data;
   const tags = useTagsFilter();
   const searchSplit = search?.split(" ") || [];
   return (
     <DataTable
-      // onRowClick={({ id }) => nav(`/servers/${id}`)}
+      onRowClick={(server) => nav(`/servers/${server.id}`)}
       data={
         servers?.filter((resource) =>
           tags.every((tag) => resource.tags.includes(tag)) &&