diff --git a/frontend/src/components/resources/server/tabs.tsx b/frontend/src/components/resources/server/tabs.tsx index 94791fd4c..60edb216d 100644 --- a/frontend/src/components/resources/server/tabs.tsx +++ b/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 ; case "Resources": - return ; + return ( + + ); case "Terminals": return ; } @@ -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 (
-
- ) - } - > - -
+
+ ) + } + > + +
[]>( () => [ - { - 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 ; case "Nodes": return ; case "Stacks": @@ -98,10 +96,12 @@ export const SwarmInfo = ({ ); case "Tasks": return ; - case "Secrets": - return ; case "Configs": return ; + case "Secrets": + return ; + case "Inspect": + return ; } }; diff --git a/frontend/src/components/resources/swarm/tabs.tsx b/frontend/src/components/resources/swarm/tabs.tsx index 097689d5e..f300e278b 100644 --- a/frontend/src/components/resources/swarm/tabs.tsx +++ b/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( @@ -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[]>( () => [ @@ -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 ; case "Info": return ; + case "Resources": + return ( + + ); } }; + +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 ( +
+
+ ) + } + > + +
+
+ ) + } + > + +
+
+ ); +};