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

fix:修改BUG

Browse Source 
dashboard模块
1.预览模块loading统一，及预览全屏按时间查询不显示数据
2.修改metric及label接口，并把label修改为owl的样式
3.调整新增图表模块样式（宽度、高等）
This commit is contained in:
hanyuxia
2020-02-21 17:32:59 +08:00
parent 7c0583a352
commit b1a426fb36
8 changed files with 390 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -3,12 +3,15 @@
</style> </style>
<template> <template>
<div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow"> <div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow">
<loading :ref="'localLoading'+chartIndex"></loading>
<!--
<div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);"> <div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
<div class="el-loading-spinner"> <div class="el-loading-spinner">
<img width="42px" height="42px" src="../../assets/img/loading.gif"/> <img width="42px" height="42px" src="../../assets/img/loading.gif"/>
<p class="el-loading-text loading-font">loading</p> <p class="el-loading-text loading-font">loading</p>
</div> </div>
</div> </div>
-->
<div class="clearfix"> <div class="clearfix">
<div class="table-title" v-show="firstShow"> <div class="table-title" v-show="firstShow">
{{data.title}} {{data.title}}
@@ -46,12 +49,15 @@
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column> <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
</el-table> </el-table>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
<!--
<div v-show="showLoadingScreen" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);"> <div v-show="showLoadingScreen" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
<div class="el-loading-spinner"> <div class="el-loading-spinner">
<img width="42px" height="42px" src="../../assets/img/loading.gif"/> <img width="42px" height="42px" src="../../assets/img/loading.gif"/>
<p class="el-loading-text loading-font">loading</p> <p class="el-loading-text loading-font">loading</p>
</div> </div>
</div> </div>
-->
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@@ -59,10 +65,13 @@
<script> <script>
import bus from '../../libs/bus'; import bus from '../../libs/bus';
import {Loading} from 'element-ui'; import {Loading} from 'element-ui';
import loading from "../common/loading";
export default { export default {
name: 'chartTable', name: 'chartTable',
components: {}, components: {
'loading': loading,
},
props: { props: {
// 看板id // 看板id
panelId: { panelId: {
@@ -93,8 +102,8 @@ export default {
}, },
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取 panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
firstLoad: false, // 是否第一次加载 firstLoad: false, // 是否第一次加载
showLoading:true, //showLoading:true,
showLoadingScreen:false, //showLoadingScreen:false,
//showTable:true, //showTable:true,
chartType: 'table', // 图表类型 chartType: 'table', // 图表类型
screenModal: false, screenModal: false,
@@ -218,9 +227,11 @@ export default {
methods: { methods: {
startLoading(area){ startLoading(area){
if(area==='screen'){ if(area==='screen'){
this.showLoadingScreen = true; //this.showLoadingScreen = true;
this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
}else { }else {
this.showLoading = true; //this.showLoading = true;
this.$refs['localLoading'+this.chartIndex].startLoading();
} }
/* /*
//this.loading = this.$loading({ //this.loading = this.$loading({
@@ -236,9 +247,11 @@ export default {
}, },
endLoading(area){ endLoading(area){
if(area==='screen'){ if(area==='screen'){
this.showLoadingScreen = false; //this.showLoadingScreen = false;
this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
}else { }else {
this.showLoading = false; //this.showLoading = false;
this.$refs['localLoading'+this.chartIndex].endLoading();
} }
}, },
clearData(){ clearData(){

19
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -243,6 +243,9 @@
}, },
watch: {}, watch: {},
methods: { methods: {
setDivFirstShow(showDiv){
this.divFirstShow = showDiv;
},
clickLegend(legendName,index){ clickLegend(legendName,index){
if (this.echartStore) { if (this.echartStore) {
this.echartStore.dispatchAction({ this.echartStore.dispatchAction({
@@ -654,7 +657,7 @@
this.echartStore.setOption(option);//创建图表 this.echartStore.setOption(option);//创建图表
//this.echartStore.hideLoading(); //this.echartStore.hideLoading();
this.$refs['localLoading'+this.chartIndex].endLoading(); this.$refs['localLoading'+this.chartIndex].endLoading();
if(legend && legend.length>0){ if(legend){
this.legendList = []; this.legendList = [];
legend.forEach((item, i) => { legend.forEach((item, i) => {
const legend = { const legend = {
@@ -721,14 +724,16 @@
}); });
*/ */
// eslint-disable-next-line // eslint-disable-next-line
if(this.echartModalStore){
this.echartModalStore.clear(); this.echartModalStore.clear();
}
option.title = {}; option.title = {};
this.echartModalStore.setOption(option);//显示全屏界面 this.echartModalStore.setOption(option);//显示全屏界面
//this.echartModalStore.hideLoading(); //this.echartModalStore.hideLoading();
this.showLegend = true; this.showLegend = true;
this.$refs['localLoadingScreen'+this.chartIndex].endLoading(); this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
//this.echartModalStore.resize({height:chartInfo.height}); //this.echartModalStore.resize({height:chartInfo.height});
if(legend && legend.length>0){ if(legend){
this.screenLegendList = []; this.screenLegendList = [];
legend.forEach((item, i) => { legend.forEach((item, i) => {
const legend = { const legend = {
@@ -950,6 +955,9 @@
visible: true, visible: true,
threshold: null, threshold: null,
}; };
if(!this.data.type){
this.data.type='line';
}
res.forEach((response) => { res.forEach((response) => {
if (response.status === 'success') { if (response.status === 'success') {
if (response.data.result) { if (response.data.result) {
@@ -1029,10 +1037,7 @@
} }
}).catch((error) => { }).catch((error) => {
if (error) { if (error) {
this.$message.warning({ this.$message.error(error.toString());
content: this.$t("tip.refreshLater"),//'Please refesh later',//请稍后刷新
duration: 3,
});
} }
}); });
}); });
@@ -1050,6 +1055,8 @@
// const chartBox = document.getElementById('lineChartDiv'+this.chartIndex); // const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
//tableBox.style.height = `${height-75}px`; //tableBox.style.height = `${height-75}px`;
}); });
this.clearData();
this.firstShow = false;
this.$refs['localLoading'+this.chartIndex].startLoading(); this.$refs['localLoading'+this.chartIndex].startLoading();
this.divFirstShow = true; this.divFirstShow = true;

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

@@ -44,7 +44,8 @@
} }
/*metric样式--end*/ /*metric样式--end*/
.label-center{ .label-center{
margin-top:6px; vertical-align: middle;
line-height: 34px;
} }
.z-top { .z-top {
@@ -99,13 +100,13 @@
</el-form-item> </el-form-item>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="3" > <el-col :span="2" >
<div class="label-center" >{{$t('dashboard.panel.chartForm.type')}}</div> <div class="label-center" >{{$t('dashboard.panel.chartForm.type')}}</div>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="6" style="margin-left:-7px;">
<div class="grid-content "> <div class="grid-content ">
<el-form-item prop="type"> <el-form-item prop="type">
<el-select class="right-box-row-with-btn" value-key="chartType" popper-class="chart-box-dropdown" v-model="chart.type" placeholder="" size="mini"> <el-select class="right-box-row-with-btn" value-key="chartType" popper-class="chart-box-dropdown-mini" v-model="chart.type" placeholder="" size="mini">
<el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id"> <el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span> <span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option> </el-option>
@@ -113,10 +114,10 @@
</el-form-item> </el-form-item>
</div> </div>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="2" style="margin-left: 7px;">
<div class="label-center" >{{$t('dashboard.panel.chartForm.width')}}</div> <div class="label-center" >{{$t('dashboard.panel.chartForm.width')}}</div>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="6" style="margin-left:0px;">
<div class="grid-content "> <div class="grid-content ">
<el-form-item prop="span"> <el-form-item prop="span">
<el-select class="right-box-row-with-btn" value-key="chartSpan" popper-class="chart-box-dropdown-mini" v-model="chart.span" placeholder="" size="mini"> <el-select class="right-box-row-with-btn" value-key="chartSpan" popper-class="chart-box-dropdown-mini" v-model="chart.span" placeholder="" size="mini">
@@ -127,9 +128,10 @@
</el-form-item> </el-form-item>
</div> </div>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="2" style="padding-left: 10px;">
<div class="label-center" >{{$t('dashboard.panel.chartForm.high')}}</div> <div class="label-center" >{{$t('dashboard.panel.chartForm.high')}}</div>
</el-col><el-col :span="5"> </el-col>
<el-col :span="6" style="margin-left: 0px;">
<div class="grid-content" > <div class="grid-content" >
<el-form-item prop="heigh"> <el-form-item prop="heigh">
<!-- <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>--> <!-- <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>-->
@@ -447,7 +449,6 @@
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$refs.chartForm.resetFields();//清空表单 this.$refs.chartForm.resetFields();//清空表单
let panel = this.panelData.find(p => p.id === this.panelId); let panel = this.panelData.find(p => p.id === this.panelId);
//console.info("panel", panel)
this.$emit('on-create-success', 'create', response.data,params, panel); this.$emit('on-create-success', 'create', response.data,params, panel);
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg);
@@ -525,14 +526,17 @@
// 获取metric列表 // 获取metric列表
getSuggestMetric() { getSuggestMetric() {
this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => { //this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
if (response.code === 200) { this.$get('/prom/api/v1/label/__name__/values').then(response => {
this.metricList = response.data.list; //if (response.code === 200) {
if (response.status === 'success') {
this.metricList = response.data;
const cascaderMap = new Map(); const cascaderMap = new Map();
this.metricList.forEach((item,index) => { this.metricList.forEach((item,index) => {
let arr = []; let arr = [];
let par = '';//父value let par = '';//父value
let metricTmp = item.metric;//子value //let metricTmp = item.metric;//子value
let metricTmp = item;//子value
if(metricTmp){ if(metricTmp){
arr = metricTmp.split('_'); arr = metricTmp.split('_');
par = arr[0]; par = arr[0];
@@ -552,7 +556,7 @@
let metricCascaderArr = []; let metricCascaderArr = [];
cascaderMap.forEach(function(value,index){ cascaderMap.forEach(function(value,index){
const option = { const option = {
value: index, value: index+"_par",
label: index, label: index,
children:value, children:value,
}; };
@@ -567,7 +571,6 @@
}, },
// 创建打开 // 创建打开
createData(panelId, elementInfo) { createData(panelId, elementInfo) {
//console.info('bbb', elementInfo)
if (panelId == -1) { if (panelId == -1) {
this.panelId = this.panelData[0].id; this.panelId = this.panelData[0].id;
} else { } else {
@@ -584,7 +587,6 @@
let dSet = this.$refs.chartTag; let dSet = this.$refs.chartTag;
this.$nextTick(() => { this.$nextTick(() => {
dSet.forEach((item, index) => { dSet.forEach((item, index) => {
//console.info('bbb', elementInfo.elements[index])
item.setMdata(elementInfo.elements[index]); item.setMdata(elementInfo.elements[index]);
}); });
}); });
@@ -653,7 +655,6 @@
/*metric部分相关方法--end*/ /*metric部分相关方法--end*/
querySearch(queryString, cb) { querySearch(queryString, cb) {
console.log(queryString)
var suggestions = this.heightSuggestions; var suggestions = this.heightSuggestions;
// var results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions; // var results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
var results=queryString&&(suggestions.includes(queryString)||suggestions.filter(this.createFilter(queryString)).length>0)?suggestions:[]; var results=queryString&&(suggestions.includes(queryString)||suggestions.filter(this.createFilter(queryString)).length>0)?suggestions:[];

132
nezha-fronted/src/components/page/dashboard/chartMetric.vue
View File

@@ -48,10 +48,12 @@
color: #666; color: #666;
} }
.li-list-part-label-val-list { .li-list-part-label-val-list {
height: 176px; height: 248px;
border: 1px solid #dcdfe6; /* border: 1px solid #dcdfe6;*/
border-radius: 4px; border-radius: 4px;
padding: 0px 0 10px 15px; padding: 0px 0 10px 15px;
margin-bottom:0px !important;
width:100%;
} }
.li-cursor{ .li-cursor{
cursor: pointer; cursor: pointer;
@@ -66,7 +68,7 @@
} }
.metric-title-position{ .metric-title-position{
margin-bottom: 2px; margin-bottom: 8px;
} }
.metric-title-row-position{ .metric-title-row-position{
margin-top:-10px; margin-top:-10px;
@@ -91,8 +93,9 @@
width: 100px; width: 100px;
} }
.li-list-part-label-val-list .el-select--mini { .li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px) !important; width: calc(100% - 15px) ;
} }
.nz-tab-chart-item-box{ .nz-tab-chart-item-box{
padding:0; padding:0;
display: inline-block; display: inline-block;
@@ -146,7 +149,7 @@
<!-- create chart组件显示框 --> <!-- create chart组件显示框 -->
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"--> <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<!--
<el-col :span="8"> <el-col :span="8">
<div class="li-list-part"> <div class="li-list-part">
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
@@ -161,11 +164,16 @@
</el-col> </el-col>
<el-col :span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col> <el-col :span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col>
-->
<el-col :span="14"> <el-col :span="24">
<div class="li-list-part-label-val-list" > <div class="li-list-part-label-val-list" :id="'scrollDiv'+this.pointer">
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
<el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" > <el-form-item style="width:99%;" class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-row :gutter="10" >
<el-col :span="4" >
<div style="text-align:right;padding-right:5px;">{{item.name}}</div>
</el-col>
<el-col :span="20" >
<el-select v-model="item.value" ref="tagSelect" size="mini" <el-select v-model="item.value" ref="tagSelect" size="mini"
placeholder="" placeholder=""
collapse-tags collapse-tags
@@ -174,7 +182,11 @@
multiple> multiple>
<el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option> <el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option>
</el-select> </el-select>
</el-col>
<!--
<span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span> <span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-->
</el-row>
</el-form-item> </el-form-item>
</el-scrollbar> </el-scrollbar>
</div> </div>
@@ -281,7 +293,19 @@ export default {
}); });
} }
}, },
setLabelDivHeight(count){
if (count === 0) {
const chartBox = document.getElementById('scrollDiv' + this.pointer);
chartBox.style.height = `${10}px`;
} else if (count < 6) {//小于6个需要调整容器的高度
const chartBox = document.getElementById('scrollDiv' + this.pointer);
chartBox.style.height = `${(248 / 6) * count + 10}px`;
} else {
const chartBox = document.getElementById('scrollDiv' + this.pointer);
chartBox.style.height = `${248}px`;
}
},
// 选择metric // 选择metric
selectMetric() { selectMetric() {
if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空 if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
@@ -289,6 +313,7 @@ export default {
this.getSuggestTags(this.elementInfo.metric); this.getSuggestTags(this.elementInfo.metric);
} else { } else {
this.elementInfo.tagList = []; this.elementInfo.tagList = [];
this.setLabelDivHeight(0);
} }
}, },
// 选择主机 // 选择主机
@@ -310,31 +335,25 @@ export default {
*/ */
// 获取tags列表 // 获取tags列表
getSuggestTags(metric) { getSuggestTags(metric) {
this.$get('metric/labelName?metric='+metric).then(response => { //this.$get('metric/labelName?metric='+metric).then(response => {
this.$get('/metric/series?match[]='+metric).then(response => {
this.elementInfo.selectedTagList = []; this.elementInfo.selectedTagList = [];
this.elementInfo.tagList = []; //this.elementInfo.tagList = [];
if (response.code === 200) { if (response.code === 200) {
if(response.data.list){ const objList = Object.entries(response.data);
//this.elementInfo.tagList = response.data.list; objList.forEach((item) => {
response.data.list.forEach((item) => {
const tagObj = { const tagObj = {
name: item.name, name: item[0],
isSelect:false//当前元素是否被选中，默认都未选中 list:item[1],
value:[]//最终选择的值
}; };
this.elementInfo.tagList.push(tagObj); this.elementInfo.selectedTagList.push(tagObj);
}); });
let tagNum = this.elementInfo.selectedTagList.length;
this.setLabelDivHeight(tagNum);
}else { }else {
response.data.forEach((item) => { this.elementInfo.selectedTagList = [];
const tagObj = { this.setLabelDivHeight(0);
name: item.name,
isSelect:false //当前元素是否被选中，默认都未选中
};
this.elementInfo.tagList.push(tagObj);
});
}
//this.elementInfo.tagList = response.data.list;
}else {
this.elementInfo.tagList = [];
} }
}); });
}, },
@@ -367,41 +386,51 @@ export default {
}else { }else {
this.elementInfo.metric = expression; this.elementInfo.metric = expression;
} }
//this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
//alert(this.elementInfo.metric); this.$get('/metric/series?match[]='+this.elementInfo.metric).then(response => {
//this.selectMetric(); // 获取tag
this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
this.elementInfo.selectedTagList = []; this.elementInfo.selectedTagList = [];
this.elementInfo.tagList = []; //this.elementInfo.tagList = [];
if (response.code === 200) { if (response.code === 200) {
//this.elementInfo.tagList = response.data.list; const objList = Object.entries(response.data);
if(response.data.list){ objList.forEach((item) => {
response.data.list.forEach((item) => {
const tagObj = { const tagObj = {
name: item.name, name: item[0],
isSelect:false//当前元素是否被选中，默认都未选中 list:item[1],
value:[]//最终选择的值
}; };
this.elementInfo.tagList.push(tagObj); let labelName = item[0];
let labelValList = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
let labArr = labelValList.split(',');
labArr.forEach((item, index) => {//b=~'1|2|3'
let labNameTmp = item.substring(0,item.indexOf('='));
if(labNameTmp===labelName){
let labVal = item.substring(item.indexOf('=')+1,item.length);
if(labVal.indexOf('~')!=-1){
labVal = labVal.substring(2,labVal.length-1);
let valArr = labVal.split('|');
valArr.forEach((labItem, labIndex) => {
tagObj.value.push(labItem);
}); });
}else { }else {
response.data.forEach((item) => { labVal = labVal.substring(1,labVal.length-1);
const tagObj = { tagObj.value.push(labVal);
name: item.name, }
isSelect:false//当前元素是否被选中，默认都未选中 }
};
this.elementInfo.tagList.push(tagObj);
}); });
}
if(expression.indexOf('{')>-1){ this.elementInfo.selectedTagList.push(tagObj);
let labValArrStr = expression.substring(expression.indexOf('{')+1,expression.indexOf('}')); });
this.stringToTags(labValArrStr); let tagNum = this.elementInfo.selectedTagList.length;
} this.setLabelDivHeight(tagNum);
}else { }else {
this.elementInfo.tagList = []; this.elementInfo.selectedTagList = [];
this.setLabelDivHeight(0);
} }
}); });
} }
}, },
/*
//字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4' //字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4'
stringToTags(str) { stringToTags(str) {
let labArr = str.split(','); let labArr = str.split(',');
@@ -452,6 +481,7 @@ export default {
}); });
}); });
}, },
*/
clearHistory() { clearHistory() {
this.elementInfo.metric = ''; this.elementInfo.metric = '';

91
nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
View File

@@ -45,11 +45,12 @@
width:90%; width:90%;
} }
.li-list-part-label-val-list { .li-list-part-label-val-list {
height: 218px; height: 280px;
border: 1px solid #dcdfe6; /*border: 1px solid #dcdfe6;*/
border-radius: 4px; border-radius: 4px;
box-sizing:border-box; box-sizing:border-box;
padding: 15px 0 10px 15px; padding: 7px 0 10px 15px;
margin-bottom:0px !important;
} }
.no-list-style{ .no-list-style{
@@ -103,6 +104,7 @@
/* overflow: auto !important; */ /* overflow: auto !important; */
box-sizing:border-box; box-sizing:border-box;
margin:0 auto; margin:0 auto;
margin-bottom:0px !important;
} }
.el-input .el-input__inner{ .el-input .el-input__inner{
/* width:80%; */ /* width:80%; */
@@ -133,7 +135,7 @@
} }
.li-list-part-label-val-list .el-select--mini { .li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px); width: calc(100% - 15px);/*calc(100% - 45px);*/
margin:0 auto; margin:0 auto;
} }
@@ -149,7 +151,13 @@
width: 100px; width: 100px;
} }
.li-list-part-label-val-list .el-select--mini { .li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px); width: calc(100% - 15px);
}
.li-list-part-label-val-list .el-scrollbar__wrap{
/* overflow: auto !important; */
box-sizing:border-box;
margin:0 auto;
margin-bottom:0px !important;
} }
.nz-tab-chart-item-box{ .nz-tab-chart-item-box{
padding:0; padding:0;
@@ -195,7 +203,7 @@
</el-row> </el-row>
<el-row v-if="tableShow == 1"> <el-row v-if="tableShow == 1">
<el-col :span="24" > <el-col :span="24" >
<el-form-item label-width="80" prop="metric" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"--> <el-form-item style="margin-bottom:0px;" label-width="80" prop="metric" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<!-- <!--
<el-select ref="metricSelect" class="full-width" filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric" @change="selectMetric"> <el-select ref="metricSelect" class="full-width" filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric" @change="selectMetric">
<el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index" <el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
@@ -214,6 +222,7 @@
</el-row> </el-row>
<!--create chart组件显示框 --> <!--create chart组件显示框 -->
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"--> <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<!--
<el-col :span="9" style="margin-bottom: 20px;"> <el-col :span="9" style="margin-bottom: 20px;">
<div class="li-list-part"> <div class="li-list-part">
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
@@ -228,20 +237,28 @@
</el-col> </el-col>
<el-col :span="1" class="symbol-area"><span class="symbol-equal">=</span></el-col> <el-col :span="1" class="symbol-area"><span class="symbol-equal">=</span></el-col>
-->
<el-col :span="14"> <el-col :span="24">
<div class="li-list-part-label-val-list" > <div class="li-list-part-label-val-list" id="scrollDiv">
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
<el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" > <el-form-item style="width:99%;" class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-row :gutter="10" >
<el-col :span="4" >
<div style="text-align:right;padding-right:5px;">{{item.name}}</div>
</el-col>
<el-col :span="20" >
<el-select v-model="item.value" ref="tagSelect" size="mini" <el-select v-model="item.value" ref="tagSelect" size="mini"
placeholder="" placeholder=""
collapse-tags
filterable filterable
@change="changeTag" @change="changeTag"
multiple> multiple>
<el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option> <el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option>
</el-select> </el-select>
</el-col>
<!--
<span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span> <span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-->
</el-row>
</el-form-item> </el-form-item>
</el-scrollbar> </el-scrollbar>
</div> </div>
@@ -309,10 +326,6 @@ export default {
} }
}); });
}, },
// 删除该选项,第一步,传递要删除的参数 // 删除该选项,第一步,传递要删除的参数
deleteTarget() { deleteTarget() {
//alert('metric第一步，删除的指针，之后回调box的第一个步'+this.pointer); //alert('metric第一步，删除的指针，之后回调box的第一个步'+this.pointer);
@@ -349,43 +362,51 @@ export default {
} }
}, },
setLabelDivHeight(count){
if(count===0){
const chartBox = document.getElementById('scrollDiv');
chartBox.style.height = `${10}px`;
}else if(count<6){//小于6个需要调整容器的高度
const chartBox = document.getElementById('scrollDiv');
chartBox.style.height = `${(280 / 6) * count+10}px`;
}else {
const chartBox = document.getElementById('scrollDiv');
chartBox.style.height = `${280}px`;
}
},
// 选择metric // 选择metric
selectMetric() { selectMetric() {
if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空 if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
this.elementInfo.metric = this.elementInfo.metric[1]; this.elementInfo.metric = this.elementInfo.metric[1];
this.getSuggestTags(this.elementInfo.metric); this.getSuggestTags(this.elementInfo.metric);
} else { } else {
this.elementInfo.tagList = []; this.elementInfo.selectedTagList = [];
this.setLabelDivHeight(0);
} }
this.$emit('on-change-condition'); this.$emit('on-change-condition');
}, },
// 获取tags列表 // 获取tags列表
getSuggestTags(metric) { getSuggestTags(metric) {
this.$get('metric/labelName?metric='+metric).then(response => { //this.$get('metric/labelName?metric='+metric).then(response => {
this.$get('/metric/series?match[]='+metric).then(response => {
this.elementInfo.selectedTagList = []; this.elementInfo.selectedTagList = [];
this.elementInfo.tagList = []; //this.elementInfo.tagList = [];
if (response.code === 200) { if (response.code === 200) {
if(response.data.list){ const objList = Object.entries(response.data);
//this.elementInfo.tagList = response.data.list; objList.forEach((item) => {
response.data.list.forEach((item) => {
const tagObj = { const tagObj = {
name: item.name, name: item[0],
isSelect:false//当前元素是否被选中，默认都未选中 list:item[1],
value:[]//最终选择的值
}; };
this.elementInfo.tagList.push(tagObj); this.elementInfo.selectedTagList.push(tagObj);
}); });
let tagNum = this.elementInfo.selectedTagList.length;
this.setLabelDivHeight(tagNum);
}else { }else {
response.data.forEach((item) => { this.elementInfo.selectedTagList = [];
const tagObj = { this.setLabelDivHeight(0);
name: item.name,
isSelect:false //当前元素是否被选中，默认都未选中
};
this.elementInfo.tagList.push(tagObj);
});
}
//this.elementInfo.tagList = response.data.list;
}else {
this.elementInfo.tagList = [];
} }
}); });
}, },

