From f3c1887e92703e7b7b6546ae220910322589ef20 Mon Sep 17 00:00:00 2001 From: RockChinQ Date: Thu, 27 Aug 2026 15:49:55 +0800 Subject: [PATCH] refactor(pipelines): clarify log view switching --- .../ProcessorDetailWorkbench.tsx | 168 ++++++++++-------- .../home/pipelines/PipelineDetailContent.tsx | 1 + web/src/i18n/locales/en-US.ts | 3 +- web/src/i18n/locales/es-ES.ts | 3 +- web/src/i18n/locales/ja-JP.ts | 3 +- web/src/i18n/locales/ru-RU.ts | 3 +- web/src/i18n/locales/th-TH.ts | 3 +- web/src/i18n/locales/vi-VN.ts | 3 +- web/src/i18n/locales/zh-Hans.ts | 3 +- web/src/i18n/locales/zh-Hant.ts | 3 +- web/tests/e2e/crud-smoke.spec.ts | 23 ++- .../e2e/pipeline-monitoring-turns.spec.ts | 2 +- 12 files changed, 124 insertions(+), 94 deletions(-) diff --git a/web/src/app/home/components/processor-detail/ProcessorDetailWorkbench.tsx b/web/src/app/home/components/processor-detail/ProcessorDetailWorkbench.tsx index 6efe628a8..aff94bce4 100644 --- a/web/src/app/home/components/processor-detail/ProcessorDetailWorkbench.tsx +++ b/web/src/app/home/components/processor-detail/ProcessorDetailWorkbench.tsx @@ -7,10 +7,12 @@ import { TooltipContent, TooltipTrigger, } from '@/components/ui/tooltip'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { cn } from '@/lib/utils'; interface ProcessorMonitoringView { label: string; + workbenchLabel: string; content: ReactNode; } @@ -67,11 +69,37 @@ export default function ProcessorDetailWorkbench({ const hasDebug = Boolean(debugTitle && debugContent); return ( -
+ + setActiveView(value as 'workbench' | 'monitoring') + } + className="flex h-full min-h-0 min-w-0 flex-col gap-0" + >

{title}

{titleAction} + {monitoring && ( + + + + {monitoring.workbenchLabel} + {isDirty && ( + + {unsavedLabel} + + )} + + + + {monitoring.label} + + + )} {status && ( @@ -117,20 +145,6 @@ export default function ProcessorDetailWorkbench({ )}
- {monitoring && ( - - )} {canSave && activeView === 'workbench' && (
- {activeView === 'monitoring' && monitoring ? ( -
- {monitoring.content} -
- ) : ( -
-
- {hasDebug && ( -
-
-
- - {debugTitle} -
- {debugConnected !== undefined && ( - - - {debugConnected - ? debugConnectedLabel - : debugDisconnectedLabel} - - )} -
-
- {debugContent} -
-
- )} + {monitoring.content} + + + )} + +
+ {hasDebug && (
-
- - {configTitle} - {isDirty && ( - - - {unsavedLabel} +
+
+ + {debugTitle} +
+ {debugConnected !== undefined && ( + + + {debugConnected + ? debugConnectedLabel + : debugDisconnectedLabel} )}
-
- {configContent} +
+ {debugContent}
-
+ )} + +
+
+ + {configTitle} + {isDirty && ( + + + {unsavedLabel} + + )} +
+
+ {configContent} +
+
- )} -
+ + ); } diff --git a/web/src/app/home/pipelines/PipelineDetailContent.tsx b/web/src/app/home/pipelines/PipelineDetailContent.tsx index fb08c28f9..e2c98851b 100644 --- a/web/src/app/home/pipelines/PipelineDetailContent.tsx +++ b/web/src/app/home/pipelines/PipelineDetailContent.tsx @@ -200,6 +200,7 @@ export default function PipelineDetailContent({ canViewMonitoring ? { label: t('pipelines.monitoring.title'), + workbenchLabel: t('pipelines.monitoring.workbench'), content: ( { await expect(page.getByText('No logs yet')).toBeVisible(); await page.goto('/home/agents?id=pipeline-1'); - await expect(page.getByRole('button', { name: 'Dashboard' })).toBeVisible(); + await expect(page.getByRole('tab', { name: 'Run logs' })).toBeVisible(); await expect(page.getByRole('tab', { name: 'Debug Chat' })).toHaveCount(0); await expect(page.getByRole('button', { name: /^Save$/ })).toHaveCount(0); @@ -761,19 +761,18 @@ test.describe('pipeline advanced flows', () => { page.getByRole('region', { name: 'Configuration' }), ).toBeVisible(); - // Switch to Monitoring tab (labeled "Dashboard" in the pipeline context) - // Skip Debug tab as it requires WebSocket connection - await page - .getByRole('button', { name: 'Dashboard', exact: true }) - .last() - .click(); - await expect(page.getByRole('region', { name: /Dashboard/ })).toBeVisible(); + const viewSwitcher = page.getByRole('tablist', { + name: 'Configure & debug / Run logs', + }); + const switcherPosition = await viewSwitcher.boundingBox(); + await page.getByRole('tab', { name: 'Run logs' }).click(); + await expect(page.getByRole('region', { name: 'Run logs' })).toBeVisible(); + await expect + .poll(async () => (await viewSwitcher.boundingBox())?.x) + .toBe(switcherPosition?.x); // Switch back to Configuration - await page - .getByRole('button', { name: 'Dashboard', exact: true }) - .last() - .click(); + await page.getByRole('tab', { name: 'Configure & debug' }).click(); await expect( page.getByRole('region', { name: 'Configuration' }), ).toBeVisible(); diff --git a/web/tests/e2e/pipeline-monitoring-turns.spec.ts b/web/tests/e2e/pipeline-monitoring-turns.spec.ts index df182890b..306398c62 100644 --- a/web/tests/e2e/pipeline-monitoring-turns.spec.ts +++ b/web/tests/e2e/pipeline-monitoring-turns.spec.ts @@ -163,7 +163,7 @@ test.describe('pipeline monitoring conversation turns', () => { }); await page.goto(`/home/agents?id=${pipeline.id}`); - await page.getByRole('tab', { name: 'Dashboard' }).click(); + await page.getByRole('tab', { name: 'Run logs' }).click(); await expect(page.getByText('2 conversation turns')).toBeVisible(); await expect(