get schedules

This commit is contained in:
Qiuxia Fan 2022-04-19 13:14:51 +08:00
parent 77a940218c
commit 488f4044be
8 changed files with 140 additions and 80 deletions

View File

@ -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
}
}
}`,
};

View File

@ -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}}`;

View File

@ -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
View File

@ -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;
}

View File

@ -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 {

View 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>schedule</div>
</template>

View 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>

View File

@ -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;