fix: fixed the timing issue on resume and pause (#1185)

Co-authored-by: Darshan Simha <darshan_simha@intuit.com>
numaproj · Oct 11, 2023 · ba2b74f · ba2b74f
1 parent 7a1b85c
commit ba2b74f
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 27 deletions.
diff --git a/ui/src/components/pages/Namespace/partials/PipelineCard/index.tsx b/ui/src/components/pages/Namespace/partials/PipelineCard/index.tsx
@@ -56,6 +56,8 @@ export function PipelineCard({
   const [successMessage, setSuccessMessage] = useState<string | undefined>(
     undefined
   );
+  const [timerDateStamp, setTimerDateStamp] = useState<any>(undefined);
+  const [timer, setTimer] = useState<any>(undefined);
 
   const handleUpdateComplete = useCallback(() => {
     refresh();
@@ -124,8 +126,18 @@ export function PipelineCard({
   const isbType = GetISBType(isbData?.isbService?.spec) || UNKNOWN;
   const isbStatus = isbData?.isbService?.status?.phase || UNKNOWN;
   const pipelineStatus = statusData?.pipeline?.status?.phase || UNKNOWN;
-
+  const handleTimer = useCallback(() => {
+    const dateString = new Date().toISOString();
+    const time = timeAgo(dateString);
+    setTimerDateStamp(time);
+    const pauseTimer = setInterval(() => {
+      const time = timeAgo(dateString);
+      setTimerDateStamp(time);
+    }, 1000);
+    setTimer(pauseTimer);
+  }, []);
   const handlePlayClick = useCallback((e) => {
+    handleTimer();
     setStatusPayload({
       spec: {
         lifecycle: {
@@ -136,6 +148,7 @@ export function PipelineCard({
   }, []);
 
   const handlePauseClick = useCallback((e) => {
+    handleTimer();
     setStatusPayload({
       spec: {
         lifecycle: {
@@ -144,6 +157,7 @@ export function PipelineCard({
       },
     });
   }, []);
+
   useEffect(() => {
     const patchStatus = async () => {
       try {
@@ -166,17 +180,30 @@ export function PipelineCard({
         }
       } catch (e) {
         setError(e);
-      } finally {
-        const timer = setTimeout(() => {
-          setStatusPayload(undefined);
-          clearTimeout(timer);
-        }, 5000);
       }
     };
     if (statusPayload) {
       patchStatus();
     }
   }, [statusPayload]);
+
+  useEffect(() => {
+    if (
+      statusPayload?.spec?.lifecycle?.desiredPhase === PAUSED &&
+      statusData?.pipeline?.status?.phase !== PAUSING
+    ) {
+      clearInterval(timer);
+      setStatusPayload(undefined);
+    }
+    if (
+      statusPayload?.spec?.lifecycle?.desiredPhase === RUNNING &&
+      statusData?.pipeline?.status?.phase === RUNNING
+    ) {
+      clearInterval(timer);
+      setStatusPayload(undefined);
+    }
+  }, [statusData]);
+
   return (
     <>
       <Paper
@@ -234,8 +261,10 @@ export function PipelineCard({
               </div>
             ) : successMessage &&
               statusPayload &&
-              statusPayload?.spec?.lifecycle?.desiredPhase === PAUSED &&
-              statusData?.pipeline?.status?.phase !== PAUSED ? (
+              ((statusPayload.spec.lifecycle.desiredPhase === PAUSED &&
+                statusData?.pipeline?.status?.phase !== PAUSED) ||
+                (statusPayload.spec.lifecycle.desiredPhase === RUNNING &&
+                  statusData?.pipeline?.status?.phase !== RUNNING)) ? (
               <div
                 style={{
                   borderRadius: "13px",
@@ -259,13 +288,11 @@ export function PipelineCard({
                   }}
                 >
                   <span style={{ marginLeft: "1rem" }}>
-                    Pipeline Pausing...
-                  </span>
-                  <span style={{ marginLeft: "1rem" }}>
-                    {statusData?.pipeline?.status?.lastUpdated
-                      ? timeAgo(statusData?.pipeline?.status?.lastUpdated)
-                      : ""}
+                    {statusPayload?.spec?.lifecycle?.desiredPhase === PAUSED
+                      ? "Pipeline Pausing..."
+                      : "Pipeline Resuming..."}
                   </span>
+                  <span style={{ marginLeft: "1rem" }}>{timerDateStamp}</span>
                 </Box>
               </div>
             ) : (

diff --git a/ui/src/components/pages/Pipeline/partials/Graph/index.tsx b/ui/src/components/pages/Pipeline/partials/Graph/index.tsx
@@ -306,6 +306,8 @@ export default function Graph(props: GraphProps) {
     undefined
   );
   const [statusPayload, setStatusPayload] = useState<any>(undefined);
+  const [timerDateStamp, setTimerDateStamp] = useState<any>(undefined);
+  const [timer, setTimer] = useState<any>(undefined);
 
   useEffect(() => {
     const nodeSet = new Map();
@@ -519,6 +521,7 @@ export default function Graph(props: GraphProps) {
   const [showSpec, setShowSpec] = useState(true);
 
   const handlePlayClick = useCallback((e) => {
+    handleTimer();
     setStatusPayload({
       spec: {
         lifecycle: {
@@ -529,6 +532,7 @@ export default function Graph(props: GraphProps) {
   }, []);
 
   const handlePauseClick = useCallback((e) => {
+    handleTimer();
     setStatusPayload({
       spec: {
         lifecycle: {
@@ -538,6 +542,17 @@ export default function Graph(props: GraphProps) {
     });
   }, []);
 
+  const handleTimer = useCallback(() => {
+    const dateString = new Date().toISOString();
+    const time = timeAgo(dateString);
+    setTimerDateStamp(time);
+    const pauseTimer = setInterval(() => {
+      const time = timeAgo(dateString);
+      setTimerDateStamp(time);
+    }, 1000);
+    setTimer(pauseTimer);
+  }, []);
+
   useEffect(() => {
     const patchStatus = async () => {
       try {
@@ -560,18 +575,29 @@ export default function Graph(props: GraphProps) {
         }
       } catch (e) {
         setError(e);
-      } finally {
-        const timer = setTimeout(() => {
-          setStatusPayload(undefined);
-          clearTimeout(timer);
-        }, 15000);
       }
     };
     if (statusPayload) {
       patchStatus();
     }
   }, [statusPayload]);
-  console.log(data);
+
+  useEffect(() => {
+    if (
+      statusPayload?.spec?.lifecycle?.desiredPhase === PAUSED &&
+      data?.pipeline?.status?.phase !== PAUSING
+    ) {
+      clearInterval(timer);
+      setStatusPayload(undefined);
+    }
+    if (
+      statusPayload?.spec?.lifecycle?.desiredPhase === RUNNING &&
+      data?.pipeline?.status?.phase === RUNNING
+    ) {
+      clearInterval(timer);
+      setStatusPayload(undefined);
+    }
+  }, [data]);
 
   return (
     <div style={{ height: "90%" }}>
@@ -622,7 +648,10 @@ export default function Graph(props: GraphProps) {
               </Alert>
             ) : successMessage &&
               statusPayload &&
-              statusPayload?.spec?.lifecycle?.desiredPhase === PAUSED ? (
+              ((statusPayload.spec.lifecycle.desiredPhase === PAUSED &&
+                data?.pipeline?.status?.phase !== PAUSED) ||
+                (statusPayload.spec.lifecycle.desiredPhase === RUNNING &&
+                  data?.pipeline?.status?.phase !== RUNNING)) ? (
               <div
                 style={{
                   borderRadius: "13px",
@@ -647,13 +676,11 @@ export default function Graph(props: GraphProps) {
                   }}
                 >
                   <span style={{ marginLeft: "1rem" }}>
-                    Pipeline Pausing...
-                  </span>
-                  <span style={{ marginLeft: "1rem" }}>
-                    {data?.pipeline?.status?.lastUpdated
-                      ? timeAgo(data?.pipeline?.status?.lastUpdated)
-                      : ""}
+                    {statusPayload?.spec?.lifecycle?.desiredPhase === PAUSED
+                      ? "Pipeline Pausing..."
+                      : "Pipeline Resuming..."}
                   </span>
+                  <span style={{ marginLeft: "1rem" }}>{timerDateStamp}</span>
                 </Box>
               </div>
             ) : (