gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev-3.5' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.5-topology

Browse Source 
# Conflicts:
#	nezha-fronted/src/assets/css/common/checkbox.scss
This commit is contained in:
zhangyu
2022-08-10 11:35:07 +08:00
parent 50ec4a6680 c2055feaac
commit fa6d3fe15d
25 changed files with 1443 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
nezha-fronted/src/assets/css/common.scss
View File

@@ -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 {

12
nezha-fronted/src/assets/css/common/checkbox.scss
View File

@@ -7,13 +7,15 @@
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: $--color-primary !important;
}
.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-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{
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;

1
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -1,4 +1,5 @@
.temp-dropdown{
display: none;
border: none;
}
.my-loading-parent--relative {

1
nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.css Normal file
View File

@@ -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 .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}

39
nezha-fronted/src/assets/css/components/common/rightBox/recordRuleBox.scss Normal file
View File

@@ -0,0 +1,39 @@
.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%;
}
.el-textarea .el-input__count{
right: 5px !important;
}
}
}
.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;
}
}

1
nezha-fronted/src/assets/css/components/index.scss
View File

@@ -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';

39
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -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;

56
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -712,6 +712,56 @@
</div>
</div>
</div>
<!-- type === 'recordRule' -->
<div class="alert-label-info" v-if="type === 'recordRule'" v-my-loading="loading">
<div class="alert-label-box">
<div class="alert-label-title">ID</div>
<div class="alert-label-value">
{{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
</div>
</div>
<div class="document-copy-block">
<div class="alert-label-title">{{$t('overall.name')}}</div>
<div class="alert-label-value document-copy-text">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
<i class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(alertLabelData.name)" :title="$t('overall.copyText')"></i>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("overall.type") }}</div>
<div class="alert-label-value">
{{ alertLabelData && alertLabelData.type == "1" ? $t('overall.metric') : $t("overall.logs")}}
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("config.exprTemp.expression") }}</div>
<div class="alert-label-value">
{{ alertLabelData && alertLabelData.expr ? alertLabelData.expr : "--" }}
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("config.assetLabel.interval") }}</div>
<div class="alert-label-value">
{{ alertLabelData && alertLabelData.inr ? alertLabelData.inr : "--" }}
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("overall.remark") }}</div>
<div class="alert-label-value">
{{ alertLabelData && alertLabelData.remark ? alertLabelData.remark : "--" }}
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("overall.state") }}</div>
<div class="alert-label-value">
<div
v-if="alertLabelData"
:style="alertLabelData.state == '1' ? `background: ${userColor}` : `background: ${unUserColor}`"
class="active-icon"
></div>
{{ alertLabelData && alertLabelData.state == "1" ? $t("overall.enabled") : $t("overall.disabled")}}
</div>
</div>
</div>
</div>
</template>
@@ -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'
},

11
nezha-fronted/src/components/common/bottomBox/bottomBox.vue
View File

@@ -62,6 +62,8 @@
<scrape-endpoint v-if="from === fromRoute.agent && targetTab === 'agent'" :from="from" :obj="obj" :tabs="tabs.agent" @changeTab="changeTab" :targetTab.sync="targetTab"></scrape-endpoint>
<!-- ipam -->
<ip-details v-if="from === fromRoute.ipam && targetTab === 'ipam'" :from="from" :obj="obj" :tabs="tabs.ipam" @changeTab="changeTab" :targetTab.sync="targetTab"></ip-details>
<!-- recordRule 下滑-->
<record-rule-eval-log v-if="from === fromRoute.recordRule && targetTab === 'recordRule'" :from="from" :obj="obj" :tabs="tabs.recordRule" @changeTab="changeTab" :targetTab.sync="targetTab"></record-rule-eval-log>
<!--alertRule Tab-->
<alertMessageTabNew v-if="from === fromRoute.alertSilence && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertSilence" @changeTab="changeTab" :targetTab.sync="targetTab"></alertMessageTabNew>
</div>
@@ -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 }
]

121
nezha-fronted/src/components/common/bottomBox/tabs/recordRuleEvalLog.vue Normal file
View File

