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

add loading

Browse Source
This commit is contained in:
Fine 2022-08-22 18:21:02 +08:00
parent 059bd9fedb
commit c29ce4e187
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/store/modules/network-profiling.ts
View File

@ -35,6 +35,7 @@ interface NetworkProfilingState {
selectedMetric: Nullable<LayoutConfig>; selectedMetric: Nullable<LayoutConfig>;
activeMetricIndex: string; activeMetricIndex: string;
aliveNetwork: boolean; aliveNetwork: boolean;
loadNodes: boolean;
} }
export const networkProfilingStore = defineStore({ export const networkProfilingStore = defineStore({
@ -51,6 +52,7 @@ export const networkProfilingStore = defineStore({
selectedMetric: null, selectedMetric: null,
activeMetricIndex: "", activeMetricIndex: "",
aliveNetwork: false, aliveNetwork: false,
loadNodes: false,
}), }),
actions: { actions: {
setSelectedNetworkTask(task: EBPFTaskList) { setSelectedNetworkTask(task: EBPFTaskList) {
@ -160,9 +162,11 @@ export const networkProfilingStore = defineStore({
duration: any; duration: any;
serviceInstanceId: string; serviceInstanceId: string;
}) { }) {
this.loadNodes = true;
const res: AxiosResponse = await graphql const res: AxiosResponse = await graphql
.query("getProcessTopology") .query("getProcessTopology")
.params(params); .params(params);
this.loadNodes = false;
if (res.data.errors) { if (res.data.errors) {
this.nodes = []; this.nodes = [];
this.calls = []; this.calls = [];

10
src/views/dashboard/related/network-profiling/Content.vue
View File

@ -15,10 +15,16 @@ limitations under the License. -->
<template> <template>
<div class="flex-h content"> <div class="flex-h content">
<Tasks /> <Tasks />
<div class="vis-graph ml-5" v-if="networkProfilingStore.nodes.length"> <div
class="vis-graph ml-5"
v-if="networkProfilingStore.nodes.length"
v-loading="networkProfilingStore.loadNodes"
>
<process-topology /> <process-topology />
</div> </div>
<div class="text" v-else>{{ t("noData") }}</div> <div class="text" v-else v-loading="networkProfilingStore.loadNodes">
{{ t("noData") }}
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>