fix: get selectedGrid

src/store/modules/dashboard.ts

@@ -25,7 +25,6 @@ import { NewControl } from "../data";
 import { Duration } from "@/types/app";
 import axios, { AxiosResponse } from "axios";
 import { cancelToken } from "@/utils/cancelToken";
-import { Instance } from "@/types/selector";
 interface DashboardState {
   showConfig: boolean;
   layout: LayoutConfig[];
@@ -137,8 +136,8 @@ export const dashboardStore = defineStore({
     setConfigPanel(show: boolean) {
       this.showConfig = show;
     },
-    selectWidget(widget: Nullable<LayoutConfig>) {
-      this.selectedGrid = widget;
+    selectWidget(item: Nullable<LayoutConfig>) {
+      this.selectedGrid = item;
     },
     setLayer(id: string) {
       this.layerId = id;

src/views/dashboard/configuration/ConfigEdit.vue

@@ -16,21 +16,21 @@ limitations under the License. -->
   <div class="widget-config flex-v">
     <div class="graph" v-loading="loading">
       <div class="header">
-        <span>{{ selectedGrid.widget.title }}</span>
-        <div class="tips" v-show="selectedGrid.widget.tips">
-          <el-tooltip :content="selectedGrid.widget.tips">
+        <span>{{ dashboardStore.selectedGrid.widget.title }}</span>
+        <div class="tips" v-show="dashboardStore.selectedGrid.widget.tips">
+          <el-tooltip :content="dashboardStore.selectedGrid.widget.tips">
             <Icon iconName="info_outline" size="sm" />
           </el-tooltip>
         </div>
       </div>
       <div class="render-chart">
         <component
-          :is="selectedGrid.graph.type"
+          :is="dashboardStore.selectedGrid.graph.type"
           :intervalTime="appStoreWithOut.intervalTime"
           :data="states.source"
-          :config="selectedGrid.graph"
+          :config="dashboardStore.selectedGrid.graph"
         />
-        <div v-show="!selectedGrid.graph.type" class="no-data">
+        <div v-show="!dashboardStore.selectedGrid.graph.type" class="no-data">
           {{ t("noData") }}
         </div>
       </div>
@@ -49,14 +49,16 @@ limitations under the License. -->
               v-for="(type, index) in states.visType"
               :key="index"
               @click="changeChartType(type)"
-              :class="{ active: type.value === selectedGrid.graph.type }"
+              :class="{
+                active: type.value === dashboardStore.selectedGrid.graph.type,
+              }"
             >
               {{ type.label }}
             </span>
           </div>
         </el-collapse-item>
         <el-collapse-item :title="t('graphStyles')" name="3">
-          <component :is="`${selectedGrid.graph.type}Config`" />
+          <component :is="`${dashboardStore.selectedGrid.graph.type}Config`" />
         </el-collapse-item>
         <el-collapse-item :title="t('widgetOptions')" name="4">
           <WidgetOptions />
@@ -109,7 +111,6 @@ export default defineComponent({
     const { t } = useI18n();
     const dashboardStore = useDashboardStore();
     const appStoreWithOut = useAppStoreWithOut();
-    const { selectedGrid, entity } = dashboardStore;
     const loading = ref<boolean>(false);
     const states = reactive<{
       activeNames: string;
@@ -120,17 +121,19 @@ export default defineComponent({
     }>({
       activeNames: "1",
       source: {},
-      index: selectedGrid.i,
+      index: dashboardStore.selectedGrid.i,
       visType: [],
       isTable: false,
     });
-    states.isTable = TableChartTypes.includes(selectedGrid.graph.type || "");
+    states.isTable = TableChartTypes.includes(
+      dashboardStore.selectedGrid.graph.type || ""
+    );
 
-    if (entity === EntityType[0].value) {
+    if (dashboardStore.entity === EntityType[0].value) {
       states.visType = ChartTypes.filter(
         (d: Option) => d.value !== "serviceList"
       );
-    } else if (entity === EntityType[1].value) {
+    } else if (dashboardStore.entity === EntityType[1].value) {
       states.visType = ChartTypes.filter(
         (d: Option) => !PodsChartTypes.includes(d.value)
       );
@@ -141,12 +144,9 @@ export default defineComponent({
     }
 
     function changeChartType(item: Option) {
-      const graph = {
-        ...selectedGrid.graph,
-        ...DefaultGraphConfig[item.value],
-      };
-      states.isTable = TableChartTypes.includes(selectedGrid.graph.type);
-      dashboardStore.selectWidget({ ...selectedGrid, graph });
+      const graph = DefaultGraphConfig[item.value];
+      states.isTable = TableChartTypes.includes(graph.type);
+      dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
     }
 
     function getSource(source: unknown) {
@@ -169,7 +169,7 @@ export default defineComponent({
       t,
       appStoreWithOut,
       configHeight,
-      selectedGrid,
+      dashboardStore,
       applyConfig,
       getSource,
       setLoading,

src/views/dashboard/configuration/MetricOptions.vue

@@ -16,7 +16,7 @@ limitations under the License. -->
   <div v-show="states.isTable" class="ds-name">
     <div>Dashboard</div>
     <Selector
-      :value="states.graph.dashboardName"
+      :value="selectedGrid.graph.dashboardName"
       :options="states.metricList"
       size="mini"
       placeholder="Select a dashboard"
@@ -24,12 +24,12 @@ limitations under the License. -->
       class="selectors"
     />
   </div>
+  <div>Metrics</div>
   <div
     v-for="(metric, index) in states.metrics"
     :key="index"
     class="metric-item"
   >
-    <div>Metrics</div>
     <Selector
       :value="metric"
       :options="states.metricList"
@@ -42,7 +42,7 @@ limitations under the License. -->
       :value="states.metricTypes[index]"
       :options="states.metricTypeList[index]"
       size="mini"
-      :disabled="states.graph.type && !states.isTable && index !== 0"
+      :disabled="selectedGrid.graph.type && !states.isTable && index !== 0"
       @change="changeMetricType(index, $event)"
       class="selectors"
     />
@@ -71,7 +71,6 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { reactive, watch } from "vue";
 import { Option } from "@/types/app";
-import { GraphConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { MetricTypes, TableChartTypes, MetricCatalog } from "../data";
 import { ElMessage } from "element-plus";
@@ -90,7 +89,6 @@ const states = reactive<{
   visType: Option[];
   isTable: boolean;
   metricList: (Option & { type: string })[];
-  graph: GraphConfig | any;
 }>({
   metrics: metrics && metrics.length ? metrics : [""],
   metricTypes: metricTypes && metricTypes.length ? metricTypes : [""],
@@ -98,20 +96,20 @@ const states = reactive<{
   visType: [],
   isTable: false,
   metricList: [],
-  graph: selectedGrid.graph,
 });
-states.isTable = TableChartTypes.includes(states.graph.type);
+states.isTable = TableChartTypes.includes(selectedGrid.graph.type);
 
 setMetricType();
 
-async function setMetricType() {
+async function setMetricType(catalog?: string) {
+  catalog = catalog || entity;
   const json = await dashboardStore.fetchMetricList();
   if (json.errors) {
     ElMessage.error(json.errors);
     return;
   }
   states.metricList = (json.data.metrics || []).filter(
-    (d: { catalog: string }) => entity === (MetricCatalog as any)[d.catalog]
+    (d: { catalog: string }) => catalog === (MetricCatalog as any)[d.catalog]
   );
 
   const metrics: any = states.metricList.filter(
@@ -196,7 +194,10 @@ async function queryMetrics() {
 }
 
 function changeDashboard(item: Option[]) {
-  states.graph.dashboardName = item[0].value;
+  dashboardStore.selectWidget({
+    ...selectedGrid,
+    ...{ dashboardName: item[0].value },
+  });
 }
 function addMetric() {
   states.metrics.push("");
@@ -212,9 +213,15 @@ function deleteMetric(index: number) {
   states.metricTypes.splice(index, 1);
 }
 watch(
-  () => selectedGrid.graph,
-  (data: { type: string }) => {
-    states.isTable = TableChartTypes.includes(data.type);
+  () => selectedGrid.graph.type,
+  (type: string) => {
+    states.isTable = TableChartTypes.includes(type);
+    const catalog: { [key: string]: string } = {
+      InstanceList: "ServiceInstance",
+      EndpointList: "Endpoint",
+      ServiceList: "Service",
+    };
+    setMetricType(catalog[type]);
   }
 );
 </script>

src/views/dashboard/graphs/InstanceList.vue

@@ -47,7 +47,7 @@ limitations under the License. -->
         </template>
       </el-table-column>
       <el-table-column
-        v-for="(metric, index) in selectedGrid.metrics"
+        v-for="(metric, index) in dashboardStore.selectedGrid.metrics"
         :label="metric"
         :key="metric + index"
       >
@@ -88,9 +88,7 @@ import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 /*global defineProps */
 defineProps({
   config: {
-    type: Object as PropType<
-      InstanceListConfig & { metrics: string[]; metricTypes: string[] }
-    >,
+    type: Object as PropType<InstanceListConfig>,
     default: () => ({ dashboardName: "", fontSize: 12 }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
@@ -102,7 +100,6 @@ const instances = ref<(Instance | any)[]>([]); // current instances
 const searchInstances = ref<Instance[]>([]); // all instances
 const pageSize = 5;
 const searchText = ref<string>("");
-const selectedGrid = dashboardStore.selectedGrid;
 
 queryInstance();
 
@@ -118,15 +115,22 @@ async function queryInstance() {
   searchInstances.value = selectorStore.instances;
 
   const currentInstances = searchInstances.value.splice(0, pageSize);
-  const params = await useQueryPodsMetrics(currentInstances, selectedGrid);
+  const params = await useQueryPodsMetrics(
+    currentInstances,
+    dashboardStore.selectedGrid
+  );
   const json = await dashboardStore.fetchMetricValue(params);
 
   if (json.errors) {
     ElMessage.error(json.errors);
     return;
   }
-  usePodsSource(currentInstances, json, selectedGrid);
-  instances.value = usePodsSource(currentInstances, json, selectedGrid);
+  usePodsSource(currentInstances, json, dashboardStore.selectedGrid);
+  instances.value = usePodsSource(
+    currentInstances,
+    json,
+    dashboardStore.selectedGrid
+  );
 }
 
 function changePage(pageIndex: number) {