refactor: apply the service dropdown list in the store

Signed-off-by: NaYeong,Kim <[email protected]>
cloudforet-io · Dec 17, 2024 · 89cb3ae · 89cb3ae
1 parent 5f66244
commit 89cb3ae
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 11 deletions.
diff --git a/apps/web/src/services/alert-manager-v2/components/AlertsManagementTable.vue b/apps/web/src/services/alert-manager-v2/components/AlertsManagementTable.vue
@@ -17,7 +17,6 @@ import type { KeyItemSet, ValueHandlerMap } from '@cloudforet/mirinae/types/cont
 
 import { ALERT_URGENCY } from '@/schema/alert-manager/alert/constants';
 import type { AlertModel } from '@/schema/alert-manager/alert/model';
-import type { ServiceModel } from '@/schema/alert-manager/service/model';
 import { i18n } from '@/translations';
 
 import { referenceRouter } from '@/lib/reference/referenceRouter';
@@ -73,7 +72,7 @@ const tableState = reactive({
     })),
 });
 const storeState = reactive({
-    serviceList: computed<ServiceModel[]>(() => alertPageState.serviceList),
+    serviceDropdownList: computed<SelectDropdownMenuItem[]>(() => alertPageState.serviceList),
 });
 const state = reactive({
     loading: false,
@@ -82,10 +81,6 @@ const state = reactive({
     urgencyLabels: getAlertUrgencyI18n(),
 });
 const filterState = reactive({
-    serviceDropdownList: computed<SelectDropdownMenuItem[]>(() => storeState.serviceList.map((i) => ({
-        name: i.service_id,
-        label: i.name,
-    }))),
     selectedServiceId: '',
     statusFields: computed<AlertFilterType[]>(() => ([
         { label: i18n.t('ALERT_MANAGER.ALERTS.ALL'), name: 'ALL' },
@@ -191,7 +186,7 @@ onMounted(async () => {
                          @export="handleExportToExcel"
         >
             <template #toolbox-top>
-                <p-select-dropdown :menu="filterState.serviceDropdownList"
+                <p-select-dropdown :menu="storeState.serviceDropdownList"
                                    :selection-label="$t('ALERT_MANAGER.ALERTS.SERVICE')"
                                    style-type="rounded"
                                    use-fixed-menu-style

diff --git a/apps/web/src/services/alert-manager-v2/stores/alert-page-store.ts b/apps/web/src/services/alert-manager-v2/stores/alert-page-store.ts
@@ -3,6 +3,7 @@ import { reactive } from 'vue';
 import { defineStore } from 'pinia';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import type { ListResponse } from '@/schema/_common/api-verbs/list';
 import type { AlertGetParameters } from '@/schema/alert-manager/alert/api-verbs/get';
@@ -14,10 +15,8 @@ import type { ServiceModel } from '@/schema/alert-manager/service/model';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-
-
 interface AlertPageStoreState {
-    serviceList: ServiceModel[];
+    serviceList: SelectDropdownMenuItem[];
     alertData: Partial<AlertModel>|null;
 }
 interface UpdateAlertPayload {
@@ -43,7 +42,10 @@ export const useAlertPageStore = defineStore('page-alert', () => {
         async fetchServiceList() {
             try {
                 const { results } = await SpaceConnector.clientV2.alertManager.service.list<ServiceListParameters, ListResponse<ServiceModel>>();
-                state.serviceList = results || [];
+                state.serviceList = (results || []).map((i) => ({
+                    name: i.service_id,
+                    label: i.name,
+                }));
             } catch (e) {
                 state.serviceList = [];
                 ErrorHandler.handleError(e, true);