Merge pull request #272 from Tauffer-Consulting/fix/report-page

fix: run report page missing request
Tauffer-Consulting · Apr 8, 2024 · c06064b · c06064b
2 parents 711bbc7 + 34cf453
commit c06064b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 18 deletions.
diff --git a/frontend/src/features/myWorkflows/components/ResultsReport/index.tsx b/frontend/src/features/myWorkflows/components/ResultsReport/index.tsx
@@ -31,11 +31,8 @@ dayjs.extend(duration);
 export const ResultsReport: React.FC = () => {
   const { id, runId } = useParams<{ id: string; runId: string }>();
   const { workspace } = useWorkspaces();
+
   const navigate = useNavigate();
-  const { data } = useRunReport({
-    workflowId: id,
-    runId,
-  });
 
   const isPrint = useMediaQuery("print");
 
@@ -51,17 +48,25 @@ export const ResultsReport: React.FC = () => {
     workspaceId: workspace?.id,
   });
 
+  const { data: runReport } = useRunReport({
+    workspaceId: workspace?.id,
+    workflowId: id,
+    runId,
+  });
+
   const { startDate, endDate, duration } = useMemo(() => {
-    if (!data?.data) {
+    if (!runReport?.data) {
       return {
         startDate: null,
         endDate: null,
         duration: null,
       };
     }
 
-    const startDate = dayjs(data?.data[0]?.start_date);
-    const endDate = dayjs(data?.data[data?.data.length - 1]?.end_date);
+    const startDate = dayjs(runReport?.data[0]?.start_date);
+    const endDate = dayjs(
+      runReport?.data[runReport?.data.length - 1]?.end_date,
+    );
 
     const durationRaw = dayjs.duration(endDate.diff(startDate));
 
@@ -78,9 +83,9 @@ export const ResultsReport: React.FC = () => {
       endDate: endDate.format("YYYY-MM-DD HH:mm:ss"),
       duration: formattedDuration,
     };
-  }, [data]);
+  }, [runReport]);
 
-  if (!data?.data) {
+  if (!runReport?.data) {
     return <ResultsReportSkeleton />;
   }
 
@@ -111,7 +116,7 @@ export const ResultsReport: React.FC = () => {
               Pieces :
             </Typography>
             <List>
-              {data?.data.map((task, idx) => (
+              {runReport?.data.map((task, idx) => (
                 <div key={idx}>
                   <ListItem
                     key={task.task_id}
@@ -141,7 +146,7 @@ export const ResultsReport: React.FC = () => {
                       />
                     </ListItemButton>
                   </ListItem>
-                  {idx !== data?.data.length - 1 ? <Divider /> : null}
+                  {idx !== runReport?.data.length - 1 ? <Divider /> : null}
                 </div>
               ))}
             </List>
@@ -151,7 +156,7 @@ export const ResultsReport: React.FC = () => {
               justifyContent="center"
               alignItems="center"
             >
-              <Grid item xs={12}>
+              <Grid item xs={12} marginBottom={1}>
                 <DownloadAsPDF contentId="DownloadAsPDF" />{" "}
               </Grid>
             </Grid>
@@ -238,7 +243,7 @@ export const ResultsReport: React.FC = () => {
               </Grid>
             </Grid>
 
-            {data?.data.map((d, i) => (
+            {runReport?.data.map((d, i) => (
               <PieceReport
                 id={d.task_id}
                 key={`piece-report-${i}`}

diff --git a/frontend/src/features/myWorkflows/components/ResultsReport/skeleton.tsx b/frontend/src/features/myWorkflows/components/ResultsReport/skeleton.tsx
@@ -12,10 +12,13 @@ import {
   Typography,
 } from "@mui/material";
 import React from "react";
+import { useNavigate } from "react-router-dom";
 
 import { PaperA4 } from "./PaperA4";
 
 export const ResultsReportSkeleton: React.FC = () => {
+  const navigate = useNavigate();
+
   const array = Array(5).fill(0);
 
   return (
@@ -29,11 +32,16 @@ export const ResultsReportSkeleton: React.FC = () => {
       }}
     >
       <Grid item xs={12}>
-        <Button onClick={() => {}} variant="text">
+        <Button
+          onClick={() => {
+            navigate(-1);
+          }}
+          variant="text"
+        >
           <Typography component="span">{`< Go back to Detail`}</Typography>
         </Button>
       </Grid>
-      <Grid item xs={2} direction="column">
+      <Grid item xs={2} container direction="column">
         <Paper>
           <Container sx={{ paddingTop: 2 }}>
             <Typography variant="h6" component="h2">
@@ -42,9 +50,8 @@ export const ResultsReportSkeleton: React.FC = () => {
 
             <List>
               {array.map((_, idx) => (
-                <>
+                <div key={`ResultsReport-key-${idx}`}>
                   <ListItem
-                    key={`ResultsReport-key-${idx}`}
                     disablePadding
                     sx={{ maxHeight: "60px", overflow: "hidden" }}
                   >
@@ -53,7 +60,7 @@ export const ResultsReportSkeleton: React.FC = () => {
                     </ListItemButton>
                   </ListItem>
                   {idx !== array.length - 1 ? <Divider /> : null}
-                </>
+                </div>
               ))}
             </List>
           </Container>