From 11dc1813068e24ed66c3b256c08227697cd20d79 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 14 Apr 2022 12:59:10 +0800
Subject: [PATCH] add component

---
 src/hooks/useListConfig.ts                    |  11 +-
 src/views/dashboard/graphs/EndpointList.vue   |  57 +------
 src/views/dashboard/graphs/InstanceList.vue   |  60 +------
 src/views/dashboard/graphs/ServiceList.vue    | 125 +-------------
 .../graphs/components/MetricGraph.vue         | 161 ++++++++++++++++++
 5 files changed, 185 insertions(+), 229 deletions(-)
 create mode 100644 src/views/dashboard/graphs/components/MetricGraph.vue

diff --git a/src/hooks/useListConfig.ts b/src/hooks/useListConfig.ts
index e48e9edd..47e7269e 100644
--- a/src/hooks/useListConfig.ts
+++ b/src/hooks/useListConfig.ts
@@ -15,16 +15,17 @@
  * limitations under the License.
  */
 import { MetricQueryTypes, Calculations } from "./data";
-export function useListConfig(config: any, index: number) {
+export function useListConfig(config: any, index: string) {
+  const i = Number(index);
   const calculation =
     config.metricConfig &&
-    config.metricConfig[index] &&
-    config.metricConfig[index].calculation;
+    config.metricConfig[i] &&
+    config.metricConfig[i].calculation;
   const line =
-    config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues &&
+    config.metricTypes[i] === MetricQueryTypes.ReadMetricsValues &&
     calculation !== Calculations.Average;
   const isAvg =
-    config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues &&
+    config.metricTypes[i] === MetricQueryTypes.ReadMetricsValues &&
     calculation === Calculations.Average;
   return {
     isLinear: line,
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index c43c7827..9bc86313 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -42,34 +42,11 @@ limitations under the License. -->
             </span>
           </template>
         </el-table-column>
-        <el-table-column
-          v-for="(metric, index) in colMetrics"
-          :label="`${decodeURIComponent(
-            getLabel(metric, index)
-          )} ${decodeURIComponent(getUnit(index))}`"
-          :key="metric + index"
-        >
-          <template #default="scope">
-            <div class="chart">
-              <Line
-                v-if="useListConfig(config, index).isLinear"
-                :data="{ [metric]: scope.row[metric] }"
-                :intervalTime="intervalTime"
-                :config="{
-                  showXAxis: false,
-                  showYAxis: false,
-                  smallTips: true,
-                  showlabels: false,
-                }"
-              />
-              <Card
-                v-else
-                :data="{ [metric]: scope.row[metric] }"
-                :config="{ textAlign: 'left' }"
-              />
-            </div>
-          </template>
-        </el-table-column>
+        <MetricGraph
+          :intervalTime="intervalTime"
+          :colMetrics="colMetrics"
+          :config="config"
+        />
       </el-table>
     </div>
   </div>
@@ -83,13 +60,11 @@ import { EndpointListConfig } from "@/types/dashboard";
 import { Endpoint } from "@/types/selector";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
-import { useListConfig } from "@/hooks/useListConfig";
-import Line from "./Line.vue";
-import Card from "./Card.vue";
 import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { MetricConfigOpt } from "@/types/dashboard";
+import MetricGraph from "./components/MetricGraph.vue";
 
 /*global defineProps */
 const props = defineProps({
@@ -185,26 +160,6 @@ function clickEndpoint(scope: any) {
 async function searchList() {
   await queryEndpoints();
 }
-function getUnit(index: number) {
-  const u =
-    props.config.metricConfig &&
-    props.config.metricConfig[index] &&
-    props.config.metricConfig[index].unit;
-  if (u) {
-    return `(${encodeURIComponent(u)})`;
-  }
-  return encodeURIComponent("");
-}
-function getLabel(metric: string, index: number) {
-  const label =
-    props.config.metricConfig &&
-    props.config.metricConfig[index] &&
-    props.config.metricConfig[index].label;
-  if (label) {
-    return encodeURIComponent(label);
-  }
-  return encodeURIComponent(metric);
-}
 watch(
   () => [...(props.config.metricTypes || []), ...(props.config.metrics || [])],
   (data, old) => {
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 94dd0716..8a572eb2 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -42,35 +42,11 @@ limitations under the License. -->
             </span>
           </template>
         </el-table-column>
-        <el-table-column
-          v-for="(metric, index) in colMetrics"
-          :label="`${decodeURIComponent(
-            getLabel(metric, index)
-          )} ${decodeURIComponent(getUnit(index))}`"
-          :key="metric + index"
-          min-width="120"
-        >
-          <template #default="scope">
-            <div class="chart">
-              <Line
-                v-if="useListConfig(config, index).isLinear"
-                :data="metric ? { [metric]: scope.row[metric] } : {}"
-                :intervalTime="intervalTime"
-                :config="{
-                  showXAxis: false,
-                  showYAxis: false,
-                  smallTips: true,
-                  showlabels: false,
-                }"
-              />
-              <Card
-                v-else
-                :data="{ [metric]: scope.row[metric] }"
-                :config="{ textAlign: 'left' }"
-              />
-            </div>
-          </template>
-        </el-table-column>
+        <MetricGraph
+          :intervalTime="intervalTime"
+          :colMetrics="colMetrics"
+          :config="config"
+        />
         <el-table-column label="Attributes">
           <template #default="scope">
             <el-popover placement="left" :width="400" trigger="click">
@@ -110,8 +86,6 @@ import { ref, watch, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
-import Line from "./Line.vue";
-import Card from "./Card.vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { InstanceListConfig } from "@/types/dashboard";
@@ -121,7 +95,7 @@ import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { MetricConfigOpt } from "@/types/dashboard";
-import { useListConfig } from "@/hooks/useListConfig";
+import MetricGraph from "./components/MetricGraph.vue";
 
 /*global defineProps */
 const props = defineProps({
@@ -237,28 +211,6 @@ function searchList() {
   queryInstanceMetrics(instances.value);
 }
 
-function getUnit(index: number) {
-  const u =
-    props.config.metricConfig &&
-    props.config.metricConfig[index] &&
-    props.config.metricConfig[index].unit;
-  if (u) {
-    return `(${encodeURIComponent(u)})`;
-  }
-  return encodeURIComponent("");
-}
-
-function getLabel(metric: string, index: number) {
-  const label =
-    props.config.metricConfig &&
-    props.config.metricConfig[index] &&
-    props.config.metricConfig[index].label;
-  if (label) {
-    return encodeURIComponent(label);
-  }
-  return encodeURIComponent(metric);
-}
-
 watch(
   () => [...(props.config.metricTypes || []), ...(props.config.metrics || [])],
   (data, old) => {
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index c8e53466..6fa5634d 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -54,74 +54,11 @@ limitations under the License. -->
             </span>
           </template>
         </el-table-column>
-        <el-table-column
-          v-for="(metric, index) in colMetrics"
-          :label="`${decodeURIComponent(
-            getLabel(metric, index)
-          )} ${decodeURIComponent(getUnit(index))}`"
-          :key="metric + index"
-        >
-          <template #default="scope">
-            <div class="chart">
-              <Line
-                v-if="useListConfig(config, index).isLinear"
-                :data="{
-                  [metric]: scope.row[metric] && scope.row[metric].values,
-                }"
-                :intervalTime="intervalTime"
-                :config="{
-                  showXAxis: false,
-                  showYAxis: false,
-                  smallTips: true,
-                  showlabels: false,
-                }"
-              />
-              <span
-                class="item flex-h"
-                v-else-if="useListConfig(config, index).isAvg"
-              >
-                <el-popover placement="left" :width="400" trigger="click">
-                  <template #reference>
-                    <span class="trend">
-                      <Icon
-                        iconName="timeline"
-                        size="middle"
-                        style="color: #409eff"
-                      />
-                    </span>
-                  </template>
-                  <div class="view-line">
-                    <Line
-                      :data="{
-                        [metric]: scope.row[metric] && scope.row[metric].values,
-                      }"
-                      :intervalTime="intervalTime"
-                      :config="{
-                        showXAxis: true,
-                        showYAxis: true,
-                        smallTips: false,
-                        showlabels: true,
-                      }"
-                    />
-                  </div>
-                </el-popover>
-                <span class="value">
-                  <Card
-                    :data="{
-                      [metric]: scope.row[metric] && scope.row[metric].avg,
-                    }"
-                    :config="{ textAlign: 'left' }"
-                  />
-                </span>
-              </span>
-              <Card
-                v-else
-                :data="{ [metric]: scope.row[metric] }"
-                :config="{ textAlign: 'left' }"
-              />
-            </div>
-          </template>
-        </el-table-column>
+        <MetricGraph
+          :intervalTime="intervalTime"
+          :colMetrics="colMetrics"
+          :config="config"
+        />
       </el-table>
     </div>
     <el-pagination
@@ -142,17 +79,15 @@ import { watch, ref, computed } from "vue";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
 import { ServiceListConfig } from "@/types/dashboard";
-import Line from "./Line.vue";
-import Card from "./Card.vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { Service } from "@/types/selector";
 import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
-import { useListConfig } from "@/hooks/useListConfig";
 import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { MetricConfigOpt } from "@/types/dashboard";
+import MetricGraph from "./components/MetricGraph.vue";
 
 /*global defineProps */
 const props = defineProps({
@@ -317,26 +252,6 @@ function searchList() {
   );
   setServices(services);
 }
-function getUnit(index: number) {
-  const u =
-    props.config.metricConfig &&
-    props.config.metricConfig[index] &&
-    props.config.metricConfig[index].unit;
-  if (u) {
-    return `(${encodeURIComponent(u)})`;
-  }
-  return encodeURIComponent("");
-}
-function getLabel(metric: string, index: number) {
-  const label =
-    props.config.metricConfig &&
-    props.config.metricConfig[index] &&
-    props.config.metricConfig[index].label;
-  if (label) {
-    return encodeURIComponent(label);
-  }
-  return encodeURIComponent(metric);
-}
 
 watch(
   () => [...(props.config.metricTypes || []), ...(props.config.metrics || [])],
@@ -360,35 +275,7 @@ watch(
 <style lang="scss" scoped>
 @import "./style.scss";
 
-.chart {
-  height: 40px;
-}
-
 .inputs {
   width: 300px;
 }
-
-.view-line {
-  width: 380px;
-  height: 200px;
-}
-
-.item {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-}
-
-.trend {
-  width: 30px;
-  display: inline-block;
-  height: 100%;
-  cursor: pointer;
-}
-
-.value {
-  display: inline-block;
-  width: calc(100% - 30px);
-  height: 100%;
-}
 </style>
diff --git a/src/views/dashboard/graphs/components/MetricGraph.vue b/src/views/dashboard/graphs/components/MetricGraph.vue
new file mode 100644
index 00000000..7801f6e4
--- /dev/null
+++ b/src/views/dashboard/graphs/components/MetricGraph.vue
@@ -0,0 +1,161 @@
+<!-- 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>
+  <el-table-column
+    v-for="(metric, index) in colMetrics"
+    :label="`${decodeURIComponent(
+      getLabel(metric, index)
+    )} ${decodeURIComponent(getUnit(index))}`"
+    :key="metric + index"
+  >
+    <template #default="scope">
+      <div class="chart">
+        <Line
+          v-if="useListConfig(config, index).isLinear"
+          :data="{
+            [metric]: scope.row[metric] && scope.row[metric].values,
+          }"
+          :intervalTime="intervalTime"
+          :config="{
+            showXAxis: false,
+            showYAxis: false,
+            smallTips: true,
+            showlabels: false,
+          }"
+        />
+        <span
+          class="item flex-h"
+          v-else-if="useListConfig(config, index).isAvg"
+        >
+          <el-popover placement="left" :width="400" trigger="click">
+            <template #reference>
+              <span class="trend">
+                <Icon
+                  iconName="timeline"
+                  size="middle"
+                  style="color: #409eff"
+                />
+              </span>
+            </template>
+            <div class="view-line">
+              <Line
+                :data="{
+                  [metric]: scope.row[metric] && scope.row[metric].values,
+                }"
+                :intervalTime="intervalTime"
+                :config="{
+                  showXAxis: true,
+                  showYAxis: true,
+                  smallTips: false,
+                  showlabels: true,
+                }"
+              />
+            </div>
+          </el-popover>
+          <span class="value">
+            <Card
+              :data="{
+                [metric]: scope.row[metric] && scope.row[metric].avg,
+              }"
+              :config="{ textAlign: 'left' }"
+            />
+          </span>
+        </span>
+        <Card
+          v-else
+          :data="{ [metric]: scope.row[metric] }"
+          :config="{ textAlign: 'left' }"
+        />
+      </div>
+    </template>
+  </el-table-column>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import { MetricConfigOpt } from "@/types/dashboard";
+import { useListConfig } from "@/hooks/useListConfig";
+import Line from "../Line.vue";
+import Card from "../Card.vue";
+
+/*global defineProps */
+const props = defineProps({
+  colMetrics: { type: Object },
+  config: {
+    type: Object as PropType<
+      {
+        i: string;
+        metrics: string[];
+        metricTypes: string[];
+      } & { metricConfig: MetricConfigOpt[] }
+    >,
+    default: () => ({}),
+  },
+  intervalTime: { type: Array as PropType<string[]>, default: () => [] },
+});
+
+function getUnit(index: string) {
+  const i = Number(index);
+  const u =
+    props.config.metricConfig &&
+    props.config.metricConfig[i] &&
+    props.config.metricConfig[i].unit;
+  if (u) {
+    return `(${encodeURIComponent(u)})`;
+  }
+  return encodeURIComponent("");
+}
+function getLabel(metric: string, index: string) {
+  const i = Number(index);
+  const label =
+    props.config.metricConfig &&
+    props.config.metricConfig[i] &&
+    props.config.metricConfig[i].label;
+  if (label) {
+    return encodeURIComponent(label);
+  }
+  return encodeURIComponent(metric);
+}
+</script>
+<style lang="scss" scoped>
+.chart {
+  height: 40px;
+}
+
+.view-line {
+  width: 380px;
+  height: 200px;
+}
+
+.item {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+.trend {
+  width: 30px;
+  display: inline-block;
+  height: 100%;
+  cursor: pointer;
+}
+
+.value {
+  display: inline-block;
+  width: calc(100% - 30px);
+  height: 100%;
+}
+</style>