Skip to content

Commit e274059

Browse files
karthikscale3karthikscale3
committed
Improve dashboard layout and workflow viewer
- Make header sticky at top of page with proper positioning - Remove border line above tabs in run detail view - Enable scrollable layout for larger workflow graphs - Increase workflow sheet width from 50vw to 75vw for better visibility
1 parent bbf3b41 commit e274059

File tree

3 files changed

+73
-79
lines changed

3 files changed

+73
-79
lines changed

‎packages/web/src/app/layout-client.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -131,28 +131,28 @@ function LayoutContent({ children }: LayoutClientProps) {
131131
}, [resource, id, runId, stepId, hookId, router, config, pathname]);
132132

133133
return (
134-
<div className="min-h-screen px-6 pt-8">
134+
<div className="min-h-screen flex flex-col">
135135
<TooltipProvider delayDuration={0}>
136-
<div>
137-
<div className="flex items-start justify-between">
138-
<div className="mb-8 items-center flex justify-between w-full">
139-
<Link href="https://useworkflow.dev" target="_blank">
140-
<h1
141-
className="flex items-center gap-2 mb-2"
142-
title="Workflow Observability"
143-
>
144-
<Logo />
145-
</h1>
146-
</Link>
147-
<div className="ml-auto flex items-center gap-2">
148-
<ConnectionStatus config={config} />
149-
<SettingsDropdown />
150-
</div>
136+
{/* Sticky Header */}
137+
<div className="sticky top-0 z-50 bg-background border-b px-6 py-4">
138+
<div className="flex items-center justify-between w-full">
139+
<Link href="https://useworkflow.dev" target="_blank">
140+
<h1
141+
className="flex items-center gap-2"
142+
title="Workflow Observability"
143+
>
144+
<Logo />
145+
</h1>
146+
</Link>
147+
<div className="ml-auto flex items-center gap-2">
148+
<ConnectionStatus config={config} />
149+
<SettingsDropdown />
151150
</div>
152151
</div>
153-
154-
{children}
155152
</div>
153+
154+
{/* Scrollable Content */}
155+
<div className="flex-1 px-6 pt-6">{children}</div>
156156
</TooltipProvider>
157157
<Toaster />
158158
</div>

‎packages/web/src/components/run-detail-view.tsx‎

Lines changed: 54 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -239,10 +239,7 @@ export function RunDetailView({
239239
</AlertDialogContent>
240240
</AlertDialog>
241241

242-
<div
243-
className="flex flex-col overflow-hidden"
244-
style={{ height: 'calc(100vh - 7rem)' }}
245-
>
242+
<div className="flex flex-col pb-6">
246243
<div className="flex-none space-y-6">
247244
<Button
248245
variant="ghost"
@@ -255,7 +252,7 @@ export function RunDetailView({
255252
</Button>
256253

257254
{/* Run Overview Header */}
258-
<div className="space-y-4 pb-6 border-b">
255+
<div className="space-y-4 pb-6">
259256
{/* Title Row */}
260257
<div className="flex items-start justify-between">
261258
<div className="mb-6">
@@ -348,13 +345,12 @@ export function RunDetailView({
348345
</div>
349346
</div>
350347

351-
<div className="flex-1 min-h-0 relative">
348+
<div className="mt-6 mb-12">
352349
<Tabs
353350
value={activeTab}
354351
onValueChange={(v) => setActiveTab(v as 'trace' | 'graph')}
355-
className="h-full flex flex-col"
356352
>
357-
<TabsList className="flex-none">
353+
<TabsList className="mb-4">
358354
<TabsTrigger value="trace" className="gap-2">
359355
<List className="h-4 w-4" />
360356
Trace
@@ -365,65 +361,63 @@ export function RunDetailView({
365361
</TabsTrigger>
366362
</TabsList>
367363

368-
<TabsContent
369-
value="trace"
370-
className="flex-1 min-h-0 mt-0 data-[state=active]:flex data-[state=active]:flex-col"
371-
>
372-
<WorkflowTraceViewer
373-
error={error}
374-
steps={allSteps}
375-
events={allEvents}
376-
hooks={allHooks}
377-
env={env}
378-
run={run}
379-
isLoading={loading}
380-
/>
364+
<TabsContent value="trace" className="mt-0">
365+
<div style={{ minHeight: '800px' }}>
366+
<WorkflowTraceViewer
367+
error={error}
368+
steps={allSteps}
369+
events={allEvents}
370+
hooks={allHooks}
371+
env={env}
372+
run={run}
373+
isLoading={loading}
374+
/>
375+
</div>
381376
</TabsContent>
382377

383-
<TabsContent
384-
value="graph"
385-
className="flex-1 min-h-0 mt-0 data-[state=active]:flex"
386-
>
387-
{graphLoading ? (
388-
<div className="flex items-center justify-center w-full h-full">
389-
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
390-
<span className="ml-4 text-muted-foreground">
391-
Loading workflow graph...
392-
</span>
393-
</div>
394-
) : graphError ? (
395-
<div className="flex items-center justify-center w-full h-full p-4">
396-
<Alert variant="destructive" className="max-w-lg">
397-
<AlertCircle className="h-4 w-4" />
398-
<AlertTitle>Error Loading Workflow Graph</AlertTitle>
399-
<AlertDescription>{graphError.message}</AlertDescription>
400-
</Alert>
401-
</div>
402-
) : !workflowGraph ? (
403-
<div className="flex items-center justify-center w-full h-full">
404-
<Alert className="max-w-lg">
405-
<AlertCircle className="h-4 w-4" />
406-
<AlertTitle>Workflow Graph Not Found</AlertTitle>
407-
<AlertDescription>
408-
Could not find the workflow graph for this run. The
409-
workflow may have been deleted or the graph manifest may
410-
need to be regenerated.
411-
</AlertDescription>
412-
</Alert>
413-
</div>
414-
) : (
415-
<WorkflowGraphExecutionViewer
416-
workflow={workflowGraph}
417-
execution={execution || undefined}
418-
/>
419-
)}
378+
<TabsContent value="graph" className="mt-0">
379+
<div style={{ minHeight: '800px', height: '800px' }}>
380+
{graphLoading ? (
381+
<div className="flex items-center justify-center w-full h-full">
382+
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
383+
<span className="ml-4 text-muted-foreground">
384+
Loading workflow graph...
385+
</span>
386+
</div>
387+
) : graphError ? (
388+
<div className="flex items-center justify-center w-full h-full p-4">
389+
<Alert variant="destructive" className="max-w-lg">
390+
<AlertCircle className="h-4 w-4" />
391+
<AlertTitle>Error Loading Workflow Graph</AlertTitle>
392+
<AlertDescription>{graphError.message}</AlertDescription>
393+
</Alert>
394+
</div>
395+
) : !workflowGraph ? (
396+
<div className="flex items-center justify-center w-full h-full">
397+
<Alert className="max-w-lg">
398+
<AlertCircle className="h-4 w-4" />
399+
<AlertTitle>Workflow Graph Not Found</AlertTitle>
400+
<AlertDescription>
401+
Could not find the workflow graph for this run. The
402+
workflow may have been deleted or the graph manifest may
403+
need to be regenerated.
404+
</AlertDescription>
405+
</Alert>
406+
</div>
407+
) : (
408+
<WorkflowGraphExecutionViewer
409+
workflow={workflowGraph}
410+
execution={execution || undefined}
411+
/>
412+
)}
413+
</div>
420414
</TabsContent>
421415
</Tabs>
422416

423417
{auxiliaryDataLoading && (
424-
<div className="absolute flex items-center justify-center left-4 bottom-4">
418+
<div className="fixed flex items-center gap-2 left-8 bottom-8 bg-background border rounded-md px-4 py-2 shadow-lg">
425419
<Loader2 className="size-4 animate-spin" />
426-
<span className="ml-4">Fetching data...</span>
420+
<span className="text-sm">Fetching data...</span>
427421
</div>
428422
)}
429423
</div>

‎packages/web/src/components/workflows-list.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ export function WorkflowsList({
148148
<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
149149
<SheetContent
150150
side="right"
151-
className="w-[50vw] max-w-[50vw] sm:max-w-[50vw]"
151+
className="w-[75vw] max-w-[75vw] sm:max-w-[75vw]"
152152
>
153153
<SheetHeader>
154154
<SheetTitle className="flex items-center gap-2">

0 commit comments

Comments
 (0)