add header to runs view

srijanpatel · srijanpatel · commit 054e1f6baa7e · 2025-03-17T14:39:50.000Z
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -37,7 +37,7 @@ import RunModal from './modals/RunModal'
 import SettingsModal from './modals/SettingsModal'
 
 interface HeaderProps {
-    activePage: 'dashboard' | 'workflow' | 'evals' | 'trace' | 'rag'
+    activePage: 'dashboard' | 'workflow' | 'evals' | 'trace' | 'runs' | 'rag'
     associatedWorkflowId?: string
     runId?: string
     handleDownloadImage?: () => void
@@ -141,7 +141,7 @@ const Header: React.FC<HeaderProps> = ({ activePage, associatedWorkflowId, runId
     }, [isHistoryOpen])
 
     useEffect(() => {
-        if (activePage === 'workflow' || activePage === 'trace') {
+        if (activePage === 'workflow' || activePage === 'trace' || activePage === 'runs') {
             document.title = `${projectName} - PySpur`
         }
         if (activePage === 'dashboard') {
@@ -309,7 +309,7 @@ const Header: React.FC<HeaderProps> = ({ activePage, associatedWorkflowId, runId
                     )}
                 </NavbarBrand>
 
-                {(activePage === 'workflow' || activePage === 'trace') && (
+                {(activePage === 'workflow' || activePage === 'trace' || activePage === 'runs') && (
                     <NavbarContent
                         className="h-12 rounded-full bg-transparent sm:flex"
                         id="workflow-title"
@@ -343,6 +343,7 @@ const Header: React.FC<HeaderProps> = ({ activePage, associatedWorkflowId, runId
                     </NavbarItem>
                     {activePage === 'workflow' && <NavbarItem isActive={activePage === 'workflow'}>Editor</NavbarItem>}
                     {activePage === 'trace' && <NavbarItem isActive={activePage === 'trace'}>Trace</NavbarItem>}
+                    {activePage === 'runs' && <NavbarItem isActive={activePage === 'runs'}>Runs</NavbarItem>}
                     <NavbarItem isActive={activePage === 'evals'}>
                         <Link className="flex gap-2 text-inherit" href="/evals">
                             Evals
@@ -657,6 +658,18 @@ const Header: React.FC<HeaderProps> = ({ activePage, associatedWorkflowId, runId
                         </NavbarItem>
                     </NavbarContent>
                 )}
+                {activePage === 'runs' && (
+                    <NavbarContent
+                        className="ml-auto flex h-12 max-w-fit items-center gap-0 rounded-full p-0 lg:bg-content2 lg:px-1 lg:dark:bg-content1"
+                        justify="end"
+                    >
+                        <NavbarItem>
+                            <Link href={`/workflows/${associatedWorkflowId}`}>
+                                <Button variant="light">Go To Workflow</Button>
+                            </Link>
+                        </NavbarItem>
+                    </NavbarContent>
+                )}
                 <NavbarContent
                     className="flex h-12 max-w-fit items-center gap-0 rounded-full p-0 lg:bg-content2 lg:px-1 lg:dark:bg-content1"
                     justify="end"
diff --git a/frontend/src/pages/runs/[id].tsx b/frontend/src/pages/runs/[id].tsx
@@ -4,6 +4,9 @@ import { Spinner } from '@heroui/react'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
+import { PersistGate } from 'redux-persist/integration/react'
+import Header from '../../components/Header'
+import { persistor } from '../../store/store'
 
 const RunsPage: React.FC = () => {
     const router = useRouter()
@@ -46,18 +49,21 @@ const RunsPage: React.FC = () => {
     }
 
     return (
-        <>
+        <PersistGate loading={null} persistor={persistor}>
             <Head>
                 <title>{workflowName ? `${workflowName} - Runs` : 'Spur Runs'}</title>
             </Head>
-            <div className="max-w-7xl mx-auto px-4 py-6">
-                <div className="mb-6">
-                    <h1 className="text-2xl font-bold text-default-900">{workflowName}</h1>
-                    <p className="text-default-500">Run History</p>
+            <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
+                <Header activePage="runs" associatedWorkflowId={id} />
+                <div className="max-w-7xl mx-auto px-4 py-6 flex-grow">
+                    <div className="mb-6">
+                        <h1 className="text-2xl font-bold text-default-900">{workflowName}</h1>
+                        <p className="text-default-500">Run History</p>
+                    </div>
+                    <TraceTable workflowId={id} />
                 </div>
-                <TraceTable workflowId={id} />
             </div>
-        </>
+        </PersistGate>
     )
 }
 
