add resources tab to swarms

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

@@ -30,6 +30,11 @@ export const ServerTabs = ({ id }: { id: string }) => {
   const terminalDisabled =
     !specificTerminal || (server_info?.terminals_disabled ?? true);
 
+  const stacks =
+    useRead("ListStacks", {}).data?.filter(
+      (stack) => stack.info.server_id === id
+    ) ?? [];
+  const noStacks = stacks.length === 0;
   const deployments =
     useRead("ListDeployments", {}).data?.filter(
       (deployment) => deployment.info.server_id === id
@@ -40,11 +45,6 @@ export const ServerTabs = ({ id }: { id: string }) => {
       (repo) => repo.info.server_id === id
     ) ?? [];
   const noRepos = repos.length === 0;
-  const stacks =
-    useRead("ListStacks", {}).data?.filter(
-      (stack) => stack.info.server_id === id
-    ) ?? [];
-  const noStacks = stacks.length === 0;
 
   const noResources = noDeployments && noRepos && noStacks;
 
@@ -88,7 +88,15 @@ export const ServerTabs = ({ id }: { id: string }) => {
     case "Docker":
       return <ServerInfo id={id} titleOther={Selector} />;
     case "Resources":
-      return <ServerTabsResources id={id} Selector={Selector} />;
+      return (
+        <ServerTabsResources
+          id={id}
+          stacks={stacks}
+          deployments={deployments}
+          repos={repos}
+          Selector={Selector}
+        />
+      );
     case "Terminals":
       return <ServerTabsTerminals id={id} Selector={Selector} />;
   }
@@ -97,39 +105,22 @@ export const ServerTabs = ({ id }: { id: string }) => {
 const ServerTabsResources = ({
   Selector,
   id,
+  stacks,
+  deployments,
+  repos,
 }: {
   Selector: ReactNode;
   id: string;
+  stacks: Types.StackListItem[];
+  deployments: Types.DeploymentListItem[];
+  repos: Types.RepoListItem[];
 }) => {
   const is_admin = useUser().data?.admin ?? false;
   const disable_non_admin_create =
     useRead("GetCoreInfo", {}).data?.disable_non_admin_create ?? true;
 
-  const deployments =
-    useRead("ListDeployments", {}).data?.filter(
-      (deployment) => deployment.info.server_id === id
-    ) ?? [];
-  const repos =
-    useRead("ListRepos", {}).data?.filter(
-      (repo) => repo.info.server_id === id
-    ) ?? [];
-  const stacks =
-    useRead("ListStacks", {}).data?.filter(
-      (stack) => stack.info.server_id === id
-    ) ?? [];
-
   return (
     <Section titleOther={Selector}>
-      <Section
-        title="Deployments"
-        actions={
-          (is_admin || !disable_non_admin_create) && (
-            <ResourceComponents.Deployment.New server_id={id} />
-          )
-        }
-      >
-        <DeploymentTable deployments={deployments} />
-      </Section>
       <Section
         title="Stacks"
         actions={
@@ -140,6 +131,16 @@ const ServerTabsResources = ({
       >
         <StackTable stacks={stacks} />
       </Section>
+      <Section
+        title="Deployments"
+        actions={
+          (is_admin || !disable_non_admin_create) && (
+            <ResourceComponents.Deployment.New server_id={id} />
+          )
+        }
+      >
+        <DeploymentTable deployments={deployments} />
+      </Section>
       <Section
         title="Repos"
         actions={

frontend/src/components/resources/swarm/info/index.tsx

@@ -16,13 +16,13 @@ import { SwarmConfigs } from "./configs";
 import { SwarmStacks } from "./stacks";
 
 type SwarmInfoView =
-  | "Inspect"
   | "Nodes"
   | "Stacks"
   | "Services"
   | "Tasks"
+  | "Configs"
   | "Secrets"
-  | "Configs";
+  | "Inspect";
 
 export const SwarmInfo = ({
   id,
@@ -50,9 +50,6 @@ export const SwarmInfo = ({
 
   const tabsNoContent = useMemo<TabNoContent<SwarmInfoView>[]>(
     () => [
-      {
-        value: "Inspect",
-      },
       {
         value: "Nodes",
       },
@@ -65,11 +62,14 @@ export const SwarmInfo = ({
       {
         value: "Tasks",
       },
+      {
+        value: "Configs",
+      },
       {
         value: "Secrets",
       },
       {
-        value: "Configs",
+        value: "Inspect",
       },
     ],
     []
@@ -86,8 +86,6 @@ export const SwarmInfo = ({
 
   const Component = () => {
     switch (view) {
-      case "Inspect":
-        return <SwarmInspect id={id} titleOther={Selector} />;
       case "Nodes":
         return <SwarmNodes id={id} titleOther={Selector} _search={_search} />;
       case "Stacks":
@@ -98,10 +96,12 @@ export const SwarmInfo = ({
         );
       case "Tasks":
         return <SwarmTasks id={id} titleOther={Selector} _search={_search} />;
-      case "Secrets":
-        return <SwarmSecrets id={id} titleOther={Selector} _search={_search} />;
       case "Configs":
         return <SwarmConfigs id={id} titleOther={Selector} _search={_search} />;
+      case "Secrets":
+        return <SwarmSecrets id={id} titleOther={Selector} _search={_search} />;
+      case "Inspect":
+        return <SwarmInspect id={id} titleOther={Selector} />;
     }
   };
 

frontend/src/components/resources/swarm/tabs.tsx

@@ -1,13 +1,18 @@
-import { useLocalStorage } from "@lib/hooks";
-import { useMemo } from "react";
+import { useLocalStorage, useRead, useUser } from "@lib/hooks";
+import { ReactNode, useMemo } from "react";
 import {
   MobileFriendlyTabsSelector,
   TabNoContent,
 } from "@ui/mobile-friendly-tabs";
 import { SwarmConfig } from "./config";
 import { SwarmInfo } from "./info";
+import { Section } from "@components/layouts";
+import { ResourceComponents } from "..";
+import { StackTable } from "../stack/table";
+import { DeploymentTable } from "../deployment/table";
+import { Types } from "komodo_client";
 
-type SwarmTabsView = "Config" | "Info";
+type SwarmTabsView = "Config" | "Info" | "Resources";
 
 export const SwarmTabs = ({ id }: { id: string }) => {
   const [view, setView] = useLocalStorage<SwarmTabsView>(
@@ -15,7 +20,17 @@ export const SwarmTabs = ({ id }: { id: string }) => {
     "Config"
   );
 
-  // const swarm_info = useSwarm(id)?.info;
+  const stacks =
+    useRead("ListStacks", {}).data?.filter(
+      (stack) => stack.info.swarm_id === id
+    ) ?? [];
+  const noStacks = stacks.length === 0;
+  const deployments =
+    useRead("ListDeployments", {}).data?.filter(
+      (deployment) => deployment.info.swarm_id === id
+    ) ?? [];
+  const noDeployments = deployments.length === 0;
+  const noResources = noDeployments && noStacks;
 
   const tabs = useMemo<TabNoContent<SwarmTabsView>[]>(
     () => [
@@ -25,6 +40,10 @@ export const SwarmTabs = ({ id }: { id: string }) => {
       {
         value: "Info",
       },
+      {
+        value: "Resources",
+        disabled: noResources,
+      },
     ],
     []
   );
@@ -43,5 +62,55 @@ export const SwarmTabs = ({ id }: { id: string }) => {
       return <SwarmConfig id={id} titleOther={Selector} />;
     case "Info":
       return <SwarmInfo id={id} titleOther={Selector} />;
+    case "Resources":
+      return (
+        <SwarmTabsResources
+          id={id}
+          stacks={stacks}
+          deployments={deployments}
+          Selector={Selector}
+        />
+      );
   }
 };
+
+const SwarmTabsResources = ({
+  Selector,
+  id,
+  stacks,
+  deployments,
+}: {
+  Selector: ReactNode;
+  id: string;
+  stacks: Types.StackListItem[];
+  deployments: Types.DeploymentListItem[];
+}) => {
+  const is_admin = useUser().data?.admin ?? false;
+  const disable_non_admin_create =
+    useRead("GetCoreInfo", {}).data?.disable_non_admin_create ?? true;
+
+  return (
+    <Section titleOther={Selector}>
+      <Section
+        title="Stacks"
+        actions={
+          (is_admin || !disable_non_admin_create) && (
+            <ResourceComponents.Stack.New swarm_id={id} />
+          )
+        }
+      >
+        <StackTable stacks={stacks} />
+      </Section>
+      <Section
+        title="Deployments"
+        actions={
+          (is_admin || !disable_non_admin_create) && (
+            <ResourceComponents.Deployment.New swarm_id={id} />
+          )
+        }
+      >
+        <DeploymentTable deployments={deployments} />
+      </Section>
+    </Section>
+  );
+};