github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-18 14:05:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update legend

Browse Source
This commit is contained in:
Qiuxia Fan 2022-02-17 21:07:10 +08:00
parent a1001a1285
commit 7f6d63e669
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -133,7 +133,7 @@ async function init() {
svg.value.call(zoom(d3, graph.value)); svg.value.call(zoom(d3, graph.value));
// legend // legend
legend.value = graph.value.append("g").attr("class", "topo-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) => { svg.value.on("click", (event: any) => {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();

11
src/views/dashboard/related/topology/components/Settings.vue
View File

@ -236,11 +236,16 @@ async function getMetricList() {
); );
} }
async function setLegend() { async function setLegend() {
if ( if (!legend.metric.name) {
!(legend.metric.name && legend.metric.value && legend.metric.condidtion)
) {
return; return;
} }
if (!legend.metric.value) {
return;
}
if (!legend.metric.condition) {
return;
}
updateSettings(); updateSettings();
const ids = topologyStore.nodes.map((d: Node) => d.id); const ids = topologyStore.nodes.map((d: Node) => d.id);
const param = await useQueryTopologyMetrics([legend.metric.name], ids); const param = await useQueryTopologyMetrics([legend.metric.name], ids);

7
src/views/dashboard/related/topology/utils/legend.ts
View File

@ -19,7 +19,8 @@ import icons from "@/assets/img/icons";
export default function topoLegend( export default function topoLegend(
graph: any, graph: any,
clientHeight: number, clientHeight: number,
clientWidth: number clientWidth: number,
config: any
) { ) {
for (const item of ["CUBE", "CUBEERROR"]) { for (const item of ["CUBE", "CUBEERROR"]) {
graph graph
@ -37,7 +38,9 @@ export default function topoLegend(
.attr("y", clientHeight - 30) .attr("y", clientHeight - 30)
.text(() => { .text(() => {
return item === "CUBEERROR" 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"; : "Healthy";
}) })
.style("fill", "#efeff1") .style("fill", "#efeff1")