feat：Nez-506 新增表达式模板功能
This commit is contained in:
zhangyu
@@ -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
|
||||
<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 <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 <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 <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>
|
||||
|
||||
Reference in New Issue
Block a user