mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-13 16:27:33 +00:00
add ui for new task config
This commit is contained in:
Fine
parent
23e9742946
commit
9ba96c6a81
@ -42,7 +42,7 @@ import type { PropType } from "vue";
|
||||
|
||||
interface Option {
|
||||
label: string | number;
|
||||
value: string | number;
|
||||
value: string | number | boolean;
|
||||
}
|
||||
|
||||
/*global defineProps, defineEmits*/
|
||||
|
||||
@ -0,0 +1,105 @@
|
||||
<!-- 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">{{ t("uriRegex") }}</div>
|
||||
<el-input size="small" class="profile-input" v-model="states.uriRegex" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">{{ t("minThreshold") }} (ms)</div>
|
||||
<el-input-number
|
||||
size="small"
|
||||
class="profile-input"
|
||||
:min="0"
|
||||
v-model="states.minDuration"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">{{ t("monitorTime") }}</div>
|
||||
<div>
|
||||
<Selector
|
||||
size="small"
|
||||
:value="states.when4xx"
|
||||
:options="InitTaskField.When4xx"
|
||||
placeholder="Select a data"
|
||||
@change="changeConfig({ when4xx: states.when4xx })"
|
||||
class="profile-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">{{ t("minThreshold") }} (ms)</div>
|
||||
<el-input-number
|
||||
size="small"
|
||||
class="profile-input"
|
||||
:min="0"
|
||||
v-model="states.minDuration"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<el-button @click="createTask" type="primary" class="create-task-btn">
|
||||
{{ t("createTask") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { InitTaskField } from "./data";
|
||||
/* global defineEmits */
|
||||
const emits = defineEmits(["close"]);
|
||||
const { t } = useI18n();
|
||||
const states = reactive<any>({
|
||||
uriRegex: "",
|
||||
when4xx: true,
|
||||
minDuration: NaN,
|
||||
});
|
||||
|
||||
function changeConfig(params: { [key: string]: unknown }) {
|
||||
const key = Object.keys(params)[0];
|
||||
states[key] = params[key];
|
||||
}
|
||||
|
||||
async function createTask() {
|
||||
emits("close");
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.profile-task {
|
||||
margin: 0 auto;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
@ -17,24 +17,13 @@ limitations under the License. -->
|
||||
<div class="profile-task-wrapper flex-v">
|
||||
<div class="profile-t-tool">
|
||||
<span>{{ t("taskList") }}</span>
|
||||
<span v-if="inProcess" class="new-task cp" @click="createTask">
|
||||
<span class="new-task cp" @click="createTask">
|
||||
<Icon
|
||||
:style="{ color: '#ccc' }"
|
||||
:style="{ color: inProcess ? '#ccc' : '#000' }"
|
||||
iconName="library_add"
|
||||
size="middle"
|
||||
/>
|
||||
</span>
|
||||
<el-popconfirm
|
||||
title="Are you sure to create a task?"
|
||||
@confirm="createTask"
|
||||
v-else
|
||||
>
|
||||
<template #reference>
|
||||
<span class="new-task cp">
|
||||
<Icon iconName="library_add" size="middle" />
|
||||
</span>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<div class="profile-t-wrapper">
|
||||
<div
|
||||
@ -87,6 +76,14 @@ limitations under the License. -->
|
||||
>
|
||||
<TaskDetails :details="networkProfilingStore.selectedNetworkTask" />
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
v-model="newTask"
|
||||
:destroy-on-close="true"
|
||||
fullscreen
|
||||
@closed="newTask = false"
|
||||
>
|
||||
<NewTask />
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from "vue";
|
||||
@ -99,13 +96,15 @@ import TaskDetails from "../../components/TaskDetails.vue";
|
||||
import dateFormatStep, { dateFormat } from "@/utils/dateFormat";
|
||||
import getLocalTime from "@/utils/localtime";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import NewTask from "./NewTask.vue";
|
||||
|
||||
/*global Nullable */
|
||||
const { t } = useI18n();
|
||||
const selectorStore = useSelectorStore();
|
||||
const networkProfilingStore = useNetworkProfilingStore();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const viewDetail = ref<boolean>(false);
|
||||
/*global Nullable */
|
||||
const newTask = ref<boolean>(false);
|
||||
const intervalFn = ref<Nullable<any>>(null);
|
||||
const intervalKeepAlive = ref<Nullable<any>>(null);
|
||||
const inProcess = ref<boolean>(false);
|
||||
@ -163,10 +162,13 @@ async function getTopology() {
|
||||
}
|
||||
return resp;
|
||||
}
|
||||
async function createTask() {
|
||||
function createTask() {
|
||||
if (inProcess.value) {
|
||||
return;
|
||||
}
|
||||
newTask.value = true;
|
||||
}
|
||||
async function saveNewTask() {
|
||||
const serviceId =
|
||||
(selectorStore.currentService && selectorStore.currentService.id) || "";
|
||||
const serviceInstanceId =
|
||||
|
||||
@ -0,0 +1,67 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
export const ProfileMode: any[] = [
|
||||
{ label: "Include Children", value: "include" },
|
||||
{ label: "Exclude Children", value: "exclude" },
|
||||
];
|
||||
export const NewTaskField = {
|
||||
service: { key: "", label: "None" },
|
||||
monitorTime: { key: "0", label: "monitor now" },
|
||||
monitorDuration: { key: 5, label: "5 min" },
|
||||
minThreshold: 0,
|
||||
dumpPeriod: { key: 10, label: "10ms" },
|
||||
endpointName: "",
|
||||
maxSamplingCount: { key: 5, label: "5" },
|
||||
};
|
||||
|
||||
export const InitTaskField = {
|
||||
serviceSource: [{ key: "", label: "None" }],
|
||||
When4xx: [
|
||||
{ value: true, label: "true" },
|
||||
{ value: false, label: "false" },
|
||||
],
|
||||
When5xx: [
|
||||
{ value: true, label: "true" },
|
||||
{ value: false, label: "false" },
|
||||
],
|
||||
monitorTimeCn: [
|
||||
{ value: "0", label: "此刻" },
|
||||
{ value: "1", label: "设置时间" },
|
||||
],
|
||||
monitorDuration: [
|
||||
{ value: "5", label: "5 min" },
|
||||
{ value: "10", label: "10 min" },
|
||||
{ value: "15", label: "15 min" },
|
||||
],
|
||||
dumpPeriod: [
|
||||
{ value: "10", label: "10 ms" },
|
||||
{ value: "20", label: "20 ms" },
|
||||
{ value: "50", label: "50 ms" },
|
||||
{ value: "100", label: "100 ms" },
|
||||
],
|
||||
maxSamplingCount: [
|
||||
{ value: "1", label: "1" },
|
||||
{ value: "2", label: "2" },
|
||||
{ value: "3", label: "3" },
|
||||
{ value: "4", label: "4" },
|
||||
{ value: "5", label: "5" },
|
||||
{ value: "6", label: "6" },
|
||||
{ value: "7", label: "7" },
|
||||
{ value: "8", label: "8" },
|
||||
{ value: "9", label: "9" },
|
||||
],
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user