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

Merge remote-tracking branch 'origin/codeCheck' into codeCheck

Browse Source
This commit is contained in:
wanghaoyu
2019-12-18 16:56:04 +08:00
parent a339243884 bab11922cf
commit 9fd09cac6a
13 changed files with 2295 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

107
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,34 @@ 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',
type: 4
},
{
label: this.$t('alert.config.createAlertConfig'),
url: 'alertConfig',
type: 5
}
]
}
},
methods: {
@@ -113,6 +156,31 @@ export default {
}
});
},
createBox(item) {
this.jumpTo(item.url);
setTimeout(() =>{
if (item.type == 1) {
if (this.projectData.length > 0) {
this.$store.commit('setProject', this.projectData[0]);
}
this.$store.commit('toCreateProject', true);
this.$store.commit('projectRightBoxShow', true);
} else if (item.type == 2) {
if (this.projectData.length > 0) {
this.$store.commit('setProject', this.projectData[0]);
}
this.$store.commit('toCreateModule', true);
} else if (item.type == 3) {
if (this.projectData.length > 0) {
this.$store.commit('setProject', this.projectData[0]);
}
this.$store.commit('toCreateEndpoint', true);
} else if (item.type == 5) {
this.$store.commit('projectRightBoxShow', false);
this.$store.commit('toCreateAlertConfig', true);
}
}, 120);
},
jumpToAsset(data, id) {
this.$store.state.assetData.moduleData = data;
this.$store.state.assetData.selectedData = id;
@@ -141,9 +209,12 @@ export default {
})
},
toEditProject(p) {
this.$store.commit('setProject', p);
this.$store.commit('projectRightBoxShow', true);
this.jumpTo('project');
setTimeout(() =>{
this.$store.commit('setProject', p);
this.$store.commit('projectRightBoxShow', true);
}, 50);
}
},
mounted() {
@@ -151,7 +222,7 @@ export default {
this.getProjectData();
},
computed: {
projectListReload() {
projectListReloadWatch() {
return this.$store.state.projectListReload;
}
},
@@ -159,7 +230,7 @@ export default {
projectListReloadWatch(n, o) {
if (n) {
this.getProjectData();
this.$store.commit('projectListReload', false);
this.$store.commit('projectListReloadChange', false);
}
}
}
@@ -266,6 +337,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;

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

@@ -15,9 +15,20 @@ const en = {
search: 'Search',
add: "Add",
option: "Option",
clearAll: "Clear All"
clearAll: "Clear All",
name: 'Name',
},
search: {
searchTip: 'Press Enter or click to search'
},
tip: {
confirmDelete: "Confirm Delete?",
yes: "Yes",
no: "No",
deleteSuccess: "Successfully Deleted"
},
asset:{
createAsset: "Create Asset",
tableTitle: {
id: 'ID',
assetType: '资产类型',
@@ -65,7 +76,8 @@ const en = {
//侧滑框
promId: "Prometheus Server ID",
createProm: "Create Prometheus Server",
editProm: "Edit Prometheus Server"
editProm: "Edit Prometheus Server",
type: "Type"
},
},
alert: {
@@ -86,9 +98,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 +108,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 +129,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 +155,12 @@ const en = {
asset: "Asset",
lastUpdate: "Last Update",
},
metrics: "Metrics"
metrics: {
metrics: "Metrics",
name: 'name',
type: 'Type',
description: 'Desc'
}
},
...enLocale
}

1301
nezha-fronted/src/components/common/searchInput.vue Normal file
View File

File diff suppressed because it is too large Load Diff

44
nezha-fronted/src/components/common/searchSelectInfo.vue Normal file
View File

@@ -0,0 +1,44 @@
<script>
import i18n from './i18n';
const searchSelectInfo = { // value: 传给后台的值；label：显示给用户看的值
severity: [ //告警级别
{
value: 'medium',
label: i18n.t("alert.config.medium")
},
{
value: 'high',
label: i18n.t("alert.config.high")
},
{
value: 'low',
label: i18n.t("alert.config.low")
}
],
promType: [ //promServer类型
{
value: 1,
label: 'Global'
},
{
value: 2,
label: 'Per-Datacenter'
}
],
alertType: [ //告警类型
{
value: 1,
label: i18n.t('alert.config.typeOption.project')
},
{
value: 2,
label: i18n.t('alert.config.typeOption.module')
},
{
value: 3,
label: i18n.t('alert.config.typeOption.asset')
}
]
};
export default searchSelectInfo;
</script>

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

@@ -2,6 +2,23 @@
.account {
height: 100%;
}
.right-box::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
.right-box::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.right-box::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.right-box {
overflow: auto;
}
.account-list-option {
cursor: pointer;
display: inline-block;
@@ -31,16 +48,11 @@
</div>
<div class="content-right">
<div class="top-tools">
<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool top-tool-right margin-l-10" size="mini">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
<el-input
class="top-tool-search top-tool top-tool-right"
type="text"
:placeholder="$t('overall.search')"
size="mini"
></el-input>
<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool top-tool-right margin-l-10" size="mini">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
</div>
<el-table
:data="tableData"
@@ -59,8 +71,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 +106,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 +121,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 +137,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 +196,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 +206,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 +249,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 +263,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 +275,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 +301,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,9 +312,40 @@
</template>
<script>
export default {
name: "account",
name: "alert-config",
data() {
return {
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
id: 1,
name: 'ID',
type: 'input',
label: 'id',
disabled: false
},{
id: 2,
name: this.$t('alert.alertName'),
type: 'input',
label: 'alertName',
disabled: false
},{
id: 3,
name: this.$t('alert.list.type'),
type: 'select',
label: 'alertType',
disabled: false
},{
id: 4,
name: this.$t('alert.severity'),
type: 'selectString',
label: 'severity',
disabled: false
}],
},
searchLabel: { //搜索参数
},
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看，true编辑
@@ -240,6 +355,7 @@ export default {
id: '',
alertName: '',
type: '',
linkObject: {id: '', name: ''},
linkId: '',
expr: '',
last: '',
@@ -253,6 +369,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 +411,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,18 +470,32 @@ 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();
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("alert.config.createalertConfig");
this.rightBox.title = this.$t("alert.config.createAlertConfig");
this.rightBox.show = true;
},
detail: function(u) {
@@ -338,10 +504,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) {
@@ -382,7 +567,9 @@ export default {
}
},
getTableData: function() {
this.$get('alert/rule', this.pageObj).then(response => {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('alert/rule', this.searchLabel).then(response => {
if (response.code == 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total;
@@ -391,9 +578,6 @@ export default {
},
esc: function() {
this.rightBox.show = false;
},
stopFun: function() {
},
updateReceiverName: function(item) {
//TODO 请求接口改名
@@ -409,6 +593,7 @@ export default {
alertName: '',
type: '',
linkId: '',
linkObject: {id: '', name: ''},
expr: '',
last: '',
severity: '',
@@ -418,8 +603,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,16 +614,36 @@ export default {
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getTableData()
this.getTableData();
},
pageSize(val) {
this.pageObj.pageSize = val;
this.getTableData()
this.getTableData();
},
search: function(searchObj) {
this.searchLabel = {};
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
}
}
this.getTableData();
}
},
mounted() {
this.getTableData();
this.initReceiverData();
},
computed: {
sProject() {
return this.$store.state.createAlertConfig;
}
},
watch: {
sProject(n, o) {
this.$store.commit('toCreateAlertConfig', false);
this.toAdd();
}
}
}
</script>

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

@@ -169,16 +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">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
<el-input
class="top-tool-search top-tool top-tool-right"
type="text"
:placeholder="$t('overall.search')"
size="mini"
></el-input>
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
</div>
<el-table
:data="tableData"
@@ -194,13 +185,18 @@
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'type'" class="account-list-options">
<span v-if="scope.row[item.prop] == 1" class="account-list-option">Project alert</span>
<span v-if="scope.row[item.prop] == 2" class="account-list-option">Module alert</span>
<span v-if="scope.row[item.prop] == 3" class="account-list-option">Device alert</span>
<span v-if="scope.row[item.prop] == 1" class="account-list-option">Project</span>
<span v-if="scope.row[item.prop] == 2" class="account-list-option">Module</span>
<span v-if="scope.row[item.prop] == 3" class="account-list-option">Device</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>
<div v-else-if="item.prop == 'linkObject'">
<span v-if="scope.row['type'] == 1 || scope.row['type'] == 2" class="account-list-option">{{scope.row[item.prop].name}}</span>
<span v-if="scope.row['type'] == 3" class="account-list-option">{{scope.row[item.prop].host}}</span>
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="account-list-option">{{scope.row[item.prop].name}}</span>
<span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="account-list-option">{{scope.row[item.prop].host}}</span>
</div>
<div v-else-if="item.prop == 'state'">
<span class="account-list-option">
@@ -267,12 +263,53 @@ export default {
show: true,
}
],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
id: 2,
name: this.$t('alert.alertName'),
type: 'input',
label: 'alertName',
disabled: false
},{
id: 3,
name: this.$t('alert.list.type'),
type: 'select',
label: 'alertType',
disabled: false
},{
id: 4,
name: this.$t('alert.severity'),
type: 'selectString',
label: 'severity',
disabled: false
}],
},
searchLabel: { //搜索参数
},
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")
}
],
tableData: []
}
},
methods: {
getAlertList: function() {
this.$get('alert/message', this.pageObj).then(response => {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('alert/message', this.searchLabel).then(response => {
if (response.code == 200) {
this.tableData = response.data.list
this.pageObj.total = response.data.total
@@ -289,6 +326,23 @@ export default {
}
});
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getAlertList();
},
pageSize(val) {
this.pageObj.pageSize = val;
this.getAlertList();
},
search: function(searchObj) {
this.searchLabel = {};
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
}
}
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 请求接口改名

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

@@ -39,12 +39,7 @@
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
<el-input
class="top-tool-search top-tool top-tool-right"
type="text"
:placeholder="$t('overall.search')"
size="mini"
></el-input>
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
</div>
<el-table
:data="tableData"
@@ -60,6 +55,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 +92,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>
@@ -109,7 +108,7 @@
<!-- 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-label">DC</div>
<div class="right-box-form-content">
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
@@ -119,7 +118,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 +152,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--表单-->
@@ -194,60 +220,71 @@ export default {
show: true,
width: 80
}, {
label: 'IDC',
label: 'DC',
prop: 'idc',
show: true,
}, {
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'
}
],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
id: 1,
name: 'ID',
type: 'input',
label: 'id',
disabled: false
},{
id: 5,
name: 'DC',
type: 'dc',
label: 'dc',
disabled: false
},{
id: 6,
name: this.$t('config.promServer.type'),
type: 'select',
label: 'promType',
disabled: false
},{
id: 8,
name: this.$t('project.endpoint.host'),
type: 'input',
label: 'host',
disabled: false
},{
id: 9,
name: this.$t('project.endpoint.port'),
type: 'input',
label: 'port',
disabled: false
}],
},
searchLabel: { //搜索参数
},
}
},
methods: {
@@ -258,14 +295,20 @@ export default {
this.rightBox.show = true;
},
del: function(u) {
},
getTableData: function() {
this.$get('promServer', this.pageObj).then(response => {
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
}
})
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);
}
})
});
},
detail: function(u) {
this.promServer = Object.assign({}, u);
@@ -285,6 +328,7 @@ export default {
if (response.code === 200) {
this.getTableData();
this.rightBox.isEdit = false;
this.esc();
}
});
} else {
@@ -292,6 +336,7 @@ export default {
if (response.code === 200) {
this.getTableData();
this.rightBox.isEdit = false;
this.esc();
}
});
}
@@ -316,8 +361,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 +386,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;
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();
}
})
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() {
},
jumpTo(data,id) {
this.$store.state.assetData.moduleData = data
@@ -371,13 +413,14 @@ export default {
});
},
getTableData: function() {
this.$get('promServer', this.pageObj).then(response => {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('promServer', this.searchLabel).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;
}
}
@@ -402,6 +445,15 @@ export default {
pageSize(val) {
this.pageObj.pageSize = val;
this.getTableData();
},
search: function(searchObj) {
this.searchLabel = {};
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
}
}
this.getTableData();
}
},
mounted: function() {

425
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>
@@ -518,27 +558,16 @@
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.project.projectName")}}</div>
<div class="right-box-form-content">
<el-input
placeholder=""
maxlength="64"
show-word-limit
v-model="project.name"
size="small"
></el-input>
<el-input v-if="!projectRightBox.isCreate" placeholder="" maxlength="64" show-word-limit v-model="project.name" size="small"></el-input>
<el-input v-if="projectRightBox.isCreate" placeholder="" maxlength="64" show-word-limit v-model="newProject.name" size="small"></el-input>
</div>
</div>
<!--description-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.project.description")}}</div>
<div class="right-box-form-content">
<el-input
type="textarea"
placeholder=""
maxlength="1024"
show-word-limit
v-model="project.remark"
size="small"
></el-input>
<el-input v-if="!projectRightBox.isCreate" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="project.remark" size="small"></el-input>
<el-input v-if="projectRightBox.isCreate" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="newProject.remark" size="small"></el-input>
</div>
</div>
</div>
@@ -554,7 +583,8 @@
<!-- 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>
<el-scrollbar style="height: 100%">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc(3)">
@@ -569,7 +599,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 != '' && !moduleRightBox.isCreate" @click="moduleDel">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
@@ -588,36 +618,28 @@
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.project.project")}}</div>
<div class="right-box-form-content">
<el-select value-key="id" popper-class="config-dropdown" v-model="currentModule.project" placeholder="" size="small">
<el-select v-if="!moduleRightBox.isCreate" value-key="id" popper-class="config-dropdown" v-model="currentModule.project" placeholder="" size="small">
<el-option v-for="item in projectData" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select>
<el-select v-if="moduleRightBox.isCreate" popper-class="config-dropdown" v-model="newModule.projectId" placeholder="" size="small">
<el-option v-for="item in projectData" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</div>
</div>
<!--name-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.module.moduleName")}}</div>
<div class="right-box-form-content">
<el-input
placeholder=""
maxlength="64"
show-word-limit
v-model="currentModule.name"
size="small"
></el-input>
<el-input v-if="!moduleRightBox.isCreate" placeholder="" maxlength="64" show-word-limit v-model="currentModule.name" size="small"></el-input>
<el-input v-if="moduleRightBox.isCreate" placeholder="" maxlength="64" show-word-limit v-model="newModule.name" size="small"></el-input>
</div>
</div>
<!--description-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.module.description")}}</div>
<div class="right-box-form-content">
<el-input
type="textarea"
placeholder=""
maxlength="1024"
show-word-limit
v-model="currentModule.remark"
size="small"
></el-input>
<el-input v-if="!moduleRightBox.isCreate" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="currentModule.remark" size="small"></el-input>
<el-input v-if="moduleRightBox.isCreate" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="newModule.remark" size="small"></el-input>
</div>
</div>
<!--tip-->
@@ -634,22 +656,16 @@
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.endpoint.port")}}</div>
<div class="right-box-form-content">
<el-input
placeholder=""
v-model="currentModule.port"
size="small"
></el-input>
<el-input v-if="!moduleRightBox.isCreate" placeholder="" v-model="currentModule.port" size="small"></el-input>
<el-input v-if="moduleRightBox.isCreate" placeholder="" v-model="newModule.port" size="small"></el-input>
</div>
</div>
<!--path-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.endpoint.path")}}</div>
<div class="right-box-form-content">
<el-input
placeholder=""
v-model="currentModule.path"
size="small"
></el-input>
<el-input v-if="!moduleRightBox.isCreate" placeholder="" v-model="currentModule.path" size="small"></el-input>
<el-input v-if="moduleRightBox.isCreate" placeholder="" v-model="newModule.path" size="small"></el-input>
</div>
</div>
<!--param-->
@@ -674,9 +690,10 @@
<!-- begin--底部按钮-->
<div class="right-box-bottom-btns">
<div @click="esc(3)" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="moduleSave" class="right-box-bottom-btn right-box-bottom-btn-50">{{currentModule.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
<div @click="esc(3)" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="moduleSave" class="right-box-bottom-btn right-box-bottom-btn-50">{{currentModule.id == '' && moduleRightBox.isCreate ? $t('overall.create') : $t('overall.save')}}</div>
</div>
<!-- end--底部按钮-->
</el-scrollbar>
</div>
</transition>
<!-- end--module弹框-->
@@ -688,11 +705,15 @@ export default {
name: "project",
data() {
return {
tableShow: 1, // 1.endpoint; 2.metrics
projectRightBox: {
show: false,
title: ''
title: '',
isCreate: false
},
project: {id: '', name: '', remark: ''},
newProject: {id: '', name: '', remark: ''},
newModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []},
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看，true编辑
@@ -719,6 +740,11 @@ export default {
pageSize: 11,
total: 0
},
metricsPageObj: {
pageNo: 1,
pageSize: 20,
total: 0
},
endpoint: {
id: '',
host: '',
@@ -727,26 +753,31 @@ 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,
title: ''
title: '',
isCreate: false
},
currentModule: { //左侧列表当前选中的module
id: '',
name: ''
name: '',
projectId: ''
},
selectedModule: { //侧滑框中选中的module
selectedModule: { //endpoint侧滑框中选中的module
id: '',
name: ''
name: '',
projectId: ''
},
selectedAsset: { //侧滑框中选中的asset
selectedAsset: { //endpoint侧滑框中选中的asset
id: '',
host: '',
sn: ''
},
tableTitle: [
endpointTableTitle: [
{
label: this.$t("project.endpoint.endpointId"),
prop: 'id',
@@ -784,7 +815,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: {
@@ -816,10 +871,21 @@ export default {
});
},
// 获取module、endpoint弹框中project下拉框数据
getProjectData: function() {
getProjectData: function(name) {
this.$get('project').then(response => {
if (response.code === 200) {
this.projectData = response.data.list;
if (name) {
for (let i = 0; i < this.projectData.length; i++) {
if (this.projectData[i].name == name) {
this.project = this.projectData[i];
this.$store.commit('setProject', this.project);
break;
}
}
} else {
this.project = this.projectData[0];
}
}
});
},
@@ -840,6 +906,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() {
@@ -858,7 +926,7 @@ export default {
this.$get('module', {projectId: this.$store.state.projectData.id}).then(response => {
if (response.code === 200) {
this.moduleData = response.data.list;
for (var i = 0; i < response.data.list.length; i++) {
for (let i = 0; i < response.data.list.length; i++) {
try {
var tempObj = JSON.parse(response.data.list[i].param);
} catch (err) {
@@ -877,7 +945,6 @@ export default {
this.endPointTableData = [];
this.pageObj.total = 0;
}
}
});
},
@@ -905,12 +972,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 +992,8 @@ export default {
console.info(err);
}
}
this.endpoint.port = module.port;
this.endpoint.path = module.path;
},
// 打开endpoint编辑页
toEdit: function(endpoint) {
@@ -956,20 +1025,85 @@ 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();
setTimeout(() => {
this.getModuleData();
}, 50);
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;
},
toAddProject: function() {
},
// 打开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 +1112,91 @@ 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;
}
});
if (!this.projectRightBox.isCreate) {
this.$put('project', this.project).then(response => {
if (response.code === 200) {
this.$store.commit('setProject', this.project);
this.$store.commit('projectListReloadChange', true);
this.$store.commit('projectRightBoxShow', false);
}
});
} else {
this.$post('project', this.newProject).then(response => {
if (response.code === 200) {
this.projectRightBox.isCreate = false;
this.getProjectData(this.newProject.name);
this.$store.commit('projectListReloadChange', true);
this.$store.commit('projectRightBoxShow', false);
this.getModuleData();
this.newProject = {id:'', name:'', remark:''};
}
});
}
},
// 保存module
moduleSave: function() {
if (!this.moduleRightBox.isCreate) {
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();
}
});
} else {
this.newModule.param = this.paramToJson();
this.$post('module', this.newModule).then(response => {
if (response.code === 200) {
this.esc(3);
this.getModuleData();
this.moduleRightBox.isCreate = false;
}
});
}
},
// 保存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 +1242,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() {
created: function() {
window.addEventListener('click', () => {
this.esc(1);
this.$store.commit('projectRightBoxShow', false);
this.esc(3);
});
this.getModuleData();
this.getProjectData();
this.getAssetData();
@@ -1059,17 +1264,53 @@ export default {
},
projectBoxShow() {
return this.$store.state.projectBoxShow;
}
},
toCreateProject() {
return this.$store.state.createProject;
},
toCreateModule() {
return this.$store.state.createModule;
},
toCreateEndpoint() {
return this.$store.state.createEndpoint;
},
},
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;
},
toCreateProject(n ,o) {
if (n) {
this.$store.commit('toCreateProject', false);
this.projectRightBox.isCreate = true;
this.projectRightBox.title = this.$t('project.project.createProject');
}
},
toCreateModule(n ,o) {
if (n) {
this.$store.commit('toCreateModule', false);
this.moduleRightBox.show = true;
this.moduleRightBox.isCreate = true;
this.moduleRightBox.title = this.$t('project.module.createModule');
this.newModule = {id: '', name: '', projectId: this.project.id, project: this.project, port: '', path: '', param: '', paramObj: []};
this.paramObj = [];
}
},
toCreateEndpoint(n, o) {
if (n) {
this.$store.commit('toCreateEndpoint', false);
this.cleanEndpoint();
this.rightBox.show = true;
this.rightBox.isEdit = true;
this.rightBox.title = this.$t('project.endpoint.createEndpoint');
}
}
}
}

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);
})
})
}

