Merge pull request #165 from Tauffer-Consulting/workflows-runs-layout

reorganize runs page
Tauffer-Consulting · Nov 10, 2023 · 3d01e2f · 3d01e2f
2 parents db2f84f + 4723fb4
commit 3d01e2f
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 48 deletions.
diff --git a/frontend/src/features/myWorkflows/components/WorkflowDetail/CustomTabMenu/TaskDetail.tsx b/frontend/src/features/myWorkflows/components/WorkflowDetail/CustomTabMenu/TaskDetail.tsx
@@ -29,13 +29,10 @@ export const TaskDetails = (props: ITaskDetailsProps) => {
         end: props.taskData.duration * 1000,
       });
 
-      return `${duration.hours} ${
-        (duration?.hours ?? 0) > 1 ? "hours" : "hour"
-      } : ${duration.minutes} ${
-        (duration?.minutes ?? 0) > 1 ? "minutes" : "minute"
-      } : ${duration.seconds} ${
-        (duration?.seconds ?? 0) > 1 ? "seconds" : "second"
-      }`;
+      return `${duration.hours} ${(duration?.hours ?? 0) > 1 ? "hours" : "hour"
+        } : ${duration.minutes} ${(duration?.minutes ?? 0) > 1 ? "minutes" : "minute"
+        } : ${duration.seconds} ${(duration?.seconds ?? 0) > 1 ? "seconds" : "second"
+        }`;
     } else {
       return "Not done yet";
     }
@@ -47,7 +44,7 @@ export const TaskDetails = (props: ITaskDetailsProps) => {
         height: "100%",
         width: "100%",
         display: "flex",
-        alignItems: "center",
+        alignItems: "top",
         justifyContent: "center",
       }}
     >

