Merge pull request #5081 from seungyeoneeee/feature/metrics-lsb-fix

fix: fix reactivity issue for real-time LSB updates
cloudforet-io · Nov 26, 2024 · 3647e50 · 3647e50
2 parents 1728486 + 263634f
commit 3647e50
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 20 deletions.
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerLSB.vue
@@ -58,22 +58,7 @@ const metricExplorerPageStore = useMetricExplorerPageStore();
 const metricExplorerPageState = metricExplorerPageStore.state;
 
 const storeState = reactive({
-    metrics: computed<MetricReferenceMap>(() => {
-        const filteredMetrics = Object.values(allReferenceStore.getters.metric).filter((metric) => {
-            if (metric.data.is_managed) {
-                return true;
-            }
-            if (!metric.data.is_managed) {
-                if (storeState.isAdminMode) {
-                    return metric.data.resource_group === 'DOMAIN';
-                }
-                return metric.data.resource_group === 'WORKSPACE';
-            }
-            return true;
-        });
-
-        return Object.fromEntries(filteredMetrics.map((metric) => [metric.key, metric]));
-    }),
+    metrics: computed<MetricReferenceMap>(() => allReferenceStore.getters.metric),
     metricExamples: computed<MetricExampleModel[]>(() => gnbGetters.metricExamples),
     namespaces: computed<NamespaceReferenceMap>(() => allReferenceStore.getters.namespace),
     providers: computed(() => allReferenceStore.getters.provider),
@@ -284,7 +269,7 @@ watch(() => route.params, async () => {
         const targetNamespace = namespaceState.namespaces.find((item) => item.key === namespaceState.selectedMetric?.data.namespace_id);
         metricExplorerPageStore.setSelectedNamespace({
             label: targetNamespace?.name,
-            name: namespaceState.selectedMetric.data.namespace_id,
+            name: namespaceState.selectedMetric?.data.namespace_id,
             group: targetNamespace?.data.group,
             category: targetNamespace.data.category,
             icon: targetNamespace.data.group === 'common' ? 'COMMON' : targetNamespace.data.icon,
@@ -326,7 +311,8 @@ watch(() => storeState.selectedNamespace, (selectedNamespace) => {
                         <p-tooltip v-for="(item, idx) of state.starredMenuSet"
                                    :key="`asset-analysis-starred-${idx}`"
                                    position="bottom"
-                                   :contents="item.favoriteOptions?.type === FAVORITE_TYPE.METRIC_EXAMPLE ? `${storeState.metrics[item.to?.params?.metricId || '']?.name} > ${item.label}` : item.label"
+                                   :contents="item.favoriteOptions?.type === FAVORITE_TYPE.METRIC_EXAMPLE ? `${storeState.metrics[item.to?.params?.metricId
+                                       || '']?.name} > ${item.label}` : item.label"
                         >
                             <l-s-b-router-menu-item :item="item"
                                                     :idx="idx"

diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetricTree.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerLSBMetricTree.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-    computed, reactive, watchEffect,
+    computed, reactive, watchEffect, ref, watch,
 } from 'vue';
 
 import { PTreeView, PI, PTextHighlighting } from '@cloudforet/mirinae';
@@ -29,6 +29,17 @@ const storeState = reactive({
     isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
 });
 
+const filteredMetricItems = ref<TreeNode[]>([]);
+
+watch(() => props.metricItems, (updatedMetricItems) => {
+    filteredMetricItems.value = updatedMetricItems.filter(((metricItem) => {
+        if (storeState.isAdminMode) {
+            return metricItem.data.data.resource_group === 'DOMAIN';
+        }
+        return metricItem.data.data.resource_group === 'WORKSPACE';
+    }));
+}, { immediate: true, deep: true });
+
 watchEffect(() => {
     if (storeState.isAdminMode) {
         props.metricItems.forEach((metricItem: TreeNode) => {
@@ -41,7 +52,7 @@ watchEffect(() => {
 </script>
 
 <template>
-    <p-tree-view :tree-data="props.metricItems"
+    <p-tree-view :tree-data="filteredMetricItems"
                  :selected-id="props.selectedId"
                  :tree-display-map="props.treeDisplayMap"
                  use-default-indent