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

fix：修改问题

Browse Source 
1 chart编辑界面metric选择优化功能已完成，包括新增修改图表及explore中的metric（metric为3级级联选择，label及value为2级级联选择，metric及lable及value为同一接口获取）
This commit is contained in:
hyx
2020-04-09 21:27:48 +08:00
parent 825ae1e322
commit a1187db3df
4 changed files with 796 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -191,6 +191,7 @@
:pointer="index" :pointer="index"
:metric-list="metricList" :metric-list="metricList"
:metricCascaderList="metricCascaderList" :metricCascaderList="metricCascaderList"
:metricAllData="metricAllData"
:count-total="elements.length" :count-total="elements.length"
@on-delete-target="deleteTarget" @on-delete-target="deleteTarget"
@sub-save-ok="subOk" @sub-save-ok="subOk"
@@ -292,6 +293,7 @@
selectFirstPanel: false, selectFirstPanel: false,
metricList: [], // metric列表 metricList: [], // metric列表
metricCascaderList:[],//metric级联列表 metricCascaderList:[],//metric级联列表
metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
deleteIndex: '', // 要删除的指标模块 deleteIndex: '', // 要删除的指标模块
subCount: 0, // subSave保存data到bus计数器 subCount: 0, // subSave保存data到bus计数器
panel: { panel: {
@@ -450,12 +452,13 @@
if (this.subCount === this.elements.length) { if (this.subCount === this.elements.length) {
this.subCount = 0; this.subCount = 0;
// 保存完成,进行删除操作 // 保存完成,进行删除操作
//alert('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素') console.log('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
//alert('box第二步，删除之前，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget)); console.log('box第二步，删除之前，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
this.elements.splice(this.deleteIndex, 1); this.elements.splice(this.deleteIndex, 1);
this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[] this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1); bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
//alert('box第二步，删除完毕，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget)); console.log('box第二步，删除完毕，elements='+JSON.stringify(this.elements),' elementTarget='+JSON.stringify(this.elementTarget),' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.chartTag.forEach((item, index) => { this.$refs.chartTag.forEach((item, index) => {
item.setSubdata(index); // 将数据从bus重新赋值 item.setSubdata(index); // 将数据从bus重新赋值
@@ -552,6 +555,7 @@
}, },
// 更新图表 // 更新图表
updateCharts(params) { updateCharts(params) {
console.log('))))))))))))=',params)
this.$put('panel/' + this.panelId + '/charts', params).then(response2 => { this.$put('panel/' + this.panelId + '/charts', params).then(response2 => {
if (response2.code === 200) { if (response2.code === 200) {
this.esc(); this.esc();
@@ -632,7 +636,9 @@
getSuggestMetric() { getSuggestMetric() {
//this.$get('/prom/api/v1/label/__name__/values').then(response => { //this.$get('/prom/api/v1/label/__name__/values').then(response => {
this.$get('/module?pageSize=-1').then(response => { this.$get('/module?pageSize=-1').then(response => {
console.log('---response---',response);
if (response.code === 200) { if (response.code === 200) {
console.log('---response200---',response);
this.metricList = response.data.list; this.metricList = response.data.list;
const cascaderMap = new Map(); const cascaderMap = new Map();
this.metricList.forEach((item,index) => { this.metricList.forEach((item,index) => {
@@ -650,6 +656,20 @@
childArr.push(childOption); childArr.push(childOption);
cascaderMap.set(projectName,childArr); cascaderMap.set(projectName,childArr);
} }
//缓存全局数据
const moduleItem = {
name:moduleName,
metricMap:new Map()
};
if(this.metricAllData.has(projectName)){
let moduleGroup = this.metricAllData.get(projectName);
this.metricAllData.get(projectName).push(moduleItem);
}else {
let moduleList = [];
moduleList.push(moduleItem);
this.metricAllData.set(projectName,moduleList);
}
}); });
let metricCascaderArr = []; let metricCascaderArr = [];
cascaderMap.forEach(function(value,index){ cascaderMap.forEach(function(value,index){
@@ -660,7 +680,9 @@
}; };
metricCascaderArr.push(option); metricCascaderArr.push(option);
}); });
this.metricCascaderList = metricCascaderArr; this.metricCascaderList = metricCascaderArr;
console.log('---response200metricCascaderList---',this.metricCascaderList);
}else { }else {
this.metricList = []; this.metricList = [];
this.metricCascaderList = []; this.metricCascaderList = [];
@@ -692,6 +714,7 @@
} else { } else {
this.$nextTick(() => { this.$nextTick(() => {
console.log('1_+_+_+_+_+_+',JSON.stringify(elementInfo.elements[0]));
this.$refs.chartTag[0].setMdata(elementInfo.elements[0]); this.$refs.chartTag[0].setMdata(elementInfo.elements[0]);
}); });
} }
@@ -719,7 +742,7 @@
this.chart.height = data.height+''; this.chart.height = data.height+'';
this.chart.type = data.type; this.chart.type = data.type;
this.chart.unit=data.unit; this.chart.unit=data.unit;
this.getSuggestMetric();//获得指标列表 //this.getSuggestMetric();//获得指标列表
// 指标 // 指标
this.elements = []; this.elements = [];
bus.chartAddInfo.metricTarget = []; bus.chartAddInfo.metricTarget = [];
@@ -754,7 +777,7 @@
this.productId = parseInt(this.$route.params.productId, 10); this.productId = parseInt(this.$route.params.productId, 10);
} }
*/ */
this.getSuggestMetric();//this.getSuggestMetric(this.productId); //this.getSuggestMetric();
}, },
/*metric部分相关方法--end*/ /*metric部分相关方法--end*/
@@ -807,7 +830,7 @@
}, },
created() { created() {
this.getSuggestMetric();
}, },
watch: { watch: {
panelData: { panelData: {
@@ -826,7 +849,14 @@
} }
} }
} }
},
beforeDestroy() {
if(this.$refs.chartTag){
this.$refs.chartTag.forEach((item, index) => {//循环指标列表
item.clearSelectedTagList();
});
} }
},
} }
</script> </script>
<style> <style>

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

