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

feat: prometheus server功能提交

Browse Source
This commit is contained in:
chenjinsong
2019-12-05 18:07:58 +08:00
parent e1826949e0
commit dd390b6332
9 changed files with 613 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
nezha-fronted/src/assets/css/main.css
View File

@@ -33,29 +33,29 @@ html {
width: 90%;
}
.config-receiver-dropdown {
.config-dropdown {
width: 550px;
}
.config-receiver-dropdown-btn {
.config-dropdown-btn {
display: inline-block;
margin-left: 7px;
float: right;
color: #60BEFF;
font-size: 13px
}
.config-receiver-dropdown-btn:hover {
.config-dropdown-btn:hover {
color: #409EFF;
}
.config-receiver-dropdown-btn-delete {
.config-dropdown-btn-delete {
color: #F98D9A;
font-size: 13px
}
.config-receiver-dropdown-btn-delete:hover {
.config-dropdown-btn-delete:hover {
color: #D96D7A;
}
.config-receiver-dropdown.is-multiple .el-select-dropdown__item.selected::after {
.config-dropdown.is-multiple .el-select-dropdown__item.selected::after {
content: "" !important;
}
.config-receiver-dropdown-error-message {
.config-dropdown-error-message {
color: #F98D9A;
}

16
nezha-fronted/src/components/common/header.vue
View File

@@ -27,10 +27,21 @@
</el-menu-item>
</template>
</el-submenu>
<el-submenu index="4">
<!--<el-submenu index="4">
<template slot="title">
<div @click="jumpTo('alarm')">{{$t('overall.alarm')}}</div>
</template>
</el-submenu>-->
<el-submenu index="5">
<template slot="title">
<div @click="jumpTo('account')">{{$t('overall.config')}}</div>
</template>
<el-menu-item index="1">
<div @click="jumpTo('account')">{{$t('config.account.account')}}</div>
</el-menu-item>
<el-menu-item index="2">
<div @click="jumpTo('promServer')">Prometheus Server</div>
</el-menu-item>
</el-submenu>
</el-menu>
@@ -80,7 +91,8 @@ export default {
},
methods: {
jumpTo(data,id) {
this.$store.state.assetSelect = id
this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id
this.$router.push({
path: "/" + data,
query: {

9
nezha-fronted/src/components/common/language/cn.js
View File

@@ -4,6 +4,7 @@ const cn = {
dashboard:'仪表盘',
project:'工程',
asset:'资产',
config:'设置',
create: '新增',
edit: '修改',
delete: '删除',
@@ -51,7 +52,13 @@ const cn = {
createAccount: "新增用户",
editAccount: "修改用户",
notCurrentlySupport: '暂不支持'
}
},
promServer: {
//侧滑框
promId: "Prometheus Server ID",
createProm: "新增Prometheus Server",
editProm: "修改Prometheus Server"
},
},
...zhLocale
}

9
nezha-fronted/src/components/common/language/en.js
View File

@@ -4,6 +4,7 @@ const en = {
dashboard:'dashboard',
project:'project',
asset:'asset',
config:'config',
create: 'Create',
edit: 'Edit',
delete: 'Delete',
@@ -51,7 +52,13 @@ const en = {
createAccount: "Create Account",
editAccount: "Edit Account",
notCurrentlySupport: 'Not currently supported'
}
},
promServer: {
//侧滑框
promId: "Prometheus Server ID",
createProm: "Create Prometheus Server",
editProm: "Edit Prometheus Server"
},
},
...enLocale
}

25
nezha-fronted/src/components/common/sideBar.vue
View File

@@ -4,7 +4,7 @@
<div>Project</div>
<div class="sidebar-info">
<div class="sidebar-info-header">ALL</div>
<div class="sidebar-info-footer">
<div class="sidebar-info-footer" v-if="sidebarState">
<el-checkbox-group v-model="checkList" size="small">
<el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id>{{item.name}}
<div class="checkbox-edit" @click.prevent="edit(item.id)">编辑</div>
@@ -23,6 +23,7 @@ export default {
return {
checkList: [0],
checkListData: [],
sidebarState:'',
pageObj: {
pageNo: 1,
pageSize: 20,
@@ -32,14 +33,26 @@ export default {
},
computed:{
getData(){
return this.$store.state.assetSelect
return this.$store.state.assetData
}
},
watch:{
getData(newVal,oldVal){
this.checkList.splice(1,1,newVal)
getData:{
handler(newVal,oldVal){
this.checkList.splice(1,1,newVal.selectedData)
if(newVal.moduleData=='asset'){
this.sidebarState=true
}else{
this.sidebarState=false
this.getAssetData()
this.checkListData=[0]
}
},
deep: true,
},
},
methods: {
edit(data) {
console.log(data)
@@ -48,16 +61,12 @@ export default {
this.$get('idc', this.pageObj).then(response => {
if (response.code == 200) {
this.checkListData = response.data.list
console.log(this.checkListData)
}
})
}
},
mounted() {
this.getAssetData()
function aa() {
console.log(this.$router.query)
}
}
}

38
nezha-fronted/src/components/page/config/account.vue
View File

@@ -136,7 +136,7 @@
cursor: pointer;
width: 100%;
}
.config-receiver-dropdown-label-input {
.config-dropdown-label-input {
width: 50%;
display: inline-block;
}
@@ -219,7 +219,7 @@
<div class="right-box right-box-account" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc(user.userId)">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc()">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
@@ -278,27 +278,27 @@
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
<div class="right-box-form-content">
<el-select value-key="id" popper-class="config-receiver-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
<el-select value-key="id" popper-class="config-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
@click.native="blurEditReceiver()"
v-for="item in receiverData"
:key="item.id"
:label="item.name"
:value="item">
<span class="config-receiver-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
<span class="config-receiver-dropdown-label-input" v-if="item.isEdit" @click.stop="stopFun">
<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">
<el-input
type="text"
v-model="item.name"
size="mini"
></el-input>
</span>
<span class="config-receiver-dropdown-error-message">{{item.errorMessage}}</span>
<span class="config-receiver-dropdown-btn" @click.stop="toEditReceiver(item)">
<span class="config-dropdown-error-message">{{item.errorMessage}}</span>
<span class="config-dropdown-btn" @click.stop="toEditReceiver(item)">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"></i>
</span>
<span class="config-receiver-dropdown-btn config-receiver-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
</el-option>
</el-select>
<div class="el-select-add-btn" v-if="rightBox.isEdit">
@@ -339,7 +339,7 @@
<!-- begin--底部按钮-->
<div class="right-box-bottom-btns">
<div @click="esc(user.userId)" :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">{{user.userId == '' ? $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 v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{user.userId == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div>
<!-- end--底部按钮-->
@@ -662,32 +662,26 @@ export default {
}],
receiverData: [{
id: '1',
isEdit: false,
name: 'group1',
description: '小组1desc'
}, {
id: '2',
isEdit: false,
name: 'group2',
description: '小组2desc'
}, {
id: '3',
isEdit: false,
name: '小组3',
description: '小组3desc'
}, {
id: '4',
isEdit: false,
name: '小组4',
description: '小组4desc'
}, {
id: '5',
isEdit: false,
name: '小组啊小组5',
description: '小组5desc'
}, {
id: '6',
isEdit: false,
name: '小组6',
description: '小组6desc'
}]
@@ -697,7 +691,7 @@ export default {
edit: function(u) {
this.user = Object.assign({}, u);
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.account.editAccount") + " ID：" + u.id;
this.rightBox.title = this.$t("config.account.editAccount") + " ID：" + u.userId;
this.rightBox.show = true;
},
del: function(u) {
@@ -705,7 +699,7 @@ export default {
detail: function(u) {
this.user = Object.assign({}, u);
this.rightBox.isEdit = false;
this.rightBox.title = this.$t("config.account.account") + " ID：" + u.id;
this.rightBox.title = this.$t("config.account.account") + " ID：" + u.userId;
this.rightBox.show = true;
},
add: function() {
@@ -717,7 +711,7 @@ export default {
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.account.editAccount") + " ID：" + this.user.id;
this.rightBox.title = this.$t("config.account.editAccount") + " ID：" + this.user.userId;
}
},
toEditReceiver: function(item) {
@@ -751,9 +745,10 @@ export default {
this.blurEditReceiver();
//TODO 请求后台，删除组
},
setOldNameForReceiver: function() {
initReceiverData: function() {
for (var i = 0; i < this.receiverData.length; i++) {
this.$set(this.receiverData[i], 'oldName', this.receiverData[i].name);
this.$set(this.receiverData[i], 'isEdit', false);
}
},
esc: function() {
@@ -780,13 +775,10 @@ export default {
receiver: [],
lang: 'en'
}
},
getUserById: function(userId) {
}
},
mounted() {
this.setOldNameForReceiver();
this.initReceiverData();
}
}
</script>

470
nezha-fronted/src/components/page/config/promServer.vue Normal file
View File

@@ -0,0 +1,470 @@
<style scoped>
.prom {
height: 100%;
}
.prom-list {
height: calc(100% - 51px);
}
.prom-list-option {
cursor: pointer;
display: inline-block;
margin-right: 6px;
}
.prom-list-option .el-icon-delete {
color: #F98D9A;
}
.prom-list-option .el-icon-delete:hover {
color: #D96D7A;
}
.prom-list-option .el-icon-view {
color: #60BEFF;
}
.prom-list-option .el-icon-view:hover {
color: #409EFF;
}
.prom-list-search {
float: right;
width: 220px;
margin: 15px 0;
}
/* begin--右侧弹框*/
.right-box {
position: fixed;
top: 20px;
right: 0;
z-index: 1;
border-radius: 8px;
box-shadow: 0 0 15px #ccc;
background-color: white;
padding: 0 20px;
}
.right-box-prom {
width: 550px;
height: calc(100% - 61px);
}
/* begin--右侧弹框--顶部按钮*/
.right-box-top-btns {
text-align: center;
}
.right-box-top-btn {
border-radius: 0 0 9px 9px;
float: right;
color: #656565;
height: 30px;
font-size: 12px;
padding: 3px 8px 1px 8px;
border: 1px solid #aaaaaa;
border-top: none;
cursor: pointer;
margin-left: 20px;
}
.right-box-top-btn-full {
background-color: #656565;
border: 1px solid #656565;
border-top: none;
color: white;
}
/* end--右侧弹框--顶部按钮*/
/* begin--右侧弹框--内容*/
.right-box-title {
height: 30px;
line-height: 40px;
text-align: left;
}
.right-box-form {
margin-top: 35px;
}
.right-box-form-row {
margin-top: 25px;
}
.right-box-form-label {
margin-bottom: 8px;
text-align: left;
}
.right-box-form-content {
height: 32px;
line-height: 32px;
text-align: left;
width: 100%;
}
.right-box-form-content-txt {
padding-left: 11px;
}
.right-box-form-content .el-select {
width: calc(100% - 38px);
vertical-align: top;
}
.el-select-add-btn {
width: 33px;
height: 33px;
display: inline-block;
text-align: center;
border-radius: 5px;
border: 1px solid #DCDFE6;
box-sizing: border-box;
color: #C7C9CE;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.el-select-add-btn:hover {
border: 1px solid #C0C4CC;
cursor: pointer;
}
/* end--右侧弹框--内容*/
/* begin--右侧弹框--底部按钮*/
.right-box-bottom-btns {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
left: 0;
text-align: center;
}
.right-box-bottom-btn:first-of-type {
border-bottom-left-radius: 8px;
}
.right-box-bottom-btn:last-of-type{
border-bottom-right-radius: 8px;
}
.right-box-bottom-btn {
display: inline-block;
background-color: #656565;
color: white;
height: 100%;
line-height: 40px;
cursor: pointer;
width: 100%;
}
.config-dropdown-label-input {
width: 50%;
display: inline-block;
}
.right-box-bottom-btn-cancel {
background-color: #DADADA;
color: #656565;
}
.right-box-bottom-btn-50 {
width: 50%;
}
/* end--右侧弹框--底部按钮*/
/* end--右侧弹框*/
/* begin--右弹框滑入滑出动画*/
@keyframes slide-in-from-right {
from {right: -800px}
to {right: 0}
}
@keyframes slide-out-to-right {
from {right: 0}
to {right: -800px}
}
.right-box-enter-active {
animation: slide-in-from-right 0.4s;
}
.right-box-leave-active {
animation: slide-out-to-right 0.4s;
}
/* end--右弹框滑入滑出动画*/
</style>
<template>
<div class="prom">
<div class="prom-list">
<el-input
class="prom-list-search"
type="text"
:placeholder="$t('overall.search')"
size="small"
></el-input>
<el-table
:data="tableData"
border
height="calc(100% - 65px)"
style="width: 100%;">
<el-table-column
v-for="(item, index) in tableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
:label="item.label"
>
<template slot-scope="scope" :column="item">
<span v-if="item.prop == 'idc'">{{scope.row[item.prop].name}}</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('config.account.option')" width="100">
<template slot-scope="scope" :column="item">
<div class="prom-list-options">
<span @click="del(scope.row)" class="prom-list-option"><i class="el-icon-delete"></i></span>
<span @click="detail(scope.row)" class="prom-list-option"><i class="el-icon-view"></i></span>
<span @click="edit(scope.row)" class="prom-list-option"><i class="el-icon-edit-outline"></i></span>
</div>
</template>
</el-table-column>
</el-table>
</div>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<transition name="right-box">
<div class="right-box right-box-prom" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc()">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
<div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit">
<div class="right-box-btn-icon">
<i class="el-icon-edit-outline"></i>
</div>
<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 && promServer.id != ''">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
<span>{{$t('overall.delete')}}</span>
</div>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<div class="right-box-form">
<div class="right-box-form-row">
<div class="right-box-form-label">IDC</div>
<div class="right-box-form-content">
<el-select value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
@click.native="blurEditIdc()"
v-for="item in idcData"
:key="item.id"
: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">
<el-input
type="text"
v-model="item.name"
size="mini"
></el-input>
</span>
<span class="config-dropdown-error-message">{{item.errorMessage}}</span>
<span class="config-dropdown-btn" @click.stop="toEditIdc(item)">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"><i class="el-icon-delete"></i></span>
</el-option>
</el-select>
<div class="el-select-add-btn" v-if="rightBox.isEdit">
<span class="el-icon-plus"></span>
</div>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div>
</div>
</div>
<div class="right-box-form-row">
<div class="right-box-form-label">Host</div>
<div class="right-box-form-content">
<el-input
type="text"
v-if="rightBox.isEdit"
placeholder=""
v-model="promServer.host"
size="small"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.host}}</div>
</div>
</div>
</div>
<!-- end--表单-->
<!-- 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">{{promServer.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div>
<!-- end--底部按钮-->
</div>
</transition>
</div>
</template>
<script>
export default {
name: "prom",
data() {
return {
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看，true编辑
title: ''
},
promServer: {
id: '',
host: '',
idc: {id: '', name: '', location: ''}
},
pageObj: {
pageNo: 1,
pageSize: 20,
total:6
},
tableTitle: [
{
label: 'ID',
prop: 'id',
show: true,
width: 80
}, {
label: 'IDC',
prop: 'idc',
show: true,
}, {
label: 'Host',
prop: 'host',
show: true,
}
],
tableData: [
{
id: '1',
host: '192.168.40.241',
idc: {id: '3', name: 'aerareqarew', location: 'zhaertaewr'}
},
{
id: '2',
host: '192.168.40.242',
idc: {id: '5', name: 'idc151654', location: 'bj'}
},
{
id: '3',
host: '192.168.40.243',
idc: {id: '6', name: 'idc151655', location: 'sh'}
},
{
id: '4',
host: '192.168.40.244',
idc: {id: '6', name: 'idc151655', location: 'sh'}
},
{
id: '5',
host: '192.168.40.245',
idc: {id: '7', name: 'idc151656', location: 'gd'}
},
{
id: '6',
host: '192.168.40.246',
idc: {id: '9', name: 'idc151657', location: 'fj'}
},
],
idcData: [
{id: '1', name: 'idc151656', location: 'gd'},
{id: '2', name: 'idc151656', location: 'gd'},
{id: '3', name: 'aerareqarew', location: 'zhaertaewr'},
{id: '4', name: 'idc151656', location: 'gd'},
{id: '5', name: 'idc151654', location: 'bj'},
{id: '6', name: 'idc151655', location: 'sh'},
{id: '7', name: 'idc151656', location: 'gd'},
{id: '8', name: 'idc151656', location: 'gd'},
{id: '9', name: 'idc151657', location: 'fj'},
]
}
},
methods: {
edit: function(u) {
this.promServer = Object.assign({}, u);
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.prom.editProm") + " ID：" + u.id;
this.rightBox.show = true;
},
del: function(u) {
},
detail: function(u) {
this.promServer = Object.assign({}, u);
this.rightBox.isEdit = false;
this.rightBox.title = "Prometheus Server ID：" + u.id;
this.rightBox.show = true;
},
add: function() {
this.cleanPromServer();
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.prom.createProm");
this.rightBox.show = true;
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.prom.editProm") + " ID：" + this.promServer.id;
}
},
toEditIdc: function(item) {
if (!item.isEdit) {
//如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑
this.blurEditIdc();
item.isEdit = true;
} else {
//如果已在编辑状态，判断name是否有变更，有变更则发请求
if (item.name != item.oldName) {
if (this.updateIdcName(item) == 200) {
item.isEdit = false;
}
} else {
item.errorMessage = '';
item.isEdit = false;
}
}
},
blurEditIdc: function() {
for (var i = 0; i < this.idcData.length; i++) {
if (this.idcData[i].isEdit) {
this.idcData[i].name = this.idcData[i].oldName;
this.idcData[i].isEdit = false;
this.idcData[i].errorMessage = '';
break;
}
}
},
toDelIdc: function(item) {
this.blurEditIdc();
//TODO 请求后台，删除
},
initIdcData: function() {
for (var i = 0; i < this.idcData.length; i++) {
this.$set(this.idcData[i], 'oldName', this.idcData[i].name);
this.$set(this.idcData[i], 'isEdit', false);
}
},
esc: function() {
this.rightBox.show = false;
},
stopFun: function() {
},
updateIdcName: function(item) {
//TODO 请求接口改名
var code = 200;
//this.$set(item, 'errorMessage', 'err');
item.errorMessage = '';
item.oldName = item.name;
return code;
},
cleanPromServer: function() {
this.promServer = {
id: '',
host: '',
idc: {id: '', name: '', location: ''}
}
}
},
mounted() {
this.initIdcData();
}
}
</script>

6
nezha-fronted/src/router/index.js
View File

@@ -30,8 +30,12 @@ export default new Router({
component: resolve => require(['../components/page/asset/asset.vue'], resolve),
},
{
path: '/alarm',
path: '/account',
component: resolve => require(['../components/page/config/account.vue'], resolve),
},
{
path: '/promServer',
component: resolve => require(['../components/page/config/promServer.vue'], resolve),
}
]
},

5
nezha-fronted/src/store/index.js
View File

@@ -4,7 +4,10 @@ import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
assetSelect:''
assetData:{
selectedData:'',
moduleData:'',
}
},
getters: {
},