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>;
instances: Instance[];
analyzeTrees: AsyncProfilerStackElement[];
loadingTree: boolean;
}
export const asyncProfilingStore = defineStore({
@ -44,6 +45,7 @@ export const asyncProfilingStore = defineStore({
taskProgress: {},
instances: [],
analyzeTrees: [],
loadingTree: false,
}),
actions: {
setSelectedTask(task: Recordable<AsyncProfilingTask>) {
@ -111,8 +113,9 @@ export const asyncProfilingStore = defineStore({
if (!params.instanceIds.length) {
return new Promise((resolve) => resolve({}));
}
this.loadingTree = true;
const res: AxiosResponse = await graphql.query("getAsyncProfileAnalyze").params({ request: params });
this.loadingTree = false;
if (res.data.errors) {
this.analyzeTrees = [];
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">
<Filter />
</div>
<div class="stack">
<div class="stack" v-loading="asyncProfilingStore.loadingTree">
<EBPFStack :type="ComponentType" />
</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" />
</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") }}
</el-button>
</div>
@ -67,6 +67,7 @@ limitations under the License. -->
const asyncEvents = ref<string[]>([ProfilingEvents[0].value]);
const duration = ref<string>(DurationOptions[0].value);
const execArgs = ref<string>("");
const loading = ref<boolean>(false);
function changeDuration(val: string) {
duration.value = val;
@ -84,7 +85,9 @@ limitations under the License. -->
events: asyncEvents.value,
execArgs: execArgs.value,
};
loading.value = true;
const res = await asyncProfilingStore.createTask(params);
loading.value = false;
if (res.errors) {
ElMessage.error(res.errors);
return;
@ -118,7 +121,7 @@ limitations under the License. -->
}
.create-task-btn {
width: 300px;
width: 600px;
margin-top: 50px;
}
</style>

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

@ -13,42 +13,40 @@ 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 class="profile-task-list flex-v">
<div class="profile-task-wrapper flex-v">
<div class="profile-t-tool flex-h">{{ t("taskList") }}</div>
<div class="profile-t-wrapper">
<div class="no-data" v-show="!asyncProfilingStore.taskList.length">
{{ t("noData") }}
</div>
<table class="profile-t">
<tr
class="profile-tr cp"
v-for="(i, index) in asyncProfilingStore.taskList"
@click="changeTask(i)"
:key="index"
:class="{
selected: asyncProfilingStore.selectedTask.id === i.id,
}"
>
<td class="profile-td">
<div class="ell">
<span>{{ i.id }}</span>
<a class="profile-btn r" @click="() => (showDetail = true)">
<Icon iconName="view" size="middle" />
</a>
</div>
<div class="grey ell sm">
<span class="mr-10 sm">
{{ dateFormat(i.createTime) }}
</span>
<span class="mr-10 sm">
{{ dateFormat(i.createTime + i.duration * 60 * 1000) }}
</span>
</div>
</td>
</tr>
</table>
<div class="profile-task-list flex-v" v-loading="loading">
<div class="profile-t-tool flex-h">{{ t("taskList") }}</div>
<div class="profile-t-wrapper">
<div class="no-data" v-show="!asyncProfilingStore.taskList.length">
{{ t("noData") }}
</div>
<table class="profile-t">
<tr
class="profile-tr cp"
v-for="(i, index) in asyncProfilingStore.taskList"
@click="changeTask(i)"
:key="index"
:class="{
selected: asyncProfilingStore.selectedTask.id === i.id,
}"
>
<td class="profile-td">
<div class="ell">
<span>{{ i.id }}</span>
<a class="profile-btn r" @click="() => (showDetail = true)">
<Icon iconName="view" size="middle" />
</a>
</div>
<div class="grey ell sm">
<span class="mr-10 sm">
{{ dateFormat(i.createTime) }}
</span>
<span class="mr-10 sm">
{{ dateFormat(i.createTime + i.duration * 60 * 1000) }}
</span>
</div>
</td>
</tr>
</table>
</div>
</div>
<el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
@ -143,13 +141,16 @@ limitations under the License. -->
const instanceLogs = ref<TaskLog | any>({});
const errorInstances = ref<Instance[]>([]);
const successInstances = ref<Instance[]>([]);
const loading = ref<boolean>(false);
onMounted(() => {
fetchTasks();
});
async function fetchTasks() {
loading.value = true;
const res = await asyncProfilingStore.getTaskList();
loading.value = false;
if (res.errors) {
return ElMessage.error(res.errors);
}