github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 08:17:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

view task detail and logs

Browse Source
This commit is contained in:
Fine 2024-11-21 11:10:40 +08:00
parent f3894d2bff
commit c5a82baca6
2 changed files with 59 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,7 +50,7 @@ export const asyncProfilingStore = defineStore({
if (res.data.errors) { if (res.data.errors) {
return res.data; return res.data;
} }
this.taskList = res.data.data.asyncTaskList || []; this.taskList = res.data.data.asyncTaskList.tasks || [];
this.selectedTask = this.taskList[0] || {}; this.selectedTask = this.taskList[0] || {};
this.setSelectedTask(this.selectedTask); this.setSelectedTask(this.selectedTask);
if (!this.taskList.length) { if (!this.taskList.length) {

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

@ -35,16 +35,16 @@ limitations under the License. -->
> >
<div class="ell"> <div class="ell">
<span>{{ i.endpointName }}</span> <span>{{ i.endpointName }}</span>
<a class="profile-btn r" @click="viewTask($event, i)"> <a class="profile-btn r" @click="viewTaskDetail($event, i)">
<Icon iconName="view" size="middle" /> <Icon iconName="view" size="middle" />
</a> </a>
</div> </div>
<div class="grey ell sm"> <div class="grey ell sm">
<span class="mr-10 sm"> <span class="mr-10 sm">
{{ dateFormat(i.startTime) }} {{ dateFormat(i.createTime) }}
</span> </span>
<span class="mr-10 sm"> <span class="mr-10 sm">
{{ dateFormat(i.startTime + i.duration * 60 * 1000) }} {{ dateFormat(i.createTime + i.duration * 60 * 1000) }}
</span> </span>
</div> </div>
</td> </td>
@ -53,6 +53,57 @@ limitations under the License. -->
</div> </div>
</div> </div>
</div> </div>
<el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
<div class="profile-detail flex-v" v-if="asyncProfilingStore.currentTask">
<div>
<h5 class="mb-10">{{ t("task") }}.</h5>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("id") }}:</span>
<span class="g-sm-8 wba">{{ asyncProfilingStore.currentTask.id }}</span>
</div>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("service") }}:</span>
<span class="g-sm-8 wba">{{ service }}</span>
</div>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("serviceInstanceIds") }}:</span>
<span class="g-sm-8 wba">{{ asyncProfilingStore.currentTask.serviceInstanceIds.join(", ") }}</span>
</div>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("execArgs") }}:</span>
<span class="g-sm-8 wba">{{ asyncProfilingStore.currentTask.execArgs }}</span>
</div>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("duration") }}:</span>
<span class="g-sm-8 wba">{{ asyncProfilingStore.currentTask.duration }}</span>
</div>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("events") }}:</span>
<span class="g-sm-8 wba"> {{ asyncProfilingStore.currentTask.events.join(", ") }} </span>
</div>
</div>
<div>
<h5
class="mb-10 mt-10"
v-show="asyncProfilingStore.currentTask.logs && asyncProfilingStore.currentTask.logs.length"
>
{{ t("logs") }}.
</h5>
<div class="log-item" v-for="(i, index) in Object.keys(instanceLogs)" :key="index">
<div class="mb-10 sm">
<span class="mr-10 grey">{{ t("instance") }}:</span>
<span>{{ i }}</span>
</div>
<div v-for="(d, index) in instanceLogs[i]" :key="index">
<span class="mr-10 grey">{{ t("operationType") }}:</span>
<span class="mr-20">{{ d.operationType }}</span>
<span class="mr-10 grey">{{ t("time") }}:</span>
<span>{{ dateFormat(d.operationTime) }}</span>
</div>
</div>
</div>
</div>
</el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from "vue";
@ -66,23 +117,19 @@ limitations under the License. -->
const { t } = useI18n(); const { t } = useI18n();
const asyncProfilingStore = useAsyncProfilingStore(); const asyncProfilingStore = useAsyncProfilingStore();
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const viewDetail = ref<boolean>(false); const showDetail = ref<boolean>(false);
const service = ref<string>(""); const service = ref<string>("");
// const selectedTask = ref<TaskListItem | Record<string, never>>({}); const selectedTask = ref<TaskListItem | Record<string, never>>({});
const instanceLogs = ref<TaskLog | any>({}); const instanceLogs = ref<TaskLog | any>({});
async function changeTask(item: TaskListItem) { async function changeTask(item: TaskListItem) {
asyncProfilingStore.setCurrentSegment({}); asyncProfilingStore.setCurrentSegment({});
asyncProfilingStore.setCurrentTask(item); asyncProfilingStore.setCurrentTask(item);
const res = await asyncProfilingStore.getSegmentList({ taskID: item.id });
if (res.errors) {
ElMessage.error(res.errors);
}
} }
async function viewTask(e: Event, item: TaskListItem) { async function viewTaskDetail(e: Event, item: TaskListItem) {
e.stopPropagation(); e.stopPropagation();
viewDetail.value = true; showDetail.value = true;
asyncProfilingStore.setCurrentTask(item); asyncProfilingStore.setCurrentTask(item);
service.value = (selectorStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}).label; service.value = (selectorStore.services.filter((s: any) => s.id === item.serviceId)[0] || {}).label;
const res = await asyncProfilingStore.getTaskLogs({ taskID: item.id }); const res = await asyncProfilingStore.getTaskLogs({ taskID: item.id });