github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 12:49:17 +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
16 changed files with 202 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;