@@ -0,0 +1,121 @@
<template>
<nz-bottom-data-list
:showTitle='showTitle'
:obj='obj'
:api="url"
:custom-table-title.sync="tools.customTableTitle"
:layout="['elementSet']"
:search-msg="searchMsg"
:tabs="tabs"
:targetTab="targetTab"
:showPagination="false"
@search="search"
@changeTab="changeTab"
>
<template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
<template v-slot>
<alertRuleEvalLogTable
ref="dataTable"
:orderByFa="'id'"
v-my-loading="tools.loading"
:loading="tools.loading"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="subTableHeight"
:now-time="nowTime"
:table-data="tableData"
:terminaLogTab="true"
@del="del"
@edit="edit"
@orderBy="tableDataSort"
@reload="getTableData"
@selectionChange="selectionChange"></alertRuleEvalLogTable>
</template>
<template v-slot:pagination>
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</template>
</nz-bottom-data-list>
</template>
<script>
import dataListMixin from '@/components/common/mixin/dataList'
import subDataListMixin from '@/components/common/mixin/subDataList'
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
import alertRuleEvalLogTable from '@/components/common/table/alert/alertRuleEvalLogTable'
import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
export default {
name: 'recordRuleEvalLog',
mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
components: {
nzBottomDataList,
alertRuleEvalLogTable
},
props: {
obj: Object,
showTitle: {
type: Boolean,
default: true
}
},
watch: {
obj (n) {
this.searchLabel = { id: n.id }
this.getTableData()
}
},
data () {
return {
url: 'record/rule/1/evalLog',
tableId: 'recordRuleEvalLogTable', // 需要分页的table的id，用于记录每页数量
searchMsg: { // 给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [
{
id: 11,
name: this.$t('config.terminallog.loginHost'),
type: 'input',
label: 'host',
disabled: false
}
]
},
nowTime: '',
searchLabel: { id: this.obj.id }
}
},
methods: {
getTableData (params) {
if (params && Object.keys(params).length > 0) {
for (const key in params) {
this.$set(this.searchLabel, key, params[key])
}
}
if (this.orderBy) {
this.$set(this.searchLabel, 'orderBy', this.orderBy)
} else {
delete this.searchLabel.orderBy
}
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', -1)
this.tools.loading = true
if (this.obj) {
this.$set(this.searchLabel, 'id', this.obj.id)
}
this.$get('record/rule/' + this.obj.id + '/evalLog').then(response => {
this.tools.loading = false
this.nowTime = this.utcTimeToTimezoneStr(response.time)
if (response.code === 200) {
this.tableData = response.data
if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap)
})
}
}
})
}
}
}
</script>

1
nezha-fronted/src/components/common/js/constants.js
View File

@@ -360,6 +360,7 @@ export const fromRoute = {
expressionTemplate: 'expressionTemplate',
user: 'user',
agent: 'agent',
recordRule: 'recordRule',
dc: 'dc',
role: 'role',
project: 'project',

3
nezha-fronted/src/components/common/mixin/alertLabelMixin.js
View File

@@ -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
}

109
nezha-fronted/src/components/common/mixin/dataList.js
View File

@@ -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)
},

161
nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
View File

