Skip to content

Commit c62a867

Browse files
skdud4659skdud4659
committed
feat: reflect additional requirements for alert period selection
Signed-off-by: NaYeong,Kim <[email protected]>
1 parent eb38b61 commit c62a867

File tree

3 files changed

+49
-32
lines changed

3 files changed

+49
-32
lines changed

Diff for: ‎apps/web/src/services/alert-manager/v2/components/AlertsManagementTable.vue

+48-27
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ import {
5151
ALERT_STATUS_FILTERS, ALERT_PERIOD_DROPDOWN_MENU,
5252
} from '@/services/alert-manager/v2/constants/alert-table-constant';
5353
import {
54-
convertRelativePeriodToPeriod, initiatePeriodByGranularity,
54+
convertRelativePeriodToPeriod,
5555
} from '@/services/alert-manager/v2/helpers/alert-period-helper';
5656
import { ALERT_MANAGER_ROUTE } from '@/services/alert-manager/v2/routes/route-constant';
5757
import { useAlertPageStore } from '@/services/alert-manager/v2/stores/alert-page-store';
@@ -111,26 +111,31 @@ const filterState = reactive({
111111
{ label: i18n.t('ALERT_MANAGER.ALERTS.HIGH'), name: ALERT_URGENCY.HIGH },
112112
{ label: i18n.t('ALERT_MANAGER.ALERTS.LOW'), name: ALERT_URGENCY.LOW },
113113
])),
114-
period: initiatePeriodByGranularity()[0],
114+
period: { start: undefined, end: undefined },
115115
periodMenuItems: computed<AlertPeriodItemType[]>(() => [
116+
{
117+
type: 'item',
118+
name: 'ALL',
119+
label: i18n.t('ALERT_MANAGER.ALERTS.ALL'),
120+
},
116121
{
117122
name: ALERT_PERIOD_DROPDOWN_MENU.LAST_1_MONTH,
118123
relativePeriod: { value: 1 },
119124
label: i18n.t('ALERT_MANAGER.ALERTS.LAST_1_MONTHS'),
120125
},
121126
{
122127
name: ALERT_PERIOD_DROPDOWN_MENU.LAST_3_MONTHS,
123-
relativePeriod: { value: 2 },
128+
relativePeriod: { value: 3 },
124129
label: i18n.t('ALERT_MANAGER.ALERTS.LAST_3_MONTHS'),
125130
},
126131
{
127132
name: ALERT_PERIOD_DROPDOWN_MENU.LAST_6_MONTHS,
128-
relativePeriod: { value: 5 },
133+
relativePeriod: { value: 6 },
129134
label: i18n.t('ALERT_MANAGER.ALERTS.LAST_6_MONTHS'),
130135
},
131136
{
132137
name: ALERT_PERIOD_DROPDOWN_MENU.LAST_12_MONTHS,
133-
relativePeriod: { value: 11 },
138+
relativePeriod: { value: 12 },
134139
label: i18n.t('ALERT_MANAGER.ALERTS.LAST_12_MONTHS'),
135140
},
136141
{
@@ -152,7 +157,8 @@ const filterState = reactive({
152157
const { isStartInvalid, isEndInvalid } = checkPeriod(LIMIT_MONTH);
153158
return isStartInvalid || isEndInvalid;
154159
}),
155-
selectedPeriod: ALERT_PERIOD_DROPDOWN_MENU.LAST_1_MONTH as string,
160+
selectedPeriod: ALERT_PERIOD_DROPDOWN_MENU.ALL as string,
161+
showPeriodBadge: computed<boolean>(() => filterState.selectedPeriod === ALERT_PERIOD_DROPDOWN_MENU.CUSTOM && filterState.period.start && filterState.period.end),
156162
serviceDropdownList: computed<SelectDropdownMenuItem[]>(() => alertPageGetters.serviceDropdownList),
157163
statusFields: computed<AlertFilterType[]>(() => ([
158164
{ label: i18n.t('ALERT_MANAGER.ALERTS.OPEN'), name: ALERT_STATUS_FILTERS.OPEN },
@@ -237,6 +243,9 @@ const handleSelectPeriod = async (periodMenuName: AlertPeriodDropdownMenuType) =
237243
state.customRangeModalVisible = true;
238244
return;
239245
}
246+
if (periodMenuName === ALERT_PERIOD_DROPDOWN_MENU.ALL) {
247+
filterState.period = { start: undefined, end: undefined };
248+
}
240249
filterState.selectedPeriod = periodMenuName;
241250
const selectedPeriodItem = filterState.periodMenuItems.find((d) => d.name === periodMenuName) || {} as AlertPeriodItemType;
242251
filterState.period = selectedPeriodItem.relativePeriod ? convertRelativePeriodToPeriod(selectedPeriodItem.relativePeriod) : filterState.period;
@@ -274,13 +283,14 @@ const handleExportToExcel = async () => {
274283
});
275284
};
276285
const handleCustomRangeModalConfirm = (start: string, end: string) => {
277-
filterState.period = { start: dayjs(start).startOf('month').format('YYYY-MM-DD'), end: dayjs(end).endOf('month').format('YYYY-MM-DD') };
286+
filterState.period = { start, end };
278287
filterState.selectedPeriod = ALERT_PERIOD_DROPDOWN_MENU.CUSTOM;
279288
state.customRangeModalVisible = false;
280289
fetchAlertsList();
281290
};
282291
283292
const fetchAlertsList = async () => {
293+
state.loading = true;
284294
try {
285295
filterQueryHelper.setFilters([]);
286296
if (storeState.selectedUrgency !== 'ALL') {
@@ -295,12 +305,17 @@ const fetchAlertsList = async () => {
295305
filterQueryHelper.addFilter({ k: 'labels', v: filterState.selectedLabels.map((i) => i.name), o: '=' });
296306
}
297307
298-
if (filterState.period.start) {
308+
if (filterState.period.start && filterState.period.end && (filterState.period.start === filterState.period.end)) {
299309
filterQueryHelper.addFilter({ k: 'created_at', v: filterState.period.start, o: '>=' });
310+
} else {
311+
if (filterState.period.start) {
312+
filterQueryHelper.addFilter({ k: 'created_at', v: filterState.period.start, o: '>=' });
313+
}
314+
if (filterState.period.end) {
315+
filterQueryHelper.addFilter({ k: 'created_at', v: filterState.period.end, o: '<=' });
316+
}
300317
}
301-
if (filterState.period.end) {
302-
filterQueryHelper.addFilter({ k: 'created_at', v: filterState.period.end, o: '<=' });
303-
}
318+
304319
305320
if (state.isServicePage) {
306321
filterQueryHelper.addFilter({ k: 'service_id', v: storeState.serviceId, o: '=' });
@@ -320,6 +335,8 @@ const fetchAlertsList = async () => {
320335
await alertPageStore.fetchAlertsList(params);
321336
} catch (e) {
322337
ErrorHandler.handleError(e, true);
338+
} finally {
339+
state.loading = false;
323340
}
324341
};
325342
@@ -343,12 +360,7 @@ watch(() => storeState.serviceId, async (serviceId) => {
343360
await queryTagHelper.setURLQueryStringFilters(route.query.filters);
344361
}
345362
346-
try {
347-
state.loading = true;
348-
await fetchAlertsList();
349-
} finally {
350-
state.loading = false;
351-
}
363+
await fetchAlertsList();
352364
})();
353365
</script>
354366

@@ -398,15 +410,24 @@ watch(() => storeState.serviceId, async (serviceId) => {
398410
<span>{{ item.label }}</span>
399411
</template>
400412
</p-select-dropdown>
401-
<p-select-dropdown :menu="filterState.periodMenuItems"
402-
:selection-label="$t('ALERT_MANAGER.ALERTS.PERIOD')"
403-
disable-proxy
404-
style-type="rounded"
405-
use-fixed-menu-style
406-
:selected="filterState.selectedPeriod"
407-
:invalid="filterState.isPeriodInvalid"
408-
@select="handleSelectPeriod"
409-
/>
413+
<div>
414+
<p-select-dropdown :menu="filterState.periodMenuItems"
415+
:selection-label="$t('ALERT_MANAGER.ALERTS.PERIOD')"
416+
disable-proxy
417+
style-type="rounded"
418+
use-fixed-menu-style
419+
:selected="filterState.selectedPeriod"
420+
:invalid="filterState.isPeriodInvalid"
421+
@select="handleSelectPeriod"
422+
/>
423+
<p-badge v-if="filterState.showPeriodBadge"
424+
badge-type="subtle"
425+
style-type="gray200"
426+
class="ml-2"
427+
>
428+
{{ `${dayjs.utc(filterState.period.start).format('MMM D, YYYY')} ~ ${dayjs.utc(filterState.period.end).format('MMM D, YYYY')}` }}
429+
</p-badge>
430+
</div>
410431
<p-divider vertical
411432
class="divider"
412433
/>
@@ -521,7 +542,7 @@ watch(() => storeState.serviceId, async (serviceId) => {
521542
<custom-date-modal :visible.sync="state.customRangeModalVisible"
522543
:start="filterState.period?.start"
523544
:end="filterState.period?.end"
524-
:datetime-picker-data-type="'yearToMonth'"
545+
:datetime-picker-data-type="'yearToDate'"
525546
use-restricted-mode
526547
@confirm="handleCustomRangeModalConfirm"
527548
/>

Diff for: ‎apps/web/src/services/alert-manager/v2/constants/alert-table-constant.ts

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type { ExcelDataField } from '@/lib/helper/file-download-helper/type';
66
import type { AlertManagementTableHandlerType } from '@/services/alert-manager/v2/types/alert-manager-type';
77

88
export const ALERT_PERIOD_DROPDOWN_MENU = {
9+
ALL: 'ALL',
910
LAST_1_MONTH: 'LAST_1_MONTH',
1011
LAST_3_MONTHS: 'LAST_3_MONTHS',
1112
LAST_6_MONTHS: 'LAST_6_MONTHS',

Diff for: ‎apps/web/src/services/alert-manager/v2/helpers/alert-period-helper.ts

-5
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,3 @@ export const convertRelativePeriodToPeriod = (alertRelativePeriod: AlertRelative
88
start: today.subtract(alertRelativePeriod.value, 'month').format('YYYY-MM-DD'),
99
};
1010
};
11-
12-
export const initiatePeriodByGranularity = (): [Period, AlertRelativePeriod|undefined] => {
13-
const last1MonthsRelativePeriod: AlertRelativePeriod = { value: 1 };
14-
return [convertRelativePeriodToPeriod(last1MonthsRelativePeriod), last1MonthsRelativePeriod];
15-
};

0 commit comments

Comments
 (0)