mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-01 22:43:52 +00:00
feat: Add menus in side bar (#30)
This commit is contained in:
Fine0830
GitHub
parent
42d8e909f6
commit
61f82c54df
17
src/assets/icons/cloud_queue.svg
Normal file
17
src/assets/icons/cloud_queue.svg
Normal file
@ -0,0 +1,17 @@
|
||||
<!-- 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. -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M18.984 18q1.219 0 2.109-0.891t0.891-2.109-0.891-2.109-2.109-0.891h-1.5v-0.516q0-2.297-1.594-3.891t-3.891-1.594q-1.875 0-3.328 1.125t-1.969 2.859h-0.703q-1.641 0-2.813 1.195t-1.172 2.836 1.172 2.813 2.813 1.172h12.984zM19.359 10.031q1.922 0.141 3.281 1.57t1.359 3.398q0 2.063-1.477 3.539t-3.539 1.477h-12.984q-2.484 0-4.242-1.758t-1.758-4.242q0-2.203 1.57-3.961t3.773-1.992q0.984-1.828 2.766-2.953t3.891-1.125q2.531 0 4.711 1.781t2.648 4.266z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
17
src/assets/icons/language.svg
Normal file
17
src/assets/icons/language.svg
Normal file
@ -0,0 +1,17 @@
|
||||
<!-- 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. -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M16.359 14.016h3.375q0.281-1.313 0.281-2.016t-0.281-2.016h-3.375q0.141 0.984 0.141 2.016t-0.141 2.016zM14.578 19.547q1.172-0.375 2.438-1.43t1.922-2.133h-2.953q-0.469 1.875-1.406 3.563zM14.344 14.016q0.141-0.984 0.141-2.016t-0.141-2.016h-4.688q-0.141 0.984-0.141 2.016t0.141 2.016h4.688zM12 19.969q1.313-1.922 1.922-3.984h-3.844q0.609 2.063 1.922 3.984zM8.016 8.016q0.563-2.016 1.406-3.563-1.172 0.375-2.461 1.43t-1.898 2.133h2.953zM5.063 15.984q0.609 1.078 1.898 2.133t2.461 1.43q-0.938-1.688-1.406-3.563h-2.953zM4.266 14.016h3.375q-0.141-0.984-0.141-2.016t0.141-2.016h-3.375q-0.281 1.313-0.281 2.016t0.281 2.016zM12 4.031q-1.313 1.922-1.922 3.984h3.844q-0.609-2.063-1.922-3.984zM18.938 8.016q-0.656-1.078-1.922-2.133t-2.438-1.43q0.844 1.547 1.406 3.563h2.953zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
17
src/assets/icons/linear_scale.svg
Normal file
17
src/assets/icons/linear_scale.svg
Normal file
@ -0,0 +1,17 @@
|
||||
<!-- 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. -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M19.5 9.516q1.031 0 1.758 0.727t0.727 1.758-0.727 1.758-1.758 0.727q-1.688 0-2.297-1.5h-2.906q-0.609 1.5-2.297 1.5t-2.297-1.5h-2.906q-0.609 1.5-2.297 1.5-1.031 0-1.758-0.727t-0.727-1.758 0.727-1.758 1.758-0.727q1.688 0 2.297 1.5h2.906q0.609-1.5 2.297-1.5t2.297 1.5h2.906q0.609-1.5 2.297-1.5z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -37,8 +37,8 @@ import { ref, watch } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
|
||||
interface Option {
|
||||
label: string;
|
||||
value: string;
|
||||
label: string | number;
|
||||
value: string | number;
|
||||
}
|
||||
|
||||
/*global defineProps, defineEmits*/
|
||||
@ -49,11 +49,14 @@ const props = defineProps({
|
||||
default: () => [],
|
||||
},
|
||||
value: {
|
||||
type: [Array, String, Number] as PropType<any>,
|
||||
type: [Array, String, Number, undefined] as PropType<any>,
|
||||
default: () => [],
|
||||
},
|
||||
size: { type: null, default: "default" },
|
||||
placeholder: { type: String, default: "Select a option" },
|
||||
placeholder: {
|
||||
type: [String, Number] as PropType<string | number>,
|
||||
default: "Select a option",
|
||||
},
|
||||
borderRadius: { type: Number, default: 3 },
|
||||
multiple: { type: Boolean, default: false },
|
||||
disabled: { type: Boolean, default: false },
|
||||
@ -61,7 +64,7 @@ const props = defineProps({
|
||||
|
||||
const selected = ref<string[] | string>(props.value);
|
||||
function changeSelected() {
|
||||
const options = props.options.filter((d: Option) =>
|
||||
const options = props.options.filter((d: any) =>
|
||||
props.multiple
|
||||
? selected.value.includes(d.value)
|
||||
: selected.value === d.value
|
||||
|
||||
@ -57,7 +57,7 @@ export function useQueryProcessor(config: any) {
|
||||
variables.push(`$condition${index}: TopNCondition!`);
|
||||
conditions[`condition${index}`] = {
|
||||
name,
|
||||
parentService: ["Service", "All"].includes(dashboardStore.entity)
|
||||
parentService: ["All"].includes(dashboardStore.entity)
|
||||
? null
|
||||
: selectorStore.currentService.value,
|
||||
normal: selectorStore.currentService.normal,
|
||||
|
||||
@ -33,13 +33,17 @@ 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 :to="menu.path" :exact="menu.meta.exact || false">
|
||||
<router-link
|
||||
class="items"
|
||||
:to="menu.path"
|
||||
:exact="menu.meta.exact || false"
|
||||
>
|
||||
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
|
||||
<Icon size="lg" :iconName="menu.meta.icon" />
|
||||
</el-icon>
|
||||
<span :class="isCollapse ? 'collapse' : ''">{{
|
||||
t(menu.meta.title)
|
||||
}}</span>
|
||||
<span :class="isCollapse ? 'collapse' : ''">
|
||||
{{ t(menu.meta.title) }}
|
||||
</span>
|
||||
</router-link>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
@ -48,7 +52,11 @@ limitations under the License. -->
|
||||
:index="m.name"
|
||||
:key="idx"
|
||||
>
|
||||
<router-link :to="m.path" :exact="m.meta.exact || false">
|
||||
<router-link
|
||||
class="items"
|
||||
:to="m.path"
|
||||
:exact="m.meta.exact || false"
|
||||
>
|
||||
<span>{{ t(m.meta.title) }}</span>
|
||||
</router-link>
|
||||
</el-menu-item>
|
||||
@ -59,13 +67,21 @@ limitations under the License. -->
|
||||
@click="changePage(menu)"
|
||||
v-else
|
||||
>
|
||||
<el-icon class="menu-icons" :style="{ margin: '-10px 12px 0 0' }">
|
||||
<router-link :to="menu.children[0].path" :exact="menu.meta.exact">
|
||||
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
|
||||
<router-link
|
||||
class="items"
|
||||
:to="menu.children[0].path"
|
||||
:exact="menu.meta.exact"
|
||||
>
|
||||
<Icon size="lg" :iconName="menu.meta.icon" />
|
||||
</router-link>
|
||||
</el-icon>
|
||||
<template #title>
|
||||
<router-link :to="menu.children[0].path" :exact="menu.meta.exact">
|
||||
<router-link
|
||||
class="items"
|
||||
:to="menu.children[0].path"
|
||||
:exact="menu.meta.exact"
|
||||
>
|
||||
<span>{{ t(menu.meta.title) }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
@ -99,7 +115,7 @@ const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
|
||||
? ref("light")
|
||||
: ref("black");
|
||||
const routes = ref<any>(useRouter().options.routes);
|
||||
const isCollapse = ref(true);
|
||||
const isCollapse = ref(false);
|
||||
const controlMenu = () => {
|
||||
isCollapse.value = !isCollapse.value;
|
||||
};
|
||||
@ -172,4 +188,9 @@ span.collapse {
|
||||
.el-icon.el-sub-menu__icon-arrow {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.items {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -113,6 +113,12 @@ const msg = {
|
||||
noRoot: "Please set a root dashboard for",
|
||||
noWidget: "Please add widgets.",
|
||||
rename: "Rename",
|
||||
selfObservability: "Self Observability",
|
||||
satellite: "Satellite",
|
||||
skyWalkingServer: "Sky Walking Server",
|
||||
functions: "Functions",
|
||||
browser: "Browser",
|
||||
linux: "Linux",
|
||||
hourTip: "Select Hour",
|
||||
minuteTip: "Select Minute",
|
||||
secondTip: "Select Second",
|
||||
|
||||
@ -113,6 +113,12 @@ const msg = {
|
||||
showGroup: "显示分组",
|
||||
noWidget: "请添加组件",
|
||||
rename: "重命名",
|
||||
selfObservability: "自观性",
|
||||
satellite: "Satellite",
|
||||
skyWalkingServer: "Sky Walking服务",
|
||||
functions: "Functions",
|
||||
linux: "Linux",
|
||||
browser: "浏览器",
|
||||
hourTip: "选择小时",
|
||||
minuteTip: "选择分钟",
|
||||
secondTip: "选择秒数",
|
||||
|
||||
43
src/router/browser.ts
Normal file
43
src/router/browser.ts
Normal file
@ -0,0 +1,43 @@
|
||||
/**
|
||||
* 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 { RouteRecordRaw } from "vue-router";
|
||||
import Layout from "@/layout/Index.vue";
|
||||
|
||||
export const routesBrowser: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: "",
|
||||
name: "Browser",
|
||||
meta: {
|
||||
title: "browser",
|
||||
icon: "language",
|
||||
},
|
||||
redirect: "/browser",
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: "/browser",
|
||||
name: "Browser",
|
||||
meta: {
|
||||
title: "browser",
|
||||
headPath: "/browser",
|
||||
exact: true,
|
||||
},
|
||||
component: () => import("@/views/Layer.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -23,7 +23,7 @@ export const routesDatabase: Array<RouteRecordRaw> = [
|
||||
name: "Database",
|
||||
meta: {
|
||||
title: "database",
|
||||
icon: "epic",
|
||||
icon: "bar_chart",
|
||||
},
|
||||
redirect: "/database",
|
||||
component: Layout,
|
||||
|
||||
43
src/router/functions.ts
Normal file
43
src/router/functions.ts
Normal file
@ -0,0 +1,43 @@
|
||||
/**
|
||||
* 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 { RouteRecordRaw } from "vue-router";
|
||||
import Layout from "@/layout/Index.vue";
|
||||
|
||||
export const routesFunctions: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: "",
|
||||
name: "Functions",
|
||||
meta: {
|
||||
title: "functions",
|
||||
icon: "cloud_queue",
|
||||
},
|
||||
redirect: "/functions",
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: "/functions",
|
||||
name: "Functions",
|
||||
meta: {
|
||||
title: "functions",
|
||||
headPath: "/functions",
|
||||
exact: true,
|
||||
},
|
||||
component: () => import("@/views/Layer.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -23,12 +23,18 @@ import { routesDashboard } from "./dashboard";
|
||||
import { routesEvent } from "./event";
|
||||
import { routesSetting } from "./setting";
|
||||
import { routesAlarm } from "./alarm";
|
||||
import { routesSelf } from "./selfObservability";
|
||||
import { routesFunctions } from "./functions";
|
||||
import { routesBrowser } from "./browser";
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
...routesGen,
|
||||
...routesMesh,
|
||||
...routesDatabase,
|
||||
...routesFunctions,
|
||||
...routesInfra,
|
||||
...routesBrowser,
|
||||
...routesDatabase,
|
||||
...routesSelf,
|
||||
...routesDashboard,
|
||||
...routesAlarm,
|
||||
...routesEvent,
|
||||
|
||||
@ -27,24 +27,34 @@ export const routesInfra: Array<RouteRecordRaw> = [
|
||||
exact: true,
|
||||
hasGroup: true,
|
||||
},
|
||||
redirect: "/infrastructure",
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: "/infrastructure/vm",
|
||||
name: "VirtualMachine",
|
||||
path: "/infrastructure",
|
||||
name: "Linux",
|
||||
meta: {
|
||||
title: "virtualMachine",
|
||||
title: "linux",
|
||||
},
|
||||
component: () => import("@/views/infrastructure/Infrastructure.vue"),
|
||||
},
|
||||
{
|
||||
path: "/infrastructure/k8s",
|
||||
name: "Kubernetes",
|
||||
meta: {
|
||||
title: "kubernetes",
|
||||
},
|
||||
component: () => import("@/views/infrastructure/Infrastructure.vue"),
|
||||
component: () => import("@/views/Layer.vue"),
|
||||
// component: () => import("@/views/infrastructure/Infrastructure.vue"),
|
||||
},
|
||||
// {
|
||||
// path: "/infrastructure/vm",
|
||||
// name: "VirtualMachine",
|
||||
// meta: {
|
||||
// title: "virtualMachine",
|
||||
// },
|
||||
// component: () => import("@/views/infrastructure/Infrastructure.vue"),
|
||||
// },
|
||||
// {
|
||||
// path: "/infrastructure/k8s",
|
||||
// name: "Kubernetes",
|
||||
// meta: {
|
||||
// title: "kubernetes",
|
||||
// },
|
||||
// component: () => import("@/views/infrastructure/Infrastructure.vue"),
|
||||
// },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
52
src/router/selfObservability.ts
Normal file
52
src/router/selfObservability.ts
Normal file
@ -0,0 +1,52 @@
|
||||
/**
|
||||
* 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 { RouteRecordRaw } from "vue-router";
|
||||
import Layout from "@/layout/Index.vue";
|
||||
|
||||
export const routesSelf: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: "",
|
||||
name: "SelfObservability",
|
||||
redirect: "/self/skyWalkingServer",
|
||||
meta: {
|
||||
title: "selfObservability",
|
||||
icon: "logo",
|
||||
hasGroup: true,
|
||||
},
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: "/self/skyWalkingServer",
|
||||
name: "SkyWalkingServer",
|
||||
meta: {
|
||||
title: "skyWalkingServer",
|
||||
headPath: "/mesh/services",
|
||||
},
|
||||
component: () => import("@/views/Layer.vue"),
|
||||
},
|
||||
{
|
||||
path: "/self/satellite",
|
||||
name: "Satellite",
|
||||
meta: {
|
||||
title: "satellite",
|
||||
headPath: "/mesh/controlPanel",
|
||||
},
|
||||
component: () => import("@/views/Layer.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -24,7 +24,7 @@ export const routesMesh: Array<RouteRecordRaw> = [
|
||||
redirect: "/mesh/services",
|
||||
meta: {
|
||||
title: "serviceMesh",
|
||||
icon: "bar_chart",
|
||||
icon: "epic",
|
||||
hasGroup: true,
|
||||
},
|
||||
component: Layout,
|
||||
|
||||
@ -34,6 +34,11 @@ const routeNames = [
|
||||
"MeshServices",
|
||||
"ControlPanel",
|
||||
"DataPanel",
|
||||
"Linux",
|
||||
"SkyWalkingServer",
|
||||
"Satellite",
|
||||
"Functions",
|
||||
"Browser",
|
||||
];
|
||||
const layer = ref<string>("GENERAL");
|
||||
getDashboard();
|
||||
@ -69,6 +74,21 @@ function setLayer(n: string) {
|
||||
case routeNames[4]:
|
||||
layer.value = "MESH_DP";
|
||||
break;
|
||||
case routeNames[5]:
|
||||
layer.value = "OS_LINUX";
|
||||
break;
|
||||
case routeNames[6]:
|
||||
layer.value = "SO11Y_OAP";
|
||||
break;
|
||||
case routeNames[7]:
|
||||
layer.value = "SO11Y_SATELLITE";
|
||||
break;
|
||||
case routeNames[8]:
|
||||
layer.value = "FAAS";
|
||||
break;
|
||||
case routeNames[9]:
|
||||
layer.value = "BROWSER";
|
||||
break;
|
||||
default:
|
||||
layer.value = "GENERAL";
|
||||
break;
|
||||
|
||||
@ -57,7 +57,7 @@ limitations under the License. -->
|
||||
<el-table-column label="Operations">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleView(scope.row)">
|
||||
{{ t("view") }}
|
||||
{{ t("edit") }}
|
||||
</el-button>
|
||||
<el-button size="small" @click="handleEdit(scope.row)">
|
||||
{{ t("rename") }}
|
||||
|
||||
@ -90,12 +90,11 @@ import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import {
|
||||
MetricTypes,
|
||||
ListChartTypes,
|
||||
MetricCatalog,
|
||||
DefaultGraphConfig,
|
||||
EntityType,
|
||||
ChartTypes,
|
||||
PodsChartTypes,
|
||||
ListEntity,
|
||||
MetricsType,
|
||||
} from "../../data";
|
||||
import { ElMessage } from "element-plus";
|
||||
import Icon from "@/components/Icon.vue";
|
||||
@ -134,13 +133,8 @@ states.visTypes = setVisTypes();
|
||||
setDashboards();
|
||||
setMetricType();
|
||||
|
||||
async function setMetricType(catalog?: string) {
|
||||
async function setMetricType() {
|
||||
const { graph } = dashboardStore.selectedGrid;
|
||||
if (states.isList) {
|
||||
catalog = catalog || ListEntity[graph.type];
|
||||
} else {
|
||||
catalog = catalog || dashboardStore.entity;
|
||||
}
|
||||
const json = await dashboardStore.fetchMetricList();
|
||||
if (json.errors) {
|
||||
ElMessage.error(json.errors);
|
||||
@ -149,16 +143,11 @@ async function setMetricType(catalog?: string) {
|
||||
states.metricList = (json.data.metrics || []).filter(
|
||||
(d: { catalog: string; type: string }) => {
|
||||
if (states.isList || graph.type === "Table") {
|
||||
if (
|
||||
d.type === "REGULAR_VALUE" &&
|
||||
catalog === (MetricCatalog as any)[d.catalog]
|
||||
) {
|
||||
if (d.type === MetricsType.REGULAR_VALUE) {
|
||||
return d;
|
||||
}
|
||||
} else {
|
||||
if (catalog === (MetricCatalog as any)[d.catalog]) {
|
||||
return d;
|
||||
}
|
||||
return d;
|
||||
}
|
||||
}
|
||||
);
|
||||
@ -253,12 +242,7 @@ function changeChartType(item: Option) {
|
||||
states.metrics = [""];
|
||||
states.metricTypes = [""];
|
||||
}
|
||||
const catalog: { [key: string]: string } = {
|
||||
InstanceList: EntityType[3].value,
|
||||
EndpointList: EntityType[2].value,
|
||||
ServiceList: EntityType[0].value,
|
||||
};
|
||||
setMetricType(catalog[graph.type]);
|
||||
setMetricType();
|
||||
setDashboards();
|
||||
states.dashboardName = "";
|
||||
}
|
||||
@ -367,7 +351,7 @@ function deleteMetric(index: number) {
|
||||
states.metricTypes.splice(index, 1);
|
||||
}
|
||||
function setMetricTypeList(type: string) {
|
||||
if (type !== "REGULAR_VALUE") {
|
||||
if (type !== MetricsType.REGULAR_VALUE) {
|
||||
return MetricTypes[type];
|
||||
}
|
||||
if (states.isList || dashboardStore.selectedGrid.graph.type === "Table") {
|
||||
|
||||
@ -213,7 +213,7 @@ function handleNodeClick(d: Node & { x: number; y: number }) {
|
||||
topologyStore.setNode(d);
|
||||
topologyStore.setLink(null);
|
||||
operationsPos.x = d.x;
|
||||
operationsPos.y = d.y + 30;
|
||||
operationsPos.y = d.y - 70;
|
||||
if (d.layer === String(dashboardStore.layerId)) {
|
||||
return;
|
||||
}
|
||||
@ -239,7 +239,9 @@ function handleLinkClick(event: any, d: Call) {
|
||||
dashboardStore.entity === EntityType[1].value
|
||||
? EntityType[0].value
|
||||
: dashboardStore.entity;
|
||||
const path = `/dashboard/${dashboardStore.layerId}/${e}Relation/${d.source.id}/${d.target.id}/${settings.value.linkDashboard}`;
|
||||
const path = `/dashboard/${dashboardStore.layerId}/${e}Relation/${
|
||||
d.source.id
|
||||
}/${d.target.id}/${settings.value.linkDashboard.split(" ").join("-")}`;
|
||||
const routeUrl = router.resolve({ path });
|
||||
window.open(routeUrl.href, "_blank");
|
||||
}
|
||||
@ -371,19 +373,25 @@ async function handleInspect() {
|
||||
update();
|
||||
}
|
||||
function handleGoEndpoint(name: string) {
|
||||
const path = `/dashboard/${dashboardStore.layerId}/Endpoint/${topologyStore.node.id}/${name}`;
|
||||
const path = `/dashboard/${dashboardStore.layerId}/Endpoint/${
|
||||
topologyStore.node.id
|
||||
}/${name.split(" ").join("-")}`;
|
||||
const routeUrl = router.resolve({ path });
|
||||
|
||||
window.open(routeUrl.href, "_blank");
|
||||
}
|
||||
function handleGoInstance(name: string) {
|
||||
const path = `/dashboard/${dashboardStore.layerId}/ServiceInstance/${topologyStore.node.id}/${name}`;
|
||||
const path = `/dashboard/${dashboardStore.layerId}/ServiceInstance/${
|
||||
topologyStore.node.id
|
||||
}/${name.split(" ").join("-")}`;
|
||||
const routeUrl = router.resolve({ path });
|
||||
|
||||
window.open(routeUrl.href, "_blank");
|
||||
}
|
||||
function handleGoDashboard(name: string) {
|
||||
const path = `/dashboard/${dashboardStore.layerId}/Service/${topologyStore.node.id}/${name}`;
|
||||
const path = `/dashboard/${dashboardStore.layerId}/Service/${
|
||||
topologyStore.node.id
|
||||
}/${name.split(" ").join("-")}`;
|
||||
const routeUrl = router.resolve({ path });
|
||||
|
||||
window.open(routeUrl.href, "_blank");
|
||||
|
||||
@ -189,8 +189,8 @@ function selectNodeLink(d: any) {
|
||||
}
|
||||
topologyStore.setNode(d.data);
|
||||
topologyStore.setLink(null);
|
||||
operationsPos.x = d.event.event.clientX;
|
||||
operationsPos.y = d.event.event.clientY;
|
||||
operationsPos.x = d.event.event.clientX - 200;
|
||||
operationsPos.y = d.event.event.clientY - 150;
|
||||
}
|
||||
|
||||
async function changeDepth(opt: Option[] | any) {
|
||||
|
||||
@ -16,11 +16,12 @@ limitations under the License. -->
|
||||
<div class="link-settings">
|
||||
<h5 class="title">{{ t("callSettings") }}</h5>
|
||||
<div class="label">{{ t("linkDashboard") }}</div>
|
||||
<el-input
|
||||
v-model="states.linkDashboard"
|
||||
placeholder="Please input a dashboard name for calls"
|
||||
@change="updateSettings"
|
||||
<Selector
|
||||
:value="states.linkDashboard"
|
||||
:options="states.linkDashboards"
|
||||
size="small"
|
||||
placeholder="Please input a dashboard name for calls"
|
||||
@change="changeLinkDashboard"
|
||||
class="inputs"
|
||||
/>
|
||||
<div class="label">{{ t("linkServerMetrics") }}</div>
|
||||
@ -51,16 +52,17 @@ limitations under the License. -->
|
||||
<div class="node-settings">
|
||||
<h5 class="title">{{ t("nodeSettings") }}</h5>
|
||||
<div class="label">{{ t("nodeDashboard") }}</div>
|
||||
<el-input
|
||||
v-show="!isServer"
|
||||
v-model="states.nodeDashboard"
|
||||
placeholder="Please input a dashboard name for nodes"
|
||||
@change="updateSettings"
|
||||
<Selector
|
||||
v-show="!isService"
|
||||
:value="states.nodeDashboard"
|
||||
:options="states.nodeDashboards"
|
||||
size="small"
|
||||
placeholder="Please input a dashboard name for nodes"
|
||||
@change="changeNodeDashboard"
|
||||
class="inputs"
|
||||
/>
|
||||
<div
|
||||
v-show="isServer"
|
||||
v-show="isService"
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
class="metric-item"
|
||||
@ -73,11 +75,12 @@ limitations under the License. -->
|
||||
@change="changeScope(index, $event)"
|
||||
class="item mr-5"
|
||||
/>
|
||||
<el-input
|
||||
v-model="item.dashboard"
|
||||
<Selector
|
||||
:value="item.dashboard"
|
||||
:options="states.nodeDashboards"
|
||||
size="small"
|
||||
placeholder="Please input a dashboard name for nodes"
|
||||
@change="updateNodeDashboards(index, $event)"
|
||||
size="small"
|
||||
class="item mr-5"
|
||||
/>
|
||||
<span>
|
||||
@ -108,7 +111,7 @@ limitations under the License. -->
|
||||
@change="changeNodeMetrics"
|
||||
/>
|
||||
</div>
|
||||
<div class="legend-settings" v-show="isServer">
|
||||
<div class="legend-settings" v-show="isService">
|
||||
<h5 class="title">{{ t("legendSettings") }}</h5>
|
||||
<div class="label">{{ t("conditions") }}</div>
|
||||
<div v-for="(metric, index) of legend.metric" :key="metric.name + index">
|
||||
@ -184,7 +187,8 @@ import { MetricCatalog, ScopeType, MetricConditions } from "../../../data";
|
||||
import { Option } from "@/types/app";
|
||||
import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
|
||||
import { Node, Call } from "@/types/topology";
|
||||
import { EntityType, LegendOpt } from "../../../data";
|
||||
import { DashboardItem } from "@/types/dashboard";
|
||||
import { EntityType, LegendOpt, MetricsType } from "../../../data";
|
||||
|
||||
/*global defineEmits */
|
||||
const emit = defineEmits(["update", "updateNodes"]);
|
||||
@ -208,6 +212,8 @@ const states = reactive<{
|
||||
nodeMetrics: string[];
|
||||
nodeMetricList: Option[];
|
||||
linkMetricList: Option[];
|
||||
linkDashboards: (DashboardItem & { label: string; value: string })[];
|
||||
nodeDashboards: (DashboardItem & { label: string; value: string })[];
|
||||
}>({
|
||||
linkDashboard: "",
|
||||
nodeDashboard: [],
|
||||
@ -216,8 +222,10 @@ const states = reactive<{
|
||||
nodeMetrics: [],
|
||||
nodeMetricList: [],
|
||||
linkMetricList: [],
|
||||
linkDashboards: [],
|
||||
nodeDashboards: [],
|
||||
});
|
||||
const isServer = [EntityType[0].value, EntityType[1].value].includes(
|
||||
const isService = [EntityType[0].value, EntityType[1].value].includes(
|
||||
dashboardStore.entity
|
||||
);
|
||||
const legend = reactive<{
|
||||
@ -226,6 +234,7 @@ const legend = reactive<{
|
||||
|
||||
getMetricList();
|
||||
async function getMetricList() {
|
||||
const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
|
||||
const json = await dashboardStore.fetchMetricList();
|
||||
if (json.errors) {
|
||||
ElMessage.error(json.errors);
|
||||
@ -237,18 +246,28 @@ async function getMetricList() {
|
||||
: dashboardStore.entity === EntityType[4].value
|
||||
? EntityType[3].value
|
||||
: dashboardStore.entity;
|
||||
states.nodeMetricList = (json.data.metrics || []).filter(
|
||||
(d: { catalog: string }) => entity === (MetricCatalog as any)[d.catalog]
|
||||
states.linkDashboards = list.reduce(
|
||||
(
|
||||
prev: (DashboardItem & { label: string; value: string })[],
|
||||
d: DashboardItem
|
||||
) => {
|
||||
if (
|
||||
d.layer === dashboardStore.layerId &&
|
||||
d.entity === entity + "Relation"
|
||||
) {
|
||||
prev.push({ ...d, label: d.name, value: d.name });
|
||||
}
|
||||
return prev;
|
||||
},
|
||||
[]
|
||||
);
|
||||
states.nodeMetricList = (json.data.metrics || []).filter(
|
||||
(d: { type: string }) => d.type === MetricsType.REGULAR_VALUE
|
||||
);
|
||||
const e =
|
||||
dashboardStore.entity === EntityType[1].value
|
||||
? EntityType[0].value
|
||||
: dashboardStore.entity === EntityType[4].value
|
||||
? EntityType[3].value
|
||||
: dashboardStore.entity;
|
||||
states.linkMetricList = (json.data.metrics || []).filter(
|
||||
(d: { catalog: string }) =>
|
||||
e + "Relation" === (MetricCatalog as any)[d.catalog]
|
||||
(d: { catalog: string; type: string }) =>
|
||||
entity + "Relation" === (MetricCatalog as any)[d.catalog] &&
|
||||
d.type === MetricsType.REGULAR_VALUE
|
||||
);
|
||||
}
|
||||
async function setLegend() {
|
||||
@ -259,7 +278,7 @@ async function setLegend() {
|
||||
|
||||
emit("update", {
|
||||
linkDashboard: states.linkDashboard,
|
||||
nodeDashboard: isServer
|
||||
nodeDashboard: isService
|
||||
? items.filter((d: { scope: string; dashboard: string }) => d.dashboard)
|
||||
: states.nodeDashboard,
|
||||
linkServerMetrics: states.linkServerMetrics,
|
||||
@ -276,15 +295,34 @@ async function setLegend() {
|
||||
}
|
||||
emit("updateNodes");
|
||||
}
|
||||
function changeNodeDashboard(opt: any) {
|
||||
states.nodeDashboard = opt[0].value;
|
||||
}
|
||||
function changeLinkDashboard(opt: any) {
|
||||
states.linkDashboard = opt[0].value;
|
||||
}
|
||||
function changeLegend(type: string, opt: any, index: number) {
|
||||
(legend.metric[index] as any)[type] = opt[0].value || opt;
|
||||
}
|
||||
function changeScope(index: number, opt: Option[]) {
|
||||
function changeScope(index: number, opt: Option[] | any) {
|
||||
items[index].scope = opt[0].value;
|
||||
items[index].dashboard = "";
|
||||
const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
|
||||
states.nodeDashboards = list.reduce(
|
||||
(
|
||||
prev: (DashboardItem & { label: string; value: string })[],
|
||||
d: DashboardItem
|
||||
) => {
|
||||
if (d.layer === dashboardStore.layerId && d.entity === opt[0].value) {
|
||||
prev.push({ ...d, label: d.name, value: d.name });
|
||||
}
|
||||
return prev;
|
||||
},
|
||||
[]
|
||||
);
|
||||
items[index].dashboard = states.nodeDashboards[0].value;
|
||||
}
|
||||
function updateNodeDashboards(index: number, content: string) {
|
||||
items[index].dashboard = content;
|
||||
function updateNodeDashboards(index: number, content: Option[] | any) {
|
||||
items[index].dashboard = content[0].value;
|
||||
updateSettings();
|
||||
}
|
||||
function addItem() {
|
||||
@ -297,7 +335,7 @@ function deleteItem(index: number) {
|
||||
function updateSettings() {
|
||||
emit("update", {
|
||||
linkDashboard: states.linkDashboard,
|
||||
nodeDashboard: isServer
|
||||
nodeDashboard: isService
|
||||
? items.filter((d: { scope: string; dashboard: string }) => d.dashboard)
|
||||
: states.nodeDashboard,
|
||||
linkServerMetrics: states.linkServerMetrics,
|
||||
@ -306,7 +344,7 @@ function updateSettings() {
|
||||
legend: legend.metric,
|
||||
});
|
||||
}
|
||||
async function changeLinkServerMetrics(options: Option[]) {
|
||||
async function changeLinkServerMetrics(options: Option[] | any) {
|
||||
states.linkServerMetrics = options.map((d: Option) => d.value);
|
||||
updateSettings();
|
||||
if (!states.linkServerMetrics.length) {
|
||||
@ -323,7 +361,7 @@ async function changeLinkServerMetrics(options: Option[]) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
}
|
||||
async function changeLinkClientMetrics(options: Option[]) {
|
||||
async function changeLinkClientMetrics(options: Option[] | any) {
|
||||
states.linkClientMetrics = options.map((d: Option) => d.value);
|
||||
updateSettings();
|
||||
if (!states.linkClientMetrics.length) {
|
||||
@ -340,7 +378,7 @@ async function changeLinkClientMetrics(options: Option[]) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
}
|
||||
async function changeNodeMetrics(options: Option[]) {
|
||||
async function changeNodeMetrics(options: Option[] | any) {
|
||||
states.nodeMetrics = options.map((d: Option) => d.value);
|
||||
updateSettings();
|
||||
if (!states.nodeMetrics.length) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user