update menu data

src/constants/data.ts

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 export enum TimeType {
   MINUTE_TIME = "MINUTE",
   HOUR_TIME = "HOUR",
@@ -25,35 +26,3 @@ export const Languages = [
   { label: "Chinese", value: "zh" },
   { label: "Spanish", value: "es" },
 ];
-
-export const RoutesMap: { [key: string]: string } = {
-  GeneralServices: "GENERAL",
-  GeneralServicesActiveTabIndex: "GENERAL",
-  VirtualDatabase: "VIRTUAL_DATABASE",
-  VirtualDatabaseActiveTabIndex: "VIRTUAL_DATABASE",
-  VirtualCache: "VIRTUAL_CACHE",
-  VirtualCacheActiveTabIndex: "VIRTUAL_CACHE",
-  MeshServices: "MESH",
-  MeshServicesActiveTabIndex: "MESH",
-  ControlPanel: "MESH_CP",
-  ControlPanelActiveTabIndex: "MESH_CP",
-  DataPanel: "MESH_DP",
-  DataPanelActiveTabIndex: "MESH_DP",
-  Linux: "OS_LINUX",
-  SkyWalkingServer: "SO11Y_OAP",
-  SkyWalkingServerActiveTabIndex: "SO11Y_OAP",
-  SatelliteActiveTabIndex: "SO11Y_SATELLITE",
-  Satellite: "SO11Y_SATELLITE",
-  Functions: "FAAS",
-  FunctionsActiveTabIndex: "FAAS",
-  Browser: "BROWSER",
-  BrowserActiveTabIndex: "BROWSER",
-  KubernetesCluster: "K8S",
-  KubernetesClusterActiveTabIndex: "K8S",
-  KubernetesService: "K8S_SERVICE",
-  KubernetesServiceActiveTabIndex: "K8S_SERVICE",
-  MySQL: "MYSQL",
-  MySQLActiveTabIndex: "MYSQL",
-  PostgreSQL: "POSTGRESQL",
-  PostgreSQLActiveTabIndex: "POSTGRESQL",
-};

src/router/alarm.ts

@@ -25,7 +25,6 @@ export const routesAlarm: Array<RouteRecordRaw> = [
       title: "alarm",
       icon: "spam",
       hasGroup: false,
-      exact: true,
     },
     component: Layout,
     children: [

src/router/dashboard.ts

@@ -26,7 +26,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       title: "dashboards",
       icon: "dashboard_customize",
       hasGroup: true,
-      exact: true,
     },
     children: [
       {
@@ -38,7 +37,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         name: "List",
         meta: {
           title: "dashboardList",
-          exact: false,
         },
       },
       {
@@ -50,7 +48,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         name: "New",
         meta: {
           title: "dashboardNew",
-          exact: false,
         },
       },
       {

src/router/data/browser.ts

@@ -14,10 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesBrowser: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "Browser",
@@ -26,26 +24,22 @@ export const routesBrowser: Array<RouteRecordRaw> = [
       icon: "language",
     },
     redirect: "/browser",
-    component: Layout,
     children: [
       {
         path: "/browser",
         name: "Browser",
         meta: {
           title: "browser",
-          exact: true,
+          layer: "BROWSER",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/browser/tab/:activeTabIndex",
         name: "BrowserActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "BROWSER",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },

src/router/data/database.ts

@@ -14,10 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesDatabase: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "Database",
@@ -27,45 +25,38 @@ export const routesDatabase: Array<RouteRecordRaw> = [
       hasGroup: true,
     },
     redirect: "/mySQL",
-    component: Layout,
     children: [
       {
         path: "/mySQL",
         name: "MySQL",
         meta: {
           title: "mySQL",
-          exact: true,
+          layer: "MYSQL",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/mySQL/tab/:activeTabIndex",
         name: "MySQLActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "MYSQL",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/postgreSQL",
         name: "PostgreSQL",
         meta: {
           title: "postgreSQL",
-          exact: true,
+          layer: "POSTGRESQL",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/postgreSQL/tab/:activeTabIndex",
         name: "PostgreSQLActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "POSTGRESQL",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },

src/router/data/functions.ts

@@ -14,34 +14,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesFunctions: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "Functions",
     meta: {
       title: "functions",
       icon: "cloud_queue",
+      layer: "FAAS",
     },
     redirect: "/functions",
-    component: Layout,
     children: [
       {
         path: "/functions",
         name: "Functions",
-        meta: {
-          exact: true,
-        },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/functions/tab/:activeTabIndex",
         name: "FunctionsActiveTabIndex",
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },

src/router/data/general.ts

@@ -14,10 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesGen: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "General",
@@ -25,67 +23,55 @@ export const routesGen: Array<RouteRecordRaw> = [
       title: "general",
       icon: "chart",
       hasGroup: true,
-      exact: true,
     },
-    component: Layout,
     children: [
       {
         path: "/general",
         name: "GeneralServices",
         meta: {
-          exact: true,
           title: "services",
+          layer: "GENERAL",
         },
-        component: () =>
-          import(/* webpackChunkName: "layers" */ "@/views/Layer.vue"),
       },
       {
         path: "/general/tab/:activeTabIndex",
         name: "GeneralServicesActiveTabIndex",
         meta: {
-          exact: true,
           notShow: true,
+          layer: "GENERAL",
         },
-        component: () =>
-          import(/* webpackChunkName: "layers" */ "@/views/Layer.vue"),
       },
       {
         path: "/database",
         name: "VirtualDatabase",
         meta: {
           title: "virtualDatabase",
-          exact: true,
+          layer: "VIRTUAL_DATABASE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/database/tab/:activeTabIndex",
         name: "VirtualDatabaseActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "VIRTUAL_DATABASE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/cache",
         name: "VirtualCache",
         meta: {
           title: "virtualCache",
-          exact: true,
+          layer: "VIRTUAL_CACHE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/cache/tab/:activeTabIndex",
         name: "VirtualCacheActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "VIRTUAL_CACHE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },

src/router/data/index.ts

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+import general from "./general";
+import serviceMesh from "./serviceMesh";
+import database from "./database";
+import infrastructure from "./infrastructure";
+import selfObservability from "./selfObservability";
+import functions from "./functions";
+import browser from "./browser";
+import k8s from "./k8s";
+
+export default [
+  ...general,
+  ...serviceMesh,
+  ...functions,
+  ...k8s,
+  ...infrastructure,
+  ...browser,
+  ...database,
+  ...selfObservability,
+];

src/router/data/infrastructure.ts

@@ -14,30 +14,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesInfra: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "Infrastructure",
     meta: {
       title: "infrastructure",
       icon: "scatter_plot",
-      exact: true,
       hasGroup: true,
     },
     redirect: "/linux",
-    component: Layout,
     children: [
       {
         path: "/linux",
         name: "Linux",
         meta: {
           title: "linux",
+          layer: "OS_LINUX",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/linux/tab/:activeTabIndex",
@@ -45,9 +40,8 @@ export const routesInfra: Array<RouteRecordRaw> = [
         meta: {
           title: "linux",
           notShow: true,
+          layer: "OS_LINUX",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       // {
       //   path: "/infrastructure/vm",

src/router/data/k8s.ts

@@ -14,10 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesK8s: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "Kubernetes",
@@ -27,7 +25,6 @@ export const routesK8s: Array<RouteRecordRaw> = [
       hasGroup: true,
     },
     redirect: "/kubernetes/cluster",
-    component: Layout,
     children: [
       {
         path: "/kubernetes/cluster",
@@ -35,9 +32,8 @@ export const routesK8s: Array<RouteRecordRaw> = [
         meta: {
           notShow: false,
           title: "kubernetesCluster",
+          layer: "K8S",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/kubernetes/cluster/tab/:activeTabIndex",
@@ -45,9 +41,8 @@ export const routesK8s: Array<RouteRecordRaw> = [
         meta: {
           notShow: true,
           title: "kubernetesClusterActiveTabIndex",
+          layer: "K8S",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/kubernetes/service",
@@ -55,9 +50,8 @@ export const routesK8s: Array<RouteRecordRaw> = [
         meta: {
           notShow: false,
           title: "kubernetesService",
+          layer: "K8S_SERVICE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/kubernetes/service/tab/:activeTabIndex",
@@ -65,9 +59,8 @@ export const routesK8s: Array<RouteRecordRaw> = [
         meta: {
           notShow: true,
           title: "kubernetesServiceActiveTabIndex",
+          layer: "K8S_SERVICE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },

src/router/data/selfObservability.ts

@@ -14,10 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesSelf: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "SelfObservability",
@@ -27,43 +25,38 @@ export const routesSelf: Array<RouteRecordRaw> = [
       icon: "logo",
       hasGroup: true,
     },
-    component: Layout,
     children: [
       {
         path: "/self/skyWalkingServer",
         name: "SkyWalkingServer",
         meta: {
           title: "skyWalkingServer",
+          layer: "SO11Y_OAP",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/self/skyWalkingServer/tab/:activeTabIndex",
         name: "SkyWalkingServerActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "SO11Y_OAP",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/self/satellite",
         name: "Satellite",
         meta: {
           title: "satellite",
+          layer: "SO11Y_SATELLITE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/self/satellite/tab/:activeTabIndex",
         name: "SatelliteActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "SO11Y_SATELLITE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },

src/router/data/serviceMesh.ts

@@ -14,10 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesMesh: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "ServiceMesh",
@@ -27,7 +25,6 @@ export const routesMesh: Array<RouteRecordRaw> = [
       icon: "epic",
       hasGroup: true,
     },
-    component: Layout,
     children: [
       {
         path: "/mesh/services",
@@ -35,18 +32,16 @@ export const routesMesh: Array<RouteRecordRaw> = [
         meta: {
           notShow: false,
           title: "services",
+          layer: "MESH",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/mesh/services/tab/:activeTabIndex",
         name: "MeshServicesActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "MESH",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/mesh/controlPanel",
@@ -54,18 +49,16 @@ export const routesMesh: Array<RouteRecordRaw> = [
         meta: {
           notShow: false,
           title: "controlPanel",
+          layer: "MESH_CP",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/mesh/controlPanel/tab/:activeTabIndex",
         name: "ControlPanelActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "MESH_CP",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/mesh/dataPanel",
@@ -73,9 +66,8 @@ export const routesMesh: Array<RouteRecordRaw> = [
         meta: {
           notShow: false,
           title: "dataPanel",
+          layer: "MESH_DP",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/mesh/dataPanel/tab/:activeTabIndex",
@@ -83,9 +75,8 @@ export const routesMesh: Array<RouteRecordRaw> = [
         meta: {
           notShow: true,
           title: "dataPanelActiveTabIndex",
+          layer: "MESH_DP",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },

src/router/index.ts

@@ -15,27 +15,13 @@
  * limitations under the License.
  */
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
-import { routesGen } from "./general";
-import { routesMesh } from "./serviceMesh";
-import { routesDatabase } from "./database";
-import { routesInfra } from "./infrastructure";
 import { routesDashboard } from "./dashboard";
 import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
-import { routesSelf } from "./selfObservability";
+import routesLayers from "./layer";
-import { routesFunctions } from "./functions";
-import { routesBrowser } from "./browser";
-import { routesK8s } from "./k8s";
 
 const routes: Array<RouteRecordRaw> = [
-  ...routesGen,
+  ...routesLayers,
-  ...routesMesh,
-  ...routesFunctions,
-  ...routesK8s,
-  ...routesInfra,
-  ...routesBrowser,
-  ...routesDatabase,
-  ...routesSelf,
   ...routesDashboard,
   ...routesAlarm,
   ...routesSetting,

src/router/layer.ts

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+import LayerJson from "./data";
+import Layout from "@/layout/Index.vue";
+
+function layerDashboards() {
+  const routes = LayerJson.map((item: any) => {
+    item.component = Layout;
+    if (item.meta.hasGroup) {
+      item.children = item.children.map((d: any) => {
+        d.component = () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue");
+        return d;
+      });
+    }
+    return item;
+  });
+  return routes;
+}
+
+export default layerDashboards();

src/router/setting.ts

@@ -25,7 +25,6 @@ export const routesSetting: Array<RouteRecordRaw> = [
       title: "settings",
       icon: "settings",
       hasGroup: false,
-      exact: false,
     },
     component: Layout,
     children: [
@@ -36,7 +35,6 @@ export const routesSetting: Array<RouteRecordRaw> = [
           title: "settings",
           icon: "settings",
           hasGroup: false,
-          exact: false,
         },
         component: () =>
           import(/* webpackChunkName: "settings" */ "@/views/Settings.vue"),

src/views/Layer.vue

@@ -27,7 +27,6 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import Dashboard from "./dashboard/Edit.vue";
 import { useI18n } from "vue-i18n";
 import { useAppStoreWithOut } from "@/store/modules/app";
-import { RoutesMap } from "@/constants/data";
 
 const route = useRoute();
 const { t } = useI18n();
@@ -38,7 +37,7 @@ const layer = ref<string>("GENERAL");
 getDashboard();
 
 async function getDashboard() {
-  layer.value = RoutesMap[String(route.name)];
+  layer.value = String(route.meta.layer);
   dashboardStore.setLayer(layer.value);
   dashboardStore.setMode(false);
   await dashboardStore.setDashboards();