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

feat: update dashboard list and reload templates (#33)

Browse Source
This commit is contained in:
Fine0830 2022-03-22 20:14:16 +08:00 committed by GitHub
parent f9aacb72e1
commit 049f46a4cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 202 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/locales/lang/en.ts
View File

@ -121,6 +121,8 @@ const msg = {
linux: "Linux",
editWarning: "You are entering edit mode",
viewWarning: "You are entering view mode",
virtualDatabase: "Virtual Database",
reloadDashboards: "Reload dashboards",
hourTip: "Select Hour",
minuteTip: "Select Minute",
secondTip: "Select Second",

2
src/locales/lang/zh.ts
View File

@ -121,6 +121,8 @@ const msg = {
browser: "浏览器",
editWarning: "你正在进入编辑模式",
viewWarning: "你正在进入预览模式",
virtualDatabase: "虚拟数据库",
reloadDashboards: "重新加载仪表盘",
hourTip: "选择小时",
minuteTip: "选择分钟",
secondTip: "选择秒数",

3
src/router/database.ts
View File

@ -24,6 +24,7 @@ export const routesDatabase: Array<RouteRecordRaw> = [
meta: {
title: "database",
icon: "bar_chart",
hasGroup: true,
},
redirect: "/database",
component: Layout,
@ -32,7 +33,7 @@ export const routesDatabase: Array<RouteRecordRaw> = [
path: "/database",
name: "Database",
meta: {
title: "database",
title: "virtualDatabase",
headPath: "/database",
exact: true,
},

26
src/store/modules/dashboard.ts
View File

@ -296,7 +296,7 @@ export const dashboardStore = defineStore({
const list = [];
for (const t of data) {
const c = JSON.parse(t.configuration);
const key = [c.layer, c.entity, c.name.split(" ").join("-")].join("_");
const key = [c.layer, c.entity, c.name].join("_");
list.push({
id: t.id,
@ -326,6 +326,17 @@ export const dashboardStore = defineStore({
sessionStorage.getItem("dashboards") || "[]"
);
},
async resetTemplates() {
const res = await this.fetchTemplates();
if (res.errors) {
this.dashboards = [];
ElMessage.error(res.errors);
return;
}
this.dashboards = JSON.parse(
sessionStorage.getItem("dashboards") || "[]"
);
},
async updateDashboard(setting: { id: string; configuration: string }) {
const res: AxiosResponse = await graphql.query("updateTemplate").params({
setting,
@ -385,7 +396,7 @@ export const dashboardStore = defineStore({
}
if (!json.status) {
ElMessage.error(json.message);
return;
return json;
}
if (!this.currentDashboard.id) {
ElMessage.success("Saved successfully");
@ -393,22 +404,21 @@ export const dashboardStore = defineStore({
const key = [
this.currentDashboard.layer,
this.currentDashboard.entity,
this.currentDashboard.name.split(" ").join("-"),
this.currentDashboard.name,
].join("_");
this.currentDashboard.id = json.id;
if (this.currentDashboard.id) {
sessionStorage.removeItem(key);
this.dashboards = this.dashboards.filter(
(d: DashboardItem) => d.id !== this.currentDashboard.id
);
}
this.dashboards.push({
...this.currentDashboard,
id: json.id,
});
this.dashboards.push(this.currentDashboard);
const l = { id: json.id, configuration: c };
sessionStorage.setItem(key, JSON.stringify(l));
sessionStorage.setItem("dashboards", JSON.stringify(this.dashboards));
return json;
},
async deleteDashboard() {
const res: AxiosResponse = await graphql
@ -430,7 +440,7 @@ export const dashboardStore = defineStore({
const key = [
this.currentDashboard.layer,
this.currentDashboard.entity,
this.currentDashboard.name.split(" ").join("-"),
this.currentDashboard.name,
].join("_");
sessionStorage.removeItem(key);
},

2
src/views/dashboard/Edit.vue
View File

@ -55,7 +55,7 @@ async function setTemplate() {
if (!p.entity) {
const { layer, entity, name } = dashboardStore.currentDashboard;
layoutKey.value = `${layer}_${entity}_${name.split(" ").join("-")}`;
layoutKey.value = `${layer}_${entity}_${name}`;
}
const c: { configuration: string; id: string } = JSON.parse(
sessionStorage.getItem(layoutKey.value) || "{}"

92
src/views/dashboard/List.vue
View File

@ -18,7 +18,7 @@ limitations under the License. -->
<el-input
v-model="searchText"
placeholder="Please input name"
class="input-with-search"
class="input-with-search ml-10"
size="small"
@change="searchDashboards"
>
@ -28,6 +28,10 @@ limitations under the License. -->
</el-button>
</template>
</el-input>
<el-button class="ml-10" size="small" @click="reloadTemplates">
<Icon size="sm" iconName="retry" class="reload" />
{{ t("reloadDashboards") }}
</el-button>
<router-link to="/dashboard/new">
<el-button size="small" type="primary">
+ {{ t("newDashboard") }}
@ -37,7 +41,7 @@ limitations under the License. -->
<div class="table">
<el-table
:data="dashboards"
:style="{ width: '100%', fontSize: '13px' }"
:style="{ fontSize: '13px', width: '100%' }"
v-loading="loading"
ref="multipleTableRef"
:default-sort="{ prop: 'name' }"
@ -46,21 +50,21 @@ limitations under the License. -->
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="Name">
<template #default="scope">
<span class="cp" @click="handleView(scope.row)">{{
<span class="cp name" @click="handleView(scope.row)">{{
scope.row.name
}}</span>
</template>
</el-table-column>
<el-table-column prop="layer" label="Layer" width="200" />
<el-table-column prop="entity" label="Entity" width="200" />
<el-table-column prop="isRoot" label="Root" width="100">
<el-table-column prop="isRoot" label="Root" width="60">
<template #default="scope">
<span>
{{ scope.row.isRoot ? t("yes") : t("no") }}
</span>
</template>
</el-table-column>
<el-table-column label="Operations">
<el-table-column label="Operations" width="350">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.row)">
{{ t("edit") }}
@ -113,6 +117,17 @@ limitations under the License. -->
{{ t("import") }}
</label>
</el-button>
<el-pagination
class="pagination"
background
small
layout="prev, pager, next"
:page-size="pageSize"
:total="dashboardStore.dashboards.length"
@current-change="changePage"
@prev-click="changePage"
@next-click="changePage"
/>
</div>
</div>
</div>
@ -133,6 +148,7 @@ import { EntityType } from "./data";
const { t } = useI18n();
const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore();
const pageSize = 18;
const dashboards = ref<DashboardItem[]>([]);
const searchText = ref<string>("");
const loading = ref<boolean>(false);
@ -147,7 +163,7 @@ const handleSelectionChange = (val: DashboardItem[]) => {
setList();
async function setList() {
await dashboardStore.setDashboards();
dashboards.value = dashboardStore.dashboards;
searchDashboards();
}
async function importTemplates(event: any) {
const arr: any = await readFile(event);
@ -168,7 +184,7 @@ async function importTemplates(event: any) {
(d: DashboardItem) => d.id === item.id
);
const p: DashboardItem = {
name: name,
name: name.split(" ").join("-"),
layer: layer,
entity: entity,
isRoot: false,
@ -192,7 +208,7 @@ function exportTemplates() {
}
);
const templates = arr.map((d: DashboardItem) => {
const key = [d.layer, d.entity, d.name.split(" ").join("-")].join("_");
const key = [d.layer, d.entity, d.name].join("_");
const layout = JSON.parse(sessionStorage.getItem(key) || "{}");
return layout;
});
@ -207,9 +223,7 @@ function handleEdit(row: DashboardItem) {
dashboardStore.setEntity(row.entity);
dashboardStore.setLayer(row.layer);
dashboardStore.setCurrentDashboard(row);
router.push(
`/dashboard/${row.layer}/${row.entity}/${row.name.split(" ").join("-")}`
);
router.push(`/dashboard/${row.layer}/${row.entity}/${row.name}`);
}
function handleView(row: DashboardItem) {
@ -217,9 +231,7 @@ function handleView(row: DashboardItem) {
dashboardStore.setEntity(row.entity);
dashboardStore.setLayer(row.layer);
dashboardStore.setCurrentDashboard(row);
router.push(
`/dashboard/${row.layer}/${row.entity}/${row.name.split(" ").join("-")}`
);
router.push(`/dashboard/${row.layer}/${row.entity}/${row.name}`);
}
async function setRoot(row: DashboardItem) {
@ -228,7 +240,7 @@ async function setRoot(row: DashboardItem) {
for (const d of dashboardStore.dashboards) {
if (d.id === row.id) {
d.isRoot = !row.isRoot;
const key = [d.layer, d.entity, d.name.split(" ").join("-")].join("_");
const key = [d.layer, d.entity, d.name].join("_");
const layout = sessionStorage.getItem(key) || "{}";
const c = {
...JSON.parse(layout).configuration,
@ -258,7 +270,7 @@ async function setRoot(row: DashboardItem) {
d.isRoot === true
) {
d.isRoot = false;
const key = [d.layer, d.entity, d.name.split(" ").join("-")].join("_");
const key = [d.layer, d.entity, d.name].join("_");
const layout = sessionStorage.getItem(key) || "{}";
const c = {
...JSON.parse(layout).configuration,
@ -303,7 +315,11 @@ function handleRename(row: DashboardItem) {
});
}
async function updateName(d: DashboardItem, value: string) {
const key = [d.layer, d.entity, d.name.split(" ").join("-")].join("_");
if (new RegExp(/\s/).test(value)) {
ElMessage.error("The name cannot contain spaces, carriage returns, etc");
return;
}
const key = [d.layer, d.entity, d.name].join("_");
const layout = sessionStorage.getItem(key) || "{}";
const c = {
...JSON.parse(layout).configuration,
@ -337,7 +353,7 @@ async function updateName(d: DashboardItem, value: string) {
const str = [
dashboardStore.currentDashboard.layer,
dashboardStore.currentDashboard.entity,
dashboardStore.currentDashboard.name.split(" ").join("-"),
dashboardStore.currentDashboard.name,
].join("_");
sessionStorage.setItem(
str,
@ -355,15 +371,26 @@ async function handleDelete(row: DashboardItem) {
dashboards.value = dashboardStore.dashboards;
loading.value = false;
sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value));
sessionStorage.removeItem(
`${row.layer}_${row.entity}_${row.name.split(" ").join("-")}`
);
sessionStorage.removeItem(`${row.layer}_${row.entity}_${row.name}`);
}
function searchDashboards() {
function searchDashboards(pageIndex?: any) {
const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
dashboards.value = list.filter((d: { name: string }) =>
const arr = list.filter((d: { name: string }) =>
d.name.includes(searchText.value)
);
dashboards.value = arr.splice(
(pageIndex - 1 || 0) * pageSize,
pageSize * (pageIndex || 1)
);
}
async function reloadTemplates() {
loading.value = true;
await dashboardStore.resetTemplates();
loading.value = false;
}
function changePage(pageIndex: number) {
searchDashboards(pageIndex);
}
</script>
<style lang="scss" scoped>
@ -373,11 +400,12 @@ function searchDashboards() {
.dashboard-list {
padding: 20px;
width: 100%;
overflow: hidden;
}
.input-with-search {
width: 300px;
margin-left: 20px;
width: 250px;
}
.table {
@ -385,6 +413,8 @@ function searchDashboards() {
background-color: #fff;
box-shadow: 0px 1px 4px 0px #00000029;
border-radius: 5px;
width: 100%;
overflow: hidden;
}
.toggle-selection {
@ -392,6 +422,10 @@ function searchDashboards() {
background-color: #fff;
}
.pagination {
float: right;
}
.btn {
width: 220px;
font-size: 13px;
@ -407,4 +441,12 @@ function searchDashboards() {
width: 220px;
cursor: pointer;
}
.name {
color: #409eff;
}
.reload {
margin-right: 3px;
}
</style>

2
src/views/dashboard/New.vue
View File

@ -90,7 +90,7 @@ const onCreate = () => {
entity: states.entity,
layer: states.selectedLayer,
});
const name = states.name.split(" ").join("-");
const name = states.name;
const path = `/dashboard/${states.selectedLayer}/${states.entity}/${name}`;
router.push(path);
};

9
src/views/dashboard/configuration/Widget.vue
View File

@ -65,7 +65,7 @@ limitations under the License. -->
</el-collapse>
</div>
<div class="footer">
<el-button size="small">
<el-button size="small" @click="cancelConfig">
{{ t("cancel") }}
</el-button>
<el-button size="small" type="primary" @click="applyConfig">
@ -112,6 +112,7 @@ export default defineComponent({
index: dashboardStore.selectedGrid.i,
visType: [],
});
const originConfig = dashboardStore.selectedGrid;
function getSource(source: unknown) {
states.source = source;
@ -126,6 +127,11 @@ export default defineComponent({
dashboardStore.setConfigPanel(false);
}
function cancelConfig() {
dashboardStore.selectWidget(originConfig);
dashboardStore.setConfigPanel(false);
}
return {
states,
loading,
@ -134,6 +140,7 @@ export default defineComponent({
configHeight,
dashboardStore,
applyConfig,
cancelConfig,
getSource,
setLoading,
};

11
src/views/dashboard/controls/Widget.vue
View File

@ -105,8 +105,9 @@ export default defineComponent({
const appStore = useAppStoreWithOut();
const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore();
const isList = ListChartTypes.includes(props.data.graph.type || "");
if (props.needQuery || !dashboardStore.currentDashboard.id) {
if ((props.needQuery || !dashboardStore.currentDashboard.id) && !isList) {
queryMetrics();
}
@ -152,7 +153,10 @@ export default defineComponent({
if (props.data.i !== dashboardStore.selectedGrid.i) {
return;
}
if (ListChartTypes.includes(dashboardStore.selectedGrid.graph.type)) {
if (
ListChartTypes.includes(dashboardStore.selectedGrid.graph.type) ||
isList
) {
return;
}
queryMetrics();
@ -161,6 +165,9 @@ export default defineComponent({
watch(
() => [selectorStore.currentService, selectorStore.currentDestService],
() => {
if (isList) {
return;
}
if (
dashboardStore.entity === EntityType[0].value ||
dashboardStore.entity === EntityType[4].value

9
src/views/dashboard/data.ts
View File

@ -204,11 +204,18 @@ export const ServiceRelationTools = [
{ name: "device_hub", content: "Add Topology", id: "addTopology" },
{ name: "save", content: "Apply", id: "apply" },
];
export const PodRelationTools = [
export const EndpointRelationTools = [
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
{ name: "all_inbox", content: "Add Tab", id: "addTab" },
{ name: "save", content: "Apply", id: "apply" },
];
export const InstanceRelationTools = [
{ name: "playlist_add", content: "Add Widget", id: "addWidget" },
{ name: "all_inbox", content: "Add Tab", id: "addTab" },
{ name: "device_hub", content: "Add Topology", id: "addTopology" },
{ name: "save", content: "Apply", id: "apply" },
];
export const ScopeType = [
{ value: "Service", label: "Service", key: 1 },

19
src/views/dashboard/graphs/EndpointList.vue
View File

@ -163,16 +163,21 @@ function clickEndpoint(scope: any) {
layer: dashboardStore.layerId,
entity: EntityType[2].value,
});
if (!d) {
ElMessage.error("No this dashboard");
return;
}
dashboardStore.setEntity(EntityType[2].value);
dashboardStore.setCurrentDashboard(d);
router.push(
`/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${
scope.row.id
}/${d.name.split(" ").join("-")}`
`/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${scope.row.id}/${d.name}`
);
}
function changePage(pageIndex: number) {
endpoints.value = searchEndpoints.value.splice(pageIndex - 1, pageSize);
endpoints.value = searchEndpoints.value.splice(
(pageIndex - 1 || 0) * pageSize,
pageSize * (pageIndex || 1)
);
}
function searchList() {
const currentEndpoints = selectorStore.pods.filter((d: { label: string }) =>
@ -189,6 +194,12 @@ watch(
}
}
);
watch(
() => [selectorStore.currentService],
() => {
queryEndpoints();
}
);
</script>
<style lang="scss" scoped>
@import "./style.scss";

20
src/views/dashboard/graphs/InstanceList.vue
View File

@ -168,18 +168,24 @@ function clickInstance(scope: any) {
layer: dashboardStore.layerId,
entity: EntityType[3].value,
});
if (!d) {
ElMessage.error("No this dashboard");
return;
}
dashboardStore.setCurrentDashboard(d);
dashboardStore.setEntity(d.entity);
router.push(
`/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${
scope.row.id
}/${d.name.split(" ").join("-")}`
`/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${scope.row.id}/${d.name}`
);
}
function changePage(pageIndex: number) {
instances.value = searchInstances.value.splice(pageIndex - 1, pageSize);
instances.value = searchInstances.value.splice(
(pageIndex - 1 || 0) * pageSize,
pageSize * (pageIndex || 1)
);
}
function searchList() {
searchInstances.value = selectorStore.pods.filter((d: { label: string }) =>
d.label.includes(searchText.value)
@ -195,6 +201,12 @@ watch(
}
}
);
watch(
() => [selectorStore.currentService],
() => {
queryInstance();
}
);
</script>
<style lang="scss" scoped>
@import "./style.scss";

13
src/views/dashboard/graphs/ServiceList.vue
View File

@ -179,11 +179,13 @@ function clickService(scope: any) {
layer: dashboardStore.layerId,
entity: EntityType[0].value,
});
if (!d) {
ElMessage.error("No this dashboard");
return;
}
dashboardStore.setCurrentDashboard(d);
dashboardStore.setEntity(d.entity);
const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name
.split(" ")
.join("-")}`;
const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name}`;
router.push(path);
}
@ -224,7 +226,10 @@ function objectSpanMethod(param: any): any {
}
}
function changePage(pageIndex: number) {
services.value = selectorStore.services.splice(pageIndex - 1, pageSize);
services.value = services.value.splice(
(pageIndex - 1 || 0) * pageSize,
pageSize * (pageIndex || 1)
);
}
function searchList() {
searchServices.value = selectorStore.services.filter((d: { label: string }) =>

24
src/views/dashboard/panel/Tool.vue
View File

@ -110,13 +110,15 @@ import {
ServiceTools,
InstanceTools,
EndpointTools,
PodRelationTools,
EndpointRelationTools,
InstanceRelationTools,
ServiceRelationTools,
} from "../data";
import { useSelectorStore } from "@/store/modules/selectors";
import { ElMessage } from "element-plus";
import { Option } from "@/types/app";
import { useI18n } from "vue-i18n";
import { useThrottleFn } from "@vueuse/core";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
@ -124,8 +126,9 @@ const selectorStore = useSelectorStore();
const appStore = useAppStoreWithOut();
const params = useRoute().params;
const type = EntityType.filter((d: Option) => d.value === params.entity)[0];
const toolIcons =
ref<{ name: string; content: string; id: string }[]>(PodRelationTools);
const toolIcons = ref<{ name: string; content: string; id: string }[]>(
EndpointRelationTools
);
const states = reactive<{
destService: string;
destPod: string;
@ -143,6 +146,7 @@ const states = reactive<{
currentDestService: "",
currentDestPod: "",
});
const applyDashboard = useThrottleFn(dashboardStore.saveDashboard, 3000);
if (params.layerId) {
dashboardStore.setLayer(params.layerId);
dashboardStore.setEntity(params.entity);
@ -344,7 +348,7 @@ function setTabControls(id: string) {
dashboardStore.addTabControls("Topology");
break;
case "apply":
dashboardStore.saveDashboard();
applyDashboard();
break;
default:
ElMessage.info("Don't support this control");
@ -373,7 +377,7 @@ function setControls(id: string) {
dashboardStore.addControl("Topology");
break;
case "apply":
dashboardStore.saveDashboard();
applyDashboard();
break;
default:
dashboardStore.addControl("Widget");
@ -446,8 +450,14 @@ function getTools() {
case EntityType[4].value:
toolIcons.value = ServiceRelationTools;
break;
case EntityType[5].value:
toolIcons.value = InstanceRelationTools;
break;
case EntityType[6].value:
toolIcons.value = EndpointRelationTools;
break;
default:
toolIcons.value = PodRelationTools;
toolIcons.value = EndpointRelationTools;
}
}
</script>
@ -501,6 +511,6 @@ function getTools() {
}
.selectorPod {
width: 340px;
width: 300px;
}
</style>

26
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -254,9 +254,7 @@ function handleLinkClick(event: any, d: Call) {
entity: `${e}Relation`,
});
dashboardStore.setEntity(p.entity);
const path = `/dashboard/${p.layer}/${e}Relation/${d.source.id}/${
d.target.id
}/${p.name.split(" ").join("-")}`;
const path = `/dashboard/${p.layer}/${e}Relation/${d.source.id}/${d.target.id}/${p.name}`;
const routeUrl = router.resolve({ path });
window.open(routeUrl.href, "_blank");
dashboardStore.setEntity(origin);
@ -396,9 +394,7 @@ function handleGoEndpoint(name: string) {
entity: EntityType[2].value,
});
dashboardStore.setEntity(p.entity);
const path = `/dashboard/${p.layer}/Endpoint/${topologyStore.node.id}/${name
.split(" ")
.join("-")}`;
const path = `/dashboard/${p.layer}/Endpoint/${topologyStore.node.id}/${name}`;
const routeUrl = router.resolve({ path });
window.open(routeUrl.href, "_blank");
@ -412,9 +408,7 @@ function handleGoInstance(name: string) {
entity: EntityType[3].value,
});
dashboardStore.setEntity(p.entity);
const path = `/dashboard/${p.layer}/ServiceInstance/${
topologyStore.node.id
}/${name.split(" ").join("-")}`;
const path = `/dashboard/${p.layer}/ServiceInstance/${topologyStore.node.id}/${name}`;
const routeUrl = router.resolve({ path });
window.open(routeUrl.href, "_blank");
@ -428,9 +422,7 @@ function handleGoDashboard(name: string) {
entity: EntityType[0].value,
});
dashboardStore.setEntity(p.entity);
const path = `/dashboard/${p.layer}/Service/${topologyStore.node.id}/${name
.split(" ")
.join("-")}`;
const path = `/dashboard/${p.layer}/Service/${topologyStore.node.id}/${name}`;
const routeUrl = router.resolve({ path });
window.open(routeUrl.href, "_blank");
@ -448,7 +440,7 @@ async function backToTopology() {
const resp = await getTopology();
loading.value = false;
if (resp.errors) {
if (resp && resp.errors) {
ElMessage.error(resp.errors);
}
await init();
@ -473,8 +465,12 @@ function setConfig() {
dashboardStore.selectWidget(props.config);
}
function resize() {
height.value = document.body.clientHeight;
width.value = document.body.clientWidth;
const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
height: 40,
width: 0,
};
height.value = dom.height - 40;
width.value = dom.width;
svg.value.attr("height", height.value).attr("width", width.value);
}
function updateSettings(config: any) {

23
src/views/dashboard/related/topology/components/PodTopology.vue
View File

@ -49,7 +49,7 @@ limitations under the License. -->
</div>
<div
class="sankey"
:style="`height:${height}px;width:${width}px;`"
:style="`height:${height - 30}px;width:${width}px;`"
v-loading="loading"
element-loading-background="rgba(0, 0, 0, 0)"
@click="handleClick"
@ -120,6 +120,7 @@ const items = [
onMounted(() => {
loadTopology(selectorStore.currentPod && selectorStore.currentPod.id);
window.addEventListener("resize", resize);
});
async function loadTopology(id: string) {
@ -140,6 +141,15 @@ async function loadTopology(id: string) {
topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
}
function resize() {
const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
height: 40,
width: 0,
};
height.value = dom.height - 40;
width.value = dom.width;
}
function inspect() {
const id = topologyStore.node.id;
topologyStore.setNode(null);
@ -166,9 +176,7 @@ function goDashboard() {
});
dashboardStore.setEntity(entity);
dashboardStore.setCurrentDashboard(d);
const path = `/dashboard/${d.layer}/${entity}/${
topologyStore.node.serviceId
}/${topologyStore.node.id}/${d.name.split(" ").join("-")}`;
const path = `/dashboard/${d.layer}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${d.name}`;
const routeUrl = router.resolve({ path });
window.open(routeUrl.href, "_blank");
topologyStore.setNode(null);
@ -207,9 +215,7 @@ function selectNodeLink(d: any) {
entity,
});
dashboardStore.setEntity(entity);
const path = `/dashboard/${p.layer}/${entity}/${sourceObj.serviceId}/${
sourceObj.id
}/${targetObj.serviceId}/${targetObj.id}/${p.name.split(" ").join("-")}`;
const path = `/dashboard/${p.layer}/${entity}/${sourceObj.serviceId}/${sourceObj.id}/${targetObj.serviceId}/${targetObj.id}/${p.name}`;
const routeUrl = router.resolve({ path });
window.open(routeUrl.href, "_blank");
return;
@ -234,6 +240,9 @@ async function getTopology(id: string) {
Number(depth.value)
);
break;
case EntityType[5].value:
resp = await topologyStore.getInstanceTopology();
break;
case EntityType[4].value:
resp = await topologyStore.getInstanceTopology();
break;