mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-13 16:27:33 +00:00
update task ui
This commit is contained in:
Fine
parent
5b6d926972
commit
01baea1087
6
src/types/ebpf.d.ts
vendored
6
src/types/ebpf.d.ts
vendored
@ -77,3 +77,9 @@ export type ProcessNode = {
|
||||
x?: number;
|
||||
y?: number;
|
||||
};
|
||||
export interface NetworkProfilingRequest {
|
||||
uriRegex: string;
|
||||
when4xx: string;
|
||||
when5xx: string;
|
||||
minDuration: number;
|
||||
}
|
||||
|
||||
@ -0,0 +1,90 @@
|
||||
<!-- 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">
|
||||
<div>
|
||||
<div class="label">URI Regex</div>
|
||||
<el-input size="small" class="profile-input" v-model="states.uriRegex" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">{{ t("minDuration") }} (ms)</div>
|
||||
<el-input
|
||||
size="small"
|
||||
class="profile-input"
|
||||
:min="0"
|
||||
v-model="states.minDuration"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">{{ t("when4xx") }}</div>
|
||||
<Radio
|
||||
class="mb-5"
|
||||
:value="states.when4xx"
|
||||
:options="InitTaskField.Whenxx"
|
||||
@change="changeConfig({ when4xx: $event })"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">{{ t("when5xx") }}</div>
|
||||
<Radio
|
||||
class="mb-5"
|
||||
:value="states.when5xx"
|
||||
:options="InitTaskField.Whenxx"
|
||||
@change="changeConfig({ when5xx: $event })"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import type { PropType } from "vue";
|
||||
import { InitTaskField } from "./data";
|
||||
import { NetworkProfilingRequest } from "@/types/ebpf";
|
||||
|
||||
const props = defineProps({
|
||||
condition: {
|
||||
type: Object as PropType<NetworkProfilingRequest>,
|
||||
default: () => ({ children: [] }),
|
||||
},
|
||||
key: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const states = reactive<NetworkProfilingRequest>(props.condition);
|
||||
|
||||
function changeConfig(params: { [key: string]: number | string }) {
|
||||
const key: string = Object.keys(params)[0];
|
||||
(states as any)[key] = params[key];
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.profile-input {
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
@ -15,76 +15,76 @@ limitations under the License. -->
|
||||
|
||||
<template>
|
||||
<div class="profile-task">
|
||||
<div>
|
||||
<div class="label">URI Regex</div>
|
||||
<el-input size="small" class="profile-input" v-model="states.uriRegex" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">{{ t("minDuration") }} (ms)</div>
|
||||
<el-input
|
||||
size="small"
|
||||
class="profile-input"
|
||||
:min="0"
|
||||
v-model="states.minDuration"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">{{ t("when4xx") }}</div>
|
||||
<Radio
|
||||
class="mb-5"
|
||||
:value="states.when4xx"
|
||||
:options="InitTaskField.Whenxx"
|
||||
@change="changeConfig({ when4xx: $event })"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">{{ t("when5xx") }}</div>
|
||||
<Radio
|
||||
class="mb-5"
|
||||
:value="states.when5xx"
|
||||
:options="InitTaskField.Whenxx"
|
||||
@change="changeConfig({ when5xx: $event })"
|
||||
/>
|
||||
</div>
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item
|
||||
v-for="(item, index) in conditionsList"
|
||||
:key="index"
|
||||
:title="`Condition - ${index + 1}`"
|
||||
>
|
||||
<NewCondition
|
||||
:name="index"
|
||||
:condition="item"
|
||||
:key="index"
|
||||
@change="changeConfig"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<div>
|
||||
<el-button @click="createTask" type="primary" class="create-task-btn">
|
||||
{{ t("createTask") }}
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="createConditions"
|
||||
type="primary"
|
||||
class="create-task-btn"
|
||||
>
|
||||
{{ t("createConditions") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { InitTaskField } from "./data";
|
||||
import NewCondition from "./NewConditions.vue";
|
||||
import { NetworkProfilingRequest } from "@/types/ebpf";
|
||||
|
||||
/* global defineEmits */
|
||||
const emits = defineEmits(["create"]);
|
||||
const { t } = useI18n();
|
||||
const states = reactive<{
|
||||
uriRegex: string;
|
||||
when4xx: string;
|
||||
when5xx: string;
|
||||
minDuration: number;
|
||||
}>({
|
||||
uriRegex: "",
|
||||
when4xx: InitTaskField.Whenxx[0].value,
|
||||
when5xx: InitTaskField.Whenxx[1].value,
|
||||
minDuration: NaN,
|
||||
});
|
||||
const activeNames = ref([1]);
|
||||
const conditionsList = ref<NetworkProfilingRequest[]>([
|
||||
{
|
||||
uriRegex: "",
|
||||
when4xx: InitTaskField.Whenxx[0].value,
|
||||
when5xx: InitTaskField.Whenxx[1].value,
|
||||
minDuration: NaN,
|
||||
},
|
||||
]);
|
||||
|
||||
function changeConfig(params: { [key: string]: number | string }) {
|
||||
function changeConfig(
|
||||
params: { [key: string]: number | string },
|
||||
index: number
|
||||
) {
|
||||
const key: string = Object.keys(params)[0];
|
||||
(states as any)[key] = params[key];
|
||||
(conditionsList.value[index] as any)[key] = params[key];
|
||||
}
|
||||
|
||||
function createTask() {
|
||||
emits("create", {
|
||||
uriRegex: states.uriRegex || undefined,
|
||||
when4xx: states.when4xx === InitTaskField.Whenxx[0].value ? true : false,
|
||||
when5xx: states.when5xx === InitTaskField.Whenxx[0].value ? true : false,
|
||||
minDuration: isNaN(states.minDuration) ? undefined : states.minDuration,
|
||||
const list = conditionsList.value.map((d: NetworkProfilingRequest) => {
|
||||
return {
|
||||
uriRegex: d.uriRegex || undefined,
|
||||
when4xx: d.when4xx === InitTaskField.Whenxx[0].value ? true : false,
|
||||
when5xx: d.when5xx === InitTaskField.Whenxx[0].value ? true : false,
|
||||
minDuration: isNaN(d.minDuration) ? undefined : d.minDuration,
|
||||
};
|
||||
});
|
||||
emits("create", list);
|
||||
}
|
||||
|
||||
function createConditions() {
|
||||
console.log(conditionsList);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@ -93,19 +93,6 @@ function createTask() {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.profile-input {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.create-task-btn {
|
||||
width: 300px;
|
||||
margin-top: 50px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user