From fe4655bc3feccdd866060dd572698085a6ccafaf Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 24 Mar 2022 20:22:25 +0800
Subject: [PATCH] update instance

---
 src/locales/lang/en.ts                      |  2 +-
 src/locales/lang/zh.ts                      |  2 +-
 src/views/dashboard/graphs/InstanceList.vue | 37 ++++++++++++---------
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 7a24c84b..08cf4bbf 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -306,7 +306,7 @@ const msg = {
   keywordsOfContentLogTips:
     "Current storage of SkyWalking OAP server does not support this.",
   setEvent: "Set Event",
-  instanceAttributes: "Instance Attributes",
+  viewAttributes: "View Attributes",
   serviceEvents: "Service Events",
   select: "Select",
   eventID: "Event ID",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index ad575085..3b01a719 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -305,7 +305,7 @@ const msg = {
     "只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
   keywordsOfContentLogTips: "SkyWalking OAP服务器的当前存储不支持此操作",
   setEvent: "设置事件",
-  instanceAttributes: "实例属性",
+  viewAttributes: "实例属性",
   serviceEvents: "服务事件",
   select: "选择",
   eventID: "事件ID",
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index f7af803e..b2c7aa7d 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -42,20 +42,6 @@ limitations under the License. -->
             </span>
           </template>
         </el-table-column>
-        <el-table-column label="Attributes">
-          <template #default="scope">
-            <div class="attributes" v-if="scope.row.attributes.length">
-              <div
-                v-for="(attr, index) in scope.row.attributes"
-                :key="attr.name + index"
-                :style="{ fontSize: `${config.fontSize}px` }"
-              >
-                {{ attr.name }}: {{ attr.value || null }}
-              </div>
-            </div>
-            <div v-else>No Data</div>
-          </template>
-        </el-table-column>
         <el-table-column
           v-for="(metric, index) in config.metrics"
           :label="metric"
@@ -77,6 +63,25 @@ limitations under the License. -->
             </div>
           </template>
         </el-table-column>
+        <el-table-column label="Attributes" :width="100">
+          <template #default="scope">
+            <el-popover placement="left" :width="400" trigger="click">
+              <template #reference>
+                <span class="link">{{ t("viewAttributes") }}</span>
+              </template>
+              <div class="attributes" v-if="scope.row.attributes.length">
+                <div
+                  v-for="(attr, index) in scope.row.attributes"
+                  :key="attr.name + index"
+                  :style="{ fontSize: `${config.fontSize}px` }"
+                  class="mt-5"
+                >
+                  {{ attr.name }}: {{ attr.value || null }}
+                </div>
+              </div>
+            </el-popover>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
     <el-pagination
@@ -94,6 +99,7 @@ limitations under the License. -->
 </template>
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
 import Line from "./Line.vue";
@@ -130,6 +136,7 @@ const props = defineProps({
   needQuery: { type: Boolean, default: false },
   isEdit: { type: Boolean, default: false },
 });
+const { t } = useI18n();
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
@@ -232,7 +239,7 @@ watch(
 }
 
 .attributes {
-  max-height: 80px;
+  max-height: 400px;
   overflow: auto;
 }
 </style>