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

Merge branch 'codeCheck' of https://git.mesalab.cn/nezha/nezha-fronted into codeCheck

Browse Source
This commit is contained in:
zhangyu
2020-07-03 17:28:11 +08:00
parent 40e82df11a 6ee3e69529
commit a0ce182a49
9 changed files with 287 additions and 109 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;
}
.el-textarea textarea {
.el-textarea:not(.not-fixed-height) textarea {
height: 140px !important;
}
.nz-message .el-textarea textarea {

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

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

5
nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
View File

@@ -67,7 +67,7 @@
</div>
<button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
<chart-box ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
<chart-box v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
</div>
</template>
@@ -186,8 +186,9 @@
},
/*图表相关操作--start*/
toAddChart: function () {
this.rightBox.show = true;
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
this.$refs.addChartModal.show(true);
//this.$refs.addChartModal.show(true);
this.$refs.addChartModal.createData(this.panelId); //初始化创建图表需要的初始数据
},
// 切换tab

30
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
View File

@@ -28,10 +28,17 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div>
</el-form-item>
<!--expr-->
<el-form-item :label="$t('alert.config.expr')" prop="expr">
<!--<el-form-item :label="$t('alert.config.expr')" prop="expr">
<el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model="alertRule.expr" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div>
</el-form-item>
</el-form-item>-->
<promql-input
ref="promql"
:expression-list.sync="expressions"
:index="0"
:styleType="2"
:plugins="['metric-input']"
></promql-input>
<!--operator-->
<el-form-item :label="$t('alert.config.operator')" prop="operator" style="width: 400px;display: inline-block;">
<el-select v-if="rightBox.isEdit" popper-class="config-dropdown" v-model="alertRule.operator" placeholder="" size="small">
@@ -122,14 +129,22 @@
<script>
import chartDataFormat from "../../charts/chartDataFormat";
import promqlInput from "../../page/dashboard/explore/promqlInput";
export default {
name: "alertConfigBox",
props: {
parentAlertRule: Object
},
components: {
'promql-input': promqlInput,
},
data() {
return {
promqlCount: 1,
promqlKeys: [0],
expressions: [''],
legends: [''],
alertRule: {id: '', receiverShow: [], receiver: ''},
rightBox: {show: false, isEdit: false, title: ''},
rules:{
@@ -235,6 +250,7 @@
this.rightBox.isEdit = isEdit;
},
save: function() {
this.alertRule.expr = this.expressions[0];
this.$refs.alertRuleForm.validate((valid) => {
if (valid) {
this.alertRule.receiver = this.alertRule.receiverShow.join(",");
@@ -340,6 +356,14 @@
} else if (this.alertRule.type == 3) {
this.getAssetList();
}
this.expressions = [this.alertRule.expr];
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
this.$refs.promql.metricChange(ex);
}
});
});
}
if (this.rightBox.show) {
if (this.rightBox.isEdit && this.alertRule.id) {

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

@@ -41,6 +41,7 @@
.element-item {
padding: 20px 0;
border-bottom: 1px dashed #dfe7f2;
width: 100%;
}
/*metric样式--end*/
.label-center{
@@ -169,7 +170,10 @@
<el-input size="mini" type="input" v-model="chart.param.threshold"></el-input>
</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="!isUrl" class="line-100"></div>
@@ -177,8 +181,8 @@
<alert-chart-param ref="alertParamBox" @on-enter-complate="getAlertParam"></alert-chart-param>
</el-row>
<el-row v-if="!isUrl && !isSingleStat&&!isAlert" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
<chart-metric ref="chartTag"
<el-row v-if="!isUrl && !isSingleStat&&!isAlert" class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<!--<chart-metric ref="chartTag"
:pointer="index"
:metric-list="metricList"
:metricCascaderList="metricCascaderList"
@@ -187,7 +191,29 @@
@on-delete-target="deleteTarget"
@sub-save-ok="subOk"
@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-selector', 'metric-input', '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="small"></el-input>
</el-col>
</el-row>
</el-row>
<el-row v-if="isSingleStat" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
@@ -220,9 +246,9 @@
</el-row>
</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>
</button>
</button>-->
</el-form>
</el-scrollbar>
@@ -250,19 +276,36 @@
import ChartMetric from "./chartMetric";
import chartDataFormat from '../../charts/chartDataFormat';
import chartPreview from '../../charts/chartPreview';
import {getUUID, resetZIndex} from "../../common/js/common";
import alertChartParam from "./alertChartParam";
import promqlInput from "./explore/promqlInput";
var rz = {
methods: {
rz(e) {
resetZIndex(e);
}
}
}
export default {
name: "chartBox",
props: {
panelData: Array,
showPanel: Object
},
mixins: [rz],
data() {
return {
rightBox: {
show: false,
title: this.$t('dashboard.panel.createChartTitle'),
},
promqlCount: 1,
promqlKeys: [],
elementIds: [],
expressions: [],
legends: [],
editInfo: {},
chart: {
id:'',
@@ -275,12 +318,7 @@
url:'',
threshold:'',
},
elements:{
id: '',
expression: '',
type: '',
legend:'',
},
elements:[],
panel: '',
sync: 0
},
@@ -352,20 +390,21 @@
components:{
'chart-metric':ChartMetric,
'chart-preview':chartPreview,
'alert-chart-param':alertChartParam
'alert-chart-param':alertChartParam,
'promql-input': promqlInput,
},
mounted() {
if(this.showPanel){
this.panelName2 = this.showPanel.name;
}
this.rightBox.show = true;
this.isUrl = false;
this.isSingleStat = false;
this.$nextTick(() => {
this.initElements();
});
},
methods: {
show(show) {
if(this.showPanel){
this.panelName2 = this.showPanel.name;
}
this.rightBox.show = show;
this.isUrl = false;
this.isSingleStat = false;
},
clickos() {
this.esc();
},
@@ -415,6 +454,25 @@
setUnit:function(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() {
this.$refs['chartForm'].validate((valid) => {
if (valid) {
@@ -471,13 +529,17 @@
/*关闭弹框*/
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.editParamBox.show = false;
this.$refs.chartForm.resetFields();//清空表单
this.panelName2 = '';
this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮
}
}*/
},
/*metric部分相关方法--begin*/
@@ -597,7 +659,7 @@
let interval = setInterval(() => {
if (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) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
@@ -624,7 +686,7 @@
},
// 更新图表
updateCharts(params) {
this.$put('panel/' + this.panelId + '/charts', params).then(response2 => {
this.$put('panel/' + this.panelId + '/charts', params ? params : this.chart).then(response2 => {
if (response2.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
@@ -736,13 +798,24 @@
confirmAdd() {
this.elementTarget = []; // 初始化清空参数
if(this.chart.type!=='url'){
if(this.chart.type == 'alertList'){
/*if(this.chart.type == 'alertList'){
this.$refs.alertParamBox.saveParam();
}else{
this.$refs.chartTag.forEach((item, index) => {//循环指标列表
// 触发每个tag组件内部进行校验
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]});
});
}
if (this.chart.id) {
this.updateCharts();
} else {
this.addCharts();
}
}else {
this.$refs.chartForm.validate((valid) => {
@@ -898,13 +971,14 @@
this.chart.height = data.height+'';
this.chart.type = data.type;
this.chart.unit=data.unit;
this.chart.elements = data.elements;
if(this.chart.type==='url'){
this.chart.param.url = data.param.url;
this.setIsUrl();
this.elements = [1];
//this.elements = [1];
}else if(this.chart.type==='singleStat'){
this.setIsSingleStat();
this.elements = [];
/*this.elements = [];
bus.chartAddInfo.metricTarget = [];
data.elements.forEach((item, index) => {
this.elements.push(index);
@@ -915,11 +989,11 @@
cSet.forEach((item, index) => {
item.setMdata(data.elements[index],data.param.statistics);
});
});
});*/
}else if(this.chart.type==='alertLine'){
this.chart.param=data.param;
this.setIsAlertList();
this.elements=[1];
//this.elements=[1];
}else{
if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea')&&data.param){
this.chart.param.threshold=data.param.threshold;
@@ -929,7 +1003,7 @@
this.setIsOtherChart();
//this.getSuggestMetric();//获得指标列表
// 指标
this.elements = [];
/*this.elements = [];
bus.chartAddInfo.metricTarget = [];
data.elements.forEach((item, index) => {
this.elements.push(index);
@@ -947,7 +1021,7 @@
item.setMdata(data.elements[index]);
});
}
});
});*/
}
},
@@ -1087,7 +1161,24 @@
//this.$refs.chartForm.validate();
},
//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() {
this.getSuggestMetric();

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

@@ -1,15 +1,15 @@
<template>
<div class="metric-editor" v-clickoutside="clickout">
<div class="metric-editor" v-clickoutside="clickout" :class="{'metric-editor-rb': styleType == 2}">
<div :id="id" class="editor-core" ref="editor" ></div>
<span class="nz-input-append editor-clear" style="padding-top:8px;display: none" @click="clearContent"><i class="el-icon-circle-close"></i></span>
<span class="nz-input-append editor-clear" style="display: none" @click="clearContent"><i class="el-icon-circle-close"></i></span>
<div class="metric-editor-popper" :style="{left:popperPos.left+'px'}">
<div class="metric-popper-main" v-show="showType&&Object.keys(showSuggestions).length>0">
<el-scrollbar style="height: 100%;width:100%" class="el-scrollbar-small" ref="scroll">
<div v-for="(key, index) in orders" >
<div v-html="key" class="popper-group" v-show="showSuggestions[key]"></div>
<div class="popper-item" v-for="(item,i) in showSuggestions[key]" v-html="item.label" :key="item.insertText" :type="key" :value="item.insertText" @click.stop="handleItemClick(key,item,$event)" @mouseover="itemHover(item)" @mouseout="itemOut(item)"></div>
</div>
</el-scrollbar>
<el-scrollbar style="height: 100%;width:100%" class="el-scrollbar-small" ref="scroll">
<div v-for="(key, index) in orders" >
<div v-html="key" class="popper-group" v-show="showSuggestions[key]"></div>
<div class="popper-item" v-for="(item,i) in showSuggestions[key]" v-html="item.label" :key="item.insertText" :type="key" :value="item.insertText" @click.stop="handleItemClick(key,item,$event)" @mouseover="itemHover(item)" @mouseout="itemOut(item)"></div>
</div>
</el-scrollbar>
</div>
<div class="metric-popper-desc" v-if="showType&&Object.keys(showSuggestions).length>0&&showDescription && detailItem && detailItem.documentation">
<div><b>{{detailItem.insertText}}</b></div>
@@ -28,7 +28,8 @@
name: "editor",
props: {
value: String,
metricList:{type:Array}
metricList:{type:Array},
styleType: Number
},
model:{
prop:'value',
@@ -75,13 +76,13 @@
this.dealSpecilChar(char,operation);
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);
}
this.filterItems(newContent);
},
dealSpecilChar:function(char,operation){
console.log('specil char',char)
//console.log('specil char',char)
if(/^[\{\(\[\,]$/g.test(char)){
if(operation=='insert'){
if(char == '{'||char==','){
@@ -134,7 +135,7 @@
}
this.pivotalCursorIndex=tempIndex+1;
console.log('after del double char',this.pivotalCursorIndex)
//console.log('after del double char',this.pivotalCursorIndex)
},
changeSuggestions:function(type){
if(type == 'label'){
@@ -183,7 +184,7 @@
let rangeReg=/\[\b(\d+[smdwy])\b\]/ig
if(rangeReg.test(this.content)){
let matchs=this.globalMatch(rangeReg,this.content);
console.log('matchs',matchs)
//console.log('matchs',matchs)
matchs.forEach(item=>{
this.quill.formatText(item.index+1,item[1].length,{'color':'#9954bb'},'silent')
})
@@ -213,7 +214,7 @@
editExpression=item;
}
})
console.log('match',match,'isInnerExpress',isInnerExpression)
//console.log('match',match,'isInnerExpress',isInnerExpression)
if(isInnerExpression&&editExpression){
let expression=editExpression[0];
let labelValuesReg=/\{((\w*?(=|!=|=~|!~).*?,{0,1})+?)\}/
@@ -238,7 +239,7 @@
}
}else{
console.log('mo match metric')
//console.log('mo match metric')
this.queryTypeInfos();
}
},
@@ -273,7 +274,7 @@
tempCounter--;
}
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);
@@ -308,7 +309,7 @@
}
}
}
console.log('query metric',editMetricExpression)
//console.log('query metric',editMetricExpression)
let metric=/([a-zA-Z_]\w*)\b(?=\{)/.exec(editMetricExpression)[0];
let timeRange=this.getDefaultTimeRange();
this.$get('/prom/api/v1/series?match[]={__name__="'+metric+'"}&start='+timeRange[0]+"&end="+timeRange[1]).then(response=>{
@@ -343,7 +344,7 @@
this.noStyleSuggestions={labels:labels}
this.showSuggestions=this.deepClone(this.noStyleSuggestions);
console.log('change labels',this.showSuggestions)
//console.log('change labels',this.showSuggestions)
}else{
this.noStyleSuggestions={};
this.showSuggestions=this.deepClone(this.noStyleSuggestions)
@@ -357,7 +358,7 @@
return[(start.getTime()/1000).toFixed(0),(end.getTime()/1000).toFixed(0)]
},
handleItemClick:function(type,item,event){
console.log(type,item,event)
//console.log(type,item,event)
if(type=='metrics'){
this.handleMetricClick(item)
}else if(type == 'labels'){
@@ -504,7 +505,7 @@
let typeValues=suggestions[key];
typeValues=typeValues.filter(item=>{
let index=item.insertText.toLowerCase().indexOf(input.toLowerCase());
console.log('index',index,'input',input)
//console.log('index',index,'input',input)
if(index != -1){
// console.log('item',item.label,'input',input)
// item.label=item.label.replace(input,`<mark>${input}</mark>`);
@@ -534,7 +535,7 @@
this.$nextTick(()=>{
let suggestions=document.querySelectorAll('.popper-item');
this.storedSuggestions=[...suggestions];
console.log('storedSuggestions->',suggestions)
//console.log('storedSuggestions->',suggestions)
})
},
setContent:function(value){
@@ -566,14 +567,14 @@
return new Promise(function(resolve,reject){
$temp.$nextTick(()=>{
let range=$temp.quill.getSelection();
console.log('range',range)
//console.log('range',range)
if(range&&range.length == 0){
$temp.cursorIndex=range.index;
console.log('current cursor-->',$temp.cursorIndex)
//console.log('current cursor-->',$temp.cursorIndex)
if(/^[\{\(\[,= "]$/g.test(char)){
$temp.pivotalCursorIndex=$temp.cursorIndex;
console.log('store pivotalCursorIndex',$temp.pivotalCursorIndex)
//console.log('store pivotalCursorIndex',$temp.pivotalCursorIndex)
}
resolve();
}
@@ -590,7 +591,7 @@
},
moveScroll:function(){
let scroll=this.$refs.scroll.wrap;
console.log('scroll',scroll)
//console.log('scroll',scroll)
if(scroll){
let curScroll=scroll.scrollTop;//滚动条当前位置
let scrollLen=scroll.scrollHeight;//滚动条总长
@@ -652,7 +653,7 @@
getPosition:function(){
this.$nextTick(()=>{
this.popperPos=this.quill.getBounds(this.cursorIndex)
console.log('position:',this.popperPos)
//console.log('position:',this.popperPos)
})
},
guid() {
@@ -664,7 +665,7 @@
registerKeydown:function(){
let $temp=this;
document.addEventListener('keydown',function(event){
console.log('keydown',event)
//console.log('keydown',event)
$temp.toggleSelect(event);
})
@@ -745,11 +746,11 @@
this.options.modules.keyboard.bindings=bindings;
this.quill = new Quill(this.$refs.editor, this.options);
this.quill.on('blur',function(){
console.log('quill blur')
//console.log('quill blur')
})
this.quill.on('text-change',function(delta, oldDelta, source){
if(source != 'silent'){
console.log('delta',delta,'oldDelta',oldDelta,'source',source)
//console.log('delta',delta,'oldDelta',oldDelta,'source',source)
let char='',operation='';
let oldContent='';
oldDelta.ops.forEach((item,index)=>{
@@ -780,14 +781,14 @@
}
let promise=$temp.storeCursor(char);
if(source == 'user'){
console.log(delta,oldDelta,oldContent)
//console.log(delta,oldDelta,oldContent)
let newContent=$temp.getContent()
promise.then(()=>{ //存储完光标后再进行后面的操作
$temp.userChange(char,operation,newContent,oldContent)
})
}
$temp.content=$temp.getContent();
console.log('current content-->',$temp.content)
//console.log('current content-->',$temp.content)
$temp.getPosition();
$temp.formatContent();
}
@@ -814,7 +815,7 @@
}
</script>
<style scoped>
<style scoped lang="scss">
.metric-editor{
position: relative;
height: 36px;
@@ -883,11 +884,14 @@
.editor-core:hover + .editor-clear{
display: inline-block !important;
}
.editor-clear {
padding-top: 8px;
}
.editor-clear:hover{
display: inline-block !important;
}
</style>
<style>
<style lang="scss">
mark{
color: rgb(255, 133, 27);
border-bottom: 1px solid rgb(255, 133, 27);
@@ -895,9 +899,28 @@
background: inherit;
padding: 0;
}
.ql-editor{
padding:10px 10px !important;
overflow: hidden;
.ql-editor{
padding:10px !important;
overflow: hidden;
}
.metric-editor.metric-editor-rb {
.editor-clear {
padding-top: 4px;
}
height: 32px;
.ql-container.ql-snow {
border-radius: 4px;
border: 1px solid #DCDFE6;
box-sizing: border-box;
.ql-editor {
padding: 6px 0 !important;
>p {
padding-left: 15px;
font-size: 12px;
color: rgb(96, 98, 102);
}
}
}
}
</style>

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

@@ -35,6 +35,8 @@
:key="promqlKeys[index-1]"
:expression-list="expressions"
:index="index-1"
:styleType="1"
:plugins="['metric-selector', 'metric-input', 'add', 'remove']"
@change="expressionChange"
@addExpression="addExpression"
@removeExpression="removeExpression"
@@ -191,7 +193,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
</div>
</div>
<chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{}"></chart-box>
<chart-box v-if="rightBox.show" ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{}"></chart-box>
<element-set
:allowed-all="true"
v-clickoutside="elementsetHide"
@@ -225,6 +227,9 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
},
data() {
return {
rightBox: { //面板弹出框相关
show: false,
},
promqlCount: 1,
promqlKeys: [],
expressions: [''],
@@ -443,8 +448,9 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
this.tableVisible = !this.tableVisible;
},
saveChart: function () {
this.rightBox.show = true;
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
this.$refs.addChartModal.show(true);
//this.$refs.addChartModal.show(true);
let metricInfo = {};
metricInfo.elements = [];
// {"metric":"ALERTS_FOR_STATE","elements":[{"expression":"ALERTS_FOR_STATE{project='kafka',module='node_exporter'}","type":"normal"}]}

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

@@ -2,28 +2,54 @@
<div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'50px':'36px'}">
<div class="query-row">
<div class="query-input">
<div class="metricBtn">
<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="el-icon-arrow-down"></i></el-button>
<el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange"></el-cascader-panel>
</el-dropdown>
</div>
<div class="inputBox" @click="dropDownVisible=false">
<!-- <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 :metric-list="metricStore" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
<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>
<!--explore页面的样式-->
<template v-if="styleType == 1">
<div class="metric-btn" v-if="plugins.indexOf('metric') > -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="el-icon-arrow-down"></i></el-button>
<el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange"></el-cascader-panel>
</el-dropdown>
</div>
<div class="input-box" @click="dropDownVisible=false">
<!-- <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" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
<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: 120px; padding-right: 20px; text-align: right; color: #666">
<el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i class="el-icon-arrow-down" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
<el-cascader-panel v-show="dropDownVisible" 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")}}</label>
</el-col>
<el-col style="width: calc(100% - 120px);">
<div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
<editor :styleType="styleType" :metric-list="metricStore" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
<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 style="margin-left: 5px">
<div v-if="styleType == 1">
<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="removeExpression"><i class="el-icon-minus"></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" v-if="plugins.indexOf('remove') > -1"><i class="el-icon-minus"></i></div>
</div>
</div>
<div v-if="styleType == 2">
<div class="option" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="el-icon-plus"></i></div>
<div class="option" style="margin-left: 5px; line-height: 32px;" @click="removeExpression" v-if="plugins.indexOf('remove') > -1"><i class="el-icon-minus"></i></div>
</div>
</div>
</template>
@@ -36,7 +62,9 @@
},
props:{
index:{type:Number},
expressionList:{}
expressionList:{},
plugins: {type: Array},
styleType: Number
},
data(){
return {
@@ -149,7 +177,7 @@
}
</script>
<style scoped>
<style scoped lang="scss">
.promqlInput{
position: relative;
height: 36px;
@@ -160,12 +188,12 @@
.promqlInput .query-row{
width: 100%;
}
.inputBox .append-msg{
.input-box .append-msg{
font-size: 12px;
line-height: 1;
padding-top: 4px;
}
.inputBox .error{
.input-box .error{
color: #F56C6C;
}
.query-row .query-input{
@@ -189,11 +217,11 @@
.query-options .option:focus,.query-options .option:hover{
background-color: #CCD7E4;
}
.query-input .metricBtn{
.query-input .metric-btn {
width: 100px;
margin-right: 10px;
}
.query-input .inputBox{
.query-input .input-box{
width: 100%;
}
.metric-btn{
@@ -217,7 +245,7 @@
position:relative;
z-index: 2100;
}
.inputBox .el-input__inner{
.input-box .el-input__inner{
height: 36px;
}
</style>

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

@@ -104,7 +104,7 @@
</left-menu>
<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>
</template>
@@ -290,9 +290,11 @@
},
/*图表相关操作--start*/
toAddChart: function () {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
this.$refs.addChartModal.show(true);
this.$refs.addChartModal.createData(this.showPanel.id); //初始化创建图表需要的初始数据
this.rightBox.show = true;
this.$nextTick(() => {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
this.$refs.addChartModal.createData(this.showPanel.id); //初始化创建图表需要的初始数据
});
},
scrollbarHeightHandler() {
setTimeout(() => {
@@ -316,9 +318,11 @@
},
// 编辑图表信息,打开编辑弹窗
editData(data) {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
this.$refs.addChartModal.show(true);
this.$refs.addChartModal.editData(data, this.showPanel.id);
this.rightBox.show = true;
this.$nextTick(() => {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
this.$refs.addChartModal.editData(data, this.showPanel.id);
});
},
// 移除图表:弹出确认框询问
removeData(data,from) {