update config

src/store/modules/topology.ts

@@ -34,7 +34,7 @@ interface TopologyState {
   call: Nullable<Call>;
   calls: Call[];
   nodes: Node[];
-  nodeMetrics: MetricVal;
+  nodeMetricValue: MetricVal;
   linkServerMetrics: MetricVal;
   linkClientMetrics: MetricVal;
 }
@@ -46,7 +46,7 @@ export const topologyStore = defineStore({
     nodes: [],
     node: null,
     call: null,
-    nodeMetrics: {},
+    nodeMetricValue: {},
     linkServerMetrics: {},
     linkClientMetrics: {},
   }),
@@ -105,8 +105,8 @@ export const topologyStore = defineStore({
       this.calls = calls;
       this.nodes = nodes;
     },
-    setNodeMetrics(m: { id: string; value: unknown }[]) {
-      this.nodeMetrics = m;
+    setNodeMetricValue(m: { id: string; value: unknown }[]) {
+      this.nodeMetricValue = m;
     },
     setLinkServerMetrics(m: { id: string; value: unknown }[]) {
       this.linkServerMetrics = m;
@@ -390,7 +390,7 @@ export const topologyStore = defineStore({
 
       return { calls, nodes };
     },
-    async getNodeMetrics(param: {
+    async getNodeMetricValue(param: {
       queryStr: string;
       conditions: { [key: string]: unknown };
     }) {
@@ -399,7 +399,7 @@ export const topologyStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.setNodeMetrics(res.data.data);
+      this.setNodeMetricValue(res.data.data);
       return res.data;
     },
     async getLinkClientMetrics(linkClientMetrics: string[]) {
@@ -427,7 +427,7 @@ export const topologyStore = defineStore({
     async queryNodeMetrics(nodeMetrics: string[]) {
       const ids = this.nodes.map((d: Node) => d.id);
       const param = await useQueryTopologyMetrics(nodeMetrics, ids);
-      const res = await this.getNodeMetrics(param);
+      const res = await this.getNodeMetricValue(param);
 
       if (res.errors) {
         ElMessage.error(res.errors);

src/views/dashboard/related/topology/components/Graph.vue

@@ -280,7 +280,7 @@ function update() {
         const nodeMetrics: string[] = settings.value.nodeMetrics || [];
         const html = nodeMetrics.map((m) => {
           const metric =
-            topologyStore.nodeMetrics[m].values.filter(
+            topologyStore.nodeMetricValue[m].values.filter(
               (val: { id: string; value: unknown }) => val.id === data.id
             )[0] || {};
           const val = m.includes("_sla") ? metric.value / 100 : metric.value;

src/views/dashboard/related/topology/components/PodTopology.vue

@@ -272,10 +272,10 @@ watch(
   top: 60px;
   right: 10px;
   width: 400px;
-  height: 500px;
+  height: 600px;
   background-color: #2b3037;
   overflow: auto;
-  padding: 0 15px;
+  padding: 10px 15px;
   border-radius: 3px;
   color: #ccc;
   transition: all 0.5ms linear;

src/views/dashboard/related/topology/components/Sankey.vue

@@ -105,10 +105,10 @@ function linkTooltip(data: Call) {
 }
 
 function nodeTooltip(data: Node) {
-  const nodeMetrics: string[] = Object.keys(topologyStore.nodeMetrics);
+  const nodeMetrics: string[] = Object.keys(topologyStore.nodeMetricValue);
   const html = nodeMetrics.map((m) => {
     const metric =
-      topologyStore.nodeMetrics[m].values.filter(
+      topologyStore.nodeMetricValue[m].values.filter(
         (val: { id: string; value: unknown }) => val.id === data.id
       )[0] || {};
     const val = m.includes("_sla") ? metric.value / 100 : metric.value;

src/views/dashboard/related/topology/components/Settings.vue

@@ -176,11 +176,6 @@ limitations under the License. -->
       {{ t("setLegend") }}
     </el-button>
   </div>
-  <div>
-    <el-button @click="saveConfig" class="save-btn" size="small" type="primary">
-      {{ t("apply") }}
-    </el-button>
-  </div>
 </template>
 <script lang="ts" setup>
 import { reactive } from "vue";
@@ -275,26 +270,26 @@ async function getMetricList() {
       entity + "Relation" === (MetricCatalog as any)[d.catalog] &&
       d.type === MetricsType.REGULAR_VALUE
   );
+  if (isService) {
+    return;
+  }
+  states.nodeDashboards = list.reduce(
+    (
+      prev: (DashboardItem & { label: string; value: string })[],
+      d: DashboardItem
+    ) => {
+      if (d.layer === dashboardStore.layerId && d.entity === entity) {
+        prev.push({ ...d, label: d.name, value: d.name });
+      }
+      return prev;
+    },
+    []
+  );
 }
 async function setLegend() {
-  const metrics = legend.metric.filter(
-    (d: any) => d.name && d.value && d.condition
-  );
-  const names = metrics.map((d: any) => d.name);
-  const p = {
-    linkDashboard: states.linkDashboard,
-    nodeDashboard: isService
-      ? items.filter((d: { scope: string; dashboard: string }) => d.dashboard)
-      : states.nodeDashboard,
-    linkServerMetrics: states.linkServerMetrics,
-    linkClientMetrics: states.linkClientMetrics,
-    nodeMetrics: states.nodeMetrics,
-    legend: metrics,
-  };
-
-  emit("update", p);
-  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, ...p });
+  updateSettings();
   const ids = topologyStore.nodes.map((d: Node) => d.id);
+  const names = dashboardStore.selectedGrid.legend.map((d: any) => d.name);
   const param = await useQueryTopologyMetrics(names, ids);
   const res = await topologyStore.getLegendMetrics(param);
 
@@ -343,6 +338,9 @@ function deleteItem(index: number) {
   updateSettings();
 }
 function updateSettings() {
+  const metrics = legend.metric.filter(
+    (d: any) => d.name && d.value && d.condition
+  );
   const param = {
     linkDashboard: states.linkDashboard,
     nodeDashboard: isService
@@ -351,9 +349,10 @@ function updateSettings() {
     linkServerMetrics: states.linkServerMetrics,
     linkClientMetrics: states.linkClientMetrics,
     nodeMetrics: states.nodeMetrics,
-    legend: legend.metric,
+    legend: metrics,
   };
   dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, ...param });
+  dashboardStore.setConfigs({ ...dashboardStore.selectedGrid, ...param });
   emit("update", param);
 }
 async function changeLinkServerMetrics(options: Option[] | any) {
@@ -378,7 +377,7 @@ async function changeNodeMetrics(options: Option[] | any) {
   states.nodeMetrics = options.map((d: Option) => d.value);
   updateSettings();
   if (!states.nodeMetrics.length) {
-    topologyStore.setNodeMetrics({});
+    topologyStore.setNodeMetricValue({});
     return;
   }
   topologyStore.queryNodeMetrics(states.nodeMetrics);
@@ -431,8 +430,4 @@ function saveConfig() {
 .delete {
   margin: 0 3px;
 }
-
-.save-btn {
-  margin-top: 20px;
-}
 </style>