From 225018db2bcedc6867f5f417273140d796bd165f Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Fri, 28 Oct 2022 19:11:17 +0800
Subject: [PATCH] add labeled values on toplist

---
 src/hooks/useProcessor.ts                     |  7 ++++++-
 src/views/dashboard/graphs/ServiceList.vue    | 20 +++++++++++++------
 .../graphs/components/ColumnGraph.vue         | 13 ++++++------
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts
index 8ea7962b..bc6b17e9 100644
--- a/src/hooks/useProcessor.ts
+++ b/src/hooks/useProcessor.ts
@@ -331,6 +331,7 @@ export function usePodsSource(
   }
   const names: string[] = [];
   const metricConfigArr: MetricConfigOpt[] = [];
+  const metricTypesArr: string[] = [];
   const data = pods.map((d: Instance | any, idx: number) => {
     config.metrics.map((name: string, index: number) => {
       const c: any = (config.metricConfig && config.metricConfig[index]) || {};
@@ -340,6 +341,7 @@ export function usePodsSource(
         if (idx === 0) {
           names.push(name);
           metricConfigArr.push(c);
+          metricTypesArr.push(config.metricTypes[index]);
         }
       }
       if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) {
@@ -359,6 +361,7 @@ export function usePodsSource(
         if (idx === 0) {
           names.push(name);
           metricConfigArr.push(c);
+          metricTypesArr.push(config.metricTypes[index]);
         }
       }
       if (
@@ -403,6 +406,7 @@ export function usePodsSource(
             if (idx === 0) {
               names.push(labels[indexNum]);
               metricConfigArr.push(c);
+              metricTypesArr.push(config.metricTypes[index]);
             }
           } else {
             if (!d[item.label]) {
@@ -412,6 +416,7 @@ export function usePodsSource(
             if (idx === 0) {
               names.push(item.label);
               metricConfigArr.push(c);
+              metricTypesArr.push(config.metricTypes[index]);
             }
           }
         }
@@ -419,7 +424,7 @@ export function usePodsSource(
     });
     return d;
   });
-  return { data, names, metricConfigArr };
+  return { data, names, metricConfigArr, metricTypesArr };
 }
 export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
   const appStore = useAppStoreWithOut();
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 1139ef40..6e9ee014 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -56,7 +56,12 @@ limitations under the License. -->
         <ColumnGraph
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
-          :config="{ ...config, metrics: colMetrics, metricConfig }"
+          :config="{
+            ...config,
+            metrics: colMetrics,
+            metricConfig,
+            metricTypes,
+          }"
           v-if="colMetrics.length"
         />
       </el-table>
@@ -122,6 +127,8 @@ const searchText = ref<string>("");
 const groups = ref<any>({});
 const sortServices = ref<(Service & { merge: boolean })[]>([]);
 const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
+const metricTypes = ref<string[]>(props.config.metricTypes || []);
+
 queryServices();
 
 async function queryServices() {
@@ -199,9 +206,9 @@ async function queryServiceMetrics(currentServices: Service[]) {
     return;
   }
   const metrics = props.config.metrics || [];
-  const metricTypes = props.config.metricTypes || [];
+  const types = props.config.metricTypes || [];
 
-  if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
+  if (metrics.length && metrics[0] && types.length && types[0]) {
     const params = await useQueryPodsMetrics(
       currentServices,
       props.config,
@@ -217,7 +224,7 @@ async function queryServiceMetrics(currentServices: Service[]) {
     if (!metricConfig.value.length) {
       return;
     }
-    const { data, names, metricConfigArr } = usePodsSource(
+    const { data, names, metricConfigArr, metricTypesArr } = usePodsSource(
       currentServices,
       json,
       {
@@ -227,9 +234,9 @@ async function queryServiceMetrics(currentServices: Service[]) {
     );
     services.value = data;
     colMetrics.value = names;
-
+    metricTypes.value = metricTypesArr;
     metricConfig.value = metricConfigArr;
-    // console.log(metricConfigArr);
+
     return;
   }
   services.value = currentServices;
@@ -283,6 +290,7 @@ watch(
     if (JSON.stringify(data) === JSON.stringify(old)) {
       return;
     }
+    metricConfig.value = data;
     queryServiceMetrics(services.value);
   }
 );
diff --git a/src/views/dashboard/graphs/components/ColumnGraph.vue b/src/views/dashboard/graphs/components/ColumnGraph.vue
index c5086e55..33cd5825 100644
--- a/src/views/dashboard/graphs/components/ColumnGraph.vue
+++ b/src/views/dashboard/graphs/components/ColumnGraph.vue
@@ -95,13 +95,12 @@ import Card from "../Card.vue";
 const props = defineProps({
   colMetrics: { type: Object },
   config: {
-    type: Object as PropType<
-      {
-        i: string;
-        metrics: string[];
-        metricTypes: string[];
-      } & { metricConfig: MetricConfigOpt[] }
-    >,
+    type: Object as PropType<{
+      i: string;
+      metrics: string[];
+      metricTypes: string[];
+      metricConfig: MetricConfigOpt[];
+    }>,
     default: () => ({}),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },