feat: enhance processor

src/views/dashboard/configuration/ConfigEdit.vue

@@ -91,7 +91,6 @@ limitations under the License. -->
 <script lang="ts">
 import { reactive, defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import {
@@ -99,6 +98,7 @@ import {
   DefaultGraphConfig,
   PodsChartTypes,
   TableChartTypes,
+  EntityType,
 } from "../data";
 import { Option } from "@/types/app";
 import { WidgetConfig, GraphConfig, StandardConfig } from "@/types/dashboard";
@@ -122,8 +122,7 @@ export default defineComponent({
     const { t } = useI18n();
     const dashboardStore = useDashboardStore();
     const appStoreWithOut = useAppStoreWithOut();
-    const { selectedGrid } = dashboardStore;
-    const params = useRoute().params;
+    const { selectedGrid, entity } = dashboardStore;
     const states = reactive<{
       activeNames: string;
       source: any;
@@ -149,11 +148,11 @@ export default defineComponent({
     });
     states.isTable = TableChartTypes.includes(states.graph.type || "");
 
-    if (params.entity === "service") {
+    if (entity === EntityType[0].value) {
       states.visType = ChartTypes.filter(
         (d: Option) => d.value !== "serviceList"
       );
-    } else if (params.entity === "all") {
+    } else if (entity === EntityType[1].value) {
       states.visType = ChartTypes.filter(
         (d: Option) => !PodsChartTypes.includes(d.value)
       );

src/views/dashboard/configuration/MetricOptions.vue

@@ -63,11 +63,10 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { reactive, watch } from "vue";
 import type { PropType } from "vue";
-import { useRoute } from "vue-router";
 import { Option } from "@/types/app";
 import { GraphConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { MetricTypes, TableChartTypes } from "../data";
+import { MetricTypes, TableChartTypes, MetricCatalog } from "../data";
 import { ElMessage } from "element-plus";
 import Icon from "@/components/Icon.vue";
 
@@ -80,7 +79,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["update", "apply"]);
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
+const { selectedGrid, entity, metrics, metricTypes } = dashboardStore;
 const states = reactive<{
   metrics: string[];
   metricTypes: string[];
@@ -90,8 +89,8 @@ const states = reactive<{
   metricList: (Option & { type: string })[];
   graph: GraphConfig | any;
 }>({
-  metrics: selectedGrid.metrics || [""],
-  metricTypes: selectedGrid.metricTypes || [""],
+  metrics: metrics && metrics.length ? selectedGrid.metrics : [""],
+  metricTypes: metricTypes && metricTypes.length ? metricTypes : [""],
   metricTypeList: [],
   visType: [],
   isTable: false,
@@ -100,8 +99,6 @@ const states = reactive<{
 });
 states.isTable = TableChartTypes.includes(states.graph.type);
 
-const params = useRoute().params;
-
 setMetricType();
 
 async function setMetricType() {
@@ -111,9 +108,9 @@ async function setMetricType() {
     return;
   }
   states.metricList = (json.data.metrics || []).filter(
-    (d: { catalog: string }) =>
-      String(params.entity).toUpperCase() === d.catalog
+    (d: { catalog: string }) => entity === (MetricCatalog as any)[d.catalog]
   );
+
   const metrics: any = states.metricList.filter(
     (d: { value: string; type: string }) => {
       const metric = states.metrics.filter((m: string) => m === d.value)[0];