Share LoggingScreen fixture with InspectorView story; tune transition timing
- Extract `mixedEntries` (50 mixed-level log entries) into `LoggingScreen.fixtures.ts` so both `LoggingScreen.stories` and `InspectorView.stories` can consume it. The InspectorView Default story now shows a populated, scrollable Logs tab. - InspectorView screen transitions: separate enter (350ms) and exit (250ms) durations via Mantine Transition's `exitDuration` prop, so screens leave faster than they enter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall
parent
d3c2645e38
commit
1785a5281c
4 changed files with 146 additions and 178 deletions
|
|
@ -0,0 +1,140 @@
|
|||
import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
|
||||
import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
|
||||
|
||||
const logMessages: {
|
||||
level: LoggingLevel;
|
||||
data: string;
|
||||
logger?: string;
|
||||
}[] = [
|
||||
{ level: "info", data: "Server started on port 3000" },
|
||||
{
|
||||
level: "debug",
|
||||
data: "Loading configuration from /etc/mcp/config.json",
|
||||
logger: "config",
|
||||
},
|
||||
{
|
||||
level: "warning",
|
||||
data: "Deprecated API endpoint called: /v1/tools",
|
||||
logger: "http",
|
||||
},
|
||||
{ level: "info", data: "Client connected: inspector-web-ui" },
|
||||
{
|
||||
level: "error",
|
||||
data: "Failed to read resource: file not found at /data/missing.txt",
|
||||
logger: "resources",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Tool execution completed: search_files (245ms)",
|
||||
logger: "tools",
|
||||
},
|
||||
{
|
||||
level: "debug",
|
||||
data: "Parsing JSON-RPC request body",
|
||||
logger: "transport",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Listing available tools for client session",
|
||||
logger: "tools",
|
||||
},
|
||||
{
|
||||
level: "warning",
|
||||
data: "Slow query detected: 1200ms for resource lookup",
|
||||
logger: "db",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Resource subscription added: file:///config.json",
|
||||
logger: "resources",
|
||||
},
|
||||
{
|
||||
level: "debug",
|
||||
data: "Heartbeat ping received from client",
|
||||
logger: "session",
|
||||
},
|
||||
{
|
||||
level: "error",
|
||||
data: "Permission denied reading /etc/secrets.env",
|
||||
logger: "resources",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Prompt 'summarize' resolved with 2 messages",
|
||||
logger: "prompts",
|
||||
},
|
||||
{
|
||||
level: "debug",
|
||||
data: "Cache hit for resource: db://users/42",
|
||||
logger: "cache",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Tool 'create_record' executed successfully in 89ms",
|
||||
logger: "tools",
|
||||
},
|
||||
{
|
||||
level: "warning",
|
||||
data: "Client reconnection attempt #3",
|
||||
logger: "session",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "New resource detected: file:///data/output.csv",
|
||||
logger: "resources",
|
||||
},
|
||||
{
|
||||
level: "debug",
|
||||
data: "Serializing response payload (2.4KB)",
|
||||
logger: "transport",
|
||||
},
|
||||
{
|
||||
level: "error",
|
||||
data: "Timeout waiting for tool response after 30s",
|
||||
logger: "tools",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Session initialized with capabilities: tools, resources, prompts",
|
||||
},
|
||||
{
|
||||
level: "debug",
|
||||
data: "Validating input schema for tool 'batch_process'",
|
||||
logger: "tools",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Resource template resolved: db://tables/users/rows/15",
|
||||
logger: "resources",
|
||||
},
|
||||
{
|
||||
level: "warning",
|
||||
data: "Memory usage at 78% — consider increasing limits",
|
||||
logger: "system",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Client disconnected gracefully",
|
||||
logger: "session",
|
||||
},
|
||||
{
|
||||
level: "debug",
|
||||
data: "Flushing log buffer to disk (128 entries)",
|
||||
logger: "logging",
|
||||
},
|
||||
];
|
||||
|
||||
function pad(n: number): string {
|
||||
return n.toString().padStart(2, "0");
|
||||
}
|
||||
|
||||
export const mixedEntries: LogEntryData[] = Array.from(
|
||||
{ length: 50 },
|
||||
(_, i) => {
|
||||
const src = logMessages[i % logMessages.length];
|
||||
return {
|
||||
receivedAt: new Date(`2026-03-17T10:00:${pad(i + 1)}Z`),
|
||||
params: { level: src.level, data: src.data, logger: src.logger },
|
||||
};
|
||||
},
|
||||
);
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
|
||||
import { fn } from "storybook/test";
|
||||
import { LoggingScreen } from "./LoggingScreen";
|
||||
import { mixedEntries } from "./LoggingScreen.fixtures";
|
||||
import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
|
||||
|
||||
const meta: Meta<typeof LoggingScreen> = {
|
||||
|
|
@ -28,141 +28,6 @@ export const Empty: Story = {
|
|||
},
|
||||
};
|
||||
|
||||
const logMessages: {
|
||||
level: LoggingLevel;
|
||||
data: string;
|
||||
logger?: string;
|
||||
}[] = [
|
||||
{ level: "info", data: "Server started on port 3000" },
|
||||
{
|
||||
level: "debug",
|
||||
data: "Loading configuration from /etc/mcp/config.json",
|
||||
logger: "config",
|
||||
},
|
||||
{
|
||||
level: "warning",
|
||||
data: "Deprecated API endpoint called: /v1/tools",
|
||||
logger: "http",
|
||||
},
|
||||
{ level: "info", data: "Client connected: inspector-web-ui" },
|
||||
{
|
||||
level: "error",
|
||||
data: "Failed to read resource: file not found at /data/missing.txt",
|
||||
logger: "resources",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Tool execution completed: search_files (245ms)",
|
||||
logger: "tools",
|
||||
},
|
||||
{
|
||||
level: "debug",
|
||||
data: "Parsing JSON-RPC request body",
|
||||
logger: "transport",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Listing available tools for client session",
|
||||
logger: "tools",
|
||||
},
|
||||
{
|
||||
level: "warning",
|
||||
data: "Slow query detected: 1200ms for resource lookup",
|
||||
logger: "db",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Resource subscription added: file:///config.json",
|
||||
logger: "resources",
|
||||
},
|
||||
{
|
||||
level: "debug",
|
||||
data: "Heartbeat ping received from client",
|
||||
logger: "session",
|
||||
},
|
||||
{
|
||||
level: "error",
|
||||
data: "Permission denied reading /etc/secrets.env",
|
||||
logger: "resources",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Prompt 'summarize' resolved with 2 messages",
|
||||
logger: "prompts",
|
||||
},
|
||||
{
|
||||
level: "debug",
|
||||
data: "Cache hit for resource: db://users/42",
|
||||
logger: "cache",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Tool 'create_record' executed successfully in 89ms",
|
||||
logger: "tools",
|
||||
},
|
||||
{
|
||||
level: "warning",
|
||||
data: "Client reconnection attempt #3",
|
||||
logger: "session",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "New resource detected: file:///data/output.csv",
|
||||
logger: "resources",
|
||||
},
|
||||
{
|
||||
level: "debug",
|
||||
data: "Serializing response payload (2.4KB)",
|
||||
logger: "transport",
|
||||
},
|
||||
{
|
||||
level: "error",
|
||||
data: "Timeout waiting for tool response after 30s",
|
||||
logger: "tools",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Session initialized with capabilities: tools, resources, prompts",
|
||||
},
|
||||
{
|
||||
level: "debug",
|
||||
data: "Validating input schema for tool 'batch_process'",
|
||||
logger: "tools",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Resource template resolved: db://tables/users/rows/15",
|
||||
logger: "resources",
|
||||
},
|
||||
{
|
||||
level: "warning",
|
||||
data: "Memory usage at 78% — consider increasing limits",
|
||||
logger: "system",
|
||||
},
|
||||
{
|
||||
level: "info",
|
||||
data: "Client disconnected gracefully",
|
||||
logger: "session",
|
||||
},
|
||||
{
|
||||
level: "debug",
|
||||
data: "Flushing log buffer to disk (128 entries)",
|
||||
logger: "logging",
|
||||
},
|
||||
];
|
||||
|
||||
function pad(n: number): string {
|
||||
return n.toString().padStart(2, "0");
|
||||
}
|
||||
|
||||
const mixedEntries: LogEntryData[] = Array.from({ length: 50 }, (_, i) => {
|
||||
const src = logMessages[i % logMessages.length];
|
||||
return {
|
||||
receivedAt: new Date(`2026-03-17T10:00:${pad(i + 1)}Z`),
|
||||
params: { level: src.level, data: src.data, logger: src.logger },
|
||||
};
|
||||
});
|
||||
|
||||
export const WithEntries: Story = {
|
||||
args: {
|
||||
entries: mixedEntries,
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
|
|||
import { fn } from "storybook/test";
|
||||
import { InspectorView } from "./InspectorView";
|
||||
import type { ServerEntry } from "../../screens/ServerListScreen/ServerListScreen";
|
||||
import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
|
||||
import { mixedEntries as demoLogs } from "../../screens/LoggingScreen/LoggingScreen.fixtures";
|
||||
import type { TaskProgress } from "../../groups/TaskCard/TaskCard";
|
||||
|
||||
const demoServers: ServerEntry[] = [
|
||||
|
|
@ -122,45 +122,6 @@ const demoSubscriptions: InspectorResourceSubscription[] = [
|
|||
},
|
||||
];
|
||||
|
||||
const demoLogs: LogEntryData[] = [
|
||||
{
|
||||
receivedAt: new Date("2026-03-17T10:00:00Z"),
|
||||
params: { level: "info", data: "Server started on port 3000" },
|
||||
},
|
||||
{
|
||||
receivedAt: new Date("2026-03-17T10:00:01Z"),
|
||||
params: {
|
||||
level: "debug",
|
||||
logger: "config",
|
||||
data: "Loading configuration from /etc/mcp/config.json",
|
||||
},
|
||||
},
|
||||
{
|
||||
receivedAt: new Date("2026-03-17T10:00:02Z"),
|
||||
params: {
|
||||
level: "warning",
|
||||
logger: "http",
|
||||
data: "Deprecated API endpoint called: /v1/tools",
|
||||
},
|
||||
},
|
||||
{
|
||||
receivedAt: new Date("2026-03-17T10:00:03Z"),
|
||||
params: {
|
||||
level: "error",
|
||||
logger: "resources",
|
||||
data: "Failed to read resource: file not found at /data/missing.txt",
|
||||
},
|
||||
},
|
||||
{
|
||||
receivedAt: new Date("2026-03-17T10:00:04Z"),
|
||||
params: {
|
||||
level: "info",
|
||||
logger: "tools",
|
||||
data: "Tool execution completed: search_files (245ms)",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const demoTasks: Task[] = [
|
||||
{
|
||||
taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
|
||||
|
|
|
|||
|
|
@ -40,7 +40,8 @@ const ALL_TABS: string[] = [
|
|||
"History",
|
||||
];
|
||||
|
||||
const SCREEN_TRANSITION_MS = 350;
|
||||
const SCREEN_ENTER_MS = 350;
|
||||
const SCREEN_EXIT_MS = 250;
|
||||
|
||||
const ScreenStageContainer = Stack.withProps({
|
||||
pos: "relative",
|
||||
|
|
@ -60,7 +61,8 @@ function ScreenStage({
|
|||
<Transition
|
||||
mounted={active}
|
||||
transition="fade-up"
|
||||
duration={SCREEN_TRANSITION_MS}
|
||||
duration={SCREEN_ENTER_MS}
|
||||
exitDuration={SCREEN_EXIT_MS}
|
||||
timingFunction="ease"
|
||||
>
|
||||
{(styles) => (
|
||||
|
|
|
|||
Loading…
Reference in a new issue