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 (
+
+
+ )
+ }
+ >
+
+
+
+ );
+};