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

feat: 新功能、bug修复

Browse Source 
新功能：
1.顶部菜单的Create按钮：Project、Module；
2.Project页：除Endpoint新增、Metrics列表外的功能；
BUG修复：
1.Config、Project、Alert各个后台交互操作都加上了成功、失败提示；
2.Config-Account：列表、弹框增加了删除功能
3.Config-PromServer：弹框中DC下拉框删除功能可以用了
4.Project：Endpoint列表--编辑--Host子弹框，优化了一下asset列表交互
This commit is contained in:
chenjinsong
2019-12-19 17:22:18 +08:00
parent 53639fb3e2
commit c5fda756c6
11 changed files with 723 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -222,6 +222,7 @@ html {
text-align: center;
}
.right-box-top-btn {
text-align: center;
border-radius: 0 0 9px 9px;
float: right;
color: #656565;

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

@@ -29,11 +29,11 @@
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<div @click="jumpToProject('project', projectData[0])">{{$t('overall.project')}}</div>
<div @click="jumpToProject(projectData[0])">{{$t('overall.project')}}</div>
</template>
<template v-for="(item, index) in projectData">
<el-menu-item :index="'2-' + index.toString()">
<div @click="jumpToProject('project', item)">
<div @click="jumpToProject(item)">
<span>{{item.name}}</span>
<div @click.stop="toEditProject(item)" class="menu-edit"><i class="el-icon-edit-outline"></i></div>
</div>
@@ -109,7 +109,7 @@
<project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
<endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="" ref="endpointBox"></endpoint-box>
<edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="" ref="endpointBox"></edit-endpoint-box>
</div>
</template>
@@ -123,7 +123,7 @@ export default {
assetData: [],
projectData: [], //顶部菜单project列表中的数据
editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project，此处固定为空对象
currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project
editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //新增/编辑的module
currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module，此处固定为空对象
editEndpoint: { //新增/编辑的endpoint
@@ -182,42 +182,19 @@ export default {
this.editProject = {id: '', name: '', remark: ''};
} else if (item.type == 2) {
this.$refs.moduleBox.show(true);
this.editModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
this.editModule = {id: '', name: '', project: this.$store.state.currentProject, port: '', path: '', param: '', paramObj: []};
} else if (item.type == 3) {
this.$refs.endpointBox.show(true);
//this.$refs.endpointBox.show(true);
}
/*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;
this.jumpTo(data);
},
jumpToProject(data, p) {
jumpToProject(p) {
this.$store.commit('setProject', p);
this.jumpTo(data);
this.jumpTo('project');
},
changeLocal(lang) {
localStorage.setItem("language", lang);
@@ -230,7 +207,7 @@ export default {
}
})
},
getProjectData() {
getProjectList() {
this.$get('project', {}).then(response => {
if (response.code == 200) {
this.projectData = response.data.list;
@@ -242,12 +219,12 @@ export default {
this.editProject = Object.assign({}, p);
},
projectReload() {
this.getProjectData();
this.getProjectList();
}
},
mounted() {
this.getAssetData();
this.getProjectData();
this.getProjectList();
},
computed: {
projectListReloadWatch() {
@@ -257,8 +234,8 @@ export default {
watch: {
projectListReloadWatch(n, o) {
if (n) {
this.getProjectData();
this.$store.commit('projectListReloadChange', false);
this.getProjectList();
this.$store.commit('projectListChange', false);
}
}
}

381
nezha-fronted/src/components/common/rightBox/endpointBox.vue
View File

@@ -9,14 +9,20 @@
</div>
<span>{{$t('overall.esc')}}</span>
</div>
<div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit">
<div v-if="!rightBox.isEdit" class="right-box-top-btn right-box-top-btn-full" @click="toEdit(true)">
<div class="right-box-btn-icon">
<i class="el-icon-edit-outline"></i>
</div>
<span>{{$t('overall.edit')}}</span>
</div>
<div v-if="rightBox.isEdit" class="right-box-top-btn right-box-top-btn-full" @click="save">
<div class="right-box-btn-icon">
<i class="el-icon-edit-outline"></i>
</div>
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
<span v-else>{{$t('overall.edit')}}</span>
</div>
<div class="right-box-top-btn" v-if="rightBox.isEdit && endpoint.id != ''" @click="del()">
<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>
@@ -35,7 +41,7 @@
<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 @change="((val) => {getToSelectModuleData(val.id)})" value-key="id" popper-class="config-dropdown" v-model="endpoint.project" placeholder="" v-if="rightBox.isEdit" size="small">
<el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentProject" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.project.name}}</div>
@@ -46,7 +52,7 @@
<div class="right-box-form-label">{{$t("project.module.module")}}</div>
<div class="right-box-form-content">
<el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentModule" 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-option v-for="item in moduleList" :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>
</div>
@@ -62,7 +68,7 @@
v-model="endpoint.host"
size="small"
></el-input>
<div @click="showSubBox" class="right-box-row-btn right-box-row-btn-active" v-if="rightBox.isEdit">
<div @click="showSubBox(true)" class="right-box-row-btn right-box-row-btn-active" v-if="rightBox.isEdit">
<span class="el-icon-more"></span>
</div>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>
@@ -102,14 +108,17 @@
<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">
<div class="param-box param-box-endpoint" v-if="rightBox.isEdit">
<div class="param-box-row" v-for="(item, index) in endpoint.paramObj">
<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 :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 v-else class="right-box-form-content-txt">
<div v-for="(item, index) in endpoint.paramObj">{{item.key}}={{item.value}}</div>
</div>
</div>
</div>
</div>
@@ -117,9 +126,76 @@
<!-- 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 @click="save()" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{endpoint.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">{{$t('overall.save')}}</div>
</div>
<!-- end--底部按钮-->
<!-- begin--子弹框-->
<transition name="right-sub-box">
<div class="right-sub-box" @click.stop v-if="subBox.show">
<!-- begin--标题-->
<div class="right-box-title">{{subBox.title}}</div>
<!-- end--标题-->
<div class="right-box-top-btn right-box-top-btn-full" @click="subEsc">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
<!-- begin--搜索框-->
<el-input placeholder="" v-model="assetSearch.text">
<template slot="prepend">
<div class="endpoint-asset-prepend">
<div class="endpoint-asset-label">
<span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
<span @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
<i v-if="assetSearch.dropdownShow" class="el-icon-arrow-up"></i>
<i v-if="!assetSearch.dropdownShow" class="el-icon-arrow-down"></i>
</span>
</div>
<div class="endpoint-asset-dropdown" v-if="assetSearch.dropdownShow">
<div @click="dropdownSelect('IP')" class="endpoint-asset-dropdown-item">IP</div>
<div @click="dropdownSelect('SN')" class="endpoint-asset-dropdown-item">SN</div>
</div>
</div>
</template>
<template slot="append"><i @click="searchAsset" class="el-icon-search"></i></template>
</el-input>
<!-- end--搜索框-->
<!-- begin--table-->
<div class="endpoint-sub-table">
<div class="endpoint-sub-table-head">
<div class="endpoint-sub-table-col">IP</div>
<div class="endpoint-sub-table-col">SN</div>
</div>
<div class="line-100"></div>
<div class="endpoint-sub-table-body">
<div v-if="selectedAsset.id != ''" :data="selectedAsset.id" class="endpoint-sub-table-row endpoint-sub-table-row-selected">
<div class="endpoint-sub-table-col">{{selectedAsset.host}}</div>
<div class="endpoint-sub-table-col">{{selectedAsset.sn}}</div>
</div>
<div v-else class="endpoint-sub-table-row"></div>
<div @click="selectAsset(item)" :data="item.id" v-for="item in assetList" class="endpoint-sub-table-row" :class="{'endpoint-sub-table-row-active': item.id == selectedAsset.id}">
<div class="endpoint-sub-table-col">{{item.host}}</div>
<div class="endpoint-sub-table-col">{{item.sn}}</div>
</div>
</div>
<div class="endpoint-sub-table-paginate">
<div class="endpoint-sub-table-paginate-all">All:&nbsp;{{assetPageObj.total}}</div>
<el-pagination
background
:pager-count="5"
layout="prev, pager, next"
@current-change="(currentPage) => {getAssetList(currentPage)}"
:total="assetPageObj.total">
</el-pagination>
</div>
</div>
<!-- end--table-->
</div>
</transition>
<!-- end--子弹框-->
</div>
</transition>
</template>
@@ -134,34 +210,188 @@
},
data() {
return {
// 清除param
clearAllParam: function() {
this.module.paramObj = [];
},
rightBox: {show: false, title: '',isEdit: false},
subBox: {show: false, title: this.$t("overall.asset")}, //asset子弹框
assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关
assetPageObj: {pageNo: 1, pageSize: 11, total: 0},
selectedAsset: {id: '', host: '', sn: ''}, //endpoint侧滑框中选中的asset
projectList: [],
moduleList: [],
assetList: []
}
},
methods: {
show(show) {
this.rightBox.show = show;
},
// 新增param
addParam: function() {
this.module.paramObj.push({key: '', value: ''});
},
toEdit(show) {
this.rightBox.isEdit = show;
},
// 移除单个param
removeParam: function(index) {
this.module.paramObj.splice(index, 1);
},
//endpoint弹框中asset子弹框控制
showSubBox(show) {
this.subBox.show = show;
},
//将param转为json字符串格式
paramToJson: function(param) {
let tempParam = {};
for (let i = 0; i < param.length; i++) {
eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
/*关闭弹框*/
esc() {
this.rightBox.show = false;
this.subBox.show = false;
},
/*关闭子弹框*/
subEsc() {
this.subBox.show = false;
},
// 清除param
clearAllParam() {
this.endpoint.paramObj = [];
},
// 新增param
addParam() {
this.endpoint.paramObj.push({key: '', value: ''});
},
// 移除单个param
removeParam(index) {
this.endpoint.paramObj.splice(index, 1);
},
//将param转为json字符串格式
paramToJson(param) {
let tempParam = {};
for (let i = 0; i < param.length; i++) {
eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
}
let jsonString = JSON.stringify(tempParam);
if (jsonString == '{}') {
return "";
} else {
return jsonString;
}
},
/*获取project列表*/
getProjectList() {
this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
if (response.code === 200) {
this.projectList = response.data.list;
}
let jsonString = JSON.stringify(tempParam);
if (jsonString == '{}') {
return "";
});
},
// 获取endpoint弹框中的asset子弹框里asset列表数据
getAssetList(currentPage) {
if (currentPage) {
this.assetPageObj.pageNo = currentPage;
} else {
this.assetPageObj.pageNo = 1;
}
this.$get('asset', this.assetPageObj).then(response => {
if (response.code === 200) {
this.assetList = response.data.list;
this.assetPageObj.total = response.data.total;
}
});
},
//endpoint弹框中的asset子弹框搜索
searchAsset() {
if (this.assetSearch.label == 'IP') {
this.assetSearch.host = this.assetSearch.text;
this.assetSearch.sn = '';
} else if (this.assetSearch.label == 'SN') {
this.assetSearch.sn = this.assetSearch.text;
this.assetSearch.host = '';
}
this.assetPageObj = Object.assign({}, this.assetPageObj, this.assetSearch);
this.getAssetList(false);
},
// endpoint弹框中的asset子弹框里asset选择事件
selectAsset(obj) {
this.selectedAsset = obj;
this.endpoint.host = obj.host;
this.endpoint.assetId = obj.id;
},
// 获取endpoint弹框中module下拉框数据
getModuleList(projectId) {
this.$get('module', {projectId: projectId}).then(response => {
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
try {
let tempObj = JSON.parse(response.data.list[i].param);
response.data.list[i].paramObj = [];
for (let k in tempObj) {
response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
}
} catch(err) {
console.info(response.data.list[i], err);
}
}
this.moduleList = response.data.list;
}
});
},
//保存endpoint
save() {
this.endpoint.moduleId = this.currentModule.id;
this.endpoint.projectId = this.currentProject.id;
this.endpoint.param = this.paramToJson(this.endpoint.paramObj);
this.$put('endpoint', this.endpoint).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc();
this.$emit("reload");
} else {
return jsonString;
this.$message.error(response.msg);
}
},
});
},
//删除endpoint
del() {
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: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.$emit('reload');
this.rightBox.show = false;
} else {
this.$message.error(response.msg);
}
});
});
},
// endpoint弹框的asset子弹框顶部搜索条件选中事件
dropdownSelect(label) {
this.assetSearch.label = label;
this.assetSearch.dropdownShow = false;
},
},
created() {
this.getProjectList();
this.getAssetList();
},
mounted() {
this.getModuleList(this.currentProject.id);
},
watch: {
endpoint(n, o) {
if (n && n.id) {
this.rightBox.title = this.$t("project.endpoint.editEndpoint") + " ID：" + n.id;
} else {
this.rightBox.title = this.$t("project.endpoint.createEndpoint");
}
}
}
}
@@ -242,4 +472,95 @@
right: 1px;
}
/* end--param*/
/* begin--子弹框*/
.right-sub-box {
width: 380px;
height: 520px;
position: absolute;
right: 80px;
z-index: 2;
padding: 0 10px;
}
.right-sub-box .el-input-group {
width: 227px;
float: right;
margin: 7px 0 0 0;
}
/* begin--搜索框*/
.endpoint-asset-prepend {
border-radius: 4px 0 0 4px;
}
.endpoint-asset-label {
line-height: 26px;
height: 26px;
}
.endpoint-asset-dropdown {
position: absolute;
top: 27px;
background-color: #656565;
border-radius: 4px;
width: 52px;
left: 0;
}
.endpoint-asset-dropdown-item {
text-align: center;
line-height: 22px;
height: 22px;
cursor: default;
}
.endpoint-asset-label-txt {
display: inline-block;
width: 19px;
text-align: center;
}
.endpoint-asset-dropdown-item:first-of-type {
border-radius: 4px 4px 0 0;
}
.endpoint-asset-dropdown-item:last-of-type {
border-radius: 0 0 4px 4px;
}
.endpoint-asset-dropdown-item:hover {
background-color: #3a8ee6;
}
/* end--搜索框*/
/* begin--table*/
.endpoint-sub-table {
margin-top: 25px;
}
.line-100 {
margin-bottom: 3px;
}
.endpoint-sub-table-head {
line-height: 28px;
height: 30px;
}
.endpoint-sub-table-row {
line-height: 28px;
height: 30px;
color: #656565;
}
.endpoint-sub-table-row-active {
background-color: #dadada;
}
.endpoint-sub-table-row-selected {
background-color: #656565;
color: white;
}
.endpoint-sub-table-col {
display: inline-block;
width: 45%;
padding-left: 10px;
}
.endpoint-sub-table-paginate-all {
position: absolute;
left: 10px;
bottom: 17px;
color: #5a5a5a;
}
.endpoint-sub-table-body {
font-size: 15px;
}
/* end--table*/
/* end--子弹框*/
</style>

