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

get task list

Browse Source
This commit is contained in:
Qiuxia Fan 2022-04-18 21:19:58 +08:00
parent 3f1463068c
commit fade4ca93f
9 changed files with 212 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/assets/icons/view.svg Normal file
View File

@ -0,0 +1,15 @@
<!-- 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. -->
<svg t="1650287922642" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3055" width="48" height="48"><path d="M277.333333 325.333333m5.333334 0l325.333333 0q5.333333 0 5.333333 5.333334l0 64q0 5.333333-5.333333 5.333333l-325.333333 0q-5.333333 0-5.333334-5.333333l0-64q0-5.333333 5.333334-5.333334Z" p-id="3056" fill="#707070"></path><path d="M277.333333 474.666667m5.333334 0l325.333333 0q5.333333 0 5.333333 5.333333l0 64q0 5.333333-5.333333 5.333333l-325.333333 0q-5.333333 0-5.333334-5.333333l0-64q0-5.333333 5.333334-5.333333Z" p-id="3057" fill="#707070"></path><path d="M277.333333 624m5.333334 0l247.36 0q5.333333 0 5.333333 5.333333l0 64q0 5.333333-5.333333 5.333334l-247.36 0q-5.333333 0-5.333334-5.333334l0-64q0-5.333333 5.333334-5.333333Z" p-id="3058" fill="#707070"></path><path d="M565.333333 842.666667H186.666667a5.333333 5.333333 0 0 1-5.333334-5.333334V186.666667a5.333333 5.333333 0 0 1 5.333334-5.333334h522.666666v346.24a5.333333 5.333333 0 0 0 5.333334 5.333334h64a5.333333 5.333333 0 0 0 5.333333-5.333334V106.666667H112a5.333333 5.333333 0 0 0-5.333333 5.333333v800a5.333333 5.333333 0 0 0 5.333333 5.333333h453.333333a5.333333 5.333333 0 0 0 5.333334-5.333333v-64a5.333333 5.333333 0 0 0-5.333334-5.333333z" p-id="3059" fill="#707070"></path><path d="M868.426667 723.786667a144.64 144.64 0 1 0-144.64 144.64 144.64 144.64 0 0 0 144.64-144.64z m-144.64 69.973333a69.973333 69.973333 0 1 1 69.973333-69.973333 70.026667 70.026667 0 0 1-69.973333 69.973333z" p-id="3060" fill="#707070"></path><path d="M811.758007 864.533065m3.771237-3.771236l45.254834-45.254834q3.771236-3.771236 7.542472 0l45.254834 45.254834q3.771236 3.771236 0 7.542472l-45.254834 45.254834q-3.771236 3.771236-7.542472 0l-45.254834-45.254834q-3.771236-3.771236 0-7.542472Z" p-id="3061" fill="#707070"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

13
src/graphql/fragments/ebpf.ts
View File

