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

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

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

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

@@ -44,7 +44,8 @@
}
/*metric样式--end*/
.label-center{
margin-top:6px;
vertical-align: middle;
line-height: 34px;
}
.z-top {
@@ -52,7 +53,7 @@
}
</style>
<template key="chartBox">
<div>
<div>
<panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
<transition name="right-box">
@@ -99,13 +100,13 @@
</el-form-item>
<el-row :gutter="10">
<el-col :span="3" >
<el-col :span="2" >
<div class="label-center" >{{$t('dashboard.panel.chartForm.type')}}</div>
</el-col>
<el-col :span="5">
<el-col :span="6" style="margin-left:-7px;">
<div class="grid-content ">
<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">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
@@ -113,10 +114,10 @@
</el-form-item>
</div>
</el-col>
<el-col :span="3">
<el-col :span="2" style="margin-left: 7px;">
<div class="label-center" >{{$t('dashboard.panel.chartForm.width')}}</div>
</el-col>
<el-col :span="5">
<el-col :span="6" style="margin-left:0px;">
<div class="grid-content ">
<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">
@@ -127,12 +128,13 @@
</el-form-item>
</div>
</el-col>
<el-col :span="3">
<el-col :span="2" style="padding-left: 10px;">
<div class="label-center" >{{$t('dashboard.panel.chartForm.high')}}</div>
</el-col><el-col :span="5">
<div class="grid-content ">
</el-col>
<el-col :span="6" style="margin-left: 0px;">
<div class="grid-content" >
<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>-->
<el-autocomplete
v-model="chart.height"
:fetch-suggestions="querySearch"
@@ -185,7 +187,7 @@
</div>
</transition>
</div>
</div>
</template>
<script>
@@ -447,7 +449,6 @@
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$refs.chartForm.resetFields();//清空表单
let panel = this.panelData.find(p => p.id === this.panelId);
//console.info("panel", panel)
this.$emit('on-create-success', 'create', response.data,params, panel);
} else {
this.$message.error(response.msg);
@@ -525,14 +526,17 @@
// 获取metric列表
getSuggestMetric() {
this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
if (response.code === 200) {
this.metricList = response.data.list;
//this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
this.$get('/prom/api/v1/label/__name__/values').then(response => {
//if (response.code === 200) {
if (response.status === 'success') {
this.metricList = response.data;
const cascaderMap = new Map();
this.metricList.forEach((item,index) => {
let arr = [];
let par = '';//父value
let metricTmp = item.metric;//子value
//let metricTmp = item.metric;//子value
let metricTmp = item;//子value
if(metricTmp){
arr = metricTmp.split('_');
par = arr[0];
@@ -552,7 +556,7 @@
let metricCascaderArr = [];
cascaderMap.forEach(function(value,index){
const option = {
value: index,
value: index+"_par",
label: index,
children:value,
};
@@ -567,7 +571,6 @@
},
// 创建打开
createData(panelId, elementInfo) {
//console.info('bbb', elementInfo)
if (panelId == -1) {
this.panelId = this.panelData[0].id;
} else {
@@ -584,7 +587,6 @@
let dSet = this.$refs.chartTag;
this.$nextTick(() => {
dSet.forEach((item, index) => {
//console.info('bbb', elementInfo.elements[index])
item.setMdata(elementInfo.elements[index]);
});
});
@@ -653,7 +655,6 @@
/*metric部分相关方法--end*/
querySearch(queryString, cb) {
console.log(queryString)
var suggestions = this.heightSuggestions;
// var results = queryString ? suggestions.filter(this.createFilter(queryString)) : 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;
}
.li-list-part-label-val-list {
height: 176px;
border: 1px solid #dcdfe6;
height: 248px;
/* border: 1px solid #dcdfe6;*/
border-radius: 4px;
padding: 0px 0 10px 15px;
margin-bottom:0px !important;
width:100%;
}
.li-cursor{
cursor: pointer;
@@ -66,7 +68,7 @@
}
.metric-title-position{
margin-bottom: 2px;
margin-bottom: 8px;
}
.metric-title-row-position{
margin-top:-10px;
@@ -91,8 +93,9 @@
width: 100px;
}
.li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px) !important;
width: calc(100% - 15px) ;
}
.nz-tab-chart-item-box{
padding:0;
display: inline-block;
@@ -146,7 +149,7 @@
<!-- create chart组件显示框 -->
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<!--
<el-col :span="8">
<div class="li-list-part">
<el-scrollbar style="height: 100%">
@@ -161,11 +164,16 @@
</el-col>
<el-col :span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col>
<el-col :span="14">
<div class="li-list-part-label-val-list" >
-->
<el-col :span="24">
<div class="li-list-part-label-val-list" :id="'scrollDiv'+this.pointer">
<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"
placeholder=""
collapse-tags
@@ -174,7 +182,11 @@
multiple>
<el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option>
</el-select>
</el-col>
<!--
<span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-->
</el-row>
</el-form-item>
</el-scrollbar>
</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
selectMetric() {
if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
@@ -289,6 +313,7 @@ export default {
this.getSuggestTags(this.elementInfo.metric);
} else {
this.elementInfo.tagList = [];
this.setLabelDivHeight(0);
}
},
// 选择主机
@@ -310,31 +335,25 @@ export default {
*/
// 获取tags列表
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.tagList = [];
//this.elementInfo.tagList = [];
if (response.code === 200) {
if(response.data.list){
//this.elementInfo.tagList = response.data.list;
response.data.list.forEach((item) => {
const objList = Object.entries(response.data);
objList.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false//当前元素是否被选中，默认都未选中
name: item[0],
list:item[1],
value:[]//最终选择的值
};
this.elementInfo.tagList.push(tagObj);
this.elementInfo.selectedTagList.push(tagObj);
});
}else{
response.data.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false //当前元素是否被选中，默认都未选中
};
this.elementInfo.tagList.push(tagObj);
});
}
//this.elementInfo.tagList = response.data.list;
let tagNum = this.elementInfo.selectedTagList.length;
this.setLabelDivHeight(tagNum);
}else {
this.elementInfo.tagList = [];
this.elementInfo.selectedTagList = [];
this.setLabelDivHeight(0);
}
});
},
@@ -367,41 +386,51 @@ export default {
}else {
this.elementInfo.metric = expression;
}
//alert(this.elementInfo.metric);
//this.selectMetric(); // 获取tag
this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
//this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
this.$get('/metric/series?match[]='+this.elementInfo.metric).then(response => {
this.elementInfo.selectedTagList = [];
this.elementInfo.tagList = [];
//this.elementInfo.tagList = [];
if (response.code === 200) {
//this.elementInfo.tagList = response.data.list;
if(response.data.list){
response.data.list.forEach((item) => {
const objList = Object.entries(response.data);
objList.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false//当前元素是否被选中，默认都未选中
name: item[0],
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 {
response.data.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false//当前元素是否被选中，默认都未选中
};
this.elementInfo.tagList.push(tagObj);
labVal = labVal.substring(1,labVal.length-1);
tagObj.value.push(labVal);
}
}
});
}
if(expression.indexOf('{')>-1){
let labValArrStr = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
this.stringToTags(labValArrStr);
}
this.elementInfo.selectedTagList.push(tagObj);
});
let tagNum = this.elementInfo.selectedTagList.length;
this.setLabelDivHeight(tagNum);
}else {
this.elementInfo.tagList = [];
this.elementInfo.selectedTagList = [];
this.setLabelDivHeight(0);
}
});
}
},
/*
//字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4'
stringToTags(str) {
let labArr = str.split(',');
@@ -452,6 +481,7 @@ export default {
});
});
},
*/
clearHistory() {
this.elementInfo.metric = '';

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

@@ -45,11 +45,12 @@
width:90%;
}
.li-list-part-label-val-list {
height: 218px;
border: 1px solid #dcdfe6;
height: 280px;
/*border: 1px solid #dcdfe6;*/
border-radius: 4px;
box-sizing:border-box;
padding: 15px 0 10px 15px;
padding: 7px 0 10px 15px;
margin-bottom:0px !important;
}
.no-list-style{
@@ -103,6 +104,7 @@
/* overflow: auto !important; */
box-sizing:border-box;
margin:0 auto;
margin-bottom:0px !important;
}
.el-input .el-input__inner{
/* width:80%; */
@@ -133,7 +135,7 @@
}
.li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px);
width: calc(100% - 15px);/*calc(100% - 45px);*/
margin:0 auto;
}
@@ -149,7 +151,13 @@
width: 100px;
}
.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{
padding:0;
@@ -195,7 +203,7 @@
</el-row>
<el-row v-if="tableShow == 1">
<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-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
@@ -214,6 +222,7 @@
</el-row>
<!--create chart组件显示框 -->
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<!--
<el-col :span="9" style="margin-bottom: 20px;">
<div class="li-list-part">
<el-scrollbar style="height: 100%">
@@ -228,20 +237,28 @@
</el-col>
<el-col :span="1" class="symbol-area"><span class="symbol-equal">=</span></el-col>
<el-col :span="14">
<div class="li-list-part-label-val-list" >
-->
<el-col :span="24">
<div class="li-list-part-label-val-list" id="scrollDiv">
<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"
placeholder=""
collapse-tags
filterable
@change="changeTag"
multiple>
<el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option>
</el-select>
</el-col>
<!--
<span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-->
</el-row>
</el-form-item>
</el-scrollbar>
</div>
@@ -309,10 +326,6 @@ export default {
}
});
},
// 删除该选项,第一步,传递要删除的参数
deleteTarget() {
//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
selectMetric() {
if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
this.elementInfo.metric = this.elementInfo.metric[1];
this.getSuggestTags(this.elementInfo.metric);
} else {
this.elementInfo.tagList = [];
this.elementInfo.selectedTagList = [];
this.setLabelDivHeight(0);
}
this.$emit('on-change-condition');
},
// 获取tags列表
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.tagList = [];
//this.elementInfo.tagList = [];
if (response.code === 200) {
if(response.data.list){
//this.elementInfo.tagList = response.data.list;
response.data.list.forEach((item) => {
const objList = Object.entries(response.data);
objList.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false//当前元素是否被选中，默认都未选中
name: item[0],
list:item[1],
value:[]//最终选择的值
};
this.elementInfo.tagList.push(tagObj);
this.elementInfo.selectedTagList.push(tagObj);
});
}else{
response.data.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false //当前元素是否被选中，默认都未选中
};
this.elementInfo.tagList.push(tagObj);
});
}
//this.elementInfo.tagList = response.data.list;
let tagNum = this.elementInfo.selectedTagList.length;
this.setLabelDivHeight(tagNum);
}else {
this.elementInfo.tagList = [];
this.elementInfo.selectedTagList = [];
this.setLabelDivHeight(0);
}
});
},

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

@@ -214,6 +214,7 @@ export default {
end.setSeconds(59);
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.$refs.editChartSingle.setDivFirstShow(true);
},
dateChange(time) {
this.filter.start_time = `${time[0]}:00`;
@@ -263,6 +264,9 @@ export default {
if (response.data.result.length === 1) {
this.chartCount = 'single';
}
if (response.data.result.length === 0) {
this.$refs.editChartSingle.setData(params, [], 0, this.filter,[]);
}
}
this.getChartData(response, params);
}else {

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

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

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

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