mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-18 10:05:24 +00:00
get schedules
This commit is contained in:
parent
77a940218c
commit
488f4044be
@ -47,3 +47,47 @@ export const queryEBPFTasks = {
|
|||||||
createTime
|
createTime
|
||||||
}`,
|
}`,
|
||||||
};
|
};
|
||||||
|
export const queryEBPFSchedules = {
|
||||||
|
variable: "$taskId: ID!, $duration: Duration!",
|
||||||
|
query: `
|
||||||
|
eBPFSchedules: queryEBPFProfilingSchedules(taskId: $taskId, duration: $duration) {
|
||||||
|
scheduleId
|
||||||
|
taskId
|
||||||
|
process {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
serviceId
|
||||||
|
serviceName
|
||||||
|
instanceId
|
||||||
|
instanceName
|
||||||
|
layer
|
||||||
|
agentId
|
||||||
|
detectType
|
||||||
|
attributes {
|
||||||
|
name
|
||||||
|
value
|
||||||
|
}
|
||||||
|
labels
|
||||||
|
}
|
||||||
|
startTime
|
||||||
|
endTime
|
||||||
|
}`,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const analysisEBPFResult = {
|
||||||
|
variable:
|
||||||
|
"$scheduleIdList: [ID!]!, $timeRanges: [EBPFProfilingAnalyzeTimeRange!]!",
|
||||||
|
query: `
|
||||||
|
analysisEBPFResult: analysisEBPFProfilingResult(scheduleIdList: $scheduleIdList, timeRanges: $timeRanges) {
|
||||||
|
tip
|
||||||
|
trees {
|
||||||
|
elements {
|
||||||
|
id
|
||||||
|
parentId
|
||||||
|
symbol
|
||||||
|
stackType
|
||||||
|
dumpCount
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}`,
|
||||||
|
};
|
||||||
|
@ -19,6 +19,8 @@ import {
|
|||||||
queryCreateTaskData,
|
queryCreateTaskData,
|
||||||
createEBPFTask,
|
createEBPFTask,
|
||||||
queryEBPFTasks,
|
queryEBPFTasks,
|
||||||
|
queryEBPFSchedules,
|
||||||
|
analysisEBPFResult,
|
||||||
} from "../fragments/ebpf";
|
} from "../fragments/ebpf";
|
||||||
|
|
||||||
export const getCreateTaskData = `query queryCreateTaskData(${queryCreateTaskData.variable}) {${queryCreateTaskData.query}}`;
|
export const getCreateTaskData = `query queryCreateTaskData(${queryCreateTaskData.variable}) {${queryCreateTaskData.query}}`;
|
||||||
@ -26,3 +28,7 @@ export const getCreateTaskData = `query queryCreateTaskData(${queryCreateTaskDat
|
|||||||
export const saveEBPFTask = `mutation createEBPFTask(${createEBPFTask.variable}) {${createEBPFTask.query}}`;
|
export const saveEBPFTask = `mutation createEBPFTask(${createEBPFTask.variable}) {${createEBPFTask.query}}`;
|
||||||
|
|
||||||
export const getEBPFTasks = `query queryEBPFTasks(${queryEBPFTasks.variable}) {${queryEBPFTasks.query}}`;
|
export const getEBPFTasks = `query queryEBPFTasks(${queryEBPFTasks.variable}) {${queryEBPFTasks.query}}`;
|
||||||
|
|
||||||
|
export const getEBPFSchedules = `query queryEBPFSchedules(${queryEBPFSchedules.variable}) {${queryEBPFSchedules.query}}`;
|
||||||
|
|
||||||
|
export const getEBPFResult = `query analysisEBPFResult(${analysisEBPFResult.variable}) {${analysisEBPFResult.query}}`;
|
||||||
|
@ -22,7 +22,7 @@ import {
|
|||||||
ProfileAnalyzationTrees,
|
ProfileAnalyzationTrees,
|
||||||
TaskLog,
|
TaskLog,
|
||||||
} from "@/types/profile";
|
} from "@/types/profile";
|
||||||
import { EBPFTaskCreationRequest } from "@/types/ebpf";
|
import { EBPFTaskCreationRequest, EBPFProfilingSchedule } from "@/types/ebpf";
|
||||||
import { Trace, Span } from "@/types/trace";
|
import { Trace, Span } from "@/types/trace";
|
||||||
import { store } from "@/store";
|
import { store } from "@/store";
|
||||||
import graphql from "@/graphql";
|
import graphql from "@/graphql";
|
||||||
@ -32,8 +32,8 @@ import { useAppStoreWithOut } from "@/store/modules/app";
|
|||||||
interface EbpfStore {
|
interface EbpfStore {
|
||||||
durationTime: Duration;
|
durationTime: Duration;
|
||||||
taskList: TaskListItem[];
|
taskList: TaskListItem[];
|
||||||
segmentList: Trace[];
|
eBPFSchedules: EBPFProfilingSchedule[];
|
||||||
currentSegment: Trace | Record<string, never>;
|
currentSchedule: EBPFProfilingSchedule | Record<string, never>;
|
||||||
segmentSpans: SegmentSpan[];
|
segmentSpans: SegmentSpan[];
|
||||||
currentSpan: SegmentSpan | Record<string, never>;
|
currentSpan: SegmentSpan | Record<string, never>;
|
||||||
analyzeTrees: ProfileAnalyzationTrees;
|
analyzeTrees: ProfileAnalyzationTrees;
|
||||||
@ -48,8 +48,8 @@ export const ebpfStore = defineStore({
|
|||||||
state: (): EbpfStore => ({
|
state: (): EbpfStore => ({
|
||||||
durationTime: useAppStoreWithOut().durationTime,
|
durationTime: useAppStoreWithOut().durationTime,
|
||||||
taskList: [],
|
taskList: [],
|
||||||
segmentList: [],
|
eBPFSchedules: [],
|
||||||
currentSegment: {},
|
currentSchedule: {},
|
||||||
segmentSpans: [],
|
segmentSpans: [],
|
||||||
currentSpan: {},
|
currentSpan: {},
|
||||||
analyzeTrees: [],
|
analyzeTrees: [],
|
||||||
@ -62,8 +62,8 @@ export const ebpfStore = defineStore({
|
|||||||
setCurrentSpan(span: Span) {
|
setCurrentSpan(span: Span) {
|
||||||
this.currentSpan = span;
|
this.currentSpan = span;
|
||||||
},
|
},
|
||||||
setCurrentSegment(s: Trace) {
|
setCurrentSchedule(s: Trace) {
|
||||||
this.currentSegment = s;
|
this.currentSchedule = s;
|
||||||
},
|
},
|
||||||
setHighlightTop() {
|
setHighlightTop() {
|
||||||
this.highlightTop = !this.highlightTop;
|
this.highlightTop = !this.highlightTop;
|
||||||
@ -83,6 +83,17 @@ export const ebpfStore = defineStore({
|
|||||||
});
|
});
|
||||||
return res.data;
|
return res.data;
|
||||||
},
|
},
|
||||||
|
async createTask(param: EBPFTaskCreationRequest) {
|
||||||
|
const res: AxiosResponse = await graphql
|
||||||
|
.query("saveEBPFTask")
|
||||||
|
.params({ request: param });
|
||||||
|
|
||||||
|
if (res.data.errors) {
|
||||||
|
return res.data;
|
||||||
|
}
|
||||||
|
this.getTaskList(param.serviceId);
|
||||||
|
return res.data;
|
||||||
|
},
|
||||||
async getTaskList(serviceId: string) {
|
async getTaskList(serviceId: string) {
|
||||||
const res: AxiosResponse = await graphql
|
const res: AxiosResponse = await graphql
|
||||||
.query("getEBPFTasks")
|
.query("getEBPFTasks")
|
||||||
@ -95,61 +106,38 @@ export const ebpfStore = defineStore({
|
|||||||
|
|
||||||
return res.data;
|
return res.data;
|
||||||
},
|
},
|
||||||
async getSegmentList(params: { taskID: string }) {
|
async getEBPFSchedules(params: { taskID: string; duration: Duration }) {
|
||||||
const res: AxiosResponse = await graphql
|
const res: AxiosResponse = await graphql
|
||||||
.query("getProfileTaskSegmentList")
|
.query("getEBPFSchedules")
|
||||||
.params(params);
|
.params(params);
|
||||||
|
|
||||||
if (res.data.errors) {
|
if (res.data.errors) {
|
||||||
this.segmentList = [];
|
this.eBPFSchedules = [];
|
||||||
return res.data;
|
return res.data;
|
||||||
}
|
}
|
||||||
const { segmentList } = res.data.data;
|
const { eBPFSchedules } = res.data.data;
|
||||||
|
|
||||||
this.segmentList = segmentList;
|
this.eBPFSchedules = eBPFSchedules;
|
||||||
if (!segmentList.length) {
|
if (!eBPFSchedules.length) {
|
||||||
this.segmentSpans = [];
|
this.eBPFSchedules = [];
|
||||||
this.analyzeTrees = [];
|
this.analyzeTrees = [];
|
||||||
|
|
||||||
return res.data;
|
return res.data;
|
||||||
}
|
}
|
||||||
if (segmentList[0]) {
|
// if (eBPFSchedules[0]) {
|
||||||
this.currentSegment = segmentList[0];
|
// this.currentSchedule = eBPFSchedules[0];
|
||||||
this.getSegmentSpans({ segmentId: segmentList[0].segmentId });
|
// this.getEBPFAnalyze({ scheduleIdList: eBPFSchedules[0].segmentId });
|
||||||
} else {
|
// } else {
|
||||||
this.currentSegment = null;
|
// this.currentSchedule = null;
|
||||||
}
|
// }
|
||||||
return res.data;
|
return res.data;
|
||||||
},
|
},
|
||||||
async getSegmentSpans(params: { segmentId: string }) {
|
async getEBPFAnalyze(params: {
|
||||||
const res: AxiosResponse = await graphql
|
scheduleIdList: string[];
|
||||||
.query("queryProfileSegment")
|
|
||||||
.params(params);
|
|
||||||
if (res.data.errors) {
|
|
||||||
this.segmentSpans = [];
|
|
||||||
return res.data;
|
|
||||||
}
|
|
||||||
const { segment } = res.data.data;
|
|
||||||
if (!segment) {
|
|
||||||
this.segmentSpans = [];
|
|
||||||
this.analyzeTrees = [];
|
|
||||||
return res.data;
|
|
||||||
}
|
|
||||||
this.segmentSpans = segment.spans;
|
|
||||||
if (!(segment.spans && segment.spans.length)) {
|
|
||||||
this.analyzeTrees = [];
|
|
||||||
return res.data;
|
|
||||||
}
|
|
||||||
const index = segment.spans.length - 1 || 0;
|
|
||||||
this.currentSpan = segment.spans[index];
|
|
||||||
return res.data;
|
|
||||||
},
|
|
||||||
async getProfileAnalyze(params: {
|
|
||||||
segmentId: string;
|
|
||||||
timeRanges: Array<{ start: number; end: number }>;
|
timeRanges: Array<{ start: number; end: number }>;
|
||||||
}) {
|
}) {
|
||||||
const res: AxiosResponse = await graphql
|
const res: AxiosResponse = await graphql
|
||||||
.query("getProfileAnalyze")
|
.query("getEBPFResult")
|
||||||
.params(params);
|
.params(params);
|
||||||
|
|
||||||
if (res.data.errors) {
|
if (res.data.errors) {
|
||||||
@ -169,29 +157,6 @@ export const ebpfStore = defineStore({
|
|||||||
this.analyzeTrees = analyze.trees;
|
this.analyzeTrees = analyze.trees;
|
||||||
return res.data;
|
return res.data;
|
||||||
},
|
},
|
||||||
async createTask(param: EBPFTaskCreationRequest) {
|
|
||||||
const res: AxiosResponse = await graphql
|
|
||||||
.query("saveEBPFTask")
|
|
||||||
.params({ request: param });
|
|
||||||
|
|
||||||
if (res.data.errors) {
|
|
||||||
return res.data;
|
|
||||||
}
|
|
||||||
console.log(res.data.data);
|
|
||||||
// this.getTaskList();
|
|
||||||
return res.data;
|
|
||||||
},
|
|
||||||
async getTaskLogs(param: { taskID: string }) {
|
|
||||||
const res: AxiosResponse = await graphql
|
|
||||||
.query("getProfileTaskLogs")
|
|
||||||
.params(param);
|
|
||||||
|
|
||||||
if (res.data.errors) {
|
|
||||||
return res.data;
|
|
||||||
}
|
|
||||||
this.taskLogs = res.data.data.taskLogs;
|
|
||||||
return res.data;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
8
src/types/ebpf.d.ts
vendored
8
src/types/ebpf.d.ts
vendored
@ -34,3 +34,11 @@ export interface EBPFTaskList {
|
|||||||
createTime: number;
|
createTime: number;
|
||||||
triggerType: string;
|
triggerType: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface EBPFProfilingSchedule {
|
||||||
|
scheduleId: string;
|
||||||
|
taskId: string;
|
||||||
|
process: string;
|
||||||
|
endTime: number;
|
||||||
|
startTime: number;
|
||||||
|
}
|
||||||
|
@ -15,10 +15,16 @@ limitations under the License. -->
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex-h content">
|
<div class="flex-h content">
|
||||||
<TaskList />
|
<TaskList />
|
||||||
|
<div class="vis-graph">
|
||||||
|
<EBPFSchedules />
|
||||||
|
<EBPFTree />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import TaskList from "./components/TaskList.vue";
|
import TaskList from "./components/TaskList.vue";
|
||||||
|
import EBPFSchedules from "./components/EBPFSchedules.vue";
|
||||||
|
import EBPFTree from "./components/EBPFTree.vue";
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.content {
|
.content {
|
||||||
|
@ -0,0 +1,17 @@
|
|||||||
|
<!-- 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>schedule</div>
|
||||||
|
</template>
|
17
src/views/dashboard/related/ebpf/components/EBPFTree.vue
Normal file
17
src/views/dashboard/related/ebpf/components/EBPFTree.vue
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!-- 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>tree</div>
|
||||||
|
</template>
|
@ -30,7 +30,7 @@ limitations under the License. -->
|
|||||||
<td
|
<td
|
||||||
class="profile-td"
|
class="profile-td"
|
||||||
:class="{
|
:class="{
|
||||||
selected: selectedTask.taskId === i.id,
|
selected: selectedTask.taskId === i.taskId,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div class="ell">
|
<div class="ell">
|
||||||
@ -105,10 +105,12 @@ import { ref } from "vue";
|
|||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useEbpfStore } from "@/store/modules/ebpf";
|
import { useEbpfStore } from "@/store/modules/ebpf";
|
||||||
|
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||||
import { EBPFTaskList } from "@/types/ebpf";
|
import { EBPFTaskList } from "@/types/ebpf";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
const appStore = useAppStoreWithOut();
|
||||||
const ebpfStore = useEbpfStore();
|
const ebpfStore = useEbpfStore();
|
||||||
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
||||||
dayjs(date).format(pattern);
|
dayjs(date).format(pattern);
|
||||||
@ -117,7 +119,10 @@ const viewDetail = ref<boolean>(false);
|
|||||||
|
|
||||||
async function changeTask(item: EBPFTaskList) {
|
async function changeTask(item: EBPFTaskList) {
|
||||||
selectedTask.value = item;
|
selectedTask.value = item;
|
||||||
const res = await ebpfStore.getSegmentList({ taskID: item.taskId });
|
const res = await ebpfStore.getEBPFSchedules({
|
||||||
|
taskId: item.taskId,
|
||||||
|
duration: appStore.durationTime,
|
||||||
|
});
|
||||||
if (res.errors) {
|
if (res.errors) {
|
||||||
ElMessage.error(res.errors);
|
ElMessage.error(res.errors);
|
||||||
}
|
}
|
||||||
@ -126,7 +131,7 @@ async function changeTask(item: EBPFTaskList) {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.profile-task-list {
|
.profile-task-list {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: calc((100% - 60px) / 2);
|
height: calc(100% - 30px);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -168,10 +173,6 @@ async function changeTask(item: EBPFTaskList) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-segment {
|
|
||||||
border-top: 1px solid rgba(0, 0, 0, 0.07);
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-t-tool {
|
.profile-t-tool {
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -180,10 +181,6 @@ async function changeTask(item: EBPFTaskList) {
|
|||||||
background: #f3f4f9;
|
background: #f3f4f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-item {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-btn {
|
.profile-btn {
|
||||||
color: #3d444f;
|
color: #3d444f;
|
||||||
padding: 1px 3px;
|
padding: 1px 3px;
|
||||||
|
Loading…
Reference in New Issue
Block a user