Skip to content

Commit fbca0f1

Browse files
nalin-patidarnalin-patidar
authored
fix(ui): TE-XXXX show loader for alert recommendations (#1799)
* fix(ui): TE-XXXX show loader for alert recommendations * added loader to datasets and detections
1 parent 671f756 commit fbca0f1

File tree

9 files changed

+166
-48
lines changed

9 files changed

+166
-48
lines changed

‎thirdeye-ui/src/app/locale/languages/en-us.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -530,6 +530,7 @@
530530
"selected-time-range": "selected time range",
531531
"sendgrid-api-key": "SendGrid API Key",
532532
"sensitivity": "Sensitivity",
533+
"setting-up-detection": "Setting up detections...",
533534
"settings": "Settings",
534535
"setup-entity": "Setup {{entity}}",
535536
"show-all": "Show All",

‎thirdeye-ui/src/app/pages/create-alert/hooks/state/index.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ type RequestState = { status?: ActionStatus; errorMessages?: ErrorMessage[] };
3939
type ApiState = {
4040
evaluationState: RequestState | null;
4141
insightState: RequestState | null;
42+
alertRecommedationState: RequestState | null;
4243
};
4344

4445
export type MultipleDimensionEnumeratorOptions =
@@ -112,6 +113,7 @@ export const useCreateAlertStore = create<CreateAlertStore>((set) => ({
112113
apiState: {
113114
evaluationState: null,
114115
insightState: null,
116+
alertRecommedationState: null,
115117
},
116118
alertTemplates: null,
117119
selectedDataset: null,
@@ -157,6 +159,7 @@ export const useCreateAlertStore = create<CreateAlertStore>((set) => ({
157159
granularity: undefined,
158160
anomalyDetectionType: null,
159161
workingAlert: {},
162+
alertRecommendations: null,
160163
selectedDetectionAlgorithm: null,
161164
enumeratorQuery: "",
162165
selectedEnumerationItems: null,
@@ -170,6 +173,7 @@ export const useCreateAlertStore = create<CreateAlertStore>((set) => ({
170173
editedDatasourceFieldValue: "",
171174
anomalyDetectionType: null,
172175
workingAlert: {},
176+
alertRecommendations: null,
173177
selectedDetectionAlgorithm: null,
174178
enumeratorQuery: "",
175179
selectedEnumerationItems: null,
@@ -181,6 +185,7 @@ export const useCreateAlertStore = create<CreateAlertStore>((set) => ({
181185
granularity: undefined,
182186
anomalyDetectionType: null,
183187
workingAlert: {},
188+
alertRecommendations: null,
184189
selectedDetectionAlgorithm: null,
185190
enumeratorQuery: "",
186191
selectedEnumerationItems: null,
@@ -192,12 +197,14 @@ export const useCreateAlertStore = create<CreateAlertStore>((set) => ({
192197
anomalyDetectionType: null,
193198
selectedDetectionAlgorithm: null,
194199
enumeratorQuery: "",
200+
alertRecommendations: null,
195201
selectedEnumerationItems: null,
196202
workingAlertEvaluation: null,
197203
}),
198204
setQueryFilters: (queryFilters: string) =>
199205
set({
200206
queryFilters: queryFilters,
207+
alertRecommendations: null,
201208
selectedDetectionAlgorithm: null,
202209
enumeratorQuery: "",
203210
}),
@@ -213,6 +220,7 @@ export const useCreateAlertStore = create<CreateAlertStore>((set) => ({
213220
anomalyDetectionType: anomalyDetectionType,
214221
multipleDimensionEnumeratorType: null,
215222
enumeratorQuery: "",
223+
alertRecommendations: null,
216224
selectedDetectionAlgorithm: null,
217225
selectedEnumerationItems: null,
218226
workingAlertEvaluation: null,
@@ -236,6 +244,7 @@ export const useCreateAlertStore = create<CreateAlertStore>((set) => ({
236244
) =>
237245
set({
238246
multipleDimensionEnumeratorType: multipleDimensionEnumeratorType,
247+
alertRecommendations: null,
239248
selectedDetectionAlgorithm: null,
240249
selectedEnumerationItems: null,
241250
enumeratorQuery: "",
@@ -244,6 +253,7 @@ export const useCreateAlertStore = create<CreateAlertStore>((set) => ({
244253
setEnumeratorQuery: (enumeratorQuery: string) =>
245254
set({
246255
enumeratorQuery: enumeratorQuery,
256+
alertRecommendations: null,
247257
selectedDetectionAlgorithm: null,
248258
selectedEnumerationItems: null,
249259
}),
@@ -291,6 +301,7 @@ export const useCreateAlertStore = create<CreateAlertStore>((set) => ({
291301
apiState: {
292302
evaluationState: null,
293303
insightState: null,
304+
alertRecommedationState: null,
294305
},
295306
alertTemplates: null,
296307
selectedDataset: null,

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

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
* the License.
1414
*/
1515
// external
16-
import React, { useEffect, useState } from "react";
16+
import React, { useEffect } from "react";
1717
import { Box, CircularProgress, Grid, Typography } from "@material-ui/core";
1818
import { useTranslation } from "react-i18next";
1919

@@ -48,6 +48,7 @@ import { MultipleDimensionView } from "./multiple-dimension";
4848
// utils
4949
import { defaultStartingAlert, getWorkingAlert } from "../../../utils";
5050
import { notifyIfErrors } from "../../../../../utils/notifications/notifications.util";
51+
import { ActionStatus } from "../../../../../rest/actions.interfaces";
5152

5253
export const SelectDetection = (): JSX.Element => {
5354
const { t } = useTranslation();
@@ -71,7 +72,8 @@ export const SelectDetection = (): JSX.Element => {
7172
setApiState,
7273
} = useCreateAlertStore();
7374
const { notify } = useNotificationProviderV1();
74-
const [alertInsightLoading] = useState(false);
75+
const alertInsightLoading =
76+
apiState.insightState?.status === ActionStatus.Working;
7577

7678
const { getEvaluation, evaluation, status, errorMessages } =
7779
useGetEvaluation();
@@ -100,6 +102,13 @@ export const SelectDetection = (): JSX.Element => {
100102
const handleAnomalyDetectionChange = async (
101103
item: string
102104
): Promise<void> => {
105+
setApiState({
106+
...apiState,
107+
alertRecommedationState: {
108+
...apiState.alertRecommedationState,
109+
status: ActionStatus.Working,
110+
},
111+
});
103112
setAnomalyDetectionType(item);
104113
let updatedAlert = workingAlert;
105114
if (item === AnomalyDetectionOptions.SINGLE) {
@@ -137,12 +146,26 @@ export const SelectDetection = (): JSX.Element => {
137146
getAlertRecommendation(workingAlert as EditableAlert)
138147
.then((recommendations) => {
139148
setAlertRecommendations(recommendations);
149+
setApiState({
150+
...apiState,
151+
alertRecommedationState: {
152+
...apiState.alertRecommedationState,
153+
status: ActionStatus.Done,
154+
},
155+
});
140156
})
141157
.catch(() => {
142158
notify(
143159
NotificationTypeV1.Error,
144160
t("errors.could-not-compute-detection-recommendations")
145161
);
162+
setApiState({
163+
...apiState,
164+
alertRecommedationState: {
165+
...apiState.alertRecommedationState,
166+
status: ActionStatus.Error,
167+
},
168+
});
146169
});
147170
const start = updatedAlertInsight?.defaultStartTime;
148171
const end = updatedAlertInsight?.defaultEndTime;
@@ -197,7 +220,7 @@ export const SelectDetection = (): JSX.Element => {
197220
style={{ marginLeft: "4px" }}
198221
variant="caption"
199222
>
200-
{t("label.loading-insights")}
223+
{t("label.setting-up-detection")}
201224
</Typography>
202225
</Box>
203226
)}

‎thirdeye-ui/src/app/pages/create-alert/sections/aggregation-granularity-detection/detection/multiple-dimension/recommended-dimesions-modal.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,15 +187,36 @@ export const RecommendedDimesnionsModal = ({
187187
isMultiDimensionAlert: true,
188188
});
189189
setWorkingAlert(workingAlertUpdated);
190+
setApiState({
191+
...apiState,
192+
alertRecommedationState: {
193+
...apiState.alertRecommedationState,
194+
status: ActionStatus.Working,
195+
},
196+
});
190197
getAlertRecommendation(workingAlertUpdated as EditableAlert)
191198
.then((recommendations) => {
192199
setAlertRecommendations(recommendations);
200+
setApiState({
201+
...apiState,
202+
alertRecommedationState: {
203+
...apiState.alertRecommedationState,
204+
status: ActionStatus.Done,
205+
},
206+
});
193207
})
194208
.catch(() => {
195209
notify(
196210
NotificationTypeV1.Error,
197211
t("errors.could-not-compute-detection-recommendations")
198212
);
213+
setApiState({
214+
...apiState,
215+
alertRecommedationState: {
216+
...apiState.alertRecommedationState,
217+
status: ActionStatus.Error,
218+
},
219+
});
199220
});
200221
const start = alertInsight?.defaultStartTime;
201222
const end = alertInsight?.defaultEndTime;

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,15 +120,36 @@ export const SqlQueryView = (): JSX.Element => {
120120
isMultiDimensionAlert: true,
121121
});
122122
setWorkingAlert(workingAlertUpdated);
123+
setApiState({
124+
...apiState,
125+
alertRecommedationState: {
126+
...apiState.alertRecommedationState,
127+
status: ActionStatus.Working,
128+
},
129+
});
123130
getAlertRecommendation(workingAlertUpdated as EditableAlert)
124131
.then((recommendations) => {
125132
setAlertRecommendations(recommendations);
133+
setApiState({
134+
...apiState,
135+
alertRecommedationState: {
136+
...apiState.alertRecommedationState,
137+
status: ActionStatus.Done,
138+
},
139+
});
126140
})
127141
.catch(() => {
128142
notify(
129143
NotificationTypeV1.Error,
130144
t("errors.could-not-compute-detection-recommendations")
131145
);
146+
setApiState({
147+
...apiState,
148+
alertRecommedationState: {
149+
...apiState.alertRecommedationState,
150+
status: ActionStatus.Error,
151+
},
152+
});
132153
});
133154
const start = alertInsight?.defaultStartTime;
134155
const end = alertInsight?.defaultEndTime;

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import { EditableAlert } from "../../../../rest/dto/alert.interfaces";
4040

4141
// apis
4242
import { getAlertInsight } from "../../../../rest/alerts/alerts.rest";
43+
import { ActionStatus } from "../../../../rest/actions.interfaces";
4344

4445
export const SelectGranularity = (): JSX.Element => {
4546
const { t } = useTranslation();
@@ -56,6 +57,8 @@ export const SelectGranularity = (): JSX.Element => {
5657
setSelectedTimeRange,
5758
setWorkingAlert,
5859
queryFilters,
60+
apiState,
61+
setApiState,
5962
} = useCreateAlertStore();
6063

6164
const GRANULARITY_OPTIONS = [
@@ -116,6 +119,13 @@ export const SelectGranularity = (): JSX.Element => {
116119
min: 0,
117120
max: 1,
118121
});
122+
setApiState({
123+
...apiState,
124+
insightState: {
125+
...apiState.insightState,
126+
status: ActionStatus.Working,
127+
},
128+
});
119129

120130
const newAlertInsight = await getAlertInsight({
121131
alert: {
@@ -124,6 +134,13 @@ export const SelectGranularity = (): JSX.Element => {
124134
workingAlertUpdated.templateProperties,
125135
} as EditableAlert,
126136
});
137+
setApiState({
138+
...apiState,
139+
insightState: {
140+
...apiState.insightState,
141+
status: ActionStatus.Done,
142+
},
143+
});
127144

128145
if (newAlertInsight) {
129146
setAlertInsight(newAlertInsight);
@@ -140,6 +157,13 @@ export const SelectGranularity = (): JSX.Element => {
140157
entity: t("label.alert-insight"),
141158
})
142159
);
160+
setApiState({
161+
...apiState,
162+
insightState: {
163+
...apiState.insightState,
164+
status: ActionStatus.Error,
165+
},
166+
});
143167
}
144168
}
145169
};

‎thirdeye-ui/src/app/pages/create-alert/sections/dataset-metric-selection/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import { useCreateAlertStore } from "../../hooks/state";
3333

3434
export const SelectDatasetAndMetric = (): JSX.Element => {
3535
const { t } = useTranslation();
36-
const { datasetsInfo } = useGetDatasourcesTree();
36+
const { datasetsInfo, isDatasourcesTreeLoading } = useGetDatasourcesTree();
3737
const {
3838
selectedDataset,
3939
selectedMetric,
@@ -54,6 +54,7 @@ export const SelectDatasetAndMetric = (): JSX.Element => {
5454
getOptionLabel={(option) =>
5555
option.dataset.name as string
5656
}
57+
loading={isDatasourcesTreeLoading}
5758
noOptionsText={t(
5859
"message.no-options-available-entity",
5960
{ entity: t("label.dataset") }

0 commit comments

Comments
 (0)