shown countdown to next call

startreedata · Jan 22, 2025 · 01de6d4 · 01de6d4
1 parent bf08005
commit 01de6d4
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/thirdeye-ui/src/app/components/alert-view/sub-header/alert-sub-header.component.tsx b/thirdeye-ui/src/app/components/alert-view/sub-header/alert-sub-header.component.tsx
@@ -76,10 +76,12 @@ export const AlertViewSubHeader: FunctionComponent<AlertViewSubHeaderProps> = ({
                                         display="flex"
                                         gridGap="4px"
                                     >
-                                        <CircularProgress
-                                            color="inherit"
-                                            size={15}
-                                        />
+                                        {anomalyInfoStatus.loading && (
+                                            <CircularProgress
+                                                color="inherit"
+                                                size={15}
+                                            />
+                                        )}
                                         {anomalyInfoStatus?.loadingtext ||
                                             "Computing anomalies..."}
                                     </Box>

diff --git a/thirdeye-ui/src/app/pages/alerts-view-page/alerts-view-page.component.tsx b/thirdeye-ui/src/app/pages/alerts-view-page/alerts-view-page.component.tsx
@@ -98,6 +98,7 @@ export const AlertsViewPage: FunctionComponent = () => {
     const [resetStatusNotification, setResetStatusNotification] =
         useState<NotificationV1 | null>(null);
     const { alertInsight, getAlertInsight } = useGetAlertInsight();
+    const [taskStatusLoading, setTaskStatusLoading] = useState(false);
 
     const [searchParams, setSearchParams] = useSearchParams();
 
@@ -117,41 +118,54 @@ export const AlertsViewPage: FunctionComponent = () => {
     );
 
     const fetchDetectionTaskForAlert = async (
-        retryNumber: number
+        retryNumber: number,
+        prevInterval?: NodeJS.Timeout
     ): Promise<void> => {
         // let taskSubType: TaskSubtype | undefined;
         // if (searchParams.get("update")) {
         //     taskSubType = TaskSubtype.DETECTION_HISTORICAL_DATA_AFTER_UPDATE;
         // } else if (searchParams.has(QUERY_PARAM_KEY_ANOMALIES_RETRY)) {
         //     taskSubType = TaskSubtype.DETECTION_HISTORICAL_DATA_AFTER_CREATE;
         // }
+        clearInterval(prevInterval);
         if (
             searchParams.get("alert") ||
             searchParams.has(QUERY_PARAM_KEY_ANOMALIES_RETRY)
         ) {
+            let interval: NodeJS.Timeout;
             try {
+                setTaskStatusLoading(true);
                 const taskStatus = await getTasks({
                     // taskSubType: taskSubType,
                     alertOrSubGroupId: Number(alertId),
                     status: [TaskStatus.RUNNING, TaskStatus.WAITING],
                 });
+                setTaskStatusLoading(false);
                 if (taskStatus.length) {
                     const nextRefreshAttempts = retryNumber + 1;
+                    interval = setInterval(() => {
+                        setNextAttemptTime((prevState) => prevState - 1000);
+                    }, 1000);
                     setTimeout(() => {
                         setNextAttemptTime(
                             5000 * Math.pow(2, nextRefreshAttempts)
                         );
-                        fetchDetectionTaskForAlert(nextRefreshAttempts);
+                        fetchDetectionTaskForAlert(
+                            nextRefreshAttempts,
+                            interval
+                        );
                     }, 5000 * Math.pow(2, retryNumber));
                 } else {
                     // setRefreshAttempts(0);
+                    setTaskStatusLoading(false);
                     getAlertQuery.refetch();
                     getEnumerationItemsQuery.refetch();
                     getAnomaliesQuery.refetch();
                     getAlertInsight({ alertId: Number(alertId) });
                     fetchStats();
                 }
             } catch (e) {
+                setTaskStatusLoading(false);
                 notifyIfErrors(
                     ActionStatus.Error,
                     getErrorMessages(e as AxiosError),
@@ -466,7 +480,10 @@ export const AlertsViewPage: FunctionComponent = () => {
         if (ms < 60000) {
             return `${ms / 1000} seconds`;
         } else {
-            return `${Math.round(ms / 60000)} minutes`;
+            const minutes = Math.floor(ms / 60000);
+            const remainingSeconds = (ms / 1000) % 60;
+
+            return `${minutes} minutes ${remainingSeconds} seconds`;
         }
     };
 
@@ -569,10 +586,14 @@ export const AlertsViewPage: FunctionComponent = () => {
                             anomalyInfoStatus={
                                 getAnomaliesQuery.isLoading
                                     ? {
-                                          loading: getAnomaliesQuery.isLoading,
-                                          loadingtext: `Anomalies are being computed. - Will check for new results in ${getReadableTime(
-                                              nextAttemptTime
-                                          )}`,
+                                          loading:
+                                              getAnomaliesQuery.isLoading &&
+                                              taskStatusLoading,
+                                          loadingtext: taskStatusLoading
+                                              ? "Checking for computed anomalies"
+                                              : `Anomalies are being computed. - Will check for new results in ${getReadableTime(
+                                                    nextAttemptTime
+                                                )}`,
                                       }
                                     : undefined
                             }