From d6b25f3746ca421d66a6282ad252d531c3217406 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Tue, 29 Mar 2022 14:56:30 +0800
Subject: [PATCH] update legend

---
 src/store/modules/topology.ts                 |  1 +
 .../related/topology/components/Graph.vue     |  7 +++++-
 .../related/topology/components/Settings.vue  | 22 ++++++++++++++++++-
 .../related/topology/utils/legend.ts          | 17 +++++---------
 4 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts
index 32da7b3f..7dda19ce 100644
--- a/src/store/modules/topology.ts
+++ b/src/store/modules/topology.ts
@@ -394,6 +394,7 @@ export const topologyStore = defineStore({
       queryStr: string;
       conditions: { [key: string]: unknown };
     }) {
+      console.log(param);
       const res: AxiosResponse = await query(param);
 
       if (res.data.errors) {
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 2186e5b0..d8d12795 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -168,7 +168,12 @@ async function init() {
   svg.value.call(zoom(d3, graph.value));
   // legend
   legend.value = graph.value.append("g").attr("class", "topo-legend");
-  topoLegend(legend.value, height.value, width.value, settings.value.legend);
+  topoLegend(
+    legend.value,
+    height.value,
+    width.value,
+    settings.value.description
+  );
   svg.value.on("click", (event: any) => {
     event.stopPropagation();
     event.preventDefault();
diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue
index bfbc3fbf..c2574320 100644
--- a/src/views/dashboard/related/topology/components/Settings.vue
+++ b/src/views/dashboard/related/topology/components/Settings.vue
@@ -215,6 +215,20 @@ limitations under the License. -->
       </span>
       <div v-show="index !== legend.metric.length - 1">&&</div>
     </div>
+    <div class="label">Healthy Description</div>
+    <el-input
+      v-model="description.healthy"
+      placeholder="Please input description"
+      size="small"
+      class="mt-5"
+    />
+    <div class="label">Unhealthy Description</div>
+    <el-input
+      v-model="description.unhealthy"
+      placeholder="Please input description"
+      size="small"
+      class="mt-5"
+    />
     <el-button
       @click="setLegend"
       class="legend-btn"
@@ -289,6 +303,7 @@ const legend = reactive<{
   metric: l ? selectedGrid.legend : [{ name: "", condition: "", value: "" }],
 });
 const configType = ref<string>("");
+const description = reactive<any>(selectedGrid.description || {});
 
 getMetricList();
 async function getMetricList() {
@@ -347,6 +362,10 @@ async function setLegend() {
   updateSettings();
   const ids = topologyStore.nodes.map((d: Node) => d.id);
   const names = dashboardStore.selectedGrid.legend.map((d: any) => d.name);
+  if (!names.length) {
+    emit("updateNodes");
+    return;
+  }
   const param = await useQueryTopologyMetrics(names, ids);
   const res = await topologyStore.getLegendMetrics(param);
 
@@ -413,6 +432,7 @@ function updateSettings(metricConfig?: { [key: string]: MetricConfigOpt[] }) {
     nodeMetrics: states.nodeMetrics,
     legend: metrics,
     ...metricConfig,
+    description,
   };
   dashboardStore.selectWidget(param);
   dashboardStore.setConfigs(param);
@@ -509,7 +529,7 @@ function setConfigType(type: string) {
 
 .inputs {
   margin-top: 8px;
-  width: 370px;
+  width: 355px;
 }
 
 .item {
diff --git a/src/views/dashboard/related/topology/utils/legend.ts b/src/views/dashboard/related/topology/utils/legend.ts
index 101420af..bb886731 100644
--- a/src/views/dashboard/related/topology/utils/legend.ts
+++ b/src/views/dashboard/related/topology/utils/legend.ts
@@ -20,32 +20,25 @@ export default function topoLegend(
   graph: any,
   clientHeight: number,
   clientWidth: number,
-  config: any
+  description: any
 ) {
   for (const item of ["CUBE", "CUBEERROR"]) {
     graph
       .append("image")
       .attr("width", 30)
       .attr("height", 30)
-      .attr("x", clientWidth - (item === "CUBEERROR" ? 340 : 440))
+      .attr("x", clientWidth - (item === "CUBEERROR" ? 200 : 410))
       .attr("y", clientHeight + 50)
       .attr("xlink:href", () =>
         item === "CUBEERROR" ? icons.CUBEERROR : icons.CUBE
       );
     graph
       .append("text")
-      .attr("x", clientWidth - (item === "CUBEERROR" ? 310 : 410))
+      .attr("x", clientWidth - (item === "CUBEERROR" ? 170 : 380))
       .attr("y", clientHeight + 70)
       .text(() => {
-        const l = config || [];
-        const str = l
-          .map((d: any) => `${d.name} ${d.condition} ${d.value}`)
-          .join(" and ");
-        return item === "CUBEERROR"
-          ? config && config.length
-            ? `Unhealthy (${str})`
-            : "Unhealthy"
-          : "Healthy";
+        const desc = description || {};
+        return item === "CUBEERROR" ? desc.unhealthy || "" : desc.healthy || "";
       })
       .style("fill", "#efeff1")
       .style("font-size", "11px");