95e3a2dca7
Replace string-typed log levels with SDK LoggingLevel across the Logs group components and LoggingScreen. - LogControls: type currentLevel, visibleLevels, and all handlers with LoggingLevel instead of string; type LOG_LEVELS array and LEVEL_COLORS record with LoggingLevel - LogStreamPanel: type visibleLevels as Record<LoggingLevel, boolean> instead of Record<string, boolean> - LoggingScreen: type currentLevel, onSetLevel, visibleLevels state, and toggle handlers with LoggingLevel; extract NO_LEVELS_VISIBLE as a module-level constant - Stories already used LoggingLevel literals; updated type annotations to use Record<LoggingLevel, boolean> - No ConnectedView story changes needed (already passes valid LoggingLevel values) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
108 lines
2.7 KiB
TypeScript
108 lines
2.7 KiB
TypeScript
import { useState } from "react";
|
|
import { Card, Flex, Stack } from "@mantine/core";
|
|
import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
|
|
import { LogControls } from "../../groups/LogControls/LogControls";
|
|
import { LogStreamPanel } from "../../groups/LogStreamPanel/LogStreamPanel";
|
|
import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
|
|
|
|
export interface LoggingScreenProps {
|
|
entries: LogEntryData[];
|
|
currentLevel: LoggingLevel;
|
|
onSetLevel: (level: LoggingLevel) => void;
|
|
onClear: () => void;
|
|
onExport: () => void;
|
|
autoScroll: boolean;
|
|
onToggleAutoScroll: () => void;
|
|
onCopyAll: () => void;
|
|
}
|
|
|
|
const ALL_LEVELS_VISIBLE: Record<LoggingLevel, boolean> = {
|
|
debug: true,
|
|
info: true,
|
|
notice: true,
|
|
warning: true,
|
|
error: true,
|
|
critical: true,
|
|
alert: true,
|
|
emergency: true,
|
|
};
|
|
|
|
const NO_LEVELS_VISIBLE: Record<LoggingLevel, boolean> = {
|
|
debug: false,
|
|
info: false,
|
|
notice: false,
|
|
warning: false,
|
|
error: false,
|
|
critical: false,
|
|
alert: false,
|
|
emergency: false,
|
|
};
|
|
|
|
const ScreenLayout = Flex.withProps({
|
|
variant: "screen",
|
|
h: "calc(100vh - var(--app-shell-header-height, 0px))",
|
|
gap: "md",
|
|
p: "xl",
|
|
});
|
|
|
|
const Sidebar = Stack.withProps({
|
|
w: 340,
|
|
flex: "0 0 auto",
|
|
});
|
|
|
|
const SidebarCard = Card.withProps({
|
|
withBorder: true,
|
|
padding: "lg",
|
|
});
|
|
|
|
export function LoggingScreen({
|
|
entries,
|
|
currentLevel,
|
|
onSetLevel,
|
|
onClear,
|
|
onExport,
|
|
autoScroll,
|
|
onToggleAutoScroll,
|
|
onCopyAll,
|
|
}: LoggingScreenProps) {
|
|
const [filterText, setFilterText] = useState("");
|
|
const [visibleLevels, setVisibleLevels] =
|
|
useState<Record<LoggingLevel, boolean>>(ALL_LEVELS_VISIBLE);
|
|
|
|
function handleToggleLevel(level: LoggingLevel, visible: boolean) {
|
|
setVisibleLevels((prev) => ({ ...prev, [level]: visible }));
|
|
}
|
|
|
|
function handleToggleAllLevels() {
|
|
const allSelected = Object.values(visibleLevels).every(Boolean);
|
|
setVisibleLevels(allSelected ? NO_LEVELS_VISIBLE : ALL_LEVELS_VISIBLE);
|
|
}
|
|
|
|
return (
|
|
<ScreenLayout>
|
|
<Sidebar>
|
|
<SidebarCard>
|
|
<LogControls
|
|
currentLevel={currentLevel}
|
|
filterText={filterText}
|
|
visibleLevels={visibleLevels}
|
|
onSetLevel={onSetLevel}
|
|
onFilterChange={setFilterText}
|
|
onToggleLevel={handleToggleLevel}
|
|
onToggleAllLevels={handleToggleAllLevels}
|
|
/>
|
|
</SidebarCard>
|
|
</Sidebar>
|
|
<LogStreamPanel
|
|
entries={entries}
|
|
filterText={filterText}
|
|
visibleLevels={visibleLevels}
|
|
autoScroll={autoScroll}
|
|
onToggleAutoScroll={onToggleAutoScroll}
|
|
onCopyAll={onCopyAll}
|
|
onClear={onClear}
|
|
onExport={onExport}
|
|
/>
|
|
</ScreenLayout>
|
|
);
|
|
}
|