fix: simplify detail panel header to just "Details"
Remove redundant processor name, status, ID, and duration from the header bar — all visible in the Info tab and diagram overlay already. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -28,19 +28,6 @@ const TABS: { key: DetailTab; label: string }[] = [
|
|||||||
{ key: 'log', label: 'Log' },
|
{ key: 'log', label: 'Log' },
|
||||||
];
|
];
|
||||||
|
|
||||||
function formatDuration(ms: number | undefined): string {
|
|
||||||
if (ms === undefined || ms === null) return '-';
|
|
||||||
if (ms < 1000) return `${ms}ms`;
|
|
||||||
return `${(ms / 1000).toFixed(1)}s`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function statusClass(status: string): string {
|
|
||||||
const s = status?.toUpperCase();
|
|
||||||
if (s === 'COMPLETED') return styles.statusCompleted;
|
|
||||||
if (s === 'FAILED') return styles.statusFailed;
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DetailPanel({
|
export function DetailPanel({
|
||||||
selectedProcessor,
|
selectedProcessor,
|
||||||
executionDetail,
|
executionDetail,
|
||||||
@@ -99,22 +86,11 @@ export function DetailPanel({
|
|||||||
if (activeTab === 'output' && !hasOutput) setActiveTab('info');
|
if (activeTab === 'output' && !hasOutput) setActiveTab('info');
|
||||||
}, [hasHeaders, hasInput, hasOutput, activeTab]);
|
}, [hasHeaders, hasInput, hasOutput, activeTab]);
|
||||||
|
|
||||||
// Header display
|
|
||||||
const headerName = selectedProcessor ? selectedProcessor.processorType : 'Exchange';
|
|
||||||
const headerStatus = selectedProcessor ? selectedProcessor.status : executionDetail.status;
|
|
||||||
const headerId = selectedProcessor ? selectedProcessor.processorId : executionDetail.executionId;
|
|
||||||
const headerDuration = selectedProcessor ? selectedProcessor.durationMs : executionDetail.durationMs;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.detailPanel}>
|
<div className={styles.detailPanel}>
|
||||||
{/* Processor / Exchange header bar */}
|
{/* Header bar */}
|
||||||
<div className={styles.processorHeader}>
|
<div className={styles.processorHeader}>
|
||||||
<span className={styles.processorName}>{headerName}</span>
|
<span className={styles.processorName}>Details</span>
|
||||||
<span className={`${styles.statusBadge} ${statusClass(headerStatus)}`}>
|
|
||||||
{headerStatus}
|
|
||||||
</span>
|
|
||||||
<span className={styles.processorId}>{headerId}</span>
|
|
||||||
<span className={styles.processorDuration}>{formatDuration(headerDuration)}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tab bar */}
|
{/* Tab bar */}
|
||||||
|
|||||||
Reference in New Issue
Block a user