fix(ui): TE-XXXX show loader when evaluation is running for enum query

Author: nalin-patidar

thirdeye-ui/src/app/pages/create-alert/sections/aggregation-granularity-detection/detection/index.tsx

@@ -129,8 +129,8 @@ export const SelectDetection = (): JSX.Element => {
                 if (updatedAlertInsight) {
                     setAlertInsight(updatedAlertInsight);
                     setSelectedTimeRange({
-                        startTime: updatedAlertInsight.datasetStartTime,
-                        endTime: updatedAlertInsight.datasetEndTime,
+                        startTime: updatedAlertInsight.defaultStartTime,
+                        endTime: updatedAlertInsight.defaultEndTime,
                     });
                 }
             }

thirdeye-ui/src/app/pages/create-alert/sections/aggregation-granularity-detection/detection/multiple-dimension/sql-query-view.tsx

@@ -14,7 +14,13 @@
  */
 // external
 import React, { useEffect } from "react";
-import { Box, Button, Grid, TextareaAutosize } from "@material-ui/core";
+import {
+    Box,
+    Button,
+    CircularProgress,
+    Grid,
+    TextareaAutosize,
+} from "@material-ui/core";
 import { useTranslation } from "react-i18next";
 
 // styles
@@ -39,6 +45,7 @@ import {
     NotificationTypeV1,
     useNotificationProviderV1,
 } from "../../../../../../platform/components";
+import { ActionStatus } from "../../../../../../rest/actions.interfaces";
 
 const ALERT_TEMPLATE_FOR_EVALUATE_QUERY_DX = "startree-threshold-query-dx";
 
@@ -164,7 +171,20 @@ export const SqlQueryView = (): JSX.Element => {
                             justifyContent="space-between"
                         >
                             <Button
+                                disabled={
+                                    apiState.evaluationState?.status ===
+                                    ActionStatus.Working
+                                }
                                 size="small"
+                                startIcon={
+                                    apiState.evaluationState?.status ===
+                                    ActionStatus.Working ? (
+                                        <CircularProgress
+                                            color="inherit"
+                                            size={20}
+                                        />
+                                    ) : null
+                                }
                                 variant="contained"
                                 onClick={() => handleRunEnumerations()}
                             >

thirdeye-ui/src/app/pages/create-alert/sections/aggregation-granularity-detection/granularity.tsx

@@ -128,8 +128,8 @@ export const SelectGranularity = (): JSX.Element => {
                 if (newAlertInsight) {
                     setAlertInsight(newAlertInsight);
                     setSelectedTimeRange({
-                        startTime: newAlertInsight.datasetStartTime,
-                        endTime: newAlertInsight.datasetEndTime,
+                        startTime: newAlertInsight.defaultStartTime,
+                        endTime: newAlertInsight.defaultEndTime,
                     });
                 }
                 setWorkingAlert(workingAlertUpdated);