update legend

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) {

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();

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 {

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");