add metric config

src/components/Select.vue

@@ -13,17 +13,19 @@ 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="rk-bar-select cp flex-h" :class="{ active: visible }">
-    <div class="rk-bar-i" @click="visible = !visible">
+  <div class="bar-select cp flex-h" :class="{ active: visible }">
+    <div class="bar-i" @click="setPopper">
       <span v-if="selected.value">
         {{ selected.label }}
       </span>
       <span class="no-data" v-else>Please select a option</span>
-      <span class="remove-icon" @click="removeSelected">×</span>
+      <span class="remove-icon" @click="removeSelected" v-if="clearable">
+        ×
+      </span>
     </div>
-    <div class="rk-opt-wrapper" v-show="visible">
+    <div class="opt-wrapper" v-show="visible">
       <div
-        class="rk-opt ell"
+        class="opt ell"
         @click="handleSelect(i)"
         :class="{ 'select-disabled': selected.value === i.value }"
         v-for="i in options"
@@ -35,7 +37,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import type { PropType } from "vue";
 import { Option } from "@/types/app";
 
@@ -59,15 +61,30 @@ const selected = ref<Option>(opt || { label: "", value: "" });
 function handleSelect(i: Option) {
   selected.value = i;
   emit("change", i.value);
-  visible.value = false;
 }
 function removeSelected() {
   selected.value = { label: "", value: "" };
   emit("change", "");
 }
+watch(
+  () => props.value,
+  (data) => {
+    const opt = props.options.find((d: Option) => data === d.value);
+    selected.value = opt || { label: "", value: "" };
+  }
+);
+document.body.addEventListener("click", handleClick, false);
+
+function handleClick() {
+  visible.value = false;
+}
+function setPopper(event: any) {
+  event.stopPropagation();
+  visible.value = !visible.value;
+}
 </script>
 <style lang="scss" scoped>
