44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { useState } from 'react';
|
|
import { WidgetTabBar, WORKER_TAB_SLUG, NODE_TAB_SLUG } from './WidgetTabBar';
|
|
import { WorkerStatusWidget } from './WorkerStatusWidget';
|
|
import { NodeStatusWidget } from './NodeStatusWidget';
|
|
|
|
interface Props {
|
|
/** Controlled-active tab slug. Defaults to the worker tab. */
|
|
activeSlug?: string;
|
|
onActiveSlugChange?: (slug: string) => void;
|
|
collapsed?: boolean;
|
|
onToggleCollapse?: () => void;
|
|
}
|
|
|
|
/**
|
|
* Side Info Panel: two fixed live-status views, worker and node (GPU).
|
|
* The configurable Markdown-widget dashboard was removed in 2026-06.
|
|
*/
|
|
export function SideInfoPanel({
|
|
activeSlug: activeSlugProp,
|
|
onActiveSlugChange,
|
|
collapsed,
|
|
onToggleCollapse,
|
|
}: Props) {
|
|
const [localActive, setLocalActive] = useState<string>(WORKER_TAB_SLUG);
|
|
const activeSlug = activeSlugProp ?? localActive;
|
|
const setActive = onActiveSlugChange ?? setLocalActive;
|
|
|
|
return (
|
|
<div className="flex flex-col h-full overflow-hidden bg-canvas">
|
|
<WidgetTabBar
|
|
activeSlug={activeSlug}
|
|
onSelect={setActive}
|
|
collapsed={collapsed}
|
|
onToggleCollapse={onToggleCollapse}
|
|
/>
|
|
{!collapsed && (
|
|
<div className="flex-1 min-h-0 overflow-hidden">
|
|
{activeSlug === NODE_TAB_SLUG ? <NodeStatusWidget /> : <WorkerStatusWidget />}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|