From de90ae6d9b87ecb7902436e08b041c96b02bb386 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Wed, 13 Apr 2022 21:01:05 +0800
Subject: [PATCH] view the values

---
 src/hooks/useListConfig.ts                  |  8 +++-
 src/hooks/useProcessor.ts                   | 10 ++++-
 src/views/dashboard/graphs/Card.vue         | 18 ++++-----
 src/views/dashboard/graphs/EndpointList.vue |  2 +-
 src/views/dashboard/graphs/InstanceList.vue |  2 +-
 src/views/dashboard/graphs/ServiceList.vue  | 41 ++++++++++++++++++++-
 6 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/src/hooks/useListConfig.ts b/src/hooks/useListConfig.ts
index 14673083..08e7456b 100644
--- a/src/hooks/useListConfig.ts
+++ b/src/hooks/useListConfig.ts
@@ -23,6 +23,12 @@ export function useListConfig(config: any, index: number) {
   const line =
     config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues &&
     calculation !== Calculations.Average;
+  const isAvg =
+    config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues &&
+    calculation === Calculations.Average;
 
-  return { isLinear: line };
+  return {
+    isLinear: line,
+    isAvg,
+  };
 }
diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts
index 6ee86317..84ab0744 100644
--- a/src/hooks/useProcessor.ts
+++ b/src/hooks/useProcessor.ts
@@ -284,7 +284,13 @@ export function usePodsSource(
         d[name] = aggregation(resp.data[key], c);
       }
       if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) {
-        d[name] = calculateExp(resp.data[key].values.values, c);
+        d[name] = {};
+        if (c.calculation === Calculations.Average) {
+          d[name]["avg"] = calculateExp(resp.data[key].values.values, c);
+        }
+        d[name]["values"] = resp.data[key].values.values.map(
+          (val: { value: number }) => aggregation(val.value, c)
+        );
       }
     });
 
@@ -338,7 +344,7 @@ function calculateExp(
   return data;
 }
 
-function aggregation(
+export function aggregation(
   val: number,
   config: { calculation: string }
 ): number | string {
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index 42f95ab6..98b7cb4c 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -17,8 +17,10 @@ limitations under the License. -->
   <div
     v-if="!isNaN(singleVal)"
     class="chart-card"
-    :class="{ center: config.textAlign === 'center' }"
-    :style="{ fontSize: `${config.fontSize}px`, textAlign: config.textAlign }"
+    :style="{
+      fontSize: `${config.fontSize}px`,
+      justifyContent: config.textAlign || 'center',
+    }"
   >
     {{ singleVal.toFixed(2) }}
     <span v-show="config.showUnit">
@@ -52,7 +54,6 @@ const { t } = useI18n();
 const metricConfig = computed(() => props.config.metricConfig || []);
 const key = computed(() => Object.keys(props.data)[0]);
 const singleVal = computed(() => Number(props.data[key.value]));
-console.log(props.data);
 const unit = computed(
   () => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit)
 );
@@ -60,15 +61,10 @@ const unit = computed(
 <style lang="scss" scoped>
 .chart-card {
   color: #333;
+  width: 100%;
   height: 100%;
-}
-
-.center {
-  box-sizing: border-box;
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
-  -webkit-box-align: center;
+  display: flex;
+  align-items: center;
 }
 
 .no-data {
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 7de337b3..c43c7827 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -59,7 +59,7 @@ limitations under the License. -->
                   showXAxis: false,
                   showYAxis: false,
                   smallTips: true,
-                  showSymbol: true,
+                  showlabels: false,
                 }"
               />
               <Card
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 46457718..94dd0716 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -60,7 +60,7 @@ limitations under the License. -->
                   showXAxis: false,
                   showYAxis: false,
                   smallTips: true,
-                  showSymbol: true,
+                  showlabels: false,
                 }"
               />
               <Card
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 455f0667..30046556 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -65,7 +65,9 @@ limitations under the License. -->
             <div class="chart">
               <Line
                 v-if="useListConfig(config, index).isLinear"
-                :data="{ [metric]: scope.row[metric] }"
+                :data="{
+                  [metric]: scope.row[metric] && scope.row[metric].values,
+                }"
                 :intervalTime="intervalTime"
                 :config="{
                   showXAxis: false,
@@ -74,6 +76,35 @@ limitations under the License. -->
                   showlabels: false,
                 }"
               />
+              <el-popover
+                v-else-if="useListConfig(config, index).isAvg"
+                placement="left"
+                :width="400"
+                trigger="click"
+              >
+                <template #reference>
+                  <Card
+                    :data="{
+                      [metric]: scope.row[metric] && scope.row[metric].avg,
+                    }"
+                    :config="{ textAlign: 'left' }"
+                  />
+                </template>
+                <div class="view-line">
+                  <Line
+                    :data="{
+                      [metric]: scope.row[metric] && scope.row[metric].values,
+                    }"
+                    :intervalTime="intervalTime"
+                    :config="{
+                      showXAxis: false,
+                      showYAxis: false,
+                      smallTips: true,
+                      showlabels: false,
+                    }"
+                  />
+                </div>
+              </el-popover>
               <Card
                 v-else
                 :data="{ [metric]: scope.row[metric] }"
@@ -241,6 +272,7 @@ async function queryServiceMetrics(currentServices: Service[]) {
     });
     return;
   }
+  console.log(services.value);
   services.value = currentServices;
 }
 function objectSpanMethod(param: any): any {
@@ -320,10 +352,15 @@ watch(
 @import "./style.scss";
 
 .chart {
-  height: 60px;
+  height: 40px;
 }
 
 .inputs {
   width: 300px;
 }
+
+.view-line {
+  width: 300px;
+  height: 200px;
+}
 </style>