From d4a900fe7f0fe92b48daa98577b0f11a751d99f4 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sat, 26 Mar 2022 18:03:47 +0800
Subject: [PATCH] show metric config

---
 .../topology/components/PodTopology.vue       |  2 +-
 .../related/topology/components/Sankey.vue    | 65 +++++++++++++------
 .../related/topology/components/Settings.vue  |  6 +-
 3 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index 8fc4df70..131221b8 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -54,7 +54,7 @@ limitations under the License. -->
     element-loading-background="rgba(0, 0, 0, 0)"
     @click="handleClick"
   >
-    <Sankey @click="selectNodeLink" />
+    <Sankey @click="selectNodeLink" :settings="settings" />
   </div>
   <div
     class="operations-list"
diff --git a/src/views/dashboard/related/topology/components/Sankey.vue b/src/views/dashboard/related/topology/components/Sankey.vue
index 47b3ccab..e92257cd 100644
--- a/src/views/dashboard/related/topology/components/Sankey.vue
+++ b/src/views/dashboard/related/topology/components/Sankey.vue
@@ -17,11 +17,19 @@ limitations under the License. -->
   <Graph :option="option" @select="clickChart" />
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, PropType } from "vue";
 import { useTopologyStore } from "@/store/modules/topology";
 import { Node, Call } from "@/types/topology";
+import { MetricConfigOpt } from "@/types/dashboard";
+import { aggregation } from "@/hooks/useProcessor";
 
-/*global defineEmits */
+/*global defineEmits, defineProps */
+const props = defineProps({
+  settings: {
+    type: Object as PropType<any>,
+    default: () => ({}),
+  },
+});
 const emit = defineEmits(["click"]);
 const topologyStore = useTopologyStore();
 const option = computed(() => getOption());
@@ -77,23 +85,34 @@ function getOption() {
 function linkTooltip(data: Call) {
   const clientMetrics: string[] = Object.keys(topologyStore.linkClientMetrics);
   const serverMetrics: string[] = Object.keys(topologyStore.linkServerMetrics);
-  const htmlServer = serverMetrics.map((m) => {
-    const metric = topologyStore.linkServerMetrics[m].values.filter(
-      (val: { id: string; value: unknown }) => val.id === data.id
-    )[0];
+  const linkServerMetricConfig: MetricConfigOpt[] =
+    props.settings.linkServerMetricConfig || [];
+  const linkClientMetricConfig: MetricConfigOpt[] =
+    props.settings.linkClientMetricConfig || [];
+
+  const htmlServer = serverMetrics.map((m, index) => {
+    const metric =
+      topologyStore.linkServerMetrics[m].values.find(
+        (val: { id: string; value: unknown }) => val.id === data.id
+      ) || {};
     if (metric) {
-      const val = m.includes("_sla") ? metric.value / 100 : metric.value;
-      return ` <div><span>${m}: </span>${val}</div>`;
+      const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
+      const v = aggregation(metric.value, opt);
+      return ` <div class="mb-5"><span class="grey">${
+        opt.label || m
+      }: </span>${v} ${opt.unit || ""}</div>`;
     }
   });
-  const htmlClient = clientMetrics.map((m) => {
-    const metric = topologyStore.linkClientMetrics[m].values.filter(
-      (val: { id: string; value: unknown }) => val.id === data.id
-    )[0];
-    if (metric) {
-      const val = m.includes("_sla") ? metric.value / 100 : metric.value;
-      return ` <div><span>${m}: </span>${val}</div>`;
-    }
+  const htmlClient = clientMetrics.map((m, index) => {
+    const opt: MetricConfigOpt = linkClientMetricConfig[index] || {};
+    const metric =
+      topologyStore.linkClientMetrics[m].values.find(
+        (val: { id: string; value: unknown }) => val.id === data.id
+      ) || {};
+    const v = aggregation(metric.value, opt);
+    return ` <div class="mb-5"><span class="grey">${
+      opt.label || m
+    }: </span>${v} ${opt.unit || ""}</div>`;
   });
   const html = [
     `<div>${data.sourceObj.serviceName} -> ${data.targetObj.serviceName}</div>`,
@@ -106,13 +125,17 @@ function linkTooltip(data: Call) {
 
 function nodeTooltip(data: Node) {
   const nodeMetrics: string[] = Object.keys(topologyStore.nodeMetricValue);
-  const html = nodeMetrics.map((m) => {
+  const nodeMetricConfig = props.settings.nodeMetricConfig || [];
+  const html = nodeMetrics.map((m, index) => {
     const metric =
-      topologyStore.nodeMetricValue[m].values.filter(
+      topologyStore.nodeMetricValue[m].values.find(
         (val: { id: string; value: unknown }) => val.id === data.id
-      )[0] || {};
-    const val = m.includes("_sla") ? metric.value / 100 : metric.value;
-    return ` <div><span>${m}: </span>${val}</div>`;
+      ) || {};
+    const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
+    const v = aggregation(metric.value, opt);
+    return ` <div class="mb-5"><span class="grey">${
+      opt.label || m
+    }: </span>${v} ${opt.unit || ""}</div>`;
   });
   return [` <div><span>name: </span>${data.serviceName}</div>`, ...html].join(
     " "
diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue
index 29c99696..93d9b135 100644
--- a/src/views/dashboard/related/topology/components/Settings.vue
+++ b/src/views/dashboard/related/topology/components/Settings.vue
@@ -36,7 +36,7 @@ limitations under the License. -->
       >
         <template #reference>
           <span @click="setConfigType('linkServerMetricConfig')">
-            <Icon class="cp mr-5" iconName="mode_edit" size="middle" />
+            <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
           </span>
         </template>
         <Metrics
@@ -67,7 +67,7 @@ limitations under the License. -->
         >
           <template #reference>
             <span @click="setConfigType('linkClientMetricConfig')">
-              <Icon class="cp mr-5" iconName="mode_edit" size="middle" />
+              <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
             </span>
           </template>
           <Metrics
@@ -149,7 +149,7 @@ limitations under the License. -->
       >
         <template #reference>
           <span @click="setConfigType('nodeMetricConfig')">
-            <Icon class="cp mr-5" iconName="mode_edit" size="middle" />
+            <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
           </span>
         </template>
         <Metrics