gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: project、config、alert界面和交互

Browse Source 
1.project、config、alert界面
2.和后端的交互，但部分接口/原型未定，包括：
--1.Alert-config link查看、编辑框暂时直接回显id
--2.用户保存操作后端报错
--3.endpoint弹框页面未定，暂按现版本原型实现
This commit is contained in:
chenjinsong
2019-12-13 17:08:35 +08:00
parent efa5b2bcff
commit 03173b64b9
10 changed files with 592 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -59,8 +59,17 @@
<div v-if="item.prop == 'option'" class="account-list-options">
<span @click="del(scope.row)" class="account-list-option"><i class="el-icon-delete"></i></span>
<span @click="detail(scope.row)" class="account-list-option"><i class="el-icon-view"></i></span>
<span @click="edit(scope.row)" class="account-list-option"><i class="el-icon-edit-outline"></i></span>
<span @click="toEdit(scope.row)" class="account-list-option"><i class="el-icon-edit-outline"></i></span>
</div>
<span v-else-if="item.prop == 'severity'">
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
</span>
<span v-else-if="item.prop == 'type'">
<template v-for="type in typeData" v-if="type.key == scope.row[item.prop]">{{type.value}}</template>
</span>
<span v-else-if="item.prop == 'linkObject'">{{scope.row[item.prop].name}}</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
@@ -85,7 +94,7 @@
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
<span v-else>{{$t('overall.edit')}}</span>
</div>
<div class="right-box-top-btn" v-if="rightBox.isEdit && alertRule.id != ''">
<div @click="del" class="right-box-top-btn" v-if="rightBox.isEdit && alertRule.id != ''">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
@@ -100,6 +109,7 @@
<!-- begin--表单-->
<div class="right-box-form">
<!--name-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.config.name')}}</div>
<div class="right-box-form-content">
@@ -115,6 +125,52 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div>
</div>
</div>
<!--type-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.list.type')}}</div>
<div class="right-box-form-content">
<el-select popper-class="config-dropdown" v-model="alertRule.type" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
v-for="item in typeData"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select>
<div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == alertRule.type" class="right-box-form-content-txt">{{item.value}}</div>
</div>
</div>
<!--linkedId-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.config.link')}}</div>
<div class="right-box-form-content">
<el-input
v-if="rightBox.isEdit"
type="text"
v-model="alertRule.linkId"
size="mini"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.linkObject.name}}</div>
<!--<el-select popper-class="config-dropdown" v-model="alertRule.severity" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
v-for="item in severityData"
:key="item.key"
:label="item.value"
:value="item.key">
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
<el-input
type="text"
v-model="item.name"
size="mini"
></el-input>
</span>
</el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>-->
</div>
</div>
<!--expr-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.config.expr')}}</div>
<div class="right-box-form-content">
@@ -128,6 +184,7 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div>
</div>
</div>
<!--for-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.config.for')}}</div>
<div class="right-box-form-content">
@@ -137,23 +194,36 @@
placeholder=""
v-model="alertRule.last"
size="small"
></el-input>
>
<template slot="append">second</template>
</el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.last}}s</div>
</div>
</div>
<!--severity-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.severity')}}</div>
<div class="right-box-form-content">
<el-input
type="text"
v-if="rightBox.isEdit"
placeholder=""
v-model="alertRule.severity"
size="small"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>
<el-select popper-class="config-dropdown" v-model="alertRule.severity" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
v-for="item in severityData"
:key="item.key"
:label="item.value"
:value="item.key">
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
<el-input
type="text"
v-model="item.name"
size="mini"
></el-input>
</span>
</el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>
</div>
</div>
<!--summary-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.summary')}}</div>
<div class="right-box-form-content">
@@ -167,6 +237,7 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.summary}}</div>
</div>
</div>
<!--description-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.description')}}</div>
<div class="right-box-form-content">
@@ -180,6 +251,7 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.description}}</div>
</div>
</div>
<!--receiver-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
<div class="right-box-form-content">
@@ -191,7 +263,7 @@
:label="item.name"
:value="item">
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="stopFun">
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
<el-input
type="text"
v-model="item.name"
@@ -217,7 +289,7 @@
<!-- begin--底部按钮-->
<div class="right-box-bottom-btns">
<div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{alertRule.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
<div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{alertRule.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div>
<!-- end--底部按钮-->
@@ -228,7 +300,7 @@
</template>
<script>
export default {
name: "account",
name: "alert-config",
data() {
return {
rightBox: { //弹出框相关
@@ -240,6 +312,7 @@ export default {
id: '',
alertName: '',
type: '',
linkObject: {id: '', name: ''},
linkId: '',
expr: '',
last: '',
@@ -253,6 +326,34 @@ export default {
pageSize: 20,
total:0
},
severityData: [
{
key: 'medium',
value: this.$t("alert.config.medium")
},
{
key: 'high',
value: this.$t("alert.config.high")
},
{
key: 'low',
value: this.$t("alert.config.low")
}
],
typeData: [
{
key: 1,
value: this.$t('alert.config.typeOption.project')
},
{
key: 2,
value: this.$t('alert.config.typeOption.module')
},
{
key: 3,
value: this.$t('alert.config.typeOption.asset')
}
],
tableTitle: [
{
label: 'ID',
@@ -267,6 +368,14 @@ export default {
label: this.$t("alert.config.expr"),
prop: 'expr',
show: true,
}, {
label: this.$t("alert.list.type"),
prop: 'type',
show: true,
}, {
label: this.$t("alert.config.link"),
prop: 'linkObject',
show: true,
}, {
label: this.$t("alert.config.for"),
prop: 'last',
@@ -318,13 +427,27 @@ export default {
}
},
methods: {
edit: function(u) {
toEdit: function(u) {
this.alertRule = Object.assign({}, u);
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("alert.config.editalertConfig") + " ID：" + u.id;
this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + u.id;
this.rightBox.show = true;
},
del: function(u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("alert/rule?ids=" + u.id).then(response => {
if (response.code === 200) {
this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();
} else {
this.$message.error(response.msg);
}
})
});
},
toAdd: function() {
this.cleanAlertRule();
@@ -338,10 +461,29 @@ export default {
this.rightBox.title = this.$t("alert.config.alertConfig") + " ID：" + u.id;
this.rightBox.show = true;
},
save: function() {
if (this.alertRule.id) {
this.$put('alert/rule', this.alertRule).then(response => {
if (response.code === 200) {
this.getTableData();
this.rightBox.isEdit = false;
}
});
} else {
this.$post('alert/rule', this.alertRule).then(response => {
if (response.code === 200) {
this.getTableData();
this.rightBox.isEdit = false;
}
});
}
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("alert.config.editalertConfig") + " ID：" + this.alertRule.id;
this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + this.alertRule.id;
} else {
this.save();
}
},
toEditReceiver: function(item) {
@@ -391,9 +533,6 @@ export default {
},
esc: function() {
this.rightBox.show = false;
},
stopFun: function() {
},
updateReceiverName: function(item) {
//TODO 请求接口改名
@@ -409,6 +548,7 @@ export default {
alertName: '',
type: '',
linkId: '',
linkObject: {id: '', name: ''},
expr: '',
last: '',
severity: '',
@@ -418,8 +558,8 @@ export default {
}
},
jumpTo(data,id) {
this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id
this.$store.state.assetData.moduleData = data;
this.$store.state.assetData.selectedData = id;
this.$router.push({
path: "/" + data,
query: {
@@ -429,11 +569,11 @@ export default {
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getTableData()
this.getTableData();
},
pageSize(val) {
this.pageObj.pageSize = val;
this.getTableData()
this.getTableData();
}
},
mounted() {