4
nezha-fronted/src/components/page/dashboard/metricPreview.vue
View File

@@ -214,6 +214,7 @@ export default {
end.setSeconds(59); end.setSeconds(59);
this.filter.start_time = bus.timeFormate(start, 'yyyy-MM-dd hh:mm:ss'); this.filter.start_time = bus.timeFormate(start, 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(end, 'yyyy-MM-dd hh:mm:ss'); this.filter.end_time = bus.timeFormate(end, 'yyyy-MM-dd hh:mm:ss');
this.$refs.editChartSingle.setDivFirstShow(true);
}, },
dateChange(time) { dateChange(time) {
this.filter.start_time = `${time[0]}:00`; this.filter.start_time = `${time[0]}:00`;
@@ -263,6 +264,9 @@ export default {
if (response.data.result.length === 1) { if (response.data.result.length === 1) {
this.chartCount = 'single'; this.chartCount = 'single';
} }
if (response.data.result.length === 0) {
this.$refs.editChartSingle.setData(params, [], 0, this.filter,[]);
}
} }
this.getChartData(response, params); this.getChartData(response, params);
}else { }else {

1
nezha-fronted/src/components/page/dashboard/metricSet.scss
View File

@@ -24,6 +24,7 @@
// border-top: 1px solid #dfe7f2; // border-top: 1px solid #dfe7f2;
// border-bottom: 1px solid #dfe7f2; // border-bottom: 1px solid #dfe7f2;
padding-bottom: 20px; padding-bottom: 20px;
padding-top:20px;
text-align: right; text-align: right;
.operate-area-title { .operate-area-title {
padding: 5px 0; padding: 5px 0;

13
nezha-fronted/src/components/page/dashboard/metricSet.vue
View File

@@ -551,14 +551,17 @@ export default {
*/ */
// 获取metric列表 // 获取metric列表
getSuggestMetric(id) { getSuggestMetric(id) {
this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => { //this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
if (response.code === 200) { this.$get('/prom/api/v1/label/__name__/values', {pageNo: 1, pageSize: -1}).then(response => {
this.metricList = response.data.list; //if (response.code === 200) {
if (response.status === 'success') {
this.metricList = response.data;
const cascaderMap = new Map(); const cascaderMap = new Map();
this.metricList.forEach((item,index) => { this.metricList.forEach((item,index) => {
let arr = []; let arr = [];
let par = '';//父value let par = '';//父value
let metricTmp = item.metric;//子value //let metricTmp = item.metric;//子value
let metricTmp = item;//子value
if(metricTmp){ if(metricTmp){
arr = metricTmp.split('_'); arr = metricTmp.split('_');
par = arr[0]; par = arr[0];
@@ -578,7 +581,7 @@ export default {
let metricCascaderArr = []; let metricCascaderArr = [];
cascaderMap.forEach(function(value,index){ cascaderMap.forEach(function(value,index){
const option = { const option = {
value: index, value: index+"_par",//父节点和子节点的value相同，会出现点击与父节点label同名的子节点时，不显示选择的内容
label: index, label: index,
children:value, children:value,
}; };