github-starred/komodo
2
0
Fork 1
mirror of https://github.com/moghtech/komodo.git synced 2026-04-28 11:49:39 -05:00
Code Issues 3.1k Packages Projects Releases 103 Wiki Activity

rest of tabs also use mobile friendly

Browse Source
This commit is contained in:
mbecker20
2025-10-19 12:11:11 -07:00
parent 60bd47834e
commit 4f8d1c22cc
3 changed files with 157 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/src/components/resources/server/info/index.tsx
View File

@@ -1,5 +1,5 @@
import { Section } from "@components/layouts";
import { ReactNode, useState } from "react";
import { ReactNode, useMemo, useState } from "react";
import { Networks } from "./networks";
import { useServer } from "..";
import { Types } from "komodo_client";
@@ -7,7 +7,12 @@ import { useLocalStorage } from "@lib/hooks";
import { Images } from "./images";
import { Containers } from "./containers";
import { Volumes } from "./volumes";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ui/tabs";
import {
MobileFriendlyTabsSelector,
TabNoContent,
} from "@ui/mobile-friendly-tabs";
type ServerInfoView = "Containers" | "Networks" | "Volumes" | "Images";
export const ServerInfo = ({
id,
@@ -18,9 +23,10 @@ export const ServerInfo = ({
}) => {
const _search = useState("");
const state = useServer(id)?.info.state ?? Types.ServerState.NotOk;
const [show2, setShow2] = useLocalStorage<
"Containers" | "Networks" | "Volumes" | "Images"
>("server-info-show-config-v2", "Containers");
const [view, setView] = useLocalStorage<ServerInfoView>(
"server-info-view-v1",
"Containers"
);
if ([Types.ServerState.NotOk, Types.ServerState.Disabled].includes(state)) {
return (
@@ -32,39 +38,41 @@ export const ServerInfo = ({
);
}
const tabsList = (
<TabsList className="justify-start w-fit">
<TabsTrigger value="Containers" className="w-[110px]">
Containers
</TabsTrigger>
<TabsTrigger value="Networks" className="w-[110px]">
Networks
</TabsTrigger>
<TabsTrigger value="Volumes" className="w-[110px]">
Volumes
</TabsTrigger>
<TabsTrigger value="Images" className="w-[110px]">
Images
</TabsTrigger>
</TabsList>
const tabsNoContent = useMemo<TabNoContent[]>(
() => [
{
value: "Containers",
},
{
value: "Networks",
},
{
value: "Volumes",
},
{
value: "Images",
},
],
[]
);
return (
<Section titleOther={titleOther}>
<Tabs value={show2} onValueChange={setShow2 as any}>
<TabsContent value="Containers">
<Containers id={id} titleOther={tabsList} _search={_search} />
</TabsContent>
<TabsContent value="Networks">
<Networks id={id} titleOther={tabsList} _search={_search} />
</TabsContent>
<TabsContent value="Volumes">
<Volumes id={id} titleOther={tabsList} _search={_search} />
</TabsContent>
<TabsContent value="Images">
<Images id={id} titleOther={tabsList} _search={_search} />
</TabsContent>
</Tabs>
</Section>
const Selector = (
<MobileFriendlyTabsSelector
tabs={tabsNoContent}
value={view}
onValueChange={setView as any}
tabsTriggerClassname="w-[110px]"
/>
);
switch (view) {
case "Containers":
return <Containers id={id} titleOther={Selector} _search={_search} />;
case "Networks":
return <Networks id={id} titleOther={Selector} _search={_search} />;
case "Volumes":
return <Volumes id={id} titleOther={Selector} _search={_search} />;
case "Images":
return <Images id={id} titleOther={Selector} _search={_search} />;
}
};

110
frontend/src/pages/server-info/container/index.tsx
View File

@@ -33,10 +33,13 @@ import { UsableResource } from "@types";
import { Fragment } from "react/jsx-runtime";
import { usePermissions } from "@lib/hooks";
import { ResourceNotifications } from "@pages/resource-notifications";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ui/tabs";
import { ContainerTerminal } from "@components/terminal/container";
import { ContainerInspect } from "./inspect";
import { useMemo } from "react";
import {
MobileFriendlyTabsSelector,
TabNoContent,
} from "@ui/mobile-friendly-tabs";
export default function ContainerPage() {
const { type, id, container } = useParams() as {
@@ -211,6 +214,8 @@ const ContainerPageInner = ({
);
};
type ContainerTabsView = "Log" | "Inspect" | "Terminal";
const ContainerTabs = ({
server,
container,
@@ -220,7 +225,7 @@ const ContainerTabs = ({
container: string;
state: Types.ContainerStateStatusEnum;
}) => {
const [_view, setView] = useLocalStorage<"Log" | "Inspect" | "Terminal">(
const [_view, setView] = useLocalStorage<ContainerTabsView>(
`server-${server}-${container}-tabs-v1`,
"Log"
);
@@ -243,39 +248,44 @@ const ContainerTabs = ({
(terminalDisabled && _view === "Terminal")
? "Log"
: _view;
const tabs = useMemo(() => {
return (
<TabsList className="justify-start w-fit">
<TabsTrigger value="Log" className="w-[110px]" disabled={logDisabled}>
Log
</TabsTrigger>
{specificInspect && (
<TabsTrigger
value="Inspect"
className="w-[110px]"
disabled={inspectDisabled}
>
Inspect
</TabsTrigger>
)}
{specificTerminal && (
<TabsTrigger
value="Terminal"
className="w-[110px]"
disabled={terminalDisabled}
>
Terminal
</TabsTrigger>
)}
</TabsList>
);
}, [
logDisabled,
specificInspect,
inspectDisabled,
specificTerminal,
terminalDisabled,
]);
const tabsNoContent = useMemo<TabNoContent[]>(
() => [
{
value: "Log",
hidden: !specificLogs,
disabled: logDisabled,
},
{
value: "Inspect",
hidden: !specificInspect,
disabled: inspectDisabled,
},
{
value: "Terminal",
hidden: !specificTerminal,
disabled: terminalDisabled,
},
],
[
specificLogs,
logDisabled,
specificInspect,
inspectDisabled,
specificTerminal,
terminalDisabled,
]
);
const Selector = (
<MobileFriendlyTabsSelector
tabs={tabsNoContent}
value={view}
onValueChange={setView as any}
tabsTriggerClassname="w-[110px]"
/>
);
const terminalQuery = useMemo(
() =>
({
@@ -289,24 +299,28 @@ const ContainerTabs = ({
}) as ConnectExecQuery,
[server, container]
);
return (
<Tabs value={view} onValueChange={setView as any}>
<TabsContent value="Log">
switch (view) {
case "Log":
return (
<ContainerLogs
id={server}
container_name={container}
titleOther={tabs}
titleOther={Selector}
disabled={logDisabled}
/>
</TabsContent>
<TabsContent value="Inspect">
<ContainerInspect id={server} container={container} titleOther={tabs} />
</TabsContent>
<TabsContent value="Terminal">
<ContainerTerminal query={terminalQuery} titleOther={tabs} />
</TabsContent>
</Tabs>
);
);
case "Inspect":
return (
<ContainerInspect
id={server}
container={container}
titleOther={Selector}
/>
);
case "Terminal":
return <ContainerTerminal query={terminalQuery} titleOther={Selector} />;
}
};
const AttachedResource = ({

91
frontend/src/pages/stack-service/index.tsx
View File

@@ -34,11 +34,14 @@ import { ExportButton } from "@components/export";
import { ContainerPortLink, DockerResourceLink } from "@components/util";
import { ResourceNotifications } from "@pages/resource-notifications";
import { Fragment } from "react/jsx-runtime";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ui/tabs";
import { ContainerTerminal } from "@components/terminal/container";
import { useServer } from "@components/resources/server";
import { StackServiceInspect } from "./inspect";
import { useMemo } from "react";
import {
MobileFriendlyTabsSelector,
TabNoContent,
} from "@ui/mobile-friendly-tabs";
type IdServiceComponent = React.FC<{ id: string; service?: string }>;
@@ -222,6 +225,8 @@ const StackServicePageInner = ({
);
};
type StackServiceTabsView = "Log" | "Inspect" | "Terminal";
const StackServiceTabs = ({
stack,
service,
@@ -231,7 +236,7 @@ const StackServiceTabs = ({
service: string;
container_state: Types.ContainerStateStatusEnum;
}) => {
const [_view, setView] = useLocalStorage<"Log" | "Inspect" | "Terminal">(
const [_view, setView] = useLocalStorage<StackServiceTabsView>(
`stack-${stack.id}-${service}-tabs-v1`,
"Log"
);
@@ -255,33 +260,27 @@ const StackServiceTabs = ({
(terminalDisabled && _view === "Terminal")
? "Log"
: _view;
const tabs = useMemo(
() => (
<TabsList className="justify-start w-fit">
<TabsTrigger value="Log" className="w-[110px]" disabled={logDisabled}>
Log
</TabsTrigger>
{specificInspect && (
<TabsTrigger
value="Inspect"
className="w-[110px]"
disabled={inspectDisabled}
>
Inspect
</TabsTrigger>
)}
{specificTerminal && (
<TabsTrigger
value="Terminal"
className="w-[110px]"
disabled={terminalDisabled}
>
Terminal
</TabsTrigger>
)}
</TabsList>
),
const tabsNoContent = useMemo<TabNoContent[]>(
() => [
{
value: "Log",
hidden: !specificLogs,
disabled: logDisabled,
},
{
value: "Inspect",
hidden: !specificInspect,
disabled: inspectDisabled,
},
{
value: "Terminal",
hidden: !specificTerminal,
disabled: terminalDisabled,
},
],
[
specificLogs,
logDisabled,
specificInspect,
inspectDisabled,
@@ -289,6 +288,16 @@ const StackServiceTabs = ({
terminalDisabled,
]
);
const Selector = (
<MobileFriendlyTabsSelector
tabs={tabsNoContent}
value={view}
onValueChange={setView as any}
tabsTriggerClassname="w-[110px]"
/>
);
const terminalQuery = useMemo(
() =>
({
@@ -302,26 +311,26 @@ const StackServiceTabs = ({
}) as ConnectExecQuery,
[stack.id, service]
);
return (
<Tabs value={view} onValueChange={setView as any}>
<TabsContent value="Log">
switch (view) {
case "Log":
return (
<StackServiceLogs
id={stack.id}
service={service}
titleOther={tabs}
titleOther={Selector}
disabled={logDisabled}
/>
</TabsContent>
<TabsContent value="Inspect">
);
case "Inspect":
return (
<StackServiceInspect
id={stack.id}
service={service}
titleOther={tabs}
titleOther={Selector}
/>
</TabsContent>
<TabsContent value="Terminal">
<ContainerTerminal query={terminalQuery} titleOther={tabs} />
</TabsContent>
</Tabs>
);
);
case "Terminal":
return <ContainerTerminal query={terminalQuery} titleOther={Selector} />;
}
};