github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-02 23:05:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance menu configuration to make it easier to change (#161)

Browse Source
This commit is contained in:
Fine0830 2022-09-20 16:24:42 +08:00 committed by GitHub
parent 4561e2e374
commit b235929c77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 115 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/constants/data.ts
View File

@ -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",
};

24
src/layout/components/SideBar.vue
View File

@ -33,11 +33,7 @@ limitations under the License. -->
<template v-for="(menu, index) in routes" :key="index">
<el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
<template #title>
<router-link
class="items"
:to="menu.path"
:exact="menu.meta.exact || false"
>
<router-link class="items" :to="menu.path">
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
<Icon size="lg" :iconName="menu.meta.icon" />
</el-icon>
@ -52,11 +48,7 @@ limitations under the License. -->
:index="m.name"
:key="idx"
>
<router-link
class="items"
:to="m.path"
:exact="(m.meta && m.meta.exact) || false"
>
<router-link class="items" :to="m.path">
<span class="title">{{ m.meta && t(m.meta.title) }}</span>
</router-link>
</el-menu-item>
@ -68,20 +60,12 @@ limitations under the License. -->
v-else
>
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
<router-link
class="items"
:to="menu.children[0].path"
:exact="menu.meta.exact"
>
<router-link class="items" :to="menu.children[0].path">
<Icon size="lg" :iconName="menu.meta.icon" />
</router-link>
</el-icon>
<template #title>
<router-link
class="items"
:to="menu.children[0].path"
:exact="menu.meta.exact"
>
<router-link class="items" :to="menu.children[0].path">
<span class="title">{{ t(menu.meta.title) }}</span>
</router-link>
</template>

4
src/router/alarm.ts
View File

@ -25,16 +25,12 @@ export const routesAlarm: Array<RouteRecordRaw> = [
title: "alarm",
icon: "spam",
hasGroup: false,
exact: true,
},
component: Layout,
children: [
{
path: "/alerting",
name: "Alarm",
meta: {
exact: false,
},
component: () =>
import(/* webpackChunkName: "alerting" */ "@/views/Alarm.vue"),
},

3
src/router/dashboard.ts
View File

@ -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,
},
},
{

12
src/router/browser.ts → src/router/data/browser.ts
View File

@ -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"),
},
],
},

19
src/router/database.ts → src/router/data/database.ts
View File

@ -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"),
},
],
},

13
src/router/functions.ts → src/router/data/functions.ts
View File

@ -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"),
},
],
},

28
src/router/general.ts → src/router/data/general.ts
View File

@ -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"),
},
],
},

35
src/router/data/index.ts Normal file
View File

@ -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,
];

12
src/router/infrastructure.ts → src/router/data/infrastructure.ts
View File

@ -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",

17
src/router/k8s.ts → src/router/data/k8s.ts
View File

@ -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"),
},
],
},

17
src/router/selfObservability.ts → src/router/data/selfObservability.ts
View File

@ -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"),
},
],
},

23
src/router/serviceMesh.ts → src/router/data/serviceMesh.ts
View File

@ -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"),
},
],
},

18
src/router/index.ts
View File

@ -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 { routesFunctions } from "./functions";
import { routesBrowser } from "./browser";
import { routesK8s } from "./k8s";
import routesLayers from "./layer";
const routes: Array<RouteRecordRaw> = [
...routesGen,
...routesMesh,
...routesFunctions,
...routesK8s,
...routesInfra,
...routesBrowser,
...routesDatabase,
...routesSelf,
...routesLayers,
...routesDashboard,
...routesAlarm,
...routesSetting,

35
src/router/layer.ts Normal file
View File

@ -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.children) {
item.children = item.children.map((d: any) => {
d.component = () =>
import(/* webpackChunkName: "layer" */ "@/views/Layer.vue");
return d;
});
}
return item;
});
return routes;
}
export default layerDashboards();

2
src/router/setting.ts
View File

@ -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"),

3
src/views/Layer.vue
View File

@ -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();