fix: fix filter reset bug

Signed-off-by: sulmo <[email protected]>
cloudforet-io · Nov 14, 2024 · 297a970 · 297a970
1 parent e8942f8
commit 297a970
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisFiltersPopper.vue
@@ -16,6 +16,7 @@ import type { WorkspaceModel } from '@/schema/identity/workspace/model';
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 
+import getRandomId from '@/lib/random-id-generator';
 import { VariableModelFactory } from '@/lib/variable-models';
 import type {
     ManagedVariableModelKey,
@@ -73,8 +74,7 @@ const GROUP_BY_TO_VAR_MODELS_FOR_UNIFIED_COST: Record<string, VariableOption> =
     [GROUP_BY.USAGE_TYPE]: { key: MANAGED_VARIABLE_MODEL_KEY_MAP.unified_cost, dataKey: 'usage_type' },
 };
 
-const getInitialSelectedItemsMap = (): Record<string, SelectDropdownMenuItem[]> => ({
-});
+const getInitialSelectedItemsMap = (): Record<string, SelectDropdownMenuItem[]> => ({});
 
 const props = defineProps<{
     visible: boolean;
@@ -85,6 +85,7 @@ const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
 const state = reactive({
+    randomId: '',
     loading: true,
     enabledFilters: computed<SelectDropdownMenuItem[]>(() => {
         if (!costAnalysisPageState.enabledFiltersProperties) return [];
@@ -154,16 +155,17 @@ const getMenuHandler = (groupBy: string, modelOptions: Record<string, any>, prim
         return async () => ({ results: [] });
     }
 };
-const initSelectedFilters = () => {
-    const _filters = costAnalysisPageState.filters;
+const initSelectedFilters = (isReset = false) => {
+    const _filters = isReset ? costAnalysisPageGetters.convertedOriginFilter : costAnalysisPageState.filters;
     const _selectedItemsMap = {};
     Object.keys(_filters ?? {}).forEach((groupBy) => {
         if (storeState.isAdminMode && !costAnalysisPageState.isAllWorkspaceSelected && groupBy === GROUP_BY.WORKSPACE) {
             _selectedItemsMap[groupBy] = [];
             return;
         }
         _selectedItemsMap[groupBy] = _filters?.[groupBy].map((d) => ({ name: d, label: d })) ?? [];
-        if (costAnalysisPageState.enabledFiltersProperties?.indexOf(groupBy) === -1) {
+        const isGroupByExist = costAnalysisPageState.enabledFiltersProperties?.indexOf(groupBy) === -1;
+        if (isGroupByExist) {
             costAnalysisPageStore.setEnabledFiltersProperties([
                 ...(costAnalysisPageState.enabledFiltersProperties ?? []),
                 groupBy,
@@ -195,8 +197,7 @@ const handleDisabledFilters = (all?: boolean, disabledFilter?: string) => {
     }
 };
 const handleClickResetFilters = () => {
-    state.selectedItemsMap = getInitialSelectedItemsMap();
-
+    initSelectedFilters(true);
     const _originConsoleFilters: ConsoleFilter[]|undefined = costAnalysisPageGetters.selectedQuerySet?.options?.filters;
     const _originFilters: Record<string, string[]> = {};
     if (_originConsoleFilters?.length) {
@@ -205,10 +206,10 @@ const handleClickResetFilters = () => {
         });
     }
     costAnalysisPageStore.setFilters(_originFilters);
+    state.randomId = getRandomId();
 };
 
-watch(() => props.visible, (visible) => {
-    if (!visible) return;
+watch([() => costAnalysisPageGetters.selectedQueryId, () => costAnalysisPageGetters.isUnifiedCost, () => costAnalysisPageGetters.selectedDataSourceId], () => {
     initSelectedFilters();
 }, { immediate: true });
 
@@ -218,7 +219,7 @@ watch(() => props.visible, (visible) => {
     <div class="cost-analysis-filters-popper">
         <p-select-dropdown
             v-for="groupBy in state.enabledFilters"
-            :key="`filters-dropdown-${groupBy.name}`"
+            :key="`filters-dropdown-${groupBy.name}-${state.randomId}`"
             class="filters-popper-dropdown"
             is-filterable
             :handler="state.handlerMap[groupBy.name]"

diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue
@@ -39,7 +39,7 @@ import CostAnalysisGranularityPeriodDropdown
     from '@/services/cost-explorer/components/CostAnalysisGranularityPeriodDropdown.vue';
 import { GROUP_BY } from '@/services/cost-explorer/constants/cost-explorer-constant';
 import {
-    DYNAMIC_COST_QUERY_SET_PARAMS,
+    DYNAMIC_COST_QUERY_SET_PARAMS, MANAGED_COST_QUERY_SET_ID_LIST,
 } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { useCostAnalysisPageStore } from '@/services/cost-explorer/stores/cost-analysis-page-store';
@@ -168,8 +168,8 @@ const handleClickFilter = () => {
 const handleUpdateWorkspaceScope = (selectedItems: string) => {
     costAnalysisPageStore.setWorkspaceScope(selectedItems);
 };
-watch(() => costAnalysisPageGetters.selectedQueryId, (updatedQueryId) => {
-    if (updatedQueryId !== '') {
+watch([() => costAnalysisPageGetters.selectedQueryId, () => costAnalysisPageGetters.isUnifiedCost, () => costAnalysisPageGetters.selectedDataSourceId], ([updatedQueryId]) => {
+    if (updatedQueryId !== '' || MANAGED_COST_QUERY_SET_ID_LIST.includes(updatedQueryId)) {
         state.filtersPopoverVisible = false;
     }
 }, { immediate: true });

diff --git a/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts b/apps/web/src/services/cost-explorer/stores/cost-analysis-page-store.ts
@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 import { cloneDeep, isEmpty, sortBy } from 'lodash';
 import { defineStore } from 'pinia';
 
-import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
+import type { ConsoleFilter, ConsoleFilterValue } from '@cloudforet/core-lib/query/type';
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
 import type { CostQuerySetCreateParameters } from '@/schema/cost-analysis/cost-query-set/api-verbs/create';
@@ -78,6 +78,16 @@ export const useCostAnalysisPageStore = defineStore('page-cost-analysis', () =>
         selectedQueryId: computed(() => costQuerySetState.selectedQuerySetId),
         costQueryList: computed(() => costQuerySetState.costQuerySetList),
         selectedQuerySet: computed(() => costQuerySetGetters.selectedQuerySet),
+        convertedOriginFilter: computed<Record<string, ConsoleFilterValue | ConsoleFilterValue[]>>(() => {
+            const originFilters:ConsoleFilter[] = getters.selectedQuerySet?.options?.filters ?? [];
+            const _selectedItemsMap: Record<string, ConsoleFilterValue | ConsoleFilterValue[]> = {};
+            (originFilters ?? []).forEach((queryFilter:ConsoleFilter) => {
+                if (queryFilter.k) {
+                    _selectedItemsMap[queryFilter.k] = queryFilter.v;
+                }
+            });
+            return _selectedItemsMap;
+        }),
         selectedDataSourceId: computed(() => costQuerySetState.selectedDataSourceId),
         isUnifiedCost: computed(() => costQuerySetState.isUnifiedCostOn),
         managedCostQuerySetList: computed(() => costQuerySetGetters.managedCostQuerySets),