diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss b/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss index 4b16dcc63..562e367fc 100644 --- a/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss +++ b/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss @@ -73,6 +73,8 @@ font-size: 16px; color: $--color-text-primary; font-weight: 600; + display: flex; + justify-content: space-between; #time-line-scope{ //float: right; } @@ -93,7 +95,7 @@ top: -14px; } } - .el-timeline-item:last-child .el-timeline-item__tail{ + .el-timeline-item.last .el-timeline-item__tail{ display: block; top: -100%; } @@ -112,12 +114,20 @@ margin: 0; padding: 10px 0; } + .el-timeline-item__node { + z-index: 1; + } .time-line-item-header{ font-size: 14px; color: #333333; font-weight: 400; } } + .load-more-box{ + display: flex; + justify-content: center; + align-items: center; + } } .table-no-data { width: 100%; diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue index 47cb26f3f..f6c127944 100644 --- a/nezha-fronted/src/components/common/alert/alertLabel.vue +++ b/nezha-fronted/src/components/common/alert/alertLabel.vue @@ -318,7 +318,8 @@ export default { return { alertLabelData: null, loading: true, - heightList: 0 + heightList: 0, + boxWidth: 0 } }, watch: { @@ -347,29 +348,45 @@ export default { calcPosition () { return function (position) { const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight - const leftOffSetView = this.detailList ? -80 : 10 - const leftOffSet = this.detailList ? -80 : 10 - const topOffSet = this.detailList ? 60 : 22 - if (position.top > clientHeight / 2) { - return { - left: `${position.left + position.width + leftOffSet}px`, - top: `${position.top - this.heightList + topOffSet}px` + const clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth + let leftOffSetView = 0 + let leftOffSet = this.detailList ? -80 : 10 + let topOffSet = this.detailList ? 60 : 22 + let topOffSetView = 0 + let labelPosition = { + top: 0, + left: 0, + right: 0 + } + if (this.alertTableDialog) { + let dialog = document.querySelector('#dialog-alert-massage .el-dialog') + if (!dialog) { + dialog = document.querySelector('#viewGraphDialog .el-dialog') } - } else if (this.alertTableDialog) { - const dialog = document.querySelector('#dialog-alert-massage .el-dialog') const dialogHeight = dialog.getBoundingClientRect() - if (dialogHeight) { - return { - left: `${position.left + position.width + 10 - dialogHeight.x}px`, - top: `${position.top - dialogHeight.y}px` - } + console.log(dialogHeight, 'dialogHeight') + leftOffSet = leftOffSet - dialogHeight.x + leftOffSetView = dialogHeight.x + topOffSet = topOffSet - dialogHeight.y + topOffSetView = topOffSet + } + if (position.top > clientHeight / 2) { + labelPosition = { + left: `${position.left + position.width + leftOffSet}px`, + top: `${position.top - this.heightList - topOffSetView}px` } } else { - return { - left: `${position.left + position.width + leftOffSetView}px`, - top: `${position.top}px` + labelPosition = { + left: `${position.left + position.width + leftOffSet}px`, + top: `${position.top + topOffSet}px` } } + if (position.left > clientWidth / 2) { + delete labelPosition.left + + labelPosition.right = (clientWidth - position.left - leftOffSetView) + 'px' + } + return labelPosition } }, calcHeight () { @@ -486,8 +503,10 @@ export default { mounted () { if (this.$refs.alertLabels) { this.heightList = this.$refs.alertLabels.getBoundingClientRect().height + this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width } else { - this.heightList = '' + this.heightList = 0 + this.boxWidth = 0 } }, beforeDestroy () { diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfo.vue b/nezha-fronted/src/components/common/alert/alertMessageInfo.vue index ccac3a110..d10b401b0 100644 --- a/nezha-fronted/src/components/common/alert/alertMessageInfo.vue +++ b/nezha-fronted/src/components/common/alert/alertMessageInfo.vue @@ -25,6 +25,7 @@
- {{$t('alert.relatedAlerts')}} + {{$t('alert.relatedAlerts')}}
- +
@@ -54,8 +56,10 @@
- - +
{{$t('overall.noMoreData')}}}
+
+ {{$t('overall.loadMore')}}} +
{ this.loading = false if (res.code === 200) { this.total = res.data.total - if (pageNo == 1) { + if (this.pageNo == 1) { this.timeLineData = res.data.list } else { this.timeLineData.push(...res.data.list) } - this.disposeTime(pageNo) + this.disposeTime(this.pageNo) this.noData = false this.pageNo++ } else { @@ -186,6 +193,7 @@ export default { let i = (pageNo - 1) * this.pageSize for (i; i < this.timeLineData.length; i++) { const lastDataTime = this.timestampStr(this.timeLineData[i].startAt, this.dateFormatStr) + this.timeLineData[i].color = '#fa8' if (this.lastDataTime !== lastDataTime) { this.lastDataTime = lastDataTime this.timeLineData[i].startAt = lastDataTime @@ -196,7 +204,8 @@ export default { }, changeScope (value) { console.log(value) - this.getTimeLineData(1) + this.pageNo = 1 + this.getTimeLineData() } } } diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue index 670acf647..3ac2d1ebb 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue @@ -90,7 +90,7 @@ fullscreen :modal-append-to-body="false" > - + > { this.currentMsg = { ...row, alertRule: { ...res.data } } this.$nextTick(() => { @@ -635,8 +634,9 @@ export default { }, queryDate () { this.chartLoading = true - if (this.currentMsg.alertRule.type === 1) { - const chartInfo = lodash.cloneDeep(lineData) + let chartInfo = {} + if (this.currentMsg.alertRule.type === 1 || this.currentMsg.alertRule.type === 3) { + chartInfo = lodash.cloneDeep(lineData) chartInfo.elements = [{}] if (!isNaN(this.currentMsg.alertRule.threshold)) { chartInfo.param.enable.thresholds = true @@ -645,12 +645,8 @@ export default { color: '#d64f40' }] } - chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '') - chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels))) - chartInfo.unit = this.currentMsg.alertRule.unit - this.showFullscreen(true, chartInfo) } else if (this.currentMsg.alertRule.type === 2) { - const chartInfo = lodash.cloneDeep(logData) + chartInfo = lodash.cloneDeep(logData) chartInfo.elements = [{}] if (!isNaN(this.currentMsg.alertRule.threshold)) { chartInfo.param.enable.thresholds = true @@ -659,11 +655,14 @@ export default { color: '#d64f40' }] } - chartInfo.elements[0].expression = encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')) - chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels))) - chartInfo.unit = this.currentMsg.alertRule.unit - this.showFullscreen(true, chartInfo) } + chartInfo.id = this.currentMsg.id + chartInfo.name = this.currentMsg.alertRule.name + chartInfo.isAlertMessage = true + chartInfo.elements && (chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')) + chartInfo.elements && (chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))) + chartInfo.unit = this.currentMsg.alertRule.unit + this.showFullscreen(true, chartInfo) }, exportLog ({ limit, descending }) { const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h') diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue index b3583bae2..ab4f343e2 100644 --- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue +++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue @@ -101,7 +101,7 @@ fixed="right">
{{$t('overall.option')}}
- +
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue index 6cb3f9794..4e8cd18fc 100644 --- a/nezha-fronted/src/components/page/alert/alertMessage.vue +++ b/nezha-fronted/src/components/page/alert/alertMessage.vue @@ -604,7 +604,7 @@ export default { queryDate () { this.chartLoading = true let chartInfo = {} - if (this.currentMsg.alertRule.type === 1) { + if (this.currentMsg.alertRule.type === 1 || this.currentMsg.alertRule.type === 3) { chartInfo = lodash.cloneDeep(lineData) chartInfo.elements = [{}] if (!isNaN(this.currentMsg.alertRule.threshold)) { diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js index e1c7a43b5..b0861dcdb 100644 --- a/nezha-fronted/src/main.js +++ b/nezha-fronted/src/main.js @@ -98,24 +98,24 @@ Vue.mixin({ } }, methods: { - utcTimeToTimezone: function (time) { + utcTimeToTimezone: function (time) { // 将utc时间 转为系统设者的时间 返回时间戳 if (time) { return bus.UTCTimeToConfigTimezone(time) } }, - utcTimeToTimezoneStr: function (time) { + utcTimeToTimezoneStr: function (time) { // 将utc时间 转为系统设者的时间 返回String if (time) { return bus.timeFormate(bus.UTCTimeToConfigTimezone(time), localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss') } else { return '-' } }, - timezoneToUtcTime: function (time) { + timezoneToUtcTime: function (time) { // 将系统设者的时间 转为utc时间 返回时间戳 if (time) { return bus.configTimezoneToUTCTime(time) } }, - timezoneToUtcTimeStr: function (time, fmt) { + timezoneToUtcTimeStr: function (time, fmt) { // 将系统设者的时间 转为utc时间 返回String if (!fmt) { fmt = localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss' } @@ -123,7 +123,7 @@ Vue.mixin({ return bus.timeFormate(this.timezoneToUtcTime(time), fmt) } }, - timestampStr: function (time, fmt) { + timestampStr: function (time, fmt) { // 将utc时间 转为系统设者的时间 返回String const date = new Date(time) const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果 const dateStr = new Date(time).getTime() + localOffset