feat: update lists

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`"

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>

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>