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

Merge remote-tracking branch 'origin/codeCheck' into codeCheck

Browse Source
This commit is contained in:
陈劲松
2020-03-04 21:27:56 +08:00
parent 66ec1dc0d1 c2331eaeeb
commit e8b960e92b
8 changed files with 188 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -298,8 +298,9 @@ export default {
let t_date = new Date(dpsItem[0] * 1000);
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
tableData.push({//表格数据
label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
// label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
// metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
element:{element:host,alias:alias},
time: timeTmp,//采集时间
value: dpsItem[1],//数值
});
@@ -378,6 +379,7 @@ export default {
}).catch((error) => {
if (error) {
this.$message.error(error.toString());
console.error(error)
}
});
});
@@ -395,9 +397,12 @@ export default {
let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2)
let reg=new RegExp(label+'=".+?"')
let find=legend.match(reg)[0];
let value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
return value;
let value=null;
if(reg.test(legend)){
let find=legend.match(reg)[0];
value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
}
return value?value:label;
})
return labelValue
}else{

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

@@ -26,9 +26,14 @@
</div>
<div class="mt-10" v-cloak v-show="firstShow">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :data="seriesItem" :height="350" border tooltip-effect="light" v-cloak v-scrollBar:el-table>
<el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
<el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
<!-- <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
<!-- <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" >
<template slot-scope="scope">
{{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
</template>
</el-table-column>
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
</el-table>
</div>
@@ -43,9 +48,14 @@
</div>
</div>
<el-table style="margin-top: 30px;" class="nz-table" :data="seriesItemScreen" :height="350" border tooltip-effect="light" v-scrollBar:el-table>
<el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
<el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
<!-- <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
<!-- <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" >
<template slot-scope="scope">
{{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
</template>
</el-table-column>
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
</el-table>
@@ -116,17 +126,24 @@ export default {
firstShow: false, // 默认不显示操作按钮,
divFirstShow:false,
//tableLoading: false,
columns: [{
title: 'metric',
key: 'metric',
width: 200,
sortable: true,
}, {
title: 'Label', //tag
key: 'name',
minWidth: 200,
sortable: true,
}, {
columns: [
// {
// title: 'metric',
// key: 'metric',
// width: 200,
// sortable: true,
// }, {
// title: 'Label', //tag
// key: 'name',
// minWidth: 200,
// sortable: true,
// }
{
title:'Element',
key:'element',
sortable: true
}
, {
title: '采集时间',
key: 'time',
width: 160,
@@ -300,8 +317,9 @@ export default {
this.seriesItemScreen = [];
for(let i=0;i<8;i++){
this.seriesItemScreen.push({//表格数据
label: '',//label
metric: '',//metric列
// label: '',//label
// metric: '',//metric列
element:'',
time: '',//采集时间
value: '',//数值
});

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

@@ -244,7 +244,7 @@
if (this.data.type === 'line' || this.data.type === 'bar' || this.data.type === 4) {
return true;
}
return false;
return false;
},
*/
},
@@ -254,23 +254,114 @@
this.divFirstShow = showDiv;
},
clickLegend(legendName,index){
if (this.echartStore) {
this.echartStore.dispatchAction({
type: 'legendToggleSelect',
name: legendName
});
let isGreyTmp = this.isGrey[index];
this.$set(this.isGrey, index, !isGreyTmp);
// if (this.echartStore) {
// this.echartStore.dispatchAction({
// type: 'legendToggleSelect',
// name: legendName
// });
// let isGreyTmp = this.isGrey[index];
// this.$set(this.isGrey, index, !isGreyTmp);
// }
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
let curIsGrey=this.isGrey[index];
if(this.echartStore){
this.legendList.forEach((item,i)=>{
let isGrey = this.isGrey[i];
if(index != i){
if(!curIsGrey && !isGrey){
this.echartStore.dispatchAction({
type: 'legendUnSelect',
name: item.name
});
}else if(!curIsGrey && isGrey){
this.echartStore.dispatchAction({
type: 'legendSelect',
name: item.name
});
}else{
this.echartStore.dispatchAction({
type: 'legendUnSelect',
name: item.name
});
}
}else {
this.echartStore.dispatchAction({
type: 'legendSelect',
name: item.name
});
}
})
this.isGrey.forEach((item,i)=>{
if(index != i){
if(!curIsGrey && !item){
this.$set(this.isGrey, i, true);
}else if(!curIsGrey && item){
this.$set(this.isGrey, i, false);
}else{
this.$set(this.isGrey, i, true);
}
}else{
if(item === true){
this.$set(this.isGrey, i, false);
}
}
})
}
},
clickScreenLegend(legendName,index){
if (this.echartModalStore) {
this.echartModalStore.dispatchAction({
type: 'legendToggleSelect',
name: legendName
});
let isGreyTmp = this.isGreyScreen[index];
this.$set(this.isGreyScreen, index, !isGreyTmp);
// if (this.echartModalStore) {
// this.echartModalStore.dispatchAction({
// type: 'legendToggleSelect',
// name: legendName
// });
// let isGreyTmp = this.isGreyScreen[index];
// this.$set(this.isGreyScreen, index, !isGreyTmp);
// }
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
let curIsGrey=this.isGreyScreen[index];
if(this.echartModalStore){
this.screenLegendList.forEach((item,i)=>{
let isGrey = this.isGreyScreen[i];
if(index != i){
if(!curIsGrey && !isGrey){
this.echartModalStore.dispatchAction({
type: 'legendUnSelect',
name: item.name
});
}else if(!curIsGrey && isGrey){
this.echartModalStore.dispatchAction({
type: 'legendSelect',
name: item.name
});
}else{
this.echartModalStore.dispatchAction({
type: 'legendUnSelect',
name: item.name
});
}
}else {
this.echartModalStore.dispatchAction({
type: 'legendSelect',
name: item.name
});
}
})
this.isGreyScreen.forEach((item,i)=>{
if(index != i){
if(!curIsGrey && !item){
this.$set(this.isGreyScreen, i, true);
}else if(!curIsGrey && item){
this.$set(this.isGreyScreen, i, false);
}else{
this.$set(this.isGreyScreen, i, true);
}
}else{
if(item === true){
this.$set(this.isGreyScreen, i, false);
}
}
})
}
},
clearData(){
@@ -406,6 +497,9 @@
//display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
let str = `<div style='width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
params.forEach((item, i) => {
let tip=legend.find((element)=>{
return element.name == item.seriesName;
})
if(i===0){
let t_date = new Date(item.data[0]);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
@@ -446,7 +540,7 @@
*/
str += `<div style='max-width:510px;display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${item.seriesName}: `;
str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${tip.alias?tip.alias:tip.name}: `;
str +=`</div>`;
str += `<div style='max-width:90px;min-width:20px;float:right;text-align:right;display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
str +=val;

10
nezha-fronted/src/components/common/js/common.js Normal file
View File

@@ -0,0 +1,10 @@
export function resetZIndex(e){
let popId=e.target.getAttribute('aria-describedby');//这里获取的属性 在包含slot='reference'
if(!popId){
popId=e.target.parentNode.getAttribute('aria-describedby');
}
let pop=document.getElementById(popId);
setTimeout(function(){
pop.style.zIndex=999999;
},100)
}

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

@@ -85,6 +85,8 @@ const en = {
chartId:"ID",
chartName:"Chart Name",
type:"Type",
legend:'Legend',
legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
typeVal:{
line:{
label:'Line Chart' //"曲线图"
@@ -104,6 +106,7 @@ const en = {
chartTableColumn:{
metric:'Metric', //'指标'
label:'Label', //'标签'
element:'Element',
time:'Time', //'时间'
value:'Value', //'值'
},

1
nezha-fronted/src/components/page/asset/accountConfig.vue
View File

@@ -90,6 +90,7 @@ export default {
clearPrivateKey:function(){
this.account.privateKey=null;
},
handleChange(file,fileList) {
if (fileList.length > 0) {
this.uploadFileList = [fileList[fileList.length - 1]]

11
nezha-fronted/src/components/page/asset/endpointStatusPop.vue
View File

@@ -38,7 +38,7 @@
<div class="inner-col right">
<el-popover placement="right" width="50" trigger="hover" :content="(item.state == 1?'up':'down')+'['+(item.lastUpdate&&item.lastUpdate!=''?(new Date(item.lastUpdate).getHours()+':'+new Date(item.lastUpdate).getMinutes()):'--')+']'" >
<div slot="reference" style="width: 20px">
<div @mouseover="resetZIndex" :class="{'active-icon green':item.state == 1,'active-icon red':item.state == 0}"></div>
<div @mouseover="resetZIndex($event)" :class="{'active-icon green':item.state == 1,'active-icon red':item.state == 0}"></div>
</div>
</el-popover>
</div>
@@ -59,6 +59,7 @@
</template>
<script>
import {resetZIndex} from '../../common/js/common'
export default {
name: "endpointStatusPop",
props:{
@@ -146,13 +147,7 @@
esc:function(){
this.popBox.show=false;
},
resetZIndex:function(e){
let popId=e.target.parentElement.getAttribute('aria-describedby');
let pop=document.getElementById(popId);
setTimeout(function(){
pop.style.zIndex=999999;
},100)
},
resetZIndex,
atShowPop:function(){
this.getEndpointDatas();
},

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

@@ -193,14 +193,23 @@
</el-col>
</el-row>
<el-form-item label="legend" prop="legend" >
<el-input v-model="elementInfo.legend" type="text" size="small"></el-input>
<el-form-item prop="legend" >
<el-row :gutter="4">
<el-col :span="4">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
<i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="resetZIndex"></i>
</el-popover>
</el-col>
<el-col :span="20"><el-input v-model="elementInfo.legend" type="text" size="small"></el-input></el-col>
</el-row>
<!-- <el-input v-model="elementInfo.legend" type="text" size="small"></el-input>-->
</el-form-item>
</el-form>
</template>
<script>
import bus from '../../../libs/bus';
import {resetZIndex} from "../../common/js/common";
export default {
name: 'chartTag',
props: {
@@ -598,7 +607,8 @@ export default {
if(val===1){
this.elementInfo.expression='';
}
}
},
resetZIndex,
},
computed: {
metricShowList() {