@@ -24,7 +24,66 @@
</el-dropdown-menu>
<el-dialog :close-on-click-modal="importBox.type!=3" destroy-on-close :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
<div v-if="importBox.type == 1">
<!-- 新版导入 -->
<div v-if="importBox.type == 1&&importType">
<div class="upload-body">
<el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false" :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls" action="" class="import-upload" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
<div class="el-upload__tip" >{{$t('overall.importSupport')}}</div>
</el-upload>
</div>
<div class="import-select">
<div v-if="showEexisted" class="exists">
<span>{{$t('overall.existed')}}</span>
<el-select v-model="importBox.existed" style="flex:1" size="medium" popper-class="exists-select">
<el-option
v-for="item in existedArr"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</div>
<ul class="import-select-list">
<li v-if="showIgnoreError" class="import-select-item">
<el-checkbox v-model="importBox.ignoreError">{{$t('overall.ignoreError')}}</el-checkbox>
</li>
<li v-if="showSyncDashboard" class="import-select-item">
<el-checkbox v-model="importBox.syncDashboard">{{$t('overall.syncDashboard')}}</el-checkbox>
</li>
<li v-if="showSyncEndpoint" class="import-select-item">
<el-checkbox v-model="importBox.syncEndpoint">{{$t('overall.syncEndpoint')}}</el-checkbox>
</li>
</ul>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: right;">
<el-popover
placement="bottom-start"
trigger="click">
<div class="template-pop">
<p style="margin-bottom:8px">{{$t('overall.selectTemplate')}}</p>
<el-radio-group v-model="importBox.templateFormat" size="small">
<el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index" @click.native="downloadTemplate(item.value)">{{item.name}}</el-radio-button>
</el-radio-group>
</div>
<button slot="reference" :id="id+'-xlsx-import-template'" class="nz-btn el-button el-button--default el-button--small">
<span>{{$t('upload.template')}}</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</button>
</el-popover>
<button :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
<span>{{$t('overall.importExcel')}}</span>
</button>
<button :id="id+'-xlsx-import-esc'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
<span>{{$t('overall.cancel')}}</span>
</button>
</div>
</div>
</div>
<!-- 导入 -->
<div v-else-if="importBox.type == 1">
<div class="upload-body">
<el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false" :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls" action="" class="upload-demo" drag>
<div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
@@ -34,19 +93,21 @@
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: right;">
<button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
<button :id="id+'-xlsx-import-template'" class="nz-btn el-button el-button--default el-button--small" @click="downloadTemplate()">
<span>{{$t('upload.template')}}</span>
</button>
<button :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
<span>{{$t('overall.importExcel')}}</span>
</button>
<button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
<button :id="id+'-xlsx-import-esc'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
<span>{{$t('overall.cancel')}}</span>
</button>
</div>
</div>
</div>
<div v-if="importBox.type == 2">
<!-- 导出 -->
<div v-else-if="importBox.type == 2">
<div class="upload-body" style="height: 200px">
<div class="export-box">
<span class="export-title">{{$t('export.records')}}</span>
@@ -63,15 +124,17 @@
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns">
<button :id="id+'-xlsx-import-export'" class="nz-btn nz-btn-size-normal nz-btn-style-normal-new" @click="exportData">
<button :id="id+'-xlsx-import-export'" class="nz-btn el-button--small nz-btn-style-normal" @click="exportData">
<span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
</button>
<button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
<button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--small el-button--default" @click="closeDialog">
<span>{{$t('overall.close')}}</span>
</button>
</div>
</div>
</div>
<!-- 导入结果 -->
<div v-if="importBox.type==3">
<div class="upload-body result-body">
<div v-if="importResult&&importResult.failNum">
@@ -114,10 +177,10 @@
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns">
<button :id="id+'-xlsx-import-rollback'" class="nz-btn nz-btn-size-normal nz-btn-style-error" @click="rollbackImport">
<button :id="id+'-xlsx-import-rollback'" class="nz-btn el-button el-button--small nz-btn-style-error" @click="rollbackImport">
<span>{{$t('overall.rollbackImport')}}</span>
</button>
<button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
<button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--small el-button--default" @click="closeDialog">
<span>{{$t('overall.close')}}</span>
</button>
</div>
@@ -134,6 +197,8 @@
<script>
import axios from 'axios'
import panelBox from '@/components/common/rightBox/panelBox'
import bus from '@/libs/bus'
import { Number } from '@svgdotjs/svg.js'
let timeout
export default {
name: 'topToolMoreOptions',
@@ -171,11 +236,48 @@ export default {
}
},
computed: {
language () { return this.$store.getters.getLanguage }
language () { return this.$store.getters.getLanguage },
// 显示新版导入
importType () {
const name = this.exportFileName
return name === 'asset'
},
showEexisted () {
const name = this.exportFileName
return name === 'asset'
},
showIgnoreError () {
const name = this.exportFileName
return name === 'asset'
},
showSyncDashboard () {
const name = this.exportFileName
return name === 'asset'
},
showSyncEndpoint () {
const name = this.exportFileName
return name === 'asset'
}
},
data () {
return {
importBox: { show: false, title: this.$t('overall.importExcel'), type: 1, record: 'all', format: 1 },
importBox: {
show: false,
title: this.$t('overall.importExcel'),
type: 1,
record: 'all',
format: 1,
templateFormat: 1, // 模板格式
existed: 1, // 已存在的内容处理方式
ignoreError: Boolean(1), // 遇到错误是否继续导入
syncDashboard: Boolean(1), // 是否同步更新关联的dashboard
syncEndpoint: Boolean(1) // 是否同步更新关联的endpoint
},
existedArr: [
{ name: this.$t('overall.error'), value: 0 },
{ name: this.$t('overall.override'), value: 1 },
{ name: this.$t('overall.ignore'), value: 2 }
],
importFile: null,
importFileList: [],
importResult: null,
@@ -253,7 +355,26 @@ export default {
if (this.importFile && this.importFile.raw) {
this.prevent_opt.import = true
const form = new FormData()
if (this.importType) {
form.append('file', this.importFile.raw)
} else {
form.append('excelFile', this.importFile.raw)
}
if (this.showEexisted) {
form.append('existed', this.importBox.existed)
}
if (this.showIgnoreError) {
const ignoreError = this.importBox.ignoreError ? 1 : 0
form.append('ignoreError', ignoreError)
}
if (this.showSyncDashboard) {
const syncDashboard = this.importBox.syncDashboard ? 1 : 0
form.append('syncDashboard', syncDashboard)
}
if (this.showSyncEndpoint) {
const syncEndpoint = this.importBox.syncEndpoint ? 1 : 0
form.append('syncEndpoint', syncEndpoint)
}
if (this.paramsType) {
form.append('type', this.paramsType)
if (this.paramsType === 'asset' || this.paramsType === 'endpoint') {
@@ -271,6 +392,7 @@ export default {
this.$emit('afterImport', linkId)
this.importBox.type = 3
this.importBox.width = '600px'
this.importBox.title = this.$t('overall.importResult')
} else {
this.$message.error(response.msg)
}
@@ -300,15 +422,19 @@ export default {
this.importBox.value = 1
this.importBox.record = 'all'
this.importBox.format = 1
this.importBox.templateFormat = 1 // 模板格式
this.importBox.existed = 1// 已存在的内容处理方式
this.importBox.ignoreError = Boolean(1) // 遇到错误是否继续导入
this.importBox.syncDashboard = Boolean(1) // 是否同步更新关联的dashboard
this.importBox.syncEndpoint = Boolean(1)// 是否同步更新关联的endpoint
})
}, 200)
},
downloadTemplate () {
downloadTemplate: bus.debounce(function (templateFormat) {
const language = localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文
const fileName = this.exportFileName + '-' + this.$t('overall.template') + '-' + this.getTimeString() + '.xlsx'
let url = null
const param = { language: language }
const param = { language: language, format: templateFormat }
if (this.importUrl.indexOf('/asset/model') > -1) {
url = '/asset/model/template'
} else if (this.importUrl.indexOf('asset') > -1) {
@@ -335,12 +461,14 @@ 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')
}
this.exportExcel(url, param, fileName)
},
}, 50),
formatJson (filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
@@ -595,7 +723,7 @@ export default {
if (refresh) {
this.$emit('afterImport')
}
},
}
},
watch: {
panelLock: {
@@ -607,3 +735,6 @@ export default {
}
}
</script>
<style scoped>
</style>

27
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -12,7 +12,8 @@
v-if="chartConfig.elements"
class="metrics-input-box"
>
<draggable v-model="chartConfig.elements"
<draggable
v-model="chartConfig.elements"
:move="move"
@end="end"
@start="start"
@@ -26,8 +27,8 @@
scroll:true,
filter: '.drag-disabled',
animation: 150,
handle: '.chart-title-content'
}" >
handle: '.drag-sort'
}">
<el-row
:key="index"
class="element-item form-row-item thresholds-from-item"
@@ -68,6 +69,9 @@
<span @click="removeExpression(index - 1)" class="nz-icon-minus-medium" style="margin-right: 5px" :title="$t('overall.delete')">
<i class="nz-icon nz-icon-minus"></i>
</span>
<span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span>
</span>
</div>
<transition name="el-zoom-in-top">
@@ -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()

