Replace workflow Run display with a table

Author: aliasaria

src/renderer/components/Experiment/Workflows/WorkflowRunCanvas.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {
+  Card,
+  CardContent,
+  Typography,
+  Divider,
+  List,
+  ListItem,
+  Box,
+  Chip,
+  CardCover,
+} from '@mui/joy';
+import { SquareCheckIcon } from 'lucide-react';
+
+export default function WorkflowRunDisplay({ selectedWorkflowRun }) {
+  if (!selectedWorkflowRun) {
+    return <Typography>No workflow run selected</Typography>;
+  }
+
+  const { run, jobs, workflow } = selectedWorkflowRun;
+
+  const formatDuration = (start, end) => {
+    if (!start || !end) {
+      return null;
+    }
+
+    const startTime = new Date(start);
+    const endTime = new Date(end);
+    const duration = (endTime - startTime) / 1000; // duration in seconds
+    const minutes = Math.floor(duration / 60);
+    const seconds = duration % 60;
+    return `${minutes}m ${seconds}s`;
+  };
+
+  return (
+    <Card variant="outlined" sx={{ padding: 2 }}>
+      <CardContent>
+        <Typography level="h4" sx={{ marginBottom: 1 }}>
+          Workflow: {workflow.name}
+        </Typography>
+        <Typography level="body-md" sx={{ marginBottom: 2 }}>
+          Status: <Chip>{run.status}</Chip>
+        </Typography>
+        <Typography level="body-md" sx={{ marginBottom: 2 }}>
+          Created At: {run.created_at} | Updated At: {run.updated_at}
+        </Typography>
+        <Divider />
+        <Typography level="h4" sx={{ marginTop: 2, marginBottom: 1 }}>
+          Tasks:
+        </Typography>
+        <List>
+          {jobs.map((job) => (
+            <ListItem key={job.jobID}>
+              <Box>
+                <Typography
+                  level="title-md"
+                  startDecorator={<SquareCheckIcon />}
+                >{`Task: ${job.taskName}`}</Typography>
+                <Typography level="body-md" sx={{ color: 'text.secondary' }}>
+                  Status: <Chip>{job.status}</Chip>
+                </Typography>
+                <Typography level="body-md" sx={{ color: 'text.secondary' }}>
+                  {`Start: ${job?.jobStartTime} | End: ${job?.jobEndTime}`}
+                </Typography>
+                <Typography level="body-md" sx={{ color: 'text.secondary' }}>
+                  Duration: {formatDuration(job.jobStartTime, job.jobEndTime)}
+                </Typography>
+                <Divider sx={{ marginTop: 1 }} />
+              </Box>
+            </ListItem>
+          ))}
+        </List>
+      </CardContent>
+    </Card>
+  );
+}

src/renderer/components/Experiment/Workflows/WorkflowRunDisplay.tsx

@@ -14,7 +14,7 @@ import useSWR from 'swr';
 import TinyCircle from 'renderer/components/Shared/TinyCircle';
 import { useEffect, useState } from 'react';
 import * as chatAPI from '../../../lib/transformerlab-api-sdk';
-import WorkflowRunCanvas from './WorkflowRunCanvas';
+import WorkflowRunCanvas from './WorkflowRunDisplay';
 
 const fetcher = (url: any) => fetch(url).then((res) => res.json());
 
@@ -58,7 +58,9 @@ function ListOfWorkflowRuns({
               )}
             </ListItemDecorator>
             <ListItemContent>
-              <Typography level="title-lg">{run?.id}</Typography>
+              <Typography level="title-lg">
+                {run?.workflow_name} - {run?.id}
+              </Typography>
             </ListItemContent>
           </ListItemButton>
         </ListItem>

src/renderer/components/Experiment/Workflows/WorkflowRuns.tsx

@@ -42,7 +42,7 @@ export default function Workflows({ experimentInfo }) {
           >
             <WorkflowList experimentInfo={experimentInfo} />
           </TabPanel>
-          <TabPanel value={1} sx={{ width: '100%' }}>
+          <TabPanel value={1} sx={{ width: '100%', overflow: 'hidden' }}>
             <WorkflowRuns experimentInfo={experimentInfo} />
           </TabPanel>
           <TabPanel value={2} sx={{ width: '100%', overflow: 'hidden' }}>