claude code agent
0bf4e71b79
When a container is opened from a stack, the detail tab kept the stack trail (PR #7) but the attribute sub-tabs (Logs, Stats, Inspect, Console, Attach) dropped it: those tabs were registered only under the global docker.containers.container.* tree, so navigating to one left the stack state (and its inherited params) behind, and each sub-view set a hardcoded "Containers > ..." breadcrumb. - Register stack-scoped child states docker.stacks.stack.container.{attach, exec,inspect,logs,stats} mirroring the global ones, so the inherited stack params survive and the trail can be kept. - Centralize the breadcrumb logic in containerBreadcrumbs.ts (moved out of ItemView, which re-exports it) and add isStackContainerState + getContainerSubTabBreadcrumbs + buildStackContainerLinkParams. - ActionLinksRow links sub-tabs into the stack tree (with stack+container params) when opened from a stack, else the global states unchanged. - InspectView + the logs/stats/console controllers render the stack-aware trail; set up-front (no name) so it survives the load window and errors. Covers regular/external/orphaned stacks and the non-stack fallback, matching the existing ItemView breadcrumb behavior. New unit tests in containerBreadcrumbs.test.ts. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { useCurrentStateAndParams } from '@uirouter/react';
|
|
import { Circle, Code as CodeIcon, File } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
|
|
import { trimContainerName } from '@/docker/filters/utils';
|
|
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
|
|
|
|
import { JsonTree } from '@@/JsonTree';
|
|
import { PageHeader } from '@@/PageHeader';
|
|
import { Widget } from '@@/Widget';
|
|
import { ButtonSelector } from '@@/form-components/ButtonSelector/ButtonSelector';
|
|
import { Code } from '@@/Code';
|
|
|
|
import { useContainerInspect } from '../queries/useContainerInspect';
|
|
import { getContainerSubTabBreadcrumbs } from '../ItemView/containerBreadcrumbs';
|
|
|
|
export function InspectView() {
|
|
const environmentId = useEnvironmentId();
|
|
const { state, params } = useCurrentStateAndParams();
|
|
const { id, nodeName } = params;
|
|
const inspectQuery = useContainerInspect(environmentId, id, { nodeName });
|
|
const [viewType, setViewType] = useState<'tree' | 'text'>('tree');
|
|
|
|
if (!inspectQuery.data) {
|
|
return null;
|
|
}
|
|
|
|
const containerInfo = inspectQuery.data;
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
title="Container inspect"
|
|
breadcrumbs={getContainerSubTabBreadcrumbs(
|
|
state?.name,
|
|
params,
|
|
trimContainerName(containerInfo.Name),
|
|
'Inspect'
|
|
)}
|
|
/>
|
|
|
|
<div className="row">
|
|
<div className="col-lg-12 col-md-12 col-xs-12">
|
|
<Widget>
|
|
<Widget.Title icon={Circle} title="Inspect">
|
|
<ButtonSelector<'tree' | 'text'>
|
|
onChange={(value) => setViewType(value)}
|
|
value={viewType}
|
|
options={[
|
|
{
|
|
label: 'Tree',
|
|
icon: CodeIcon,
|
|
value: 'tree',
|
|
},
|
|
{
|
|
label: 'Text',
|
|
icon: File,
|
|
value: 'text',
|
|
},
|
|
]}
|
|
/>
|
|
</Widget.Title>
|
|
<Widget.Body>
|
|
{viewType === 'text' && (
|
|
<Code showCopyButton>
|
|
{JSON.stringify(containerInfo, undefined, 4)}
|
|
</Code>
|
|
)}
|
|
{viewType === 'tree' && <JsonTree data={containerInfo} />}
|
|
</Widget.Body>
|
|
</Widget>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|