diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index c1a5ef1d..ea678c38 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/src/views/dashboard/related/topology/components/Graph.vue @@ -133,7 +133,7 @@ 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); + topoLegend(legend.value, height.value, width.value, settings.value.legend); 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 07b53347..8e0485de 100644 --- a/src/views/dashboard/related/topology/components/Settings.vue +++ b/src/views/dashboard/related/topology/components/Settings.vue @@ -236,11 +236,16 @@ async function getMetricList() { ); } async function setLegend() { - if ( - !(legend.metric.name && legend.metric.value && legend.metric.condidtion) - ) { + if (!legend.metric.name) { return; } + if (!legend.metric.value) { + return; + } + if (!legend.metric.condition) { + return; + } + updateSettings(); const ids = topologyStore.nodes.map((d: Node) => d.id); const param = await useQueryTopologyMetrics([legend.metric.name], ids); diff --git a/src/views/dashboard/related/topology/utils/legend.ts b/src/views/dashboard/related/topology/utils/legend.ts index b38b76bd..ea8336d3 100644 --- a/src/views/dashboard/related/topology/utils/legend.ts +++ b/src/views/dashboard/related/topology/utils/legend.ts @@ -19,7 +19,8 @@ import icons from "@/assets/img/icons"; export default function topoLegend( graph: any, clientHeight: number, - clientWidth: number + clientWidth: number, + config: any ) { for (const item of ["CUBE", "CUBEERROR"]) { graph @@ -37,7 +38,9 @@ export default function topoLegend( .attr("y", clientHeight - 30) .text(() => { return item === "CUBEERROR" - ? "Unhealthy (Successful Rate < 95% and Traffic > 1 call/min)" + ? config + ? `Unhealthy (${config.metric.name} ${config.metric.condition} ${config.metric.value})` + : "Unhealthy" : "Healthy"; }) .style("fill", "#efeff1")