diff --git a/nezha-fronted/src/components/cli/webSSH.vue b/nezha-fronted/src/components/cli/webSSH.vue index 2b9b17a71..06333daac 100644 --- a/nezha-fronted/src/components/cli/webSSH.vue +++ b/nezha-fronted/src/components/cli/webSSH.vue @@ -365,9 +365,9 @@ export default { authProtocol: 1 }, columns: [ - { title: 'id', data: 'id' }, + { title: 'ID', data: 'id' }, { - title: 'name', + title: 'Name', data: function (row) { if (row.name.length > 15) { return row.name.substring(0, 12) + '...' diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js index 870133746..f8ca01a78 100644 --- a/nezha-fronted/src/components/common/language/cn.js +++ b/nezha-fronted/src/components/common/language/cn.js @@ -77,6 +77,7 @@ const cn = { createEndpoint: '新增 Endpoint', batchEndpoint: '批量修改Endpoint', batchAddEndpoint: '批量新增 Endpoint', + batchAdd: '批量新增', createAsset: '新增资产', createAlertRule: '新增告警规则', createAlertSilence: '新增告警规则', @@ -1301,6 +1302,7 @@ const cn = { createEndpoint: '新增 Endpoint', batchEndpoint: '批量 Endpoint', batchAddEndpoint: '批量新增 Endpoint', + batchAdd: '批量新增', endpointName: 'Endpoint name', name: '名称' }, diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index cdc47cd73..8df279458 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -83,6 +83,7 @@ const en = { createEndpoint: 'New endpoint', batchEndpoint: 'Batch modify endpoint', batchAddEndpoint: 'Batch new endpoint', + batchAdd: 'Batch add', createAsset: 'New asset', createAlertRule: 'New alert rule', createAlertSilence: 'New alert silence', @@ -1301,6 +1302,7 @@ const en = { createEndpoint: 'New endpoint', batchEndpoint: 'Batch endpoint', batchAddEndpoint: 'Batch new endpoint', + batchAdd: 'Batch add', endpointName: 'Endpoint', name: 'Name', tip: { diff --git a/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue b/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue index a4f6f1c33..56e4d0264 100644 --- a/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue +++ b/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue @@ -34,7 +34,7 @@ {{ $t("overall.configEndpoint") }} +
+ @@ -99,15 +109,16 @@
{{$t('overall.option')}}
- - + +
+
{{this.$t('validate.required')}}
@@ -116,10 +127,10 @@ - - @@ -144,6 +155,7 @@ export default { }, data () { return { + showError: false, rules: { projectId: [ { required: true, message: this.$t('validate.required'), trigger: 'change' } @@ -159,8 +171,64 @@ export default { language: localStorage.getItem('nz-language'), ChartSearchShowFields: [ // ChartSearch 下拉搜索表头 { title: 'ID', data: 'id' }, - { title: this.$t('config.model.titleName'), data: 'name' }, - { title: this.$t('overall.remark'), data: 'remark' } + { + title: this.$t('config.model.titleName'), + data: function (row) { + if (row.name.length > 15) { + return row.name.substring(0, 12) + '...' + } + return row.name + } + }, + { + title: this.$t('project.project.projectName'), + data: function (row) { + if (row.project && row.project.name.length > 15) { + return row.project.name.substring(0, 12) + '...' + } + return '' + } + }, + { + title: this.$t('overall.remark'), + data: function (row) { + if (row.remark && row.remark.length > 15) { + return row.remark.substring(0, 12) + '...' + } + return row.remark + } + } + ], + columns: [ + { title: 'id', data: 'id' }, + { + title: 'name', + data: function (row) { + if (row.name.length > 15) { + return row.name.substring(0, 12) + '...' + } + return row.name + } + }, + { title: 'Manage Ip', data: 'manageIp' }, + { + title: 'Type', + data: (row) => { + return row.type ? row.type.name : '' + } + }, + { + title: 'Model', + data: (row) => { + return row.model ? row.model.name : '' + } + }, + { + title: 'Datacenter', + data: (row) => { + return row.dc ? row.dc.name : '' + } + } ], object: {}, vendorAndModelOptionData: [], @@ -176,7 +244,7 @@ export default { tempEndpoint2: {}, assetLoading: true, rightBox: { show: false, title: this.$t('project.endpoint.createEndpoint'), isEdit: false }, - optionType: 'add', + optionType: 'batchAdd', tableData: [], endpointTableTitle: [ // 原始table列 { @@ -213,9 +281,9 @@ export default { }, /* 关闭弹框 */ - esc (refresh) { + esc (refresh, importResult) { this.prevent_opt.save = false - this.$emit('close', refresh) + this.$emit('close', refresh, importResult) }, // 获取endpoint弹框中module下拉框数据 getModuleList () { @@ -245,81 +313,41 @@ export default { if (!this.assetIds || !this.moduleIds) { this.$message.error('Please select module or asset') } - const res = { - code: 200, - msg: 'success', - data: { - list: [{ - name: 'module+asset', - module: { - id: 2, - name: 'aaa' - }, - project: { - id: 5, - name: 'aaa' - }, - asset: { - id: 1, - name: 'aaa' - }, - chartIds: '688355', - configs: [ - { type: 'metrics', config: { protocol: 'HTTP', scrape_interval: 30, scrape_timeout: 10, host: '192.168.40.1', port: 9090, metrics_path: '/metric', params: { module: ['cpu', 'memory'] }, basic_auth: { username: 'zhangsan', password: 'lisi' }, bearer_token: 'yiduanwenzi', labels: { datacenter: 'bj', module: 'mysql' } }, enable: 1 }, - { - type: 'logs', - config: [ - { - type: 'file', - fileName: '/var/logs/mysqld.log', - labels: { datacenter: 'bj', module: 'mysql' }, - pipeline: [ - { type: 'regex', expression: 'ad?!*', source: '' }, - { type: 'json', expressions: [{ abc: 'abc', level: 'config' }], source: '' }, - { type: 'template', template: 'ad?!*', source: '' }, - { type: 'timestamp', format: 'RFC822Z', source: '' }, - { type: 'labels', labels: [{ abc: 'abc', level: 'config' }] }, - { type: 'output', source: 'content' } - ] - }, - { type: 'syslog', listenAddress: '0.0.0.0:9100', appName: 'sapp' }, - { type: 'journal', unit: 'nzagent.service' } - ], - enable: 1 - }] - } - ] - } - } - this.tableData = res.data.list - // this.$post('/monitor/endpoint/render', { moduleIds: this.moduleIds, assetIds: this.assetIds }).then(res => { - // console.log(res) - // this.tableData = res.data.list - // }) + this.$post('/monitor/endpoint/render', { moduleIds: this.moduleIds, assetIds: this.assetIds }).then(res => { + console.log(res) + res.data.list.forEach(item => { + item.configs = JSON.parse(item.configs) + item.moduleId = item.module.id + item.assetId = item.asset.id + }) + this.tableData = res.data.list + }) }, // 保存endpoint save () { if (this.prevent_opt.save) { return } ; this.prevent_opt.save = true + this.showError = false + if (!this.tableData.length) { + this.prevent_opt.save = false + this.showError = true + return + } // 对endpointList进行处理，避免携带过多无用数据 - const endpointList = [] - this.endpointTableData.forEach((item, index) => { - const endpoint = { - moduleId: item.moduleId, - assetId: item.assetId, - name: item.name, - configs: JSON.stringify(item.configs), - id: item.id - } - endpointList.push(endpoint) - }) this.$refs.addEndpoint.validate((valid) => { if (valid) { - this.$put('monitor/endpoint', endpointList).then(response => { + const paramsArr = this.tableData.map(item => { + const obj = JSON.parse(JSON.stringify(item)) + obj.configs = JSON.stringify(obj.configs) + return { + ...obj + } + }) + this.$post('/monitor/endpoint/bulk', paramsArr).then(response => { this.prevent_opt.save = false if (response.code === 200) { - this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') }) - this.esc(true) + // this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') }) + this.esc(true, response.data) } else { this.$message.error(response.msg) } @@ -341,30 +369,25 @@ export default { closeRightBox (isEdit, endpoint, isAll) { this.rightBox.show = false if (!isEdit) { return } - if (isAll) { - Object.keys(this.blankEndpoint).forEach(key => { - this.blankEndpoint[key] = endpoint[key] - }) - } else { - this.endpointTableData.forEach((item, index) => { - if (item.id === endpoint.id) { - this.endpointTableData[index] = { ...endpoint } - } - }) - this.endpointTableData = [...this.endpointTableData] - } + this.tableData.forEach((item, index) => { + if (item.id === endpoint.id) { + this.tableData[index] = { ...endpoint } + } + }) + this.tableData = [...this.tableData] }, - del () { - + del (index) { + this.tableData.splice(index, 1) }, edit (row) { this.object = row + console.log(this.object) // this.object.configs = JSON.parse(this.object.configs) this.object.projectId = this.object.project.id this.object.moduleId = this.object.module.id this.object.assetName = this.object.asset.name - this.object.configs.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : [] - this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : '' + // this.object.configs.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : [] + // this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : '' this.object.paramObj = [] this.object.labelModule = [] this.object.configs[1].config.forEach(item => { @@ -407,10 +430,10 @@ export default { } else { this.object.paramObj.push({ key: '', value: [] }) } - if (!this.object.chartIds) { - this.object.chartIds = '' + if (!this.object.chartIds && this.object.module.chartIds) { + this.object.chartIds = this.object.module.chartIds } else { - // this.object.chartIds = this.object.chartIds.split(',') + this.object.chartIds = '' } this.rightBox.show = true this.rightBox.show = true @@ -421,6 +444,46 @@ export default { this.getAssetList() }, watch: { + tableData: { + deep: true, + handler (n) { + this.showError = false + } + } } } + diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue index b2f227455..fe63966ed 100644 --- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue +++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue @@ -12,6 +12,9 @@ {{ $t("project.module.createEndpoint")}} + + {{ $t("project.module.createEndpoint")}} +
@@ -87,7 +90,7 @@
- + @@ -248,7 +251,7 @@ -
+
@@ -261,7 +264,7 @@ @@ -269,7 +272,7 @@ @@ -277,7 +280,7 @@ @@ -286,7 +289,7 @@ v-if="item.type === 'syslog'" :label=' $t("project.endpoint.basicAppName")' class="half-form-item" - :prop="'configs.1.config.'+ index +'appName'" + :prop="'configs.1.config.'+ index +'.appName'" :rules="[ { required: true, message: $t('validate.required'), trigger: 'blur' }]" > @@ -477,7 +480,7 @@ import pipelineSelect from './pipelineSelect' import selectWalk from '../popBox/selectWalk' import editRigthBox from '../mixin/editRigthBox' import VueTagsInput from '@johmun/vue-tags-input' -import project from "@/components/page/monitor/project/project"; +import project from '@/components/page/monitor/project/project' export default { name: 'editEndpointBoxNew', @@ -520,9 +523,25 @@ export default { ], ChartSearchShowFields: [ // ChartSearch 下拉搜索表头 { title: 'ID', data: 'id' }, - { title: this.$t('config.model.titleName'), data: 'name' }, + { + title: this.$t('config.model.titleName'), + data: function (row) { + if (row.name.length > 15) { + return row.name.substring(0, 12) + '...' + } + return row.name + } + }, { title: this.$t('config.model.titleType'), data: 'type' }, - { title: this.$t('overall.remark'), data: 'remark' } + { + title: this.$t('overall.remark'), + data: function (row) { + if (row.remark && row.remark.length > 15) { + return row.remark.substring(0, 12) + '...' + } + return row.remark + } + } ], showAllBasicOption: false, rules: { @@ -746,13 +765,23 @@ export default { save () { this.prevent_opt.save = true setTimeout(() => { - this.editEndpoint.configs.params = this.paramToJson(this.editEndpoint.paramObj) - this.editEndpoint.configs.labels = this.labelsToJson(this.editEndpoint.labelModule) - this.editEndpoint.paramObj = this.editEndpoint.paramObj.filter(item => item.value && item.value.length) - this.editEndpoint.labelModule = this.editEndpoint.labelModule.filter(item => item.value) - const params = { ...this.editEndpoint } - params.configs.walk = params.walk - params.configs.port = params.port + this.editEndpoint.configs[0].config.params = this.paramToJson(this.editEndpoint.paramObj) + this.editEndpoint.configs[0].config.labels = this.labelsToJson(this.editEndpoint.labelModule) + this.editEndpoint.configs[1].config.forEach(item => { + if (item.labelModule) { + item.labels = this.labelsToJson(item.labelModule) + } else { + item.labels = '' + } + }) + const params = JSON.parse(JSON.stringify(this.editEndpoint)) + params.configs[1].config.forEach(item => { + item.pipeline && item.pipeline.forEach((pipeline) => { + if (pipeline.type === 'labels') { + pipeline.labels = this.labelsToJson(pipeline.labels) + } + }) + }) params.configs = JSON.stringify(params.configs) this.$nextTick(() => { this.$refs.moduleForm.validate((valid, errorKey) => { @@ -774,7 +803,22 @@ export default { } } if (valid) { - if (this.optionType === 'add' || this.optionType === 'batch') { + if (this.optionType === 'add') { + this.$post('monitor/endpoint', params).then(response => { + if (response.code === 200) { + this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') }) + this.$store.commit('setReloadFacade') + this.esc(true) + } else { + this.$message.error(response.msg) + } + this.prevent_opt.save = false + }) + } else if (this.optionType === 'batchAdd') { + this.prevent_opt.save = true + this.$emit('close', true, this.editEndpoint, false) + this.prevent_opt.save = false + } else if (this.optionType === 'batch') { this.prevent_opt.save = true if (this.editEndpoint.assetId) { this.$emit('close', true, this.editEndpoint, false) @@ -785,7 +829,7 @@ export default { } } else if (this.optionType === 'edit') { if (this.editEndpoint.id) { - this.$put('monitor/endpoint', [params]).then(response => { + this.$put('monitor/endpoint', params).then(response => { if (response.code === 200) { this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') }) this.$store.commit('setReloadFacade') @@ -827,10 +871,8 @@ export default { this.activeNameLogs.push('Basic') this.logsCopyValue.push('') this.editEndpoint.configs[1].config.push({ - basic: { - type: 'file', - fileName: '' - }, + type: 'file', + fileName: '', labels: '', labelModule: [{ key: '', value: '' }], pipeline: [] @@ -844,20 +886,20 @@ export default { logsBasicTypeChange (i) { const type = this.editEndpoint.configs[1].config[i].type if (type === 'file') { - this.editModule.configs[1].config[i].fileName = '' - delete this.editModule.configs[1].config[i].unit - delete this.editModule.configs[1].config[i].appName - delete this.editModule.configs[1].config[i].listenAddress + this.editEndpoint.configs[1].config[i].fileName = '' + delete this.editEndpoint.configs[1].config[i].unit + delete this.editEndpoint.configs[1].config[i].appName + delete this.editEndpoint.configs[1].config[i].listenAddress } else if (type === 'journal') { - delete this.editModule.configs[1].config[i].fileName - this.editModule.configs[1].config[i].unit = '' - delete this.editModule.configs[1].config[i].appName - delete this.editModule.configs[1].config[i].listenAddress + delete this.editEndpoint.configs[1].config[i].fileName + this.editEndpoint.configs[1].config[i].unit = '' + delete this.editEndpoint.configs[1].config[i].appName + delete this.editEndpoint.configs[1].config[i].listenAddress } else if (type === 'syslog') { - delete this.editModule.configs[1].config[i].fileName - delete this.editModule.configs[1].config[i].unit - this.editModule.configs[1].config[i].appName = '' - this.editModule.configs[1].config[i].listenAddress = '' + delete this.editEndpoint.configs[1].config[i].fileName + delete this.editEndpoint.configs[1].config[i].unit + this.editEndpoint.configs[1].config[i].appName = '' + this.editEndpoint.configs[1].config[i].listenAddress = '' } }, /* 获取project列表 */ @@ -1105,13 +1147,13 @@ export default { this.$post('/monitor/endpoint/render', { moduleIds: this.editEndpoint.moduleId, assetIds: this.editEndpoint.assetId }).then(res => { console.log(res) if (JSON.stringify(this.editEndpoint.configs) === JSON.stringify(this.blankObject.configs)) { - this.editEndpoint.configs = res.data.list[0].configs + this.editEndpoint.configs = JSON.parse(res.data.list[0].configs) } if (!this.editEndpoint.name) { this.editEndpoint.name = res.data.list[0].name } if (!this.editEndpoint.chartIds) { - this.editEndpoint.chartIds = res.data.list[0].chartIds + this.editEndpoint.chartIds = res.data.list[0].module.chartIds } }) } diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue index 82c7d8c8e..576d5995d 100644 --- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue +++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue @@ -87,7 +87,7 @@
- + @@ -248,7 +248,7 @@
-
+
@@ -506,9 +506,25 @@ export default { ], ChartSearchShowFields: [ // ChartSearch 下拉搜索表头 { title: 'ID', data: 'id' }, - { title: this.$t('config.model.titleName'), data: 'name' }, + { + title: this.$t('config.model.titleName'), + data: function (row) { + if (row.name.length > 15) { + return row.name.substring(0, 12) + '...' + } + return row.name + } + }, { title: this.$t('config.model.titleType'), data: 'type' }, - { title: this.$t('overall.remark'), data: 'remark' } + { + title: this.$t('overall.remark'), + data: function (row) { + if (row.remark && row.remark.length > 15) { + return row.remark.substring(0, 12) + '...' + } + return row.remark + } + } ], language: localStorage.getItem('nz-language'), showAllBasicOption: false, diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue index c2da5f1db..a7839383a 100644 --- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue +++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue @@ -60,11 +60,18 @@ @@ -145,10 +152,6 @@ export default { show: true, minWidth: 200, sortable: 'custom' - }, { - label: this.$t('project.module.type'), - prop: 'type', - show: true }, { label: this.$t('project.project.projectName'), prop: 'project', @@ -197,7 +200,7 @@ export default { methods: { copyValue (str) { const domUrl = document.createElement('input') - domUrl.value = str + domUrl.value = JSON.stringify(str) domUrl.id = 'creatDom' document.body.appendChild(domUrl) domUrl.select() // 选择对象 @@ -253,6 +256,12 @@ export default { padding: 2px 7px; color: #3C92F1; } + .configs-endpoint.metrics{ + color: #3C92F1; + } + .configs-endpoint.logs{ + color: #25BF9A; + } .colorEF7458{ color: #EF7458; } diff --git a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue index 3bb656cc2..8f6a8d6e3 100644 --- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue +++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue @@ -87,6 +87,42 @@ + +
+
+ {{$t('overall.result.total')}}: + {{importResult&&importResult.totalNum?importResult.totalNum:0}} +
+
+ {{$t('overall.result.failed')}}: + {{importResult&&importResult.failNum?importResult.failNum:0}} + {{$t('overall.result.success')}}: + {{importResult&&importResult.successNum?importResult.successNum:0}} +
+
+
{{$t('overall.result.failedDetail')}}:
+
+
+ +
+
+
+
+
+
+ +
+
+