server 模块增加创建规则的弹窗及逻辑
This commit is contained in:
parent
0b6aa43a57
commit
a0a2b3971d
|
|
@ -9,6 +9,7 @@
|
|||
placeholder="select..."
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
labelInValue
|
||||
:options="serverOptions"
|
||||
@change="onServerChange"
|
||||
>
|
||||
|
|
@ -36,7 +37,7 @@
|
|||
</a-col>
|
||||
</a-row>
|
||||
<div class="cpu-search-btns">
|
||||
<a-button class="cpu-search-btns-ant">Create Alert Rules</a-button>
|
||||
<a-button class="cpu-search-btns-ant" @click="createAlertRules">Create Alert Rules</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cpu-content">
|
||||
|
|
@ -115,12 +116,20 @@
|
|||
</div>
|
||||
<a-modal
|
||||
:title="modalTitle"
|
||||
:width="1000"
|
||||
:width="1200"
|
||||
v-model="visible"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<div class="modal-content" id="common"></div>
|
||||
</a-modal>
|
||||
<CreateRules
|
||||
:visible="visible_rule"
|
||||
:serverList="serverOptions"
|
||||
:currServer="currId"
|
||||
:serverLabel="currLabel"
|
||||
@onCancel="handleCancel"
|
||||
@onOk="handleOk"
|
||||
></CreateRules>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -129,18 +138,23 @@ import moment from 'moment';
|
|||
import * as echarts from 'echarts'
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import BoxTitle from '../../components/boxTitle.vue';
|
||||
import CreateRules from './createRules.vue';
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
export default {
|
||||
components: {
|
||||
BoxTitle,
|
||||
CreateRules
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currId:"",
|
||||
visible_rule: false,
|
||||
currLabel:"",
|
||||
queryParams: {
|
||||
server: undefined,
|
||||
timer: "1h",
|
||||
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
|
||||
endDate: dateFormat(new Date(), 'yyyy-MM-dd')
|
||||
startDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
||||
endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
||||
},
|
||||
serverOptions: [],
|
||||
timerOptions: [
|
||||
|
|
@ -165,7 +179,8 @@ export default {
|
|||
modalTitle: "",
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.getServerList()
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.drawChart1()
|
||||
|
|
@ -176,6 +191,22 @@ export default {
|
|||
})
|
||||
},
|
||||
methods: {
|
||||
createAlertRules() {
|
||||
this.visible_rule = true
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible_rule = false
|
||||
},
|
||||
handleOk(params) {
|
||||
postAction("/alarmRule/create", params).then(res => {
|
||||
if (res.success) {
|
||||
this.visible_rule = false
|
||||
this.$message.success("success")
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
moment,
|
||||
filterOption(input, option) {
|
||||
return (
|
||||
|
|
@ -191,14 +222,31 @@ export default {
|
|||
value: item.sourceId
|
||||
}
|
||||
})
|
||||
this.queryParams.server = this.$route.query.serverId || res.result[0].sourceId
|
||||
this.currId = this.$route.query.serverId || res.result[0].sourceId
|
||||
if (this.$route.query.serverId) {
|
||||
let currOption = this.serverOptions.find(item => {
|
||||
return item.value === this.$route.query.serverId
|
||||
})
|
||||
this.currLabel = currOption.label
|
||||
this.queryParams.server = {
|
||||
key: this.$route.query.serverId,
|
||||
label:this.currLabel
|
||||
}
|
||||
} else {
|
||||
this.currLabel = res.result[0].sourceName
|
||||
this.queryParams.server = {
|
||||
key: res.result[0].sourceId,
|
||||
label:this.currLabel
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
onServerChange(val) {
|
||||
console.log(val);
|
||||
this.currId = val.key
|
||||
this.currLabel = val.label
|
||||
},
|
||||
onTimeChange(val) {
|
||||
console.log(val);
|
||||
|
|
|
|||
351
src/views/abnormalAlarm/serverMonitor/instances/createRules.vue
Normal file
351
src/views/abnormalAlarm/serverMonitor/instances/createRules.vue
Normal file
|
|
@ -0,0 +1,351 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
title='Add Rule'
|
||||
:width="845"
|
||||
v-model="visible"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<a-form-model
|
||||
ref="al_ruleForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-row :gutter="[15,0]">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item ref="sourceType" label="Source Type" prop="sourceType">
|
||||
<a-select
|
||||
v-model="form.sourceType"
|
||||
:options="typeOptions"
|
||||
show-arrow
|
||||
allowClear
|
||||
disabled
|
||||
placeholder="select..."
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item ref="sourceId" label="Source" prop="sourceId">
|
||||
<a-select
|
||||
v-model="form.sourceId"
|
||||
:options="serverList"
|
||||
show-arrow
|
||||
allowClear
|
||||
disabled
|
||||
placeholder="select..."
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[15,0]">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item ref="alarmRule" label="Alarm Rule" prop="name">
|
||||
<a-input v-model="form.name" placeholder="Pleace enter the alarm rule name" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item ref="monitorItem" label="Monitor Item" prop="itemId">
|
||||
<a-select
|
||||
v-model="form.itemId"
|
||||
:options="itemOptions"
|
||||
show-arrow
|
||||
allowClear
|
||||
labelInValue
|
||||
placeholder="select..."
|
||||
@change="onItemChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[15,0]">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item ref="monitorItem" label="Logic Symbol" prop="operator">
|
||||
<a-select
|
||||
v-model="form.operator"
|
||||
:options="operatorOptions"
|
||||
show-arrow
|
||||
allowClear
|
||||
placeholder="select..."
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item ref="threshold" label="Threshold" prop="threshold">
|
||||
<a-input v-model="form.threshold" :suffix="units" placeholder="Pleace enter the threshold value" />
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[15,0]">
|
||||
<a-col :span="12">
|
||||
<a-form-model-item ref="silenceCycle" label="Silence Cycle" prop="silenceCycle">
|
||||
<a-select
|
||||
v-model="form.silenceCycle"
|
||||
:options="silenceCyclerOptions"
|
||||
show-arrow
|
||||
allowClear
|
||||
placeholder="select..."
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-model-item ref="contactGroup" label="Contact Group" prop="contactId">
|
||||
<a-select
|
||||
v-model="form.contactId"
|
||||
:options="contactGroupOptions"
|
||||
show-arrow
|
||||
allowClear
|
||||
placeholder="select..."
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
<template slot="footer">
|
||||
<a-space class="operators" :size="20">
|
||||
<a-button type="success" @click="onSave">Save</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
export default {
|
||||
props: ["visible","serverList","currServer","serverLabel"],
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
sourceType: "Server",
|
||||
sourceId: undefined,
|
||||
name: "",
|
||||
itemId: undefined,
|
||||
operator: undefined,
|
||||
threshold: "",
|
||||
silenceCycle: undefined,
|
||||
contactId: undefined,
|
||||
},
|
||||
units: "",
|
||||
itemOptions: [],
|
||||
typeOptions: [
|
||||
{
|
||||
label: "Server",
|
||||
value: "Server"
|
||||
},
|
||||
{
|
||||
label: "Database",
|
||||
value: "Database"
|
||||
},
|
||||
{
|
||||
label: "E-MAIL",
|
||||
value: "Email"
|
||||
},
|
||||
],
|
||||
sourceOptions: [],
|
||||
operatorOptions: [
|
||||
{
|
||||
label: ">",
|
||||
value: ">"
|
||||
},
|
||||
{
|
||||
label: "<",
|
||||
value: "<"
|
||||
},
|
||||
{
|
||||
label: ">=",
|
||||
value: ">="
|
||||
},
|
||||
{
|
||||
label: "<=",
|
||||
value: "<="
|
||||
},
|
||||
{
|
||||
label: "==",
|
||||
value: "=="
|
||||
},
|
||||
],
|
||||
silenceCyclerOptions: [
|
||||
{
|
||||
label: "5 minutes",
|
||||
value: 300
|
||||
},
|
||||
{
|
||||
label: "15 minutes",
|
||||
value: 900
|
||||
},
|
||||
{
|
||||
label: "30 minutes",
|
||||
value: 1800
|
||||
},
|
||||
{
|
||||
label: "60 minutes",
|
||||
value: 3600
|
||||
},
|
||||
{
|
||||
label: "3 hours",
|
||||
value: 10800
|
||||
},
|
||||
{
|
||||
label: "6 hours",
|
||||
value: 21600
|
||||
},
|
||||
{
|
||||
label: "12 hours",
|
||||
value: 43200
|
||||
},
|
||||
{
|
||||
label: "24 hours",
|
||||
value: 86400
|
||||
}
|
||||
],
|
||||
contactGroupOptions: [],
|
||||
rules: {
|
||||
sourceType: [
|
||||
{ required: true, message: 'Please select a sourceType', trigger: 'change'},
|
||||
],
|
||||
sourceId: [
|
||||
{ required: true, message: 'Please select a source', trigger: 'change'},
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: 'Please input alarmRule name'},
|
||||
],
|
||||
itemId: [
|
||||
{ required: true, message: 'Please select a monitorItem', trigger: 'change'},
|
||||
],
|
||||
operator: [
|
||||
{ required: true, message: 'Please select a logicSymbol', trigger: 'change'},
|
||||
],
|
||||
threshold: [
|
||||
{ required: true, message: 'Please input threshold'},
|
||||
],
|
||||
silenceCycle: [
|
||||
{ required: true, message: 'Please select a silenceCycle', trigger: 'change'},
|
||||
],
|
||||
contactId: [
|
||||
{ required: true, message: 'Please select a contactGroup', trigger: 'change'},
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.currServer);
|
||||
this.sourceOptions = this.serverList
|
||||
},
|
||||
watch: {
|
||||
currServer(newValue, oldValue) {
|
||||
this.form.sourceId = newValue
|
||||
},
|
||||
serverLabel(newValue, oldValue) {
|
||||
this.getItems(newValue)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onCancel() {
|
||||
this.$emit("onCancel")
|
||||
this.resetForm()
|
||||
},
|
||||
onItemChange(val, option) {
|
||||
this.form.itemId = val
|
||||
this.units = option.data.props.units
|
||||
},
|
||||
onSave() {
|
||||
this.$refs.al_ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
silenceCycle:this.form.silenceCycle,
|
||||
contactId:this.form.contactId,
|
||||
sourceId:this.form.sourceId,
|
||||
sourceType:this.form.sourceType,
|
||||
itemId:this.form.itemId.key,
|
||||
rule: {
|
||||
name: this.form.itemId.label,
|
||||
operator: this.form.operator,
|
||||
threshold: this.form.threshold,
|
||||
units: this.units,
|
||||
},
|
||||
name: this.form.name
|
||||
}
|
||||
this.$emit("onCanonSavecel", params)
|
||||
this.resetForm()
|
||||
}
|
||||
})
|
||||
},
|
||||
onItemChange(val, option) {
|
||||
this.form.itemId = val
|
||||
this.units = option.data.props.units
|
||||
},
|
||||
getItems(val) {
|
||||
getAction("/alarmRule/getItems", {sourceName:val}).then(res => {
|
||||
if (res.success) {
|
||||
this.itemOptions = res.result.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.itemId,
|
||||
units:item.units
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs.al_ruleForm.resetFields();
|
||||
this.form= {
|
||||
sourceType: undefined,
|
||||
sourceId: undefined,
|
||||
name: "",
|
||||
itemId: undefined,
|
||||
operator: undefined,
|
||||
threshold: "",
|
||||
silenceCycle: undefined,
|
||||
contactId: undefined,
|
||||
}
|
||||
this.sourceOptions =[]
|
||||
this.itemOptions = []
|
||||
this.units = ""
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/.ant-modal-title{
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.operators {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
.ant-btn {
|
||||
width: 92px;
|
||||
}
|
||||
}
|
||||
.ant-select {
|
||||
.ant-select-arrow-icon {
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
&-open {
|
||||
.ant-select-arrow-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-select-dropdown-content{
|
||||
position: relative;
|
||||
background: #03353f;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
placeholder="select..."
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
labelInValue
|
||||
:options="serverOptions"
|
||||
@change="onServerChange"
|
||||
>
|
||||
|
|
@ -36,7 +37,7 @@
|
|||
</a-col>
|
||||
</a-row>
|
||||
<div class="monitor-search-btns">
|
||||
<a-button class="monitor-search-btns-ant">Create Alert Rules</a-button>
|
||||
<a-button class="monitor-search-btns-ant" @click="createAlertRules">Create Alert Rules</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-content">
|
||||
|
|
@ -144,12 +145,20 @@
|
|||
</div>
|
||||
<a-modal
|
||||
:title="modalTitle"
|
||||
:width="1000"
|
||||
:width="1200"
|
||||
v-model="visible"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<div class="modal-content" id="common"></div>
|
||||
</a-modal>
|
||||
<CreateRules
|
||||
:visible="visible_rule"
|
||||
:serverList="serverOptions"
|
||||
:currServer="currId"
|
||||
:serverLabel="currLabel"
|
||||
@onCancel="handleCancel"
|
||||
@onOk="handleOk"
|
||||
></CreateRules>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -160,13 +169,18 @@ import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
|||
import BoxTitle from '../../components/boxTitle.vue';
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
import LineChart from './lineChart.vue';
|
||||
import CreateRules from './createRules.vue';
|
||||
export default {
|
||||
components: {
|
||||
BoxTitle,
|
||||
LineChart
|
||||
LineChart,
|
||||
CreateRules
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currId:"",
|
||||
visible_rule: false,
|
||||
currLabel:"",
|
||||
queryParams: {
|
||||
server: undefined,
|
||||
timer: "1h",
|
||||
|
|
@ -266,14 +280,26 @@ export default {
|
|||
myLine: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
// this.drawLine()
|
||||
},0)
|
||||
})
|
||||
mounted() {
|
||||
this.getServerList()
|
||||
},
|
||||
methods: {
|
||||
createAlertRules() {
|
||||
this.visible_rule = true
|
||||
},
|
||||
handleCancel() {
|
||||
this.visible_rule = false
|
||||
},
|
||||
handleOk(params) {
|
||||
postAction("/alarmRule/create", params).then(res => {
|
||||
if (res.success) {
|
||||
this.visible_rule = false
|
||||
this.$message.success("success")
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
moment,
|
||||
filterOption(input, option) {
|
||||
return (
|
||||
|
|
@ -289,14 +315,31 @@ export default {
|
|||
value: item.sourceId
|
||||
}
|
||||
})
|
||||
this.queryParams.server = this.$route.query.serverId || res.result[0].sourceId
|
||||
this.currId = this.$route.query.serverId || res.result[0].sourceId
|
||||
if (this.$route.query.serverId) {
|
||||
let currOption = this.serverOptions.find(item => {
|
||||
return item.value === this.$route.query.serverId
|
||||
})
|
||||
this.currLabel = currOption.label
|
||||
this.queryParams.server = {
|
||||
key: this.$route.query.serverId,
|
||||
label:this.currLabel
|
||||
}
|
||||
} else {
|
||||
this.currLabel = res.result[0].sourceName
|
||||
this.queryParams.server = {
|
||||
key: res.result[0].sourceId,
|
||||
label:this.currLabel
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
onServerChange(val) {
|
||||
console.log(val);
|
||||
this.currId = val.key
|
||||
this.currLabel = val.label
|
||||
},
|
||||
onTimeChange(val) {
|
||||
console.log(val);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user