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

feat:新增功能

Browse Source 
1.图表预览国际化
2.图表预览多图展示的创建面板和选择已有面板
3.图表预览创建或者选择面板保存成功后跳转到panel界面
（说明：曲线图tip信息显示还未调整及legend滚动条显示还未实现）
This commit is contained in:
hanyuxia
2020-01-15 17:17:08 +08:00
parent 84f8791021
commit fb46c00683
11 changed files with 169 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -90,7 +90,7 @@ export default {
}else {
this.dataList = response.data;
}
if (this.dataList.length > 0) {
if (this.dataList.length > 0 && this.$refs.editChart) {
this.$refs.editChart.forEach((item) => {
item.showLoad();//之后要实现
});

3
nezha-fronted/src/components/charts/line-chart-block.scss
View File

@@ -93,4 +93,7 @@
border-bottom: 1px solid #dfe7f2;
margin-bottom:-20px;
}
.pt10{
padding-top:10px;
}
}

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

@@ -31,7 +31,7 @@
:before-close="handleClose"
@opened="initDialog">
<el-row class="element-top-border" >
<div class="float-right" style="padding-top:10px;">
<div class="float-right pt10" >
<el-date-picker size="small" ref="calendar"
format="yyyy/MM/dd HH:mm"
@change="dateChange"
@@ -242,7 +242,8 @@ export default {
],
tooltip: {
trigger: 'axis',
confine:true
confine:true,
//formatter:"{a}<br/>"+"<div style='display:block;word-break:break-all;word-wrap:break-word;white-space:pre-wrap'>"+"{b}"+"</div>"+"<br/>{c}",
},
legend: {
type:'scroll',
@@ -371,9 +372,6 @@ export default {
return `${parseFloat(kbNum.toFixed(2))}K`;
}
return parseFloat(num.toFixed(2));
//alert(1);
//return value;
//return this.getNumStr(value);
},
},
//boundaryGap:[0,0.2]

9
nezha-fronted/src/components/common/language/cn.js
View File

