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

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

@@ -361,7 +361,7 @@ html {
/* end--endpoint->子弹框asset搜索框前缀和后缀*/
/* begin--自定义可编辑的el-select下拉框样式*/
.config-dropdown {
width: 550px;
width: 520px;
}
.config-dropdown-btn {
display: inline-block;

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

@@ -1,12 +1,28 @@
<template>
<div class="header">
<div class="submenu">
<el-menu
class="el-menu-demo"
mode="horizontal"
background-color="#ffffff"
unique-opened
>
<el-submenu index="0">
<template slot="title">
<div class="menu-create">
&nbsp;&nbsp;<i class="el-icon-plus"></i>
<div>{{$t('overall.create')}}</div>
</div>
</template>
<template v-for="(item, index) in createMenu">
<el-menu-item :index="'0-' + index.toString()">
<div @click="createBox(item)">
<span>{{item.label}}</span>
</div>
</el-menu-item>
</template>
</el-submenu>
<el-menu-item index="1" @click="jumpTo('dashboard')">
<div>
{{$t('overall.dashboard')}}
@@ -17,7 +33,7 @@
<div @click="jumpToProject('project', projectData[0])">{{$t('overall.project')}}</div>
</template>
<template v-for="(item, index) in projectData">
<el-menu-item :index="index.toString()">
<el-menu-item :index="'2-' + index.toString()">
<div @click="jumpToProject('project', item)">
<span>{{item.name}}</span>
<div @click.stop="toEditProject(item)" class="menu-edit"><i class="el-icon-edit-outline"></i></div>
@@ -30,7 +46,7 @@
<div @click="jumpToAsset('asset')">{{$t('overall.asset')}}</div>
</template>
<template v-for="(item, index) in assetData">
<el-menu-item :index="index.toString()">
<el-menu-item :index="'3-' + index.toString()">
<div @click="jumpToAsset('asset',item.id)">{{item.name}}</div>
</el-menu-item>
</template>
@@ -39,10 +55,10 @@
<template slot="title">
<div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
</template>
<el-menu-item index="1">
<el-menu-item index="4-0">
<div @click="jumpTo('alertList')">{{$t('alert.alertList')}}</div>
</el-menu-item>
<el-menu-item index="2">
<el-menu-item index="4-1">
<div @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div>
</el-menu-item>
</el-submenu>
@@ -50,10 +66,10 @@
<template slot="title">
<div @click="jumpTo('account')">{{$t('overall.config')}}</div>
</template>
<el-menu-item index="1">
<el-menu-item index="5-0">
<div @click="jumpTo('account')">{{$t('config.account.account')}}</div>
</el-menu-item>
<el-menu-item index="2">
<el-menu-item index="5-1">
<div @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div>
</el-menu-item>
</el-submenu>
@@ -101,7 +117,32 @@ export default {
return {
language: localStorage.getItem("language"),
assetData: [],
projectData: []
projectData: [],
createMenu: [
{
label: this.$t('project.project.createProject'),
url: 'project',
type: 1
},
{
label: this.$t('project.module.createModule'),
url: 'project',
type: 2
},
{
label: this.$t('project.endpoint.createEndpoint'),
url: 'project',
type: 3
},
{
label: this.$t('asset.createAsset'),
url: 'asset'
},
{
label: this.$t('alert.config.createAlertConfig'),
url: 'alertConfig'
}
]
}
},
methods: {
@@ -112,6 +153,9 @@ export default {
t: +new Date()
}
});
},
createBox(item) {
},
jumpToAsset(data, id) {
this.$store.state.assetData.moduleData = data;
@@ -151,7 +195,7 @@ export default {
this.getProjectData();
},
computed: {
projectListReload() {
projectListReloadWatch() {
return this.$store.state.projectListReload;
}
},
@@ -159,7 +203,7 @@ export default {
projectListReloadWatch(n, o) {
if (n) {
this.getProjectData();
this.$store.commit('projectListReload', false);
this.$store.commit('projectListReloadChange', false);
}
}
}
@@ -266,6 +310,20 @@ export default {
.header-name-jiantou {
position: static !important;
}
.el-menu-demo>li:first-of-type {
position: fixed;
left: 40%;
top: 0;
}
.menu-create {
line-height: 15px;
text-align: center;
padding-top: 15px;
}
.menu-create .el-icon-plus {
font-size: 12px;
line-height: 12px;
}
.menu-edit {
line-height: 36px;
float: right;

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

@@ -15,9 +15,16 @@ const en = {
search: 'Search',
add: "Add",
option: "Option",
clearAll: "Clear All"
clearAll: "Clear All",
},
tip: {
confirmDelete: "Confirm Delete?",
yes: "Yes",
no: "No",
deleteSuccess: "Successfully Deleted"
},
asset:{
createAsset: "Create Asset",
tableTitle: {
id: 'ID',
assetType: '资产类型',
@@ -65,7 +72,8 @@ const en = {
//侧滑框
promId: "Prometheus Server ID",
createProm: "Create Prometheus Server",
editProm: "Edit Prometheus Server"
editProm: "Edit Prometheus Server",
type: "Type"
},
},
alert: {
@@ -86,9 +94,9 @@ const en = {
charts: "Charts",
//表内容
projectalert: "Project Alert",
modulealert: "Module Alert",
devicealert: "Device Alert",
projectAlert: "Project Alert",
moduleAlert: "Module Alert",
deviceAlert: "Device Alert",
pending: "Pending",
expired: "Expired"
},
@@ -96,11 +104,20 @@ const en = {
name: "Name",
receiver: "Receiver",
expr: "Expr",
for: "For",
for: "For (s)",
link: 'Link',
option: "Option",
alertConfig: "Alert Config",
createalertConfig: "Create Alert Config",
editalertConfig: "Edit Alert Config",
createAlertConfig: "Create Alert Config",
editAlertConfig: "Edit Alert Config",
medium: "Medium",
high: "High",
low: "Low",
typeOption: {
project: 'Project',
module: 'Module',
asset: 'Asset'
}
}
},
project: {
@@ -108,13 +125,15 @@ const en = {
project: "Project",
projectName: "Project Name",
editProject: "Edit Project",
description: "Description"
description: "Description",
createProject: "Create Project"
},
module: {
module: "Module",
moduleName: "Module Name",
editModule: "Edit Module",
description: "Description",
createModule: "Create Module",
tip: {
defaultEndpointSet: "Default Endpoint Set",
relation: "Endpoints associated with Module will reference Port/Path/Param/Params by default"
@@ -132,7 +151,12 @@ const en = {
asset: "Asset",
lastUpdate: "Last Update",
},
metrics: "Metrics"
metrics: {
metrics: "Metrics",
name: 'name',
type: 'Type',
description: 'Desc'
}
},
...enLocale
}

180
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-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-if="rightBox.isEdit"
placeholder=""
v-model="alertRule.severity"
size="small"
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() {

10
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -169,7 +169,7 @@
</div>
<div class="content-right">
<div class="top-tools">
<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active margin-l-10 top-tool top-tool-right" size="mini">
<el-button @click="" class="top-tool-btn top-tool-btn-active margin-l-10 top-tool top-tool-right" size="mini">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
@@ -289,6 +289,14 @@ export default {
}
});
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getAlertList();
},
pageSize(val) {
this.pageObj.pageSize = val;
this.getAlertList();
}
},
mounted() {
this.getAlertList();

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

@@ -176,7 +176,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"
@@ -229,7 +229,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">{{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 @click="save" 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--底部按钮-->
@@ -364,17 +364,24 @@ export default {
this.rightBox.title = this.$t("config.account.createAccount");
this.rightBox.show = true;
},
save: function() {
this.$post('sys/user/update', this.user).then(response => {
if (response.code === 200) {
this.rightBox.isEdit = false;
}
});
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.account.editAccount") + " ID：" + this.user.userId;
} else {
this.save();
}
},
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: {
@@ -421,9 +428,6 @@ export default {
},
esc: function() {
this.rightBox.show = false;
},
stopFun: function() {
},
updateReceiverName: function(item) {
//TODO 请求接口改名

131
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -60,6 +60,10 @@
>
<template slot-scope="scope" :column="item">
<span v-if="item.prop == 'idc'">{{scope.row[item.prop].name}}</span>
<span v-else-if="item.prop == 'type'">
{{scope.row[item.prop] == '1' ? 'Global' : ''}}
{{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
@@ -93,7 +97,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 && promServer.id != ''">
<div @click="del" class="right-box-top-btn" v-if="rightBox.isEdit && promServer.id != ''">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
@@ -119,7 +123,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"
@@ -153,6 +157,33 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.host}}</div>
</div>
</div>
<div class="right-box-form-row">
<div class="right-box-form-label">Port</div>
<div class="right-box-form-content">
<el-input
type="text"
v-if="rightBox.isEdit"
placeholder=""
v-model="promServer.port"
size="small"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.port}}</div>
</div>
</div>
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('config.promServer.type')}}</div>
<div class="right-box-form-content">
<el-select popper-class="config-dropdown" v-model="promServer.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 == promServer.type" class="right-box-form-content-txt">{{item.value}}</div>
</div>
</div>
</div>
<!-- end--表单-->
@@ -201,53 +232,27 @@ export default {
label: 'Host',
prop: 'host',
show: true,
}, {
label: 'Port',
prop: 'port',
show: true,
}, {
label: this.$t("config.promServer.type"),
prop: 'type',
show: true,
}
],
tableData: [],
/*tableData: [
idcData: [],
typeData: [
{
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: []
/*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'},
]*/
key: 1,
value: 'Global'
}, {
key: 2,
value: 'Per-Datacenter'
}
]
}
},
methods: {
@@ -258,6 +263,20 @@ export default {
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("promServer?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);
}
})
});
},
getTableData: function() {
this.$get('promServer', this.pageObj).then(response => {
@@ -285,6 +304,7 @@ export default {
if (response.code === 200) {
this.getTableData();
this.rightBox.isEdit = false;
this.esc();
}
});
} else {
@@ -292,6 +312,7 @@ export default {
if (response.code === 200) {
this.getTableData();
this.rightBox.isEdit = false;
this.esc();
}
});
}
@@ -316,8 +337,8 @@ export default {
item.errorMessage = '';
item.oldName = item.name;
item.isEdit = false;
this.getIdcData();
} else {
console.info(response.msg)
this.$set(item, 'errorMessage', response.msg);
}
})
@@ -341,24 +362,21 @@ export default {
this.blurEditIdc();
//TODO 请求后台，删除
},
getIdcData: async function() {
console.info(1)
await this.$get('idc', this.pageObj).then(response => {
getIdcData: function() {
this.$get('idc', this.pageObj).then(response => {
if (response.code === 200) {
this.idcData = response.data.list;
this.getTableData();
}
})
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);
}
this.getTableData();
}
})
},
esc: function() {
this.rightBox.show = false;
},
stopFun: function() {
},
jumpTo(data,id) {
this.$store.state.assetData.moduleData = data
@@ -374,10 +392,9 @@ export default {
this.$get('promServer', this.pageObj).then(response => {
if (response.code === 200) {
for (var i = 0; i < response.data.list.length; i++) {
console.info(this.idcData)
for (var j = 0; j < this.idcData.length; j++) {
if (response.data.list[i].idcId == this.idcData[j].id) {
response.data.list[i].idc = this.idcData[j];
response.data.list[i].idc = Object.assign({}, this.idcData[j]);
break;
}
}

262
nezha-fronted/src/components/page/project/project.vue
View File

@@ -246,17 +246,57 @@
</div>
</div>
</div>
<div class="content-right">
<!--metrics-->
<div class="content-right" v-if="tableShow == 2">
<div class="top-tools">
<el-button-group>
<el-button @click="tableShow = 1" class="top-tool-btn top-tool" size="mini">
<span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
</el-button>
<el-button @click="" class="top-tool-btn top-tool top-tool-btn-active" size="mini">
<span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
</el-button>
</el-button-group>
<el-input
class="top-tool-search top-tool top-tool-right"
type="text"
:placeholder="$t('overall.search')"
size="mini"
></el-input>
</div>
<el-table
:data="metricsTableData"
border
height="calc(100% - 65px)"
style="width: 100%;">
<el-table-column
v-for="(item, index) in metricsTableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
:label="item.label"
>
<template slot-scope="scope" :column="item">
<span>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
</el-table>
<Pagination :pageObj="metricsPageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
<!--endpoint-->
<div class="content-right" v-if="tableShow == 1">
<div class="top-tools">
<el-button-group>
<el-button @click="" class="top-tool-btn top-tool top-tool-btn-active" size="mini">
<span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
</el-button>
<el-button @click="" class="top-tool-btn top-tool" size="mini">
<span class="top-tool-btn-txt">{{$t('project.metrics')}}</span>
<el-button @click="tableShow = 2" class="top-tool-btn top-tool" size="mini">
<span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
</el-button>
</el-button-group>
<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
<el-button @click.stop="toAdd" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
@@ -273,7 +313,7 @@
height="calc(100% - 65px)"
style="width: 100%;">
<el-table-column
v-for="(item, index) in tableTitle"
v-for="(item, index) in endpointTableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -287,8 +327,8 @@
<el-table-column :label="$t('overall.option')" width="100">
<template slot-scope="scope" :column="item">
<div class="content-right-options">
<span @click="detail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
<span @click="toEdit(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
<span @click.stop="detail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
<span @click.stop="toEdit(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
</div>
</template>
</el-table-column>
@@ -298,7 +338,7 @@
<!-- begin--右弹框-->
<transition name="right-box">
<div class="right-box right-box-endpoint" v-if="rightBox.show">
<div class="right-box right-box-endpoint" v-if="rightBox.show" @click.stop>
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc(1)">
@@ -314,7 +354,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 && endpoint.id != ''">
<div class="right-box-top-btn" v-if="rightBox.isEdit && endpoint.id != ''" @click="del()">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
@@ -343,7 +383,7 @@
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.module.module")}}</div>
<div class="right-box-form-content">
<el-select @change="((val) => {changeSelectedModule(val.id)})" value-key="id" popper-class="config-dropdown" v-model="selectedModule" placeholder="" v-if="rightBox.isEdit" size="small">
<el-select @change="((val) => {changeSelectedModule(val)})" value-key="id" popper-class="config-dropdown" v-model="selectedModule" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option v-for="item in toSelectModuleData" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.module.name}}</div>
@@ -396,16 +436,16 @@
<div class="right-box-form-row">
<div class="right-box-form-label">
{{$t("project.endpoint.param")}}
<el-button class="param-btn param-btn-active margin-l-10" size="mini" @click="addParam"><i class="el-icon-plus"></i>{{$t('overall.add')}}</el-button>
<el-button class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button>
<el-button v-if="rightBox.isEdit" class="param-btn param-btn-active margin-l-10" size="mini" @click="addParam"><i class="el-icon-plus"></i>{{$t('overall.add')}}</el-button>
<el-button v-if="rightBox.isEdit" class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button>
</div>
<div class="right-box-form-content">
<div class="param-box param-box-endpoint">
<div class="param-box-row" v-for="(item, index) in paramObj">
<el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
<el-input :disabled="!rightBox.isEdit" placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
<span class="param-box-row-eq">=</span>
<el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
<span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
<el-input :disabled="!rightBox.isEdit" placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
<span v-if="rightBox.isEdit" class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
</div>
</div>
</div>
@@ -423,7 +463,7 @@
<!-- begin--子弹框-->
<transition name="right-sub-box">
<div class="right-sub-box" v-if="rightSubBox.show">
<div class="right-sub-box" @click.stop v-if="rightSubBox.show">
<!-- begin--标题-->
<div class="right-box-title">{{rightSubBox.title}}</div>
<!-- end--标题-->
@@ -484,7 +524,7 @@
<!-- begin--project弹框-->
<transition name="right-box">
<div class="right-box right-box-endpoint" v-if="projectRightBox.show">
<div class="right-box right-box-endpoint" v-if="projectRightBox.show" @click.stop>
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc(2)">
@@ -499,7 +539,7 @@
</div>
<span>{{$t('overall.save')}}</span>
</div>
<div class="right-box-top-btn" v-if="project.id != ''">
<div class="right-box-top-btn" v-if="project.id != ''" @click="projectDel">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
@@ -554,7 +594,7 @@
<!-- begin--module弹框-->
<transition name="right-box">
<div class="right-box right-box-endpoint" v-if="moduleRightBox.show">
<div class="right-box right-box-endpoint" v-if="moduleRightBox.show" @click.stop>
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc(3)">
@@ -569,7 +609,7 @@
</div>
<span>{{$t('overall.save')}}</span>
</div>
<div class="right-box-top-btn" v-if="currentModule.id != ''">
<div class="right-box-top-btn" v-if="currentModule.id != ''" @click="moduleDel">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
@@ -688,6 +728,7 @@ export default {
name: "project",
data() {
return {
tableShow: 1, // 1.endpoint; 2.metrics
projectRightBox: {
show: false,
title: ''
@@ -719,6 +760,11 @@ export default {
pageSize: 11,
total: 0
},
metricsPageObj: {
pageNo: 1,
pageSize: 20,
total: 0
},
endpoint: {
id: '',
host: '',
@@ -727,7 +773,9 @@ export default {
path: '',
asset: {id: '', name: '', host: ''},
project: {id: '', name: ''},
module: {id: '', name: '', param: '', paramObj: {}}
module: {id: '', name: '', param: '', paramObj: {}, projectId: ''},
moduleId: '',
assetId: ''
},
moduleRightBox: {
show: false,
@@ -735,18 +783,20 @@ export default {
},
currentModule: { //左侧列表当前选中的module
id: '',
name: ''
name: '',
projectId: ''
},
selectedModule: { //侧滑框中选中的module
id: '',
name: ''
name: '',
projectId: ''
},
selectedAsset: { //侧滑框中选中的asset
id: '',
host: '',
sn: ''
},
tableTitle: [
endpointTableTitle: [
{
label: this.$t("project.endpoint.endpointId"),
prop: 'id',
@@ -784,7 +834,31 @@ export default {
moduleData: [], //左侧列表的module信息
toSelectModuleData: [], //侧滑框中可选的module
paramObj: [], //侧滑框中的param信息
assetData: [] //侧滑框中可选的asset
assetData: [], //侧滑框中可选的asset
metricsTableData: [
{
name: 'Topic.msg',
type: 'Counter',
desc: '10000'
}
],
metricsTableTitle: [
{
label: this.$t("project.metrics.name"),
prop: 'name',
show: true,
},
{
label: this.$t("project.metrics.type"),
prop: 'type',
show: true,
},
{
label: this.$t("project.metrics.description"),
prop: 'desc',
show: true,
},
]
}
},
methods: {
@@ -820,6 +894,9 @@ export default {
this.$get('project').then(response => {
if (response.code === 200) {
this.projectData = response.data.list;
console.info(this.project);
this.project = this.projectData[0];
console.info(this.project);
}
});
},
@@ -840,6 +917,8 @@ export default {
// endpoint弹框中的asset子弹框里asset选择事件
selectAsset: function(obj) {
this.selectedAsset = obj;
this.endpoint.host = obj.host;
this.endpoint.assetId = obj.id;
},
// endpoint弹框中的asset子弹框搜索
searchAsset: function() {
@@ -905,12 +984,12 @@ export default {
// 左侧module列表点击事件
changeListModule: function(module) {
this.currentModule = Object.assign({}, module);
this.moduleRightBox.show = false;
this.esc(3);
this.getEndPointTableData();
},
// endpoint弹框中module下拉框点击事件
changeSelectedModule: function(moduleId) {
if (moduleId == this.endpoint.moduleId) {
changeSelectedModule: function(module) {
if (module.id == this.endpoint.moduleId) {
try {
this.paramObj = JSON.parse(JSON.stringify(this.endpoint.paramObj));
} catch(err) {
@@ -925,6 +1004,8 @@ export default {
console.info(err);
}
}
this.endpoint.port = module.port;
this.endpoint.path = module.path;
},
// 打开endpoint编辑页
toEdit: function(endpoint) {
@@ -956,13 +1037,71 @@ export default {
this.moduleRightBox.title = this.$t('project.module.editModule') + " ID：" + module.id;
},
// 删除endpoint
del: function(u) {
del: function() {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("endpoint?ids=" + this.endpoint.id).then(response => {
if (response.code === 200) {
this.$message({duration: 3000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getEndPointTableData();
} else {
this.$message.error(response.msg);
}
})
});
},
// 删除module
moduleDel: function() {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("module?ids=" + this.currentModule.id).then(response => {
if (response.code === 200) {
this.$message({duration: 3000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.esc(3);
this.getModuleData();
} else {
this.$message.error(response.msg);
}
})
});
},
projectDel: function() {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("project?ids=" + this.project.id).then(response => {
if (response.code === 200) {
this.$message({duration: 3000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.$store.commit('projectRightBoxShow', false);
this.getProjectData();
this.getModuleData();
if (this.projectData.length > 0) {
this.$store.commit('setProject', this.projectData[0]);
}
this.$store.commit('projectListReloadChange', true);
} else {
this.$message.error(response.msg);
}
})
});
},
// 打开endpoint新增页
toAdd: function() {
this.cleanEndpoint();
this.paramObj = [];
this.toSelectModuleData = [];
this.endpoint.project = Object.assign({}, this.project);
this.paramObj = Object.assign([], this.currentModule.paramObj);
this.getToSelectModuleData(this.project.id);
this.selectedModule = Object.assign({}, this.currentModule);
this.endpoint.port = this.selectedModule.port;
this.endpoint.path = this.selectedModule.path;
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("project.endpoint.createEndpoint");
this.rightBox.show = true;
@@ -970,6 +1109,7 @@ export default {
// 打开endpoint详情页
detail: function(u) {
this.endpoint = Object.assign({}, u);
this.paramObj = Object.assign([], u.paramObj);
this.rightBox.isEdit = false;
this.rightBox.title = this.$t("project.endpoint.endpoint") + " ID：" + u.id;
this.rightBox.show = true;
@@ -978,25 +1118,67 @@ export default {
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.getToSelectModuleData(this.endpoint.project.id);
this.selectedModule = Object.assign({}, this.currentModule);
this.rightBox.title = this.$t("project.endpoint.editEndpoint") + " ID：" + this.endpoint.id;
} else {
this.save();
}
},
// 保存project
projectSave: function() {
this.$put('project', this.project).then(response => {
if (response.code === 200) {
this.$store.commit('projectListReload', true);
this.projectRightBox.show = false;
this.$store.commit('setProject', this.project);
this.$store.commit('projectListReloadChange', true);
this.$store.commit('projectRightBoxShow', false);
}
});
},
// 保存module
moduleSave: function() {
this.currentModule.param = this.paramToJson();
this.currentModule.projectId = this.currentModule.project.id;
this.$put('module', this.currentModule).then(response => {
if (response.code === 200) {
this.esc(3);
this.getModuleData();
}
});
},
// 保存endpoint
save: function() {
this.endpoint.param = this.paramToJson();
this.endpoint.moduleId = this.selectedModule.id;
if (this.endpoint.id) {
this.$put('endpoint', this.endpoint).then(response => {
if (response.code === 200) {
this.rightBox.isEdit = false;
this.esc(1);
this.getEndPointTableData();
}
});
} else {
this.$post('endpoint', this.endpoint).then(response => {
if (response.code === 200) {
this.rightBox.isEdit = false;
this.esc(1);
this.getEndPointTableData();
}
});
}
},
paramToJson: function() {
let tempParam = {};
for (let i = 0; i < this.paramObj.length; i++) {
eval('tempParam.' + this.paramObj[i].key + '="' + this.paramObj[i].value + '"');
}
let jsonString = JSON.stringify(tempParam);
if (jsonString == '{}') {
return "";
} else {
return jsonString;
}
},
// 清除module、endpoint弹框中的param
clearAllParam: function() {
@@ -1042,13 +1224,18 @@ export default {
this.pageObj.pageSize = val;
this.getEndPointTableData();
},
// endpoint弹框的子弹框顶部搜索条件选中事件
// endpoint弹框的asset子弹框顶部搜索条件选中事件
dropdownSelect: function(label) {
this.assetSearch.label = label;
this.assetSearch.dropdownShow = false;
}
},
mounted: function() {
window.addEventListener('click', () => {
this.esc(1);
this.$store.commit('projectRightBoxShow', false);
this.esc(3);
});
this.getModuleData();
this.getProjectData();
this.getAssetData();
@@ -1064,11 +1251,12 @@ export default {
watch: {
sProject(n, o) {
this.project = Object.assign({}, n);
this.esc(3);
this.esc(1);
this.projectRightBox.title = this.$t("project.project.editProject") + " ID：" + n.id;
this.getModuleData();
},
projectBoxShow(n, o) {
console.info(n)
this.projectRightBox.show = n;
}
}

9
nezha-fronted/src/http.js
View File

@@ -3,8 +3,8 @@ import router from './router'
import qs from 'qs' //引入数据格式化
//axios.defaults.baseURL = 'http://localhost:8088/nz-admin';
axios.defaults.baseURL = 'http://192.168.41.69:8080/nz-admin';
// axios.defaults.baseURL = 'http://192.168.40.247:8080/nz-admin';
//axios.defaults.baseURL = 'http://192.168.41.69:8080/nz-admin';
axios.defaults.baseURL = 'http://192.168.40.247:8080/nz-admin';
axios.interceptors.request.use(config => {
// config.headers = {
@@ -41,7 +41,7 @@ export function get(url, params) {
}).then(response => {
resolve(response.data)
}).catch(err => {
resolve(err.response.data)
//resolve(err.response.data)
})
})
}
@@ -51,8 +51,7 @@ export function post(url, params) {
axios.post(url, params).then(response => {
resolve(response.data)
}).catch(err => {
console.info(err)
resolve('失败')
resolve(err.response.data);
})
})
}

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

@@ -25,7 +25,7 @@ const store = new Vuex.Store({
projectRightBoxShow(state, show) {
state.projectBoxShow = show;
},
projectListReload(state, reload) {
projectListReloadChange(state, reload) {
state.projectListReload = reload;
}
},