feat: update router and create service list component

src/router/dashboard.ts

@@ -48,9 +48,29 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         },
       },
       {
-        path: "/dashboard/edit/:layerId/:entity/:dashboardId",
+        path: "/dashboard/:layerId/:entity/:name",
         component: () => import("@/views/dashboard/Edit.vue"),
-        name: "Edit",
+        name: "Create",
+        meta: {
+          title: "dashboardEdit",
+          exact: false,
+          notShow: true,
+        },
+      },
+      {
+        path: "/dashboard/:layerId/:entity/:serviceId/:name",
+        component: () => import("@/views/dashboard/Edit.vue"),
+        name: "CreateService",
+        meta: {
+          title: "dashboardEdit",
+          exact: false,
+          notShow: true,
+        },
+      },
+      {
+        path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
+        component: () => import("@/views/dashboard/Edit.vue"),
+        name: "ViewPod",
         meta: {
           title: "dashboardEdit",
           exact: false,

src/views/dashboard/New.vue

@@ -58,7 +58,6 @@ import { useI18n } from "vue-i18n";
 import router from "@/router";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { EntityType } from "./data";
-import uuid from "@/utils/uuid";
 import { ElMessage } from "element-plus";
 
 const { t } = useI18n();
@@ -70,8 +69,8 @@ const states = reactive({
   layers: [],
 });
 const onCreate = () => {
-  const id = uuid();
+  const name = states.name.split(" ").join("-");
-  const path = `/dashboard/edit/${states.selectedLayer}/${states.entity}/${id}`;
+  const path = `/dashboard/${states.selectedLayer}/${states.entity}/${name}`;
   router.push(path);
 };
 onBeforeMount(async () => {

src/views/dashboard/configuration/ConfigEdit.vue

@@ -50,11 +50,7 @@ limitations under the License. -->
             </span>
           </div>
         </el-collapse-item>
-        <el-collapse-item
+        <el-collapse-item :title="t('metricName')" name="2">
-          :title="t('metricName')"
-          name="2"
-          v-show="states.graph.type !== 'InstanceList'"
-        >
           <div>
             <Selector
               :value="states.metrics"

src/views/dashboard/data.ts

@@ -25,6 +25,7 @@ export const ChartTypes = [
   { label: "Card", value: "Card" },
   { label: "Top List", value: "TopList" },
   { label: "Table", value: "Table" },
+  { label: "Service List", value: "ServiceList" },
   { label: "Endpoint List", value: "EndpointList" },
   { label: "Instance List", value: "InstanceList" },
 ];

src/views/dashboard/graphs/InstanceList.vue

@@ -51,7 +51,7 @@ onBeforeMount(async () => {
   }
 });
 function linkInstance(row: any) {
-  const path = `/dashboard/view/${row.layer}/serviceInstance/${selectorStore.currentService}/${row.value}`;
+  const path = `/dashboard/${row.layer}/serviceInstance/${selectorStore.currentService}/${row.value}/test`;
   router.push(path);
 }
 </script>

src/views/dashboard/graphs/ServiceList.vue

@@ -0,0 +1,65 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <el-table
+    :data="selectorStore.services"
+    style="width: 100%; height: 100%; overflow: auto"
+  >
+    <el-table-column label="Services">
+      <template #default="scope">
+        <span class="link" @click="linkService(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: {
+    type: Object,
+  },
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const selectorStore = useSelectorStore();
+
+onBeforeMount(async () => {
+  const resp = await selectorStore.fetchServices();
+
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+  }
+});
+function linkService(row: { layer: string }) {
+  const path = `/dashboard/${row.layer}/service/${selectorStore.currentService}/test`;
+  router.push(path);
+}
+</script>
+<style lang="scss" scoped>
+.link {
+  cursor: pointer;
+  color: #409eff;
+  display: inline-block;
+  width: 100%;
+}
+</style>

src/views/dashboard/graphs/index.ts

@@ -25,6 +25,7 @@ import Pie from "./Pie.vue";
 import Card from "./Card.vue";
 import InstanceList from "./InstanceList.vue";
 import EndpointList from "./EndpointList.vue";
+import ServiceList from "./ServiceList.vue";
 
 export default {
   Line,
@@ -37,4 +38,5 @@ export default {
   Card,
   EndpointList,
   InstanceList,
+  ServiceList,
 };