192
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -1,109 +1,107 @@
<template>
<transition name="right-box">
<div class="right-box right-box-endpoint" v-if="rightBox.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">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<div class="right-box-top-btn right-box-top-btn-full" @click="save">
<div class="right-box-btn-icon">
<i class="el-icon-edit-outline"></i>
</div>
<span>{{$t('overall.save')}}</span>
<span>{{$t('overall.esc')}}</span>
</div>
<div class="right-box-top-btn right-box-top-btn-full" @click="save">
<div class="right-box-btn-icon">
<i class="el-icon-edit-outline"></i>
</div>
<div class="right-box-top-btn" v-if="module.id != ''" @click="del">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
<span>{{$t('overall.delete')}}</span>
<span>{{$t('overall.save')}}</span>
</div>
<div class="right-box-top-btn" v-if="module.id != ''" @click="del">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
<span>{{$t('overall.delete')}}</span>
</div>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<div class="right-box-form">
<!--project-->
<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="module.project" placeholder="" size="small">
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select>
</div>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<div class="right-box-form">
<!--project-->
<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="module.project" placeholder="" size="small">
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select>
<!--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="module.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="module.remark" size="small"></el-input>
</div>
</div>
<!--tip-->
<div class="right-box-form-row">
<div class="right-box-form-content">
<div class="right-box-form-tip">
{{$t('project.module.tip.defaultEndpointSet')}}
<div class="line-100"></div>
{{$t('project.module.tip.relation')}}
</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="module.name" size="small"></el-input>
</div>
</div>
<!--port-->
<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="module.port" size="small"></el-input>
</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="module.remark" 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="module.path" size="small"></el-input>
</div>
<!--tip-->
<div class="right-box-form-row">
<div class="right-box-form-content">
<div class="right-box-form-tip">
{{$t('project.module.tip.defaultEndpointSet')}}
<div class="line-100"></div>
{{$t('project.module.tip.relation')}}
</div>
</div>
</div>
<!--param-->
<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>
</div>
<!--port-->
<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="module.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="module.path" size="small"></el-input>
</div>
</div>
<!--param-->
<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>
</div>
<div class="right-box-form-content">
<div class="param-box param-box-module">
<div class="param-box-row" v-for="(item, index) in module.paramObj">
<el-input 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>
</div>
<div class="right-box-form-content">
<div class="param-box param-box-module">
<div class="param-box-row" v-for="(item, index) in module.paramObj">
<el-input 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>
</div>
</div>
</div>
</div>
</div>
<!-- begin--底部按钮-->
<div class="right-box-bottom-btns">
<div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{module.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div>
<!-- end--底部按钮-->
</el-scrollbar>
<!-- begin--底部按钮-->
<div class="right-box-bottom-btns">
<div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{module.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div>
<!-- end--底部按钮-->
</div>
</transition>
</template>
@@ -140,7 +138,7 @@
if (this.module.id) {
this.$put('module', this.module).then(response => {
if (response.code === 200) {
this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit("reload");
this.rightBox.show = false;
} else {
@@ -151,7 +149,7 @@
this.module.projectId = this.module.project.id;
this.$post('module', this.module).then(response => {
if (response.code === 200) {
this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit("reload");
this.rightBox.show = false;
} else {
@@ -168,15 +166,15 @@
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("project?ids=" + this.project.id).then(response => {
this.$delete("module?ids=" + this.module.id).then(response => {
if (response.code === 200) {
this.$message({duration: 3000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.rightBox.show = false;
this.$emit("reload");
} else {
this.$message.error(response.msg);
}
})
});
});
},
@@ -186,12 +184,14 @@
if (response.code === 200) {
this.projectList = response.data.list;
if (this.currentProject && this.currentProject.id) {
for (let i = 0; i < this.projectList.length; i++) {
/*for (let i = 0; i < this.projectList.length; i++) {
if (this.projectList[i].id == this.currentProject.id) {
this.currentProject = this.projectList[i];
break;
}
}
}*/
} else {
}
}
});

6
nezha-fronted/src/components/common/rightBox/projectBox.vue
View File

@@ -84,7 +84,7 @@
if (this.project.id) {
this.$put('project', this.project).then(response => {
if (response.code === 200) {
this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit("reload");
this.rightBox.show = false;
} else {
@@ -94,7 +94,7 @@
} else {
this.$post('project', this.project).then(response => {
if (response.code === 200) {
this.$message({duration: 3000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit("reload");
this.rightBox.show = false;
} else {
@@ -113,7 +113,7 @@
}).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.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.rightBox.show = false;
this.$emit("reload");
} else {

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

@@ -81,7 +81,7 @@
<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-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row[item.prop].name}}</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
@@ -508,15 +508,21 @@ export default {
if (this.alertRule.id) {
this.$put('alert/rule', this.alertRule).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getTableData();
this.rightBox.isEdit = false;
this.rightBox.show = false;
} else {
this.$message.error(response.msg);
}
});
} else {
this.$post('alert/rule', this.alertRule).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getTableData();
this.rightBox.isEdit = false;
this.rightBox.show = false;
} else {
this.$message.error(response.msg);
}
});
}

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

@@ -90,7 +90,8 @@
<el-switch
v-model="scope.row.status"
active-value="1"
inactive-value="0">
inactive-value="0"
@change="(val)=>{statusChange(scope.row)}">
</el-switch>
</span>
<span v-else>{{scope.row[item.prop]}}</span>
@@ -117,7 +118,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 && user.userId != ''">
<div class="right-box-top-btn" v-if="rightBox.isEdit && user.userId != ''" @click="del(user)">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
@@ -360,6 +361,22 @@ 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("sys/user/delete?userIds=" + u.userId).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.rightBox.show = false;
this.getTableData();
} else {
this.$message.error(response.msg);
}
});
});
},
detail: function(u) {
this.user = Object.assign({}, u);
@@ -387,11 +404,27 @@ export default {
this.rightBox.show = true;
},
save: function() {
this.$post('sys/user/update', this.user).then(response => {
if (response.code === 200) {
this.rightBox.isEdit = false;
}
});
if (this.user.userId) {
this.$put('sys/user/update', this.user).then(response => {
if (response.code === 200) {
this.rightBox.show = false;
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
} else {
this.$message.error(response.msg);
}
this.getTableData();
});
} else {
this.$post('sys/user/save', this.user).then(response => {
if (response.code === 200) {
this.rightBox.show = false;
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getTableData();
} else {
this.$message.error(response.msg);
}
});
}
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
@@ -401,6 +434,10 @@ export default {
this.save();
}
},
statusChange: function(user) {
this.user = user;
this.save();
},
jumpTo(data,id) {
this.$store.state.assetData.moduleData = data;
this.$store.state.assetData.selectedData = id;

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

@@ -92,7 +92,7 @@
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
<span v-else>{{$t('overall.edit')}}</span>
</div>
<div @click="del" class="right-box-top-btn" v-if="rightBox.isEdit && promServer.id != ''">
<div @click="del(promServer)" class="right-box-top-btn" v-if="rightBox.isEdit && promServer.id != ''">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
@@ -282,9 +282,7 @@ export default {
disabled: false
}],
},
searchLabel: { //搜索参数
},
searchLabel: {}, //搜索参数
}
},
methods: {
@@ -302,8 +300,9 @@ export default {
}).then(() => {
this.$delete("promServer?ids=" + u.id).then(response => {
if (response.code === 200) {
this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();
this.rightBox.show = false;
} else {
this.$message.error(response.msg);
}
@@ -326,17 +325,23 @@ export default {
if (this.promServer.id) {
this.$put('promServer', this.promServer).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getTableData();
this.rightBox.isEdit = false;
this.esc();
} else {
this.$message.error(response.msg);
}
});
} else {
this.$post('promServer', this.promServer).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getTableData();
this.rightBox.isEdit = false;
this.esc();
} else {
this.$message.error(response.msg);
}
});
}
@@ -384,7 +389,21 @@ export default {
},
toDelIdc: function(item) {
this.blurEditIdc();
//TODO 请求后台，删除
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("idc?ids=" + item.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();
this.getIdcData();
} else {
this.$message.error(response.msg);
}
});
});
},
getIdcData: function() {
this.$get('idc', this.pageObj).then(response => {

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

@@ -3,6 +3,15 @@
<div class="content-left">
<div class="sidebar-title">{{currentProject.name}}</div>
<div class="sidebar-info">
<div
v-for="item in moduleList"
class="sidebar-info-item"
:class="{'sidebar-info-item-active': item.id == currentModule.id}"
@click="changeModule(item)"
>
{{item.name}}
<div class="side-bar-menu-edit" @click.stop="toEditModule(item)"><i class="el-icon-edit-outline"></i></div>
</div>
</div>
</div>
@@ -12,11 +21,11 @@
<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">
<el-button disabled @click="" 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.stop="toAdd" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
<el-button disabled @click.stop="toCreateEndpoint" 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>
@@ -35,15 +44,18 @@
:label="item.label"
>
<template slot-scope="scope" :column="item">
<span v-if="item.prop == 'asset'">{{scope.row[item.prop].host}}</span>
<span v-if="item.prop == 'asset' && scope.row[item.prop]">{{scope.row[item.prop].host}}</span>
<span v-else-if="item.prop == 'param'">
<span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span>
</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('overall.option')" width="100">
<template slot-scope="scope" :column="item">
<div class="content-right-options">
<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>
<span @click.stop="endpointDetail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
<span @click.stop="toEditEndpoint(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
</div>
</template>
</el-table-column>
@@ -51,17 +63,17 @@
<Pagination :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="Pagination"></Pagination>
</div>
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
<module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
<edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndPointTableData" ref="editEndpointBox"></edit-endpoint-box>
</div>
</template>
<script>
import projectBox from '../../common/rightBox/projectBox';
export default {
name: "project2",
data() {
return {
endpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: ''},
editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
endpointTableTitle: [
{
label: this.$t("project.endpoint.endpointId"),
@@ -97,26 +109,29 @@ export default {
total:0
},
moduleList: [],
projectList: [],
currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //编辑的module
currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module
searchLabel: {moduleId: ''}, //endpoint搜索参数
}
},
methods: {
getEndPointTableData() {
this.$get('endpoint', this.endpointPageObj).then(response => {
this.searchLabel.moduleId = this.currentModule.id;
this.$set(this.searchLabel, 'pageNo', this.endpointPageObj.pageNo);
this.$set(this.searchLabel, 'pageSize', this.endpointPageObj.pageSize);
this.$get('endpoint', this.searchLabel).then(response => {
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
try {
var tempObj = JSON.parse(response.data.list[i].param);
let tempObj = JSON.parse(response.data.list[i].param);
response.data.list[i].paramObj = [];
for (let k in tempObj) {
response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
}
} catch (err) {
console.info(response.data.list[i]);
console.info(err);
}
response.data.list[i].paramObj = [];
for (let k in tempObj) {
response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
console.info(response.data.list[i], err);
}
}
this.endpointTableData = response.data.list;
@@ -132,9 +147,150 @@ export default {
this.endpointPageObj.pageSize = val;
this.getEndPointTableData();
},
// 获取左侧module列表数据
getModuleList() {
//若currentProject不存在（如页面刷新了），默认取project列表的第一个
if (this.currentProject && this.currentProject.id) {
this.$get('module', {projectId: this.currentProject.id, pageSize: 999, pageNo: 1}).then(response => {
if (response.code === 200) {
this.moduleList = response.data.list;
for (let i = 0; i < this.moduleList.length; i++) {
try {
let tempObj = JSON.parse(this.moduleList[i].param);
this.$set(this.moduleList[i], 'paramObj', []);
for (let k in tempObj) {
this.moduleList[i].paramObj.push({key: k, value: tempObj[k]});
}
} catch (err) {
console.info(response.data.list[i], err);
}
}
if (this.moduleList.length > 0) {
this.currentModule = this.moduleList[0];
} else {
this.currentModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
}
}
});
} else {
if (this.projectList && this.projectList.length > 0) {
this.$store.commit('setProject', this.projectList[0]);
} else {
this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
if (response.code == 200) {
this.projectList = response.data.list;
if (this.projectList.length > 0) {
this.getModuleList();
} else {
return;
}
}
});
}
}
},
//左侧module列表选中切换
changeModule(module) {
this.currentModule = module;
},
//弹出endpoint编辑页
toEditEndpoint(endpoint) {
this.rightBoxHandler(3);
this.$refs.editEndpointBox.toEdit(true);
this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
},
toCreateEndpoint() {
},
//查看endpoint详情
endpointDetail(endpoint) {
this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
this.rightBoxHandler(3);
this.$refs.editEndpointBox.toEdit(false);
},
//弹出module编辑页
toEditModule(module) {
console.info(module)
this.currentModule = JSON.parse(JSON.stringify(module));
if (!this.currentModule.paramObj) {
this.$set(this.currentModule, 'paramObj', []);
}
this.editModule = JSON.parse(JSON.stringify(module));
if (!this.editModule.paramObj) {
this.$set(this.editModule, 'paramObj', []);
}
this.rightBoxHandler(2);
},
//控制弹框状态 type 1:project; 2:module; 3:editEndponit; 4:addEndpoint;
rightBoxHandler(type) {
if (type == 1) {
this.$refs.projectBox.show(true);
if (this.$refs.moduleBox) {
this.$refs.moduleBox.show(false);
}
if (this.$refs.editEndpointBox) {
this.$refs.editEndpointBox.show(false);
}
//this.$refs.addEndpointBox.show(false);
} else if (type == 2) {
this.$refs.moduleBox.show(true);
if (this.$refs.projectBox) {
this.$refs.projectBox.show(false);
}
if (this.$refs.editEndpointBox) {
this.$refs.editEndpointBox.show(false);
}
//this.$refs.addEndpointBox.show(false);
} else if (type == 3) {
this.$refs.editEndpointBox.show(true);
if (this.$refs.projectBox) {
this.$refs.projectBox.show(false);
}
if (this.$refs.moduleBox) {
this.$refs.moduleBox.show(false);
}
//this.$refs.addEndpointBox.show(false);
} else if (type == 4) {
}
}
},
created() {
this.getEndPointTableData();
this.currentProject = this.$store.state.currentProject;
this.getModuleList();
},
mounted() {
setTimeout(()=>{
this.getEndPointTableData();
}, 200);
},
computed: {
currentProjectChange() {
return this.$store.state.currentProject;
}
},
watch: {
currentProjectChange(n, o) {
this.currentProject = Object.assign({}, n);
},
currentProject(n, o) {
this.getModuleList();
},
currentModule(n, o) {
if (n && n.id) {
this.getEndPointTableData();
} else {
this.endpointTableData = [];
}
}
}
}
</script>

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

@@ -18,13 +18,13 @@ import Pagination from "./components/common/pagination"; //引入全局分页组
import searchInput from "./components/common/searchInput"; //搜索框组件
import projectBox from './components/common/rightBox/projectBox'; //project弹框组件
import moduleBox from './components/common/rightBox/moduleBox'; //module弹框组件
import endpointBox from './components/common/rightBox/endpointBox'; //endpoint弹框组件
import editEndpointBox from './components/common/rightBox/endpointBox'; //endpoint弹框组件
Vue.component("Pagination", Pagination);
Vue.component("searchInput", searchInput);
Vue.component("project-box", projectBox);
Vue.component("module-box", moduleBox);
Vue.component("endpoint-box", endpointBox);
Vue.component("edit-endpoint-box", editEndpointBox);
Vue.prototype.$axios = axios;
Vue.prototype.$post = post;

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

@@ -8,11 +8,11 @@ const store = new Vuex.Store({
selectedData:'',
moduleData:'',
},
projectData: {
currentProject: {
id: '',
name: ''
name: '',
remark: ''
},
projectBoxShow: false,
projectListReload: false,
createProject: false,
createModule: false,
@@ -23,13 +23,12 @@ const store = new Vuex.Store({
},
mutations: {
setProject(state, project) {
state.projectData = Object.assign({}, project);
state.projectBoxShow = false;
state.currentProject = Object.assign({}, project);
},
projectRightBoxShow(state, show) {
state.projectBoxShow = show;
},
projectListReloadChange(state, reload) {
projectListChange(state, reload) {
state.projectListReload = reload;
},
toCreateProject(state, status) {