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(){

21
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
this.echartModalStore.clear(); if(this.echartModalStore){
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;

261
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 {
@@ -52,140 +53,141 @@
} }
</style> </style>
<template key="chartBox"> <template key="chartBox">
<div> <div>
<panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box> <panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
<transition name="right-box"> <transition name="right-box">
<div class="right-box right-box-add-chart z-top right-box-chart" v-if="rightBox.show" > <div class="right-box right-box-add-chart z-top right-box-chart" v-if="rightBox.show" >
<!-- begin--顶部按钮--> <!-- begin--顶部按钮-->
<div class="right-box-top-btns"> <div class="right-box-top-btns">
<button id="chart-box-delete" type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82"> <button id="chart-box-delete" type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span> <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span> <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button> </button>
</div> </div>
<!-- end--顶部按钮--> <!-- end--顶部按钮-->
<!-- begin--标题--> <!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div> <div class="right-box-title">{{rightBox.title}}</div>
<!-- end--标题--> <!-- end--标题-->
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm"> <el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm">
<el-form-item :label="$t('dashboard.panel.title')"> <el-form-item :label="$t('dashboard.panel.title')">
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-select class="right-box-row-with-btn" popper-class="chart-box-dropdown" <el-select class="right-box-row-with-btn" popper-class="chart-box-dropdown"
v-model="panelId" placeholder="" v-if="rightBox.show" size="small"> v-model="panelId" placeholder="" v-if="rightBox.show" size="small">
<el-option v-for="item in panelData" :key="item.id" :label="item.name" <el-option v-for="item in panelData" :key="item.id" :label="item.name"
:value="item.id" :id="'chart-box-panel-'+item.id"> :value="item.id" :id="'chart-box-panel-'+item.id">
<span class="config-dropdown-label-txt">{{item.name}}</span> <span class="config-dropdown-label-txt">{{item.name}}</span>
<div class="config-dropdown-label-icons"> <div class="config-dropdown-label-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deletePanel(item)" <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deletePanel(item)"
:id="'chart-box-panel-op-del-'+item.id"><i class="el-icon-delete"></i></span> :id="'chart-box-panel-op-del-'+item.id"><i class="el-icon-delete"></i></span>
<span class="config-dropdown-btn" @click.stop="editPanel(item)" <span class="config-dropdown-btn" @click.stop="editPanel(item)"
:id="'chart-box-panel-op-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></span> :id="'chart-box-panel-op-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></span>
</div> </div>
</el-option> </el-option>
</el-select> </el-select>
<div class="right-box-row-btn" v-if="rightBox.show" @click="toAddPanel"> <div class="right-box-row-btn" v-if="rightBox.show" @click="toAddPanel">
<i class="el-icon-plus" id="chart-box-panel-plus"></i> <i class="el-icon-plus" id="chart-box-panel-plus"></i>
</div>
</div> </div>
</div> </el-form-item>
</el-form-item> <el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
<el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title"> <el-input size="small" maxlength="64" show-word-limit v-model="chart.title"></el-input>
<el-input size="small" maxlength="64" show-word-limit v-model="chart.title"></el-input> </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>
</el-select> </el-select>
</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">
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item"> <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
<span class="panel-dropdown-label-txt" > span-{{item}}</span> <span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option> </el-option>
</el-select> </el-select>
</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>
<div class="grid-content "> <el-col :span="6" style="margin-left: 0px;">
<el-form-item prop="heigh"> <div class="grid-content" >
<!-- <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>--> <el-form-item prop="heigh">
<el-autocomplete <!-- <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>-->
v-model="chart.height" <el-autocomplete
:fetch-suggestions="querySearch" v-model="chart.height"
placeholder="" :fetch-suggestions="querySearch"
size="mini" placeholder=""
popper-class="popper-z-index" size="mini"
@select="handleSelect"> popper-class="popper-z-index"
<template slot-scope="{ item }"> @select="handleSelect">
<div class="name">{{ item }}</div> <template slot-scope="{ item }">
</template> <div class="name">{{ item }}</div>
</el-autocomplete> </template>
<span class="nz-input-append">px</span> </el-autocomplete>
</el-form-item> <span class="nz-input-append">px</span>
</div> </el-form-item>
</el-col> </div>
</el-row> </el-col>
</el-row>
<div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div> <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
<div class="line-100"></div> <div class="line-100"></div>
<el-row class="element-item" v-for="(elem, index) in elements" :key="'ele' + index"> <el-row class="element-item" v-for="(elem, index) in elements" :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"
:count-total="elements.length" :count-total="elements.length"
@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>
</el-row> </el-row>
<button type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;"> <button 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>
</el-form>
</el-scrollbar>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="chart-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click="confirmAdd" id="chart-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
</el-form> <span>{{$t('overall.save')}}</span>
</el-scrollbar> </button>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="chart-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="confirmAdd" id="chart-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span>
</button>
</div> </div>
</div> </transition>
</transition>
</div> </div>
</template> </template>
<script> <script>
@@ -221,11 +223,11 @@
title: [ title: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'} {required: true, message: this.$t('validate.required'), trigger: 'blur'}
] ]
/* /*
heigh: [ heigh: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'} {required: true, message: this.$t('validate.required'), trigger: 'blur'}
] ]
*/ */
}, },
chartTypeList: [ chartTypeList: [
{ {
@@ -378,7 +380,7 @@
deleteTarget(index) { deleteTarget(index) {
//alert('box第一步，循环所有的metric，为什么要循环？？'); //alert('box第一步，循环所有的metric，为什么要循环？？');
this.deleteIndex = index; this.deleteIndex = index;
// alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length); // alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
this.$refs.chartTag.forEach((item) => { this.$refs.chartTag.forEach((item) => {
// 子组件保存内容到bus // 子组件保存内容到bus
item.subSave(); item.subSave();
@@ -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);
@@ -473,7 +474,7 @@
if (this.elementTarget.length === this.elements.length) { if (this.elementTarget.length === this.elements.length) {
this.$refs.chartForm.validate((valid) => { this.$refs.chartForm.validate((valid) => {
const params = { const params = {
// productId: this.productId, // productId: this.productId,
//panelId: this.panelId, //panelId: this.panelId,
title: this.chart.title,//this.chart title: this.chart.title,//this.chart
span: this.chart.span, span: this.chart.span,
@@ -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:[];

262
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,20 +164,29 @@
</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-select v-model="item.value" ref="tagSelect" size="mini" <el-row :gutter="10" >
placeholder="" <el-col :span="4" >
collapse-tags <div style="text-align:right;padding-right:5px;">{{item.name}}</div>
popper-class="metric-dropdown" </el-col>
filterable <el-col :span="20" >
multiple> <el-select v-model="item.value" ref="tagSelect" size="mini"
<el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option> placeholder=""
</el-select> collapse-tags
<span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span> popper-class="metric-dropdown"
filterable
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-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[0],
name: item.name, list:item[1],
isSelect:false//当前元素是否被选中，默认都未选中 value:[]//最终选择的值
}; };
this.elementInfo.tagList.push(tagObj); this.elementInfo.selectedTagList.push(tagObj);
}); });
}else{ let tagNum = this.elementInfo.selectedTagList.length;
response.data.forEach((item) => { this.setLabelDivHeight(tagNum);
const tagObj = {
name: item.name,
isSelect:false //当前元素是否被选中，默认都未选中
};
this.elementInfo.tagList.push(tagObj);
});
}
//this.elementInfo.tagList = response.data.list;
}else { }else {
this.elementInfo.tagList = []; this.elementInfo.selectedTagList = [];
this.setLabelDivHeight(0);
} }
}); });
}, },
@@ -367,91 +386,102 @@ 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[0],
name: item.name, list:item[1],
isSelect:false//当前元素是否被选中，默认都未选中 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 {
labVal = labVal.substring(1,labVal.length-1);
tagObj.value.push(labVal);
}
}
}); });
}else {
response.data.forEach((item) => { this.elementInfo.selectedTagList.push(tagObj);
const tagObj = { });
name: item.name, let tagNum = this.elementInfo.selectedTagList.length;
isSelect:false//当前元素是否被选中，默认都未选中 this.setLabelDivHeight(tagNum);
};
this.elementInfo.tagList.push(tagObj);
});
}
if(expression.indexOf('{')>-1){
let labValArrStr = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
this.stringToTags(labValArrStr);
}
}else { }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(',');
labArr.forEach((item, index) => {//b=~'1|2|3'
let labName = item.substring(0,item.indexOf('='));
this.elementInfo.tagList.every((tagItem,index) => {
if(tagItem.name===labName){
tagItem.isSelect = true;
return false;
}else {
return true;
}
});
//查询metricLabel名称对应的LabelValue /*
this.$get('metric/labelVal?metric='+this.elementInfo.metric+"&name="+labName).then(response => { //字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4'
const tagObj = { stringToTags(str) {
name:labName,//选中的metricLabel名称 let labArr = str.split(',');
list:[],//metricLabel名称对应的LabelValue labArr.forEach((item, index) => {//b=~'1|2|3'
value:[]//最终选择的值 let labName = item.substring(0,item.indexOf('='));
}; this.elementInfo.tagList.every((tagItem,index) => {
let labVal = item.substring(item.indexOf('=')+1,item.length); if(tagItem.name===labName){
if(labVal.indexOf('~')!=-1){ tagItem.isSelect = true;
labVal = labVal.substring(2,labVal.length-1); return false;
let valArr = labVal.split('|'); }else {
valArr.forEach((labItem, labIndex) => { return true;
tagObj.value.push(labItem); }
}); });
}else {
labVal = labVal.substring(1,labVal.length-1); //查询metricLabel名称对应的LabelValue
tagObj.value.push(labVal); this.$get('metric/labelVal?metric='+this.elementInfo.metric+"&name="+labName).then(response => {
} const tagObj = {
if (response.code === 200) { name:labName,//选中的metricLabel名称
if(response.data.list){ list:[],//metricLabel名称对应的LabelValue
response.data.list.forEach((resItem) => { value:[]//最终选择的值
tagObj.list.push(resItem.value) };
}); let labVal = item.substring(item.indexOf('=')+1,item.length);
this.elementInfo.selectedTagList.push(tagObj); if(labVal.indexOf('~')!=-1){
}else{ labVal = labVal.substring(2,labVal.length-1);
response.data.forEach((resItem) => { let valArr = labVal.split('|');
tagObj.list.push(resItem.value) valArr.forEach((labItem, labIndex) => {
}); tagObj.value.push(labItem);
this.elementInfo.selectedTagList.push(tagObj); });
} }else {
}else { labVal = labVal.substring(1,labVal.length-1);
this.elementInfo.selectedTagList.push(tagObj); tagObj.value.push(labVal);
} }
}); if (response.code === 200) {
}); if(response.data.list){
}, response.data.list.forEach((resItem) => {
tagObj.list.push(resItem.value)
});
this.elementInfo.selectedTagList.push(tagObj);
}else{
response.data.forEach((resItem) => {
tagObj.list.push(resItem.value)
});
this.elementInfo.selectedTagList.push(tagObj);
}
}else {
this.elementInfo.selectedTagList.push(tagObj);
}
});
});
},
*/
clearHistory() { clearHistory() {
this.elementInfo.metric = ''; this.elementInfo.metric = '';

111
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-select v-model="item.value" ref="tagSelect" size="mini" <el-row :gutter="10" >
placeholder="" <el-col :span="4" >
collapse-tags <div style="text-align:right;padding-right:5px;">{{item.name}}</div>
filterable </el-col>
@change="changeTag" <el-col :span="20" >
multiple> <el-select v-model="item.value" ref="tagSelect" size="mini"
<el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option> placeholder=""
</el-select> 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> <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[0],
name: item.name, list:item[1],
isSelect:false//当前元素是否被选中，默认都未选中 value:[]//最终选择的值
}; };
this.elementInfo.tagList.push(tagObj); this.elementInfo.selectedTagList.push(tagObj);
}); });
}else{ let tagNum = this.elementInfo.selectedTagList.length;
response.data.forEach((item) => { this.setLabelDivHeight(tagNum);
const tagObj = {
name: item.name,
isSelect:false //当前元素是否被选中，默认都未选中
};
this.elementInfo.tagList.push(tagObj);
});
}
//this.elementInfo.tagList = response.data.list;
}else { }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); 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,
}; };