75
nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
View File

@@ -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: ''
}
)
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
this.$refs[`promql-${index}`][0].metricChange(ex)
this.$refs[`promql-${index}`][0].promqlInputChange(ex)
}
return name
})
})
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])

303
nezha-fronted/src/components/common/rightBox/recordRuleBox.vue Normal file
View File

@@ -0,0 +1,303 @@
<template>
<div class="right-box right-box-record-rule" v-clickoutside="{obj:editRecordRule,func:clickOutside}">
<!-- begin--标题-->
<div class="right-box__header">
<div class="header__title">{{editRecordRule.id ? $t("overall.recordRule.edit") : $t("overall.createRecordRule")}}</div>
<div class="header__operation">
<span v-cancel="{obj: editRecordRule, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
</div>
</div>
<!-- end--标题-->
<!-- begin--表单-->
<div class="right-box__container">
<div class="container__form">
<el-form ref="recordRuleForm" :model="editRecordRule"
:rules="rules" label-position="top" label-width="120px">
<!-- name -->
<el-form-item :label='$t("overall.name")' prop="name">
<el-input
v-model="editRecordRule.name" :placeholder="''"
maxlength="64"
show-word-limit
size="small">
</el-input>
</el-form-item>
<!--type-->
<el-form-item :label="$t('overall.type')" prop="type" >
<el-select v-model="editRecordRule.type" class="right-box__select" clearable placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
<el-option :label="$t('overall.metrics')" value="1">{{$t('overall.metrics')}}</el-option>
<el-option :label="$t('overall.logs')" value="2">{{$t('overall.logs')}}</el-option>
</el-select>
</el-form-item>
<!--expr-->
<el-form-item :label='$t("config.exprTemp.expression")' prop="expr">
<template v-if="showMetrics">
<el-row style="line-height: 32px;">
<promql-input
:from-father-data="true"
:metricOptionsParent="metricOptions"
id="alert-box-input-promql"
ref="promql"
:expression-list.sync="expressions"
:index="0"
:plugins="['metric-selector','metric-input']"
:required="true"
type="metric"
:styleType="3"
@change="metricChange"
></promql-input>
</el-row>
</template>
<template v-else>
<el-row style="line-height: 32px;">
<promql-input
:from-father-data="true"
:metricOptionsParent="metricOptions"
id="record-box-input-promql"
ref="promql"
:expression-list.sync="expressions"
:index="0"
:plugins="['metric-selector','metric-input']"
:required="true"
type="log"
:styleType="3"
@change="metricChange"
></promql-input>
</el-row>
</template>
</el-form-item>
<!-- inr -->
<el-form-item :label='$t("config.assetLabel.interval")' prop="inr">
<el-input v-model="editRecordRule.inr" maxlength="10" show-word-limit :placeholder="''" size="small"></el-input>
</el-form-item>
<!--state-->
<el-form-item :label="$t('overall.state')" prop="state" >
<el-select v-model="editRecordRule.state" class="right-box__select" clearable placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
<el-option :label="$t('overall.disabled')" value="0">{{$t('overall.disabled')}}</el-option>
<el-option :label="$t('overall.enabled')" value="1">{{$t('overall.enabled')}}</el-option>
</el-select>
</el-form-item>
<!-- labels -->
<el-form-item :label='$t("project.endpoint.labels2")' class="matchers" prop="labels">
<div v-for="(item, index) in editRecordRule.labels" :key="index" class="param-box-row">
<el-form-item :prop="'labels.' + index + '.label'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },]" class="param-box-row-key">
<el-input v-model="item.label" class="silence-matchers-name" placeholder="" size="mini"></el-input>
</el-form-item>
<span class="param-box-row-eq" @click="li(item)">=</span>
<el-form-item :prop="'labels.' + index + '.value'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },]" class="param-box-row-value" >
<el-input v-model="item.value" class="silence-matchers-value" placeholder="" size="mini"></el-input>
</el-form-item>
<span :id="'moduel-remove-label-'+index" class="param-box-row-symbol" @click="removeLabels(index)" :title="$t('overall.delete')"><i class="nz-icon nz-icon-shanchu1"></i></span>
</div>
<div class="" style="text-align: center;">
<span id="module-add-label" type="button" @click="addLabels" class="right-box-form-add module-add-label right-box-form-minus-box module-add-label" style="" :title="$t('tip.add')">
<span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
</span>
</div>
</el-form-item>
<!-- remark -->
<el-form-item :label='$t("overall.remark")' class="range-time" prop="remark">
<el-input
v-model="editRecordRule.remark"
maxlength="256"
size="small" :rows="2"
show-word-limit
type="textarea">
</el-input>
</el-form-item>
</el-form>
</div>
</div>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box__footer">
<button v-cancel="{obj:editRecordRule,func:esc}" id="alert-box-esc"
class="footer__btn footer__btn--light">
<span>{{$t('overall.cancel')}}</span>
</button>
<button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save"
class="footer__btn" id="alert-box-save">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
import lodash from 'lodash'
import editRigthBox from '../mixin/editRigthBox'
import { arrLength } from '@/components/common/js/validate'
import promqlInput from '../../page/dashboard/explore/promqlInput'
import promqlInputMixin from '@/components/common/mixin/promqlInput'
export default {
name: 'recordRuleBox',
components: {
'promql-input': promqlInput
},
mixins: [editRigthBox, promqlInputMixin],
props: {
recordRule: Object
},
data () {
return {
showMetrics: true,
expressions: [''],
editRecordRule: {
id: '',
name: '',
type: '',
expr: '',
inr: '',
labels: [{ label: '', value: '' }],
remark: '',
state: ''
},
rules: {
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
type: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
expr: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
labels: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' },
{ validator: arrLength, trigger: 'change' }
],
state: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
]
}
}
},
mounted () {
},
methods: {
clickOutside () {
this.esc(false)
},
esc (refresh) {
this.prevent_opt.save = false
this.$emit('close', refresh)
},
save () {
this.editRecordRule.expr = this.expressions[0]
this.$refs.recordRuleForm.validate((valid) => {
// 处理labels数据
const obj = {}
this.editRecordRule.labels.forEach(item => {
obj[item.label] = item.value
})
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
this.$message.error(this.$t('config.exprTemp.expressionError'))
return
}
if (valid) {
this.prevent_opt.save = true
if (this.editRecordRule.id) {
this.$put('/record/rule', params).then(response => {
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.$message.error(response.msg)
}
this.prevent_opt.save = false
})
} else {
this.$post('record/rule', params).then(response => {
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.$message.error(response.msg)
}
this.prevent_opt.save = false
})
}
} else {
this.prevent_opt.save = false
}
})
},
// 新增label
addLabels () {
this.editRecordRule.labels.push({ label: '', value: '' })
},
// 移除单个Label
removeLabels (index) {
if (this.editRecordRule.labels.length === 1) {
this.editRecordRule.labels = [{ label: '', value: '' }]
}
this.editRecordRule.labels.splice(index, 1)
},
metricChange (val) {
this.editRecordRule.expr = val
},
labelsSort (obj) {
if (typeof obj != 'object') {
const labels = JSON.parse(lodash.cloneDeep(obj))
const result = []
for (const key in labels) {
result.push({ label: key, value: labels[key] })
}
return result
}
return obj
}
},
watch: {
recordRule: {
deep: true,
immediate: true,
handler (n, o) {
this.isEdit = true
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]
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
this.$refs.promql.metricChange(ex)
}
})
})
}
}
},
'editRecordRule.type': {
deep: true,
immediate: true,
handler (n, o) {
if (n == 2) { this.showMetrics = false } else { this.showMetrics = true }
}
}
}
}
</script>