13
nezha-fronted/src/main.js
View File

@@ -15,17 +15,20 @@ import axios from 'axios';
import {post, get, put, del} from './http.js'
import Pagination from "./components/common/pagination"; //引入全局分页组件
Vue.component("Pagination", Pagination);
import searchInput from "./components/common/searchInput"; //搜索框组件
Vue.prototype.$axios = axios
Vue.component("Pagination", Pagination);
Vue.component("searchInput", searchInput);
Vue.prototype.$axios = axios;
Vue.prototype.$post = post;
Vue.prototype.$get = get;
Vue.prototype.$put = put;
Vue.prototype.$delete = del;
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(Vuex)
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(Vuex);
const clickoutside = {

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

@@ -13,7 +13,11 @@ const store = new Vuex.Store({
name: ''
},
projectBoxShow: false,
projectListReload: false
projectListReload: false,
createProject: false,
createModule: false,
createEndpoint: false,
createAlertConfig: false,
},
getters: {
},
@@ -25,9 +29,21 @@ const store = new Vuex.Store({
projectRightBoxShow(state, show) {
state.projectBoxShow = show;
},
projectListReload(state, reload) {
projectListReloadChange(state, reload) {
state.projectListReload = reload;
}
},
toCreateProject(state, status) {
state.createProject = status;
},
toCreateModule(state, status) {
state.createModule = status;
},
toCreateEndpoint(state, status) {
state.createEndpoint = status;
},
toCreateAlertConfig(state, status) {
state.createAlertConfig = status;
},
},
actions: {
}