feat: add router for dashboard

src/locales/lang/en.ts

@@ -44,6 +44,7 @@ const msg = {
   databasePanel: "Database Panel",
   meshServicePanel: "Service Panel",
   newDashboard: "New a dashboard",
+  dashboardEdit: "Edit the dashboard",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -44,6 +44,7 @@ const msg = {
   databasePanel: "数据库面板",
   meshServicePanel: "服务面板",
   newDashboard: "新增仪表盘",
+  dashboardEdit: "编辑仪表盘",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/router/dashboard.ts

@@ -47,6 +47,36 @@ export const routesDashboard: Array<RouteRecordRaw> = [
           exact: false,
         },
       },
+      {
+        path: "/dashboard/edit/service/:serviceId",
+        component: () => import("@/views/dashboard/Edit.vue"),
+        name: "serviceEdit",
+        meta: {
+          title: "dashboardEdit",
+          exact: false,
+          notShow: true,
+        },
+      },
+      {
+        path: "/dashboard/edit/endpoint/:serviceId/:endpointId",
+        component: () => import("@/views/dashboard/Edit.vue"),
+        name: "endpointEdit",
+        meta: {
+          title: "dashboardEdit",
+          exact: false,
+          notShow: true,
+        },
+      },
+      {
+        path: "/dashboard/edit/instance/:serviceId/:instanceId",
+        component: () => import("@/views/dashboard/Edit.vue"),
+        name: "instanceEdit",
+        meta: {
+          title: "dashboardEdit",
+          exact: false,
+          notShow: true,
+        },
+      },
     ],
   },
 ];

src/router/index.ts

@@ -46,7 +46,7 @@ const router = createRouter({
 (window as any).axiosCancel = [];
 
 router.beforeEach((to, from, next) => {
-  const token = window.localStorage.getItem("skywalking-authority");
+  // const token = window.localStorage.getItem("skywalking-authority");
   if ((window as any).axiosCancel.length !== 0) {
     for (const func of (window as any).axiosCancel) {
       setTimeout(func(), 0);

src/views/dashboard/Edit.vue

@@ -0,0 +1 @@
+<template>dashboard edit</template>

src/views/dashboard/New.vue

@@ -57,7 +57,7 @@ limitations under the License. -->
         </el-option>
       </el-select>
     </div>
-    <div class="item" v-show="state.entity === 'Service'">
+    <div class="item" v-show="state.entity === EntityType[0].value">
       <div class="label">Service</div>
       <el-select
         size="small"
@@ -74,7 +74,7 @@ limitations under the License. -->
         </el-option>
       </el-select>
     </div>
-    <div class="item" v-show="state.entity === 'Endpoint'">
+    <div class="item" v-show="state.entity === EntityType[2].value">
       <div class="label">Service / Endpoint</div>
       <el-cascader
         v-model="state.serviceEndpoint"
@@ -85,7 +85,7 @@ limitations under the License. -->
         :style="{ width: '600px' }"
       ></el-cascader>
     </div>
-    <div class="item" v-show="state.entity === 'ServiceInstance'">
+    <div class="item" v-show="state.entity === EntityType[3].value">
       <div class="label">Service / Instance</div>
       <el-cascader
         v-model="state.serviceInstance"
@@ -96,7 +96,7 @@ limitations under the License. -->
         :style="{ width: '600px' }"
       ></el-cascader>
     </div>
-    <div class="item" v-show="state.entity === 'ServiceRelation'">
+    <div class="item" v-show="state.entity === EntityType[4].value">
       <div class="label">Destination Service</div>
       <el-select
         size="small"
@@ -113,7 +113,7 @@ limitations under the License. -->
         </el-option>
       </el-select>
     </div>
-    <div class="item" v-show="state.entity === 'EndpointRelation'">
+    <div class="item" v-show="state.entity === EntityType[5].value">
       <span class="label">Destination Service / Endpoint</span>
       <el-cascader
         v-model="state.destServiceEndpoint"
@@ -123,7 +123,7 @@ limitations under the License. -->
         :style="{ width: '600px' }"
       ></el-cascader>
     </div>
-    <div class="item" v-show="state.entity === 'ServiceInstanceRelation'">
+    <div class="item" v-show="state.entity === EntityType[6].value">
       <span class="label">Destination Service / Instance</span>
       <el-cascader
         v-model="state.destServiceInstance"
@@ -142,6 +142,7 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { reactive } from "vue";
+import router from "@/router";
 import {
   ElSelect,
   ElOption,
@@ -171,7 +172,19 @@ const handleChange = (value: any) => {
   console.log(value);
 };
 const onCreate = () => {
-  console.log(state);
+  let path = `/dashboard/edit/${state.entity}/`;
+  switch (state.entity) {
+    case EntityType[0].value:
+      path += state.service;
+      break;
+    case EntityType[2].value:
+      path += `${state.service}/${state.serviceEndpoint}`;
+      break;
+    case EntityType[3].value:
+      path += `${state.service}/${state.serviceInstance}`;
+      break;
+  }
+  router.push(path);
 };
 selectorStore.fetchServices("general");
 </script>

src/views/dashboard/data.ts

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 export const EntityType = [
-  { value: "Service", label: "Service" },
+  { value: "service", label: "Service" },
-  { value: "All", label: "All" },
+  { value: "all", label: "All" },
-  { value: "Endpoint", label: "Service Endpoint" },
+  { value: "endpoint", label: "Service Endpoint" },
-  { value: "ServiceInstance", label: "Service Instance" },
+  { value: "serviceInstance", label: "Service Instance" },
-  { value: "ServiceRelation", label: "Service Relation" },
+  { value: "serviceRelation", label: "Service Relation" },
-  { value: "ServiceInstanceRelation", label: "Service Instance Relation" },
+  { value: "serviceInstanceRelation", label: "Service Instance Relation" },
-  { value: "EndpointRelation", label: "Endpoint Relation" },
+  { value: "endpointRelation", label: "Endpoint Relation" },
 ];
 export const SelectOpt = [
   {