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

feat: support for multiple templates

Browse Source
This commit is contained in:
Fine 2023-08-30 16:49:01 +08:00
parent f9119e18d9
commit d4e63a3df9
1 changed files with 118 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,9 +14,23 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="nav-bar flex-h"> <div class="nav-bar flex-h">
<el-breadcrumb separator=">" class="title" v-if="pathNames.length"> <el-breadcrumb separator=">" class="title flex-h" v-if="pathNames.length">
<el-breadcrumb-item v-for="(p, index) in pathNames" :to="{ path: p.path || '' }" :key="index" :replace="true"> <el-breadcrumb-item
{{ p.name }} v-for="(path, index) in pathNames"
:key="index"
:replace="true"
:to="{ path: getName(path).path || '' }"
>
<el-dropdown size="small" placement="bottom" :persistent="false">
<span class="cp">{{ getName(path).name }}</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="setName(p)" v-for="(p, index) in path" :key="index">
<span>{{ p.name }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<div class="title" v-else>{{ pageTitle }}</div> <div class="title" v-else>{{ pageTitle }}</div>
@ -54,13 +68,14 @@ limitations under the License. -->
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { MetricCatalog } from "@/views/dashboard/data"; import { MetricCatalog } from "@/views/dashboard/data";
import type { DashboardItem } from "@/types/dashboard"; import type { DashboardItem } from "@/types/dashboard";
import router from "@/router";
/*global Indexable */ /*global Indexable */
const { t, te } = useI18n(); const { t, te } = useI18n();
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const route = useRoute(); const route = useRoute();
const pathNames = ref<{ path?: string; name: string }[]>([]); const pathNames = ref<{ path?: string; name: string; selected: boolean }[][]>([]);
const timeRange = ref<number>(0); const timeRange = ref<number>(0);
const pageTitle = ref<string>(""); const pageTitle = ref<string>("");
@ -68,6 +83,30 @@ limitations under the License. -->
getVersion(); getVersion();
getNavPaths(); getNavPaths();
function getName(list: any[]) {
return list.find((d: any) => d.selected) || {};
}
function setName(item: any) {
pathNames.value = pathNames.value.map((list: any[]) => {
const index = list.findIndex(
(i: any) => i.entity === item.entity && item.layer === i.layer && i.name === item.name,
);
if (index > -1) {
list = list.map((d: any) => {
d.selected = false;
if (d.entity === item.entity && item.layer === d.layer) {
d.selected = true;
}
return d;
});
}
return list;
});
item.path && router.push(item.path);
}
function handleReload() { function handleReload() {
const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime(); const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()]; const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()];
@ -106,77 +145,104 @@ limitations under the License. -->
} }
} }
} }
pathNames.value.push(root); pathNames.value.push([{ ...root, selected: true }]);
if (dashboard.entity === MetricCatalog.ALL) { if (dashboard.entity === MetricCatalog.ALL) {
return; return;
} }
if (dashboard.entity === MetricCatalog.SERVICE) { if (dashboard.entity === MetricCatalog.SERVICE) {
pathNames.value.push({ pathNames.value.push([
name: dashboard.name, {
}); name: dashboard.name,
selected: true,
},
]);
return; return;
} }
const serviceDashboard = dashboardStore.dashboards.filter( const serviceDashboards = dashboardStore.dashboards.filter(
(d: DashboardItem) => MetricCatalog.SERVICE === d.entity && dashboard.layer === d.layer, (d: DashboardItem) => MetricCatalog.SERVICE === d.entity && dashboard.layer === d.layer,
)[0]; );
if (!serviceDashboard) { if (!serviceDashboards.length) {
return; return;
} }
const serviceId = route.params.serviceId; const serviceId = route.params.serviceId;
let path = `/dashboard/${serviceDashboard.layer}/${serviceDashboard.entity}/${serviceDashboard.name}`; const list = serviceDashboards.map((d: { path: string } & DashboardItem, index: number) => {
if (serviceId) { let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
path = `/dashboard/${serviceDashboard.layer}/${serviceDashboard.entity}/${serviceId}/${serviceDashboard.name}`; if (serviceId) {
} path = `/dashboard/${d.layer}/${d.entity}/${serviceId}/${d.name}`;
pathNames.value.push({ }
...serviceDashboard, const selected = index === 0;
path, return {
...d,
path,
selected,
};
}); });
pathNames.value.push(list);
const podId = route.params.podId;
if (dashboard.entity === MetricCatalog.ENDPOINT_RELATION) { if (dashboard.entity === MetricCatalog.ENDPOINT_RELATION) {
const endpointDashboard = dashboardStore.dashboards.filter( const endpointDashboards = dashboardStore.dashboards.filter(
(d: DashboardItem) => MetricCatalog.ENDPOINT === d.entity && dashboard.layer === d.layer, (d: DashboardItem) => MetricCatalog.ENDPOINT === d.entity && dashboard.layer === d.layer,
)[0]; );
const podId = route.params.podId; const list = endpointDashboards.map((d: { path: string } & DashboardItem, index: number) => {
let p = `/dashboard/${endpointDashboard.layer}/${endpointDashboard.entity}/${endpointDashboard.name}`; let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
if (podId) { if (podId) {
p = `/dashboard/${endpointDashboard.layer}/${endpointDashboard.entity}/${serviceId}/${podId}/${endpointDashboard.name}`; path = `/dashboard/${d.layer}/${d.entity}/${serviceId}/${podId}/${d.name}`;
} }
pathNames.value.push({ const selected = index === 0;
...endpointDashboard, return {
path: p, ...d,
path,
selected,
};
}); });
pathNames.value.push(list);
} }
const destServiceId = route.params.destServiceId;
if (dashboard.entity === MetricCatalog.SERVICE_INSTANCE_RELATION) { if (dashboard.entity === MetricCatalog.SERVICE_INSTANCE_RELATION) {
const serviceRelationDashboard = dashboardStore.dashboards.filter( const serviceRelationDashboards = dashboardStore.dashboards.filter(
(d: DashboardItem) => MetricCatalog.SERVICE_RELATION === d.entity && dashboard.layer === d.layer, (d: DashboardItem) => MetricCatalog.SERVICE_RELATION === d.entity && dashboard.layer === d.layer,
)[0]; );
const destServiceId = route.params.destServiceId; const list = serviceRelationDashboards.map((d: { path: string } & DashboardItem, index: number) => {
let p = `/dashboard/related/${serviceRelationDashboard.layer}/${serviceRelationDashboard.entity}/${serviceId}/${destServiceId}/${serviceRelationDashboard.name}`; let path = `/dashboard/related/${d.layer}/${d.entity}/${serviceId}/${destServiceId}/${d.name}`;
if (destServiceId) { if (destServiceId) {
p = `/dashboard/related/${serviceRelationDashboard.layer}/${serviceRelationDashboard.entity}/${serviceId}/${destServiceId}/${serviceRelationDashboard.name}`; path = `/dashboard/related/${d.layer}/${d.entity}/${serviceId}/${destServiceId}/${d.name}`;
} }
pathNames.value.push({ const selected = index === 0;
...serviceRelationDashboard, return {
path: p, ...d,
path,
selected,
};
}); });
pathNames.value.push(list);
} }
if ([MetricCatalog.Process, MetricCatalog.PROCESS_RELATION].includes(dashboard.entity)) { if ([MetricCatalog.Process, MetricCatalog.PROCESS_RELATION].includes(dashboard.entity)) {
const InstanceDashboard = dashboardStore.dashboards.filter( const InstanceDashboards = dashboardStore.dashboards.filter(
(d: DashboardItem) => MetricCatalog.SERVICE_INSTANCE === d.entity && dashboard.layer === d.layer, (d: DashboardItem) => MetricCatalog.SERVICE_INSTANCE === d.entity && dashboard.layer === d.layer,
)[0]; );
const podId = route.params.podId; const list = InstanceDashboards.map((d: { path: string } & DashboardItem, index: number) => {
let p = `/dashboard/${InstanceDashboard.layer}/${InstanceDashboard.entity}/${InstanceDashboard.name}`; let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
if (podId) { if (podId) {
p = `/dashboard/${InstanceDashboard.layer}/${InstanceDashboard.entity}/${serviceId}/${podId}/${InstanceDashboard.name}`; path = `/dashboard/${d.layer}/${d.entity}/${serviceId}/${podId}/${d.name}`;
} }
pathNames.value.push({ const selected = index === 0;
...InstanceDashboard, return {
path: p, ...d,
path,
selected,
};
}); });
pathNames.value.push(list);
} }
pathNames.value.push({ pathNames.value.push([
name: dashboard.name, {
}); name: dashboard.name,
console.log(pathNames.value); selected: true,
},
]);
} }
async function getVersion() { async function getVersion() {
@ -233,7 +299,6 @@ limitations under the License. -->
font-size: $font-size-normal; font-size: $font-size-normal;
font-weight: 500; font-weight: 500;
height: 28px; height: 28px;
line-height: 28px;
} }
.nav-tabs { .nav-tabs {