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

fix: 修复alertmsg的rule弹框不显示的问题

Browse Source
This commit is contained in:
chenjinsong
2021-05-21 19:28:50 +08:00
parent a202a88785
commit 13b0454d00
5 changed files with 266 additions and 1399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
nezha-fronted/src/components/common/alert/alertRuleInfo.vue
View File

@@ -3,19 +3,24 @@
<div class="alert-rule-info" > <div class="alert-rule-info" >
<div class="alert-rule-box"> <div class="alert-rule-box">
<div class="alert-rule-title">ID</div> <div class="alert-rule-title">ID</div>
<div class="alert-rule-value">{{alertRuleData?alertRuleData.id:''}}</div> <div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : ''}}</div>
</div>
<!--<div class="alert-rule-box">-->
<!--<div class="alert-rule-title">ID</div>-->
<!--<div class="alert-rule-value">{{alertRuleData.id}}</div>-->
<!--</div>-->
<div class="alert-rule-box">
<div class="alert-rule-title">Expression</div>
<div class="alert-rule-value">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
</div> </div>
<div class="alert-rule-box"> <div class="alert-rule-box">
<div class="alert-rule-title">Level</div> <div class="alert-rule-title">{{$t('alert.alertName')}}</div>
<div class="alert-rule-value severity"> <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : ''}}</div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
<div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : ''}}</div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.config.threshold')}}</div>
<div class="alert-rule-value">{{alertRuleData.threshold ? alertRuleData.threshold : ''}}</div>
</div>
<div class="alert-rule-box">
<div class="alert-rule-title">{{$t('alert.severity')}}</div>
<div class="alert-rule-value">{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : ''}}</div>
<!-- <div class="alert-rule-value severity">
<span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1"> <span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1">
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P1'}).label}} {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P1'}).label}}
</span> </span>
@@ -25,7 +30,7 @@
<span v-if="alertRuleData && alertRuleData.severity === 'P3'" class="P3"> <span v-if="alertRuleData && alertRuleData.severity === 'P3'" class="P3">
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P3'}).label}} {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P3'}).label}}
</span> </span>
</div> </div>-->
</div> </div>
</div> </div>
</div> </div>
@@ -38,23 +43,9 @@ export default {
props: { props: {
id: {}, id: {},
messageLoad: {}, messageLoad: {},
that: {} that: {},
severityData: Array
}, },
/* watch:{
messageLoad:{
handler:function(){
this.$get('/alert/rule?id='+this.id).then((res)=>{
if(res.msg==='success'){
this.loading=false;
this.alertRuleData=res.data.list[0];
} else{
this.$message.error(res.msg);
}
})
},
deep:true
}
}, */
data () { data () {
return { return {
loading: true, loading: true,
@@ -72,12 +63,12 @@ export default {
if (position.top + elHeight > clientHeight) { if (position.top + elHeight > clientHeight) {
return { return {
left: `${position.left + position.width + 20}px`, left: `${position.left + position.width + 20}px`,
top: `${position.top - elHeight - 20}px` top: `${position.top - elHeight - 80}px`
} }
} else { } else {
return { return {
left: `${position.left + position.width + 20}px`, left: `${position.left + position.width + 20}px`,
top: `${position.top - 20}px` top: `${position.top - 80}px`
} }
} }
} }
@@ -105,10 +96,10 @@ export default {
} }
}, },
mounted () { mounted () {
this.$get('/alert/rule?id=' + this.id).then((res) => { this.$get('/alert/rule/' + this.id).then((res) => {
if (res.msg === 'success') { if (res.msg === 'success') {
this.loading = false this.loading = false
this.alertRuleData = res.data.list[0] this.alertRuleData = res.data
} else { } else {
this.$message.error(res.msg) this.$message.error(res.msg)
} }
@@ -139,7 +130,7 @@ export default {
border-style: dashed solid dashed dashed; border-style: dashed solid dashed dashed;
border-color: transparent #fff transparent transparent; border-color: transparent #fff transparent transparent;
position: absolute; position: absolute;
top: 20px; top: 100px;
left: 0; left: 0;
transform: translate(-100%, -50%); transform: translate(-100%, -50%);
} }
@@ -163,7 +154,7 @@ export default {
border-style: dashed solid dashed dashed; border-style: dashed solid dashed dashed;
border-color: transparent #fff transparent transparent; border-color: transparent #fff transparent transparent;
position: absolute; position: absolute;
bottom: 20px; bottom: 95px;
left: 0; left: 0;
transform: translate(-100%, -50%); transform: translate(-100%, -50%);
} }

447
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -2,7 +2,7 @@
<div class="right-box right-box-module" v-clickoutside="{obj:editModule,func:clickOutside}"> <div class="right-box right-box-module" v-clickoutside="{obj:editModule,func:clickOutside}">
<div class="right-box__header"> <div class="right-box__header">
<!-- begin--标题--> <!-- begin--标题-->
<div class="right-box-title">{{editModule.id ? $t("project.module.editModule") : $t("project.module.createModule")}}</div> <div class="header__title">{{editModule.id ? $t("project.module.editModule") : $t("project.module.createModule")}}</div>
<!-- end--标题--> <!-- end--标题-->
<div class="header__operation"> <div class="header__operation">
<span v-cancel="{obj: editModule, func: esc}"><i class="nz-icon nz-icon-close"></i></span> <span v-cancel="{obj: editModule, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
@@ -10,250 +10,237 @@
</div> </div>
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box-form-box right-box__container" ref="scrollbar"> <div class="right-box__container">
<el-form class="right-box-form right-box-form-left" :model="editModule" label-position = "top" label-width="120px" :rules="rules" ref="moduleForm"> <div class="container__form">
<!--name--> <el-form ref="moduleForm" :model="editModule" :rules="rules" label-position="top" label-width="120px">
<el-form-item :label='$t("project.module.moduleName")' prop="name" label-width="125px"> <!--name-->
<el-input placeholder="" maxlength="64" show-word-limit v-model="editModule.name" size="small" id="module-box-input-name"></el-input> <el-form-item :label='$t("project.module.moduleName")' label-width="125px" prop="name">
</el-form-item> <el-input id="module-box-input-name" v-model="editModule.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
<!--project--> </el-form-item>
<el-form-item :label='$t("project.project.projectName")' prop="projectId"> <!--project-->
<el-select value-key="id" popper-class="config-dropdown" v-model="editModule.projectId" placeholder="" size="small" id="module-box-input-project" :disabled="!!editModule.id"> <el-form-item :label='$t("project.project.projectName")' prop="projectId">
<el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option> <el-select id="module-box-input-project" v-model="editModule.projectId" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
</el-select> <el-option v-for="item in projectList" :id="'module-project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-form-item> </el-select>
<!--remark--> </el-form-item>
<el-form-item :label='$t("project.module.description")' prop="remark"> <!--remark-->
<el-input <el-form-item :label='$t("project.module.description")' prop="remark">
type="textarea" <el-input
placeholder="" id="module-box-input-remark"
maxlength="1024" v-model="editModule.remark"
v-model="editModule.remark" :autosize="{ minRows: 1, maxRows: 6}"
size="small" class="not-fixed-height no-resize"
:autosize="{ minRows: 1, maxRows: 6}" maxlength="1024"
class="not-fixed-height no-resize" placeholder=""
id="module-box-input-remark"></el-input> size="small"
</el-form-item> type="textarea"></el-input>
</el-form-item>
<!--type--> <!--type-->
<el-form-item :label='$t("project.endpoint.type")' prop="type"> <el-form-item :label='$t("project.endpoint.type")' prop="type">
<el-select value-key="id" popper-class="config-dropdown" v-model="editModule.type" placeholder="" size="small" id="module-box-input-type" @change="changeAuthType" :disabled="!!editModule.id"> <el-select id="module-box-input-type" v-model="editModule.type" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
<el-option :id="'module-type-'+item.id" v-for="item in typetList" :key="item.value" :label="item.name" :value="item.value"></el-option> <el-option v-for="item in typetList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- snmp表单 --> <!-- snmp表单 -->
<span class="snmp-form" v-if="editModule.type && editModule.type == 'snmp'"> <span v-if="editModule.type && editModule.type == 'snmp'" class="snmp-form">
<div class="right-box-sub-title">SNMP settings <div class="right-box-sub-title">SNMP settings</div>
<div class="right-box-line"></div>
<el-row>
<el-col :span="6">
<div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
</el-col>
<el-col :span="24">
<el-form-item prop="walk">
<select-walk ref="selectWalk" :currentWalk="editModule.walk" :expandedWalk="expandedWalkData" :placement="'bottom-start'" :walkData="walkData" @selectWalk="selectWalk">
<template v-slot:trigger>
<div class="el-cascader">
<div class="el-input">
<input aria-expanded="false" autocomplete="off" class="el-input__inner" readonly="readonly" type="text">
</div>
<div class="el-cascader__tags">
<div ref="walkScrollbar" style="height: 100%; overflow: auto;">
<span v-for="(item, index) in editModule.walk" :key="index" class="el-tag el-tag--info el-tag--small el-tag--light">
<span v-html="mibName(item)"></span>
<div class="walk-close-box" @click.stop="removeWalk(item)">
<i class="el-tag__close nz-icon nz-icon-close walk-close"></i>
</div>
</span>
</div>
</div>
</div>
</template>
</select-walk>
</el-form-item>
</el-col>
</el-row>
<!--credentials-->
<el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
<el-select id="module-box-input-credentials" v-model="editModule.configs.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
<el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
</span>
<!-- ChartTemplate -->
<el-form-item :label="$t('config.model.ChartTemplate')" prop="ChartTemplate">
<v-selectpage
v-model="editModule.chartIds"
:data="'visual/panel/chart'"
:language="language"
:multiple="true"
:params="{
varType: 2, panelId: 0,
returnChildren:0,groupId:0,
}"
:result-format="resultFormat"
:tb-columns="ChartSearchShowFields"
class="form-control"
key-field="id"
show-field="name"
title="ChartSearch"
@values="(data) => {editModule.chartIds = data.map(d => d.id).join(',')}"
></v-selectpage>
</el-form-item>
<!--Enpoint template-->
<div class="right-box-sub-title">{{ $t("overall.endpointTemplate") }}
<el-tooltip effect="light" placement="top">
<div slot="content">
{{$t('project.module.tip.defaultEndpointSet')}}
<div></div>
{{$t('project.module.tip.relation')}}
</div>
<i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
</div> </div>
<div class="right-box-line"></div> <div class="right-box-line"></div>
<el-row> <el-tabs v-model="activeName">
<el-col :span="6"> <el-tab-pane label="Basic" name="Basic">
<div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div> <!--path-->
</el-col> <el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path">
<el-col :span="24"> <el-input id="module-box-input-path" v-model="editModule.configs.metrics_path" placeholder="" size="small"></el-input>
<el-form-item prop="walk">
<select-walk ref="selectWalk" :walkData="walkData" :expandedWalk="expandedWalkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="editModule.walk">
<template v-slot:trigger>
<div class="el-cascader">
<div class="el-input">
<input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" aria-expanded="false">
</div>
<div class="el-cascader__tags">
<div ref="walkScrollbar" style="height: 100%; overflow: auto;">
<span v-for="(item, index) in editModule.walk" :key="index" class="el-tag el-tag--info el-tag--small el-tag--light">
<span v-html="mibName(item)"></span>
<div class="walk-close-box" @click.stop="removeWalk(item)">
<i class="el-tag__close nz-icon nz-icon-close walk-close"></i>
</div>
</span>
</div>
</div>
</div>
</template>
</select-walk>
</el-form-item> </el-form-item>
</el-col> <!--port-->
</el-row> <el-form-item :label='$t("project.endpoint.port")' class="half-form-item" prop="port">
<!--credentials--> <el-input id="module-box-input-port" v-model.number="editModule.port" placeholder="" size="small"></el-input>
<el-form-item :label='$t("project.endpoint.credentials")' prop="credentials"> </el-form-item>
<el-select value-key="id" popper-class="config-dropdown" v-model="editModule.configs.snmpCredentialsId" placeholder="" size="small" id="module-box-input-credentials"> <!--host-->
<el-option :id="'module-type-'+item.id" v-for="item in credentialList" :key="item.id" :label="item.name" :value="item.id"></el-option> <el-form-item :label='$t("project.endpoint.host")' prop="host">
</el-select> <el-input id="module-box-input-host" v-model="editModule.configs.host" placeholder="" size="small"></el-input>
</el-form-item> </el-form-item>
</span> <transition name="el-zoom-in-top">
<div v-show="showAllBasicOption" >
<!--name pattern-->
<el-form-item :label='$t("project.endpoint.pattern")' class="half-form-item" prop="pattern">
<!-- <el-input placeholder="" v-model=""></el-input>-->
<el-autocomplete
id="module-box-input-pattern"
v-model="editModule.endpointNameTmpl"
:fetch-suggestions="querySearch"
:placeholder="$t('overall.placeHolder')"
class="inline-input"
size="small"
></el-autocomplete>
</el-form-item>
<!--scrape_interval-->
<el-form-item :label='$t("project.endpoint.scrape_interval")' class="half-form-item" prop="scrape_interval">
<el-input id="module-box-input-scrape_interval" v-model.number="editModule.configs.scrape_interval" :placeholder='$t("project.endpoint.scrape_interval_placeholder")' size="small">
<template slot="append">s</template>
</el-input>
</el-form-item>
<!--scrape_timeout-->
<el-form-item :label='$t("project.endpoint.scrape_timeout")' class="half-form-item" prop="scrape_timeout">
<el-input id="module-box-input-scrape_timeout" v-model.number="editModule.configs.scrape_timeout" :placeholder='$t("project.endpoint.scrape_timeout_placeholder")' size="small">
<template slot="append">s</template>
</el-input>
</el-form-item>
</div>
</transition>
<!-- ChartTemplate --> <div style="text-align: center">
<el-form-item :label="$t('config.model.ChartTemplate')" prop="ChartTemplate"> <span class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="border: none" @click="showAllBasicOption=!showAllBasicOption">
<v-selectpage {{$t('overall.moreOption')}}
:data="'visual/panel/chart'" <i :class="showAllBasicOption?'is-active':''" class="nz-icon nz-icon-arrow-down need-rotate" ></i>
:tb-columns="ChartSearchShowFields" </span>
:params="{
varType: 2, panelId: 0,
returnChildren:0,groupId:0,
}"
:multiple="true"
:language="language"
title="ChartSearch"
key-field="id"
v-model="editModule.chartIds"
show-field="name"
class="form-control"
@values="(data) => {editModule.chartIds = data.map(d => d.id).join(',')}"
:result-format="resultFormat"
></v-selectpage>
</el-form-item>
<!--Enpoint template-->
<div class="right-box-sub-title">{{ $t("overall.endpointTemplate") }}
<el-tooltip placement="top" effect="light">
<div slot="content">
{{$t('project.module.tip.defaultEndpointSet')}}
<div></div>
{{$t('project.module.tip.relation')}}
</div>
<i class="nz-icon nz-icon-info-normal"></i>
</el-tooltip>
</div>
<div class="right-box-line"></div>
<el-tabs v-model="activeName">
<el-tab-pane label="Basic" name="Basic">
<!--path-->
<el-form-item :label='$t("project.endpoint.path")' prop="configs.metrics_path" class="half-form-item">
<el-input placeholder="" v-model="editModule.configs.metrics_path" size="small" id="module-box-input-path"></el-input>
</el-form-item>
<!--port-->
<el-form-item :label='$t("project.endpoint.port")' prop="port" class="half-form-item">
<el-input placeholder="" v-model.number="editModule.port" size="small" id="module-box-input-port"></el-input>
</el-form-item>
<!--host-->
<el-form-item :label='$t("project.endpoint.host")' prop="host">
<el-input placeholder="" v-model="editModule.configs.host" size="small" id="module-box-input-host"></el-input>
</el-form-item>
<transition name="el-zoom-in-top">
<div v-show="showAllBasicOption" >
<!--name pattern-->
<el-form-item :label='$t("project.endpoint.pattern")' prop="pattern" class="half-form-item">
<!-- <el-input placeholder="" v-model=""></el-input>-->
<el-autocomplete
class="inline-input"
size="small"
id="module-box-input-pattern"
v-model="editModule.endpointNameTmpl"
:fetch-suggestions="querySearch"
:placeholder="$t('overall.placeHolder')"
></el-autocomplete>
</el-form-item>
<!--scrape_interval-->
<el-form-item :label='$t("project.endpoint.scrape_interval")' prop="scrape_interval" class="half-form-item">
<el-input :placeholder='$t("project.endpoint.scrape_interval_placeholder")' v-model.number="editModule.configs.scrape_interval" size="small" id="module-box-input-scrape_interval">
<template slot="append">s</template>
</el-input>
</el-form-item>
<!--scrape_timeout-->
<el-form-item :label='$t("project.endpoint.scrape_timeout")' prop="scrape_timeout" class="half-form-item">
<el-input :placeholder='$t("project.endpoint.scrape_timeout_placeholder")' v-model.number="editModule.configs.scrape_timeout" size="small" id="module-box-input-scrape_timeout">
<template slot="append">s</template>
</el-input>
</el-form-item>
</div> </div>
</transition> </el-tab-pane>
<el-tab-pane label="Parameter" name="Parameter">
<div style="text-align: center"> <div id="module-box-params" ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
<span @click="showAllBasicOption=!showAllBasicOption" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="border: none"> <div v-for="(item, index) in editModule.paramObj" :key="index" class="param-box-row">
{{$t('overall.moreOption')}} <el-form-item :prop="'paramObj.' + index + '.key'" class="param-box-row-key">
<i class="nz-icon nz-icon-arrow-down need-rotate" :class="showAllBasicOption?'is-active':''" ></i> <el-input v-model="item.key" placeholder="key" size="mini" ></el-input>
</el-form-item>
<span class="param-box-row-eq">=</span>
<el-form-item :prop="'paramObj.' + index + '.value'" class="param-box-row-value">
<vue-tags-input
v-model="item.tags"
:maxlength="32"
:placeholder="'add parameter'"
:tags="item.value"
@tags-changed="(newTags)=>{tagsChange(newTags, index)}"
/>
</el-form-item>
<span :id="'moduel-remove-param-'+index" class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
</div>
</div>
<div style="text-align: center">
<span id="module-add-param" class="right-box-form-add module-add-label" type="button" @click="addParam">
<span><i class="nz-icon nz-icon-create-square" style="font-size: 16px;"></i></span>
</span> </span>
</div>
</el-tab-pane>
<el-tab-pane label="Parameter" name="Parameter">
<div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="module-box-params">
<div v-for="(item, index) in editModule.paramObj" :key="index" class="param-box-row">
<el-form-item class="param-box-row-key" :prop="'paramObj.' + index + '.key'">
<el-input placeholder="key" size="mini" v-model="item.key" ></el-input>
</el-form-item>
<span class="param-box-row-eq">=</span>
<el-form-item class="param-box-row-value" :prop="'paramObj.' + index + '.value'">
<!-- <el-select-->
<!-- v-model=""-->
<!-- multiple-->
<!-- filterable-->
<!-- allow-create-->
<!-- :ref="'select'+ index"-->
<!-- placeholder="value" size="mini"-->
<!-- default-first-option-->
<!-- popper-class="config-dropdown hide-element"-->
<!-- @change="(val)=>{paramObjchange(val,index)}"-->
<!-- >-->
<!-- <span slot="empty" class=""></span>-->
<!-- </el-select>-->
<vue-tags-input
v-model="item.tags"
:tags="item.value"
:maxlength="32"
@tags-changed="(newTags)=>{tagsChange(newTags, index)}"
:placeholder="'add parameter'"
/>
</el-form-item>
<span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
</div> </div>
</div> </el-tab-pane>
<div style="text-align: center"> <el-tab-pane label="Labels" name="Labels">
<span id="module-add-param" type="button" @click="addParam" class="right-box-form-add module-add-label"> <div id="module-box-labels" ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
<span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span> <div v-for="(item, index) in editModule.labelModule" :key="index" class="param-box-row">
</span> <el-form-item :prop="'labelModule.' + index + '.key'" :rules="[{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" class="param-box-row-key">
</div> <el-input v-model="item.key" placeholder="key" size="mini"></el-input>
</el-tab-pane> </el-form-item>
<el-tab-pane label="Labels" name="Labels"> <span class="param-box-row-eq">=</span>
<div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="module-box-labels"> <el-form-item :prop="'labelModule.' + index + '.value'" class="param-box-row-value">
<div v-for="(item, index) in editModule.labelModule" :key="index" class="param-box-row"> <el-input v-model="item.value" placeholder="value" size="mini"></el-input>
<el-form-item class="param-box-row-key" :rules="[{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'"> </el-form-item>
<el-input placeholder="key" size="mini" v-model="item.key"></el-input> <span :id="'moduel-remove-label-'+index" class="param-box-row-symbol" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
</el-form-item> </div>
<span class="param-box-row-eq">=</span>
<el-form-item class="param-box-row-value" :prop="'labelModule.' + index + '.value'">
<el-input placeholder="value" size="mini" v-model="item.value"></el-input>
</el-form-item>
<span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
</div> </div>
</div> <div style="text-align: center">
<div style="text-align: center"> <span id="module-add-label" class="right-box-form-add module-add-label" type="button" @click="addLabel">
<span id="module-add-label" type="button" @click="addLabel" class="right-box-form-add module-add-label"> <span><i class="nz-icon nz-icon-create-square" style="font-size: 16px;"></i></span>
<span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span> </span>
</span> </div>
</div> </el-tab-pane>
</el-tab-pane> <el-tab-pane v-if="editModule.type !== 'snmp'" label="Auth" name="Auth">
<el-tab-pane label="Auth" name="Auth" v-if="editModule.type !== 'snmp'"> <!--authtype-->
<!--authtype--> <el-form-item :label='$t("project.endpoint.type")' prop="authtype">
<el-form-item :label='$t("project.endpoint.type")' prop="authtype"> <el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
<el-select @change="changeAuthType" value-key="id" popper-class="config-dropdown" v-model="authType" placeholder="" size="small" id="module-box-input-auth-type"> <el-option v-for="item in authTypeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
<el-option :id="'module-type-'+item.id" v-for="item in authTypeList" :key="item.value" :label="item.name" :value="item.value"></el-option> </el-select>
</el-select> </el-form-item>
</el-form-item>
<!--authtype 1--> <!--authtype 1-->
<el-form-item :label='$t("project.endpoint.username")' prop="authtype" v-if="authType === 1" class="half-form-item"> <el-form-item v-if="authType === 1" :label='$t("project.endpoint.username")' class="half-form-item" prop="authtype">
<el-input placeholder='' v-model.number="editModule.configs.basic_auth.username" size="small" id="module-box-input-uername"></el-input> <el-input id="module-box-input-uername" v-model.number="editModule.configs.basic_auth.username" placeholder='' size="small"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label='$t("project.endpoint.pin")' prop="authtype" v-if="authType === 1" class="half-form-item"> <el-form-item v-if="authType === 1" :label='$t("project.endpoint.pin")' class="half-form-item" prop="authtype">
<el-input placeholder='' v-model.number="editModule.configs.basic_auth.password" size="small" id="module-box-input-password"></el-input> <el-input id="module-box-input-password" v-model.number="editModule.configs.basic_auth.password" placeholder='' size="small"></el-input>
</el-form-item> </el-form-item>
<!--authtype 2--> <!--authtype 2-->
<el-form-item :label='$t("project.endpoint.bearer_token")' prop="authtype" v-if="authType === 2"> <el-form-item v-if="authType === 2" :label='$t("project.endpoint.bearer_token")' prop="authtype">
<el-input placeholder='' v-model.number="editModule.configs.bearer_token" size="small" id="module-box-input-bearer_token"></el-input> <el-input id="module-box-input-bearer_token" v-model.number="editModule.configs.bearer_token" placeholder='' size="small"></el-input>
</el-form-item> </el-form-item>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div class="configs-copy-value"> <div class="configs-copy-value">
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span> <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
<pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre> <pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
</div> </div>
</el-form> </el-form>
</div>
</div> </div>
<!--底部按钮--> <!--底部按钮-->

23
nezha-fronted/src/components/common/rightBox/projectBox.vue
View File

@@ -2,23 +2,24 @@
<div class="right-box right-box-project" v-clickoutside="{obj:editProject,func:clickOutside}"> <div class="right-box right-box-project" v-clickoutside="{obj:editProject,func:clickOutside}">
<div class="right-box__header"> <div class="right-box__header">
<!-- begin--标题--> <!-- begin--标题-->
<div class="right-box-title">{{editProject.id ? $t("project.project.editProject") : $t("overall.createProject")}}</div> <div class="header__title">{{editProject.id ? $t("project.project.editProject") : $t("overall.createProject")}}</div>
<!-- end--标题--> <!-- end--标题-->
<div class="header__operation"> <div class="header__operation">
<span v-cancel="{obj: editProject, func: esc}"><i class="nz-icon nz-icon-close"></i></span> <span v-cancel="{obj: editProject, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
</div> </div>
</div> </div>
<div class="right-box-form-box right-box__container"> <div class="right-box__container">
<el-form class="right-box-form right-box-form-left" :model="editProject" label-position = "top" label-width="120px" :rules="rules" ref="projectForm"> <div class="container__form">
<el-form-item :label='$t("project.project.project")' prop="name"> <el-form ref="projectForm" :model="editProject" :rules="rules" label-position = "top" label-width="120px">
<el-input size="mini" maxlength="64" show-word-limit v-model="editProject.name" id="project-box-input-name"></el-input> <el-form-item :label='$t("project.project.project")' prop="name">
</el-form-item> <el-input id="project-box-input-name" v-model="editProject.name" maxlength="64" show-word-limit size="small"></el-input>
<el-form-item :label='$t("project.project.description")'> </el-form-item>
<el-input size="mini" type="textarea" maxlength="1024" show-word-limit v-model="editProject.remark" id="project-box-input-remark"></el-input> <el-form-item :label='$t("project.project.description")'>
</el-form-item> <el-input id="project-box-input-remark" v-model="editProject.remark" maxlength="1024" show-word-limit size="small" type="textarea"></el-input>
</el-form> </el-form-item>
</el-form>
</div>
</div> </div>
<!--底部按钮--> <!--底部按钮-->

38
nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
View File

@@ -41,7 +41,7 @@
@mouseenter="alertMessageHover(scope.row.alertRule, true, $event)" @mouseenter="alertMessageHover(scope.row.alertRule, true, $event)"
@mouseleave="alertMessageHover(scope.row.alertRule, false)" @mouseleave="alertMessageHover(scope.row.alertRule, false)"
>{{scope.row.alertRule.name}}</span> >{{scope.row.alertRule.name}}</span>
<alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :that="scope.row.alertRule"></alertRuleInfo> <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :severity-data="severityData" :that="scope.row.alertRule"></alertRuleInfo>
</div> </div>
<template v-else>-</template> <template v-else>-</template>
</template> </template>
@@ -162,6 +162,7 @@ export default {
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
currentMsg: {}, currentMsg: {},
chartUnit: 5, chartUnit: 5,
severityData: [],
tableTitle: [ tableTitle: [
{ {
label: 'ID', label: 'ID',
@@ -248,7 +249,17 @@ export default {
} }
} }
}, },
mounted () {
this.getSeverityData()
},
methods: { methods: {
getSeverityData () {
this.$get('alert/severity', { pageNo: 1, pageSize: -1 }).then(response => {
if (response.code == 200) {
this.severityData = response.data.list
}
})
},
labelsSort (obj) { labelsSort (obj) {
const buildIn = ['asset', 'endpoint', 'module', 'project', 'datacenter'] const buildIn = ['asset', 'endpoint', 'module', 'project', 'datacenter']
if (typeof obj === 'string') obj = JSON.parse(obj) if (typeof obj === 'string') obj = JSON.parse(obj)
@@ -457,31 +468,6 @@ export default {
}()) }())
} }
return r return r
/* let result="(" + obj.alertRule.expr + ")";
if(obj.labels){
if(obj.labels.alertname){
delete obj.labels.alertname;
}
if(obj.labels.severity){
delete obj.labels.severity;
}
}
if(Object.keys(obj.labels).length>0){
result+=" and ("+function(){
let q = "{";
for (let k in obj.labels) {
q += k;
q += "=";
q += ("'" + obj.labels[k] + "',");
};
if (q.length > 1) {
q = q.substring(0, q.length-1);
}
q += "}";
return q;
}() + ")";
}
return result; */
}, },
// asset弹框控制 // asset弹框控制
tabControl (data) { tabControl (data) {

1098
nezha-fronted/src/components/layout/path_navigation/PathNavigation.vue
View File

File diff suppressed because it is too large Load Diff