diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue index 7ff0ead9f..eba6bfe75 100644 --- a/nezha-fronted/src/components/common/header.vue +++ b/nezha-fronted/src/components/common/header.vue @@ -109,8 +109,8 @@ - - + + @@ -138,6 +138,19 @@ export default { moduleId: '', assetId: '' }, + alertRule: { + id: '', + alertName: '', + type: '', + linkObject: {id: '', name: ''}, + linkId: '', + expr: '', + last: '', + severity: '', + summary: '', + description: '', + receiver: '', + }, createMenu: [ //新增按钮内容 { label: this.$t('project.project.createProject'), @@ -185,6 +198,8 @@ export default { this.editModule = {id: '', name: '', project: this.$store.state.currentProject, port: '', path: '', param: '', paramObj: []}; } else if (item.type == 3) { this.$refs.addEndpointBox.show(true); + } else if (item.type == 5) { + this.$refs.alertConfigBox.show(true, true); } }, jumpToAsset(data, id) { @@ -193,6 +208,7 @@ export default { this.jumpTo(data); }, jumpToProject(p) { + this.currentProject = p; this.$store.commit('setProject', p); this.jumpTo('project'); }, @@ -211,6 +227,18 @@ export default { this.$get('project', {}).then(response => { if (response.code == 200) { this.projectData = response.data.list; + let flag = false; + //如果currentProject不在新取到的数据里，说明它被删了 + for (let i = 0; i < this.projectData.length; i++) { + if (this.projectData[i].id == this.currentProject.id) { + flag = true; + break; + } + } + if (!flag && this.projectData.length > 0) { + this.currentProject = this.projectData[0]; + this.$store.commit('setProject', this.currentProject); + } } }) }, diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index 6b1774141..774e2e9e9 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -21,14 +21,17 @@ const en = { cover: 'Cover' }, search: { - searchTip: 'Press Enter or click to search' + searchTip: 'Press Enter or click to search', + recentSearch: 'Recent Searches', + noRecentSearch: 'No Recent Searches' }, tip: { confirmDelete: "Confirm Delete?", yes: "Yes", no: "No", deleteSuccess: "Successfully Deleted", - saveSuccess: "Successfully Saved" + saveSuccess: "Successfully Saved", + coverSuccess: 'Successfully Covered' }, asset:{ createAsset: "Create Asset", @@ -73,7 +76,8 @@ const en = { accountId: "Accound ID", createAccount: "Create Account", editAccount: "Edit Account", - notCurrentlySupport: 'Not currently supported' + notCurrentlySupport: 'Not currently supported', + password: 'Password' }, promServer: { promServerList: "Prometheus Server", diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue index ac72348e6..f6c59bc82 100644 --- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue +++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue @@ -1,6 +1,6 @@ @@ -173,7 +174,10 @@ -
{{$t('overall.clear')}}
+
+ {{$t('overall.clear')}} + All: {{this.endpointList.length}} +
@@ -188,7 +192,7 @@ -
+
@@ -211,7 +215,6 @@ export default { name: "endpointBox", props: { - endpoint: Object, currentProject: Object, currentModule: Object }, @@ -221,7 +224,7 @@ tempParamObj: [], tempEndpoint: {}, rightBox: {show: false, title: this.$t('project.endpoint.createEndpoint'),isEdit: false}, - editParamBox: {show: false, top: 0, left: 0, type: 1}, //param编辑弹框 + editParamBox: {show: false, top: 0, left: 0, type: 0}, //param编辑弹框 moduleParamShow: false, //module默认参数param悬浮窗 assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关 assetPageObj: {pageNo: 1, pageSize: 9999}, @@ -282,6 +285,14 @@ this.tempParamObj = JSON.parse(JSON.stringify(obj.paramObj)); } } else { + if (this.endpointList.length > 0) { + for (let i = 0; i < this.endpointList.length; i++) { + this.endpointList[i].isEdit = false; + } + } + if (!this.editParamBox.show) { + return; + } if (this.editParamBox.type == 1) { this.currentModuleCopy.paramObj = this.tempParamObj; this.currentModuleCopy.param = this.paramToJson(this.tempParamObj); @@ -303,17 +314,16 @@ esc() { this.rightBox.show = false; this.editParamBox.show = false; - this.viewParamBox.show = false; }, // 新增param addParam() { - this.currentModuleCopy.paramObj.push({key: '', value: ''}); + this.tempParamObj.push({key: '', value: ''}); }, // 移除单个param removeParam(index) { - this.endpoint.paramObj.splice(index, 1); + this.tempParamObj.splice(index, 1); }, //编辑endpoint @@ -336,29 +346,16 @@ } }, - //将param转为json字符串格式 - paramToJson(param) { - let tempParam = {}; - if (!param) { - param = []; - } - 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; + if (this.moduleList.length == 0) { + this.getModuleList(this.currentProject.id); + } } + }); }, @@ -384,6 +381,27 @@ this.getAssetList(); }, + changeProject(project) { + this.currentModuleCopy = {}; + this.editParamBox.show = false; + this.tempParamObj = []; + }, + + changeModule(module) { + this.editParamBox.show = false; + this.tempParamObj = []; + }, + + //清空勾选的endpoint + clearSelection() { + let selections = this.$refs.endpointTable.selection; + if (selections && selections.length > 0) { + for (let i = 0; i < selections.length; i++) { + this.removeEndpoint(selections[i]) + } + } + }, + // endpoint弹框中的asset子弹框里asset选择事件 selectAsset(obj, index) { this.endpointList.push({ @@ -404,7 +422,7 @@ paramToJson(param) { let tempParam = {}; for (let i = 0; i < param.length; i++) { - eval('tempParam.' + param[i].key + '="' + param[i].value + '"'); + eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"'); } let jsonString = JSON.stringify(tempParam); if (jsonString == '{}') { @@ -436,10 +454,7 @@ //保存endpoint save() { - this.endpoint.moduleId = this.currentModuleCopy.id; - this.endpoint.projectId = this.currentProject.id; - this.endpoint.param = this.paramToJson(this.endpoint.paramObj); - this.$put('endpoint', this.endpoint).then(response => { + this.$post('endpoint', this.endpointList).then(response => { if (response.code === 200) { this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.esc(); @@ -450,8 +465,17 @@ }); }, - //param展示悬浮框 - viewParam(item, flag, event) { + //覆盖endpoint的port/path/param + coverEndpoint() { + if (this.endpointList.length > 0) { + for (let i = 0; i < this.endpointList.length; i++) { + this.endpointList[i].port = this.currentModuleCopy.port; + this.endpointList[i].param = this.currentModuleCopy.param; + this.endpointList[i].paramObj = this.currentModuleCopy.paramObj; + this.endpointList[i].path = this.currentModuleCopy.path; + } + this.$message({duration: 1000, type: 'success', message: this.$t("tip.coverSuccess")}); + } }, //删除endpoint @@ -476,8 +500,12 @@ dropdownSelect(label) { this.assetSearch.label = label; this.assetSearch.dropdownShow = false; - this.currentModuleCopy = JSON.parse(JSON.stringify(this.currentModule)); }, + + clearEndpoints() { + this.getAssetList(); + this.endpointList = []; + } }, created() { this.getProjectList(); diff --git a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue new file mode 100644 index 000000000..55b596dd9 --- /dev/null +++ b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue @@ -0,0 +1,411 @@ + + + + + diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue index 0a7446b1e..294ef73f0 100644 --- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue +++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue @@ -264,7 +264,7 @@ paramToJson(param) { let tempParam = {}; for (let i = 0; i < param.length; i++) { - eval('tempParam.' + param[i].key + '="' + param[i].value + '"'); + eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"'); } let jsonString = JSON.stringify(tempParam); if (jsonString == '{}') { @@ -360,7 +360,9 @@ 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 => { + let requestData = []; + requestData.push(this.endpoint); + this.$put('endpoint', requestData).then(response => { if (response.code === 200) { this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.esc(); diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue index 7e05a2523..3c2d97527 100644 --- a/nezha-fronted/src/components/common/rightBox/projectBox.vue +++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue @@ -119,7 +119,7 @@ } else { this.$message.error(response.msg); } - }) + }); }); } }, diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue index 112f8f48b..49e2fb548 100644 --- a/nezha-fronted/src/components/common/searchInput.vue +++ b/nezha-fronted/src/components/common/searchInput.vue @@ -6,7 +6,7 @@
- {{other.recentSearch}} + {{$t('search.recentSearch')}}
@@ -21,7 +21,7 @@
{{other.clearReSearch}} - {{other.noRecentSearch}} + {{$t('search.noRecentSearch')}}
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue index c8f4df8cf..2f0df9ba9 100644 --- a/nezha-fronted/src/components/page/alert/config.vue +++ b/nezha-fronted/src/components/page/alert/config.vue @@ -88,225 +88,7 @@
- - -
- -
-
-
- -
- {{$t('overall.esc')}} -
-
-
- -
- {{$t('overall.save')}} - {{$t('overall.edit')}} -
-
-
- -
- {{$t('overall.delete')}} -
-
- - - -
{{rightBox.title}}
- - - -
- -
-
{{$t('alert.config.name')}}
-
- -
{{alertRule.alertName}}
-
-
- -
-
{{$t('alert.list.type')}}
-
- - - - -
{{item.value}}
-
-
- -
-
{{$t('alert.config.link')}}
-
- -
{{alertRule.linkObject.name}}
- -
-
- -
-
{{$t('alert.config.expr')}}
-
- -
{{alertRule.expr}}
-
-
- -
-
{{$t('alert.config.for')}}
-
- - - -
{{alertRule.last}}s
-
-
- -
-
{{$t('alert.severity')}}
-
- - - {{item.value}} - - - - - -
{{alertRule.severity}}
-
-
- -
-
{{$t('alert.summary')}}
-
- -
{{alertRule.summary}}
-
-
- -
-
{{$t('alert.description')}}
-
- -
{{alertRule.description}}
-
-
- -
-
{{$t('config.account.receiver')}}
-
- - - {{item.name}} - - - - {{item.errorMessage}} - - - - - - - -
- -
-
{{alertRule.receiver}}
-
-
-
- - - -
-
{{$t('overall.cancel')}}
{{alertRule.id == '' ? $t('overall.create') : $t('overall.save')}}
-
- - -
- +
@@ -346,11 +128,7 @@ export default { searchLabel: { //搜索参数 }, - rightBox: { //弹出框相关 - show: false, - isEdit: false, //false查看，true编辑 - title: '' - }, + alertRule: { id: '', alertName: '', @@ -441,40 +219,13 @@ export default { show: true, } ], - receiverData: [{ - id: '1', - name: 'group1', - description: '小组1desc' - }, { - id: '2', - name: 'group2', - description: '小组2desc' - }, { - id: '3', - name: '小组3', - description: '小组3desc' - }, { - id: '4', - name: '小组4', - description: '小组4desc' - }, { - id: '5', - name: '小组啊小组5', - description: '小组5desc' - }, { - id: '6', - name: '小组6', - description: '小组6desc' - }], tableData: [] } }, methods: { 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.show = true; + this.$refs.alertConfigBox.show(true, true); }, del: function(u) { this.$confirm(this.$t("tip.confirmDelete"), { @@ -494,84 +245,13 @@ export default { }, toAdd: function() { this.cleanAlertRule(); - this.rightBox.isEdit = true; - this.rightBox.title = this.$t("alert.config.createAlertConfig"); - this.rightBox.show = true; + this.$refs.alertConfigBox.show(true, true); }, detail: function(u) { this.alertRule = Object.assign({}, u); - this.rightBox.isEdit = false; - 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.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); - this.getTableData(); - 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.show = false; - } else { - this.$message.error(response.msg); - } - }); - } - }, - saveOrToEdit: function() { - if (!this.rightBox.isEdit) { - this.rightBox.isEdit = true; - this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + this.alertRule.id; - } else { - this.save(); - } - }, - toEditReceiver: function(item) { - if (!item.isEdit) { - //如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑 - this.blurEditReceiver(); - item.isEdit = true; - } else { - //如果已在编辑状态，判断name是否有变更，有变更则发请求 - if (item.name != item.oldName) { - if (this.updateReceiverName(item) == 200) { - item.isEdit = false; - } - } else { - item.errorMessage = ''; - item.isEdit = false; - } - } - }, - blurEditReceiver: function() { - for (var i = 0; i < this.receiverData.length; i++) { - if (this.receiverData[i].isEdit) { - this.receiverData[i].name = this.receiverData[i].oldName; - this.receiverData[i].isEdit = false; - this.receiverData[i].errorMessage = ''; - break; - } - } - }, - toDelReceiver: function(item) { - this.blurEditReceiver(); - //TODO 请求后台，删除组 - }, - initReceiverData: function() { - for (var i = 0; i < this.receiverData.length; i++) { - this.$set(this.receiverData[i], 'oldName', this.receiverData[i].name); - this.$set(this.receiverData[i], 'isEdit', false); - } + this.$refs.alertConfigBox.show(true, false); }, + getTableData: function() { this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo); this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize); @@ -582,9 +262,6 @@ export default { } }) }, - esc: function() { - this.rightBox.show = false; - }, updateReceiverName: function(item) { //TODO 请求接口改名 var code = 200; @@ -609,8 +286,6 @@ export default { } }, jumpTo(data,id) { - this.$store.state.assetData.moduleData = data; - this.$store.state.assetData.selectedData = id; this.$router.push({ path: "/" + data, query: { @@ -638,18 +313,6 @@ export default { }, mounted() { this.getTableData(); - this.initReceiverData(); - }, - computed: { - sProject() { - return this.$store.state.createAlertConfig; - } - }, - watch: { - sProject(n, o) { - this.$store.commit('toCreateAlertConfig', false); - this.toAdd(); - } } } diff --git a/nezha-fronted/src/components/page/asset/assetAddUnit.vue b/nezha-fronted/src/components/page/asset/assetAddUnit.vue index 95bdcca22..3d17dfbb8 100644 --- a/nezha-fronted/src/components/page/asset/assetAddUnit.vue +++ b/nezha-fronted/src/components/page/asset/assetAddUnit.vue @@ -74,7 +74,7 @@
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue index a3a6f05db..7d9b3aa40 100644 --- a/nezha-fronted/src/components/page/config/account.vue +++ b/nezha-fronted/src/components/page/config/account.vue @@ -148,6 +148,19 @@
{{user.username}}
+
+
{{$t('config.account.password')}}
+
+ +
+
E-mail
diff --git a/nezha-fronted/src/components/page/project/project2.vue b/nezha-fronted/src/components/page/project/project2.vue index 6df2a8be7..6dca0380c 100644 --- a/nezha-fronted/src/components/page/project/project2.vue +++ b/nezha-fronted/src/components/page/project/project2.vue @@ -82,6 +82,8 @@ {{p.key}}={{p.value}}， + {{dateFormat(scope.row.lastUpdate)}} + {{scope.row.state == 1 ? 'up' : ''}}{{scope.row.state == 0 ? 'down' : ''}} {{scope.row[item.prop]}} @@ -99,7 +101,7 @@ - +
@@ -132,6 +134,14 @@ export default { label: this.$t("project.endpoint.path"), prop: 'path', show: true, + },{ + label: this.$t("alert.list.state"), + prop: 'state', + show: true, + },{ + label: this.$t("project.endpoint.lastUpdate"), + prop: 'lastUpdate', + show: true, },{ label: this.$t("project.endpoint.asset"), prop: 'asset', @@ -235,7 +245,7 @@ export default { this.metricSearchLabel.moduleId = this.currentModule.id; this.$set(this.metricSearchLabel, 'pageNo', this.metricPageObj.pageNo); this.$set(this.metricSearchLabel, 'pageSize', this.metricPageObj.pageSize); - this.$get('metric', this.metricPageObj).then(response => { + this.$get('metric', this.metricSearchLabel).then(response => { if (response.code === 200) { this.metricsTableData = response.data.list; this.metricPageObj.total = response.data.total; @@ -319,6 +329,7 @@ export default { toCreateEndpoint() { this.$refs.addEndpointBox.show(true); + this.$refs.addEndpointBox.clearEndpoints(); }, //查看endpoint详情 @@ -333,7 +344,6 @@ export default { //弹出module编辑页 toEditModule(module) { - console.info(module) this.currentModule = JSON.parse(JSON.stringify(module)); if (!this.currentModule.paramObj) { this.$set(this.currentModule, 'paramObj', []); @@ -399,7 +409,23 @@ export default { //this.$refs.addEndpointBox.show(false); } else if (type == 4) { } + }, + + dateFormat(time) { + if (!time) { + return; + } + let date = new Date(time*1000); + let year = date.getFullYear(); + let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; + let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); + let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); + let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); + let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); + + return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; } + }, created() { this.currentProject = this.$store.state.currentProject; diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js index 2c29230c9..f12bbf654 100644 --- a/nezha-fronted/src/main.js +++ b/nezha-fronted/src/main.js @@ -22,6 +22,7 @@ import editEndpointBox from './components/common/rightBox/editEndpointBox'; //en import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endpoint弹框组件 import assetAddUnit from "./components/page/asset/assetAddUnit"; //资产添加组件 import assetEditUnit from "./components/page/asset/assetEditUnit"; //资产添加组件 +import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件 Vue.component("Pagination", Pagination); Vue.component("searchInput", searchInput); @@ -31,6 +32,7 @@ Vue.component("edit-endpoint-box", editEndpointBox); Vue.component("add-endpoint-box", addEndpointBox); Vue.component("assetAddUnit", assetAddUnit); Vue.component("assetEditUnit", assetEditUnit); +Vue.component("alert-config-box", alertConfigBox); Vue.prototype.$axios = axios; Vue.prototype.$post = post;