From 6bccb79eafb566b487495f9ef595d28f63a5e872 Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Thu, 17 Feb 2022 20:41:48 +0800 Subject: [PATCH] feat: set topology legend --- src/locales/lang/en.ts | 2 + src/locales/lang/zh.ts | 2 + src/store/modules/topology.ts | 23 +++ src/views/dashboard/data.ts | 13 ++ .../related/topology/components/Graph.vue | 39 +++-- .../topology/components/PodTopology.vue | 16 +- .../related/topology/components/Settings.vue | 147 +++++++++++++++--- .../related/topology/utils/nodeElement.ts | 24 ++- 8 files changed, 222 insertions(+), 44 deletions(-) diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 7a96f187..d13b9e27 100644 --- a/src/locales/lang/en.ts +++ b/src/locales/lang/en.ts @@ -84,6 +84,8 @@ const msg = { endpointDashboard: "Dashboard name related with endpoints", callSettings: "Call settings", nodeSettings: "Node Settings", + conditions: "Conditions", + legendSettings: "Legend Settings", hourTip: "Select Hour", minuteTip: "Select Minute", secondTip: "Select Second", diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index 52fcd8fd..9486a572 100644 --- a/src/locales/lang/zh.ts +++ b/src/locales/lang/zh.ts @@ -83,6 +83,8 @@ const msg = { endpointDashboard: "拓节点端点的实例的仪表板名称", callSettings: "拓扑线设置", nodeSettings: "拓扑点设置", + conditions: "条件", + legendSettings: "图例设置", hourTip: "选择小时", minuteTip: "选择分钟", secondTip: "选择秒数", diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index 2ea85b92..69b01e2c 100644 --- a/src/store/modules/topology.ts +++ b/src/store/modules/topology.ts @@ -344,6 +344,29 @@ export const topologyStore = defineStore({ this.setNodeMetrics(res.data.data); return res.data; }, + async getLegendMetrics(param: { + queryStr: string; + conditions: { [key: string]: unknown }; + }) { + const res: AxiosResponse = await query(param); + + if (res.data.errors) { + return res.data; + } + const data = res.data.data; + const metrics = Object.keys(data); + this.nodes = this.nodes.map((d: Node | any) => { + for (const m of metrics) { + for (const val of data[m].values) { + if (d.id === val.id) { + d[m] = val.value; + } + } + } + return d; + }); + return res.data; + }, async getCallServerMetrics(param: { queryStr: string; conditions: { [key: string]: unknown }; diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index d0a93443..5d8b9279 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -177,3 +177,16 @@ export const ScopeType = [ { value: "Endpoint", label: "Endpoint", key: 3 }, { value: "ServiceInstance", label: "Service Instance", key: 3 }, ]; +export const LegendConditions = [ + { label: "&&", value: "and" }, + { label: "||", value: "or" }, +]; +export const MetricConditions = [ + { label: ">", value: ">" }, + { label: "<", value: "<" }, +]; +export enum LegendOpt { + NAME = "name", + VALUE = "value", + CONDITION = "condition", +} diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index 53066e16..c1a5ef1d 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/src/views/dashboard/related/topology/components/Graph.vue @@ -20,18 +20,18 @@ limitations under the License. --> :style="`height: ${height}px`" >
- +
- - + + - - + +
val.id === data.id )[0] || {}; - return `
${m}: ${metric.value}
`; + const val = m.includes("_sla") + ? metric.value / 100 + : metric.value.value; + return `
${m}: ${val}
`; }); return [ `
name: ${data.name}
`, @@ -247,7 +250,8 @@ function update() { ].join(" "); }, }, - tip.value + tip.value, + settings.value.legend ).merge(node.value); // line element link.value = link.value.data(topologyStore.calls, (d: Call) => d.id); @@ -270,7 +274,8 @@ function update() { (val: { id: string; value: unknown }) => val.id === data.id )[0]; if (metric) { - return `
${m}: ${metric.value}
`; + const val = m.includes("_sla") ? metric.value / 100 : metric.value; + return `
${m}: ${val}
`; } }); const htmlClient = linkClientMetrics.map((m) => { @@ -278,7 +283,8 @@ function update() { (val: { id: string; value: unknown }) => val.id === data.id )[0]; if (metric) { - return `
${m}: ${metric.value}
`; + const val = m.includes("_sla") ? metric.value / 100 : metric.value; + return `
${m}: ${val}
`; } }); const html = [ @@ -433,6 +439,11 @@ function updateSettings(config: any) { } } } +async function freshNodes() { + svg.value.selectAll(".topo-svg-graph").remove(); + await init(); + update(); +} onBeforeUnmount(() => { window.removeEventListener("resize", resize); }); @@ -445,7 +456,7 @@ onBeforeUnmount(() => { position: absolute; top: 70px; right: 0; - width: 360px; + width: 380px; height: 700px; background-color: #2b3037; overflow: auto; diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue index 1c35db4b..4674753d 100644 --- a/src/views/dashboard/related/topology/components/PodTopology.vue +++ b/src/views/dashboard/related/topology/components/PodTopology.vue @@ -24,15 +24,15 @@ limitations under the License. --> @change="changeDepth" /> - - + + - - + +
diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue index b315624f..a1c46a7b 100644 --- a/src/views/dashboard/related/topology/components/Settings.vue +++ b/src/views/dashboard/related/topology/components/Settings.vue @@ -58,30 +58,30 @@ limitations under the License. --> size="small" placeholder="Select a scope" @change="changeScope(index, $event)" - class="item" + class="item mr-5" /> - +
{{ t("nodeMetrics") }}
@@ -95,21 +95,94 @@ limitations under the License. --> @change="changeNodeMetrics" />
+
+
{{ t("legendSettings") }}
+
{{ t("metrics") }}
+ + + + + + + set legend + +