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

temp: 暴雨预警，先提交闪人回家做

Browse Source
This commit is contained in:
chenjinsong
2020-07-02 20:10:16 +08:00
parent b15f887319
commit 37dad22498
7 changed files with 186 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1779,7 +1779,7 @@ li{
line-height: 25px !important; line-height: 25px !important;
} }
.el-textarea textarea { .el-textarea:not(.not-fixed-height) textarea {
height: 140px !important; height: 140px !important;
} }
.nz-message .el-textarea textarea { .nz-message .el-textarea textarea {

1
nezha-fronted/src/components/charts/chart-detail.vue
View File

@@ -390,6 +390,7 @@
show:true, show:true,
} }
}); });
console.info(labels)
return labels; return labels;
}, },
replaceSplit(key){ replaceSplit(key){

152
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -169,7 +169,10 @@
<el-input size="mini" type="input" v-model="chart.param.threshold"></el-input> <el-input size="mini" type="input" v-model="chart.param.threshold"></el-input>
</el-form-item> </el-form-item>
<div v-if="!isUrl&&!isAlert" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div> <div v-if="!isUrl&&!isAlert" class="right-box-sub-title">
<span>{{$t('alert.config.expr')}}</span>
<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div>
<div v-if="isAlert" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div> <div v-if="isAlert" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
<div v-if="!isUrl" class="line-100"></div> <div v-if="!isUrl" class="line-100"></div>
@@ -177,8 +180,8 @@
<alert-chart-param ref="alertParamBox" @on-enter-complate="getAlertParam"></alert-chart-param> <alert-chart-param ref="alertParamBox" @on-enter-complate="getAlertParam"></alert-chart-param>
</el-row> </el-row>
<el-row v-if="!isUrl && !isSingleStat&&!isAlert" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index"> <el-row v-if="!isUrl && !isSingleStat&&!isAlert" class="element-item" v-for="index of promqlKeys.length" :key="'ele' + index">
<chart-metric ref="chartTag" <!--<chart-metric ref="chartTag"
:pointer="index" :pointer="index"
:metric-list="metricList" :metric-list="metricList"
:metricCascaderList="metricCascaderList" :metricCascaderList="metricCascaderList"
@@ -187,7 +190,29 @@
@on-delete-target="deleteTarget" @on-delete-target="deleteTarget"
@sub-save-ok="subOk" @sub-save-ok="subOk"
@on-add-target-success="getTarget" @on-add-target-success="getTarget"
></chart-metric> ></chart-metric>-->
<promql-input
:ref="'promql-'+(index-1)"
:id="promqlKeys[index-1]"
:key="promqlKeys[index-1]"
:expression-list.sync="expressions"
:index="index-1"
:styleType="2"
:plugins="['metric', 'remove']"
@change="expressionChange"
@removeExpression="removeExpression"
></promql-input>
<el-row>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
<i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
</el-popover>
</el-col>
<el-col style="width: calc(100% - 120px);">
<el-input v-model="legends[index-1]" type="text" size="mini"></el-input>
</el-col>
</el-row>
</el-row> </el-row>
<el-row v-if="isSingleStat" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index"> <el-row v-if="isSingleStat" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
@@ -220,9 +245,9 @@
</el-row> </el-row>
</el-form-item> </el-form-item>
--> -->
<button v-if="!isUrl && !isSingleStat&& !isAlert" type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;"> <!--<button v-if="!isUrl && !isSingleStat&& !isAlert" type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
<span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span> <span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
</button> </button>-->
</el-form> </el-form>
</el-scrollbar> </el-scrollbar>
@@ -250,19 +275,36 @@
import ChartMetric from "./chartMetric"; import ChartMetric from "./chartMetric";
import chartDataFormat from '../../charts/chartDataFormat'; import chartDataFormat from '../../charts/chartDataFormat';
import chartPreview from '../../charts/chartPreview'; import chartPreview from '../../charts/chartPreview';
import {getUUID, resetZIndex} from "../../common/js/common";
import alertChartParam from "./alertChartParam"; import alertChartParam from "./alertChartParam";
import promqlInput from "./explore/promqlInput";
var rz = {
methods: {
rz(e) {
resetZIndex(e);
}
}
}
export default { export default {
name: "chartBox", name: "chartBox",
props: { props: {
panelData: Array, panelData: Array,
showPanel: Object showPanel: Object
}, },
mixins: [rz],
data() { data() {
return { return {
rightBox: { rightBox: {
show: false, show: false,
title: this.$t('dashboard.panel.createChartTitle'), title: this.$t('dashboard.panel.createChartTitle'),
}, },
promqlCount: 1,
promqlKeys: [],
elementIds: [],
expressions: [],
legends: [],
editInfo: {}, editInfo: {},
chart: { chart: {
id:'', id:'',
@@ -275,12 +317,7 @@
url:'', url:'',
threshold:'', threshold:'',
}, },
elements:{ elements:[],
id: '',
expression: '',
type: '',
legend:'',
},
panel: '', panel: '',
sync: 0 sync: 0
}, },
@@ -352,20 +389,21 @@
components:{ components:{
'chart-metric':ChartMetric, 'chart-metric':ChartMetric,
'chart-preview':chartPreview, 'chart-preview':chartPreview,
'alert-chart-param':alertChartParam 'alert-chart-param':alertChartParam,
'promql-input': promqlInput,
}, },
mounted() { mounted() {
if(this.showPanel){
this.panelName2 = this.showPanel.name;
}
this.rightBox.show = true;
this.isUrl = false;
this.isSingleStat = false;
this.$nextTick(() => {
this.initElements();
});
}, },
methods: { methods: {
show(show) {
if(this.showPanel){
this.panelName2 = this.showPanel.name;
}
this.rightBox.show = show;
this.isUrl = false;
this.isSingleStat = false;
},
clickos() { clickos() {
this.esc(); this.esc();
}, },
@@ -415,6 +453,25 @@
setUnit:function(unit){ setUnit:function(unit){
this.$set(this.chart,'unit',Number.parseInt(unit)) this.$set(this.chart,'unit',Number.parseInt(unit))
}, },
expressionChange: function () {
},
addExpression() {
this.expressions.push('');
this.legends.push('');
this.promqlKeys.push(getUUID());
this.elementIds.push("");
this.promqlCount++;
},
removeExpression: function (index) {
if (this.promqlCount > 1) {
this.expressions.splice(index, 1);
this.legends.splice(index, 1);
this.promqlKeys.splice(index, 1);
this.elementIds.splice(index, 1);
this.promqlCount--;
}
},
save() { save() {
this.$refs['chartForm'].validate((valid) => { this.$refs['chartForm'].validate((valid) => {
if (valid) { if (valid) {
@@ -471,13 +528,17 @@
/*关闭弹框*/ /*关闭弹框*/
esc() { esc() {
if (this.rightBox.show) { this.rightBox.show = false;
setTimeout(() => {
this.$parent.rightBox.show = false;
}, 200);
/*if (this.rightBox.show) {
this.rightBox.show = false; this.rightBox.show = false;
//this.editParamBox.show = false; //this.editParamBox.show = false;
this.$refs.chartForm.resetFields();//清空表单 this.$refs.chartForm.resetFields();//清空表单
this.panelName2 = ''; this.panelName2 = '';
this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮 this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮
} }*/
}, },
/*metric部分相关方法--begin*/ /*metric部分相关方法--begin*/
@@ -597,7 +658,7 @@
let interval = setInterval(() => { let interval = setInterval(() => {
if (panelId) { if (panelId) {
this.panelId = panelId; this.panelId = panelId;
this.$post('panel/' + this.panelId + '/charts', params).then(response => { this.$post('panel/' + this.panelId + '/charts', params ? params : this.chart).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.esc(); this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
@@ -736,14 +797,21 @@
confirmAdd() { confirmAdd() {
this.elementTarget = []; // 初始化清空参数 this.elementTarget = []; // 初始化清空参数
if(this.chart.type!=='url'){ if(this.chart.type!=='url'){
if(this.chart.type == 'alertList'){ /*if(this.chart.type == 'alertList'){
this.$refs.alertParamBox.saveParam(); this.$refs.alertParamBox.saveParam();
}else{ }else{
this.$refs.chartTag.forEach((item, index) => {//循环指标列表 this.$refs.chartTag.forEach((item, index) => {//循环指标列表
// 触发每个tag组件内部进行校验 // 触发每个tag组件内部进行校验
item.saveTarget(index); item.saveTarget(index);
}); });
}*/
if (this.expressions[0]) {
this.chart.elements = [];
this.expressions.forEach((expr, i) => {
this.chart.elements.push({id: this.elementIds[i], expression: expr, type: "expert", legend: this.legends[i]});
});
} }
this.addCharts();
}else { }else {
this.$refs.chartForm.validate((valid) => { this.$refs.chartForm.validate((valid) => {
const params = { const params = {
@@ -898,13 +966,14 @@
this.chart.height = data.height+''; this.chart.height = data.height+'';
this.chart.type = data.type; this.chart.type = data.type;
this.chart.unit=data.unit; this.chart.unit=data.unit;
this.chart.elements = data.elements;
if(this.chart.type==='url'){ if(this.chart.type==='url'){
this.chart.param.url = data.param.url; this.chart.param.url = data.param.url;
this.setIsUrl(); this.setIsUrl();
this.elements = [1]; //this.elements = [1];
}else if(this.chart.type==='singleStat'){ }else if(this.chart.type==='singleStat'){
this.setIsSingleStat(); this.setIsSingleStat();
this.elements = []; /*this.elements = [];
bus.chartAddInfo.metricTarget = []; bus.chartAddInfo.metricTarget = [];
data.elements.forEach((item, index) => { data.elements.forEach((item, index) => {
this.elements.push(index); this.elements.push(index);
@@ -915,11 +984,11 @@
cSet.forEach((item, index) => { cSet.forEach((item, index) => {
item.setMdata(data.elements[index],data.param.statistics); item.setMdata(data.elements[index],data.param.statistics);
}); });
}); });*/
}else if(this.chart.type==='alertLine'){ }else if(this.chart.type==='alertLine'){
this.chart.param=data.param; this.chart.param=data.param;
this.setIsAlertList(); this.setIsAlertList();
this.elements=[1]; //this.elements=[1];
}else{ }else{
if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea')&&data.param){ if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea')&&data.param){
this.chart.param.threshold=data.param.threshold; this.chart.param.threshold=data.param.threshold;
@@ -929,7 +998,7 @@
this.setIsOtherChart(); this.setIsOtherChart();
//this.getSuggestMetric();//获得指标列表 //this.getSuggestMetric();//获得指标列表
// 指标 // 指标
this.elements = []; /*this.elements = [];
bus.chartAddInfo.metricTarget = []; bus.chartAddInfo.metricTarget = [];
data.elements.forEach((item, index) => { data.elements.forEach((item, index) => {
this.elements.push(index); this.elements.push(index);
@@ -947,7 +1016,7 @@
item.setMdata(data.elements[index]); item.setMdata(data.elements[index]);
}); });
} }
}); });*/
} }
}, },
@@ -1087,7 +1156,24 @@
//this.$refs.chartForm.validate(); //this.$refs.chartForm.validate();
}, },
//preview--end //preview--end
initElements() {
if (!this.chart.elements || this.chart.elements.length == 0) {
this.chart.elements = [{expression: "", legend: "", type: "expert"}];
}
this.chart.elements.forEach(element => {
this.promqlKeys.push(getUUID());
this.expressions.push(element.expression);
this.legends.push(element.legend);
this.elementIds.push(element.id);
});
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
this.$refs[`promql-${index}`][0].metricChange(ex);
}
});
});
},
}, },
created() { created() {
this.getSuggestMetric(); this.getSuggestMetric();

44
nezha-fronted/src/components/page/dashboard/explore/editor.vue
View File

@@ -75,13 +75,13 @@
this.dealSpecilChar(char,operation); this.dealSpecilChar(char,operation);
if(this.pivotalCursorIndex!=0){ if(this.pivotalCursorIndex!=0){
console.log('pivotalCursorIndex',this.pivotalCursorIndex,'cursorIndex',this.cursorIndex) //console.log('pivotalCursorIndex',this.pivotalCursorIndex,'cursorIndex',this.cursorIndex)
newContent=newContent.substring(this.pivotalCursorIndex,this.cursorIndex); newContent=newContent.substring(this.pivotalCursorIndex,this.cursorIndex);
} }
this.filterItems(newContent); this.filterItems(newContent);
}, },
dealSpecilChar:function(char,operation){ dealSpecilChar:function(char,operation){
console.log('specil char',char) //console.log('specil char',char)
if(/^[\{\(\[\,]$/g.test(char)){ if(/^[\{\(\[\,]$/g.test(char)){
if(operation=='insert'){ if(operation=='insert'){
if(char == '{'||char==','){ if(char == '{'||char==','){
@@ -134,7 +134,7 @@
} }
this.pivotalCursorIndex=tempIndex+1; this.pivotalCursorIndex=tempIndex+1;
console.log('after del double char',this.pivotalCursorIndex) //console.log('after del double char',this.pivotalCursorIndex)
}, },
changeSuggestions:function(type){ changeSuggestions:function(type){
if(type == 'label'){ if(type == 'label'){
@@ -183,7 +183,7 @@
let rangeReg=/\[\b(\d+[smdwy])\b\]/ig let rangeReg=/\[\b(\d+[smdwy])\b\]/ig
if(rangeReg.test(this.content)){ if(rangeReg.test(this.content)){
let matchs=this.globalMatch(rangeReg,this.content); let matchs=this.globalMatch(rangeReg,this.content);
console.log('matchs',matchs) //console.log('matchs',matchs)
matchs.forEach(item=>{ matchs.forEach(item=>{
this.quill.formatText(item.index+1,item[1].length,{'color':'#9954bb'},'silent') this.quill.formatText(item.index+1,item[1].length,{'color':'#9954bb'},'silent')
}) })
@@ -213,7 +213,7 @@
editExpression=item; editExpression=item;
} }
}) })
console.log('match',match,'isInnerExpress',isInnerExpression) //console.log('match',match,'isInnerExpress',isInnerExpression)
if(isInnerExpression&&editExpression){ if(isInnerExpression&&editExpression){
let expression=editExpression[0]; let expression=editExpression[0];
let labelValuesReg=/\{((\w*?(=|!=|=~|!~).*?,{0,1})+?)\}/ let labelValuesReg=/\{((\w*?(=|!=|=~|!~).*?,{0,1})+?)\}/
@@ -238,7 +238,7 @@
} }
}else{ }else{
console.log('mo match metric') //console.log('mo match metric')
this.queryTypeInfos(); this.queryTypeInfos();
} }
}, },
@@ -273,7 +273,7 @@
tempCounter--; tempCounter--;
} }
let label=this.content.substring(boundaryIndex,equalIndex); let label=this.content.substring(boundaryIndex,equalIndex);
console.log('label',this.content.substring(boundaryIndex,equalIndex)) //console.log('label',this.content.substring(boundaryIndex,equalIndex))
let values=this.labelValues.get(label); let values=this.labelValues.get(label);
@@ -308,7 +308,7 @@
} }
} }
} }
console.log('query metric',editMetricExpression) //console.log('query metric',editMetricExpression)
let metric=/([a-zA-Z_]\w*)\b(?=\{)/.exec(editMetricExpression)[0]; let metric=/([a-zA-Z_]\w*)\b(?=\{)/.exec(editMetricExpression)[0];
let timeRange=this.getDefaultTimeRange(); let timeRange=this.getDefaultTimeRange();
this.$get('/prom/api/v1/series?match[]={__name__="'+metric+'"}&start='+timeRange[0]+"&end="+timeRange[1]).then(response=>{ this.$get('/prom/api/v1/series?match[]={__name__="'+metric+'"}&start='+timeRange[0]+"&end="+timeRange[1]).then(response=>{
@@ -343,7 +343,7 @@
this.noStyleSuggestions={labels:labels} this.noStyleSuggestions={labels:labels}
this.showSuggestions=this.deepClone(this.noStyleSuggestions); this.showSuggestions=this.deepClone(this.noStyleSuggestions);
console.log('change labels',this.showSuggestions) //console.log('change labels',this.showSuggestions)
}else{ }else{
this.noStyleSuggestions={}; this.noStyleSuggestions={};
this.showSuggestions=this.deepClone(this.noStyleSuggestions) this.showSuggestions=this.deepClone(this.noStyleSuggestions)
@@ -357,7 +357,7 @@
return[(start.getTime()/1000).toFixed(0),(end.getTime()/1000).toFixed(0)] return[(start.getTime()/1000).toFixed(0),(end.getTime()/1000).toFixed(0)]
}, },
handleItemClick:function(type,item,event){ handleItemClick:function(type,item,event){
console.log(type,item,event) //console.log(type,item,event)
if(type=='metrics'){ if(type=='metrics'){
this.handleMetricClick(item) this.handleMetricClick(item)
}else if(type == 'labels'){ }else if(type == 'labels'){
@@ -504,7 +504,7 @@
let typeValues=suggestions[key]; let typeValues=suggestions[key];
typeValues=typeValues.filter(item=>{ typeValues=typeValues.filter(item=>{
let index=item.insertText.toLowerCase().indexOf(input.toLowerCase()); let index=item.insertText.toLowerCase().indexOf(input.toLowerCase());
console.log('index',index,'input',input) //console.log('index',index,'input',input)
if(index != -1){ if(index != -1){
// console.log('item',item.label,'input',input) // console.log('item',item.label,'input',input)
// item.label=item.label.replace(input,`<mark>${input}</mark>`); // item.label=item.label.replace(input,`<mark>${input}</mark>`);
@@ -534,7 +534,7 @@
this.$nextTick(()=>{ this.$nextTick(()=>{
let suggestions=document.querySelectorAll('.popper-item'); let suggestions=document.querySelectorAll('.popper-item');
this.storedSuggestions=[...suggestions]; this.storedSuggestions=[...suggestions];
console.log('storedSuggestions->',suggestions) //console.log('storedSuggestions->',suggestions)
}) })
}, },
setContent:function(value){ setContent:function(value){
@@ -566,14 +566,14 @@
return new Promise(function(resolve,reject){ return new Promise(function(resolve,reject){
$temp.$nextTick(()=>{ $temp.$nextTick(()=>{
let range=$temp.quill.getSelection(); let range=$temp.quill.getSelection();
console.log('range',range) //console.log('range',range)
if(range&&range.length == 0){ if(range&&range.length == 0){
$temp.cursorIndex=range.index; $temp.cursorIndex=range.index;
console.log('current cursor-->',$temp.cursorIndex) //console.log('current cursor-->',$temp.cursorIndex)
if(/^[\{\(\[,= "]$/g.test(char)){ if(/^[\{\(\[,= "]$/g.test(char)){
$temp.pivotalCursorIndex=$temp.cursorIndex; $temp.pivotalCursorIndex=$temp.cursorIndex;
console.log('store pivotalCursorIndex',$temp.pivotalCursorIndex) //console.log('store pivotalCursorIndex',$temp.pivotalCursorIndex)
} }
resolve(); resolve();
} }
@@ -590,7 +590,7 @@
}, },
moveScroll:function(){ moveScroll:function(){
let scroll=this.$refs.scroll.wrap; let scroll=this.$refs.scroll.wrap;
console.log('scroll',scroll) //console.log('scroll',scroll)
if(scroll){ if(scroll){
let curScroll=scroll.scrollTop;//滚动条当前位置 let curScroll=scroll.scrollTop;//滚动条当前位置
let scrollLen=scroll.scrollHeight;//滚动条总长 let scrollLen=scroll.scrollHeight;//滚动条总长
@@ -652,7 +652,7 @@
getPosition:function(){ getPosition:function(){
this.$nextTick(()=>{ this.$nextTick(()=>{
this.popperPos=this.quill.getBounds(this.cursorIndex) this.popperPos=this.quill.getBounds(this.cursorIndex)
console.log('position:',this.popperPos) //console.log('position:',this.popperPos)
}) })
}, },
guid() { guid() {
@@ -664,7 +664,7 @@
registerKeydown:function(){ registerKeydown:function(){
let $temp=this; let $temp=this;
document.addEventListener('keydown',function(event){ document.addEventListener('keydown',function(event){
console.log('keydown',event) //console.log('keydown',event)
$temp.toggleSelect(event); $temp.toggleSelect(event);
}) })
@@ -745,11 +745,11 @@
this.options.modules.keyboard.bindings=bindings; this.options.modules.keyboard.bindings=bindings;
this.quill = new Quill(this.$refs.editor, this.options); this.quill = new Quill(this.$refs.editor, this.options);
this.quill.on('blur',function(){ this.quill.on('blur',function(){
console.log('quill blur') //console.log('quill blur')
}) })
this.quill.on('text-change',function(delta, oldDelta, source){ this.quill.on('text-change',function(delta, oldDelta, source){
if(source != 'silent'){ if(source != 'silent'){
console.log('delta',delta,'oldDelta',oldDelta,'source',source) //console.log('delta',delta,'oldDelta',oldDelta,'source',source)
let char='',operation=''; let char='',operation='';
let oldContent=''; let oldContent='';
oldDelta.ops.forEach((item,index)=>{ oldDelta.ops.forEach((item,index)=>{
@@ -780,14 +780,14 @@
} }
let promise=$temp.storeCursor(char); let promise=$temp.storeCursor(char);
if(source == 'user'){ if(source == 'user'){
console.log(delta,oldDelta,oldContent) //console.log(delta,oldDelta,oldContent)
let newContent=$temp.getContent() let newContent=$temp.getContent()
promise.then(()=>{ //存储完光标后再进行后面的操作 promise.then(()=>{ //存储完光标后再进行后面的操作
$temp.userChange(char,operation,newContent,oldContent) $temp.userChange(char,operation,newContent,oldContent)
}) })
} }
$temp.content=$temp.getContent(); $temp.content=$temp.getContent();
console.log('current content-->',$temp.content) //console.log('current content-->',$temp.content)
$temp.getPosition(); $temp.getPosition();
$temp.formatContent(); $temp.formatContent();
} }

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

@@ -35,6 +35,8 @@
:key="promqlKeys[index-1]" :key="promqlKeys[index-1]"
:expression-list="expressions" :expression-list="expressions"
:index="index-1" :index="index-1"
:styleType="1"
:plugins="['metric', 'add', 'remove']"
@change="expressionChange" @change="expressionChange"
@addExpression="addExpression" @addExpression="addExpression"
@removeExpression="removeExpression" @removeExpression="removeExpression"

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

@@ -2,25 +2,37 @@
<div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'50px':'36px'}"> <div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'50px':'36px'}">
<div class="query-row"> <div class="query-row">
<div class="query-input"> <div class="query-input">
<div class="metricBtn"> <template v-if="styleType == 1">
<el-dropdown class="metric-selector" > <div class="metricBtn" v-if="plugins.indexOf('metric') > -1">
<el-dropdown-menu style="display: none"></el-dropdown-menu> <el-dropdown class="metric-selector" >
<el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric &nbsp;<i class="el-icon-arrow-down"></i></el-button> <el-dropdown-menu style="display: none"></el-dropdown-menu>
<el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange"></el-cascader-panel> <el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric &nbsp;<i class="el-icon-arrow-down"></i></el-button>
</el-dropdown> <el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange"></el-cascader-panel>
</div> </el-dropdown>
<div class="inputBox" @click="dropDownVisible=false"> </div>
<!-- <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>--> <div class="inputBox" @click="dropDownVisible=false">
<editor :metric-list="metricStore" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor> <!-- <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>-->
<div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div> <editor :metric-list="metricStore" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
<div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div> <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
</div> <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
</div>
</template>
<template v-if="styleType == 2">
<el-row v-if="plugins.indexOf('metric') > -1">
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
Metric&nbsp;<i class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;"></i>
</el-col>
<el-col style="width: calc(100% - 120px);">
<el-input v-model="legends[index-1]" type="text" size="mini"></el-input>
</el-col>
</el-row>
</template>
</div> </div>
</div> </div>
<div style="margin-left: 5px"> <div style="margin-left: 5px">
<div class="query-options nz-btn-group nz-btn-group-size-normal nz-btn-group-light"> <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"><i class="el-icon-plus"></i></div> <div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="el-icon-plus"></i></div>
<div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="removeExpression"><i class="el-icon-minus"></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="el-icon-minus"></i></div>
</div> </div>
</div> </div>
@@ -36,7 +48,9 @@
}, },
props:{ props:{
index:{type:Number}, index:{type:Number},
expressionList:{} expressionList:{},
plugins: {type: Array},
styleType: Number
}, },
data(){ data(){
return { return {

18
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -104,7 +104,7 @@
</left-menu> </left-menu>
<panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box> <panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
<chart-box ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box> <chart-box v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
</div> </div>
</template> </template>
@@ -289,9 +289,11 @@
}, },
/*图表相关操作--start*/ /*图表相关操作--start*/
toAddChart: function () { toAddChart: function () {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle")); this.rightBox.show = true;
this.$refs.addChartModal.show(true); this.$nextTick(() => {
this.$refs.addChartModal.createData(this.showPanel.id); //初始化创建图表需要的初始数据 this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
this.$refs.addChartModal.createData(this.showPanel.id); //初始化创建图表需要的初始数据
});
}, },
scrollbarHeightHandler() { scrollbarHeightHandler() {
setTimeout(() => { setTimeout(() => {
@@ -315,9 +317,11 @@
}, },
// 编辑图表信息,打开编辑弹窗 // 编辑图表信息,打开编辑弹窗
editData(data) { editData(data) {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle")); this.rightBox.show = true;
this.$refs.addChartModal.show(true); this.$nextTick(() => {
this.$refs.addChartModal.editData(data, this.showPanel.id); this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
this.$refs.addChartModal.editData(data, this.showPanel.id);
});
}, },
// 移除图表:弹出确认框询问 // 移除图表:弹出确认框询问
removeData(data,from) { removeData(data,from) {