diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue index 40d872c7c..c2f308d8b 100644 --- a/nezha-fronted/src/components/chart/chartList.vue +++ b/nezha-fronted/src/components/chart/chartList.vue @@ -50,6 +50,7 @@ :time-range="timeRange" @groupShow="groupShow" :isExportHtml="isExportHtml" + :dataJson="dataJson" :chart-detail-info="chartDetailInfo" @refreshPanel="refreshPanel" @showFullscreen="showFullscreen" @@ -80,6 +81,7 @@ :filter="filter" :is-fullscreen="true" @groupShow="groupShow" + :dataJson="dataJson" :panelLock="panelLock" :time-range="timeRange" @showFullscreen="showFullscreen" @@ -111,6 +113,12 @@ export default { isExportHtml: { type: Boolean, default: false + }, + dataJson: { + type: Object, + default: () => { + return {} + } } }, components: { @@ -428,7 +436,7 @@ export default { window.addEventListener('resize', this.resize) } if (this.isExportHtml) { - setTimeout(()=>{ + setTimeout(() => { this.onScroll(999999) }, 500) } diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index a2e3b94d2..354a7a825 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -93,6 +93,9 @@ export default { isExportHtml: { type: Boolean, default: false + }, + dataJson: { + type: Object } }, data () { @@ -163,38 +166,16 @@ export default { startTime = this.$stringTimeParseToUnix(startTime) endTime = this.$stringTimeParseToUnix(endTime) const elements = this.chartInfo.elements || [] + if (this.isExportHtml) { + this.chartInfo.loaded && this.queryData(elements, startTime, endTime, step, params) + return + } this.chartInfo.loaded && this.query(elements, startTime, endTime, step, params) }, query (elements, startTime, endTime, step, params) { this.isError = false this.allDataLength = 0 - this.chartData = this.chartInfo.chartData - if (this.isExportHtml) { - switch (this.chartInfo.datasource) { - case 'metrics': - case 'logs' : { - this.chartData.forEach(item => { - item.forEach(children => { - children.elements = elements[0] - }) - }) - this.loading = false - } - break - case 'system': { - this.chartInfo.elements = this.chartInfo.param.datasource - } - break - case 'misc': { - if (this.chartInfo.type === 'diagram' || this.chartInfo.type === 'topology'|| this.chartInfo.type === 'map') { - this.chartData === [] - } - } - break - } - this.loading = false - return - } + // this.chartData = this.chartInfo.chartData try { switch (this.chartInfo.datasource) { case 'metrics': @@ -438,6 +419,95 @@ export default { this.loading = false } }, + queryData (elements, startTime, endTime, step, params) { + this.isError = false + this.allDataLength = 0 + // this.chartData = this.chartInfo.chartData + try { + switch (this.chartInfo.datasource) { + case 'metrics': + case 'logs': { + this.chartData = [] + elements.forEach((element,index) => { + this.chartData.push(this.dataJson[this.chartInfo.id + '_' + index].data.result) + }) + break + } + case 'system': { + this.chartData = [] + this.chartData.push(this.dataJson[this.chartInfo.id + '_' + 0]) + } + case 'misc': { + this.loading = false + setTimeout(() => { + this.loading = false + }) + if (this.chartInfo.type === 'hexagon') { + this.getHexagonFigureData().then(res => { + this.chartData = JSON.parse(JSON.stringify(res)) + }).finally(() => { + this.loading = false + }) + } + if (this.chartInfo.type === 'diagram') { + this.chartData = [this.chartInfo.param.topo] + if (!this.chartInfo.param.topo || !this.chartInfo.param.topo.pens.length) { + this.chartData = [] + } else { + this.chartData = [this.chartInfo.param.topo] + } + } + if (this.chartInfo.type === 'group') { + this.chartData = lodash.get(this, 'chartInfo.children', []) + this.loading = false + this.groupInit() + } + if (this.chartInfo.type === 'topology') { + this.chartData = ['topology'] + } + if (this.chartInfo.type === 'map') { + this.chartData = ['map'] + } + break + } + case 'topology': { + this.loading = true + const params = { + type: this.chartInfo.linkType, + id: this.chartInfo.id + } + this.$get('/stat/rel', params).then(res => { + this.loading = false + const parentId = this.chartInfo.linkType + '-' + this.chartInfo.id + res.data.nodes.forEach(item => { + item.parentId = [parentId] + item.highlight = true + item.x = 0 + item.y = 0 + if (item.id === parentId) { + item.hasChildren = true + item.parentId = [] + item.fx = 0 + item.fy = 0 + } else { + item.hasChildren = false + } + item.radius = this.getRadius(item) // 需要计算 分三级 + item.color = this.getColor(item) // 需要计算 分三级 + }) + res.data.links.forEach(item => { + item.id = item.source + '-' + item.target + }) + this.chartData = JSON.parse(JSON.stringify([res.data])) + }) + break + } + } + this.loading = false + } catch (e) { + this.loading = false + } + }, getHexagonFigureData () { return new Promise(resolve => { this.$get('stat/alertMessage/topN', { size: 48, dimension: 'module' }).then(response => { diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue index 661b2ac47..cbe750e25 100644 --- a/nezha-fronted/src/components/page/alert/alertMessage.vue +++ b/nezha-fronted/src/components/page/alert/alertMessage.vue @@ -270,7 +270,7 @@ export default { label: 'summary', disabled: false }, { - name: this.$t('overall.labels'), + name: this.$t('alert.list.labels'), type: 'input', label: 'labels', disabled: false diff --git a/nezha-fronted/src/entrance/exportHtml/App.vue b/nezha-fronted/src/entrance/exportHtml/App.vue index 619b84f6c..2f50d5167 100644 --- a/nezha-fronted/src/entrance/exportHtml/App.vue +++ b/nezha-fronted/src/entrance/exportHtml/App.vue @@ -3,13 +3,21 @@
+
+ {{dataJson.panel.name}} + + + {{timeFormate(dataJson.start)}} - {{timeFormate(dataJson.start)}} + +

123123132123123123123123

' }, pid: null, buildIn: 0, remark: '', seq: null, x: 0, y: 156, elements: null, sync: null, panel: { id: 527, name: 'test-zy', createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, x: null, y: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null, datasource: null }, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null, datasource: 'misc', hide: false, loaded: false }, { id: 11029, name: '123', panelId: 527, groupId: 0, span: 4, height: 4, updateBy: 1, updateAt: '2022-05-06 02:24:45', type: 'clock', unit: 2, weight: 13, param: { timeType: 'local' }, pid: null, buildIn: 0, remark: '', seq: null, x: 4, y: 168, elements: null, sync: null, panel: { id: 527, name: 'test-zy', createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, x: null, y: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null, datasource: null }, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null, datasource: 'misc', hide: false, loaded: false }] +const dataJson = window.dataJson || { + panel: { id: 1487, name: 'Overview', createBy: 1, type: 'dashboard', link: 0, pid: 0, weight: 0, buildIn: 1, seq: 'v3.2-buildin', children: [], parent: null, chartNum: 18 }, + language: 'en', + start: 1651833659000, + end: 1651833659000, + charts: { msg: 'success', code: 200, data: { total: 1, pageSize: -1, pages: 1, pageNo: 1, list: [{ id: 10341, name: 'Last Slave', panelId: 675, groupId: 0, span: 4.0, height: 4.0, updateBy: 106, updateAt: '2022-04-26 01:53:21', type: 'line', unit: 30, weight: 0, param: { stack: 0, thresholds: [{ color: '#06a041' }], thresholdShow: true, legend: { values: [], show: true, placement: 'bottom' }, enable: { thresholds: false, legend: true, valueMapping: false }, link: '', valueMapping: [], nullType: 'null' }, pid: null, buildIn: 0, remark: '', seq: null, x: 0.0, y: 12.0, elements: [{ id: 16051, chartId: 10341, expression: 'redis_rdb_last_save_timestamp_seconds', type: 'expert', legend: '', buildIn: 0, seq: null, name: 'A', state: 1 }], sync: null, panel: { id: 675, name: 'NZ Mariadb', createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, x: null, y: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null, datasource: null }, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null, datasource: 'metrics' }] }, time: '2022-05-05 07:26:03' }, + chartsData: { + '10341_0': { data: { result: [{ metric: { endpoint: '7400-192.168.40.165-MCN0-MAAT', module_id: '293', nz_agent_id: '75', __name__: 'redis_rdb_last_save_timestamp_seconds', project_id: '25', module: 'MCN0-MAAT', endpoint_id: '253', project: '7400', datacenter: 'xin_xi_gang_DC', asset_id: '29', asset: '7400-192.168.40.165', datacenter_id: '4' }, values: [[1651735328, '1651735257'], [1651735343, '1651735257'], [1651735358, '1651735257'], [1651735373, '1651735257'], [1651735388, '1651735257'], [1651735403, '1651735257'], [1651735418, '1651735257'], [1651735433, '1651735257'], [1651735448, '1651735257'], [1651735463, '1651735257'], [1651735478, '1651735257'], [1651735493, '1651735257'], [1651735508, '1651735257'], [1651735523, '1651735257'], [1651735538, '1651735257'], [1651735553, '1651735257'], [1651735568, '1651735257'], [1651735583, '1651735257'], [1651735598, '1651735257'], [1651735613, '1651735257'], [1651735628, '1651735257']] }, { metric: { endpoint: 'CM-Sync-Redis-Bifang-CM-Server', module_id: '173', nz_agent_id: '73', __name__: 'redis_rdb_last_save_timestamp_seconds', project_id: '19', module: 'CM-Sync-Redis', endpoint_id: '433', project: 'Bifang-CM', datacenter: 'xin_xi_gang_DC', asset_id: '127', asset: 'Bifang-CM-Server', datacenter_id: '4' }, values: [[1651735328, '1651735396'], [1651735343, '1651735396'], [1651735358, '1651735396'], [1651735373, '1651735396'], [1651735388, '1651735396'], [1651735403, '1651735396'], [1651735418, '1651735396'], [1651735433, '1651735396'], [1651735448, '1651735396'], [1651735463, '1651735396'], [1651735478, '1651735396'], [1651735493, '1651735396'], [1651735508, '1651735396'], [1651735523, '1651735396'], [1651735538, '1651735396'], [1651735553, '1651735396'], [1651735568, '1651735396'], [1651735583, '1651735396'], [1651735598, '1651735396'], [1651735613, '1651735396'], [1651735628, '1651735396']] }, { metric: { endpoint: 'CM-Sync-Redis-Bifang-CM-Server1', module_id: '173', nz_agent_id: '75', __name__: 'redis_rdb_last_save_timestamp_seconds', project_id: '19', module: 'CM-Sync-Redis', endpoint_id: '435', project: 'Bifang-CM', datacenter: 'xin_xi_gang_DC', asset_id: '129', asset: 'Bifang-CM-Server1', datacenter_id: '4' }, values: [[1651735328, '1651735396'], [1651735343, '1651735396'], [1651735358, '1651735396'], [1651735373, '1651735396'], [1651735388, '1651735396'], [1651735403, '1651735396'], [1651735418, '1651735396'], [1651735433, '1651735396'], [1651735448, '1651735396'], [1651735463, '1651735396'], [1651735478, '1651735396'], [1651735493, '1651735396'], [1651735508, '1651735396'], [1651735523, '1651735396'], [1651735538, '1651735396'], [1651735553, '1651735396'], [1651735568, '1651735396'], [1651735583, '1651735396'], [1651735598, '1651735396'], [1651735613, '1651735396'], [1651735628, '1651735396']] }, { metric: { endpoint: 'CM-Redis-192.168.44.18', module_id: '173', nz_agent_id: '75', __name__: 'redis_rdb_last_save_timestamp_seconds', project_id: '19', module: 'CM-Sync-Redis', endpoint_id: '57', project: 'Bifang-CM', datacenter: 'xin_xi_gang_DC', asset_id: '11', asset: 'Bifang-CM-Server2', datacenter_id: '4' }, values: [[1651735328, '1651735371'], [1651735343, '1651735371'], [1651735358, '1651735371'], [1651735373, '1651735371'], [1651735388, '1651735371'], [1651735403, '1651735371'], [1651735418, '1651735371'], [1651735433, '1651735371'], [1651735448, '1651735371'], [1651735463, '1651735371'], [1651735478, '1651735371'], [1651735493, '1651735371'], [1651735508, '1651735371'], [1651735523, '1651735371'], [1651735538, '1651735371'], [1651735553, '1651735371'], [1651735568, '1651735371'], [1651735583, '1651735371'], [1651735598, '1651735371'], [1651735613, '1651735371'], [1651735628, '1651735371']] }], resultType: 'matrix' }, status: 'success' }, + '1_1': { data: { result: [], resultType: 'matrix' }, status: 'success' }, + '[id]_[index]': {} + } +} export default { name: 'Entrance', data () {