[#796] ui: Fix: history data some time wrongly ordered (#809)

dagu-org · Feb 1, 2025 · 9344144 · 9344144
1 parent 38c7969
commit 9344144
Show file tree

Hide file tree

Showing 13 changed files with 201 additions and 196 deletions.
diff --git a/ui/src/components/molecules/DAGActions.tsx b/ui/src/components/molecules/DAGActions.tsx
@@ -20,7 +20,7 @@ type LabelProps = {
 type Props = {
   status?: Status | WorkflowStatus;
   name: string;
-  dag: DAG | Workflow;
+  dag: DAG | Workflow | undefined;
   label?: boolean;
   redirectTo?: string;
   refresh?: () => void;
@@ -78,15 +78,11 @@ function DAGActions({
     [refresh]
   );
 
-  const buttonState = React.useMemo(
-    () => ({
-      start: status?.Status != SchedulerStatus.Running,
-      stop: status?.Status == SchedulerStatus.Running,
-      retry:
-        status?.Status != SchedulerStatus.Running && status?.RequestId != '',
-    }),
-    [status]
-  );
+  const buttonState = {
+    start: status?.Status != SchedulerStatus.Running,
+    stop: status?.Status == SchedulerStatus.Running,
+    retry: status?.Status != SchedulerStatus.Running && status?.RequestId != '',
+  };
   return (
     <Stack direction="row" spacing={2}>
       <ActionButton
@@ -166,17 +162,19 @@ function DAGActions({
           <Box>{status?.RequestId}</Box>
         </Stack>
       </ConfirmModal>
-      <StartDAGModal
-        dag={dag}
-        visible={isStartModal}
-        onSubmit={(params) => {
-          setIsStartModal(false);
-          onSubmit({ name: name, action: 'start', params: params });
-        }}
-        dismissModal={() => {
-          setIsStartModal(false);
-        }}
-      />
+      {dag && (
+        <StartDAGModal
+          dag={dag}
+          visible={isStartModal}
+          onSubmit={(params) => {
+            setIsStartModal(false);
+            onSubmit({ name: name, action: 'start', params: params });
+          }}
+          dismissModal={() => {
+            setIsStartModal(false);
+          }}
+        />
+      )}
     </Stack>
   );
 }

diff --git a/ui/src/components/molecules/DAGDefinition.tsx b/ui/src/components/molecules/DAGDefinition.tsx
@@ -25,16 +25,14 @@ function DAGDefinition({
       Prism.highlightAll();
     }
   }, [value]);
-  const className = React.useMemo(() => {
-    const classes = [`language-${language}`];
-    if (lineNumbers) {
-      classes.push('line-numbers');
-    }
-    if (keyword) {
-      classes.push(`keyword-${keyword}`);
-    }
-    return classes.join(' ');
-  }, [lineNumbers, keyword]);
+  const classes = [`language-${language}`];
+  if (lineNumbers) {
+    classes.push('line-numbers');
+  }
+  if (keyword) {
+    classes.push(`keyword-${keyword}`);
+  }
+  const className = classes.join(' ');
   return (
     <pre data-start={startLine || 1} data-line={highlightLine}>
       <code className={className}>{value}</code>

diff --git a/ui/src/components/molecules/DashboardTimechart.tsx b/ui/src/components/molecules/DashboardTimechart.tsx
@@ -85,10 +85,6 @@ function DashboardTimechart({ data: input }: Props) {
       timelineInstance.current.setItems(dataset);
     }
 
-    console.log(
-      {input, items}
-    )
-
     return () => {
       if (timelineInstance.current) {
         timelineInstance.current.destroy();
@@ -99,10 +95,7 @@ function DashboardTimechart({ data: input }: Props) {
 
   return (
     <TimelineWrapper>
-      <div
-        ref={timelineRef}
-        style={{ width: '100%', height: '100%' }}
-      />
+      <div ref={timelineRef} style={{ width: '100%', height: '100%' }} />
       <style>
         {`
         .vis-item .vis-item-overflow {
@@ -167,4 +160,4 @@ function TimelineWrapper({ children }: { children: React.ReactNode }) {
   );
 }
 
-export default DashboardTimechart;
+export default DashboardTimechart;
diff --git a/ui/src/components/molecules/Graph.tsx b/ui/src/components/molecules/Graph.tsx
@@ -217,7 +217,7 @@ const calculateGraphBreadth = (steps: Step[] | Node[]) => {
 
   // Count nodes at each level
   const levelCounts = new Map<number, number>();
-  nodeLevels.forEach((level, _) => {
+  nodeLevels.forEach((level) => {
     levelCounts.set(level, (levelCounts.get(level) || 0) + 1);
   });
 

diff --git a/ui/src/components/molecules/HistoryTable.tsx b/ui/src/components/molecules/HistoryTable.tsx
@@ -26,7 +26,7 @@ function HistoryTable({ logs, gridData, onSelect, idx }: Props) {
         <TableHead>
           <TableRow>
             <TableCell></TableCell>
-            {logs.map((log, i) => {
+            {logs.map((_, i) => {
               let date;
               const startedAt = logs[i].Status.StartedAt;
               if (startedAt && startedAt != '-') {
@@ -39,7 +39,7 @@ function HistoryTable({ logs, gridData, onSelect, idx }: Props) {
                 moment(logs[i - 1].Status.StartedAt).format('M/D') != date;
               return (
                 <TableCell
-                  key={log.Status.StartedAt}
+                  key={`date-${i}`}
                   style={colStyle}
                   onClick={() => {
                     onSelect(i);

diff --git a/ui/src/components/molecules/HistoryTableRow.tsx b/ui/src/components/molecules/HistoryTableRow.tsx
@@ -11,13 +11,10 @@ type Props = {
 };
 
 function HistoryTableRow({ data, onSelect, idx }: Props) {
-  const vals = React.useMemo(() => {
-    return data.Vals.reverse();
-  }, [data]);
   return (
     <StyledTableRow>
       <TableCell>{data.Name}</TableCell>
-      {vals.map((status, i) => {
+      {[...data.Vals].reverse().map((status, i) => {
         const style: CSSProperties = { ...circleStyle };
         const tdStyle: CSSProperties = { maxWidth: '22px' };
         if (i == idx) {

diff --git a/ui/src/components/molecules/NodeStatusChip.tsx b/ui/src/components/molecules/NodeStatusChip.tsx
@@ -9,9 +9,7 @@ type Props = {
 };
 
 function NodeStatusChip({ status, children }: Props) {
-  const style = React.useMemo(() => {
-    return nodeStatusColorMapping[status] || {};
-  }, [status]);
+  const style = nodeStatusColorMapping[status] || {};
   return <Chip sx={style} label={children} />;
 }
 

diff --git a/ui/src/components/molecules/NodeStatusTable.tsx b/ui/src/components/molecules/NodeStatusTable.tsx
@@ -40,17 +40,12 @@ function NodeStatusTable({ nodes, status, name, refresh, file = '' }: Props) {
       setModal(true);
     }
   };
-  const dismissModal = React.useCallback(() => {
-    setModal(false);
-  }, [setModal]);
-  const onUpdateStatus = React.useCallback(
-    async (step: Step, action: string) => {
-      doPost(action, step.Name);
-      dismissModal();
-      refresh();
-    },
-    [refresh, dismissModal]
-  );
+  const dismissModal = () => setModal(false);
+  const onUpdateStatus = async (step: Step, action: string) => {
+    doPost(action, step.Name);
+    dismissModal();
+    refresh();
+  };
   const styles = stepTabColStyles;
   let i = 0;
   if (!nodes || !nodes.length) {

diff --git a/ui/src/components/organizations/DAGSpec.tsx b/ui/src/components/organizations/DAGSpec.tsx
@@ -197,7 +197,7 @@ function DAGSpec({ data }: Props) {
                     <DAGEditor
                       value={data.Definition}
                       onChange={(newValue) => {
-                        setCurrentValue(newValue);
+                        setCurrentValue(newValue || '');
                       }}
                     ></DAGEditor>
                   </Box>

diff --git a/ui/src/components/organizations/DAGStatus.tsx b/ui/src/components/organizations/DAGStatus.tsx
@@ -34,16 +34,11 @@ function DAGStatus({ DAG, name, refresh }: Props) {
     onSuccess: refresh,
     requestId: DAG.Status?.RequestId,
   });
-  const dismissModal = React.useCallback(() => {
-    setModal(false);
-  }, [setModal]);
-  const onUpdateStatus = React.useCallback(
-    async (step: Step, action: string) => {
-      doPost(action, step.Name);
-      dismissModal();
-    },
-    [refresh, dismissModal]
-  );
+  const dismissModal = () => setModal(false);
+  const onUpdateStatus = async (step: Step, action: string) => {
+    doPost(action, step.Name);
+    dismissModal();
+  };
   const onSelectStepOnGraph = React.useCallback(
     async (id: string) => {
       const status = DAG.Status?.Status;
@@ -63,13 +58,10 @@ function DAGStatus({ DAG, name, refresh }: Props) {
   );
   const [cookie, setCookie] = useCookies(['flowchart']);
   const [flowchart, setFlowchart] = React.useState(cookie['flowchart']);
-  const onChangeFlowchart = React.useCallback(
-    (value: FlowchartType) => {
-      setCookie('flowchart', value, { path: '/' });
-      setFlowchart(value);
-    },
-    [setCookie, flowchart, setFlowchart]
-  );
+  const onChangeFlowchart = (value: FlowchartType) => {
+    setCookie('flowchart', value, { path: '/' });
+    setFlowchart(value);
+  };
 
   if (!DAG.Status) {
     return null;

diff --git a/ui/src/components/organizations/ExecutionHistory.tsx b/ui/src/components/organizations/ExecutionHistory.tsx
@@ -8,6 +8,7 @@ import DAGStatusOverview from '../molecules/DAGStatusOverview';
 import SubTitle from '../atoms/SubTitle';
 import LoadingIndicator from '../atoms/LoadingIndicator';
 import HistoryTable from '../molecules/HistoryTable';
+import { DAGStatusContext } from '../../contexts/DAGStatusContext';
 
 type Props = {
   logData: LogData;
@@ -30,41 +31,42 @@ type HistoryTableProps = {
 };
 
 function DAGHistoryTable({ GridData, Logs }: HistoryTableProps) {
-  console.log(
-    { GridData, Logs },
-  )
-  const [idx, setIdx] = React.useState(Logs ?Logs.length - 1 : 0);
-  const logs = React.useMemo(() => {
-    return Logs;
-  }, [Logs]);
+  const [idx, setIdx] = React.useState(Logs ? Logs.length - 1 : 0);
+  const dagStatusContext = React.useContext(DAGStatusContext);
 
   let handlers: Node[] | null = null;
-  if (logs && logs.length > idx) {
-    handlers = Handlers(logs[idx].Status);
+  if (Logs && Logs.length > idx) {
+    handlers = Handlers(Logs[idx].Status);
   }
 
+  React.useEffect(() => {
+    if (Logs && Logs[idx]) {
+      dagStatusContext.setData(Logs[idx].Status);
+    }
+  }, [idx]);
+
   return (
     <DAGContext.Consumer>
       {(props) => (
         <React.Fragment>
           <Box>
             <SubTitle>Execution History</SubTitle>
             <HistoryTable
-              logs={logs|| []}
-              gridData={GridData|| []}
+              logs={Logs || []}
+              gridData={GridData || []}
               onSelect={setIdx}
               idx={idx}
             />
           </Box>
 
-          {logs && logs[idx] ? (
+          {Logs && Logs[idx] ? (
             <React.Fragment>
               <Box sx={{ mt: 3 }}>
                 <SubTitle>Status</SubTitle>
                 <Box sx={{ mt: 2 }}>
                   <DAGStatusOverview
-                    status={logs[idx].Status}
-                    file={logs[idx].File}
+                    status={Logs[idx].Status}
+                    file={Logs[idx].File}
                     {...props}
                   />
                 </Box>
@@ -73,9 +75,9 @@ function DAGHistoryTable({ GridData, Logs }: HistoryTableProps) {
                 <SubTitle>Steps</SubTitle>
                 <Box sx={{ mt: 2 }}>
                   <NodeStatusTable
-                    nodes={logs[idx].Status.Nodes}
-                    status={logs[idx].Status}
-                    file={logs[idx].File}
+                    nodes={Logs[idx].Status.Nodes}
+                    status={Logs[idx].Status}
+                    file={Logs[idx].File}
                     {...props}
                   />
                 </Box>
@@ -86,9 +88,9 @@ function DAGHistoryTable({ GridData, Logs }: HistoryTableProps) {
                   <SubTitle>Lifecycle Hooks</SubTitle>
                   <Box sx={{ mt: 2 }}>
                     <NodeStatusTable
-                      nodes={Handlers(logs[idx].Status)}
-                      file={logs[idx].File}
-                      status={logs[idx].Status}
+                      nodes={Handlers(Logs[idx].Status)}
+                      file={Logs[idx].File}
+                      status={Logs[idx].Status}
                       {...props}
                     />
                   </Box>

diff --git a/ui/src/contexts/DAGStatusContext.ts b/ui/src/contexts/DAGStatusContext.ts
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Status } from '../models';
+
+type DAGStatusContextType = {
+  data: Status | undefined;
+  setData(val: Status): void;
+};
+
+export const DAGStatusContext = React.createContext<DAGStatusContextType>({
+  data: undefined as Status | undefined,
+  setData: () => {
+    return;
+  },
+});