repo table just show repo and branch

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

@@ -12,14 +12,16 @@ import { Types } from "@monitor/client";
 import { useBuilder } from "../builder";
 
 export const CloneRepo = ({ id }: { id: string }) => {
-  const hash = useRepo(id)?.info.latest_hash;
-  const isCloned = (hash?.length || 0) > 0;
   const { mutate, isPending } = useExecute("CloneRepo");
   const cloning = useRead(
     "GetRepoActionState",
     { repo: id },
     { refetchInterval: 5000 }
   ).data?.cloning;
+  const info = useRepo(id)?.info;
+  if (!info?.server_id) return null;
+  const hash = info?.latest_hash;
+  const isCloned = (hash?.length || 0) > 0;
   const pending = isPending || cloning;
   return (
     <ConfirmButton
@@ -45,7 +47,9 @@ export const PullRepo = ({ id }: { id: string }) => {
     { repo: id },
     { refetchInterval: 5000 }
   ).data?.pulling;
-  const hash = useRepo(id)?.info.latest_hash;
+  const info = useRepo(id)?.info;
+  if (!info?.server_id) return null;
+  const hash = info?.latest_hash;
   const isCloned = (hash?.length || 0) > 0;
   if (!isCloned) return null;
   const pending = isPending || pulling;

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

@@ -2,6 +2,7 @@ import { useInvalidate, useRead, useWrite } from "@lib/hooks";
 import { RequiredResourceComponents } from "@types";
 import { Card } from "@ui/card";
 import {
+  Factory,
   FolderGit,
   GitBranch,
   Loader2,
@@ -25,6 +26,7 @@ import { StatusBadge } from "@components/util";
 import { Badge } from "@ui/badge";
 import { useToast } from "@ui/use-toast";
 import { Button } from "@ui/button";
+import { useBuilder } from "../builder";
 
 export const useRepo = (id?: string) =>
   useRead("ListRepos", {}, { refetchInterval: 5000 }).data?.find(
@@ -195,6 +197,30 @@ export const RepoComponents: RequiredResourceComponents = {
   },
 
   Info: {
+    Server: ({ id }) => {
+      const info = useRepo(id)?.info;
+      const server = useServer(info?.server_id);
+      return server?.id ? (
+        <ResourceLink type="Server" id={server?.id} />
+      ) : (
+        <div className="flex gap-2 items-center">
+          <Server className="w-4 h-4" />
+          <div>No Server</div>
+        </div>
+      );
+    },
+    Builder: ({ id }) => {
+      const info = useRepo(id)?.info;
+      const builder = useBuilder(info?.builder_id);
+      return builder?.id ? (
+        <ResourceLink type="Builder" id={builder?.id} />
+      ) : (
+        <div className="flex gap-2 items-center">
+          <Factory className="w-4 h-4" />
+          <div>No Builder</div>
+        </div>
+      );
+    },
     Repo: ({ id }) => {
       const repo = useRepo(id)?.info.repo;
       return (
@@ -204,24 +230,12 @@ export const RepoComponents: RequiredResourceComponents = {
         </div>
       );
     },
-    // Branch: ({ id }) => {
-    //   const branch = useRepo(id)?.info.branch;
-    //   return (
-    //     <div className="flex items-center gap-2">
-    //       <FolderGit className="w-4 h-4" />
-    //       {branch}
-    //     </div>
-    //   );
-    // },
-    Server: ({ id }) => {
-      const info = useRepo(id)?.info;
-      const server = useServer(info?.server_id);
-      return server?.id ? (
-        <ResourceLink type="Server" id={server?.id} />
-      ) : (
-        <div className="flex gap-2 items-center">
-          <Server className="w-4 h-4" />
-          <div>Unknown Server</div>
+    Branch: ({ id }) => {
+      const branch = useRepo(id)?.info.branch;
+      return (
+        <div className="flex items-center gap-2">
+          <GitBranch className="w-4 h-4" />
+          {branch}
         </div>
       );
     },

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

@@ -1,17 +1,10 @@
-import { useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { ResourceLink } from "../common";
 import { TableTags } from "@components/tags";
 import { RepoComponents } from ".";
 import { Types } from "@monitor/client";
-import { useCallback } from "react";
 
 export const RepoTable = ({ repos }: { repos: Types.RepoListItem[] }) => {
-  const servers = useRead("ListServers", {}).data;
-  const serverName = useCallback(
-    (id: string) => servers?.find((server) => server.id === id)?.name,
-    [servers]
-  );
   return (
     <DataTable
       tableKey="repos"
@@ -33,24 +26,9 @@ export const RepoTable = ({ repos }: { repos: Types.RepoListItem[] }) => {
           size: 200,
         },
         {
-          accessorKey: "info.server_id",
-          sortingFn: (a, b) => {
-            const sa = serverName(a.original.info.server_id);
-            const sb = serverName(b.original.info.server_id);
-
-            if (!sa && !sb) return 0;
-            if (!sa) return -1;
-            if (!sb) return 1;
-
-            if (sa > sb) return 1;
-            else if (sa < sb) return -1;
-            else return 0;
-          },
+          accessorKey: "info.branch",
           header: ({ column }) => (
-            <SortableHeader column={column} title="Server" />
-          ),
-          cell: ({ row }) => (
-            <ResourceLink type="Server" id={row.original.info.server_id} />
+            <SortableHeader column={column} title="Branch" />
           ),
           size: 200,
         },

frontend/src/pages/resource.tsx

@@ -139,7 +139,7 @@ const ResourceHeader = ({ type, id }: { type: UsableResource; id: string }) => {
             {infoEntries.map(([key, Info]) => (
               <div
                 key={key}
-                className="pr-4 border-r last:pr-0 last:border-none"
+                className="pr-4 text-sm border-r last:pr-0 last:border-none"
               >
                 <Info id={id} />
               </div>