From 302dad4eaf0a00fd857c8cd9ce2657a894cce896 Mon Sep 17 00:00:00 2001 From: zyh Date: Fri, 5 Aug 2022 10:26:43 +0800 Subject: [PATCH 1/8] =?UTF-8?q?NEZ-2105=20feat=EF=BC=9Achart=E7=BC=96?= =?UTF-8?q?=E8=BE=91metric/log=E8=A1=A8=E8=BE=BE=E5=BC=8F=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E8=B0=83=E6=95=B4=E9=A1=BA=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/rightBox/chart/chartConfig.vue | 81 ++++++++++++------- .../common/rightBox/chart/publicConfig.js | 77 ++++++++++-------- .../page/dashboard/explore/exploreItem.vue | 22 ++++- .../page/dashboard/explore/promqlInput.vue | 18 +++-- 4 files changed, 122 insertions(+), 76 deletions(-) diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue index 19a4dae26..9a2fdc346 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue @@ -12,22 +12,23 @@ v-if="chartConfig.elements" class="metrics-input-box" > - + - + - + - + - + - + + + + @@ -150,15 +154,15 @@ prop="unit" > @@ -1005,6 +1009,8 @@ export default { if (!this.chartConfig.elements.length) { this.addExpression() } else { + // 根据orderNum排序 + this.chartConfig.elements = this.chartConfig.elements.sort((a, b) => a.orderNum - b.orderNum) this.chartConfig.elements.forEach(item => { this.addExpression(item) }) @@ -1198,9 +1204,22 @@ export default { if (!this.chartConfig.elements.length) { this.addExpression() } else { - this.chartConfig.elements.forEach(item => { + const expressionsShow = this.$loadsh.cloneDeep(this.expressionsShow) + this.chartConfig.elements.forEach((item, index) => { this.expressions.push(item.expression) this.expressionName.push(item.name) + // 更新promqlInput视图 + this.$nextTick(() => { + this.$refs[`promql-${index}`][0].promqlInputChange(item) + }) + // 设置orderNum排序 + item.orderNum = index + // expressionsShow调整顺序 + expressionsShow.forEach((subItem) => { + if (item.name == subItem.oldName) { + this.$set(this.expressionsShow, index, this.$loadsh.cloneDeep(subItem)) + } + }) }) } this.change() diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js index c51cf46db..d0d34a5a9 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js +++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js @@ -370,7 +370,15 @@ export default { if (this.expressions.length) { this.chartConfig.elements = [] this.expressions.forEach((expr, i) => { - this.chartConfig.elements.push({ id: this.expressionsShow[i].elementId, expression: expr, type: 'expert', legend: this.expressionsShow[i].legend, name: this.expressionName[i], state: this.expressionsShow[i].state }) + this.chartConfig.elements.push({ + id: this.expressionsShow[i].elementId, + expression: expr, + type: 'expert', + legend: this.expressionsShow[i].legend, + name: this.expressionName[i], + state: this.expressionsShow[i].state, + orderNum: i + }) }) } else { this.chartConfig.elements = [] @@ -421,6 +429,16 @@ export default { letter += self.letter[num % 26] return letter }, + getExpressionName () { + let name = '' + for (let i = 0; i <= this.expressionName.length; i++) { + name = this.transformNumToLetter(i) + if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的 + break + } + } + return name + }, addExpression (item) { if (!item) { this.expressions.push('') @@ -452,16 +470,29 @@ export default { ) } }, - - getExpressionName () { - let name = '' - for (let i = 0; i <= this.expressionName.length; i++) { - name = this.transformNumToLetter(i) - if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的 - break + copyExpression (index) { + this.expressions.push(this.expressions[index]) + const expressionName = this.getExpressionName() + this.expressionName.push(expressionName) + this.expressionsShow.push( + { + ...this.expressionsShow[index], + show: true, + hideInput: true, + oldName: expressionName, + error: '', + elementId: '' } - } - return name + ) + this.$nextTick(() => { + this.expressions.forEach((ex, index) => { + if (ex) { + this.$refs[`promql-${index}`][0].metricChange(ex) + this.$refs[`promql-${index}`][0].promqlInputChange(ex) + } + }) + }) + this.expressionChange() }, removeExpression (index) { if (this.expressionsShow.length > 1) { @@ -472,37 +503,13 @@ export default { this.expressions.forEach((ex, index) => { if (ex) { this.$refs[`promql-${index}`][0].metricChange(ex) - this.$refs[`promql-${index}`][0].promqlInputCahnge(ex) + this.$refs[`promql-${index}`][0].promqlInputChange(ex) } }) }) this.expressionChange() } }, - copyExpression (index) { - this.expressions.push(this.expressions[index]) - const expressionName = this.getExpressionName() - this.expressionName.push(expressionName) - this.expressionsShow.push( - { - ...this.expressionsShow[index], - show: true, - hideInput: true, - oldName: this.expressionName[index], - error: '', - elementId: '' - } - ) - this.$nextTick(() => { - this.expressions.forEach((ex, index) => { - if (ex) { - this.$refs[`promql-${index}`][0].metricChange(ex) - this.$refs[`promql-${index}`][0].promqlInputCahnge(ex) - } - }) - }) - this.expressionChange() - }, showExpression (index) { this.expressionsShow[index - 1].show = !this.expressionsShow[index - 1].show this.$set(this.expressionsShow, index - 1, this.expressionsShow[index - 1]) diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue index 9a1d6021b..849be2fdc 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue @@ -425,7 +425,13 @@ export default { chartData: {}, collapseValue: ['1', '2'], showTab: ['1', '2'], - logData: [] + logData: [], + letter: [ + 'A', 'B', 'C', 'D', 'E', 'F', 'G', + 'H', 'I', 'J', 'K', 'L', 'M', 'N', + 'O', 'P', 'Q', 'R', 'S', 'T', + 'U', 'V', 'W', 'X', 'Y', 'Z' + ] } }, created () { @@ -1016,7 +1022,7 @@ export default { groupId: -1 } this.expressions.forEach((exp, index) => { - chart.elements.push({ state: this.promqlKeys[index].state, expression: exp, legend: '', type: 'expert', id: '', name: 'A' }) + chart.elements.push({ state: this.promqlKeys[index].state, expression: exp, legend: '', type: 'expert', id: '', name: this.transformNumToLetter(index) }) }) this.chartData = chart this.rightBox.show = true @@ -1053,7 +1059,7 @@ export default { remark: '' } this.expressions.forEach((exp, index) => { - chart.elements.push({ state: this.promqlKeys[index].state, expression: exp, legend: '', type: 'expert', id: '', name: 'A' }) + chart.elements.push({ state: this.promqlKeys[index].state, expression: exp, legend: '', type: 'expert', id: '', name: this.transformNumToLetter(index) }) }) this.chartData = chart this.rightBox.show = true @@ -1106,6 +1112,16 @@ export default { updateCustomTableTitle (custom) { this.tools.customTableTitle = custom this.$refs.exploreTable.doLayout() + }, + transformNumToLetter (num) { // 相当于26进制 获取idaddExpression + const self = this + let letter = '' + const loopNum = parseInt(num / 26) + if (loopNum > 0) { + letter += this.transformNumToLetter(loopNum - 1) + } + letter += self.letter[num % 26] + return letter } }, watch: { diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue index 7493f82b7..5716c8de3 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue @@ -713,13 +713,17 @@ export default { newDoc (val) { // console.log('doc', val) }, - promqlInputCahnge (val) { - const text = this.newView.state.doc.toString() - this.newView.dispatch( - this.newView.state.update({ - changes: { from: 0, to: text.length, insert: this.codeMirrorValue[this.index] } - }) - ) + promqlInputChange (val) { + if (this.type === 'metrics') { + try { + const text = this.newView.state.doc.toString() + this.newView.dispatch( + this.newView.state.update({ + changes: { from: 0, to: text.length, insert: this.codeMirrorValue[this.index] } + }) + ) + } catch (error) {} + } }, fetchFn (a, b) { const params = {} From 57a944564743ca6825123405b646bc1270e0e456 Mon Sep 17 00:00:00 2001 From: likexuan Date: Fri, 5 Aug 2022 10:31:48 +0800 Subject: [PATCH 2/8] =?UTF-8?q?NEZ-2095=20fix=20:=20Roles=E6=96=B0?= =?UTF-8?q?=E5=BB=BA=E6=97=B6Dashboards=E7=9A=84=20View=E6=9D=83=E9=99=90?= =?UTF-8?q?=E5=BA=94=E9=BB=98=E8=AE=A4=E4=B8=BA=E5=8B=BE=E9=80=89=E7=8A=B6?= =?UTF-8?q?=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/assets/css/common/checkbox.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/nezha-fronted/src/assets/css/common/checkbox.scss b/nezha-fronted/src/assets/css/common/checkbox.scss index 01eab0c60..d0b05347b 100644 --- a/nezha-fronted/src/assets/css/common/checkbox.scss +++ b/nezha-fronted/src/assets/css/common/checkbox.scss @@ -7,14 +7,16 @@ .el-checkbox__input.is-checked .el-checkbox__inner { background-color: $--color-primary !important; } -.el-checkbox__input.is-checked.is-disabled .el-checkbox__inner{ +.el-table .el-table__header-wrapper{ + .el-checkbox__input.is-checked.is-disabled .el-checkbox__inner{ background-color: $--background-color-empty !important; border-color: $--border-color-base !important; } -.el-checkbox__input.is-disabled .el-checkbox__inner{ + .el-checkbox__input.is-disabled .el-checkbox__inner{ background-color: $--background-color-empty !important; border-color: $--border-color-base !important; } +} .el-checkbox__input.is-checked.is-disabled .el-checkbox__inner:hover{ border-color: $--border-color-base !important; } From 1f06b75182520461367f734610d3936f179cf97a Mon Sep 17 00:00:00 2001 From: likexuan Date: Mon, 8 Aug 2022 09:09:08 +0800 Subject: [PATCH 3/8] =?UTF-8?q?NEZ-2101=20feat=20:=20Record=20rule=20?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets/css/components/index.scss | 1 + .../components/common/bottomBox/bottomBox.vue | 11 +- .../bottomBox/tabs/recordRuleEvalLog.vue | 121 ++++++++++ .../src/components/common/js/constants.js | 1 + .../common/popBox/topToolMoreOptions.vue | 2 + .../common/table/settings/recordRuleTable.vue | 208 ++++++++++++++++++ .../src/components/page/config/recordRule.vue | 132 +++++++++++ nezha-fronted/src/router/index.js | 4 + 8 files changed, 478 insertions(+), 2 deletions(-) create mode 100644 nezha-fronted/src/components/common/bottomBox/tabs/recordRuleEvalLog.vue create mode 100644 nezha-fronted/src/components/common/table/settings/recordRuleTable.vue create mode 100644 nezha-fronted/src/components/page/config/recordRule.vue diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss index 03f09cb9e..a59876e03 100644 --- a/nezha-fronted/src/assets/css/components/index.scss +++ b/nezha-fronted/src/assets/css/components/index.scss @@ -41,6 +41,7 @@ @import './common/rightBox/addEndpointBox.scss'; @import './common/rightBox/alertRuleBox.scss'; @import './common/rightBox/alertSilenceBox.scss'; +@import './common/rightBox/recordRuleBox.scss'; @import './common/rightBox/assetStateBox.scss'; @import './common/rightBox/batchAddEndpoint.scss'; @import './common/rightBox/batchModifyEndpoint.scss'; diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue index f7fd18fae..c24077f29 100644 --- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue +++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue @@ -62,6 +62,8 @@ + + @@ -89,6 +91,7 @@ import { fromRoute } from '@/components/common/js/constants' import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab' import scrapeEndpoint from '@/components/common/bottomBox/tabs/scrapeEndpoint' import IpDetails from '@/components/common/bottomBox/tabs/IpDetails' +import recordRuleEvalLog from '@/components/common/bottomBox/tabs/recordRuleEvalLog' export default { name: 'bottomBox', @@ -110,7 +113,8 @@ export default { assetTab, assetSubTab, alertRuleEvalLog, - IpDetails + IpDetails, + recordRuleEvalLog }, props: { isFullScreen: Boolean, // 是否全屏 @@ -119,7 +123,7 @@ export default { from: String, // 来自哪个页面 tabList: Array, // 动态页签列表 targetTab: String, // 展示哪个页签 - sign:[Number,String], //pickTime历史记录的唯一标识 + sign: [Number, String] // pickTime历史记录的唯一标识 }, watch: { obj: { @@ -257,6 +261,9 @@ export default { ipam: [ { prop: 'ipam', name: this.$t('ipam.subnet.ipDetails'), active: true } ], + recordRule: [ + { prop: 'recordRule', name: this.$t('overall.alertRuleEvalLog'), active: true } + ], alertSilence: [ { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true } ] diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/recordRuleEvalLog.vue b/nezha-fronted/src/components/common/bottomBox/tabs/recordRuleEvalLog.vue new file mode 100644 index 000000000..9ea14396d --- /dev/null +++ b/nezha-fronted/src/components/common/bottomBox/tabs/recordRuleEvalLog.vue @@ -0,0 +1,121 @@ + + + diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js index 8b863410f..7af43fe57 100644 --- a/nezha-fronted/src/components/common/js/constants.js +++ b/nezha-fronted/src/components/common/js/constants.js @@ -360,6 +360,7 @@ export const fromRoute = { expressionTemplate: 'expressionTemplate', user: 'user', agent: 'agent', + recordRule: 'recordRule', dc: 'dc', role: 'role', project: 'project', diff --git a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue index e1aa13dd6..d9601b1a6 100644 --- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue +++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue @@ -335,6 +335,8 @@ export default { url = '/ipam/subnet/template' } else if (this.importUrl.indexOf('ipam/ip') > -1) { url = '/ipam/ip/template' + } else if (this.importUrl.indexOf('record/rule') > -1) { + url = '/record/rule/template' } if (!url) { console.error('no interface support') diff --git a/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue b/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue new file mode 100644 index 000000000..370b43f59 --- /dev/null +++ b/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue @@ -0,0 +1,208 @@ + + + diff --git a/nezha-fronted/src/components/page/config/recordRule.vue b/nezha-fronted/src/components/page/config/recordRule.vue new file mode 100644 index 000000000..0c48aa6eb --- /dev/null +++ b/nezha-fronted/src/components/page/config/recordRule.vue @@ -0,0 +1,132 @@ + + + diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js index a8569bb4d..80f1a11e6 100644 --- a/nezha-fronted/src/router/index.js +++ b/nezha-fronted/src/router/index.js @@ -64,6 +64,10 @@ export default new Router({ path: '/agent', component: resolve => require(['@/components/page/config/agent'], resolve) }, + { + path: '/recordRule', + component: resolve => require(['@/components/page/config/recordRule'], resolve) + }, { path: '/assetType', component: resolve => require(['@/components/page/config/assetType'], resolve) From 3139b25772b34c19704ef4c6e3ed6435cc7dc39b Mon Sep 17 00:00:00 2001 From: zyh Date: Mon, 8 Aug 2022 16:52:08 +0800 Subject: [PATCH 4/8] =?UTF-8?q?NEZ-2109=20feat=EF=BC=9Aasset=20import?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/assets/css/common.scss | 10 +- .../assets/css/components/chart/chart.scss | 1 + nezha-fronted/src/assets/stylus/main.scss | 39 +++++ .../common/popBox/topToolMoreOptions.vue | 161 ++++++++++++++++-- .../src/components/page/asset/asset.vue | 47 ++--- 5 files changed, 219 insertions(+), 39 deletions(-) diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index 806813744..a98d9bf32 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -312,7 +312,7 @@ td .nz-icon-gear:before { .el-button:hover { border: 1px solid $--color-primary; } - .el-button:nth-of-type(3) { + .el-button:nth-child(3) { margin-left: 10px; } .nz-btn.nz-btn-size-normal { @@ -323,6 +323,14 @@ td .nz-icon-gear:before { .nz-btn.nz-btn-size-normal:hover { background-color: #fe9f37; } + .nz-btn.nz-btn-style-error { + background: $--color-danger; + color: $--button-primary-color; + border: 1px solid $--color-danger; + } + .nz-btn.nz-btn-style-error:hover { + background-color: #F38b73; + } } } .el-dialog { diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss index 8e4ef237c..e389e8356 100644 --- a/nezha-fronted/src/assets/css/components/chart/chart.scss +++ b/nezha-fronted/src/assets/css/components/chart/chart.scss @@ -1,4 +1,5 @@ .temp-dropdown{ + display: none; border: none; } .my-loading-parent--relative { diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss index 03a6573f1..44d007fe3 100644 --- a/nezha-fronted/src/assets/stylus/main.scss +++ b/nezha-fronted/src/assets/stylus/main.scss @@ -1222,6 +1222,45 @@ li { .result-title{ font-weight: bold; } +.import-upload{ + width: 96%; + margin: 0 auto; + .el-upload,.el-upload-dragger{ + width: 100%; + } + .el-upload-list__item{ + line-height: 2.4; + margin-top: 8px; + text-align: left; + .el-icon-close{ + top: 0; + bottom: 0; + line-height: 2.4; + } + } +} +.import-select{ + width: 96%; + margin: 10px auto; + .exists{ + display: flex; + align-items: center; + padding-bottom: 4px; + &>span{ + margin-right: 12px; + } + } + .import-select-list{ + .import-select-item{ + margin-top: 6px; + } + } +} +.exists-select{ + z-index: 2100 !important; +} + + /**dialog 在视图中居中显示start*/ .el-dialog{ display: flex; diff --git a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue index e1aa13dd6..9ce6cd394 100644 --- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue +++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue @@ -24,7 +24,66 @@ -
+ +
+
+ + +
{{$t('overall.dragFileTip')}}，{{$t('overall.or')}} {{$t('overall.clickUpload')}}
+
{{$t('overall.importSupport')}}
+ +
+
+
+ {{$t('overall.existed')}} + + + + +
+
    +
  • + {{$t('overall.ignoreError')}} +
    • +
  • + {{$t('overall.syncDashboard')}} +
    • +
  • + {{$t('overall.syncEndpoint')}} +
    • +
+
+
+
+ +
+

{{$t('overall.selectTemplate')}}

+ + {{item.name}} + +
+ + + + +
+
+
+ +
{{$t('overall.importTip')}}
@@ -34,19 +93,21 @@
- -
-
+ + +
{{$t('export.records')}} @@ -63,15 +124,17 @@
- -
+ +
@@ -114,10 +177,10 @@
- -
@@ -134,6 +197,8 @@ + diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue index c13866a7a..3bbb705a1 100644 --- a/nezha-fronted/src/components/page/asset/asset.vue +++ b/nezha-fronted/src/components/page/asset/asset.vue @@ -28,9 +28,9 @@ :params="searchLabel" :params2="searchCheckBox" :permissions="{ - import: 'asset_add', - export: 'asset_edit' - }" + import: 'asset_add', + export: 'asset_edit' + }" class="top-tool-export margin-l-10 margin-r-10" export-file-name="asset" export-url="/asset/asset/export" @@ -100,9 +100,9 @@ :params="searchLabel" :params2="searchCheckBox" :permissions="{ - import: 'asset_add', - export: 'asset_edit' - }" + import: 'asset_add', + export: 'asset_edit' + }" class="top-tool-export margin-l-10 margin-r-10" export-file-name="asset" export-url="/asset/asset/export" @@ -152,24 +152,27 @@ + ref="assetBox" + :dc-data="dcData" + :field-group-data="fieldGroupData" + :from="fromRoute.asset" + :obj="object" + :snmp-credential-data="snmpCredentialData" + :state-data="stateData" + :type-data="typeData" + @close="closeRightBox" + @refresh="getTableData"> + - + + From 7b4ad59e4e35cba41bf60f3e960153baadb161a3 Mon Sep 17 00:00:00 2001 From: likexuan Date: Mon, 8 Aug 2022 16:59:45 +0800 Subject: [PATCH 5/8] =?UTF-8?q?NEZ-2103=20feat=20:=20Record=20rule=20?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91=20?= =?UTF-8?q?=E6=9C=AA=E5=AF=B9=E6=8E=A5=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/rightBox/recordRuleBox.css | 1 + .../common/rightBox/recordRuleBox.scss | 36 +++ .../common/rightBox/recordRuleBox.vue | 282 ++++++++++++++++++ .../src/components/page/config/recordRule.vue | 21 +- 4 files changed, 338 insertions(+), 2 deletions(-) create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.css create mode 100644 nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.scss create mode 100644 nezha-fronted/src/components/common/rightBox/recordRuleBox.vue diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.css b/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.css new file mode 100644 index 000000000..7b6a23e1c --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.css @@ -0,0 +1 @@ +.right-box-record-rule .metric-selector-input-box .input-box{width:100%;height:100%}.right-box-record-rule .metric-selector-input-box .input-box .not-fixed-height.no-resize.no-close{width:100%;height:100%}.right-box-record-rule .promqlInput .metric-selector-title{width:80px}.right-box-record-rule .promqlInput .metric-selector-input-box{width:calc(100% - 92px) !important}.right-box-record-rule .promqlInput .cm-editor.ͼ1.ͼ2.ͼo.cm-focused{height:100%}.right-box-record-rule .promqlInput .cm-editor.ͼ1.ͼ2.ͼo{height:100%}.right-box-record-rule .promqlInput .cm-content.cm-lineWrapping{display:flex;align-items:center}.right-box-record-rule .silence-matchers-value{width:100%}.right-box-record-rule .param-box-row-symbol{padding-left:20px} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.scss new file mode 100644 index 000000000..d7e4ecb45 --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.scss @@ -0,0 +1,36 @@ +.right-box-record-rule { + .metric-selector-input-box{ + .input-box{ + width: 100%; + height: 100%; + .not-fixed-height.no-resize.no-close{ + width: 100%; + height: 100%; + } + } + } + .promqlInput{ + .metric-selector-title{ + width: 80px; + } + .metric-selector-input-box{ + width: calc(100% - 92px) !important; + } + .cm-editor.ͼ1.ͼ2.ͼo.cm-focused{ + height: 100%; + } + .cm-editor.ͼ1.ͼ2.ͼo{ + height: 100%; + } + .cm-content.cm-lineWrapping{ + display: flex; + align-items: center; + } + } + .silence-matchers-value{ + width: 100%; + } + .param-box-row-symbol{ + padding-left: 20px; + } +} diff --git a/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue b/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue new file mode 100644 index 000000000..f9bbeb10c --- /dev/null +++ b/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue @@ -0,0 +1,282 @@ + + + diff --git a/nezha-fronted/src/components/page/config/recordRule.vue b/nezha-fronted/src/components/page/config/recordRule.vue index 0c48aa6eb..ad4073a6c 100644 --- a/nezha-fronted/src/components/page/config/recordRule.vue +++ b/nezha-fronted/src/components/page/config/recordRule.vue @@ -97,7 +97,7 @@ export default { mixins: [dataListMixin, routerPathParams], data () { return { - url: 'alert/silence', + url: 'record/rule', tableId: 'recordRuleTable', searchMsg: { // 给搜索框子组件传递的信息 searchLabelList: [ @@ -116,7 +116,7 @@ export default { type: '', expr: '', inr: '', - labels: [], + labels: [{ label: '', value: '' }], remark: '', state: '' } @@ -125,6 +125,23 @@ export default { mounted () { }, methods: { + edit (u) { + this.$get(`${this.url}/${u.id}`).then(response => { + if (response.code === 200) { + this.object = response.data + this.object.labels = this.labelsSort(response.data.labels) + this.rightBox.show = true + } + }) + }, + labelsSort (obj) { + const labels = this.$lodash.cloneDeep(obj) + const result = [] + for (const key in labels) { + result.push({ label: key, value: labels[key] }) + } + return result + } }, created () { } From 958c02e74356dc091ba87ea4a7a5e65a8198c3e0 Mon Sep 17 00:00:00 2001 From: likexuan Date: Tue, 9 Aug 2022 17:30:29 +0800 Subject: [PATCH 6/8] =?UTF-8?q?NEZ-2103=20feat=20:=20Record=20rule=20?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/rightBox/recordRuleBox.css | 2 +- .../common/rightBox/recordRuleBox.scss | 15 ++- .../components/common/alert/alertLabel.vue | 58 +++++++++- .../common/mixin/alertLabelMixin.js | 3 +- .../src/components/common/mixin/dataList.js | 109 ++++++++++++++++++ .../common/rightBox/recordRuleBox.vue | 46 +++++--- .../src/components/common/searchInput.vue | 8 ++ .../components/common/searchSelectInfo.vue | 40 +++++++ .../common/table/settings/recordRuleTable.vue | 64 ++++++---- .../src/components/page/config/recordRule.vue | 53 ++++++--- 10 files changed, 337 insertions(+), 61 deletions(-) diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.css b/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.css index 7b6a23e1c..abd57e32f 100644 --- a/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.css +++ b/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.css @@ -1 +1 @@ -.right-box-record-rule .metric-selector-input-box .input-box{width:100%;height:100%}.right-box-record-rule .metric-selector-input-box .input-box .not-fixed-height.no-resize.no-close{width:100%;height:100%}.right-box-record-rule .promqlInput .metric-selector-title{width:80px}.right-box-record-rule .promqlInput .metric-selector-input-box{width:calc(100% - 92px) !important}.right-box-record-rule .promqlInput .cm-editor.ͼ1.ͼ2.ͼo.cm-focused{height:100%}.right-box-record-rule .promqlInput .cm-editor.ͼ1.ͼ2.ͼo{height:100%}.right-box-record-rule .promqlInput .cm-content.cm-lineWrapping{display:flex;align-items:center}.right-box-record-rule .silence-matchers-value{width:100%}.right-box-record-rule .param-box-row-symbol{padding-left:20px} +.right-box-record-rule .metric-selector-input-box .input-box{width:100%;height:100%}.right-box-record-rule .metric-selector-input-box .input-box .not-fixed-height.no-resize.no-close{width:100%;height:100%}.right-box-record-rule .metric-selector-input-box .input-box .el-textarea .el-input__count{right:5px !important}.right-box-record-rule .promqlInput .cm-editor.ͼ1.ͼ2.ͼo.cm-focused{height:100%}.right-box-record-rule .promqlInput .cm-editor.ͼ1.ͼ2.ͼo{height:100%}.right-box-record-rule .promqlInput .cm-content.cm-lineWrapping{display:flex;align-items:center}.right-box-record-rule .silence-matchers-value{width:100%}.right-box-record-rule .param-box-row-symbol{padding-left:20px} diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.scss index d7e4ecb45..afa59159c 100644 --- a/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.scss +++ b/nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.scss @@ -7,15 +7,18 @@ width: 100%; height: 100%; } + .el-textarea .el-input__count{ + right: 5px !important; + } } } .promqlInput{ - .metric-selector-title{ - width: 80px; - } - .metric-selector-input-box{ - width: calc(100% - 92px) !important; - } + // .metric-selector-title{ + // width: 80px; + // } + // .metric-selector-input-box{ + // width: calc(100% - 92px) !important; + // } .cm-editor.ͼ1.ͼ2.ͼo.cm-focused{ height: 100%; } diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue index 3a09a45ff..be446cc9b 100644 --- a/nezha-fronted/src/components/common/alert/alertLabel.vue +++ b/nezha-fronted/src/components/common/alert/alertLabel.vue @@ -36,7 +36,7 @@ {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
- +
+ + +
+
+
ID
+
+ {{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }} +
+
+
+
{{$t('overall.name')}}
+
{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}
+ +
+
+
{{ $t("overall.type") }}
+
+ {{ alertLabelData && alertLabelData.type == "1" ? $t('overall.metric') : $t("overall.logs")}} +
+
+
+
{{ $t("config.exprTemp.expression") }}
+
+ {{ alertLabelData && alertLabelData.expr ? alertLabelData.expr : "--" }} +
+
+
+
{{ $t("config.assetLabel.interval") }}
+
+ {{ alertLabelData && alertLabelData.inr ? alertLabelData.inr : "--" }} +
+
+
+
{{ $t("overall.remark") }}
+
+ {{ alertLabelData && alertLabelData.remark ? alertLabelData.remark : "--" }} +
+
+
+
{{ $t("overall.state") }}
+
+
+ {{ alertLabelData && alertLabelData.state == "1" ? $t("overall.enabled") : $t("overall.disabled")}} +
+
+
@@ -892,6 +942,10 @@ export default { this.loading = false this.alertLabelData = this.that } + if (this.type === 'recordRule') { + this.loading = false + this.alertLabelData = this.that + } const weekDays = this.getWeeksTime() if (this.trendTimer) { clearTimeout(this.trendTimer) @@ -954,6 +1008,8 @@ export default { return 'nz-icon-Alertrule' case 'user': return 'nz-icon-user1' + case 'recordRule': + return 'nz-icon-Alertrule' } return 'nz-icon-module5' }, diff --git a/nezha-fronted/src/components/common/mixin/alertLabelMixin.js b/nezha-fronted/src/components/common/mixin/alertLabelMixin.js index c9cae186c..ea03f866f 100644 --- a/nezha-fronted/src/components/common/mixin/alertLabelMixin.js +++ b/nezha-fronted/src/components/common/mixin/alertLabelMixin.js @@ -39,7 +39,7 @@ export default { this.alertLabelObj = item this.alertLabelType = type } - this.$set(item[type], 'loading', loading) + this.$set(item, 'loading', loading) } this.timer = setTimeout(() => { this.alertLabelShow = loading @@ -61,6 +61,7 @@ export default { case 'project': case 'dc': case 'user': + case 'recordRule': return false default: return true } diff --git a/nezha-fronted/src/components/common/mixin/dataList.js b/nezha-fronted/src/components/common/mixin/dataList.js index e13550b2d..d84e73ec7 100644 --- a/nezha-fronted/src/components/common/mixin/dataList.js +++ b/nezha-fronted/src/components/common/mixin/dataList.js @@ -1002,6 +1002,115 @@ export default { jsonKey: 'valnum' } } + } else if (path === 'recordRule') { + searchKeys = { + // key: path 键 + // value: vue set 参数 + pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' }, + pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' }, + orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' }, + ids: { + target: this.searchLabel, + isSearchInput: true, + propertyName: 'ids', + type: 'string', + defaultJson: { + disabled: false, + label: 'ids', + name: 'ID', + type: 'input', + val: '' + }, + jsonKey: 'val' + }, + state: { + target: this.searchLabel, + isSearchInput: true, + propertyName: 'state', + type: 'Number', + defaultJson: { + disabled: false, + label: 'recordState', + name: 'State', + readonly: true, + type: 'select', + val: '' + }, + jsonKey: 'val' + }, + name: { + target: this.searchLabel, + isSearchInput: true, + propertyName: 'name', + type: 'string', + defaultJson: { + disabled: false, + id: 'name', + label: 'name', + name: 'Name', + type: 'input', + val: '' + }, + jsonKey: 'val' + }, + type: { + target: this.searchLabel, + isSearchInput: true, + propertyName: 'type', + type: 'Number', + defaultJson: { + disabled: false, + label: 'recordType', + name: 'Type', + readonly: true, + type: 'select', + val: '' + }, + jsonKey: 'val' + }, + expr: { + target: this.searchLabel, + isSearchInput: true, + propertyName: 'expr', + type: 'string', + defaultJson: { + disabled: false, + label: 'expr', + name: 'Expression', + type: 'input', + val: '' + }, + jsonKey: 'val' + }, + starrd: { + target: this.searchLabel, + isSearchInput: true, + propertyName: 'starrd', + type: 'Number', + defaultJson: { + disabled: false, + label: 'starrd', + name: 'Starrd', + type: 'select', + val: '' + }, + jsonKey: 'val' + }, + buildIn: { + target: this.searchLabel, + isSearchInput: true, + propertyName: 'buildIn', + type: 'Number', + defaultJson: { + disabled: false, + label: 'buildIn', + name: 'buildIn', + type: 'select', + val: '' + }, + jsonKey: 'val' + } + } } this.initQueryFromPath(searchKeys) }, diff --git a/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue b/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue index f9bbeb10c..0cd2544f0 100644 --- a/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue +++ b/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue @@ -69,7 +69,7 @@ - + @@ -195,8 +195,15 @@ export default { this.editRecordRule.labels.forEach(item => { obj[item.label] = item.value }) - this.editRecordRule.labels = JSON.stringify(obj) - const params = { ...this.editRecordRule } + + const params = { + ...this.editRecordRule, + state: Number(this.editRecordRule.state), + type: Number(this.editRecordRule.type), + inr: Number(this.editRecordRule.inr), + labels: this.editRecordRule.labels[0].label != '' ? JSON.stringify(obj) : {} + } + // 处理exp if (!this.expressions[0]) { this.prevent_opt.save = false @@ -205,7 +212,6 @@ export default { } if (valid) { this.prevent_opt.save = true - console.log(params) if (this.editRecordRule.id) { this.$put('/record/rule', params).then(response => { this.prevent_opt.save = false @@ -246,15 +252,15 @@ export default { }, metricChange (val) { this.editRecordRule.expr = val + }, + labelsSort (obj) { + const labels = JSON.parse(JSON.parse(JSON.stringify(obj))) + const result = [] + for (const key in labels) { + result.push({ label: key, value: labels[key] }) + } + return result } - // labelsSort (obj) { - // const labels = this.$lodash.cloneDeep(obj) - // const result = [] - // for (const key in labels) { - // result.push({ label: key, value: labels[key] }) - // } - // return result - // } }, watch: { recordRule: { @@ -262,7 +268,13 @@ export default { immediate: true, handler (n, o) { this.isEdit = true - const obj = this.$lodash.cloneDeep(n) + this.editRecordRule = { + ...n, + type: n.type + '', + inr: n.inr + '', + labels: this.labelsSort(n.labels), + state: n.state + '' + } // expression if (this.editRecordRule.id || this.editRecordRule.name) { this.expressions = [this.editRecordRule.expr] @@ -274,7 +286,13 @@ export default { }) }) } - this.editRecordRule = Object.assign(this.editRecordRule, obj) + } + }, + 'editRecordRule.type': { + deep: true, + immediate: true, + handler (n, o) { + if (n == 2) { this.showMetrics = false } else { this.showMetrics = true } } } } diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue index f315b868c..b5eb933eb 100644 --- a/nezha-fronted/src/components/common/searchInput.vue +++ b/nezha-fronted/src/components/common/searchInput.vue @@ -902,6 +902,14 @@ export default { objectInfo.statuses = val.valnum } else if (val.label === 'ipamState') { objectInfo.state = val.valnum + } else if (val.label === 'recordState') { + objectInfo.state = val.valnum + } else if (val.label === 'starrd') { + objectInfo.starrd = val.valnum + } else if (val.label === 'recordType') { + objectInfo.type = val.valnum + } else if (val.label === 'buildIn') { + objectInfo.buildIn = val.valnum } else if (typeof (val.valnum) === 'undefined' || val.valnum == '') { this.selectInfoList[val.label].forEach(item => { if (item.label === val.val) { diff --git a/nezha-fronted/src/components/common/searchSelectInfo.vue b/nezha-fronted/src/components/common/searchSelectInfo.vue index 5c58a5fae..20beb9867 100644 --- a/nezha-fronted/src/components/common/searchSelectInfo.vue +++ b/nezha-fronted/src/components/common/searchSelectInfo.vue @@ -186,6 +186,46 @@ const searchSelectInfo = { // value: 传给后台的值；label：显示给用 label: i18n.t('overall.disabled') } ], + recordState: [ + { + value: 1, + label: i18n.t('overall.enabled') + }, + { + value: 0, + label: i18n.t('overall.disabled') + } + ], + starrd: [ + { + value: 1, + label: i18n.t('overall.starred') + }, + { + value: 0, + label: i18n.t('overall.unstarred') + } + ], + recordType: [ + { + value: 1, + label: i18n.t('overall.metric') + }, + { + value: 2, + label: i18n.t('overall.logs') + } + ], + buildIn: [ + { + value: 1, + label: i18n.t('overall.buildIn') + }, + { + value: 0, + label: i18n.t('overall.unbuildIn') + } + ], ack: [ { value: '1', diff --git a/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue b/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue index 370b43f59..d6b5acad7 100644 --- a/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue +++ b/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue @@ -43,12 +43,12 @@
- - {{ - scope.row[item.prop] || "-" - }} +
+
+ {{ $t('overall.enabled') }} +
+
+
+ {{ $t('overall.disabled') }} +
+ + @@ -122,9 +126,9 @@ :id="alertLabelId" :that="alertLabelObj" :type="alertLabelType" - :alert-table-dialog="chartAlertList" @tipHover='tipHover' > +
@@ -132,8 +136,6 @@ import table from '@/components/common/mixin/table' import nzAlertTag from '../../../page/alert/nzAlertTag' import alertLabelMixin from '@/components/common/mixin/alertLabelMixin' -// import { calcDurationByStringTimeB } from '@/components/common/js/tools' -// import { sameLabels } from '@/components/common/js/constants' export default { name: 'recordRuleTable', components: { @@ -158,23 +160,25 @@ export default { label: this.$t('overall.name'), prop: 'name', show: true, - minWidth: 150 + minWidth: 150, + sortable: 'custom' }, { label: this.$t('overall.type'), prop: 'type', show: true, - minWidth: 150 + minWidth: 150, + sortable: 'custom' }, { label: this.$t('config.exprTemp.expression'), - prop: 'expression', + prop: 'expr', show: true, width: 300 }, { label: this.$t('config.assetLabel.interval'), - prop: 'interval', + prop: 'inr', show: true, width: 300 }, @@ -195,14 +199,32 @@ export default { label: this.$t('overall.state'), prop: 'state', show: true, - width: 150 + width: 150, + sortable: 'custom' } ] } }, computed: { + tagType () { + return (key) => { + if (key == 'asset' || key == 'module' || key == 'project' || key == 'dc' || key == 'endpoint') { + return 'normal' + } else { + return 'info' + } + } + } }, methods: { + labelsSort (obj) { + const labels = JSON.parse(JSON.parse(JSON.stringify(obj))) + const result = [] + for (const key in labels) { + result.push({ label: key, value: labels[key] }) + } + return result + } } } diff --git a/nezha-fronted/src/components/page/config/recordRule.vue b/nezha-fronted/src/components/page/config/recordRule.vue index ad4073a6c..e85834931 100644 --- a/nezha-fronted/src/components/page/config/recordRule.vue +++ b/nezha-fronted/src/components/page/config/recordRule.vue @@ -106,6 +106,42 @@ export default { type: 'input', label: 'ids', disabled: false + }, + { + name: 'Name', + type: 'input', + label: 'name', + disabled: false + }, + { + name: 'Type', + type: 'select', + label: 'recordType', + disabled: false + }, + { + name: 'Expression', + type: 'input', + label: 'expr', + disabled: false + }, + { + name: 'State', + type: 'select', + label: 'recordState', + disabled: false + }, + { + name: 'Starrd', + type: 'select', + label: 'starrd', + disabled: false + }, + { + name: 'Build_in', + type: 'select', + label: 'buildIn', + disabled: false } ] }, @@ -125,23 +161,6 @@ export default { mounted () { }, methods: { - edit (u) { - this.$get(`${this.url}/${u.id}`).then(response => { - if (response.code === 200) { - this.object = response.data - this.object.labels = this.labelsSort(response.data.labels) - this.rightBox.show = true - } - }) - }, - labelsSort (obj) { - const labels = this.$lodash.cloneDeep(obj) - const result = [] - for (const key in labels) { - result.push({ label: key, value: labels[key] }) - } - return result - } }, created () { } From 6951c0958277b70b30edd35c1e505cd1a99a848a Mon Sep 17 00:00:00 2001 From: likexuan Date: Tue, 9 Aug 2022 17:55:27 +0800 Subject: [PATCH 7/8] =?UTF-8?q?feat=20:=20recordRule=20=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91=20labels=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E5=A4=84=E7=90=86=E6=96=B9=E6=B3=95=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/rightBox/recordRuleBox.vue | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue b/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue index 0cd2544f0..975978d89 100644 --- a/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue +++ b/nezha-fronted/src/components/common/rightBox/recordRuleBox.vue @@ -129,7 +129,7 @@