@@ -89,7 +89,14 @@ const cn = {
expert:"Expert",
label:"指标标签",
addMetric:"添加指标",
expertTip:"请输入表达式"
expertTip:"请输入表达式",
goPanelTip:"是否前去看板,查看创建的图表？",
previewChart:"预览图表",
singleChartShow:"单图展示",
multiChartsShow:"多图展示",
createPanel:"创建面板",
selectPanel:"选择已有面板",
saveChartToPanel:"保存图表到看板"
},
metricPreview:{
title:'指标预览',

10
nezha-fronted/src/components/common/language/en.js
View File

@@ -98,8 +98,14 @@ const en = {
expert:"Expert",
label:"MetricLabel",
addMetric:"Create Metric",
expertTip:"Please enter an expression"
expertTip:"Please enter an expression",
goPanelTip:"Go to the panel to view the created chart ?",
previewChart:"Preview Chart",
singleChartShow:"Single Graph Display",
multiChartsShow:"Multi Graph Display",
createPanel:"Create Panel",
selectPanel:"Select Panel",
saveChartToPanel:"Save Chart To Panel"
},
metricPreview:{
title:'Metric Preview',

143
nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue
View File

@@ -54,13 +54,16 @@
</template>
<script>
import bus from '../../../libs/bus';
import axios from 'axios';
export default {
name: "metricPrePanelBox",
props: {
chartInfo: Object,
elementTarget:Object,
seriesData:Object,
chartCount:Object
chartCount:Object,
series:Object
},
data() {
return {
@@ -116,37 +119,30 @@
// 多图模式
if (this.chartCount === 'multiple') {
this.createChartList = [];
//alert(JSON.stringify(this.seriesData));
this.seriesData.forEach((queryItem) => {
const soleParam = Object.assign({}, params);
const elements = [];
let tagStr = ''; // tag字符串
let host = `${queryItem.metric}, `; // 名称
const tagsArr = Object.keys(queryItem.tags);
// 根据图表展示时获取的tag进行组装名称以及tag字符串
tagsArr.forEach((tag) => {
if (tag !== 'uuid') {
host += `${tag}=${queryItem.tags[tag]}, `;
if (tagStr) {
tagStr += `,${tag}=${queryItem.tags[tag]}`;
} else {
tagStr += `${tag}=${queryItem.tags[tag]}`;
}
// 图表中每条线的名字,后半部分
let host = `${queryItem.metric.__name__}`;//up,
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 判断是否有数据
if (queryItem.values.length > 0 && tagsArr.length > 0) {
host +="{";
tagsArr.forEach((tag, i) => {
if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`;
}
});
// 图表中每条线的名字,去掉最后的逗号与空格
host = host.substring(0, host.length - 2);
if(host.endsWith(',')){host = host.substr(0,host.length-1);}
host +="}";
}
soleParam.title = host;
elements.push({
expression: this.elementTarget.metric,
expression: host,
type: this.elementTarget.type,
});
soleParam.elements = elements;
//if (valid) {
this.addMultipleChart(soleParam);
//}
});
} else if (this.chartCount === 'single') {
params.title = this.chartSaveInfo.title;
@@ -174,44 +170,96 @@
addCharts(params) {
this.$post('panel/'+this.panelId+'/charts', params).then(response => {
if (response.code === 200) {
this.elementTarget = {};
//this.saveDisabled = true; // 创建成功后,不能再次创建??
this.$emit('reload');
let panelId= this.panelId;
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
/*
this.$confirm(this.$t("tip.confirmDelete"), {
this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
type: 'success'
}).then(() => {
});
*/
/*
this.$Modal.confirm({
title: '创建成功',
content: `是否前去看板：${this.panelItem.name}，查看创建的图表`,
onOk: () => {
//this.$store.state.assetData.moduleData = 'panel';
this.$store.state.showPanel.id = panelId;
this.$store.state.showPanel.name = this.panelItem.name;
this.$router.push({
path: `/console/panel/detail/${this.panelId}/${this.productId}`,
path: "/panel",
query: {
product: this.$route.query.product,
panel: this.panelItem.name,
},
t: +new Date()
}
});
},
onCancel: () => {
this.cancel();
},
});
*/
this.$emit('reload');
} else {
this.$message.error(response.msg);
}
});
},
// 创建多个图表
addMultipleChart(params) {
this.createChartList.push(params);
if (this.seriesData.length === this.createChartList.length) {
this.$nextTick(() => {
const api = [];
this.createChartList.forEach((item) => {
api.push(this.$post('panel/'+this.panelId+'/charts', item));
});
axios.all(api).then((res) => {
let successFlag = true;
res.forEach((item) => {
if (item.code !== 200) {
successFlag = false;
}
});
if (successFlag) {
//this.saveDisabled = true; // 创建成功后,不能再次创建
let panelId=this.panelId;
this.createChartList = [];
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'success'
}).then(() => {
//this.$store.state.assetData.moduleData = 'panel';
this.$store.state.showPanel.id = panelId;
this.$store.state.showPanel.name = this.panelItem.name;
this.$router.push({
path: "/panel",
query: {
t: +new Date()
}
});
});
//this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
//this.elementTarget = {};
/*
this.$confirm(this.$t("dashboard.metric.goPanelTip"), this.$t("tip.saveSuccess"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'info'
}).then(() => {
alert('multi-ok');
/*
this.$router.push({
path: `/console/panel/detail/${this.panelId}/${this.productId}`,
query: {
panel: this.panelItem.name,
},
});
*/
//});
this.$emit('reload');
} else {
this.$message.error(response.msg);
}
});
});
}
},
save: function() {
this.$refs.chartSaveInfo.validate((flag) => {
if (flag) { // 再判断弹出窗口内内容是否正确
@@ -222,9 +270,6 @@
this.panelId = response.data.panel.id;
this.panelItem = response.data.panel;
this.getOptions();
//this.esc();
//this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
//this.$emit("reload");----询问是否去查看
} else {
this.$message.error(response.msg);
}
@@ -246,7 +291,9 @@
this.$refs.chartSaveInfo.resetFields();
}
if (this.$refs.panelSelect) {
this.$refs.panelSelect.reset();
this.chartSaveInfo.panelId='';
this.panelId=0;
// this.$refs.panelSelect..reset();
}
},
getTableData: function() {

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

@@ -14,7 +14,7 @@
<div class="top-tools" >
<div class="float-left metric-title" >指标预览
<div class="float-left metric-title" >{{$t('dashboard.metricPreview.title')}}
</div>
<div class="float-right mr-10">
<el-date-picker size="small" ref="calendar"
@@ -179,8 +179,10 @@ export default {
},
methods: {
jumpTo(data,id) {
this.$store.state.assetData.moduleData = data;
this.$store.state.assetData.selectedData = id;
//this.$store.state.assetData.moduleData = data;
//this.$store.state.assetData.selectedData = id;
this.$store.state.showPanel.id = 0;
this.$store.state.showPanel.name = '';
this.$router.push({
path: "/" + data,
query: {
@@ -280,12 +282,13 @@ export default {
metric_name: '',
};
// 图表中每条线的名字,后半部分
let host = `${queryItem.metric.__name__}{`;//up,
let host = `${queryItem.metric.__name__}`;//up,
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对
const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
// 判断是否有数据
if (dpsArr.length > 0 && tagsArr.length > 0) {
host +="{";
tagsArr.forEach((tag, i) => {
if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`;
@@ -312,7 +315,7 @@ export default {
}
});
// 将获取的数据运用于创建多个图表备用
this.$refs.metricSet.setSeries(response.data.result.values);//???
this.$refs.metricSet.setSeries(response.data.result,series);
if (this.chartCount === 'single') {
this.setSize(chartItem.span, 0);
const filterParams = Object.assign({}, this.filter);

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

@@ -51,6 +51,9 @@
.nx-btn-disabled{
cursor:not-allowed;
}
.w-select{
width:130px;
}
}
// .setdata {

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

@@ -12,20 +12,20 @@
></chart-metric>
</el-row>
<el-row class="pt-5 pb-5">
<button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal ">预览图表</button>
<button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal ">{{$t('dashboard.metric.previewChart')}}</button>
<button :disabled="saveDisabled || loading" type="primary" @click="preview('change')"
:class="{'nz-btn nx-btn-disabled' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !(saveDisabled || loading)}"
>{{chartSwitchWord}}</button>
<!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
</el-row>
<el-row class="operate-area">
<div class="operate-area-title">保存图表到看板:</div>
<div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div>
<button :disabled="saveDisabled" type="primary" @click="createNew"
:class="{'nz-btn nx-btn-disabled' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
>创建看板</button>
>{{$t('dashboard.metric.createPanel')}}</button>
<button :disabled="saveDisabled" type="primary" @click="selectPanel"
:class="{'nz-btn nx-btn-disabled' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
>选择已有看板</button>
>{{$t('dashboard.metric.selectPanel')}}</button>
</el-row>
<el-row class="mt-10">
<el-checkbox :disabled="saveDisabled" v-model="isSave">options</el-checkbox>
@@ -33,9 +33,9 @@
<el-form :model="chartInfo" ref="chartInfo" v-show="isSave">
<el-row>
<div class="common-float-left">
<el-form-item :label-width="80" label="图宽" prop="span"
:rules="{ required: true, type: 'number', message: '请选择图表宽度', trigger: 'change' }">
<el-select style="width:130px;" size="small" v-model="chartInfo.span" transfer>
<el-form-item :label-width="80" :label="$t('dashboard.panel.chartForm.width')" prop="span"
:rules="{ required: true, type: 'number', trigger: 'change' }">
<el-select class="w-select" size="small" v-model="chartInfo.span" transfer>
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
span-{{item}}
</el-option>
@@ -43,17 +43,17 @@
</el-form-item>
</div>
<div class="common-float-left">
<el-form-item :label-width="80" label="图高" prop="height"
:rules="{ required: true, type: 'number', message: '请输入图表高度', trigger: 'change' }">
<el-input-number :min="400" size="small" v-model="chartInfo.height" style="width: 130px" placeholder="请输入图表高度"></el-input-number>px
<el-form-item :label-width="80" :label="$t('dashboard.panel.chartForm.high')" prop="height"
:rules="{ required: true, type: 'number', trigger: 'change' }">
<el-input-number :min="400" size="small" v-model="chartInfo.height" class="w-select" placeholder=""></el-input-number>px
</el-form-item>
</div>
</el-row>
<el-row>
<div class="common-float-left">
<el-form-item :label-width="80" label="类型" prop="type"
:rules="{ required: true, message: '请选择图表类型', trigger: 'change' }">
<el-select transfer style="width:130px;" v-model="chartInfo.type" size="small">
<el-form-item :label-width="80" :label="$t('dashboard.panel.chartForm.type')" prop="type"
:rules="{ required: true, trigger: 'change' }">
<el-select transfer class="w-select" v-model="chartInfo.type" size="small">
<el-option v-for="item in typeList"
:key="item.id"
:label="item.name"
@@ -66,7 +66,7 @@
</el-row>
</el-form>
</div>
<metric-pre-panel-box :chartInfo="chartInfo" :elementTarget="elementTarget" :seriesData="seriesData" :chartCount="chartCount" @reload="reload" ref="panelBox"></metric-pre-panel-box>
<metric-pre-panel-box :chartInfo="chartInfo" :elementTarget="elementTarget" :seriesData="seriesData" :series="series" :chartCount="chartCount" @reload="reload" ref="panelBox"></metric-pre-panel-box>
</div>
</template>
@@ -130,20 +130,22 @@ export default {
metricInfo: {}, // 保存从chartTag中获取的seriesData
createChartList: [], // 创建多个图表的图表信息
seriesData: [], // 查询图表后生成的series信息,用于生成多个图表时提供图表title
series:[],//组织好的数据
panelItem: {}, // 保存看板信息
};
},
computed: {
chartSwitchWord() {
const word = this.chartCount === 'single' ? '多图展示' : '单图展示';
const word = this.chartCount === 'single' ? this.$t('dashboard.metric.multiChartsShow'): this.$t('dashboard.metric.singleChartShow');
return word;
},
},
watch: {},
methods: {
// 父级调用保存series,作为多个图表生成title
setSeries(data) {
setSeries(data,series) {
this.seriesData = data;
this.series = series;
},
// 默认打开
initOpen() {
@@ -156,6 +158,8 @@ export default {
reload(){
this.saveDisabled = true;
this.elementTarget = {};
},
// 创建看板
createNew() {

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

@@ -451,8 +451,8 @@
/*时间条件查询--end*/
//公用操作
jumpTo(data,id) {
this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id
//this.$store.state.assetData.moduleData = data
//this.$store.state.assetData.selectedData = id
this.$router.push({
path: "/" + data,
query: {
@@ -465,6 +465,10 @@
if (response.code === 200) {
this.panelData = response.data.list;
if( response.data.list.length>0 ){
if(this.$store.state.showPanel.id!==0&&this.$store.state.showPanel.name!==''){
this.showPanel.name = this.$store.state.showPanel.name;
this.showPanel.id = this.$store.state.showPanel.id;
}
if(this.showPanel.id===''){
this.showPanel.id = response.data.list[0].id;
this.filter.panelId = this.showPanel.id;
@@ -475,10 +479,12 @@
this.showPanel.id ='';
this.filter.panelId='';
}
this.pageObj.total = response.data.total
this.pageObj.total = response.data.total;
if(this.panel.id===''||this.panel.id===this.showPanel.id){
this.getData(this.filter);
}
this.$store.state.showPanel.id = 0;
this.$store.state.showPanel.name = '';
}
})
},

4
nezha-fronted/src/store/index.js
View File

@@ -30,6 +30,10 @@ const store = new Vuex.Store({
event_positiony: 0,
event_positionx: -200
},
showPanel:{
id:0,
name:''
}
},
getters: {
},