@ -32,3 +32,16 @@ export const createEBPFTask = {
id
}`,
};
export const queryEBPFTasks = {
variable: "$serviceId: ID!",
query: `
queryEBPFTasks: queryEBPFProfilingTasks(serviceId: $serviceId) {
taskId
processLabels
taskStartTime
triggerType
fixedTriggerDuration
targetType
createTime
}`,
};

8
src/graphql/query/ebpf.ts
View File

@ -15,8 +15,14 @@
* limitations under the License.
*/
import { queryCreateTaskData, createEBPFTask } from "../fragments/ebpf";
import {
queryCreateTaskData,
createEBPFTask,
queryEBPFTasks,
} from "../fragments/ebpf";
export const getCreateTaskData = `query queryCreateTaskData(${queryCreateTaskData.variable}) {${queryCreateTaskData.query}}`;
export const saveEBPFTask = `mutation createEBPFTask(${createEBPFTask.variable}) {${createEBPFTask.query}}`;
export const getEBPFTasks = `query queryEBPFTasks(${queryEBPFTasks.variable}) {${queryEBPFTasks.query}}`;

24
src/store/modules/ebpf.ts
View File

@ -31,7 +31,6 @@ import { useAppStoreWithOut } from "@/store/modules/app";
interface EbpfStore {
durationTime: Duration;
condition: { serviceId: string; endpointName: string };
taskList: TaskListItem[];
segmentList: Trace[];
currentSegment: Trace | Record<string, never>;
@ -48,7 +47,6 @@ export const ebpfStore = defineStore({
id: "eBPF",
state: (): EbpfStore => ({
durationTime: useAppStoreWithOut().durationTime,
condition: { serviceId: "", endpointName: "" },
taskList: [],
segmentList: [],
currentSegment: {},
@ -61,12 +59,6 @@ export const ebpfStore = defineStore({
couldProfiling: false,
}),
actions: {
setConditions(data: { serviceId?: string; endpointName?: string }) {
this.condition = {
...this.condition,
...data,
};
},
setCurrentSpan(span: Span) {
this.currentSpan = span;
},
@ -91,24 +83,16 @@ export const ebpfStore = defineStore({
});
return res.data;
},
async getTaskList() {
async getTaskList(serviceId: string) {
const res: AxiosResponse = await graphql
.query("getProfileTaskList")
.params(this.condition);
.query("getEBPFTasks")
.params({ serviceId });
if (res.data.errors) {
return res.data;
}
const list = res.data.data.taskList;
this.taskList = list;
if (!list.length) {
this.segmentList = [];
this.segmentSpans = [];
this.analyzeTrees = [];
this.taskList = res.data.data.queryEBPFTasks || [];
return res.data;
}
this.getSegmentList({ taskID: list[0].id });
return res.data;
},
async getSegmentList(params: { taskID: string }) {

13
src/views/dashboard/related/ebpf/Content.vue
View File

@ -13,5 +13,16 @@ 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>content</div>
<div class="flex-h content">
<TaskList />
</div>
</template>
<script lang="ts" setup>
import TaskList from "./components/TaskList.vue";
</script>
<style lang="scss" scoped>
.content {
height: calc(100% - 30px);
width: 100%;
}
</style>

21
src/views/dashboard/related/ebpf/Header.vue
View File

@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="flex-h header">
<el-button class="search-btn" size="small" @click="createTask">
<div>eBPF Profile</div>
<el-button class="new-btn" size="small" @click="createTask">
{{ t("newTask") }}
</el-button>
</div>
@ -43,18 +44,14 @@ const appStore = useAppStoreWithOut();
const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore();
const { t } = useI18n();
const endpointName = ref<string>("");
const newTask = ref<boolean>(false);
// searchTasks();
searchTasks();
async function searchTasks() {
ebpfStore.setConditions({
serviceId:
(selectorStore.currentService && selectorStore.currentService.id) || "",
endpointName: endpointName.value,
});
const res = await ebpfStore.getTaskList();
const serviceId =
(selectorStore.currentService && selectorStore.currentService.id) || "";
const res = await ebpfStore.getTaskList(serviceId);
if (res.errors) {
ElMessage.error(res.errors);
@ -66,7 +63,7 @@ async function createTask() {
return;
}
newTask.value = true;
await ebpfStore.getCreateTaskData(selectorStore.currentService.id);
ebpfStore.getCreateTaskData(selectorStore.currentService.id);
}
watch(
@ -94,4 +91,8 @@ watch(
.name {
width: 270px;
}
.new-btn {
float: right;
}
</style>

5
src/views/dashboard/related/ebpf/components/NewTask.vue
View File

@ -124,9 +124,8 @@ async function createTask() {
ElMessage.error(res.errors);
return;
}
const { tip } = res.data;
if (tip) {
ElMessage.error(tip);
if (!res.data.createTaskData.status) {
ElMessage.error(res.data.createTaskData.errorReason);
return;
}
ElMessage.success("Task created successfully");

147
src/views/dashboard/related/ebpf/components/TaskList.vue Normal file
View File

@ -0,0 +1,147 @@
<!-- 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 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="!ebpfStore.taskList.length">
{{ t("noData") }}
</div>
<table class="profile-t">
<tr
class="profile-tr cp"
v-for="(i, index) in ebpfStore.taskList"
@click="changeTask(i)"
:key="index"
>
<td
class="profile-td"
:class="{
selected: selectedTask.id === i.id,
}"
>
<div class="ell">
<span>{{ i.processLabels.join(" ") }}</span>
<a class="profile-btn r">
<Icon iconName="view" size="middle" />
</a>
</div>
<div class="grey ell sm">
<span class="mr-10 sm">{{ dateFormat(i.taskStartTime) }}</span>
<span class="mr-10 sm">
{{
dateFormat(i.taskStartTime + i.fixedTriggerDuration * 1000)
}}
</span>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
import { useEbpfStore } from "@/store/modules/ebpf";
import { TaskListItem } from "@/types/profile";
import { ElMessage } from "element-plus";
const { t } = useI18n();
const ebpfStore = useEbpfStore();
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
dayjs(date).format(pattern);
const selectedTask = ref<TaskListItem | Record<string, never>>({});
async function changeTask(item: TaskListItem) {
selectedTask.value = item;
const res = await ebpfStore.getSegmentList({ taskID: item.id });
if (res.errors) {
ElMessage.error(res.errors);
}
}
</script>
<style lang="scss" scoped>
.profile-task-list {
width: 300px;
height: calc((100% - 60px) / 2);
overflow: auto;
}
.item span {
height: 21px;
}
.profile-td {
padding: 5px 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
&.selected {
background-color: #ededed;
}
}
.no-data {
text-align: center;
margin-top: 10px;
}
.profile-t-wrapper {
overflow: auto;
flex-grow: 1;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.profile-t {
width: 100%;
border-spacing: 0;
table-layout: fixed;
flex-grow: 1;
position: relative;
}
.profile-tr {
&:hover {
background-color: rgba(0, 0, 0, 0.04);
}
}
.profile-segment {
border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.profile-t-tool {
padding: 5px 10px;
font-weight: bold;
border-right: 1px solid rgba(0, 0, 0, 0.07);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
background: #f3f4f9;
}
.log-item {
margin-top: 20px;
}
.profile-btn {
color: #3d444f;
padding: 1px 3px;
border-radius: 2px;
font-size: 12px;
float: right;
}
</style>

2
src/views/dashboard/related/profile/components/TaskList.vue
View File

@ -36,7 +36,7 @@ limitations under the License. -->
<div class="ell">
<span>{{ i.endpointName }}</span>
<a class="profile-btn r" @click="viewTask($event, i)">
<Icon iconName="library_books" size="middle" />
<Icon iconName="view" size="middle" />
</a>
</div>
<div class="grey ell sm">