From 59b4c2ad29dc6513a28fa546d2bd209c14f8f156 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Fri, 25 Mar 2022 21:55:41 +0800
Subject: [PATCH] update list metrics

---
 src/views/dashboard/configuration/Widget.vue        |  2 +-
 .../configuration/widget/metric/Standard.vue        |  8 ++++----
 src/views/dashboard/controls/Widget.vue             |  2 +-
 src/views/dashboard/graphs/Card.vue                 | 13 ++++++-------
 src/views/dashboard/graphs/EndpointList.vue         |  9 +++++++--
 src/views/dashboard/graphs/InstanceList.vue         |  9 +++++++--
 src/views/dashboard/graphs/ServiceList.vue          | 11 ++++-------
 7 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index 402cf111..84fc4177 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -36,7 +36,7 @@ limitations under the License. -->
             i: dashboardStore.selectedGrid.i,
             metrics: dashboardStore.selectedGrid.metrics,
             metricTypes: dashboardStore.selectedGrid.metricTypes,
-            standard: dashboardStore.selectedGrid.standard,
+            metricConfig: dashboardStore.selectedGrid.metricConfig,
           }"
           :isEdit="isEdit"
           @changeOpt="setStatus"
diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index 1569b262..560a6cf8 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -31,7 +31,7 @@ limitations under the License. -->
       />
     </div>
     <div class="item mb-10">
-      <span class="label">{{ t("metricLabel") }}</span>
+      <span class="label">{{ t("labels") }}</span>
       <el-input
         class="input"
         v-model="currentMetric.label"
@@ -60,7 +60,7 @@ limitations under the License. -->
         size="small"
         placeholder="Select a option"
         @change="changeConfigs(index, { calculation: $event[0].value })"
-        class="aggregation"
+        class="selectors"
         :clearable="true"
       />
     </div>
@@ -71,7 +71,7 @@ limitations under the License. -->
         :options="SortOrder"
         size="small"
         placeholder="Select a sort order"
-        class="aggregation"
+        class="selectors"
         @change="changeConfigs(index, { sortOrder: $event[0].value })"
       />
     </div>
@@ -130,7 +130,7 @@ function closePopper() {
   right: -15px;
 }
 
-.aggregation {
+.selectors {
   width: 365px;
 }
 </style>
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index cffb9621..2d71bf22 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -64,8 +64,8 @@ limitations under the License. -->
           metrics: data.metrics,
           metricTypes: data.metricTypes,
           i: data.i,
+          metricConfig: data.metricConfig,
         }"
-        :standard="data.metricConfig"
         :needQuery="needQuery"
       />
     </div>
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index 58baa321..cff1a47f 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -26,11 +26,13 @@ limitations under the License. -->
         ? null
         : singleVal.toFixed(2)
     }}
-    <span v-show="config.showUint">{{ standard.unit }}</span>
+    <span v-show="config.showUint">
+      <i v-for="(m, index) in metricConfig" :key="index">{{ m.unit }}</i>
+    </span>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, PropType } from "vue";
+import { computed, PropType, ref } from "vue";
 import { CardConfig, MetricConfigOpt } from "@/types/dashboard";
 
 /*global defineProps */
@@ -40,14 +42,11 @@ const props = defineProps({
     default: () => ({}),
   },
   config: {
-    type: Object as PropType<CardConfig>,
+    type: Object as PropType<CardConfig & { metricConfig?: MetricConfigOpt[] }>,
     default: () => ({ fontSize: 12, showUint: true, textAlign: "center" }),
   },
-  standard: {
-    type: Object as PropType<MetricConfigOpt>,
-    default: () => ({ unit: "" }),
-  },
 });
+const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
 const key = computed(() => Object.keys(props.data)[0]);
 const singleVal = computed(() => props.data[key.value]);
 </script>
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index a8d4c35b..442d0062 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -92,6 +92,7 @@ import Card from "./Card.vue";
 import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";
+import { MetricConfigOpt } from "@/types/dashboard";
 
 /*global defineProps */
 const props = defineProps({
@@ -104,7 +105,7 @@ const props = defineProps({
         i: string;
         metrics: string[];
         metricTypes: string[];
-      }
+      } & { metricConfig: MetricConfigOpt[] }
     >,
     default: () => ({ dashboardName: "", fontSize: 12, i: "" }),
   },
@@ -119,6 +120,7 @@ const endpoints = ref<Endpoint[]>([]);
 const pageSize = 5;
 const total = 10;
 const searchText = ref<string>("");
+const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
 
 queryEndpoints(total);
 
@@ -155,7 +157,10 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
       ElMessage.error(json.errors);
       return;
     }
-    endpoints.value = usePodsSource(currentPods, json, props.config);
+    endpoints.value = usePodsSource(currentPods, json, {
+      ...props.config,
+      metricConfig: metricConfig.value,
+    });
     return;
   }
   endpoints.value = currentPods;
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index b2c7aa7d..8799c645 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -112,6 +112,7 @@ import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";
+import { MetricConfigOpt } from "@/types/dashboard";
 
 /*global defineProps */
 const props = defineProps({
@@ -122,7 +123,7 @@ const props = defineProps({
         metrics: string[];
         metricTypes: string[];
         isEdit: boolean;
-      }
+      } & { metricConfig: MetricConfigOpt[] }
     >,
     default: () => ({
       dashboardName: "",
@@ -144,6 +145,7 @@ const instances = ref<Instance[]>([]); // current instances
 const searchInstances = ref<Instance[]>([]); // all instances
 const pageSize = 5;
 const searchText = ref<string>("");
+const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
 
 queryInstance();
 async function queryInstance() {
@@ -180,7 +182,10 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
       ElMessage.error(json.errors);
       return;
     }
-    instances.value = usePodsSource(currentInstances, json, props.config);
+    instances.value = usePodsSource(currentInstances, json, {
+      ...props.config,
+      metricConfig: metricConfig.value,
+    });
     return;
   }
   instances.value = currentInstances;
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 64cdea8a..2aea5d2f 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -118,16 +118,12 @@ const props = defineProps({
         metrics: string[];
         metricTypes: string[];
         isEdit: boolean;
-      }
+      } & { metricConfig: MetricConfigOpt[] }
     >,
     default: () => ({ dashboardName: "", fontSize: 12 }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
   isEdit: { type: Boolean, default: false },
-  standard: {
-    type: Object as PropType<MetricConfigOpt[]>,
-    default: () => ({ unit: "" }),
-  },
 });
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
@@ -137,6 +133,7 @@ const services = ref<Service[]>([]);
 const searchText = ref<string>("");
 const groups = ref<any>({});
 const sortServices = ref<(Service & { merge: boolean })[]>([]);
+const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
 
 queryServices();
 
@@ -206,7 +203,7 @@ async function queryServiceMetrics(currentServices: Service[]) {
     return;
   }
   const { metrics } = props.config;
-  console.log(props.config);
+
   if (metrics.length && metrics[0]) {
     const params = await useQueryPodsMetrics(
       currentServices,
@@ -221,7 +218,7 @@ async function queryServiceMetrics(currentServices: Service[]) {
     }
     services.value = usePodsSource(currentServices, json, {
       ...props.config,
-      metricConfig: props.standard || [],
+      metricConfig: metricConfig.value || [],
     });
     return;
   }