Skip to content

Commit 4fa4b7f

Browse files
nalin-patidarnalin-patidar
committed
fix(ui): TE-XXXX show loader for alert recommendations
1 parent c346f16 commit 4fa4b7f

File tree

5 files changed

+128
-44
lines changed

5 files changed

+128
-44
lines changed

‎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: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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();
@@ -100,6 +101,13 @@ export const SelectDetection = (): JSX.Element => {
100101
const handleAnomalyDetectionChange = async (
101102
item: string
102103
): Promise<void> => {
104+
setApiState({
105+
...apiState,
106+
alertRecommedationState: {
107+
...apiState.alertRecommedationState,
108+
status: ActionStatus.Working,
109+
},
110+
});
103111
setAnomalyDetectionType(item);
104112
let updatedAlert = workingAlert;
105113
if (item === AnomalyDetectionOptions.SINGLE) {
@@ -137,12 +145,26 @@ export const SelectDetection = (): JSX.Element => {
137145
getAlertRecommendation(workingAlert as EditableAlert)
138146
.then((recommendations) => {
139147
setAlertRecommendations(recommendations);
148+
setApiState({
149+
...apiState,
150+
alertRecommedationState: {
151+
...apiState.alertRecommedationState,
152+
status: ActionStatus.Done,
153+
},
154+
});
140155
})
141156
.catch(() => {
142157
notify(
143158
NotificationTypeV1.Error,
144159
t("errors.could-not-compute-detection-recommendations")
145160
);
161+
setApiState({
162+
...apiState,
163+
alertRecommedationState: {
164+
...apiState.alertRecommedationState,
165+
status: ActionStatus.Error,
166+
},
167+
});
146168
});
147169
const start = updatedAlertInsight?.defaultStartTime;
148170
const end = updatedAlertInsight?.defaultEndTime;

‎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/view-alert-graph/graph-options/detection-algorithm.tsx‎

Lines changed: 53 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ import { EditableAlert } from "../../../../../rest/dto/alert.interfaces";
5454

5555
// apis
5656
import { useGetEvaluation } from "../../../../../rest/alerts/alerts.actions";
57+
import { ActionStatus } from "../../../../../rest/actions.interfaces";
5758

5859
export const DetectionAlgorithms = (): JSX.Element => {
5960
const { t } = useTranslation();
@@ -80,7 +81,10 @@ export const DetectionAlgorithms = (): JSX.Element => {
8081
apiState,
8182
setApiState,
8283
} = useCreateAlertStore();
83-
const isGetAlertRecommendationLoading = false;
84+
const isGetAlertRecommendationLoading =
85+
apiState.alertRecommedationState?.status === ActionStatus.Working;
86+
const errorFetchingAlertRecommendation =
87+
apiState.alertRecommedationState?.status === ActionStatus.Error;
8488
const { evaluation, getEvaluation, status, errorMessages } =
8589
useGetEvaluation();
8690
useEffect(() => {
@@ -206,6 +210,53 @@ export const DetectionAlgorithms = (): JSX.Element => {
206210
setWorkingAlert(clonedAlert);
207211
};
208212

213+
const getCmputationProgressView = (): JSX.Element => {
214+
if (isGetAlertRecommendationLoading) {
215+
return (
216+
<Box display="flex">
217+
<CircularProgress color="primary" size={15} />
218+
<Typography style={{ marginLeft: "4px" }} variant="caption">
219+
{t("label.computing-detection-recommendations")}
220+
</Typography>
221+
</Box>
222+
);
223+
}
224+
if (!isEmpty(alertRecommendations)) {
225+
return (
226+
<Box alignItems="center" display="flex">
227+
<CheckCircle className={componentStyles.checkCircleIcon} />
228+
<Typography
229+
className={
230+
componentStyles.detectionRecommendationsReadyText
231+
}
232+
variant="caption"
233+
>
234+
{t("label.detection-recommendations-ready")}
235+
</Typography>
236+
</Box>
237+
);
238+
}
239+
if (errorFetchingAlertRecommendation) {
240+
return (
241+
<Box alignItems="center" display="flex">
242+
<Cancel className={componentStyles.cancelIcon} />
243+
<Typography
244+
className={
245+
componentStyles.detectionRecommendationsFailedText
246+
}
247+
variant="caption"
248+
>
249+
{t(
250+
"errors.could-not-compute-detection-recommendations"
251+
)}
252+
</Typography>
253+
</Box>
254+
);
255+
}
256+
257+
return <></>;
258+
};
259+
209260
return (
210261
<InputSectionV2
211262
inputComponent={
@@ -270,49 +321,7 @@ export const DetectionAlgorithms = (): JSX.Element => {
270321
componentStyles.detectionRecommendationsContainer
271322
}
272323
>
273-
{isGetAlertRecommendationLoading ? (
274-
<Box display="flex">
275-
<CircularProgress color="primary" size={15} />
276-
<Typography
277-
style={{ marginLeft: "4px" }}
278-
variant="caption"
279-
>
280-
{t(
281-
"label.computing-detection-recommendations"
282-
)}
283-
</Typography>
284-
</Box>
285-
) : !isEmpty(alertRecommendations) ? (
286-
<Box alignItems="center" display="flex">
287-
<CheckCircle
288-
className={componentStyles.checkCircleIcon}
289-
/>
290-
<Typography
291-
className={
292-
componentStyles.detectionRecommendationsReadyText
293-
}
294-
variant="caption"
295-
>
296-
{t("label.detection-recommendations-ready")}
297-
</Typography>
298-
</Box>
299-
) : (
300-
<Box alignItems="center" display="flex">
301-
<Cancel
302-
className={componentStyles.cancelIcon}
303-
/>
304-
<Typography
305-
className={
306-
componentStyles.detectionRecommendationsFailedText
307-
}
308-
variant="caption"
309-
>
310-
{t(
311-
"errors.could-not-compute-detection-recommendations"
312-
)}
313-
</Typography>
314-
</Box>
315-
)}
324+
{getCmputationProgressView()}
316325
</Box>
317326
</Box>
318327
}

0 commit comments

Comments
 (0)