-.rk-bar-select {
+.bar-select {
   position: relative;
   justify-content: space-between;
   border: 1px solid #ddd;
@@ -92,7 +109,7 @@ function removeSelected() {
   color: #c0c4cc;
 }
 
-.rk-bar-i {
+.bar-i {
   height: 100%;
   width: 100%;
   padding: 2px 10px;
@@ -117,7 +134,7 @@ function removeSelected() {
   cursor: pointer;
 }
 
-.rk-opt-wrapper {
+.opt-wrapper {
   color: #606266;
   position: absolute;
   top: 26px;
@@ -145,7 +162,7 @@ function removeSelected() {
   }
 }
 
-.rk-opt {
+.opt {
   padding: 7px 15px;
 
   &.select-disabled {

src/hooks/useProcessor.ts

@@ -68,7 +68,7 @@ export function useQueryProcessor(config: any) {
       };
     } else {
       if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
-        const labels = (config.labelsIndex || "")
+        const labels = (c.labelsIndex || "")
           .split(",")
           .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
         variables.push(`$labels${index}: [String!]!`);
@@ -311,7 +311,7 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
   return { queryStr, conditions };
 }
 
-function aggregation(val: number, config: any): number | string {
+export function aggregation(val: number, config: any): number | string {
   let data: number | string = Number(val);
 
   switch (config.calculation) {

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -56,7 +56,7 @@ limitations under the License. -->
         </span>
       </template>
       <Standard
-        @update="queryListMetrics"
+        @update="queryMetrics"
         :currentMetricConfig="currentMetricConfig"
         :index="index"
       />
@@ -339,12 +339,6 @@ function changeMetricType(index: number, opt: Option[] | any) {
   }
   queryMetrics();
 }
-async function queryListMetrics(metricConfig: MetricConfigOpt[]) {
-  dashboardStore.selectWidget({
-    ...dashboardStore.selectedGrid,
-    metricConfig,
-  });
-}
 async function queryMetrics() {
   if (states.isList) {
     return;

src/views/dashboard/configuration/widget/metric/Standard.vue

@@ -21,7 +21,7 @@ limitations under the License. -->
         v-model="currentMetric.unit"
         size="small"
         placeholder="Please input unit"
-        @change="changeConfigs(index, { unit: currentMetricConfig.unit })"
+        @change="changeConfigs(index, { unit: currentMetric.unit })"
       />
     </div>
     <div class="item mb-10" v-show="metricType === 'readLabeledMetricsValues'">
@@ -31,7 +31,7 @@ limitations under the License. -->
         v-model="currentMetric.label"
         size="small"
         placeholder="Please input a name"
-        @change="changeConfigs(index, { label: currentMetricConfig.label })"
+        @change="changeConfigs(index, { label: currentMetric.label })"
       />
     </div>
     <div class="item mb-10" v-show="metricType === 'readLabeledMetricsValues'">
@@ -42,7 +42,7 @@ limitations under the License. -->
         size="small"
         placeholder="auto"
         @change="
-          changeConfigs(index, { label: currentMetricConfig.labelsIndex })
+          changeConfigs(index, { labelsIndex: currentMetric.labelsIndex })
         "
       />
     </div>
@@ -58,7 +58,7 @@ limitations under the License. -->
     </div>
     <div
       class="item"
-      v-show="['sortMetrics', 'readLabeledMetricsValues'].includes(metricType)"
+      v-show="['sortMetrics', 'readSampledRecords'].includes(metricType)"
     >
       <span class="label">{{ t("sortOrder") }}</span>
       <SelectSingle
@@ -95,10 +95,15 @@ const metricType = ref<string>(
 );
 
 function changeConfigs(index: number, param: { [key: string]: string }) {
+  console.log(param);
   const metricConfig = dashboardStore.selectedGrid.metricConfig || [];
   metricConfig[index] = { ...metricConfig[index], ...param };
 
-  emit("update", metricConfig);
+  dashboardStore.selectWidget({
+    ...dashboardStore.selectedGrid,
+    metricConfig,
+  });
+  emit("update");
 }
 </script>
 <style lang="scss" scoped>

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,168 @@
+<!-- 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 = config[index] || {
+    unit: "",
+    label: "",
+    calculation: "",
+  };
+}
+watch(
+  () => props.metrics,
+  (arr) => {
+    const m = arr.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 = config[0] || {
+      unit: "",
+      label: "",
+      calculation: "",
+    };
+  }
+);
+</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/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 mr-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 mr-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 mr-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">
@@ -177,7 +235,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 +244,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 +297,7 @@ const legend = reactive<{
 }>({
   metric: l ? selectedGrid.legend : [{ name: "", condition: "", value: "" }],
 });
+const configType = ref<string>("");
 
 getMetricList();
 async function getMetricList() {
@@ -347,7 +407,7 @@ function deleteItem(index: number) {
   items.splice(index, 1);
   updateSettings();
 }
-function updateSettings() {
+function updateSettings(config?: { [key: string]: MetricConfigOpt[] }) {
   const metrics = legend.metric.filter(
     (d: any) => d.name && d.value && d.condition
   );
@@ -360,32 +420,48 @@ function updateSettings() {
     linkClientMetrics: states.linkClientMetrics,
     nodeMetrics: states.nodeMetrics,
     legend: metrics,
+    ...config,
   };
   dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, ...param });
   dashboardStore.setConfigs({ ...dashboardStore.selectedGrid, ...param });
   emit("update", param);
 }
-async function changeLinkServerMetrics(options: Option[] | any) {
+function updateLinkServerMetrics(options: Option[] | any) {
   states.linkServerMetrics = options.map((d: Option) => d.value);
-  updateSettings();
+  changeLinkServerMetrics();
+}
+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) {
+function updateLinkClientMetrics(options: Option[] | any) {
   states.linkClientMetrics = options.map((d: Option) => d.value);
-  updateSettings();
+  changeLinkClientMetrics();
+}
+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) {
+function updateNodeMetrics(options: Option[] | any) {
   states.nodeMetrics = options.map((d: Option) => d.value);
-  updateSettings();
+  changeNodeMetrics();
+}
+async function changeNodeMetrics(config?: {
+  [key: string]: MetricConfigOpt[];
+}) {
+  updateSettings(config);
   if (!states.nodeMetrics.length) {
     topologyStore.setNodeMetricValue({});
     return;
@@ -402,6 +478,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 {