add repos tab to server page

bin/core/src/resource/repo.rs

@@ -58,6 +58,7 @@ impl super::MonitorResource for Repo {
       tags: repo.tags,
       resource_type: ResourceTargetVariant::Repo,
       info: RepoListItemInfo {
+        server_id: repo.config.server_id,
         last_pulled_at: repo.info.last_pulled_at,
         repo: repo.config.repo,
         branch: repo.config.branch,

client/core/rs/src/entities/repo.rs

@@ -19,6 +19,8 @@ pub type RepoListItem = ResourceListItem<RepoListItemInfo>;
 #[typeshare]
 #[derive(Serialize, Deserialize, Debug, Clone, Default)]
 pub struct RepoListItemInfo {
+  /// The server that repo sits on.
+  pub server_id: String,
   /// Repo last cloned / pulled timestamp in ms.
   pub last_pulled_at: I64,
   /// The configured github repo

client/core/ts/src/types.ts

@@ -767,6 +767,8 @@ export enum RepoState {
 }
 
 export interface RepoListItemInfo {
+	/** The server that repo sits on. */
+	server_id: string;
 	/** Repo last cloned / pulled timestamp in ms. */
 	last_pulled_at: I64;
 	/** The configured github repo */

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

@@ -33,7 +33,10 @@ export const RepoComponents: RequiredResourceComponents = {
 
   New: () => <NewResource type="Repo" />,
 
-  Table: RepoTable,
+  Table: ({ search }) => {
+    const repos = useRead("ListRepos", {}).data;
+    return <RepoTable repos={repos} search={search} />;
+  },
 
   Icon: ({ id }) => <RepoIcon id={id} size={4} />,
   BigIcon: ({ id }) => <RepoIcon id={id} size={8} />,

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

@@ -1,11 +1,22 @@
-import { useFilterResources, useRead } from "@lib/hooks";
+import { useFilterResources } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { ResourceLink } from "../common";
 import { TagsWithBadge } from "@components/tags";
 import { RepoComponents } from ".";
+import { Types } from "@monitor/client";
 
-export const RepoTable = ({ search }: { search?: string }) => {
-  const repos = useRead("ListRepos", {}).data;
+export const RepoTable = ({
+  repos,
+  search,
+}: {
+  search?: string;
+  repos: Types.RepoListItem[] | undefined;
+}) => {
+  // const servers = useRead("ListServers", {}).data;
+  // const serverName = useCallback(
+  //   (id: string) => servers?.find((server) => server.id === id)?.name,
+  //   [servers]
+  // );
   const filtered = useFilterResources(repos, search);
   return (
     <DataTable

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

@@ -30,6 +30,7 @@ import { Card, CardHeader } from "@ui/card";
 import { Button } from "@ui/button";
 import { useState } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ui/tabs";
+import { RepoTable } from "../repo/table";
 
 export const useServer = (id?: string) =>
   useRead("ListServers", {}, { refetchInterval: 5000 }).data?.find(
@@ -48,57 +49,55 @@ const _ServerIcon = ({ id, size }: { id?: string; size: number }) => {
   );
 };
 
-const ConfigOrDeployments = ({ id }: { id: string }) => {
+const ConfigOrChildResources = ({ id }: { id: string }) => {
   const [view, setView] = useState("Config");
   const deployments = useRead("ListDeployments", {}).data?.filter(
     (deployment) => deployment.info.server_id === id
   );
   const deploymentsDisabled = (deployments?.length || 0) === 0;
+  const repos = useRead("ListRepos", {}).data?.filter(
+    (repo) => repo.info.server_id === id
+  );
+  const reposDisabled = (repos?.length || 0) === 0;
+  const currentView =
+    (view === "Deployments" && deploymentsDisabled) ||
+    (view === "Repos" && reposDisabled)
+      ? "Config"
+      : view;
+  const tabsList = (
+    <TabsList className="justify-start w-fit">
+      <TabsTrigger value="Config" className="w-[110px]">
+        Config
+      </TabsTrigger>
+      <TabsTrigger
+        value="Deployments"
+        className="w-[110px]"
+        disabled={deploymentsDisabled}
+      >
+        Deployments
+      </TabsTrigger>
+      <TabsTrigger value="Repos" className="w-[110px]" disabled={reposDisabled}>
+        Repos
+      </TabsTrigger>
+    </TabsList>
+  );
   return (
-    <Tabs
-      value={deploymentsDisabled ? "Config" : view}
-      onValueChange={setView}
-      className="grid gap-4"
-    >
+    <Tabs value={currentView} onValueChange={setView} className="grid gap-4">
       <TabsContent value="Config">
-        <ServerConfig
-          id={id}
-          titleOther={
-            <TabsList className="justify-start w-fit">
-              <TabsTrigger value="Config" className="w-[110px]">
-                Config
-              </TabsTrigger>
-              <TabsTrigger
-                value="Deployments"
-                className="w-[110px]"
-                disabled={deploymentsDisabled}
-              >
-                Deployments
-              </TabsTrigger>
-            </TabsList>
-          }
-        />
+        <ServerConfig id={id} titleOther={tabsList} />
       </TabsContent>
+
       <TabsContent value="Deployments">
-        <Section
-          titleOther={
-            <TabsList className="justify-start w-fit">
-              <TabsTrigger value="Config" className="w-[110px]">
-                Config
-              </TabsTrigger>
-              <TabsTrigger
-                value="Deployments"
-                className="w-[110px]"
-                disabled={deploymentsDisabled}
-              >
-                Deployments
-              </TabsTrigger>
-            </TabsList>
-          }
-        >
+        <Section titleOther={tabsList}>
           <DeploymentTable deployments={deployments} />
         </Section>
       </TabsContent>
+
+      <TabsContent value="Repos">
+        <Section titleOther={tabsList}>
+          <RepoTable repos={repos} />
+        </Section>
+      </TabsContent>
     </Tabs>
   );
 };
@@ -261,7 +260,7 @@ export const ServerComponents: RequiredResourceComponents = {
     // },
   },
 
-  Config: ConfigOrDeployments,
+  Config: ConfigOrChildResources,
 
   DangerZone: ({ id }) => (
     <>