@@ -51,7 +51,7 @@ import {
5151 ALERT_STATUS_FILTERS , ALERT_PERIOD_DROPDOWN_MENU ,
5252} from ' @/services/alert-manager/v2/constants/alert-table-constant' ;
5353import {
54- convertRelativePeriodToPeriod , initiatePeriodByGranularity ,
54+ convertRelativePeriodToPeriod ,
5555} from ' @/services/alert-manager/v2/helpers/alert-period-helper' ;
5656import { ALERT_MANAGER_ROUTE } from ' @/services/alert-manager/v2/routes/route-constant' ;
5757import { 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};
276285const 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
283292const 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 />
0 commit comments