diff --git a/frontend/src/features/myWorkflows/components/WorkflowDetail/CustomTabMenu/TaskResult.tsx b/frontend/src/features/myWorkflows/components/WorkflowDetail/CustomTabMenu/TaskResult.tsx
@@ -103,7 +103,7 @@ export const TaskResult = (props: ITaskResultProps) => {
   return (
     <Container
       sx={{
-        height: "90%",
+        height: "100%",
         width: "100%",
         display: "flex",
         flexDirection: "column",

diff --git a/frontend/src/features/myWorkflows/components/WorkflowDetail/WorkflowRunDetail.tsx b/frontend/src/features/myWorkflows/components/WorkflowDetail/WorkflowRunDetail.tsx
@@ -69,7 +69,7 @@ export const WorkflowRunDetail: React.FC<Props> = ({
   useInterval(mutate, 1000, autoUpdate);
 
   return (
-    <Paper sx={{ height: "46vh" }}>
+    <Paper sx={{ height: "86vh" }}>
       {runId ? (
         nodeId ? (
           <CustomTabMenu

diff --git a/frontend/src/features/myWorkflows/components/WorkflowDetail/WorkflowRunTableFooter/index.tsx b/frontend/src/features/myWorkflows/components/WorkflowDetail/WorkflowRunTableFooter/index.tsx
@@ -27,31 +27,31 @@ export const WorkflowRunTableFooter = React.forwardRef<HTMLDivElement, Props>(
 
     return (
       <Grid container>
-        <Grid item xs={9}>
+        <Grid item xs={6}>
           <Grid
             container
             alignContent="center"
-            justifyContent="end"
+            justifyContent="start"
             sx={{ height: "100%" }}
           >
-            <Grid item xs={1}>
+            <Grid item sx={{ paddingLeft: "1rem" }}>
               <Button variant="contained" onClick={triggerRun}>
                 Run
               </Button>
             </Grid>
-            <Grid item xs={1}>
+            <Grid item sx={{ paddingLeft: "1rem" }}>
               <Button disabled variant="contained">
                 Cancel
               </Button>
             </Grid>
-            <Grid item xs={1}>
+            <Grid item sx={{ paddingLeft: "1rem" }}>
               <Button disabled variant="contained">
                 Pause
               </Button>
             </Grid>
           </Grid>
         </Grid>
-        <Grid item xs={3}>
+        <Grid item xs={6}>
           {paginationElement}
         </Grid>
       </Grid>

diff --git a/frontend/src/features/myWorkflows/components/WorkflowDetail/WorkflowRunsTable.tsx b/frontend/src/features/myWorkflows/components/WorkflowDetail/WorkflowRunsTable.tsx
@@ -131,7 +131,7 @@ export const WorkflowRunsTable: React.FC<Props> = ({
   return (
     <Grid container spacing={3}>
       <Grid item xs={12}>
-        <Card sx={{ height: "35vh" }}>
+        <Card sx={{ height: "38vh" }}>
           {isLoading ? (
             <Skeleton
               animation="wave"
@@ -144,7 +144,7 @@ export const WorkflowRunsTable: React.FC<Props> = ({
               onRowSelectionModelChange={([id]) => {
                 setSelectedRun(
                   workflowRuns?.data?.find((wr) => wr.workflow_run_id === id) ??
-                    null,
+                  null,
                 );
               }}
               rowSelectionModel={

diff --git a/frontend/src/features/myWorkflows/components/WorkflowDetail/index.tsx b/frontend/src/features/myWorkflows/components/WorkflowDetail/index.tsx
@@ -171,37 +171,46 @@ export const WorkflowDetail: React.FC = () => {
       <Grid item xs={12}>
         <Breadcrumbs />
       </Grid>
-      <Grid item xs={12}>
-        <WorkflowRunsTable
-          triggerRun={() => {
-            if (workflow?.id) {
-              void handleRunWorkflow({ id: String(workflow.id) });
-            }
-          }}
-          selectedRun={selectedRun}
-          onSelectedRunChange={handleSelectRun}
-          workflowId={id as string}
-          autoUpdate={autoUpdate}
-          setAutoUpdate={setAutoUpdate}
-        />
-      </Grid>
-      <Grid item xs={7}>
-        <Paper sx={{ height: "46vh" }}>
-          <WorkflowPanel
-            ref={workflowPanelRef}
-            editable={false}
-            onNodeDoubleClick={onNodeDoubleClick}
+      <Grid container spacing={3}>
+        {/* Left Column */}
+        <Grid item lg={7} xs={12}>
+          {/* WorkflowRunsTable */}
+          <Grid item xs={12} sx={{ paddingLeft: "1rem" }}>
+            <WorkflowRunsTable
+              triggerRun={() => {
+                if (workflow?.id) {
+                  void handleRunWorkflow({ id: String(workflow.id) });
+                }
+              }}
+              selectedRun={selectedRun}
+              onSelectedRunChange={handleSelectRun}
+              workflowId={id as string}
+              autoUpdate={autoUpdate}
+              setAutoUpdate={setAutoUpdate}
+            />
+          </Grid>
+          {/* WorkflowPanel */}
+          <Grid item xs={12} sx={{ paddingLeft: "1rem", paddingTop: "2vh" }}>
+            <Paper sx={{ height: "46vh" }}>
+              <WorkflowPanel
+                ref={workflowPanelRef}
+                editable={false}
+                onNodeDoubleClick={onNodeDoubleClick}
+              />
+            </Paper>
+          </Grid>
+        </Grid>
+
+        {/* Right Column */}
+        <Grid item lg={5} xs={12}>
+          <WorkflowRunDetail
+            runId={selectedRun?.workflow_run_id ?? null}
+            tasks={tasks}
+            nodeId={selectedNodeId}
+            workflowId={id as string}
+            autoUpdate={autoUpdate}
           />
-        </Paper>
-      </Grid>
-      <Grid item xs={5}>
-        <WorkflowRunDetail
-          runId={selectedRun?.workflow_run_id ?? null}
-          tasks={tasks}
-          nodeId={selectedNodeId}
-          workflowId={id as string}
-          autoUpdate={autoUpdate}
-        />
+        </Grid>
       </Grid>
     </Grid>
   );