feat: Implement custom configurations for metrics on dashboards and topology (#39)

src/views/dashboard/related/topology/components/Graph.vue

@@ -90,6 +90,8 @@ import { Option } from "@/types/app";
 import { Service } from "@/types/selector";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import getDashboard from "@/hooks/useDashboardsSession";
+import { MetricConfigOpt } from "@/types/dashboard";
+import { aggregation } from "@/hooks/useProcessor";
 
 /*global Nullable, defineProps */
 const props = defineProps({
@@ -275,13 +277,17 @@ function update() {
       handleNodeClick: handleNodeClick,
       tipHtml: (data: Node) => {
         const nodeMetrics: string[] = settings.value.nodeMetrics || [];
-        const html = nodeMetrics.map((m) => {
+        const nodeMetricConfig = settings.value.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 class="mb-5"><span class="grey">${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 class="mb-5"><span class="grey">name: </span>${data.name}</div>`,
@@ -306,24 +312,34 @@ function update() {
       tipHtml: (data: Call) => {
         const linkClientMetrics: string[] =
           settings.value.linkClientMetrics || [];
+        const linkServerMetricConfig: MetricConfigOpt[] =
+          settings.value.linkServerMetricConfig || [];
+        const linkClientMetricConfig: MetricConfigOpt[] =
+          settings.value.linkClientMetricConfig || [];
         const linkServerMetrics: string[] =
           settings.value.linkServerMetrics || [];
-        const htmlServer = linkServerMetrics.map((m) => {
-          const metric = topologyStore.linkServerMetrics[m].values.filter(
+        const htmlServer = linkServerMetrics.map((m, index) => {
+          const metric = topologyStore.linkServerMetrics[m].values.find(
             (val: { id: string; value: unknown }) => val.id === data.id
-          )[0];
+          );
           if (metric) {
-            const val = m.includes("_sla") ? metric.value / 100 : metric.value;
-            return ` <div class="mb-5"><span class="grey">${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 = linkClientMetrics.map((m) => {
-          const metric = topologyStore.linkClientMetrics[m].values.filter(
+        const htmlClient = linkClientMetrics.map((m: string, index: number) => {
+          const opt: MetricConfigOpt = linkClientMetricConfig[index] || {};
+          const metric = topologyStore.linkClientMetrics[m].values.find(
             (val: { id: string; value: unknown }) => val.id === data.id
-          )[0];
+          );
           if (metric) {
-            const val = m.includes("_sla") ? metric.value / 100 : metric.value;
-            return ` <div class="mb-5"><span class="grey">${m}: </span>${val}</div>`;
+            const v = aggregation(metric.value, opt);
+            return ` <div class="mb-5"><span class="grey">${
+              opt.label || m
+            }: </span>${v} ${opt.unit || ""}</div>`;
           }
         });
         const html = [

src/views/dashboard/related/topology/components/Metrics.vue

@@ -0,0 +1,170 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="config-panel">
+    <div class="item mb-10">
+      <span class="label">{{ t("metrics") }}</span>
+      <SelectSingle
+        :value="currentMetric"
+        :options="metrics"
+        @change="changeMetric"
+        class="selectors"
+      />
+    </div>
+    <div class="item mb-10">
+      <span class="label">{{ t("unit") }}</span>
+      <el-input
+        class="input"
+        v-model="currentConfig.unit"
+        size="small"
+        placeholder="Please input unit"
+        @change="changeConfigs({ unit: currentConfig.unit })"
+      />
+    </div>
+    <div class="item mb-10">
+      <span class="label">{{ t("labels") }}</span>
+      <el-input
+        class="input"
+        v-model="currentConfig.label"
+        size="small"
+        placeholder="Please input a label"
+        @change="changeConfigs({ label: currentConfig.label })"
+      />
+    </div>
+    <div class="item mb-10">
+      <span class="label">{{ t("aggregation") }}</span>
+      <SelectSingle
+        :value="currentConfig.calculation"
+        :options="CalculationOpts"
+        @change="changeConfigs({ calculation: $event })"
+        class="selectors"
+        :clearable="true"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, computed, watch } from "vue";
+import type { PropType } from "vue";
+import { useI18n } from "vue-i18n";
+import { CalculationOpts } from "../../../data";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { MetricConfigOpt } from "@/types/dashboard";
+import { Option } from "element-plus/es/components/select-v2/src/select.types";
+
+/*global defineEmits, defineProps */
+const props = defineProps({
+  currentMetricConfig: {
+    type: Object as PropType<MetricConfigOpt>,
+    default: () => ({ unit: "" }),
+  },
+  type: { type: String, default: "" },
+  metrics: { type: Array as PropType<string[]>, default: () => [] },
+});
+const { t } = useI18n();
+const emit = defineEmits(["update"]);
+const dashboardStore = useDashboardStore();
+const m = props.metrics.map((d: string) => {
+  return { label: d, value: d };
+});
+const metrics = ref<Option[]>(m.length ? m : [{ label: "", value: "" }]);
+const currentMetric = ref<string>(metrics.value[0].value);
+const currentConfig = ref<{ unit: string; calculation: string; label: string }>(
+  {
+    unit: "",
+    calculation: "",
+    label: "",
+  }
+);
+const currentIndex = ref<number>(0);
+const getMetricConfig = computed(() => {
+  let config = [];
+  switch (props.type) {
+    case "linkServerMetricConfig":
+      config = dashboardStore.selectedGrid.linkServerMetricConfig;
+      break;
+    case "linkClientMetricConfig":
+      config = dashboardStore.selectedGrid.linkClientMetricConfig;
+      break;
+    case "nodeMetricConfig":
+      config = dashboardStore.selectedGrid.nodeMetricConfig;
+      break;
+  }
+  return config || [];
+});
+
+function changeConfigs(param: { [key: string]: string }) {
+  const metricConfig = getMetricConfig.value;
+  metricConfig[currentIndex.value] = {
+    ...metricConfig[currentIndex.value],
+    ...param,
+  };
+  emit("update", { [props.type]: metricConfig });
+}
+function changeMetric(val: string) {
+  currentMetric.value = val;
+  const index = metrics.value.findIndex((d: Option) => d.value === val);
+  currentIndex.value = index || 0;
+  const config = getMetricConfig.value || [];
+
+  currentConfig.value = {
+    unit: "",
+    label: "",
+    calculation: "",
+    ...config[index],
+  };
+}
+watch(
+  () => props.type,
+  () => {
+    const m = props.metrics.map((d: string) => {
+      return { label: d, value: d };
+    });
+    metrics.value = m.length ? m : [{ label: "", value: "" }];
+    currentMetric.value = metrics.value[0].value;
+    const config = getMetricConfig.value || [];
+    currentIndex.value = 0;
+    currentConfig.value = {
+      unit: "",
+      label: "",
+      calculation: "",
+      ...config[0],
+    };
+  }
+);
+</script>
+<style lang="scss" scoped>
+.config-panel {
+  padding: 10px 5px;
+  position: relative;
+  min-height: 300px;
+}
+
+.label {
+  width: 150px;
+  display: inline-block;
+  font-size: 12px;
+}
+
+.close {
+  position: absolute;
+  top: -8px;
+  right: -15px;
+}
+
+.selectors {
+  width: 365px;
+}
+</style>

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"

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(
     " "

src/views/dashboard/related/topology/components/Settings.vue

@@ -25,7 +25,27 @@ limitations under the License. -->
       class="inputs"
       :clearable="true"
     />
-    <div class="label">{{ t("linkServerMetrics") }}</div>
+    <div class="label">
+      <span>{{ t("linkServerMetrics") }}</span>
+      <el-popover
+        placement="left"
+        :width="400"
+        trigger="click"
+        effect="dark"
+        v-if="states.linkServerMetrics.length"
+      >
+        <template #reference>
+          <span @click="setConfigType('linkServerMetricConfig')">
+            <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
+          </span>
+        </template>
+        <Metrics
+          :type="configType"
+          :metrics="states.linkServerMetrics"
+          @update="changeLinkServerMetrics"
+        />
+      </el-popover>
+    </div>
     <Selector
       class="inputs"
       :multiple="true"
@@ -33,11 +53,29 @@ limitations under the License. -->
       :options="states.linkMetricList"
       size="small"
       placeholder="Select metrics"
-      @change="changeLinkServerMetrics"
+      @change="updateLinkServerMetrics"
     />
     <span v-show="dashboardStore.entity !== EntityType[2].value">
       <div class="label">
-        {{ t("linkClientMetrics") }}
+        <span>{{ t("linkClientMetrics") }}</span>
+        <el-popover
+          placement="left"
+          :width="400"
+          trigger="click"
+          effect="dark"
+          v-if="states.linkClientMetrics.length"
+        >
+          <template #reference>
+            <span @click="setConfigType('linkClientMetricConfig')">
+              <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
+            </span>
+          </template>
+          <Metrics
+            :type="configType"
+            :metrics="states.linkClientMetrics"
+            @update="changeLinkClientMetrics"
+          />
+        </el-popover>
       </div>
       <Selector
         class="inputs"
@@ -46,7 +84,7 @@ limitations under the License. -->
         :options="states.linkMetricList"
         size="small"
         placeholder="Select metrics"
-        @change="changeLinkClientMetrics"
+        @change="updateLinkClientMetrics"
       />
     </span>
   </div>
@@ -100,7 +138,27 @@ limitations under the License. -->
         />
       </span>
     </div>
-    <div class="label">{{ t("nodeMetrics") }}</div>
+    <div class="label">
+      <span>{{ t("nodeMetrics") }}</span>
+      <el-popover
+        placement="left"
+        :width="400"
+        trigger="click"
+        effect="dark"
+        v-if="states.nodeMetrics.length"
+      >
+        <template #reference>
+          <span @click="setConfigType('nodeMetricConfig')">
+            <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
+          </span>
+        </template>
+        <Metrics
+          :type="configType"
+          :metrics="states.nodeMetrics"
+          @update="changeNodeMetrics"
+        />
+      </el-popover>
+    </div>
     <Selector
       class="inputs"
       :multiple="true"
@@ -108,7 +166,7 @@ limitations under the License. -->
       :options="states.nodeMetricList"
       size="small"
       placeholder="Select metrics"
-      @change="changeNodeMetrics"
+      @change="updateNodeMetrics"
     />
   </div>
   <div class="legend-settings" v-show="isService">
@@ -157,15 +215,6 @@ limitations under the License. -->
       </span>
       <div v-show="index !== legend.metric.length - 1">&&</div>
     </div>
-    <!-- <div class="label">{{ t("conditions") }}</div>
-    <Selector
-      class="inputs"
-      :value="legend.condition"
-      :options="LegendConditions"
-      size="small"
-      placeholder="Select a condition"
-      @change="changeCondition"
-    /> -->
     <el-button
       @click="setLegend"
       class="legend-btn"
@@ -177,7 +226,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useTopologyStore } from "@/store/modules/topology";
@@ -186,8 +235,9 @@ import { MetricCatalog, ScopeType, MetricConditions } from "../../../data";
 import { Option } from "@/types/app";
 import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
 import { Node } from "@/types/topology";
-import { DashboardItem } from "@/types/dashboard";
+import { DashboardItem, MetricConfigOpt } from "@/types/dashboard";
 import { EntityType, LegendOpt, MetricsType } from "../../../data";
+import Metrics from "./Metrics.vue";
 
 /*global defineEmits */
 const emit = defineEmits(["update", "updateNodes"]);
@@ -238,6 +288,7 @@ const legend = reactive<{
 }>({
   metric: l ? selectedGrid.legend : [{ name: "", condition: "", value: "" }],
 });
+const configType = ref<string>("");
 
 getMetricList();
 async function getMetricList() {
@@ -347,11 +398,12 @@ function deleteItem(index: number) {
   items.splice(index, 1);
   updateSettings();
 }
-function updateSettings() {
+function updateSettings(metricConfig?: { [key: string]: MetricConfigOpt[] }) {
   const metrics = legend.metric.filter(
     (d: any) => d.name && d.value && d.condition
   );
   const param = {
+    ...dashboardStore.selectedGrid,
     linkDashboard: states.linkDashboard,
     nodeDashboard: isService
       ? items.filter((d: { scope: string; dashboard: string }) => d.dashboard)
@@ -360,32 +412,76 @@ function updateSettings() {
     linkClientMetrics: states.linkClientMetrics,
     nodeMetrics: states.nodeMetrics,
     legend: metrics,
+    ...metricConfig,
   };
-  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, ...param });
-  dashboardStore.setConfigs({ ...dashboardStore.selectedGrid, ...param });
+  dashboardStore.selectWidget(param);
+  dashboardStore.setConfigs(param);
   emit("update", param);
 }
-async function changeLinkServerMetrics(options: Option[] | any) {
-  states.linkServerMetrics = options.map((d: Option) => d.value);
-  updateSettings();
+function updateLinkServerMetrics(options: Option[] | any) {
+  const opt = options.map((d: Option) => d.value);
+  const index = states.linkServerMetrics.findIndex(
+    (d: any) => !opt.includes(d)
+  );
+  states.linkServerMetrics = opt;
+  if (index < 0) {
+    changeLinkServerMetrics();
+    return;
+  }
+  const origin = dashboardStore.selectedGrid.linkServerMetricConfig || [];
+  const config = origin.length === 1 ? [] : origin.splice(index, 1);
+  changeLinkServerMetrics({ linkServerMetricConfig: config });
+}
+async function changeLinkServerMetrics(config?: {
+  [key: string]: MetricConfigOpt[];
+}) {
+  updateSettings(config);
   if (!states.linkServerMetrics.length) {
     topologyStore.setLinkServerMetrics({});
     return;
   }
   topologyStore.getLinkServerMetrics(states.linkServerMetrics);
 }
-async function changeLinkClientMetrics(options: Option[] | any) {
-  states.linkClientMetrics = options.map((d: Option) => d.value);
-  updateSettings();
+function updateLinkClientMetrics(options: Option[] | any) {
+  const opt = options.map((d: Option) => d.value);
+  const index = states.linkClientMetrics.findIndex(
+    (d: any) => !opt.includes(d)
+  );
+  states.linkClientMetrics = opt;
+  if (index < 0) {
+    changeLinkClientMetrics();
+    return;
+  }
+  const origin = dashboardStore.selectedGrid.linkClientMetricConfig || [];
+  const config = origin.length === 1 ? [] : origin.splice(index, 1);
+  changeLinkClientMetrics({ linkClientMetricConfig: config });
+}
+async function changeLinkClientMetrics(config?: {
+  [key: string]: MetricConfigOpt[];
+}) {
+  updateSettings(config);
   if (!states.linkClientMetrics.length) {
     topologyStore.setLinkClientMetrics({});
     return;
   }
   topologyStore.getLinkClientMetrics(states.linkClientMetrics);
 }
-async function changeNodeMetrics(options: Option[] | any) {
-  states.nodeMetrics = options.map((d: Option) => d.value);
-  updateSettings();
+function updateNodeMetrics(options: Option[] | any) {
+  const opt = options.map((d: Option) => d.value);
+  const index = states.nodeMetrics.findIndex((d: any) => !opt.includes(d));
+  states.nodeMetrics = opt;
+  if (index < 0) {
+    changeNodeMetrics();
+    return;
+  }
+  const origin = dashboardStore.selectedGrid.nodeMetricConfig || [];
+  const config = origin.length === 1 ? [] : origin.splice(index, 1);
+  changeNodeMetrics({ nodeMetricConfig: config });
+}
+async function changeNodeMetrics(config?: {
+  [key: string]: MetricConfigOpt[];
+}) {
+  updateSettings(config);
   if (!states.nodeMetrics.length) {
     topologyStore.setNodeMetricValue({});
     return;
@@ -402,6 +498,9 @@ function deleteMetric(index: number) {
 function addMetric() {
   legend.metric.push({ name: "", condition: "", value: "" });
 }
+function setConfigType(type: string) {
+  configType.value = type;
+}
 </script>
 <style lang="scss" scoped>
 .link-settings {