From 84d689e5d47f44cf47166e4c27343618d258d043 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sat, 22 Jan 2022 14:11:52 +0800
Subject: [PATCH] fix: update topList

---
 .../dashboard/configuration/ConfigEdit.vue    |  1 +
 .../dashboard/configuration/MetricOptions.vue |  3 +-
 src/views/dashboard/graphs/TopList.vue        | 51 +++++++++++--------
 3 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/views/dashboard/configuration/ConfigEdit.vue b/src/views/dashboard/configuration/ConfigEdit.vue
index 0a35b8b4..037b437d 100644
--- a/src/views/dashboard/configuration/ConfigEdit.vue
+++ b/src/views/dashboard/configuration/ConfigEdit.vue
@@ -226,6 +226,7 @@ export default defineComponent({
 
     return {
       states,
+      loading,
       changeChartType,
       t,
       appStoreWithOut,
diff --git a/src/views/dashboard/configuration/MetricOptions.vue b/src/views/dashboard/configuration/MetricOptions.vue
index aca6d744..3c7cecac 100644
--- a/src/views/dashboard/configuration/MetricOptions.vue
+++ b/src/views/dashboard/configuration/MetricOptions.vue
@@ -80,7 +80,8 @@ const props = defineProps({
 });
 const emit = defineEmits(["update", "apply", "loading"]);
 const dashboardStore = useDashboardStore();
-const { selectedGrid, entity, metrics, metricTypes } = dashboardStore;
+const { selectedGrid, entity } = dashboardStore;
+const { metrics, metricTypes } = selectedGrid;
 const states = reactive<{
   metrics: string[];
   metricTypes: string[];
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index 29a7c15b..d22a5773 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -16,21 +16,27 @@ limitations under the License. -->
 <template>
   <div class="top-list">
     <div class="chart-slow-i" v-for="(i, index) in datas" :key="index">
-      <Icon
-        iconName="review-list"
-        size="sm"
-        @click="handleClick((i.traceIds && i.traceIds[0]) || i.name)"
-      />
-      <div class="mb-5 ell">
-        <span class="calls sm mr-10">{{ i.value }}</span>
-        <span class="cp link-hover">
-          {{ i.name + getTraceId(i) }}
-        </span>
+      <div class="ell tools flex-h">
+        <div>
+          <span class="calls mr-10">{{ i.value }}</span>
+          <span class="cp mr-20">
+            {{ i.name + getTraceId(i) }}
+          </span>
+        </div>
+        <div>
+          <Icon
+            iconName="review-list"
+            size="middle"
+            class="cp"
+            @click="handleClick((i.traceIds && i.traceIds[0]) || i.name)"
+          />
+        </div>
       </div>
       <el-progress
-        :stroke-width="10"
+        :stroke-width="6"
         :percentage="(i.value / maxValue) * 100"
         color="#bf99f8"
+        :show-text="false"
       />
     </div>
   </div>
@@ -55,7 +61,7 @@ const props = defineProps({
 });
 const key = computed(() => Object.keys(props.data)[0]);
 const maxValue = computed(() => {
-  if (!props.data[key.value].length) {
+  if (!(props.data[key.value] && props.data[key.value].length)) {
     return 0;
   }
   const temp: number[] = props.data[key.value].map((i: any) => i.value);
@@ -65,7 +71,7 @@ const getTraceId = (i: { [key: string]: (number | string)[] }): string => {
   return i.traceIds && i.traceIds[0] ? ` - ${i.traceIds[0]}` : "";
 };
 const datas = computed(() => {
-  if (!props.data[key.value].length) {
+  if (!(props.data[key.value] && props.data[key.value].length)) {
     return [];
   }
   const { sortOrder } = props.config;
@@ -96,6 +102,10 @@ function handleClick(i: string) {
   padding: 10px;
 }
 
+.tools {
+  justify-content: space-between;
+}
+
 .progress-bar {
   font-size: 12px;
   color: #333;
@@ -107,14 +117,15 @@ function handleClick(i: string) {
 
 .chart-slow {
   height: 100%;
+}
 
-  .calls {
-    padding: 0 5px;
-    display: inline-block;
-    background-color: #40454e;
-    color: #eee;
-    border-radius: 4px;
-  }
+.calls {
+  font-size: 12px;
+  padding: 0 5px;
+  display: inline-block;
+  background-color: #40454e;
+  color: #eee;
+  border-radius: 4px;
 }
 
 .chart-slow-link {