From 5940dccdb61c1cf2ccb6a296d01071ad084c50a4 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Wed, 15 Jun 2022 17:29:42 +0800
Subject: [PATCH] fix list widgets

---
 src/views/dashboard/graphs/EndpointList.vue | 7 +++++--
 src/views/dashboard/graphs/InstanceList.vue | 8 ++++++--
 src/views/dashboard/graphs/ServiceList.vue  | 6 ++++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 5ab1b95f..b8d7aa22 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -46,6 +46,7 @@ limitations under the License. -->
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
           :config="config"
+          v-if="colMetrics.length"
         />
       </el-table>
     </div>
@@ -96,7 +97,9 @@ const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const endpoints = ref<Endpoint[]>([]);
 const searchText = ref<string>("");
-const colMetrics = computed(() => props.config.metrics.map((d: string) => d));
+const colMetrics = computed(() =>
+  (props.config.metrics || []).filter((d: string) => d)
+);
 
 if (props.needQuery) {
   queryEndpoints();
@@ -119,7 +122,7 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
   if (!currentPods.length) {
     return;
   }
-  const metrics = (props.config.metrics || []).filter((d: string) => d);
+  const metrics = props.config.metrics || [];
   const metricTypes = props.config.metricTypes || [];
   if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 794b8804..bceeb910 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -43,6 +43,7 @@ limitations under the License. -->
           </template>
         </el-table-column>
         <ColumnGraph
+          v-if="colMetrics.length"
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
           :config="config"
@@ -126,7 +127,9 @@ const chartLoading = ref<boolean>(false);
 const instances = ref<Instance[]>([]); // current instances
 const pageSize = 10;
 const searchText = ref<string>("");
-const colMetrics = computed(() => props.config.metrics.map((d: string) => d));
+const colMetrics = computed(() =>
+  (props.config.metrics || []).filter((d: string) => d)
+);
 if (props.needQuery) {
   queryInstance();
 }
@@ -151,7 +154,8 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
   if (!currentInstances.length) {
     return;
   }
-  const { metrics, metricTypes } = props.config;
+  const metrics = props.config.metrics || [];
+  const metricTypes = props.config.metricTypes || [];
 
   if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index c0b393fa..0a4678d2 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -58,6 +58,7 @@ limitations under the License. -->
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
           :config="config"
+          v-if="colMetrics.length"
         />
       </el-table>
     </div>
@@ -117,7 +118,7 @@ const searchText = ref<string>("");
 const groups = ref<any>({});
 const sortServices = ref<(Service & { merge: boolean })[]>([]);
 const colMetrics = computed(() =>
-  props.config.metrics.filter((d: string) => d)
+  (props.config.metrics || []).filter((d: string) => d)
 );
 queryServices();
 
@@ -195,7 +196,8 @@ async function queryServiceMetrics(currentServices: Service[]) {
   if (!currentServices.length) {
     return;
   }
-  const { metrics, metricTypes } = props.config;
+  const metrics = props.config.metrics || [];
+  const metricTypes = props.config.metricTypes || [];
 
   if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(