File diff suppressed because it is too large Load Diff

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

@@ -1,8 +1,5 @@
<style lang="scss"> <style lang="scss">
@import 'metricSet'; @import 'metricSet';
// .el-checkbox__input.is-checked+.el-checkbox__label{
// color:$global-text-color-active;
// }
.el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner,.el-checkbox-button.is-checked .el-checkbox-button__inner{ .el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner,.el-checkbox-button.is-checked .el-checkbox-button__inner{
border: 1px solid $header-text-color-active; border: 1px solid $header-text-color-active;
color:#666; color:#666;
@@ -22,25 +19,15 @@
<div class="metric-form"> <div class="metric-form">
<el-row class="element-item" > <el-row class="element-item" >
<chart-metric ref="chartTag" <chart-metric ref="chartTag"
:hasLegend="false"
:count-total="elements.length"
:metric-list="metricList" :metric-list="metricList"
:metricCascaderList="metricCascaderList" :metricCascaderList="metricCascaderList"
:metricAllData="metricAllData"
@on-add-target-success="getTarget" @on-add-target-success="getTarget"
@on-change-condition="getCondition" @on-change-condition="getCondition"
></chart-metric> ></chart-metric>
</el-row> </el-row>
<!-- <el-row class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
<chart-metric ref="chartTag"
:pointer="index"
:metric-list="metricList"
:metricCascaderList="metricCascaderList"
:count-total="elements.length"
@on-delete-target="deleteTarget"
@sub-save-ok="subOk"
@on-add-target-success="getTarget"
@on-change-condition="getCondition"
></chart-metric>
</el-row> -->
<el-row class="operate-area"> <el-row class="operate-area">
@@ -49,73 +36,16 @@
class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
:class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}" :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}"
>{{$t('dashboard.metric.saveChart')}}</button> >{{$t('dashboard.metric.saveChart')}}</button>
<!--<button :disabled="saveDisabled || loading" type="primary" @click="preview('change')" class="margin-l-10"
:class="{'nz-btn nz-btn-disabled nz-btn-size-large nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-large nz-btn-style-light' : !(saveDisabled || loading)}"
>{{chartSwitchWord}}</button>-->
<!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
</el-row> </el-row>
<!--<el-row class="nz-btn-metric-bottom">
<button :disabled="saveDisabled" type="button" @click="saveChart"
:class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-size-large nz-btn-min-width-120 nz-btn-style-light nz-btn-metricbtn btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-style-normal nz-btn-min-width-120' : !saveDisabled}"
>{{$t('dashboard.metric.saveChart')}}</button>
</el-row>-->
<!-- options -->
<!--<el-row class="mt-10 margin-b-10">
<div>Options</div>
</el-row>
<el-form :model="chartInfo" ref="chartInfo">
<el-row>
<div class="common-float-left">
<el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.width')" prop="span"
:rules="{ required: true, type: 'number', trigger: 'change' }">
<el-select class="w-select" size="mini" v-model="chartInfo.span" transfer>
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
span-{{item}}
</el-option>
</el-select>
</el-form-item>
</div> </div>
</el-row>
<el-row>
<div class="common-float-left common-middle">
<el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.high')" prop="height"
:rules="{ required: true, type: 'number', trigger: 'change' }">
<el-input v-model="chartInfo.height" :min="400" size="mini" class="w-select" placeholder=""></el-input>
<span class='nz-input-append'>px</span>
</el-form-item>
</div>
</el-row>
<el-row>
<div class="common-float-left">
<el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.type')" prop="type"
:rules="{ required: true, trigger: 'change' }">
<el-select transfer class="w-select" v-model="chartInfo.type" size="mini">
<el-option v-for="item in typeList"
:key="item.id"
:label="item.name"
:value="item.id">
{{item.name}}
</el-option>
</el-select>
</el-form-item>
</div>
</el-row>
</el-form>-->
</div>
<!--<metric-pre-panel-box :chartInfo="chartInfo" :elementTarget="elementTarget" :seriesData="seriesData" :series="series" :chartCount="chartCount" @reload="reload" ref="panelBox"></metric-pre-panel-box>-->
<chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="reloadPanelData" @reload="reloadPanelData"></chart-box> <chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="reloadPanelData" @reload="reloadPanelData"></chart-box>
</div> </div>
</template> </template>
<script> <script>
//import axios from 'axios'; //import axios from 'axios';
import bus from '../../../libs/bus'; import bus from '../../../libs/bus';
import chartMetric from "./chartMetricForPreview"; //import chartMetric from "./chartMetricForPreview";
import chartMetric from "./chartMetric";
import chartBox from "./chartBox"; import chartBox from "./chartBox";
//import metricPrePanelBox from "../../common/rightBox/metricPrePanelBox"; //import metricPrePanelBox from "../../common/rightBox/metricPrePanelBox";
@@ -134,7 +64,7 @@ export default {
total: 0, total: 0,
loading: false, // 加载中 loading: false, // 加载中
chartModal: false, // 展示弹出框 chartModal: false, // 展示弹出框
elements: [1], // 指标部分 tarNum //elements: [1], // 指标部分 tarNum
// 新建信息 // 新建信息
/*chartInfo: { /*chartInfo: {
title: '', // 名称 title: '', // 名称
@@ -161,6 +91,7 @@ export default {
panelId: 0, panelId: 0,
metricList: [], // metric列表 metricList: [], // metric列表
metricCascaderList:[],//metric级联列表 metricCascaderList:[],//metric级联列表
metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
isSave: false, // 是否要保存 isSave: false, // 是否要保存
saveDisabled: true, // 不可保存 saveDisabled: true, // 不可保存
createModal: false, // 创建看板panel createModal: false, // 创建看板panel
@@ -245,6 +176,7 @@ export default {
saveChart() { //新增chart saveChart() { //新增chart
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle")); this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
this.$refs.addChartModal.show(true); this.$refs.addChartModal.show(true);
//console.log('1_+_+_+_+_+_+',JSON.stringify(this.metricInfo));
this.$refs.addChartModal.createData(-1, this.metricInfo); this.$refs.addChartModal.createData(-1, this.metricInfo);
}, },
// 删除指标,第一步, 新方法 // 删除指标,第一步, 新方法
@@ -323,16 +255,13 @@ export default {
} }
this.elementTarget = {}; // 初始化清空参数 this.elementTarget = {}; // 初始化清空参数
// 触发每个tag组件内部进行校验 // 触发每个tag组件内部进行校验
this.$refs.chartTag.saveTarget(); // => getTartget this.$refs.chartTag.saveTarget(0);
// 保存图表时进行参数认证
/*if (this.isSave) {
this.$refs.chartInfo.validate();
}*/
}, },
// 获取每个tag组件内部校验后数据,点击生成图表时触发 // 获取每个tag组件内部校验后数据,点击生成图表时触发
getTarget(target) { getTarget(target) {
// 由于条件限制，每次其实只有一个target // 由于条件限制，每次其实只有一个target
this.elementTarget = JSON.parse(JSON.stringify(target)); this.elementTarget = JSON.parse(JSON.stringify(target));
console.log('2_+_+_+_+_+_+',JSON.stringify(this.elementTarget));
/*this.$refs.chartInfo.validate((valid) => { /*this.$refs.chartInfo.validate((valid) => {
if (valid) {*/ if (valid) {*/
this.loading = true; this.loading = true;
@@ -550,44 +479,55 @@ export default {
}, },
*/ */
// 获取metric列表 // 获取metric列表
getSuggestMetric(id) { getSuggestMetric() {
//this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => { //this.$get('/prom/api/v1/label/__name__/values').then(response => {
this.$get('/prom/api/v1/label/__name__/values', {pageNo: 1, pageSize: -1}).then(response => { this.$get('/module?pageSize=-1').then(response => {
//if (response.code === 200) { console.log('---response---',response);
if (response.status === 'success') { if (response.code === 200) {
this.metricList = response.data; console.log('---response200---',response);
this.metricList = response.data.list;
const cascaderMap = new Map(); const cascaderMap = new Map();
this.metricList.forEach((item,index) => { this.metricList.forEach((item,index) => {
let arr = []; let projectName = item.project.name;
let par = '';//父value let moduleName = item.name;
//let metricTmp = item.metric;//子value
let metricTmp = item;//子value
if(metricTmp){
arr = metricTmp.split('_');
par = arr[0];
}
const childOption = { const childOption = {
value: metricTmp, value: moduleName,
label: metricTmp, label: moduleName,
children:[],
}; };
if(cascaderMap.has(par)){ if(cascaderMap.has(projectName)){
cascaderMap.get(par).push(childOption); cascaderMap.get(projectName).push(childOption);
}else { }else {
let childArr = []; let childArr = [];
childArr.push(childOption); childArr.push(childOption);
cascaderMap.set(par,childArr); cascaderMap.set(projectName,childArr);
}
//缓存全局数据
const moduleItem = {
name:moduleName,
metricMap:new Map()
};
if(this.metricAllData.has(projectName)){
let moduleGroup = this.metricAllData.get(projectName);
this.metricAllData.get(projectName).push(moduleItem);
}else {
let moduleList = [];
moduleList.push(moduleItem);
this.metricAllData.set(projectName,moduleList);
} }
}); });
let metricCascaderArr = []; let metricCascaderArr = [];
cascaderMap.forEach(function(value,index){ cascaderMap.forEach(function(value,index){
const option = { const option = {
value: index+"_par",//父节点和子节点的value相同，会出现点击与父节点label同名的子节点时，不显示选择的内容 value: index+"_par",
label: index, label: index,
children:value, children:value,
}; };
metricCascaderArr.push(option); metricCascaderArr.push(option);
}); });
this.metricCascaderList = metricCascaderArr; this.metricCascaderList = metricCascaderArr;
console.log('---response200metricCascaderList---',this.metricCascaderList);
}else { }else {
this.metricList = []; this.metricList = [];
this.metricCascaderList = []; this.metricCascaderList = [];
@@ -634,8 +574,11 @@ export default {
}, },
*/ */
}, },
created() {
this.getSuggestMetric();
},
mounted() { mounted() {
this.initOpen(); //this.initOpen();
/* /*
bus.$on('on-shrink-change', () => { bus.$on('on-shrink-change', () => {
this.preview(); this.preview();

8
nezha-fronted/src/tools.js
View File

@@ -118,6 +118,11 @@ export const scrollBar = {
el = el.querySelector(".xterm-viewport"); el = el.querySelector(".xterm-viewport");
!el && console.warn("未发现className为xterm-viewport的dom"); !el && console.warn("未发现className为xterm-viewport的dom");
} }
if(arg==="metric-label-cascader"){
el = el.querySelector(".el-cascader__tags");
!el && console.warn("未发现className为el-cascader__tags的dom");
}
el.classList.add("ps"); el.classList.add("ps");
el.addEventListener("ps-scroll-y", () => el.addEventListener("ps-scroll-y", () =>
el.classList.add("ps") el.classList.add("ps")
@@ -150,6 +155,9 @@ export const scrollBar = {
}else if (arg === "xterm") { }else if (arg === "xterm") {
el = el.querySelector(".xterm-viewport"); el = el.querySelector(".xterm-viewport");
!el && console.warn("未发现className为xterm-viewport的dom"); !el && console.warn("未发现className为xterm-viewport的dom");
}else if(arg==="metric-label-cascader"){
el = el.querySelector(".el-cascader__tags");
!el && console.warn("未发现className为el-cascader__tags的dom");
} }
setTimeout(() => { setTimeout(() => {
el.classList.add("ps"); el.classList.add("ps");