fix: update pagination for service list, endpoint list, instance list and add legend configs (#45)

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

@@ -192,6 +192,7 @@ limitations under the License. -->
       <el-input
         v-model="metric.value"
         placeholder="Please input a value"
+        type="number"
         @change="changeLegend(LegendOpt.VALUE, $event, index)"
         size="small"
         class="item"
@@ -215,6 +216,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 +304,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 +363,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 +433,7 @@ function updateSettings(metricConfig?: { [key: string]: MetricConfigOpt[] }) {
     nodeMetrics: states.nodeMetrics,
     legend: metrics,
     ...metricConfig,
+    description,
   };
   dashboardStore.selectWidget(param);
   dashboardStore.setConfigs(param);
@@ -509,7 +530,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
-            ? `Unhealthy (${str})`
-            : "Unhealthy"
-          : "Healthy";
+        const desc = description || {};
+        return item === "CUBEERROR" ? desc.unhealthy || "" : desc.healthy || "";
       })
       .style("fill", "#efeff1")
       .style("font-size", "11px");

src/views/dashboard/related/topology/utils/nodeElement.ts

@@ -55,11 +55,10 @@ export default (d3: any, graph: any, funcs: any, tip: any, legend: any) => {
       }
       let c = true;
       for (const l of legend) {
-        const val = l.name.includes("_sla") ? d[l.name] / 100 : d[l.name];
         if (l.condition === "<") {
-          c = c && val < Number(l.value);
+          c = c && d[l.name] < Number(l.value);
         } else {
-          c = c && val > Number(l.value);
+          c = c && d[l.name] > Number(l.value);
         }
       }
       return c && d.isReal ? icons.CUBEERROR : icons.CUBE;