mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-18 14:05:25 +00:00
add conditions
This commit is contained in:
Qiuxia Fan
parent
f2e75f2b9f
commit
38b21da169
@ -75,9 +75,9 @@ export const queryEBPFSchedules = {
|
||||
|
||||
export const analysisEBPFResult = {
|
||||
variable:
|
||||
"$scheduleIdList: [ID!]!, $timeRanges: [EBPFProfilingAnalyzeTimeRange!]!",
|
||||
"$scheduleIdList: [ID!]!, $timeRanges: [EBPFProfilingAnalyzeTimeRange!]!, $aggregateType: EBPFProfilingAnalyzeAggregateType",
|
||||
query: `
|
||||
analysisEBPFResult: analysisEBPFProfilingResult(scheduleIdList: $scheduleIdList, timeRanges: $timeRanges) {
|
||||
analysisEBPFResult: analysisEBPFProfilingResult(scheduleIdList: $scheduleIdList, timeRanges: $timeRanges, aggregateType: $aggregateType) {
|
||||
tip
|
||||
trees {
|
||||
elements {
|
||||
|
||||
@ -55,6 +55,9 @@ export const ebpfStore = defineStore({
|
||||
setCurrentSchedule(s: Trace) {
|
||||
this.currentSchedule = s;
|
||||
},
|
||||
setAnalyzeTrees(tree: AnalyzationTrees[]) {
|
||||
this.analyzeTrees = tree;
|
||||
},
|
||||
async getCreateTaskData(serviceId: string) {
|
||||
const res: AxiosResponse = await graphql
|
||||
.query("getCreateTaskData")
|
||||
@ -125,6 +128,7 @@ export const ebpfStore = defineStore({
|
||||
async getEBPFAnalyze(params: {
|
||||
scheduleIdList: string[];
|
||||
timeRanges: Array<{ start: number; end: number }>;
|
||||
aggregateType: string;
|
||||
}) {
|
||||
if (!params.scheduleIdList.length) {
|
||||
return new Promise((resolve) => resolve({}));
|
||||
|
||||
@ -46,11 +46,13 @@ import EBPFStack from "./components/EBPFStack.vue";
|
||||
.item {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
height: calc(100% - 70px);
|
||||
height: calc(100% - 100px);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.schedules {
|
||||
height: 60px;
|
||||
height: 90px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,74 +13,86 @@ 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="filters flex-h">
|
||||
<Selector
|
||||
:value="selectedLabels"
|
||||
:options="labels"
|
||||
size="small"
|
||||
placeholder="Please select labels"
|
||||
@change="changeLabels"
|
||||
class="inputs mr-10"
|
||||
:multiple="true"
|
||||
/>
|
||||
<el-button type="primary" size="small">
|
||||
<span>{{ duration[0] }}</span>
|
||||
<span> ~ </span>
|
||||
<span>{{ duration[1] }}</span>
|
||||
</el-button>
|
||||
<el-popover placement="bottom" :width="680" trigger="click">
|
||||
<template #reference>
|
||||
<el-button type="primary" size="small">
|
||||
{{ t("processSelect") }}
|
||||
</el-button>
|
||||
</template>
|
||||
<el-input
|
||||
v-model="searchText"
|
||||
placeholder="Please input name"
|
||||
class="input-with-search"
|
||||
<div class="filters">
|
||||
<div class="mb-10">
|
||||
<Selector
|
||||
:value="selectedLabels"
|
||||
:options="labels"
|
||||
size="small"
|
||||
@change="searchProcesses(0)"
|
||||
>
|
||||
<template #append>
|
||||
<el-button size="small">
|
||||
<Icon size="sm" iconName="search" />
|
||||
placeholder="Please select labels"
|
||||
@change="changeLabels"
|
||||
class="inputs mr-10"
|
||||
:multiple="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-h">
|
||||
<Selector
|
||||
:value="aggregateType"
|
||||
:options="AggregateTypes"
|
||||
size="small"
|
||||
placeholder="Please select a type"
|
||||
@change="changeAggregateType"
|
||||
class="selector mr-10"
|
||||
/>
|
||||
<el-button type="primary" size="small">
|
||||
<span>{{ duration[0] }}</span>
|
||||
<span> ~ </span>
|
||||
<span>{{ duration[1] }}</span>
|
||||
</el-button>
|
||||
<el-popover placement="bottom" :width="680" trigger="click">
|
||||
<template #reference>
|
||||
<el-button type="primary" size="small">
|
||||
{{ t("processSelect") }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-table
|
||||
:data="currentProcesses"
|
||||
ref="multipleTableRef"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column
|
||||
v-for="(h, index) of TableHeader"
|
||||
:property="h.property"
|
||||
:label="h.label"
|
||||
:key="index"
|
||||
width="150"
|
||||
/>
|
||||
<el-table-column width="300" label="Attributes">
|
||||
<template #default="scope">
|
||||
{{ scope.row.attributes.map((d: {name: string, value: string}) => `${d.name}=${d.value}`).join("; ") }}
|
||||
<el-input
|
||||
v-model="searchText"
|
||||
placeholder="Please input name"
|
||||
class="input-with-search"
|
||||
size="small"
|
||||
@change="searchProcesses(0)"
|
||||
>
|
||||
<template #append>
|
||||
<el-button size="small">
|
||||
<Icon size="sm" iconName="search" />
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
background
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
:page-size="pageSize"
|
||||
:total="processes.length"
|
||||
@current-change="changePage"
|
||||
@prev-click="changePage"
|
||||
@next-click="changePage"
|
||||
/>
|
||||
</el-popover>
|
||||
<el-button type="primary" size="small" @click="analyzeEBPF">
|
||||
{{ t("analyze") }}
|
||||
</el-button>
|
||||
</el-input>
|
||||
<el-table
|
||||
:data="currentProcesses"
|
||||
ref="multipleTableRef"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column
|
||||
v-for="(h, index) of TableHeader"
|
||||
:property="h.property"
|
||||
:label="h.label"
|
||||
:key="index"
|
||||
width="150"
|
||||
/>
|
||||
<el-table-column width="300" label="Attributes">
|
||||
<template #default="scope">
|
||||
{{ scope.row.attributes.map((d: {name: string, value: string}) => `${d.name}=${d.value}`).join("; ") }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
background
|
||||
small
|
||||
layout="prev, pager, next"
|
||||
:page-size="pageSize"
|
||||
:total="processes.length"
|
||||
@current-change="changePage"
|
||||
@prev-click="changePage"
|
||||
@next-click="changePage"
|
||||
/>
|
||||
</el-popover>
|
||||
<el-button type="primary" size="small" @click="analyzeEBPF">
|
||||
{{ t("analyze") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@ -88,7 +100,7 @@ import { ref, watch } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { Option } from "@/types/app";
|
||||
import { TableHeader } from "./data";
|
||||
import { TableHeader, AggregateTypes } from "./data";
|
||||
import { useEbpfStore } from "@/store/modules/ebpf";
|
||||
import { EBPFProfilingSchedule, Process } from "@/types/ebpf";
|
||||
import { ElMessage, ElTable } from "element-plus";
|
||||
@ -103,6 +115,7 @@ const processes = ref<Process[]>([]);
|
||||
const currentProcesses = ref<Process[]>([]);
|
||||
const selectedLabels = ref<string[]>(["0"]);
|
||||
const searchText = ref<string>("");
|
||||
const aggregateType = ref<string>(AggregateTypes[0].value);
|
||||
const duration = ref<string[]>([]);
|
||||
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
|
||||
dayjs(date).format(pattern);
|
||||
@ -112,6 +125,11 @@ function changeLabels(opt: any[]) {
|
||||
selectedLabels.value = arr;
|
||||
}
|
||||
|
||||
function changeAggregateType(opt: any[]) {
|
||||
aggregateType.value = opt[0].value;
|
||||
ebpfStore.setAnalyzeTrees([]);
|
||||
}
|
||||
|
||||
const handleSelectionChange = (arr: Process[]) => {
|
||||
selectedProcesses.value = arr.map((d: Process) => d.id);
|
||||
};
|
||||
@ -152,6 +170,7 @@ async function analyzeEBPF() {
|
||||
const res = await ebpfStore.getEBPFAnalyze({
|
||||
scheduleIdList,
|
||||
timeRanges,
|
||||
aggregateType: aggregateType.value,
|
||||
});
|
||||
if (res.data.errors) {
|
||||
ElMessage.error(res.data.errors);
|
||||
@ -235,7 +254,7 @@ watch(
|
||||
}
|
||||
|
||||
.inputs {
|
||||
width: 300px;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.input-with-search {
|
||||
@ -246,4 +265,8 @@ watch(
|
||||
.pagination {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.selector {
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,7 +28,15 @@ export const NewTaskField = {
|
||||
maxSamplingCount: { key: 5, label: "5" },
|
||||
};
|
||||
|
||||
export const TargetTypes = [{ label: "ON_CPU", value: "ON_CPU" }];
|
||||
export const TargetTypes = [
|
||||
{ label: "ON_CPU", value: "ON_CPU" },
|
||||
{ label: "OFF_CPU", value: "OFF_CPU" },
|
||||
];
|
||||
|
||||
export const AggregateTypes = [
|
||||
{ label: "Duration", value: "DURATION" },
|
||||
{ label: "Count", value: "COUNT" },
|
||||
];
|
||||
|
||||
export const InitTaskField = {
|
||||
monitorTimeEn: [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user