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

feat: solve the problem of floating loading (#183)

Browse Source
This commit is contained in:
WD 2022-11-17 16:07:18 +08:00 committed by GitHub
parent a0fc879eb1
commit ed6fb0448b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -90,6 +90,7 @@ import {
reactive, reactive,
watch, watch,
computed, computed,
nextTick,
} from "vue"; } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import * as d3 from "d3"; import * as d3 from "d3";
@ -149,6 +150,14 @@ const graphConfig = computed(() => props.config.graph || {});
const depth = ref<number>(graphConfig.value.depth || 2); const depth = ref<number>(graphConfig.value.depth || 2);
onMounted(async () => { 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; loading.value = true;
const json = await selectorStore.fetchServices(dashboardStore.layerId); const json = await selectorStore.fetchServices(dashboardStore.layerId);
if (json.errors) { if (json.errors) {
@ -157,18 +166,13 @@ onMounted(async () => {
} }
const resp = await getTopology(); const resp = await getTopology();
loading.value = false; loading.value = false;
if (resp && resp.errors) { if (resp && resp.errors) {
ElMessage.error(resp.errors); ElMessage.error(resp.errors);
} }
topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []); topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []); topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []); 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); window.addEventListener("resize", resize);
svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg"); svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
await initLegendMetrics(); await initLegendMetrics();
@ -733,4 +737,8 @@ watch(
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
} }
.el-loading-spinner {
top: 30%;
}
</style> </style>