github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

add loading

Browse Source
This commit is contained in:
Fine 2024-11-28 16:13:49 +08:00
parent ede9fc40ea
commit 1d8adb5e3c
4 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/store/modules/async-profiling.ts
View File

@ -34,6 +34,7 @@ interface AsyncProfilingState {
taskProgress: Recordable<AsyncProfilerTaskProgress>; taskProgress: Recordable<AsyncProfilerTaskProgress>;
instances: Instance[]; instances: Instance[];
analyzeTrees: AsyncProfilerStackElement[]; analyzeTrees: AsyncProfilerStackElement[];
loadingTree: boolean;
} }
export const asyncProfilingStore = defineStore({ export const asyncProfilingStore = defineStore({
@ -44,6 +45,7 @@ export const asyncProfilingStore = defineStore({
taskProgress: {}, taskProgress: {},
instances: [], instances: [],
analyzeTrees: [], analyzeTrees: [],
loadingTree: false,
}), }),
actions: { actions: {
setSelectedTask(task: Recordable<AsyncProfilingTask>) { setSelectedTask(task: Recordable<AsyncProfilingTask>) {
@ -111,8 +113,9 @@ export const asyncProfilingStore = defineStore({
if (!params.instanceIds.length) { if (!params.instanceIds.length) {
return new Promise((resolve) => resolve({})); return new Promise((resolve) => resolve({}));
} }
this.loadingTree = true;
const res: AxiosResponse = await graphql.query("getAsyncProfileAnalyze").params({ request: params }); const res: AxiosResponse = await graphql.query("getAsyncProfileAnalyze").params({ request: params });
this.loadingTree = false;
if (res.data.errors) { if (res.data.errors) {
this.analyzeTrees = []; this.analyzeTrees = [];
return res.data; return res.data;

2
src/views/dashboard/related/async-profiling/Content.vue
View File

@ -19,7 +19,7 @@ limitations under the License. -->
<div class="mb-20"> <div class="mb-20">
<Filter /> <Filter />
</div> </div>
<div class="stack"> <div class="stack" v-loading="asyncProfilingStore.loadingTree">
<EBPFStack :type="ComponentType" /> <EBPFStack :type="ComponentType" />
</div> </div>
</div> </div>

7
src/views/dashboard/related/async-profiling/components/NewTask.vue
View File

@ -43,7 +43,7 @@ limitations under the License. -->
<el-input size="small" class="profile-input" v-model="execArgs" /> <el-input size="small" class="profile-input" v-model="execArgs" />
</div> </div>
<div> <div>
<el-button @click="createTask" type="primary" class="create-task-btn"> <el-button @click="createTask" type="primary" class="create-task-btn" :loading="loading">
{{ t("createTask") }} {{ t("createTask") }}
</el-button> </el-button>
</div> </div>
@ -67,6 +67,7 @@ limitations under the License. -->
const asyncEvents = ref<string[]>([ProfilingEvents[0].value]); const asyncEvents = ref<string[]>([ProfilingEvents[0].value]);
const duration = ref<string>(DurationOptions[0].value); const duration = ref<string>(DurationOptions[0].value);
const execArgs = ref<string>(""); const execArgs = ref<string>("");
const loading = ref<boolean>(false);
function changeDuration(val: string) { function changeDuration(val: string) {
duration.value = val; duration.value = val;
@ -84,7 +85,9 @@ limitations under the License. -->
events: asyncEvents.value, events: asyncEvents.value,
execArgs: execArgs.value, execArgs: execArgs.value,
}; };
loading.value = true;
const res = await asyncProfilingStore.createTask(params); const res = await asyncProfilingStore.createTask(params);
loading.value = false;
if (res.errors) { if (res.errors) {
ElMessage.error(res.errors); ElMessage.error(res.errors);
return; return;
@ -118,7 +121,7 @@ limitations under the License. -->
} }
.create-task-btn { .create-task-btn {
width: 300px; width: 600px;
margin-top: 50px; margin-top: 50px;
} }
</style> </style>

7
src/views/dashboard/related/async-profiling/components/TaskList.vue
View File

@ -13,8 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="profile-task-list flex-v"> <div class="profile-task-list flex-v" v-loading="loading">
<div class="profile-task-wrapper flex-v">
<div class="profile-t-tool flex-h">{{ t("taskList") }}</div> <div class="profile-t-tool flex-h">{{ t("taskList") }}</div>
<div class="profile-t-wrapper"> <div class="profile-t-wrapper">
<div class="no-data" v-show="!asyncProfilingStore.taskList.length"> <div class="no-data" v-show="!asyncProfilingStore.taskList.length">
@ -50,7 +49,6 @@ limitations under the License. -->
</table> </table>
</div> </div>
</div> </div>
</div>
<el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false"> <el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
<div class="profile-detail flex-v" v-if="asyncProfilingStore.selectedTask.id"> <div class="profile-detail flex-v" v-if="asyncProfilingStore.selectedTask.id">
<div> <div>
@ -143,13 +141,16 @@ limitations under the License. -->
const instanceLogs = ref<TaskLog | any>({}); const instanceLogs = ref<TaskLog | any>({});
const errorInstances = ref<Instance[]>([]); const errorInstances = ref<Instance[]>([]);
const successInstances = ref<Instance[]>([]); const successInstances = ref<Instance[]>([]);
const loading = ref<boolean>(false);
onMounted(() => { onMounted(() => {
fetchTasks(); fetchTasks();
}); });
async function fetchTasks() { async function fetchTasks() {
loading.value = true;
const res = await asyncProfilingStore.getTaskList(); const res = await asyncProfilingStore.getTaskList();
loading.value = false;
if (res.errors) { if (res.errors) {
return ElMessage.error(res.errors); return ElMessage.error(res.errors);
} }