This is an automated email from the ASF dual-hosted git repository.
qiuxiafan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new ed6fb04 feat: solve the problem of floating loading (#183)
ed6fb04 is described below
commit ed6fb0448bc780d8b8a9af2b249b9a529de0782b
Author: WD <[email protected]>
AuthorDate: Thu Nov 17 16:07:18 2022 +0800
feat: solve the problem of floating loading (#183)
---
.../dashboard/related/topology/components/Graph.vue | 20 ++++++++++++++------
1 file changed, 14 insertions(+), 6 deletions(-)
diff --git a/src/views/dashboard/related/topology/components/Graph.vue
b/src/views/dashboard/related/topology/components/Graph.vue
index 29e7ce9..911d074 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -90,6 +90,7 @@ import {
reactive,
watch,
computed,
+ nextTick,
} from "vue";
import { useI18n } from "vue-i18n";
import * as d3 from "d3";
@@ -149,6 +150,14 @@ const graphConfig = computed(() => props.config.graph ||
{});
const depth = ref<number>(graphConfig.value.depth || 2);
onMounted(async () => {
+ await nextTick();
+ const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
+ height: 40,
+ width: 0,
+ };
+ height.value = dom.height - 40;
+ width.value = dom.width;
+
loading.value = true;
const json = await selectorStore.fetchServices(dashboardStore.layerId);
if (json.errors) {
@@ -157,18 +166,13 @@ onMounted(async () => {
}
const resp = await getTopology();
loading.value = false;
+
if (resp && resp.errors) {
ElMessage.error(resp.errors);
}
topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
- const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
- height: 40,
- width: 0,
- };
- height.value = dom.height - 40;
- width.value = dom.width;
window.addEventListener("resize", resize);
svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
await initLegendMetrics();
@@ -733,4 +737,8 @@ watch(
stroke-dashoffset: 0;
}
}
+
+.el-loading-spinner {
+ top: 30%;
+}
</style>
