mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-18 14:45:25 +00:00
fix: add loading
This commit is contained in:
parent
db19a7f7fb
commit
e9dc8accc5
@ -19,16 +19,34 @@ limitations under the License. -->
|
|||||||
<SegmentList />
|
<SegmentList />
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<SpanTree />
|
<SpanTree @loading="loadTrees" />
|
||||||
<ThreadStack />
|
<div class="thread-stack">
|
||||||
|
<StackTable
|
||||||
|
v-if="profileStore.analyzeTrees.length"
|
||||||
|
:data="profileStore.analyzeTrees"
|
||||||
|
:highlightTop="profileStore.highlightTop"
|
||||||
|
/>
|
||||||
|
<div class="t-loading" v-show="loading">
|
||||||
|
<Icon :loading="true" iconName="spinner" size="middle" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { ref } from "vue";
|
||||||
import TaskList from "./components/TaskList.vue";
|
import TaskList from "./components/TaskList.vue";
|
||||||
import SegmentList from "./components/SegmentList.vue";
|
import SegmentList from "./components/SegmentList.vue";
|
||||||
import SpanTree from "./components/SpanTree.vue";
|
import SpanTree from "./components/SpanTree.vue";
|
||||||
import ThreadStack from "./components/ThreadStack.vue";
|
import StackTable from "./components/Stack/Index.vue";
|
||||||
|
import { useProfileStore } from "@/store/modules/profile";
|
||||||
|
|
||||||
|
const loading = ref<boolean>(false);
|
||||||
|
const profileStore = useProfileStore();
|
||||||
|
|
||||||
|
function loadTrees(l: boolean) {
|
||||||
|
loading.value = l;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.content {
|
.content {
|
||||||
@ -45,4 +63,21 @@ import ThreadStack from "./components/ThreadStack.vue";
|
|||||||
width: 300px;
|
width: 300px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.thread-stack {
|
||||||
|
padding: 5px 12px;
|
||||||
|
height: calc(50% - 50px);
|
||||||
|
overflow: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-loading {
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
margin-top: 40px;
|
||||||
|
line-height: 88px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -58,11 +58,12 @@ import { Option } from "@/types/app";
|
|||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
import { ProfileMode } from "./data";
|
import { ProfileMode } from "./data";
|
||||||
|
|
||||||
|
/* global defineEmits*/
|
||||||
|
const emits = defineEmits(["loading"]);
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const profileStore = useProfileStore();
|
const profileStore = useProfileStore();
|
||||||
const mode = ref<string>("include");
|
const mode = ref<string>("include");
|
||||||
const message = ref<string>("");
|
const message = ref<string>("");
|
||||||
const loading = ref<boolean>(false);
|
|
||||||
const timeRange = ref<Array<{ start: number; end: number }>>([]);
|
const timeRange = ref<Array<{ start: number; end: number }>>([]);
|
||||||
const traceId = ref<string>("");
|
const traceId = ref<string>("");
|
||||||
const traceIds = computed(() =>
|
const traceIds = computed(() =>
|
||||||
@ -86,13 +87,13 @@ function changeTraceId(opt: Option[]) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function analyzeProfile() {
|
async function analyzeProfile() {
|
||||||
loading.value = true;
|
emits("loading", true);
|
||||||
updateTimeRange();
|
updateTimeRange();
|
||||||
const res = await profileStore.getProfileAnalyze({
|
const res = await profileStore.getProfileAnalyze({
|
||||||
segmentId: profileStore.currentSegment.segmentId,
|
segmentId: profileStore.currentSegment.segmentId,
|
||||||
timeRanges: timeRange.value,
|
timeRanges: timeRange.value,
|
||||||
});
|
});
|
||||||
loading.value = false;
|
emits("loading", false);
|
||||||
if (res.errors) {
|
if (res.errors) {
|
||||||
ElMessage.error(res.errors);
|
ElMessage.error(res.errors);
|
||||||
}
|
}
|
||||||
|
@ -1,44 +0,0 @@
|
|||||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
|
||||||
contributor license agreements. See the NOTICE file distributed with
|
|
||||||
this work for additional information regarding copyright ownership.
|
|
||||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
|
||||||
(the "License"); you may not use this file except in compliance with
|
|
||||||
the License. You may obtain a copy of the License at
|
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
See the License for the specific language governing permissions and
|
|
||||||
limitations under the License. -->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div v-if="profileStore.analyzeTrees.length" class="thread-stack">
|
|
||||||
<StackTable
|
|
||||||
:data="profileStore.analyzeTrees"
|
|
||||||
:highlightTop="profileStore.highlightTop"
|
|
||||||
/>
|
|
||||||
<div class="rk-trace-t-loading" v-show="loading">
|
|
||||||
<Icon iconName="spinner" />
|
|
||||||
</div>
|
|
||||||
<div v-if="message">{{ message }}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
import StackTable from "./Stack/Index.vue";
|
|
||||||
import { useProfileStore } from "@/store/modules/profile";
|
|
||||||
|
|
||||||
const profileStore = useProfileStore();
|
|
||||||
const loading = ref<boolean>(false);
|
|
||||||
const message = ref<string>("");
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.thread-stack {
|
|
||||||
padding: 5px 12px;
|
|
||||||
height: calc(50% - 50px);
|
|
||||||
overflow: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
Loading…
Reference in New Issue
Block a user