github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 08:17:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: save policy

Browse Source
This commit is contained in:
Fine 2023-05-22 18:39:47 +08:00
parent 2e9d3a06e5
commit b8ad72e1cc
5 changed files with 101 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/locales/lang/en.ts
View File

@ -391,5 +391,11 @@ const msg = {
save: "Save",
editStrategy: "Edit Policies",
policyList: "Policy List",
targetTypes: "Target Type",
monitorType: "Monitor Type",
count: "Count",
threshold: "Threshold",
uriRegex: "URI Regex",
uriList: "URI List",
};
export default msg;

6
src/locales/lang/es.ts
View File

@ -390,5 +390,11 @@ const msg = {
save: "Salvar",
editStrategy: "Estrategia editorial",
policyList: "Lista de políticas",
targetTypes: "Tipo de objetivo",
monitorType: "Tipo de Monitor",
count: "Contar",
threshold: "Umbral",
uriRegex: "Lista URI",
uriList: "URI List",
};
export default msg;

6
src/locales/lang/zh.ts
View File

@ -388,5 +388,11 @@ const msg = {
save: "保存",
editStrategy: "编辑策略",
policyList: "策略列表",
targetTypes: "目标类型",
monitorType: "监视器类型",
count: "总数",
threshold: "阈值",
uriRegex: "URI规则",
uriList: "URI列表",
};
export default msg;

41
src/views/dashboard/related/continuous-profiling/components/EditPolicy.vue
View File

@ -14,35 +14,62 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="profile-task">
<Policy v-for="(item, index) in continousProfilingStore.strategyList" :key="index" :data="item" />
<div class="policy-list">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item
v-for="(item, index) in continousProfilingStore.strategyList"
:key="index"
:title="`Policy${index + 1}`"
:name="index"
>
<Policy :data="item" @edit="changePolicy" :order="index" />
</el-collapse-item>
</el-collapse>
<div>
<el-button @click="save" type="primary" class="create-task-btn">
<el-button @click="save" type="primary" class="save-btn">
{{ t("save") }}
</el-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
import Policy from "./Policy.vue";
import type { StrategyItem } from "@/types/continous-profiling";
/* global defineEmits */
const emits = defineEmits(["save"]);
const { t } = useI18n();
const continousProfilingStore = useContinousProfilingStore();
const activeNames = ref<string[]>(["1"]);
const requestParams = ref<StrategyItem[]>([]);
function changePolicy(params: StrategyItem, order: number) {
requestParams.value = requestParams.value.map((d: StrategyItem, index: number) => {
if (order === index) {
return params;
}
return d;
});
}
function save() {
emits("save", {});
emits("save", requestParams.value);
}
function handleChange(val: any) {
activeNames.value = val;
}
</script>
<style lang="scss" scoped>
.profile-task {
width: 100%;
.policy-list {
margin: 0 auto;
width: 300px;
}
.create-task-btn {
.save-btn {
width: 300px;
margin-top: 50px;
}

70
src/views/dashboard/related/continuous-profiling/components/Policy.vue
View File

@ -15,7 +15,7 @@ limitations under the License. -->
<template>
<div>
<div class="label">{{ t("type") }}</div>
<div class="label">{{ t("targetTypes") }}</div>
<Selector
class="profile-input"
size="small"
@ -27,7 +27,7 @@ limitations under the License. -->
</div>
<div v-for="(item, index) in states.checkItems" :key="index">
<div>
<div class="label">{{ t("type") }}</div>
<div class="label">{{ t("monitorType") }}</div>
<Selector
class="profile-input"
size="small"
@ -39,23 +39,25 @@ limitations under the License. -->
</div>
<div>
<div class="label">{{ t("count") }}</div>
<el-input size="small" class="profile-input" :min="0" v-model="item.count" type="number" />
<el-input size="small" class="profile-input" :min="0" v-model="item.count" type="number" @change="changeParam" />
</div>
<div>
<div class="label">{{ t("threshold") }}</div>
<el-input size="small" class="profile-input" v-model="item.threshold" />
<el-input size="small" class="profile-input" v-model="item.threshold" @change="changeParam" />
</div>
<div>
<div class="label">{{ t("period") }}</div>
<el-input size="small" class="profile-input" :min="0" v-model="item.period" type="number" />
<el-input size="small" class="profile-input" :min="0" v-model="item.period" type="number" @change="changeParam" />
</div>
<div>
<div class="label">{{ t("uriRegex") }}</div>
<el-input size="small" class="profile-input" v-model="item.uriRegex" />
<el-input size="small" class="profile-input" v-model="item.uriRegex" @change="changeParam" />
</div>
<div>
<div class="label">{{ t("uriRegex") }}</div>
<el-input size="small" class="profile-input" v-model="item.uriRegex" />
<div class="label">{{ t("uriList") }}</div>
<div id="uri-param" contenteditable="true" @input="changeURI($event, index)" class="profile-input">
{{ (item.uriList || []).join("; ") }}
</div>
</div>
</div>
</template>
@ -63,7 +65,7 @@ limitations under the License. -->
import { reactive } from "vue";
import type { PropType } from "vue";
import { useI18n } from "vue-i18n";
import type { StrategyItem } from "@/types/continous-profiling";
import type { StrategyItem, CheckItems } from "@/types/continous-profiling";
import { MonitorType, TargetTypes } from "../data";
/* global defineEmits, defineProps */
@ -72,33 +74,59 @@ limitations under the License. -->
type: Object as PropType<StrategyItem>,
default: () => ({}),
},
order: {
type: Number,
default: 0,
},
});
const emits = defineEmits(["save"]);
const emits = defineEmits(["edit"]);
const { t } = useI18n();
const states = reactive<StrategyItem>(props.data);
function changeType(opt: any[]) {
states.type = (opt.map((d) => d.value)[0] || {}).value;
emits("save", states);
emits("edit", states, props.order);
}
function changeMonitorType(opt: any[], index: number) {
states.checkItems[index].type = (opt.map((d) => d.value)[0] || {}).value;
emits("save", states);
emits("edit", states, props.order);
}
function changeURI(event: any, index: number) {
const params = event.target.textContent;
const regex = /http[^;]*;/g;
const arr = params.match(regex);
states.checkItems[index].uriList = arr.length ? arr : null;
emits("edit", states, props.order);
}
function changeParam() {
const checkItems = states.checkItems.map((d: CheckItems) => {
d.count = Number(d.count);
d.period = Number(d.period);
return d;
});
emits("edit", { ...states, checkItems }, props.order);
}
</script>
<style lang="scss" scoped>
.profile-task {
width: 100%;
}
.create-task-btn {
.profile-input {
width: 300px;
margin-top: 50px;
margin-bottom: 10px;
}
.title {
display: inline-block;
margin-right: 5px;
#uri-param {
border: 1px solid #dcdfe6;
cursor: text;
padding: 0 5px;
border-radius: 4px;
color: #606266;
outline: none;
height: 100px;
&:focus {
border-color: #409eff;
}
}
</style>