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

feat: add path names

Browse Source
This commit is contained in:
Fine 2023-08-28 18:16:40 +08:00
parent 8b087be308
commit 722982922d
3 changed files with 66 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/layout/components/NavBar.vue
View File

@ -14,7 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="nav-bar flex-h">
<div class="title">{{ route.name === "ViewWidget" ? "" : appStore.pageTitle || pageName }}</div>
<el-breadcrumb separator="/" class="title">
<el-breadcrumb-item v-for="(p, index) in pathNames" :to="{ path: p.path }" :key="index" :replace="true">
{{ p.name }}
</el-breadcrumb-item>
</el-breadcrumb>
<!-- <div class="title">{{ route.name === "ViewWidget" ? "" : appStore.pageTitle || pageName }}</div> -->
<div class="app-config">
<span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
<TimePicker
@ -63,7 +68,7 @@ limitations under the License. -->
resetDuration();
getVersion();
setConfig(String(route.meta.title));
// getPathNames();
function handleReload() {
const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
@ -84,20 +89,34 @@ limitations under the License. -->
}
function getPathNames() {
const obj = dashboardStore.currentDashboard;
if (!dashboardStore.entity) {
return;
const dashboard = dashboardStore.currentDashboard;
pathNames.value = [];
const root =
dashboardStore.dashboards.filter((d: DashboardItem) => d.isRoot && dashboard.layer === d.layer)[0] || {};
for (const item of appStore.allMenus) {
if (item.subItems && item.subItems.length) {
for (const subItem of item.subItems) {
if (subItem.layer === root.layer) {
root.path = subItem.path;
}
}
} else {
if (item.layer === root.layer) {
root.path = item.path;
}
}
}
console.log(dashboardStore.dashboards);
const root = dashboardStore.dashboards.filter((d: DashboardItem) => d.isRoot && obj.layer === d.layer);
pathNames.value.push(root);
if (obj.entity === MetricCatalog.SERVICE) {
const arr = dashboardStore.dashboards.filter(
(d: DashboardItem) => obj.entity === d.entity && obj.layer === d.layer,
);
pathNames.value.push(arr);
if (dashboard.entity !== MetricCatalog.ALL) {
const d = dashboardStore.dashboards.filter(
(d: DashboardItem) => dashboard.entity === d.entity && dashboard.layer === d.layer,
)[0];
const id = route.params.id;
const path = `/dashboard/${dashboard.layer}/${dashboard.entity}/${id}/${dashboard.name}`;
pathNames.value.push({
...d,
path,
});
}
}
@ -122,24 +141,10 @@ limitations under the License. -->
}
}
watch(
() => route.meta.title,
() => {
pathNames.value = [];
setConfig("");
if (!route.meta.layer) {
setConfig(String(route.meta.title));
}
},
);
watch(
() => dashboardStore.currentDashboard,
() => {
pathNames.value = [];
setConfig("");
if (route.meta.layer) {
getPathNames();
}
getPathNames();
},
);
</script>

32
src/types/components.d.ts vendored
View File

@ -6,8 +6,40 @@ import '@vue/runtime-core'
declare module '@vue/runtime-core' {
export interface GlobalComponents {
DateCalendar: typeof import('./../components/DateCalendar.vue')['default']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSlider: typeof import('element-plus/es')['ElSlider']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTag: typeof import('element-plus/es')['ElTag']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
Graph: typeof import('./../components/Graph.vue')['default']
Icon: typeof import('./../components/Icon.vue')['default']
Loading: typeof import('element-plus/es')['ElLoadingDirective']
Radio: typeof import('./../components/Radio.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']

2
src/views/Layer.vue
View File

@ -24,11 +24,9 @@ limitations under the License. -->
import { useDashboardStore } from "@/store/modules/dashboard";
import Dashboard from "./dashboard/Edit.vue";
import { useI18n } from "vue-i18n";
import { useAppStoreWithOut } from "@/store/modules/app";
const route = useRoute();
const { t } = useI18n();
const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore();
const layer = ref<string>("GENERAL");