mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-10-28 14:15:24 +00:00
718 lines
23 KiB
TypeScript
718 lines
23 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import React from "react";
|
|
import {
|
|
AlertCircle,
|
|
Box,
|
|
ExternalLink,
|
|
Grid3X3,
|
|
List as ListIcon,
|
|
RefreshCw,
|
|
Search,
|
|
} from "lucide-react";
|
|
import {
|
|
useConnectionRetry,
|
|
useHost,
|
|
useTranslation,
|
|
logActivity,
|
|
usePluginUiPreferences,
|
|
} from "@termix/plugin-sdk/frontend";
|
|
import {
|
|
Alert,
|
|
AlertDescription,
|
|
Button,
|
|
Card,
|
|
ConnectionLogProvider,
|
|
ConnectionScreen,
|
|
Input,
|
|
SSHAuthDialog,
|
|
Select2,
|
|
Separator,
|
|
TOTPDialog,
|
|
BrowserSignInDialog,
|
|
useAdaptivePolling,
|
|
useConnectionLog,
|
|
useTabsSafe,
|
|
} from "@termix/plugin-sdk/ui";
|
|
import { DockerApiError, useDockerApi, type ConnectResult } from "./docker-api";
|
|
import {
|
|
dockerEnabled,
|
|
hostTitle,
|
|
toDockerHost,
|
|
type DockerContainer,
|
|
type DockerHost,
|
|
type DockerValidation,
|
|
} from "./types";
|
|
import { ContainerList } from "./components/ContainerList.tsx";
|
|
import { ContainerTable } from "./components/ContainerTable.tsx";
|
|
import { ContainerDetail } from "./components/ContainerDetail.tsx";
|
|
|
|
interface DockerManagerProps {
|
|
host?: DockerHost;
|
|
title?: string;
|
|
isVisible?: boolean;
|
|
isTopbarOpen?: boolean;
|
|
embedded?: boolean;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
interface PromptState {
|
|
kind: "totp" | "browser";
|
|
sessionId: string;
|
|
prompt?: string;
|
|
isPassword?: boolean;
|
|
url?: string;
|
|
code?: string;
|
|
label?: string;
|
|
}
|
|
|
|
function newSessionId(): string {
|
|
return `docker-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
|
|
}
|
|
|
|
function DockerManagerInner({
|
|
host,
|
|
title,
|
|
isVisible = true,
|
|
isTopbarOpen = true,
|
|
embedded = false,
|
|
onClose,
|
|
}: DockerManagerProps): React.ReactElement {
|
|
const { t } = useTranslation();
|
|
const docker = useDockerApi();
|
|
const { addLog, setLogs, clearLogs } = useConnectionLog();
|
|
const { currentTab, removeTab } = useTabsSafe();
|
|
const { values: dockerPrefs, set: setDockerPref } = usePluginUiPreferences<{
|
|
viewMode: "list" | "detail";
|
|
containerLayout: "card" | "table";
|
|
}>();
|
|
|
|
// The shell's host list keeps the host current after an edit; a
|
|
// standalone window has no shell, so it keeps the host it was given.
|
|
const liveRecord = useHost(host?.id);
|
|
const currentHost = React.useMemo(
|
|
() =>
|
|
liveRecord
|
|
? toDockerHost(liveRecord as unknown as Record<string, unknown>)
|
|
: host,
|
|
[liveRecord, host],
|
|
);
|
|
const enabled = dockerEnabled(currentHost);
|
|
|
|
const [sessionId, setSessionId] = React.useState<string | null>(null);
|
|
const [containers, setContainers] = React.useState<DockerContainer[]>([]);
|
|
const containersSignatureRef = React.useRef("");
|
|
const [selectedContainer, setSelectedContainer] = React.useState<
|
|
string | null
|
|
>(null);
|
|
const [detailInitialTab, setDetailInitialTab] = React.useState<
|
|
"logs" | "stats" | "console"
|
|
>("logs");
|
|
const [containerLayout, setContainerLayout] = React.useState<
|
|
"card" | "table"
|
|
>(dockerPrefs.containerLayout);
|
|
|
|
const handleSetContainerLayout = React.useCallback(
|
|
(layout: "card" | "table") => {
|
|
setContainerLayout(layout);
|
|
setDockerPref("containerLayout", layout);
|
|
},
|
|
[setDockerPref],
|
|
);
|
|
const [isConnecting, setIsConnecting] = React.useState(false);
|
|
const [dockerValidation, setDockerValidation] =
|
|
React.useState<DockerValidation | null>(null);
|
|
const [isValidating, setIsValidating] = React.useState(false);
|
|
// Initial view follows the interface preset; switching it afterwards is a
|
|
// per-session choice.
|
|
const [viewMode, setViewMode] = React.useState<"list" | "detail">(
|
|
dockerPrefs.viewMode,
|
|
);
|
|
const [isLoadingContainers, setIsLoadingContainers] = React.useState(false);
|
|
const [hasLoadedContainersOnce, setHasLoadedContainersOnce] =
|
|
React.useState(false);
|
|
const [prompt, setPrompt] = React.useState<PromptState | null>(null);
|
|
const [showAuthDialog, setShowAuthDialog] = React.useState(false);
|
|
const [authReason, setAuthReason] = React.useState<
|
|
"no_keyboard" | "auth_failed" | "timeout"
|
|
>("no_keyboard");
|
|
const [search, setSearch] = React.useState("");
|
|
const [statusFilter, setStatusFilter] = React.useState("all");
|
|
const [retryCount, setRetryCount] = React.useState(0);
|
|
|
|
const activityLoggedRef = React.useRef(false);
|
|
|
|
const logDockerActivity = () => {
|
|
if (!currentHost?.id || activityLoggedRef.current) return;
|
|
activityLoggedRef.current = true;
|
|
logActivity("docker", currentHost.id, hostTitle(currentHost)).catch(() => {
|
|
activityLoggedRef.current = false;
|
|
});
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
setContainers([]);
|
|
setSelectedContainer(null);
|
|
setSessionId(null);
|
|
setDockerValidation(null);
|
|
setViewMode("list");
|
|
}, [host?.id]);
|
|
|
|
const retryRef = React.useRef<ReturnType<typeof useConnectionRetry> | null>(
|
|
null,
|
|
);
|
|
|
|
const validate = async (sid: string, clearAfter: boolean) => {
|
|
setSessionId(sid);
|
|
setIsValidating(true);
|
|
try {
|
|
const validation = await docker.validate(sid);
|
|
setDockerValidation(validation);
|
|
if (!validation.available) {
|
|
addLog({
|
|
type: "error",
|
|
stage: "validation",
|
|
message: validation.error || t("docker.error"),
|
|
details: validation.code
|
|
? `Error code: ${validation.code}`
|
|
: undefined,
|
|
});
|
|
retryRef.current?.markFailed();
|
|
} else {
|
|
logDockerActivity();
|
|
if (clearAfter) setTimeout(() => clearLogs(), 1000);
|
|
retryRef.current?.markConnected();
|
|
}
|
|
} finally {
|
|
setIsValidating(false);
|
|
}
|
|
};
|
|
|
|
/** Acts on one step of a connect, whichever request it answered. */
|
|
const applyConnectResult = async (
|
|
sid: string,
|
|
result: ConnectResult,
|
|
clearAfter: boolean,
|
|
) => {
|
|
if (result.connectionLogs) setLogs(result.connectionLogs);
|
|
|
|
if (result.requires_browser_sign_in) {
|
|
setPrompt({
|
|
kind: "browser",
|
|
sessionId: sid,
|
|
url: result.url || "",
|
|
code: result.code || "",
|
|
label: result.label || "",
|
|
});
|
|
return;
|
|
}
|
|
if (result.requires_totp) {
|
|
if (result.retry) {
|
|
addLog({
|
|
type: "error",
|
|
stage: "auth",
|
|
message: t("docker.totpVerificationFailed"),
|
|
});
|
|
}
|
|
setPrompt({
|
|
kind: "totp",
|
|
sessionId: sid,
|
|
prompt: result.prompt || t("docker.verificationCodePrompt"),
|
|
isPassword: result.isPassword,
|
|
});
|
|
return;
|
|
}
|
|
if (result.status === "auth_required") {
|
|
setAuthReason(
|
|
result.reason === "no_keyboard" ? "no_keyboard" : "auth_failed",
|
|
);
|
|
setShowAuthDialog(true);
|
|
return;
|
|
}
|
|
setPrompt(null);
|
|
await validate(sid, clearAfter);
|
|
};
|
|
|
|
const reportFailure = (error: unknown, fallback: string) => {
|
|
if (error instanceof DockerApiError && error.connectionLogs?.length) {
|
|
setLogs(error.connectionLogs);
|
|
} else {
|
|
addLog({
|
|
type: "error",
|
|
stage: "connection",
|
|
message: error instanceof Error ? error.message : fallback,
|
|
});
|
|
}
|
|
retryRef.current?.markFailed();
|
|
};
|
|
|
|
const connect = async (credentials?: {
|
|
userProvidedPassword?: string;
|
|
userProvidedSshKey?: string;
|
|
userProvidedKeyPassword?: string;
|
|
}) => {
|
|
if (!currentHost?.id) return;
|
|
const sid = newSessionId();
|
|
setIsConnecting(true);
|
|
try {
|
|
const result = await docker.connect(sid, currentHost.id, credentials);
|
|
await applyConnectResult(sid, result, !credentials);
|
|
} catch (error) {
|
|
reportFailure(error, t("docker.connectionFailed"));
|
|
} finally {
|
|
setIsConnecting(false);
|
|
}
|
|
};
|
|
|
|
const initializingRef = React.useRef(false);
|
|
|
|
React.useEffect(() => {
|
|
if (!currentHost?.id || !enabled) return;
|
|
if (initializingRef.current || sessionId) return;
|
|
initializingRef.current = true;
|
|
clearLogs();
|
|
void connect();
|
|
|
|
return () => {
|
|
initializingRef.current = false;
|
|
};
|
|
}, [currentHost?.id, enabled, retryCount]);
|
|
|
|
React.useEffect(() => {
|
|
if (!sessionId) return;
|
|
return () => {
|
|
docker.disconnect(sessionId).catch(() => {});
|
|
};
|
|
}, [sessionId]);
|
|
|
|
React.useEffect(() => {
|
|
if (!sessionId || !isVisible) return;
|
|
const keepalive = setInterval(
|
|
() => {
|
|
docker.keepalive(sessionId).catch(() => {});
|
|
},
|
|
10 * 60 * 1000,
|
|
);
|
|
return () => clearInterval(keepalive);
|
|
}, [sessionId, isVisible]);
|
|
|
|
const refreshContainers = React.useCallback(async () => {
|
|
if (!sessionId) return;
|
|
try {
|
|
setContainers(await docker.listContainers(sessionId, true));
|
|
} catch {
|
|
// the next poll tries again
|
|
}
|
|
}, [sessionId, docker]);
|
|
|
|
React.useEffect(() => {
|
|
setHasLoadedContainersOnce(false);
|
|
}, [sessionId]);
|
|
|
|
useAdaptivePolling(
|
|
async () => {
|
|
if (!sessionId) return;
|
|
setIsLoadingContainers((loading) =>
|
|
hasLoadedContainersOnce ? loading : true,
|
|
);
|
|
const data = await docker.listContainers(sessionId, true);
|
|
const signature = JSON.stringify(data);
|
|
const changed = signature !== containersSignatureRef.current;
|
|
containersSignatureRef.current = signature;
|
|
setContainers(data);
|
|
setIsLoadingContainers(false);
|
|
setHasLoadedContainersOnce(true);
|
|
return changed;
|
|
},
|
|
{
|
|
minIntervalMs: 5000,
|
|
maxIntervalMs: 30000,
|
|
stablePollsPerStep: 3,
|
|
},
|
|
!!sessionId && isVisible && !!dockerValidation?.available,
|
|
{
|
|
onError: () => {
|
|
setIsLoadingContainers(false);
|
|
setHasLoadedContainersOnce(true);
|
|
},
|
|
},
|
|
);
|
|
|
|
const handleBack = React.useCallback(() => {
|
|
setViewMode("list");
|
|
setSelectedContainer(null);
|
|
}, []);
|
|
|
|
const closeTab = () => {
|
|
if (currentTab !== null) removeTab(currentTab);
|
|
};
|
|
|
|
const handleTotpSubmit = async (code: string) => {
|
|
if (!prompt || prompt.kind !== "totp" || !code) return;
|
|
const sid = prompt.sessionId;
|
|
setPrompt(null);
|
|
setIsConnecting(true);
|
|
try {
|
|
await applyConnectResult(sid, await docker.answerTotp(sid, code), false);
|
|
} catch (error) {
|
|
reportFailure(error, t("docker.totpVerificationFailed"));
|
|
} finally {
|
|
setIsConnecting(false);
|
|
}
|
|
};
|
|
|
|
const handleBrowserSignInContinue = async () => {
|
|
if (!prompt || prompt.kind !== "browser") return;
|
|
const sid = prompt.sessionId;
|
|
setPrompt(null);
|
|
setIsConnecting(true);
|
|
try {
|
|
await applyConnectResult(
|
|
sid,
|
|
await docker.continueBrowserSignIn(sid),
|
|
false,
|
|
);
|
|
} catch (error) {
|
|
reportFailure(error, t("docker.browserSignInFailed"));
|
|
} finally {
|
|
setIsConnecting(false);
|
|
}
|
|
};
|
|
|
|
const handlePromptCancel = () => {
|
|
const sid = prompt?.sessionId;
|
|
setPrompt(null);
|
|
setIsConnecting(false);
|
|
if (sid) docker.disconnect(sid).catch(() => {});
|
|
closeTab();
|
|
};
|
|
|
|
const handleBrowserSignInOpenUrl = () => {
|
|
if (prompt?.url) window.open(prompt.url, "_blank", "noopener,noreferrer");
|
|
};
|
|
|
|
const handleAuthSubmit = async (credentials: {
|
|
password?: string;
|
|
sshKey?: string;
|
|
keyPassword?: string;
|
|
}) => {
|
|
setShowAuthDialog(false);
|
|
await connect({
|
|
userProvidedPassword: credentials.password,
|
|
userProvidedSshKey: credentials.sshKey,
|
|
userProvidedKeyPassword: credentials.keyPassword,
|
|
});
|
|
};
|
|
|
|
const handleAuthCancel = () => {
|
|
setShowAuthDialog(false);
|
|
setIsConnecting(false);
|
|
onClose?.();
|
|
};
|
|
|
|
const handleRetry = () => {
|
|
initializingRef.current = false;
|
|
setSessionId(null);
|
|
setDockerValidation(null);
|
|
clearLogs();
|
|
setRetryCount((c) => c + 1);
|
|
};
|
|
|
|
const dockerConnectRetry = useConnectionRetry({
|
|
connect: () => {
|
|
handleRetry();
|
|
},
|
|
enabled: enabled && !prompt && !showAuthDialog,
|
|
autoStart: false,
|
|
});
|
|
retryRef.current = dockerConnectRetry;
|
|
|
|
const topMarginPx = isTopbarOpen ? 74 : 16;
|
|
const leftMarginPx = 8;
|
|
const bottomMarginPx = 8;
|
|
|
|
const wrapperStyle: React.CSSProperties = embedded
|
|
? { opacity: isVisible ? 1 : 0, height: "100%", width: "100%" }
|
|
: {
|
|
opacity: isVisible ? 1 : 0,
|
|
marginLeft: leftMarginPx,
|
|
marginRight: 17,
|
|
marginTop: topMarginPx,
|
|
marginBottom: bottomMarginPx,
|
|
height: `calc(100vh - ${topMarginPx + bottomMarginPx}px)`,
|
|
};
|
|
|
|
const containerClass = embedded
|
|
? "h-full w-full text-foreground overflow-hidden bg-transparent"
|
|
: "bg-canvas text-foreground border-2 border-edge overflow-hidden";
|
|
|
|
if (!enabled) {
|
|
return (
|
|
<div style={wrapperStyle} className={`${containerClass} relative`}>
|
|
<div className="h-full w-full flex flex-col flex-1 min-h-0 overflow-hidden">
|
|
<div className="flex-1 overflow-y-auto px-3 py-3 flex flex-col gap-3">
|
|
<Card className="flex-row items-center justify-between px-3 py-3 shrink-0 gap-0">
|
|
<div className="flex items-center gap-3">
|
|
<div className="size-10 border border-border bg-muted flex items-center justify-center shrink-0">
|
|
<Box className="size-5 text-accent-brand" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold">{title}</h1>
|
|
<span className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{t("docker.manager")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
<Alert variant="destructive">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertDescription>{t("docker.notEnabled")}</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const dialogs = (
|
|
<>
|
|
<TOTPDialog
|
|
isOpen={prompt?.kind === "totp"}
|
|
prompt={prompt?.prompt ?? ""}
|
|
mode={prompt?.isPassword ? "password" : "totp"}
|
|
onSubmit={handleTotpSubmit}
|
|
onCancel={handlePromptCancel}
|
|
/>
|
|
<BrowserSignInDialog
|
|
isOpen={prompt?.kind === "browser"}
|
|
label={prompt?.label ?? ""}
|
|
url={prompt?.url ?? ""}
|
|
code={prompt?.code ?? ""}
|
|
onContinue={handleBrowserSignInContinue}
|
|
onCancel={handlePromptCancel}
|
|
onOpenUrl={handleBrowserSignInOpenUrl}
|
|
/>
|
|
{currentHost && (
|
|
<SSHAuthDialog
|
|
isOpen={showAuthDialog}
|
|
reason={authReason}
|
|
onSubmit={handleAuthSubmit}
|
|
onCancel={handleAuthCancel}
|
|
hostInfo={{
|
|
ip: currentHost.ip,
|
|
port: currentHost.port,
|
|
username: currentHost.username ?? "",
|
|
name: currentHost.name,
|
|
}}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
if (isConnecting || isValidating) {
|
|
return (
|
|
<div style={wrapperStyle} className={`${containerClass} relative`}>
|
|
<ConnectionScreen
|
|
status={dockerConnectRetry.status}
|
|
message={
|
|
isValidating ? t("docker.validating") : t("docker.connecting")
|
|
}
|
|
attempt={dockerConnectRetry.attempt}
|
|
maxAttempts={dockerConnectRetry.maxAttempts}
|
|
nextRetryInMs={dockerConnectRetry.nextRetryInMs}
|
|
onManualRetry={dockerConnectRetry.retryNow}
|
|
/>
|
|
{dialogs}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (dockerValidation && !dockerValidation.available) {
|
|
return (
|
|
<div style={wrapperStyle} className={`${containerClass} relative`}>
|
|
<ConnectionScreen
|
|
status={dockerConnectRetry.status}
|
|
message={t("docker.connectionFailed")}
|
|
attempt={dockerConnectRetry.attempt}
|
|
maxAttempts={dockerConnectRetry.maxAttempts}
|
|
nextRetryInMs={dockerConnectRetry.nextRetryInMs}
|
|
onManualRetry={dockerConnectRetry.retryNow}
|
|
retryLabel={t("terminal.retry")}
|
|
logPosition="top"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={wrapperStyle} className={`${containerClass} relative`}>
|
|
<div className="h-full w-full flex flex-col flex-1 min-h-0 overflow-hidden">
|
|
{viewMode === "detail" &&
|
|
sessionId &&
|
|
selectedContainer &&
|
|
currentHost ? (
|
|
<ContainerDetail
|
|
sessionId={sessionId}
|
|
containerId={selectedContainer}
|
|
containers={containers}
|
|
hostConfig={currentHost}
|
|
onBack={handleBack}
|
|
initialTab={detailInitialTab}
|
|
/>
|
|
) : (
|
|
<div className="flex-1 overflow-y-auto px-3 py-3 flex flex-col gap-3">
|
|
<Card className="flex-row items-center justify-between px-3 py-3 shrink-0 gap-0">
|
|
<div className="flex items-center gap-3">
|
|
<div className="size-10 border border-border bg-muted flex items-center justify-center shrink-0">
|
|
<Box className="size-5 text-accent-brand" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold">{title}</h1>
|
|
<div className="flex items-center gap-2">
|
|
<span className="size-2 rounded-full bg-accent-brand" />
|
|
<span className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
|
|
{dockerValidation?.version
|
|
? t("docker.version", {
|
|
runtime:
|
|
dockerValidation.runtime === "podman"
|
|
? "Podman"
|
|
: "Docker",
|
|
version: dockerValidation.version,
|
|
})
|
|
: t("docker.manager")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="relative w-56">
|
|
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
|
|
<Input
|
|
placeholder={t("docker.searchPlaceholder")}
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="pl-8 h-8"
|
|
/>
|
|
</div>
|
|
<Select2
|
|
value={statusFilter}
|
|
onChange={(e) => setStatusFilter(e.target.value)}
|
|
className="h-8 px-2 text-xs bg-background border border-border text-foreground outline-none focus:ring-1 focus:ring-ring"
|
|
>
|
|
<option value="all">{t("docker.allStatuses")}</option>
|
|
<option value="running">{t("docker.stateRunning")}</option>
|
|
<option value="paused">{t("docker.statePaused")}</option>
|
|
<option value="exited">{t("docker.stateExited")}</option>
|
|
<option value="restarting">
|
|
{t("docker.stateRestarting")}
|
|
</option>
|
|
</Select2>
|
|
<Separator orientation="vertical" className="h-8 mx-1" />
|
|
<div className="flex items-center border border-border overflow-hidden">
|
|
<Button
|
|
variant={containerLayout === "card" ? "secondary" : "ghost"}
|
|
size="icon"
|
|
onClick={() => handleSetContainerLayout("card")}
|
|
className={`size-8 rounded-none ${containerLayout === "card" ? "bg-accent-brand/10 text-accent-brand" : ""}`}
|
|
title={t("docker.cardView")}
|
|
>
|
|
<Grid3X3 className="size-4" />
|
|
</Button>
|
|
<Button
|
|
variant={
|
|
containerLayout === "table" ? "secondary" : "ghost"
|
|
}
|
|
size="icon"
|
|
onClick={() => handleSetContainerLayout("table")}
|
|
className={`size-8 rounded-none border-l border-border ${containerLayout === "table" ? "bg-accent-brand/10 text-accent-brand" : ""}`}
|
|
title={t("docker.listView")}
|
|
>
|
|
<ListIcon className="size-4" />
|
|
</Button>
|
|
</div>
|
|
<Separator orientation="vertical" className="h-8 mx-1" />
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={refreshContainers}
|
|
disabled={isLoadingContainers}
|
|
>
|
|
<RefreshCw
|
|
className={`size-4 text-accent-brand ${isLoadingContainers ? "animate-spin" : ""}`}
|
|
/>
|
|
</Button>
|
|
<a
|
|
href="https://docs.termix.site/features/networking/docker"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="flex items-center justify-center size-9 text-muted-foreground hover:text-foreground transition-colors"
|
|
title={t("hosts.docsLink")}
|
|
>
|
|
<ExternalLink className="size-4" />
|
|
</a>
|
|
</div>
|
|
</Card>
|
|
|
|
{sessionId ? (
|
|
!hasLoadedContainersOnce ? (
|
|
<div className="flex flex-col items-center justify-center h-full opacity-40 py-20">
|
|
<RefreshCw className="size-8 animate-spin mb-4" />
|
|
<span className="text-sm font-semibold">
|
|
{t("docker.loadingContainers")}
|
|
</span>
|
|
</div>
|
|
) : containerLayout === "table" ? (
|
|
<ContainerTable
|
|
containers={containers}
|
|
sessionId={sessionId}
|
|
onSelectContainer={(id, tab) => {
|
|
setSelectedContainer(id);
|
|
setDetailInitialTab(tab ?? "logs");
|
|
setViewMode("detail");
|
|
}}
|
|
selectedContainerId={selectedContainer}
|
|
onRefresh={refreshContainers}
|
|
search={search}
|
|
statusFilter={statusFilter}
|
|
/>
|
|
) : (
|
|
<ContainerList
|
|
containers={containers}
|
|
sessionId={sessionId}
|
|
onSelectContainer={(id) => {
|
|
setSelectedContainer(id);
|
|
setDetailInitialTab("logs");
|
|
setViewMode("detail");
|
|
}}
|
|
selectedContainerId={selectedContainer}
|
|
onRefresh={refreshContainers}
|
|
search={search}
|
|
statusFilter={statusFilter}
|
|
/>
|
|
)
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{dialogs}
|
|
<ConnectionScreen
|
|
status={dockerConnectRetry.status}
|
|
message={t("docker.connecting")}
|
|
attempt={dockerConnectRetry.attempt}
|
|
maxAttempts={dockerConnectRetry.maxAttempts}
|
|
nextRetryInMs={dockerConnectRetry.nextRetryInMs}
|
|
onManualRetry={dockerConnectRetry.retryNow}
|
|
retryLabel={t("terminal.retry")}
|
|
logPosition="top"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function DockerManager(props: DockerManagerProps): React.ReactElement {
|
|
return (
|
|
<ConnectionLogProvider>
|
|
<DockerManagerInner {...props} />
|
|
</ConnectionLogProvider>
|
|
);
|
|
}
|