8
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -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) {

40
nezha-fronted/src/components/common/searchSelectInfo.vue
View File

@@ -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',

230
nezha-fronted/src/components/common/table/settings/recordRuleTable.vue Normal file
View File

@@ -0,0 +1,230 @@
<template>
<div>
<el-table
id="recordRuleTable"
ref="dataTable"
:data="tableData"
:height="height"
border
:default-sort="orderBy"
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
>
<el-table-column
:resizable="false"
align="center"
type="selection"
width="55"
>
</el-table-column>
<el-table-column
v-for="(item, index) in customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:sortable="item.sortable"
:width="`${item.width}`"
class="data-column"
>
<template slot="header">
<span class="data-column__span">{{ item.label }}</span>
<div class="col-resize-area"></div>
</template>
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'name'">
<div class="document-copy-block">
<span class="document-copy-text">{{scope.row.name ? scope.row.name : '-'}}</span>
<i v-if="scope.row.name" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row.name)" :title="$t('overall.copyText')"></i>
</div>
</template>
<template v-else-if="item.prop === 'type'">
<template v-if="scope.row[item.prop]">
<template v-if="scope.row[item.prop] === 1">{{$t('overall.metrics')}}</template>
<template v-if="scope.row[item.prop] === 2">{{$t('overall.logs')}}</template>
</template>
<template v-else>{{"-"}}</template>
</template>
<template v-else-if="item.prop === 'expr'">
<div class="document-copy-block">
<span class="document-copy-text">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
<i v-if="scope.row[item.prop]" class="nz-icon nz-icon-override" style="visibility: hidden" @click="onCopy(scope.row[item.prop])" :title="$t('overall.copyText')"></i>
</div>
</template>
<template v-else-if="item.prop === 'inr'">
<template>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</template>
</template>
<template v-else-if="item.prop === 'labels'">
<span v-for="(item1, i) in labelsSort(scope.row.labels)" :key="i">
<span
@mouseenter="labelHover(scope.row, 'recordRule', true, false, $event)"
@mouseleave="labelHover(scope.row, 'recordRule', false, false,)">
<nz-alert-tag
:key="i"
:cursor-point="tagType(item1.label) !== 'info'"
:label="item1.label"
:type="tagType(item1.label)"
:regex="item1.regex"
style="margin: 5px 0 5px 5px">
{{ item1.value }}
</nz-alert-tag>
</span>
</span>
</template>
<template v-else-if="item.prop === 'remark'">
<template>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</template>
</template>
<template v-else-if="item.prop === 'state'">
<div v-if="scope.row[item.prop] == '1'">
<div class="active-icon green-bg inline-block"></div>
{{ $t('overall.enabled') }}
</div>
<div v-else-if="scope.row[item.prop] == '0'">
<div class="active-icon gray-bg inline-block"></div>
{{ $t('overall.disabled') }}
</div>
</template>
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</template>
</template>
</el-table-column>
<el-table-column :resizable="false" :width="operationWidth" fixed="right">
<div slot="header" class="table-operation-title">
{{ $t("overall.option") }}
</div>
<div slot-scope="scope" class="table-operation-items">
<button class="table-operation-item" @click="showBottomBox('recordRule', scope.row)" :title="$t('overall.view')"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" v-has="['record_rule_edit','record_rule_delete']" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more" :title="$t('overall.moreOperations')">
<i class="nz-icon nz-icon-more3"></i>
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
<el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-table-column>
<template slot="empty">
<div v-if="!loading" class="table-no-data">
<svg class="icon" aria-hidden="true">
<use xlink:href="#nz-icon-no-data-list"></use>
</svg>
<div class="table-no-data__title">No results found</div>
</div>
<div v-else>&nbsp;</div>
</template>
</el-table>
<alertLabel
v-if="alertLabelShow"
:id="alertLabelId"
:that="alertLabelObj"
:type="alertLabelType"
@tipHover='tipHover'
></alertLabel>
</div>
</template>
<script>
import table from '@/components/common/mixin/table'
import nzAlertTag from '../../../page/alert/nzAlertTag'
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
export default {
name: 'recordRuleTable',
components: {
nzAlertTag
},
mixins: [table, alertLabelMixin],
props: {
loading: Boolean
},
data () {
return {
/* 表格相关 */
tableTitle: [
{
label: 'ID',
prop: 'id',
show: true,
width: 80,
sortable: 'custom'
},
{
label: this.$t('overall.name'),
prop: 'name',
show: true,
minWidth: 150,
sortable: 'custom'
},
{
label: this.$t('overall.type'),
prop: 'type',
show: true,
minWidth: 150,
sortable: 'custom'
},
{
label: this.$t('config.exprTemp.expression'),
prop: 'expr',
show: true,
width: 300
},
{
label: this.$t('config.assetLabel.interval'),
prop: 'inr',
show: true,
width: 300
},
{
label: this.$t('project.endpoint.labels2'),
prop: 'labels',
show: false,
minWidth: 300,
sortable: 'custom'
},
{
label: this.$t('overall.remark'),
prop: 'remark',
show: true,
width: 300
},
{
label: this.$t('overall.state'),
prop: 'state',
show: true,
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
}
}
}
</script>

9
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -161,15 +161,18 @@
:state-data="stateData"
:type-data="typeData"
@close="closeRightBox"
@refresh="getTableData"></asset-box>
@refresh="getTableData">
</asset-box>
</transition>
<transition name="right-box">
<asset-batch-edit-box v-if="rightBox.batchShow"
<asset-batch-edit-box
v-if="rightBox.batchShow"
:field-group-data="fieldGroupData"
:snmp-credential-data="snmpCredentialData"
:state-data="stateData"
@close="closeRightBox"
@refresh="getTableData"></asset-batch-edit-box>
@refresh="getTableData">
</asset-batch-edit-box>
</transition>
<transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
</transition>

168
nezha-fronted/src/components/page/config/recordRule.vue Normal file
View File

@@ -0,0 +1,168 @@
<template>
<div>
<nz-data-list
ref="dataList"
:api="url"
:custom-table-title.sync="tools.customTableTitle"
:from="fromRoute.recordRule"
:layout="['searchInput', 'elementSet', 'pagination']"
:search-msg="searchMsg"
@search="search"
@getTableData="getTableData"
>
<template v-slot:top-tool-right>
<button id="record-add" v-has="'record_rule_add'" :title="$t('overall.createRecordRule')" class="top-tool-btn" @click.stop="add">
<i class="nz-icon nz-icon-create-square"></i>
</button>
<top-tool-more-options
:delete-objs="batchDeleteObjs"
ref="export"
id="record-rule"
:params="searchLabel"
:permissions="{
import: 'record_rule_add',
export: 'record_rule_edit'
}"
class="top-tool-export margin-l-10 margin-r-10"
export-file-name="record-rule"
export-url="/record/rule/export"
import-url="/record/rule/import"
@afterImport="getTableData"
>
</top-tool-more-options>
</template>
<template v-slot:default="slotProps">
<record-rule-table
ref="dataTable"
:orderByFa="orderBy"
v-my-loading="tools.loading"
:loading="tools.loading"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"
@del="del"
@edit="edit"
@copy="copy"
@orderBy="tableDataSort"
@reload="getTableData"
@selectionChange="selectionChange"
@showBottomBox="
(targetTab, object) => {
$refs.dataList.showBottomBox(targetTab, object);
}
"
></record-rule-table>
</template>
<!-- 分页组件 -->
<template v-slot:pagination>
<Pagination
ref="Pagination"
:pageObj="pageObj"
:tableId="tableId"
@pageNo="pageNo"
@pageSize="pageSize"
></Pagination>
</template>
</nz-data-list>
<transition name="right-box">
<record-rule-box
v-if="rightBox.show"
:record-rule="object"
@close="closeRightBox"
></record-rule-box>
</transition>
</div>
</template>
<script>
import bus from '@/libs/bus'
import nzDataList from '@/components/common/table/nzDataList'
import dataListMixin from '@/components/common/mixin/dataList'
import routerPathParams from '@/components/common/mixin/routerPathParams'
import recordRuleTable from '@/components/common/table/settings/recordRuleTable'
import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
import recordRuleBox from '@/components/common/rightBox/recordRuleBox'
// import deleteButton from '@/components/common/deleteButton'
export default {
name: 'recordRule',
components: {
recordRuleTable,
// deleteButton,
nzDataList,
topToolMoreOptions,
recordRuleBox
},
mixins: [dataListMixin, routerPathParams],
data () {
return {
url: 'record/rule',
tableId: 'recordRuleTable',
searchMsg: { // 给搜索框子组件传递的信息
searchLabelList: [
{
name: 'ID',
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
}
]
},
// 创建修改相关
blankObject: {
id: '',
name: '',
type: '',
expr: '',
inr: '',
labels: [{ label: '', value: '' }],
remark: '',
state: ''
}
}
},
mounted () {
},
methods: {
},
created () {
}
}
</script>

22
nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
View File

@@ -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: {

6
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -713,13 +713,17 @@ export default {
newDoc (val) {
// console.log('doc', val)
},
promqlInputCahnge (val) {
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 = {}

4
nezha-fronted/src/router/index.js
View File

@@ -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)