diff --git a/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss b/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss index c107f0310..58c07b674 100644 --- a/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss +++ b/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss @@ -47,6 +47,7 @@ min-width: 200px; } } + .detail-top-search-dropdown{ max-height: 300px; overflow-y: auto; @@ -80,6 +81,7 @@ } .children-title-name{ min-width: 180px; + flex-shrink: 0; height: 36px; padding-right: 20px; @@ -96,6 +98,26 @@ background: $--background-color-base !important; } } +.detail-top-search-dropdown-special.detail-top-search-dropdown { + width: 680px; + max-width: unset !important; + .nz-dropdown-menu__item{ + width: 100% !important; + .children-title-name { + width: 33%; + box-sizing: border-box; + } + .nz-dropdown-menu__item-box { + width: 66%; + display: flex; + flex-wrap: wrap; + .nz-dropdown-menu__item-hover { + width: calc(50% - 2px); + box-sizing: border-box; + } + } + } +} .clear-all-select{ padding: 0 20px; padding-left: 42px; diff --git a/nezha-fronted/src/assets/css/components/common/project/L5/popData/common.scss b/nezha-fronted/src/assets/css/components/common/project/L5/popData/common.scss index 92260b40b..f5e2d6e05 100644 --- a/nezha-fronted/src/assets/css/components/common/project/L5/popData/common.scss +++ b/nezha-fronted/src/assets/css/components/common/project/L5/popData/common.scss @@ -143,6 +143,7 @@ width: 120px; display: inline-block; padding: 3px 0; + vertical-align: middle; } .content-text { width: 175px; @@ -150,6 +151,10 @@ font-size: 12px; display: inline-block; padding: 3px 5px; + vertical-align: middle; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap } .module-type { border: 1px solid #DCDCDC; diff --git a/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss b/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss index ef2b03d28..fad5a0be0 100644 --- a/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss +++ b/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss @@ -222,7 +222,7 @@ position: absolute; right: 0; top: 50px; - z-index: 1; + z-index: 11; } .facade-top{ diff --git a/nezha-fronted/src/assets/css/components/common/project/topology.scss b/nezha-fronted/src/assets/css/components/common/project/topology.scss index 8a5cf8b34..a2c9ce50a 100644 --- a/nezha-fronted/src/assets/css/components/common/project/topology.scss +++ b/nezha-fronted/src/assets/css/components/common/project/topology.scss @@ -195,7 +195,7 @@ position: absolute; right: 0; top: 50px; - z-index: 1; + z-index: 11; } .facade-top{ diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss index e7c1015e4..375b2d040 100644 --- a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss +++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss @@ -31,6 +31,10 @@ .right-box-alert-rule .right-box__container .el-form-item__content .el-input-group--prepend { width: 100%; } + .right-box__container .el-form-item__content .input-box .el-textarea .el-input__count { + right: 6px; + + } .rich-text-editor { line-height: 24px; @@ -113,7 +117,10 @@ .threshold-list { border: 1px solid $--border-color-light; padding: 16px; - + margin-bottom: 16px; + .threshold-list-content { + margin-bottom: 0; + } .threshold-item { display: flex; align-items: center; diff --git a/nezha-fronted/src/assets/css/components/page/tool/ping.scss b/nezha-fronted/src/assets/css/components/page/tool/ping.scss index d22e7db59..85ff2c26d 100644 --- a/nezha-fronted/src/assets/css/components/page/tool/ping.scss +++ b/nezha-fronted/src/assets/css/components/page/tool/ping.scss @@ -161,8 +161,10 @@ font-size: 14px; color: $--color-text-regular; letter-spacing: 0; - font-weight: 400; - margin: 30px 0 11px 0; + line-height: 20px; + font-weight: 600; + font-style: oblique; + padding: 30px 0 10px 0; } .data-top{ width: 100%; diff --git a/nezha-fronted/src/assets/css/components/page/tool/trace.scss b/nezha-fronted/src/assets/css/components/page/tool/trace.scss index d21cb1963..d411c66bc 100644 --- a/nezha-fronted/src/assets/css/components/page/tool/trace.scss +++ b/nezha-fronted/src/assets/css/components/page/tool/trace.scss @@ -169,8 +169,10 @@ font-size: 14px; color: $--color-text-regular; letter-spacing: 0; - font-weight: 400; - margin: 30px 0 11px 0; + line-height: 20px; + font-weight: 600; + font-style: oblique; + padding: 30px 0 10px 0; } .data-top{ width: 100%; diff --git a/nezha-fronted/src/components/chart/chart/chartTopology.vue b/nezha-fronted/src/components/chart/chart/chartTopology.vue index 16f297e2c..f48727afd 100644 --- a/nezha-fronted/src/components/chart/chart/chartTopology.vue +++ b/nezha-fronted/src/components/chart/chart/chartTopology.vue @@ -750,6 +750,12 @@ export default { }, // deep: true, immediate: true + }, + chartData: { + immediate: true, + handler (n) { + this.initChart() + } } }, created () { diff --git a/nezha-fronted/src/components/chart/chartDetail.vue b/nezha-fronted/src/components/chart/chartDetail.vue index db6e4c9bd..27a513177 100644 --- a/nezha-fronted/src/components/chart/chartDetail.vue +++ b/nezha-fronted/src/components/chart/chartDetail.vue @@ -230,7 +230,6 @@ export default { }) setTimeout(() => { this.alertDaysData = newWeekDays - console.log(this.alertDaysData) this.trendLoading = false }) return diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index 37ed414ff..b50b15c3f 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -119,9 +119,20 @@ export default { } // Thresholds 只对左Y轴有效 if (s.yAxisIndex != 1) { + chartInfo.param.thresholds = chartInfo.param.thresholds.reverse() s.markLine.data = chartInfo.param.thresholds.map(threshold => { return { yAxis: threshold.value || 0, + label: { + show: true, + formatter () { + if (threshold.label) { + return threshold.label + } else { + return threshold.value || 0 + } + } + }, lineStyle: { color: threshold.color, width: 2, diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue index 3faec45be..588db8b85 100644 --- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue +++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue @@ -40,13 +40,13 @@ -- -
-
{{$t('alert.severity')}}
-
{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : '--'}}
-
+ + + +
{{$t('alert.config.expr')}}
-
{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : '--'}}
+
{{alertRuleData.expr ? alertRuleData.expr : '--'}}
{{$t('alert.alertNum')}}
@@ -100,6 +100,15 @@ export default { that: {}, severityData: Array }, + watch: { + id: { + immediate: true, + deep: true, + handler (n) { + this.init() + } + }, + }, data () { return { loading: true, @@ -181,52 +190,58 @@ export default { }, tipHoverRule (tipLoading) { this.$emit('tipHoverRule', tipLoading) + }, + init () { + if (!this.id) { + return + } + this.$get('/alert/rule/' + this.id).then((res) => { + if (res.msg === 'success') { + this.loading = false + this.alertRuleData = res.data + this.severityDataColor() + this.alertColor = this.returnColor(res.data.alert) + const weekDays = this.getWeeksTime() + if (this.trendTimer) { + clearTimeout(this.trendTimer) + this.trendTimer = null + } + this.trendTimer = setTimeout(() => { + this.trendLoading = true + const params = { + type: 'total', + dimension: 'priority', + step: 'd' + } + params['rule' + 'Id'] = this.id + this.$get('/stat/alertMessage/trend', params).then((res) => { + if (!res.data) { + return + } + const alertDaysData = res.data.result ? res.data.result[0].values : [] + const newWeekDays = JSON.parse(JSON.stringify(weekDays)) + alertDaysData.forEach(item => { + item.values.forEach(time => { + const findItem = newWeekDays.find(days => days.time == time[0]) + if (findItem) { + findItem[item.metric.priority] = time[1] + } + }) + }) + setTimeout(() => { + this.alertDaysData = newWeekDays + this.trendLoading = false + }) + }) + }) + } else { + this.$message.error(res.msg) + } + }) } }, mounted () { - this.$get('/alert/rule/' + this.id).then((res) => { - if (res.msg === 'success') { - this.loading = false - this.alertRuleData = res.data - this.severityDataColor() - this.alertColor = this.returnColor(res.data.alert) - const weekDays = this.getWeeksTime() - if (this.trendTimer) { - clearTimeout(this.trendTimer) - this.trendTimer = null - } - this.trendTimer = setTimeout(() => { - this.trendLoading = true - const params = { - type: 'total', - dimension: 'priority', - step: 'd' - } - params['rule' + 'Id'] = this.id - this.$get('/stat/alertMessage/trend', params).then((res) => { - if (!res.data) { - return - } - const alertDaysData = res.data.result ? res.data.result[0].values : [] - const newWeekDays = JSON.parse(JSON.stringify(weekDays)) - alertDaysData.forEach(item => { - item.values.forEach(time => { - const findItem = newWeekDays.find(days => days.time == time[0]) - if (findItem) { - findItem[item.metric.priority] = time[1] - } - }) - }) - setTimeout(() => { - this.alertDaysData = newWeekDays - this.trendLoading = false - }) - }) - }) - } else { - this.$message.error(res.msg) - } - }) + } } diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo2.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo2.vue index d8b8ade78..d3435246b 100644 --- a/nezha-fronted/src/components/common/alert/alertRuleInfo2.vue +++ b/nezha-fronted/src/components/common/alert/alertRuleInfo2.vue @@ -53,7 +53,7 @@
{{$t('alert.config.expr')}}
-
{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : '--'}}
+
{{alertRuleData.expr ? alertRuleData.expr : '--'}}
{{$t('alert.alertNum')}}
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue index 506b8af90..0925b70b7 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue @@ -19,7 +19,7 @@ - + @@ -86,12 +102,16 @@ import { fromRoute } from '@/components/common/js/constants' import { bottomBoxWindow } from '@/components/common/js/tools' import detailViewRight from '@/components/common/detailView/view/detailViewRight' import panelChart from '@/components/chart/panelChart' +import deleteButton from '@/components/common/deleteButton' +import diagnosisTab from '@/components/common/diagnosisTab' export default { name: 'nzDataList', components: { detailViewRight, - panelChart + panelChart, + deleteButton, + diagnosisTab }, props: { from: { @@ -138,6 +158,15 @@ export default { }, topologyChartInfo () { return this.$store.getters.getTopologyChartInfo + }, + showDeleteTableRel () { + return this.$store.getters.getShowDeleteTableRel + }, + deleteTableRel () { + return this.$store.getters.getDeleteTableRel + }, + diagnosisTab () { + return this.$store.getters.getDiagnosisTab } }, data () { @@ -159,7 +188,12 @@ export default { showCustomTableTitle: false // 自定义列弹框是否显示 }, showLayout: [], - timeRange: [new Date(), new Date()] + timeRange: [new Date(), new Date()], + single: true, + deleteTitle: '', + forceDeleteShow: false, + singleDelete: [], + diagnosisTabData: {} } }, methods: { @@ -197,6 +231,27 @@ export default { }, showFullscreen (flag) { this.$store.commit('setTopologyShow', flag) + }, + delTableRelRow (url, row, forceDeleteShow = false, single = false, deleteTitle = '') { + this.api = url + this.singleDelete = [row] + this.forceDeleteShow = forceDeleteShow + this.single = single + this.deleteTitle = deleteTitle + this.$refs.deleteButton.batchDelete() + }, + delTableRow (ids) { // 接收一个 删除的id数组 判断当前底部弹窗id 是否包含 包含则关闭当前弹窗 + if (ids.indexOf(this.bottomBox.object.id) !== -1) { + this.bottomBox = { + object: {}, + mainResizeShow: true, // dom高度改变时是否展示|隐藏 + subResizeShow: true, + isFullScreen: false, // 全屏状态 + showSubList: false, // 是否显示二级列表 + targetTab: '', // 显示二级列表中的哪个页签 + inTransform: false // 搜索框相关,搜索条件下拉框是否在transform里 + } + } } }, watch: { @@ -210,6 +265,14 @@ export default { handler (n) { this.showLayout = [...n] } + }, + showDeleteTableRel (n) { + if (n) { + this.delTableRelRow(this.deleteTableRel.url, this.deleteTableRel.row, this.deleteTableRel.forceDeleteShow, this.deleteTableRel.single, this.deleteTableRel.deleteTitle) + } + }, + diagnosisTab (n) { + this.diagnosisTabData = n } } } diff --git a/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue b/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue index 7861b8e93..235fe38cb 100644 --- a/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue +++ b/nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue @@ -524,7 +524,6 @@ export default { }) return item }) - console.log(res.data.condition) this.alertLabelData = res.data } else { this.$message.error(res.msg) diff --git a/nezha-fronted/src/components/common/mixin/dataList.js b/nezha-fronted/src/components/common/mixin/dataList.js index f8b3419d1..5ea3af2d8 100644 --- a/nezha-fronted/src/components/common/mixin/dataList.js +++ b/nezha-fronted/src/components/common/mixin/dataList.js @@ -51,7 +51,8 @@ export default { }, provide () { return { - getTableData: this.getTableData + getTableData: this.getTableData, + delCallBack: this.delCallBack } }, methods: { diff --git a/nezha-fronted/src/components/common/mixin/table.js b/nezha-fronted/src/components/common/mixin/table.js index d94c6513f..bb16ee14f 100644 --- a/nezha-fronted/src/components/common/mixin/table.js +++ b/nezha-fronted/src/components/common/mixin/table.js @@ -180,7 +180,12 @@ export default { if (this.trendPromiseIndex < this.trendPromise.length) { Promise.all(this.trendPromise[this.trendPromiseIndex]).then(response => { response.forEach((res, index) => { - const item = this.tableData[index + this.trendPromiseIndex * 10] + const arr = res.responseURL && res.responseURL.split('=') + let id = '' + if (arr) { + id = arr[arr.length - 1] + } + const item = this.tableData.find(row => row.id == id) if (!res.data) { return } @@ -194,13 +199,15 @@ export default { } }) }) - item.alertDaysData = newWeekDays - item.trendLoading = false + if (item) { + item.alertDaysData = newWeekDays + item.trendLoading = false + } }) this.trendPromiseIndex++ this.renderTrend() }).catch((msg) => { - console.log(msg) + // console.log(msg) }) } } @@ -247,7 +254,7 @@ export default { dimension: 'priority', step: 'd' } - params[this.trendKey] = item.id + params[this.trendKey] = item.id // 添加其他参数 这个要放在最后 用于获取对应的id trendArr.push(this.$get('/stat/alertMessage/trend', params)) if (trendArr.length > 9) { this.trendPromise.push(trendArr) diff --git a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js index fa1f5309b..d52d11a91 100644 --- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js +++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js @@ -73,7 +73,7 @@ export default { nodesArr: [], offsetX: 0, offsetY: 0, - moduleId: '', + moduleId: '' } }, mixins: [topoUtil], @@ -156,6 +156,8 @@ export default { pen.imageId = pen.data.imageId if (imageInfo) { pen.image = `/topology/icon/0/${imageInfo.unit}/${imageInfo.name}` + } else { + pen.image = '' } } pen.data = { @@ -438,9 +440,9 @@ export default { } }, beforeEdit () { - const endTime = new Date().getTime() - const startTime = endTime - 60 * this.params.timeType * 1000 - this.getQueryValues(this.querysArray, startTime, endTime) + // const endTime = new Date().getTime() + // const startTime = endTime - 60 * this.params.timeType * 1000 + // this.getQueryValues(this.querysArray, startTime, endTime) this.editFlag = true this.contextmenu = { left: null, @@ -510,8 +512,14 @@ export default { }, // 具体内容点击 nodeTools (node, tool) { + const findItem = this.allModules.find(item => item.id == node.moduleId) + if (findItem) { + this.moduleName = findItem.name + } else { + this.$message.error(this.$t('MODULE_NOTFOUND')) + return + } this.moduleId = node.moduleId - this.moduleName = node.moduleName if (tool.id === 'total') { this.popDataShowUpdate('', false, node) return diff --git a/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js b/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js index cf7c06035..84384b32b 100644 --- a/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js +++ b/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js @@ -11,7 +11,7 @@ export default { }, initEdit (id) { const endTime = new Date().getTime() - const startTime = endTime - 60 * this.params.timeType * 1000 + const startTime = endTime - 60 * getTopology(id).data().timeType * 1000 const elements = getTopology(id).data().elements || [] this.getQueryValues(elements, startTime, endTime) bus.$emit('changeSelectPens', []) @@ -155,6 +155,15 @@ export default { pen.moduleId = pen.data.moduleId delete pen.data.moduleId } + + if (!isNaN(pen.imageId) && pen.imageId) { + const imageInfo = this.iconArray.find(item => item.id === pen.imageId) + if (imageInfo) { + pen.image = `/topology/icon/0/${imageInfo.unit}/${imageInfo.name}` + } else { + pen.image = '' + } + } if (pen.icon) { pen.iconFamily = 'nz-icon' } diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue index 8efa8a93b..49967f396 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue @@ -314,7 +314,7 @@
- {{$t('水平反转')}} + {{$t('project.topology.flipX')}}
- {{$t('垂直反转')}} + {{$t('project.topology.flipY')}}
- +
- +
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue index 269d99725..4a9c52b6f 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue @@ -69,6 +69,7 @@ >
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue index 2485131ed..562a96421 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue @@ -337,7 +337,6 @@ export default { }, beforeAvatarUpload (file, fileList) { const this_ = this - console.log(file.raw.type) const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' || file.raw.type === 'image/gif') const isLt2M = (file.size / 1024 / 1024) < 2 if (!isJPG) { diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue index 26b9d2f23..d2b1f41d6 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue @@ -25,6 +25,7 @@ export default { name: 'meta2dTooltip', props: { params: {}, + meta2dId: {} }, mixins: [topoUtil], computed: { @@ -51,6 +52,7 @@ export default { return } this.chartInfo.type = this.params.chartType || 'line' + this.chartInfo.id = this.meta2dId + 'meta2DTooltip' const chartData = [] const elements = [] const obj = {} @@ -79,7 +81,7 @@ export default { elements.push(element) } }) - if (chartData.length && this.$refs.panelChart) { + if (chartData && this.$refs.panelChart) { this.chartInfo.elements = elements this.$refs.panelChart.chartData = chartData this.$refs.panelChart.loading = false diff --git a/nezha-fronted/src/components/common/project/popData/Info.vue b/nezha-fronted/src/components/common/project/popData/Info.vue index 5c2a24eaa..60fcd2738 100644 --- a/nezha-fronted/src/components/common/project/popData/Info.vue +++ b/nezha-fronted/src/components/common/project/popData/Info.vue @@ -38,7 +38,7 @@
{{ $t('overall.remark') }} - {{moduleInfo.remark?moduleInfo.remark:'--'}} + {{moduleInfo.remark?moduleInfo.remark:'--'}}
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue index 8032a1a5b..eb37d05b2 100644 --- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue +++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue @@ -76,12 +76,20 @@ - -
+
+
@@ -89,13 +97,14 @@
{{$t('alert.config.when')}} Result - +
- +
- + +
{{$t('alert.config.normal')}}
-
- +
@@ -354,6 +362,15 @@ export default { richTextEditor }, mixins: [editRigthBox, promqlInputMixin], + computed: { + filterOperators () { + if (this.editAlertRule.type != 3) { + return this.operators.filter(item => item.value !== '=~') + } else { + return this.operators.filter(item => item.value == '=~') + } + } + }, data () { const nzOid = (rule, value, callback) => { if (this.editAlertRule.type === 3) { @@ -496,6 +513,39 @@ export default { callback() } }, + thresholdBlur () { + this.$refs.alertRuleForm.validateField('condition') + }, + conditionValidator (rule, value, callback) { + let flag = true + if (value.length) { + value.forEach(item => { + if (item.value) { + flag = false + } + }) + } + if (flag) { + this.conditionValidatorError = true + this.editAlertRule.condition.forEach((item, index) => { + this.$refs.alertRuleForm.validateField('condition.' + index + '.value') // 移除from表单的 condition 验证 + }) + callback(new Error()) + } else { + this.conditionValidatorError = false + this.editAlertRule.condition.forEach((item, index) => { + this.$refs.alertRuleForm.validateField('condition.' + index + '.value') // 移除from表单的 condition 验证 + }) + callback() + } + }, + showError (rule, value, callback) { + if (this.conditionValidatorError) { + callback(new Error(this.$t('alert.config.thresholdOnly'))) + } else { + callback() + } + }, clickOutside () { this.esc(false) }, @@ -517,7 +567,7 @@ export default { operator: item.operator, value: item.value } - }) + }).filter(item => item.value) const params = { ...this.editAlertRule, method: this.editAlertRule.method.join(','), @@ -624,6 +674,13 @@ export default { this.$nextTick(() => { this.showSnmpTrap = true }) + // type为1时 不能输入正则 + this.editAlertRule.condition.forEach((item, index) => { + item.operator = '>' + item.value = '' + this.$refs.alertRuleForm.clearValidate('condition.' + index + '.value') // 移除from表单的 condition 验证 + }) + this.$refs.alertRuleForm.clearValidate('condition') // 移除from表单的 condition 验证 } else if (val === 2) { this.showMetrics = false this.expressions = [''] @@ -633,6 +690,13 @@ export default { this.showSnmpTrap = true }) this.$refs.alertRuleForm.clearValidate('expr') // 移除from表单的 expr 验证 + // type为2时 不能输入正则 + this.editAlertRule.condition.forEach((item, index) => { + item.operator = '>' + item.value = '' + this.$refs.alertRuleForm.clearValidate('condition.' + index + '.value') // 移除from表单的 condition 验证 + }) + this.$refs.alertRuleForm.clearValidate('condition') // 移除from表单的 condition 验证 } else if (val === 3) { this.showSnmpTrap = false // showSnmpTrap 为 false 时,展示 OID this.showMetrics = false @@ -645,6 +709,7 @@ export default { item.value = '' this.$refs.alertRuleForm.clearValidate('condition.' + index + '.value') // 移除from表单的 condition 验证 }) + this.$refs.alertRuleForm.clearValidate('condition') // 移除from表单的 condition 验证 } }, afterInitRich () { @@ -654,8 +719,9 @@ export default { operatorChange (item, index, value) { if (item.operator === '=~' || value === '=~') { item.value = '' - this.$refs.alertRuleForm.clearValidate('condition.' + index + '.value') // 移除from表单的 condition 验证 + this.$refs.alertRuleForm.clearValidate('condition.' + index + '.value') // 移除from表单的 condition 其中一个的验证 } + this.$refs.alertRuleForm.clearValidate('condition') // 移除from表单的 condition 验证 item.operator = value } }, diff --git a/nezha-fronted/src/components/common/searchBox/searchBox.vue b/nezha-fronted/src/components/common/searchBox/searchBox.vue index baafe94b7..eed7a4a56 100644 --- a/nezha-fronted/src/components/common/searchBox/searchBox.vue +++ b/nezha-fronted/src/components/common/searchBox/searchBox.vue @@ -34,7 +34,7 @@ - +
@@ -119,6 +119,7 @@ export default { selectArr: [], // 已被选择的条件 key: '', // 当前被选中的 key symbol: false, // 当前被选中的 symbol + selectSymbolValue: '', // 当前被选中的 symbol 的值 value: '', // 当前被选中的 value keyShow: false, // key 的下拉 symbolShow: false, // symbol 的下拉 显示根据key的类型 自定义的不包含 大于小于 @@ -209,6 +210,8 @@ export default { // console.log(e, 'keydown') if (e.keyCode == 8 && !this.searchStr && this.selectArr.length) { this.selectArr.pop() + } else if (e.keyCode == 8) { + // console.log(this.oldSearchStr, this.searchStr) } // 5 if (e.keyCode == 38) { // 向上 @@ -247,18 +250,6 @@ export default { this.$refs.searchStr.focus() return } - // 2 3 - const index = this.searchStr.indexOf(':') - if (index === -1) { - this.symbol = false - this.inputReadonly = false - this.contentShow('key') - } else if (index === this.searchStr.length - 1 && !this.symbol) { - this.contentShow('symbol') - } else { - this.symbol = true - this.contentShow('value') - } // 4 if (e.keyCode == 13 && index !== -1 && this.symbol) { this.addSelectArr(this.searchStr) @@ -280,7 +271,7 @@ export default { if (index === -1) { this.symbol = false this.contentShow('key') - } else if (index === this.searchStr.length - 1 && !this.symbol) { + } else if ((index == this.searchStr.length - 1) && !this.symbol) { this.contentShow('symbol') } else { this.symbol = true @@ -289,6 +280,7 @@ export default { }, selectSymbol (item) { this.symbol = true + this.selectSymbolValue = item.value switch (item.value) { case '=' : this.$refs.searchStr.focus() @@ -334,6 +326,53 @@ export default { this.setValueList('') this.contentShow('value') }, + delSymbol () { + const length = this.searchStr.length + switch (this.selectSymbolValue) { + case '=' : + this.$refs.searchStr.focus() + break + case '≠' : + this.searchStr = this.searchStr.substring(1) + this.$refs.searchStr.focus() + break + case '>=' : + // this.searchStr = this.searchStr + '>=' + // this.$refs.searchStr.focus() + break + case '<=' : + // this.searchStr = this.searchStr + '<=' + // this.$refs.searchStr.focus() + break + case '>' : + // this.searchStr = this.searchStr + '>' + // this.$refs.searchStr.focus() + break + case '<' : + // this.searchStr = this.searchStr + '<' + // this.$refs.searchStr.focus() + break + case 'wildcard' : + this.searchStr = this.searchStr.substring(1) + this.$refs.searchStr.focus() + break + case 'not wildcard' : + this.searchStr = this.searchStr.substring(2) + this.$refs.searchStr.focus() + break + case 'exist' : + // this.selectValue('*') + // this.$refs.searchStr.focus() + break + case 'not exist' : + this.searchStr = this.searchStr.substring(2) + // this.searchStr = '-' + this.searchStr + '*' + // this.selectValue('*') + this.$refs.searchStr.focus() + break + } + this.selectSymbolValue = '' + }, selectValue (value) { this.searchStr = this.searchStr + value this.addSelectArr(this.searchStr) @@ -348,8 +387,16 @@ export default { this.keyShow = false // key 的下拉 this.symbolShow = false // symbol 的下拉 this.valueShow = false // value 的下拉 - if (key) { - this[key + 'Show'] = true + console.log(key) + if (key === 'symbol') { + this.setSymBolList() + this.symbolShow = true + } + if (key === 'key') { + this.keyShow = true + } + if (key === 'value') { + this.valueShow = true } const keyStr = this.searchStr.split(':')[0] // console.log(keyStr, this.searchStr.split(':')) @@ -412,6 +459,7 @@ export default { key, value: [value] }) + this.setSearchList() } }, removeSelectArr (index) { @@ -511,6 +559,28 @@ export default { this.searchList = n.searchLabelList || [] this.oldSearchList = n.searchLabelList || [] } + }, + searchStr: { + handler (n, o) { + console.log(n, o) + // 2 3 + const index = this.searchStr.indexOf(':') + if (index === -1) { + this.symbol = false + this.inputReadonly = false + this.contentShow('key') + } else if (index === this.searchStr.length - 1 && !this.symbol) { + this.contentShow('symbol') + } else { + this.symbol = true + this.contentShow('value') + } + if (n.indexOf(':') === -1 && o.indexOf(':') !== -1) { + this.symbol = false + this.delSymbol() + } + // if (n.indexOf(':')) + } } } } diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue index 96ddd070b..7086e8f9d 100644 --- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue +++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue @@ -249,7 +249,8 @@ export default { tableDataInitNum: 0, alertRuleShow: false, alertRuleId: '', - alertRuleObj: '' + alertRuleObj: '', + timeRule: '' } }, computed: { @@ -518,7 +519,7 @@ export default { }, // alertName鼠标划入 alertMessageHover (item, loading, e) { - clearTimeout(this.timer) + clearTimeout(this.timeRule) if (e) { const dom = e.currentTarget const position = dom.getBoundingClientRect() @@ -527,13 +528,13 @@ export default { this.alertRuleObj = item } this.$set(item.alertRule, 'loading', loading) - this.timer = setTimeout(() => { + this.timeRule = setTimeout(() => { this.alertRuleShow = loading }, 500) this.flag = loading }, tipHoverRule (tipLoading) { - clearTimeout(this.timer) + clearTimeout(this.timeRule) if (this.flag === false) { this.alertRuleShow = tipLoading } diff --git a/nezha-fronted/src/components/common/table/tool/pingTable.vue b/nezha-fronted/src/components/common/table/tool/pingTable.vue index 8ddc2f007..a54756b73 100644 --- a/nezha-fronted/src/components/common/table/tool/pingTable.vue +++ b/nezha-fronted/src/components/common/table/tool/pingTable.vue @@ -2,7 +2,7 @@ - - { + const findItem = severityData.find(severity => severity.id === item.id) + if (findItem) { + item.color = findItem.color + item.label = findItem.name + } + return item + }).filter(item => item.value) } chartInfo.elements && (chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')) } else if (this.currentMsg.alertRule.type === 2) { chartInfo = lodash.cloneDeep(logData) chartInfo.elements = [{}] - if (!isNaN(this.currentMsg.alertRule.threshold)) { + if (conditionArr.length) { chartInfo.param.enable.thresholds = true - chartInfo.param.thresholds = [{ - value: this.currentMsg.alertRule.threshold, - color: '#d64f40' - }] + chartInfo.param.thresholds = conditionArr.map(item => { + const findItem = severityData.find(severity => severity.id === item.id) + if (findItem) { + item.color = findItem.color + item.label = findItem.name + } + return item + }).filter(item => item.value) } chartInfo.elements && (chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\r|\n+/g, '')) } @@ -869,6 +879,10 @@ export default { }) } }, + + dateChange () { + this.getTableData() + }, getTableData (state) { if (state) { this.state = state @@ -1196,7 +1210,8 @@ export default { if (this.$refs.dataTable) { this.$refs.dataTable.$refs.dataTable.bodyWrapper.scrollTop = 0 } - this.getTableData() + // this.getTableData() + this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.refresh() }, computeDistance (str) { let width = 0 diff --git a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue index 770e477aa..26a853a72 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue @@ -82,7 +82,7 @@