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

feat：Nez-506 新增表达式模板功能

Browse Source
This commit is contained in:
zhangyu
2021-03-16 17:54:05 +08:00
parent 620a30489d
commit a900833a92
14 changed files with 1286 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
View File

@@ -528,7 +528,7 @@
setTimeout(() => {
this.$get('alert/message', this.searchLabel).then(response => {
if (response.code == 200) {
this.nowTime=response.time;
this.nowTime=this.utcTimeToTimezoneStr(response.time);
this.tableData = response.data.list;
let axiosAll=[]
this.$nextTick(() => {

4
nezha-fronted/src/components/common/exportXLSX.vue
View File

@@ -156,6 +156,8 @@
url = "/alert/rule/cancelImport";
} else if(this.importUrl.indexOf("panel") > -1){
url = "/panel/cancelImport";
}else if(this.importUrl.indexOf("tmpl") > -1){
url = "/expression/tmpl/cancelImport";
}
this.$delete(url + '?seq='+this.importResult.seq).then(response=>{
if(response.code == 200 ){
@@ -223,6 +225,8 @@
url = "/panel/template";
}else if(this.importUrl.indexOf('endpoint') > -1){
url = '/endpoint/template'
}else if(this.importUrl.indexOf("tmpl") > -1){
url = "/expression/tmpl/template";
}
let param={language:language}

10
nezha-fronted/src/components/common/js/tools.js
View File

@@ -4,7 +4,7 @@ import MessageBox from "element-ui/packages/message-box/src/main";
import vuex from 'vuex'
import i18n from "../i18n";
/*弹窗点击外部后关闭*/
const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown', "asset-dropdown", "no-style-class", 'el-message-box','nz-dashboard-dropdown', "el-autocomplete-suggestion"]; //clickoutside排除的class(白名单) no-style-class：没有任何样式的class
const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown', "asset-dropdown", "no-style-class", 'el-message-box','nz-dashboard-dropdown', "el-autocomplete-suggestion",'nz-temp-box']; //clickoutside排除的class(白名单) no-style-class：没有任何样式的class
export const clickoutside = {
// 初始化指令
bind(el, binding, vnode) {
@@ -515,6 +515,7 @@ export const tableSet = {
case 'threshold':
case 'idc':
case 'alertNum':
case 'gname':
return'custom';
default : return false;
}
@@ -633,6 +634,13 @@ export const tableSet = {
case 'severity': return'ar.severity';
default : return prop;
}
case 'exprTemp':
switch(prop){
case 'id': return'id';
case 'name': return'name';
case 'gname': return'gname';
default : return prop;
}
default: break;
}
},

17
nezha-fronted/src/components/common/language/cn.js
View File

@@ -857,6 +857,23 @@ const cn = {
yes: "是",
no: "否"
}
},
exprTemp:{
exprTemp:'expression模板',
exprTempInfo:'Expression 模板详情',
exprTempRender:'expression模板渲染',
exprTempDown:"expression模板下载",
exprTempImport:"expression模板导入",
exprTempExport:"expression模板导出",
exprTempImportCancel:"expression模板导入撤销",
name:'名称',
gname:'组名',
expression:'表达式',
remark:'备注',
errorStr:'请填写 {errorStr} 的值',
edit:'修改表达式模板',
create:'创建表达式模板',
expressionError:'请填写表达式',
}
},
alert: {

17
nezha-fronted/src/components/common/language/en.js
View File

@@ -860,6 +860,23 @@ const en = {
yes:'Yes',
no:'No',
}
},
exprTemp:{
exprTemp:'Expression template',
exprTempInfo:'Expression template Info',
exprTempRender:'expression template render',
exprTempDown:"expression template download",
exprTempImport:"expression template import",
exprTempExport:"expression template export",
exprTempImportCancel:"expression template import rollback",
name:'Name',
gname:'Group',
expression:'Expression',
remark:'Reason',
errorStr:'Please fill in the {errorStr} value',
edit:'Edit expression template',
create:'New expression template',
expressionError:'Please fill in the "expression" value',
}
},
alert: {

2
nezha-fronted/src/components/common/project/popData/alertTable.vue
View File

@@ -345,7 +345,7 @@
this.$get('alert/message', {...this.searchLabel}).then(response => {
this.loading=false;
if (response.code == 200) {
this.nowTime=response.time;
this.nowTime=this.utcTimeToTimezoneStr(response.time);
this.tableData = response.data.list;
this.tableData.forEach((item) => {
item.labels = JSON.parse(item.labels);

4
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -1762,6 +1762,10 @@
getTopology(this.topologyIndex).lock(0);
getTopology(this.topologyIndex).data.pens.forEach((item)=>{//停止动画 以及赋值默认data
item.stopAnimate();
if(!item.data.expressArr.length) {
item.data.expressArr=[''];
item.data.legends=[''];
}
item.animateType=item.data.animateType;
if(item.type===0){
item.fillStyle=item.data.fillStyle;

233
nezha-fronted/src/components/common/rightBox/exprTempBox.vue Normal file
View File

@@ -0,0 +1,233 @@
<template>
<div class="right-box right-box-alert-config" v-clickoutside="{obj:editExprTemp,func:clickOutside}">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns right-box-form-delete">
<button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="alert-box-del" type="button"
v-has="'alert_silence_delete'" v-if="editExprTemp.id">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{editExprTemp.id ? $t("config.exprTemp.edit") + " ID：" + editExprTemp.id :
$t("config.exprTemp.create")}}
</div>
<!-- end--标题-->
<!-- begin--表单-->
<div class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="editExprTemp" label-position="top"
label-width="120px" :rules="rules" ref="ExprTempForm">
<el-form-item prop="name" :label="$t('config.exprTemp.name')">
<el-input v-model="editExprTemp.name" size="small" :placeholder="$t('overall.placeHolder')"></el-input>
</el-form-item>
<el-form-item prop="gname" :label="$t('config.exprTemp.gname')">
<!--<el-input v-model="editExprTemp.gname" size="small" :placeholder="$t('overall.placeHolder')"></el-input>-->
<el-autocomplete
class="inline-input"
v-model="editExprTemp.gname"
:fetch-suggestions="querySearch"
:placeholder="$t('overall.placeHolder')"
size="small"
style="width: 100%;"
></el-autocomplete>
</el-form-item>
<el-form-item prop="expression" :label="$t('config.exprTemp.expression')">
<!--<el-input v-model="editExprTemp.expression" size="small" :placeholder="$t('overall.placeHolder')"></el-input>-->
<promql-input
:expression-list="editExprTemp.expression"
:id="'promqlKeys0'"
:index="0"
:key="'promqlKeys0'"
:plugins="['metric-selector', 'metric-input', 'remove']"
:showRemove="false"
:styleType="2"
:show-temp="false"
@change="expressionChange"
></promql-input>
</el-form-item>
<el-form-item prop="remark" :label="$t('config.exprTemp.remark')">
<el-input
type="textarea"
:placeholder="$t('alert.description')"
v-model="editExprTemp.remark"
size="small"
maxlength="512"
show-word-limit
></el-input>
</el-form-item>
</el-form>
</div>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button v-cancel="{obj:editExprTemp,func:esc}" id="alert-box-esc"
class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
<span>{{$t('overall.cancel')}}</span>
</button>
<button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save"
class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="alert-box-save">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
import bus from '../../../libs/bus';
import promqlInput from "../../page/dashboard/explore/promqlInput";
export default {
name:"exprTempBox",
components:{
'promql-input': promqlInput,
},
props:{
exprTemp:Object
},
watch:{
exprTemp:{
deep:true,
immediate:true,
handler(n,o){
let obj={...n};
obj.expression=[obj.expression]
this.editExprTemp=Object.assign(this.editExprTemp,obj);
}
}
},
data(){
return {
editExprTemp:{
id:'',
name:'',
gname:'',
"expression": "",
"remark": "",
},
gnameList:[],
rules:{
name:[
{ required: true,message: this.$t('validate.required'), trigger: 'change'},
],
gname:[
{ required: true,message: this.$t('validate.required'), trigger: 'change'},
],
// remark:[
// { required: true,message: this.$t('validate.required'), trigger: 'change'},
// ]
},
}
},
mounted(){
this.getGnameList()
},
methods:{
clickOutside(){
this.esc(false);
},
esc(refresh){
this.prevent_opt.save=false;
this.$emit("close",refresh);
},
save(){
if(this.prevent_opt.save){
return
}
;
this.prevent_opt.save=true;
this.$refs.ExprTempForm.validate((valid)=>{
let params={...this.editExprTemp};
params.expression=params.expression[0];
if(!params.expression[0]) {
this.prevent_opt.save=false;
this.$message.error(this.$t('expressionError'));
return
}
if(valid){
if(this.editExprTemp.id){
this.$put('expression/tmpl',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);
}
});
}else{
this.$post('expression/tmpl',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);
}
});
}
}else{
this.prevent_opt.save=false;
return false;
}
})
},
del(){
if(this.prevent_opt.save){
return
}
;
this.prevent_opt.save=true;
this.$confirm(this.$t("tip.confirmDelete"),{
confirmButtonText:this.$t("tip.yes"),
cancelButtonText:this.$t("tip.no"),
type:'warning'
}).then(()=>{
this.$delete("/alert/silence?ids="+this.editExprTemp.id).then(response=>{
this.prevent_opt.save=false;
if(response.code===200){
this.$message({type:'success',message:this.$t("tip.deleteSuccess")});
this.esc(true);
}else{
this.$message.error(response.msg);
}
})
}).catch(()=>{
this.prevent_opt.save=false;
});
},
getGnameList(){
this.$get('/expression/tmpl/gname').then(res=>{
if(res.code===200){
this.gnameList=res.data.list.map(item=>{
return {
value:item
}
})
}
})
},
querySearch(queryString, cb) {
var restaurants = this.gnameList;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
expressionChange(val){
this.editExprTemp.expression[0]=val;
},
}
}
</script>
<style scoped lang="scss">
</style>

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

@@ -140,6 +140,17 @@
<li v-for="(item,key) in dcSelect" :key="key" @click="tr_selectInfo(val.label,item.id,item.name,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
</ul>
</div>
<!--exprTemp ganem-->
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'selectTemp'&&val.id==13">
<el-scrollbar v-if="gnameList.length > 8" class="el-scrollbar-small" style="height: 240px;">
<ul>
<li v-for="(item,key) in gnameList" :key="key" @click="tr_selectInfo(val.label,item.id,item.name,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
</ul>
</el-scrollbar>
<ul v-else>
<li v-for="(item,key) in gnameList" :key="key" @click="tr_selectInfo(val.label,item.id,item.name,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
</ul>
</div>
</div>
<el-date-picker
v-model="timeFrame"
@@ -204,6 +215,7 @@
projectSelect: [],
moduleSelect: [],
modelSelect: [],
gnameList:[],
schemaTypeSelect:[], //日志检索Protocol下拉菜单
TypeSelect:[],//Protocol二层下拉菜单
secondShow:'',//二层显示控制
@@ -509,6 +521,19 @@
}
});
},
getGnameList(){
this.$get('/expression/tmpl/gname').then(res=>{
if(res.code===200){
this.gnameList = res.data.list.map((item,index)=>{
return {
value:item,
name:item,
id:index,
}
})
}
})
},
//点击确认选择下拉内容
tr_selectInfo(selectLabel,value,label,e){
this.stop_click(e);
@@ -1292,6 +1317,9 @@
if (this.$route.path == '/asset') {
this.getModelData();
}
if (this.$route.path == '/exprTemp') {
this.getGnameList();
}
}, 1000);
JSON.parse(JSON.stringify(this.searchMsg.searchLabelList)).forEach(val => {
if(val.name=='Protocol'){

2
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -355,7 +355,7 @@
this.$get('alert/message', this.searchLabel).then(response => {
this.tools.loading = false;
if (response.code == 200) {
this.nowTime=response.time;
this.nowTime=this.utcTimeToTimezoneStr(response.time);
this.tableData = response.data.list;
let axiosAll=[]
this.$nextTick(() => {

466
nezha-fronted/src/components/page/config/exprTemp.vue Normal file
View File

@@ -0,0 +1,466 @@
<template>
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': bottomBox.showSubList}">
<!--工具组-->
<div class="top-tools" v-show="bottomBox.mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
<div class="top-tool-search margin-r-20">
<search-input :searchMsg="searchMsg" @search="search"
:bottomBox.inTransform="bottomBox.inTransform" :single="true"></search-input>
</div>
<export-excel
id="asset-list"
export-file-name="asset"
export-url="expression/tmpl/export"
import-url="expression/tmpl/import"
:params="searchLabel"
:permissions="{import: 'asset_import', export: 'asset_export'}"
@afterImport="afterTableListChange"
v-has="'expr_temp_save'"
>
<template slot="optionZone">
<button :title="$t('overall.exportExcelLower')" @click="addTemp" type="button" v-has="'expr_temp_save'"
class="nz-btn nz-btn-size-normal nz-btn-style-light" id="alert-list-export">
<i class="nz-icon nz-icon-create-square"></i>
</button>
</template>
</export-excel>
<delete-button :delete-objs="batchDeleteObjs" @after="getexprTemp"
:api="'expression/tmpl'" v-has="'expr_temp_delete'" id="alert-msg-batch-delete"></delete-button>
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<!--表格开始-->
<transition name="el-zoom-in-top">
<element-set
id="alert-rule-element-set"
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table
id="alert-rule-table"
class="nz-table"
:data="tableData"
border
v-show="bottomBox.mainResizeShow"
ref="exprTempTable"
tooltip-effect="light"
:height="mainTableHeight"
v-loading="tools.loading"
style="width: 100%;"
@sort-change="tableDataSort"
@selection-change="(selection)=>{this.batchDeleteObjs=selection}"
>
<el-table-column
:resizable="false"
type="selection"
width="40"
align="center">
</el-table-column>
<el-table-column
:resizable="true"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:label="item.label"
:show-overflow-tooltip="item.prop!=='matchers'"
:sort-orders="['ascending', 'descending']"
:sortable="$tableSet.sortableShow(item.prop,'exprTemp')"
:prop="$tableSet.propTitle(item.prop,'exprTemp')"
:width="item.width"
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span :id="'alert-edit-'+scope.row.id" :title="$t('overall.edit')" @click.stop="edit(scope.row)"
class="content-right-option" v-has="'expr_temp_update'">
<i class="nz-icon nz-icon-edit"></i>
</span>
<span
:id="'alert-del-'+scope.row.id"
:title="$t('overall.delete')"
@click="del(scope.row)"
class="content-right-option"
v-has="'expr_temp_delete'">
<i class="nz-icon nz-icon-delete"></i>
</span>
<span
:id="'alert-copy-'+scope.row.id"
:title="$t('overall.copy')"
@click="copyRow(scope.row,'exprTemp')"
class="content-right-option"
v-has="'expr_temp_save'">
<i class="nz-icon nz-icon-override"></i>
</span>
</div>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
<template v-else>-</template>
</template>
</el-table-column>
<el-table-column width="28" :resizable="false">
<template slot="header" slot-scope="scope">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)"
class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
</el-table-column>
</el-table>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}"
@click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"
id="alert-rule-toTop"><i class="nz-icon nz-icon-top"></i></button>
<!--表格结束-->
<!--分页部分-->
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize'
ref="Pagination"></Pagination>
</div>
<!--导出-->
<div class="export-xlsx">
<el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false'
:show-close="true" width="300px" @close="closeDialog" class="nz-dialog">
<div class="upload-body">
<button @click="exportCur" class="el-button el-button--default el-button--small" id="alert-msg-exportcur">
<span>{{$t('overall.exportCur')}}</span>
</button>
<button @click="exportAll" class="el-button el-button--default el-button--small" id="alert-msg-exportall">
<span>{{$t('overall.exportAll')}}</span>
</button>
</div>
</el-dialog>
</div>
<!--侧滑-->
<transition name="right-box">
<exprTempBox v-if="rightBox.show" :exprTemp="exprTemp" @close="closeRightBox"
ref="exprTempBox"></exprTempBox>
</transition>
</div>
</template>
<script>
import bus from '../../../libs/bus';
import axios from 'axios';
import exportXLSX from "../../common/exportXLSX";
import deleteButton from "../../common/deleteButton";
import exprTempBox from'../../common/rightBox/exprTempBox';
import {calcDurationByStringTimeB} from "../../common/js/tools";
export default {
name:"exprTemp",
components:{
deleteButton,
exprTempBox,
'export-excel':exportXLSX
},
data(){
return {
tableId:'exprTemp',
//侧滑
rightBox:{
show:false,
},
/*二级列表相关*/
mainTableHeight:this.$tableHeight.normal, //主列表table高度
/*二级页面相关*/
bottomBox:{
tabList:[], //二级列表的标签
tabDetailList:[], //多个详情
mainResizeShow:true, //dom高度改变时是否展示|隐藏
subResizeShow:true,
isFullScreen:false, //全屏状态
showSubList:false, //是否显示二级列表
targetTab:'', //显示二级列表中的哪个页签
inTransform:false, //搜索框相关，搜索条件下拉框是否在transform里
},
/*工具参数*/
tools:{
loading:false, //是否显示table加载动画
toTopBtnTop:this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover:false, //控制滚动条和top按钮同时出现
showTopBtn:false, //显示To top按钮
showCustomTableTitle:false, //自定义列弹框是否显示
customTableTitle:[], //自定义列工具的数据
},
/*批量删除相关*/
batchDeleteObjs:[],
/*搜素相关*/
searchMsg:{ //给搜索框子组件传递的信息
zheze_none:true,
searchLabelList:[
{
id: 11,
name: 'Id',
type: 'input',
label: 'id',
disabled: false
},{
id: 12,
name: this.$t('config.exprTemp.name'),
type: 'input',
label: 'name',
disabled: false
},{
id: 13,
name: this.$t('config.exprTemp.gname'),
type: 'selectTemp',
label: 'gname',
disabled: false
},
],
},
searchLabel:{}, //搜索参数
pageObj:{
pageNo:1,
pageSize:this.$CONSTANTS.defaultPageSize,
total:0
},
/*表格相关*/
tableTitle:[
{
label:'ID',
prop:'id',
show:true,
width:80
},{
label:'Name',
prop:'name',
show:true,
},{
label:'Group',
prop:'gname',
show:true,
},{
label:'Expression',
prop:'expression',
show:true,
},{
label:'Remark',
prop:'remark',
show:true,
},{
label:this.$t('alert.config.option'),
prop:'option',
show:true,
width:120
}
],
tableData:[],
//导出相关
importBox:{show:false,title:this.$t('overall.exportExcel')},
deleteBox:{show:false,ids:"",remark:'',state:2},
//创建修改相关
blackExprTemp:{
"id": '',
"name": "",
"gname": "default",
"expression": "",
"remark": "",
},
exprTemp:{},
nowTime:''
}
},
computed:{
getDuration(){
return function(record) {
if (record.endAt) {
return calcDurationByStringTimeB(record.startAt, record.endAt);
}
return calcDurationByStringTimeB(record.startAt, this.nowTime);
}
},
},
created(){
},
mounted(){
//初始化表头
this.tools.customTableTitle=localStorage.getItem("nz-tableTitle-"+localStorage.getItem("nz-username")+"-"+this.$route.path)
?JSON.parse(localStorage.getItem("nz-tableTitle-"+localStorage.getItem("nz-username")+"-"+this.$route.path))
:this.tableTitle;
console.log(this.tools.customTableTitle,this.tableTitle);
this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
this.initEvent();
this.getexprTemp();
},
methods:{
initEvent(){
bus.$on("alert-rule-list-change",()=>{
this.getexprTemp();
});
bus.$on("dc-list-change",()=>{
this.getexprTemp();
});
bus.$on('alert-message-change',()=>{
this.getexprTemp();
})
},
getexprTemp(){
if(!this.hasButton('rule_view')){
this.$message.error(this.$t("tip.noAccess"));
return;
}
this.$set(this.searchLabel,"pageNo",this.pageObj.pageNo);
this.$set(this.searchLabel,"pageSize",this.pageObj.pageSize);
this.tools.loading=true;
this.$get('expression/tmpl',this.searchLabel).then(response=>{
this.tools.loading=false;
if(response.code==200){
this.tableData=response.data.list;
this.pageObj.total=response.data.total;
this.nowTime=this.utcTimeToTimezoneStr(response.time);
console.info(this.$refs.exprTempTable)
if(!this.scrollbarWrap){
this.$nextTick(()=>{
this.scrollbarWrap=this.$refs.exprTempTable.bodyWrapper;
this.toTopBtnHandler(this.scrollbarWrap);
});
}
}
})
},
pageNo(val){
this.pageObj.pageNo=val;
this.getexprTemp();
},
pageSize(val){
this.pageObj.pageSize=val;
localStorage.setItem('nz-pageSize-'+localStorage.getItem('nz-username')+'-'+this.tableId,val);
this.getexprTemp();
},
search(searchObj){
let orderBy='';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
}
this.searchLabel={};
this.pageObj.pageNo=1;
for(let item in searchObj){
if(searchObj[item]){
this.$set(this.searchLabel,item,searchObj[item]);
}
}
if(orderBy){
this.$set(this.searchLabel,'orderBy',orderBy);
}
this.$refs.exprTempTable.bodyWrapper.scrollTop=0;
this.getexprTemp();
},
// 数据排序
tableDataSort(item){
let orderBy='';
if(item.order==='ascending'){
orderBy=item.prop;
}
if(item.order==='descending'){
orderBy='-'+item.prop;
}
this.$set(this.searchLabel,"orderBy",orderBy);
this.getexprTemp();
},
openDelMessageBox:function(){
if(this.batchDeleteObjs.length<1) return;
console.log(this.batchDeleteObjs);
},
showExportDialog(){
this.importBox.show=true;
},
closeDialog(){
this.importBox.show=false;
this.deleteBox.show=false;
},
exportCur:function(){
let searchLabel=Object.assign({},this.searchLabel)
this.$set(searchLabel,'language',localStorage.getItem("nz-language")?localStorage.getItem("nz-language"):'en')
this.exportExcel(searchLabel);
this.closeDialog();
},
exportAll:function(){
let temp=JSON.parse(JSON.stringify(this.searchLabel));
temp.pageSize= -1;
this.$set(temp,'language',localStorage.getItem("nz-language")?localStorage.getItem("nz-language"):'en')
this.exportExcel(temp);
this.closeDialog();
},
afterTableListChange(){
this.getexprTemp();
},
addTemp(){
this.exprTemp=JSON.parse(JSON.stringify(this.blackExprTemp));
this.rightBox.show=true;
},
edit(row){
console.log(123123123123);
this.$get('expression/tmpl/'+row.id).then(res=>{
this.exprTemp={...res.data};
this.rightBox.show=true;
})
},
del(row){
if(this.prevent_opt.save){
return
}
;
this.prevent_opt.save=true;
this.$confirm(this.$t("tip.confirmDelete"),{
confirmButtonText:this.$t("tip.yes"),
cancelButtonText:this.$t("tip.no"),
type:'warning'
}).then(()=>{
this.$delete("expression/tmpl?ids="+row.id).then(response=>{
this.prevent_opt.save=false;
if(response.code===200){
this.$message({type:'success',message:this.$t("tip.deleteSuccess")});
this.getexprTemp();
}else{
this.$message.error(response.msg);
}
})
}).catch(()=>{
this.prevent_opt.save=false;
});
},
overtime(row){
if(this.prevent_opt.save){
return
}
;
this.prevent_opt.save=true;
this.$confirm(this.$t("tip.confirmOvertime"),{
confirmButtonText:this.$t("tip.yes"),
cancelButtonText:this.$t("tip.no"),
type:'warning'
}).then(()=>{
this.$delete("expression/tmpl?ids="+row.id).then(response=>{
this.prevent_opt.save=false;
if(response.code===200){
this.$message({type:'success',message:this.$t("tip.deleteSuccess")});
this.getexprTemp();
}else{
this.$message.error(response.msg);
}
})
}).catch(()=>{
this.prevent_opt.save=false;
});
},
closeRightBox(refresh) {
this.rightBox.show = false;
if (refresh) {
this.delFlag=true;
this.getexprTemp();
}
},
}
}
</script>
<style scoped lang="scss">
</style>

2
nezha-fronted/src/components/page/config/terminallog.vue
View File

@@ -284,7 +284,7 @@
this.tools.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.nowTime=response.time;
this.nowTime=this.utcTimeToTimezoneStr(response.time);
this.pageObj.total = response.data.total;
if (!this.scrollbarWrap) {
this.$nextTick(() => {

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

@@ -1,227 +1,484 @@
<template>
<div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'50px':'auto','margin-bottom':required?'0':'18px'}">
<div class="query-row">
<div class="query-input">
<!--explore页面的样式-->
<template v-if="styleType == 1">
<div class="metric-btn" v-if="plugins.indexOf('metric-selector') > -1">
<el-dropdown class="metric-selector">
<div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'50px':'auto','margin-bottom':required?'0':'18px'}">
<div class="query-row">
<div class="query-input">
<!--explore页面的样式-->
<template v-if="styleType == 1">
<div class="metric-btn" v-if="plugins.indexOf('metric-selector') > -1">
<el-dropdown class="metric-selector">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric
&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></el-button>
<el-cascader-panel v-loading="tempBoxShowLoading" v-show="dropDownVisible" v-model="cascaderValue" v-clickoutside="closeDropdown"
slot="dropdown" ref="metricSelector" :props="{emitPath:false,}"
:options="metricOptions" @change="metricChange">
<template slot-scope="{ node, data }">
<div :class="['nz-cascade',data.temp?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">{{
data.label }}
</div>
</template>
</el-cascader-panel>
</el-dropdown>
</div>
<div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
<!-- <el-autocomplete :placeholder="$t('dashboard.metricPreview.inputTip')" :fetch-suggestions="filterInput" clearable @clear="clearExpression" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%;height:36px"></el-autocomplete>-->
<!--<editor :styleType="styleType" :metric-list="metricStore" :history-param="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>?-->
<el-input @keyup.enter.native="expressionChange" v-model="expressionList[index]" :id="inputId"
@input="metricKeyDown"></el-input>
<div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
<div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
</div>
</template>
<!--right-box里的样式-->
<template v-if="styleType == 2">
<el-row v-if="plugins.indexOf('metric-input') > -1 || plugins.indexOf('metric-selector') > -1"
style="width: 100%;">
<el-col
:style="{'width':plugins.indexOf('metric-selector') > -1 ? '120px':'100%', 'padding': plugins.indexOf('metric-selector') > -1 ?'0 0 0 10px':'0 20px 0 0 ', 'text-align':'left', 'color': '#666','font-weight':plugins.indexOf('metric-selector') > -1 ?'400':'bold'}">
<el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric &nbsp;<i class="nz-icon nz-icon-arrow-down"></i></el-button>
<el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue" v-clickoutside="closeDropdown" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange" ></el-cascader-panel>
<span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i
class="nz-icon nz-icon-arrow-down"
style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
<el-cascader-panel v-loading="tempBoxShowLoading" v-if="dropDownVisible" v-clickoutside="closeDropdown" v-model="cascaderValue"
style="text-align: left;" slot="dropdown" ref="metricSelector"
:props="{emitPath:false}" :options="metricOptions" @change="metricChange">
<template slot-scope="{ node, data }">
<div :class="['nz-cascade',data.temp?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">{{
data.label }}
</div>
</template>
</el-cascader-panel>
</el-dropdown>
</div>
<div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
<!-- <el-autocomplete :placeholder="$t('dashboard.metricPreview.inputTip')" :fetch-suggestions="filterInput" clearable @clear="clearExpression" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%;height:36px"></el-autocomplete>-->
<!--<editor :styleType="styleType" :metric-list="metricStore" :history-param="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>?-->
<el-input @keyup.enter.native="expressionChange" v-model="expressionList[index]" :id="inputId" @input="metricKeyDown"></el-input>
<div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
<div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
</div>
</template>
<!--right-box里的样式-->
<template v-if="styleType == 2">
<el-row v-if="plugins.indexOf('metric-input') > -1 || plugins.indexOf('metric-selector') > -1" style="width: 100%;">
<el-col :style="{'width':plugins.indexOf('metric-selector') > -1 ? '120px':'100%', 'padding': plugins.indexOf('metric-selector') > -1 ?'0 0 0 10px':'0 20px 0 0 ', 'text-align':'left', 'color': '#666','font-weight':plugins.indexOf('metric-selector') > -1 ?'400':'bold'}">
<el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i class="nz-icon nz-icon-arrow-down" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
<el-cascader-panel v-if="dropDownVisible" v-clickoutside="closeDropdown" v-model="cascaderValue" style="text-align: left;" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange"></el-cascader-panel>
</el-dropdown>
<label style="line-height: 30px;" v-else>{{$t("alert.config.expr")}}<sup v-if="required" style="color: #f56c6c">*</sup></label>
</el-col>
<el-col :style="{'width':plugins.indexOf('metric-selector') > -1 ? 'calc(100% - 120px)':'100%',height: '100%',}">
<div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
<!--<editor :styleType="styleType" :metric-list="metricStore" :historyParam="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>-->
<el-input v-model="expressionList[index]" @change="metricChange" @input="metricKeyDown"></el-input>
<div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
<div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
</div>
</el-col>
</el-row>
</template>
</div>
</div>
<div v-if="styleType == 1" style="margin-left: 10px">
<div class="query-options nz-btn-group nz-btn-group-size-normal nz-btn-group-light">
<div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="nz-icon nz-icon-plus"></i></div>
<div @click="copyExpression" class="option nz-btn nz-btn-size-normal nz-btn-style-light" v-if="plugins.indexOf('copy') > -1"><i class="nz-icon nz-icon-override"></i></div>
<div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="removeExpression" v-if="plugins.indexOf('remove') > -1"><i class="nz-icon nz-icon-minus"></i></div>
</div>
</div>
<div v-if="styleType == 2&&showRemove">
<div class="option" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="nz-icon nz-icon-plus"></i></div>
<div class="option" style="margin-left: 5px; line-height: 32px;" @click="removeExpression" v-if="plugins.indexOf('remove') > -1"><i class="nz-icon nz-icon-minus"></i></div>
<label style="line-height: 30px;" v-else>{{$t("alert.config.expr")}}<sup v-if="required"
style="color: #f56c6c">*</sup></label>
</el-col>
<el-col
:style="{'width':plugins.indexOf('metric-selector') > -1 ? 'calc(100% - 120px)':'100%',height: '100%',}">
<div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
<!--<editor :styleType="styleType" :metric-list="metricStore" :historyParam="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>-->
<el-input v-model="expressionList[index]" @change="metricChange" @input="metricKeyDown"></el-input>
<div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
<div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
</div>
</el-col>
</el-row>
</template>
</div>
</div>
<div v-if="styleType == 1" style="margin-left: 10px">
<div class="query-options nz-btn-group nz-btn-group-size-normal nz-btn-group-light">
<div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="addExpression"
v-if="plugins.indexOf('add') > -1"><i class="nz-icon nz-icon-plus"></i></div>
<div @click="copyExpression" class="option nz-btn nz-btn-size-normal nz-btn-style-light"
v-if="plugins.indexOf('copy') > -1"><i class="nz-icon nz-icon-override"></i></div>
<div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="removeExpression"
v-if="plugins.indexOf('remove') > -1"><i class="nz-icon nz-icon-minus"></i></div>
</div>
</div>
<div v-if="styleType == 2&&showRemove">
<div class="option" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="nz-icon nz-icon-plus"></i>
</div>
<div class="option" style="margin-left: 5px; line-height: 32px;" @click="removeExpression"
v-if="plugins.indexOf('remove') > -1"><i class="nz-icon nz-icon-minus"></i></div>
</div>
<el-dialog
:visible.sync="tempBoxShow"
:append-to-body="true"
:width="'auto'"
:custom-class="'nz-temp-box'"
:destroy-on-close="true"
center>
<el-form v-model="tempBox" class="temp-form-box" ref="tempFormBox" v-if="tempBoxShow">
<span class="temp-form-box-title">Expression</span>
<el-form-item prop="expression">
<el-input v-model="tempBox.expression" size="small" disabled></el-input>
</el-form-item>
<span class="temp-form-box-title">Variable</span>
<el-form-item v-for="(item,index) in tempBox.vars" :prop="item" :key="index">
<el-row>
<el-col :span="5" class="temp-form-box-col">
<el-input v-model="tempBox.vars[index]" :id="'tempBox'+index" size="small" :disabled="true"></el-input>
</el-col>
<el-col :span="17" v-if="format(item).key">
<!--<el-input v-model="tempBox[item]" :id="'tempBox'+item" size="small"></el-input>-->
<el-select v-model="tempBox[item]" size="small" style="width: 100%">
<el-option v-for="(item1,index) in format(item).arr" :key="index" :label="item1[format(item).value]" :value="item1[format(item).value]">
</el-option>
</el-select>
</el-col>
<el-col :span="17" v-else>
<el-input v-model="tempBox[item]" :id="'tempBox'+item" size="small"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-form>
<span slot="footer">
<button id="temp-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="tempBoxShowChange(false)">
<span>{{$t('overall.cancel')}}</span>
</button>
<button :disabled="prevent_opt.save" @click="tempBoxShowChange(true)" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="chart-box-save" v-has="`expression_template_render`" >
<span>{{$t('overall.save')}}</span>
</button>
</span>
</el-dialog>
</div>
</template>
<script>
import editor from './editor'
export default {
name: "promqlInput",
components:{
'editor':editor
export default {
name:"promqlInput",
components:{
'editor':editor
},
props:{
index:{type:Number},
expressionList:{},
plugins:{type:Array},
styleType:Number,
historyParam:{type:Object},
showRemove:{type:Boolean,default:true},
projectRightBox:{type:Boolean,default:false},
metricOptionsParent:{type:Array},
inputId:String,
required:{
type:Boolean,default:false
},
props:{
index:{type:Number},
expressionList:{},
plugins: {type: Array},
styleType: Number,
historyParam:{type:Object},
showRemove:{type:Boolean,default:true},
projectRightBox:{type:Boolean,default:false},
metricOptionsParent:{type:Array},
inputId:String,
required:{
type:Boolean,default:false
}
//metricOptions: {type: Array},
//metricStore: {type: Array}
showTemp:{
type:Boolean,
default:true
}
//metricOptions: {type: Array},
//metricStore: {type: Array}
},
data(){
return {
dropDownVisible:false,
//metricStore:[],
metricOptions:[],
cascaderValue:'',
errorMsg:null,
appendMsg:null,
editorValue:'',
firstAddEvent:true,
tempBoxShow:false,
tempBox:{
expression:'',
vars:[],
},
tempBoxShowLoading:false,
assetOption:[],
moduleOption:[],
endpointOption:[],
datacenterOption:[],
projectOption:[],
}
},
created(){
this.queryMetrics();
this.getAllOptins();
console.log(123123123);
},
methods:{
closeDropdown(){
this.dropDownVisible=false;
},
data(){
return {
dropDownVisible:false,
//metricStore:[],
metricOptions: [],
cascaderValue:'',
errorMsg:null,
appendMsg:null,
editorValue:'',
firstAddEvent:true
}
clearExpression:function(){
this.expressionChange();
this.cascaderValue='';
},
/*created() {
this.queryMetrics();
},*/
methods:{
closeDropdown() {
this.dropDownVisible = false;
},
clearExpression:function(){
this.expressionChange();
this.cascaderValue='';
},
addExpression:function(){
this.$emit('addExpression',this.index);
},
copyExpression() {
this.$emit('copyExpression',this.index);
},
removeExpression:function(){
this.$emit('removeExpression',this.index);
},
toggleDropdown() {
this.dropDownVisible = !this.dropDownVisible;
},
/*queryMetrics:function(){
this.metrics.forEach((item)=>{
let key='';
if(/^[a-zA-Z]+?_[a-zA-Z]*!/.test(item)){
key=item.split('_')[0];
}else if(/^_\w*!/.test(item)){
key=' ';
}else{
key=item;
}
if(metricMap.get(key)){
let values=metricMap.get(key);
values.push({label:item,value:item});
}else{
let values=[{label:item,value:item}];
metricMap.set(key,values);
}
this.metricStore.push({label:item,value:item,insertText:item})
})
},*/
filterInput:function(queryString, cb){
let metrics=Object.assign([],this.metricStore);
let result=queryString?metrics.filter((item)=>{
return item.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1;
}):metrics;
cb(result)
},
metricChange:function(value){
this.expressionList[this.index]=value;
//this.$refs.editor.setContent(value)
this.dropDownVisible=false;
this.$emit('change',value)
},
metricKeyDown(val){
if(this.required){
this.metricChange(val);
}
},
expressionChange:function(){
this.$emit('change')
},
setError:function(errMsg){
//console.log(errMsg)
this.errorMsg=errMsg;
},
/*setMsg:function(){
this.appendMsg
}*/
addExpression:function(){
this.$emit('addExpression',this.index);
},
watch:{
dropDownVisible:function(n,o){
if (this.styleType == 1) {
if (n) {
this.metricOptions = this.$parent.getMetricOptions();
} else {
this.metricOptions = [];
}
} else if (this.styleType == 2) {
if (n) {
//console.log(this.$parent.$parent)
if(this.metricOptionsParent){
this.metricOptions=this.metricOptionsParent
copyExpression(){
this.$emit('copyExpression',this.index);
},
removeExpression:function(){
this.$emit('removeExpression',this.index);
},
toggleDropdown(){
this.dropDownVisible= !this.dropDownVisible;
},
queryMetrics:function(){
this.$get('prom/api/v1/label/__name__/values').then(response=>{
if(response.status=='success'){
let metrics=response.data.sort();
let metricMap=new Map();
metrics.forEach((item)=>{
let key='';
if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
key=item.split('_')[0];
}else if(/^_\w*/.test(item)){
key=' ';
}else{
this.metricOptions = this.$parent.$parent.$parent.getMetricOptions();
key=item;
}
} else {
this.metricOptions = [];
if(metricMap.get(key)){
let values=metricMap.get(key);
values.push({label:item,value:item});
}else{
let values=[{label:item,value:item}];
metricMap.set(key,values);
}
//this.metricStore.push({label:item,value:item,insertText:item})
});
console.log(metricMap);
for(let key of metricMap.keys()){
let option={
label:key,
value:key,
};
if(metricMap.get(key)&&metricMap.get(key).length>1){
option.children=metricMap.get(key);
}
this.metricOptions.push(option);
}
if(this.showTemp){
this.getExprTemp()
}
}
if(this.$refs.metricSelector){
this.$refs.metricSelector.dropDownVisible=n;
if(!this.expressionList[this.index]||this.expressionList[this.index] == ''){
this.cascaderValue="";
}
}
},
})
},
}
filterInput:function(queryString,cb){
let metrics=Object.assign([],this.metricStore);
let result=queryString?metrics.filter((item)=>{
return item.value.toLowerCase().indexOf(queryString.toLowerCase())!= -1;
}):metrics;
cb(result)
},
metricChange:function(value){
console.log(value);
if(!value) return;
this.expressionList[this.index]=value;
//this.$refs.editor.setContent(value)
this.dropDownVisible=false;
this.$emit('change',value)
},
metricKeyDown(val){
if(this.required){
this.metricChange(val);
}
},
expressionChange:function(){
this.$emit('change')
},
setError:function(errMsg){
//console.log(errMsg)
this.errorMsg=errMsg;
},
getExprTemp(){
this.$get('/expression/tmpl/gname').then(res=>{
if(res.code===200){
res.data.list.forEach(item=>{
this.metricOptions.unshift({
label:item,
value:item,
children:[],
temp:true,
child:false,
});
})
}
})
},
lazyLoad(node,data){
console.log(node,data);
if(data.temp){
if(!data.child){
this.tempBoxShowLoading=true;
this.$get('/expression/tmpl?pageSize=-1&gname='+data.value).then(res=>{
this.tempBoxShowLoading=false;
if(res.code===200){
res.data.list.forEach(item=>{
item.label=item.name;
item.value=false;
item.temp=true;
item.child=true;
});
this.metricOptions.find(item=>item.value===data.value).children=res.data.list;
}
})
}else{
this.dropDownVisible=false
this.$get('/expression/tmpl/'+data.id).then(res=>{
if(res.code===200){
console.log(res);
res.data.vars.forEach(item=>{
res.data[item]='';
});
console.log(res.data);
this.tempBox={
...this.tempBox,
...res.data,
};
setTimeout(()=>{
this.tempBoxShow=true;
},100)
}
})
}
}
},
tempBoxShowChange(flag){
this.tempBoxShow=flag;
console.log(this.tempBox);
if(flag){
this.cascaderValue="";
let params={};
params.expression=this.tempBox.expression;
params.varsVal={};
let returnFlag=false
let errorStr=""
this.tempBox.vars.forEach((item)=>{
params.varsVal[item]=this.tempBox[item];
if(!this.tempBox[item]){
errorStr+=item + ","
returnFlag=true;
}
});
if(returnFlag) {
this.$message({
message: this.$t('config.exprTemp.errorStr',{errorStr:errorStr}),
type: 'error'
});
return
}
this.$post('/expression/tmpl/render',params).then(res=>{
console.log(res);
if(res.code===200){
this.tempBoxShow=false;
this.expressionList[this.index]=res.data.expression;
this.$emit('change',res.data.expression);
}
})
} else{
this.tempBox={}
}
},
format(str){
let arr=str.split('.')
let keyword=arr[0].toLowerCase();
if(arr.length!==1&&arr.length!==2){
return {
key:false
}
}
switch(keyword){
case 'asset':
case 'module':
case 'endpoint':
case 'datacenter':
case 'project':
return {
arr:this[keyword+'Option'],
key:keyword,
value:arr[1]?arr[1]:((keyword=='module'||keyword=='project'||keyword=='datacenter')?'name':'host')
};
default:
return {
key:false
}
}
},
getAllOptins(){
this.$get('idc',{pageNo:1,pageSize:-1}).then(response=>{
if(response.code==200){
this.datacenterOption=response.data.list;
}
});
this.$get('asset',{pageNo:1,pageSize:-1}).then(response=>{
if(response.code==200){
this.assetOption=response.data.list;
}
});
this.$get('project',{pageNo:1,pageSize:-1}).then(response=>{
if(response.code==200){
this.projectOption=response.data.list;
}
});
this.$get('module',{pageNo:1,pageSize:-1}).then(response=>{
if(response.code==200){
this.moduleOption=response.data.list;
}
});
this.$get('endpoint',{pageNo:1,pageSize:-1}).then(response=>{
if(response.code==200){
this.endpointOption=response.data.list;
}
});
}
/*setMsg:function(){
this.appendMsg
}*/
},
watch:{
dropDownVisible:function(n,o){
if(this.$refs.metricSelector){
this.$refs.metricSelector.dropDownVisible=n;
if(!this.expressionList[this.index]||this.expressionList[this.index]==''){
this.cascaderValue="";
}
}
},
},
}
</script>
<style scoped lang="scss">
.promqlInput{
.promqlInput {
position: relative;
width: 100%;
display: flex;
margin-bottom: 18px;
}
.promqlInput .query-row{
.promqlInput .query-row {
width: 100%;
}
.input-box .append-msg{
.input-box .append-msg {
font-size: 12px;
line-height: 1;
padding-top: 4px;
}
.input-box .error{
.input-box .error {
color: #F56C6C;
}
.query-row .query-input{
.query-row .query-input {
display: flex;
justify-content: flex-start;
}
.promqlInput .query-options{
.promqlInput .query-options {
/*display: flex;*/
/*justify-content: flex-start;*/
/*width: 84px;*/
}
.query-options .option{
.query-options .option {
/*border-right: 1px solid #dde4ed;*/
/*border-radius: 3px;*/
/*background-color: #dde4ed;*/
@@ -230,33 +487,40 @@
line-height: 30px;
text-align: center;
}
.query-options .option:focus,.query-options .option:hover{
.query-options .option:focus, .query-options .option:hover {
background-color: #CCD7E4;
}
.query-input .metric-btn {
width: 100px;
margin-right: 10px;
}
.query-input .input-box{
.query-input .input-box {
width: 100%;
height: 100%;
}
.metric-btn{
.metric-btn {
height: 29px !important;
width: 105px;
margin-left: 1px;
}
.metric-btn:hover ,.metric-btn:focus {
.metric-btn:hover, .metric-btn:focus {
background-color: #CCD7E4;
color:#606266;
color: #606266;
}
.metric-selector .el-cascader-panel{
.metric-selector .el-cascader-panel {
height: 300px;
position: absolute;
z-index: 2100;
background-color: #FFF;
}
.expr-title{
.expr-title {
width: 120px;
padding-right: 20px;
text-align: right;
@@ -265,13 +529,56 @@
letter-spacing: 0;
line-height: 22px;
}
/deep/ .el-cascader-node {
padding: 0;
}
/deep/ .el-cascader-menu:last-child .el-cascader-node, /deep/ .el-cascader-node__label {
padding: 0;
}
.nz-cascade {
padding: 0 20px 0 30px;
}
.nz-cascade-temp {
background: #F8F9FB;
}
.temp-form-box{
width: 480px;
}
.temp-form-box .temp-form-box-title{
font-family: PingFangSC-Medium;
font-size: 14px;
color: #666666;
letter-spacing: 0;
font-weight: 600;
margin-bottom: 5px;
}
.temp-form-box .temp-form-box-col{
margin-right: 10px;
}
</style>
<style>
.metric-selector-pop{
position:relative;
.metric-selector-pop {
position: relative;
z-index: 2100;
}
.input-box .el-input__inner{
.input-box .el-input__inner {
height: 30px;
}
.nz-temp-box /deep/ .el-dialog__body{
padding: 10px 20px 0 20px;
}
.nz-temp-box /deep/ .el-dialog__footer{
margin-top: 0;
}
.nz-temp-box .nz-btn-style-light-new{
margin-right: 10px;
}
.nz-temp-box .nz-btn-style-normal-new{
margin-left: 10px;
}
</style>

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

@@ -92,6 +92,10 @@ export default new Router({
{
path: '/alertSilence',
component: resolve => require(['../components/page/alert/silence.vue'], resolve),
},
{
path: '/exprtemp',
component: resolve => require(['../components/page/config/exprTemp.vue'], resolve),
}
]
},