From ff29b1314ed7cb602260a4e30777571d30d86df5 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 17 Jan 2022 23:16:16 +0800
Subject: [PATCH] feat: update lists

---
 .../dashboard/configuration/ConfigEdit.vue    | 30 +++++++++++--------
 src/views/dashboard/graphs/EndpointList.vue   | 21 ++++++++++++-
 src/views/dashboard/graphs/InstanceList.vue   | 21 ++++++++++++-
 3 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/src/views/dashboard/configuration/ConfigEdit.vue b/src/views/dashboard/configuration/ConfigEdit.vue
index d4b6078b..727a6aec 100644
--- a/src/views/dashboard/configuration/ConfigEdit.vue
+++ b/src/views/dashboard/configuration/ConfigEdit.vue
@@ -38,7 +38,23 @@ limitations under the License. -->
         v-model="states.activeNames"
         :style="{ '--el-collapse-header-font-size': '15px' }"
       >
-        <el-collapse-item :title="t('metricName')" name="1">
+        <el-collapse-item :title="t('selectVisualization')" name="1">
+          <div class="chart-types">
+            <span
+              v-for="(type, index) in states.visType"
+              :key="index"
+              @click="changeChartType(type)"
+              :class="{ active: type.value === states.graph.type }"
+            >
+              {{ type.label }}
+            </span>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item
+          :title="t('metricName')"
+          name="2"
+          v-show="states.graph.type !== 'InstanceList'"
+        >
           <div>
             <Selector
               :value="states.metrics"
@@ -61,18 +77,6 @@ limitations under the License. -->
             />
           </div>
         </el-collapse-item>
-        <el-collapse-item :title="t('selectVisualization')" name="2">
-          <div class="chart-types">
-            <span
-              v-for="(type, index) in states.visType"
-              :key="index"
-              @click="changeChartType(type)"
-              :class="{ active: type.value === states.graph.type }"
-            >
-              {{ type.label }}
-            </span>
-          </div>
-        </el-collapse-item>
         <el-collapse-item :title="t('graphStyles')" name="3">
           <component
             :is="`${states.graph.type}Config`"
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 4529e8d3..4547f7e5 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -17,13 +17,20 @@ limitations under the License. -->
     :data="selectorStore.endpoints"
     style="width: 100%; height: 100%; overflow: auto"
   >
-    <el-table-column prop="label" label="Endpoints" />
+    <el-table-column label="Endpoints">
+      <template #default="scope">
+        <span class="link" @click="linkInstance(scope.row)">
+          {{ scope.row.label }}
+        </span>
+      </template>
+    </el-table-column>
   </el-table>
 </template>
 <script setup lang="ts">
 import { defineProps, onBeforeMount } from "vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
+import router from "@/router";
 
 defineProps({
   data: {
@@ -43,4 +50,16 @@ onBeforeMount(async () => {
     ElMessage.error(resp.errors);
   }
 });
+function linkInstance(row: any) {
+  const path = `/dashboard/view/${row.layer}/endpoint/${selectorStore.currentService}/${row.value}`;
+  router.push(path);
+}
 </script>
+<style lang="scss" scoped>
+.link {
+  cursor: pointer;
+  color: #409eff;
+  display: inline-block;
+  width: 100%;
+}
+</style>
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 52505196..10f17d51 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -17,13 +17,20 @@ limitations under the License. -->
     :data="selectorStore.instances"
     style="width: 100%; height: 100%; overflow: auto"
   >
-    <el-table-column prop="label" label="Service Instances" />
+    <el-table-column label="Service Instances">
+      <template #default="scope">
+        <span class="link" @click="linkInstance(scope.row)">
+          {{ scope.row.label }}
+        </span>
+      </template>
+    </el-table-column>
   </el-table>
 </template>
 <script setup lang="ts">
 import { defineProps, onBeforeMount } from "vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
+import router from "@/router";
 
 defineProps({
   data: {
@@ -43,4 +50,16 @@ onBeforeMount(async () => {
     ElMessage.error(resp.errors);
   }
 });
+function linkInstance(row: any) {
+  const path = `/dashboard/view/${row.layer}/serviceInstance/${selectorStore.currentService}/${row.value}`;
+  router.push(path);
+}
 </script>
+<style lang="scss" scoped>
+.link {
+  cursor: pointer;
+  color: #409eff;
+  display: inline-block;
+  width: 100%;
+}
+</style>