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:
chenjinsong
2020-09-07 19:50:47 +08:00
parent 6d6e52b0a0 f5516e5022
commit aa05a8c111
40 changed files with 375 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
nezha-fronted/src/assets/css/font/iconfont.eot
View File

Binary file not shown.

6
nezha-fronted/src/assets/css/font/iconfont.svg
View File

@@ -20,6 +20,12 @@ Created by iconfont
/>
<missing-glyph />
<glyph glyph-name="caret-right" unicode="&#59058;" d="M133.6629667-19.043833329999984l432.1617 369.985A56.699 56.699 0 0 1 586.9666667 394.66666667a56.699 56.699 0 0 1-21.142 43.7255L133.6629667 808.37716667A76.9761 76.9761 0 0 1 57.4556667 822.6960666699999 69.4803 69.4803 0 0 1 10.3666667 764.6516666699999v-739.6817a69.192 69.192 0 0 1 46.8968-58.2366 76.88 76.88 0 0 1 76.3995 14.2228z" horiz-adv-x="1024" />
<glyph glyph-name="caret-left" unicode="&#59060;" d="M911.67036663 797.7105L479.50866663 427.7255A56.699 56.699 0 0 1 458.36666663 384c0-16.7214 7.688-32.674 21.142-43.7255l432.1617-369.985a76.9761 76.9761 0 0 1 76.3034-14.3189 69.4803 69.4803 0 0 1 46.9929 58.0444V753.6967a69.192 69.192 0 0 1-46.8968 58.2366 76.88 76.88 0 0 1-76.3995-14.2228z" horiz-adv-x="1024" />
<glyph glyph-name="overview-project" unicode="&#58988;" d="M1023.06176 661.461333c0-33.066667-26.794667-59.861333-59.861333-59.861333H59.904427A59.861333 59.861333 0 0 0 0.000427 661.461333V836.096A59.861333 59.861333 0 0 0 59.904427 896h903.253333a59.904 59.904 0 0 0 59.904-59.904v-174.634667zM850.13376 748.8a39.253333 39.253333 0 1 1 78.549333 0 39.253333 39.253333 0 0 1-78.549333 0zM1023.06176 297.81333299999994a59.904 59.904 0 0 0-59.861333-59.946666H59.904427A59.861333 59.861333 0 0 0 0.000427 297.81333299999994V472.533333a59.904 59.904 0 0 0 59.904 59.861334h903.253333a59.861333 59.861333 0 0 0 59.904-59.861334v-174.762666zM870.059093 385.152a39.253333 39.253333 0 1 1 78.549334 0 39.253333 39.253333 0 0 1-78.506667 0zM1023.06176-56.53333299999997a59.904 59.904 0 0 0-59.861333-59.904H59.904427A59.904 59.904 0 0 0 0.000427-56.53333299999997v174.634666a59.904 59.904 0 0 0 59.904 59.904h903.253333a59.904 59.904 0 0 0 59.904-59.904v-174.634666zM878.80576 30.80533300000002a39.296 39.296 0 1 1 78.592 0 39.296 39.296 0 0 1-78.592 0z" horiz-adv-x="1024" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 102 KiB

BIN
nezha-fronted/src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

20
nezha-fronted/src/assets/css/nzIcon.css
View File

File diff suppressed because one or more lines are too long

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

@@ -846,6 +846,7 @@
endTime = this.filter.end_time;
//this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
} else {
console.log('页面进入',this.filter)
startTime = this.filter.start_time;
endTime = this.filter.end_time;
}

10
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -205,10 +205,7 @@
showLegend:true,
tableShow:true,
urlShow:true,
searchTime: [
new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
new Date(bus.computeTimezone(new Date().getTime()))
],
searchTime: bus.getTimezontDateRange(),
//oldSearchTime:[],
minHeight:200,
chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
@@ -224,10 +221,7 @@
// 全屏查看
show(chartInfo) {
this.isError = false;
this.searchTime = [
new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
new Date(bus.computeTimezone(new Date().getTime()))
];
this.searchTime = bus.getTimezontDateRange();
this.chart = JSON.parse(JSON.stringify(chartInfo));
let chartType= chartInfo.type;

11
nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
View File

@@ -94,10 +94,7 @@
show: false,
},
tableHover: false,
searchTime: [
new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
new Date(bus.computeTimezone(new Date().getTime()))
],
searchTime: bus.getTimezontDateRange(),
intervalTimer: null,
interval: 0,
panel: { //新增panel
@@ -256,9 +253,9 @@
// 获取数据,用在子页面
getData(params) {
if (params.start_time === '' || params.end_time === '') {
let now = new Date();
let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
let startTimeTmp = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss');
let now = bus.getTimezontDateRange();
let endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss');
let startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss');
params.start_time = startTimeTmp;
params.end_time = endTimeTmp;
params.from = this.from;

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

@@ -848,6 +848,7 @@ const cn = {
addLine:'添加连线',
lineName:'连线名称',
width:'宽度',
dashes:'虚线',
option:'设置',
arrows:'箭头方向',
color:'颜色',

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

@@ -855,7 +855,8 @@ const en = {
cancel:'cancel',
addLine:'Add Line',
lineName:'Line Name',
width:'width',
width:'thickness',
dashes:'Dotted line',
option:'Option',
arrows:'Arrows',
color:'Color',

301
nezha-fronted/src/components/common/project/addLine.vue
View File

@@ -21,73 +21,122 @@
<el-input v-model="form.lineName" size="small"></el-input>
</el-form-item>
<el-row class="form-title">{{$t('project.topology.option')}}</el-row>
<el-form-item :label="$t('project.topology.width')" prop="width" class="line-name">
<el-input v-model="form.width" size="small"></el-input>
</el-form-item>
<!--<el-form-item label="roundness" class="line-name">-->
<!--<el-input v-model="form.roundness"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="type" class="line-name">-->
<!--<el-select v-model="form.type" placeholder="" :popper-append-to-body="false">-->
<!--&lt;!&ndash;'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'&ndash;&gt;-->
<!--<el-option label="dynamic" value="dynamic"></el-option>-->
<!--<el-option label="continuous" value="continuous"></el-option>-->
<!--<el-option label="discrete" value="discrete"></el-option>-->
<!--<el-option label="diagonalCross" value="diagonalCross"></el-option>-->
<!--<el-option label="straightCross" value="straightCross"></el-option>-->
<!--<el-option label="horizontal" value="horizontal"></el-option>-->
<!--<el-option label="vertical" value="vertical"></el-option>-->
<!--<el-option label="curvedCW" value="curvedCW"></el-option>-->
<!--<el-option label="cubicBezier" value="cubicBezier"></el-option>-->
<!--</el-select>-->
<!--</el-form-item>-->
<el-form-item :label="$t('project.topology.arrows')" prop="arrows" class="arrows">
<el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false" size="small">
<div slot="prefix">
<img v-if="form.arrows=='from'" src="./image/leftArrow.png" />
<img v-if="form.arrows=='to'" src="./image/rightArrow.png" />
<img v-if="form.arrows=='from;to'" src="./image/LRArrow.png" />
<img v-if="form.arrows=='0'" src="./image/noArrow.png" />
<div class="line-option">
<!--<el-form-item :label="$t('project.topology.width')" prop="width" class="line-width">-->
<!--<el-input v-model="form.width" size="small"></el-input>-->
<!--</el-form-item>-->
<el-form-item :label="$t('project.topology.width')" prop="width" class="line-width">
<el-select v-model="form.width" placeholder="" :popper-append-to-body="false" size="small">
<div slot="prefix">
<div :style="{height:0,width:'80%',borderTop:form.width+'px'+' solid' +' #899FB7'}"></div>
</div>
<el-option v-for="(item,index) in widthOption" :label="item+'px'" :value="item" :key="index">
<div class="width-option">
<span style="marginRight:5px">{{item}}px</span><div class="width-option-line" :style="{height:0,width:'80%',borderTop:item+'px solid #899FB7'}"></div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('project.topology.dashes')" prop="width" class="line-width">
<el-select v-model="form.dashes" placeholder="" :popper-append-to-body="false" size="small">
<div slot="prefix">
{{form.dashes}}
</div>
<el-option v-for="(item,index) in dashesOption" :label="item+'px'" :value="item" :key="index">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('project.topology.arrows')" prop="arrows" class="arrows">
<el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false" size="small">
<div slot="prefix">
<div class="width-option">
<div v-if='form.arrows==="from"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
<i class="nz-icon nz-icon-caret-right position-right" style="top: -15px;"></i>
</div>
<div v-if='form.arrows==="to"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
<i class="nz-icon nz-icon-caret-left position-left" style="top: -15px;"></i>
</div>
<div v-if='form.arrows==="from;to"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
<i class="nz-icon nz-icon-caret-left position-left" style="top: -15px;"></i>
<i class="nz-icon nz-icon-caret-right position-right" style="top: -15px;"></i>
</div>
<div v-if='form.arrows==="0"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}"></div>
</div>
</div>
<el-option label="from" value="from">
<div class="width-option">
<div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
<i class="nz-icon nz-icon-caret-right position-right"></i>
</div>
</div>
</el-option>
<el-option label="to" value="to">
<div class="width-option">
<div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
<i class="nz-icon nz-icon-caret-left position-left"></i>
</div>
</div>
</el-option>
<el-option label="from;to" value="from;to">
<div class="width-option">
<div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
<i class="nz-icon nz-icon-caret-left position-left"></i>
<i class="nz-icon nz-icon-caret-right position-right"></i>
</div>
</div>
</el-option>
<el-option label="" value="0">
<div class="width-option">
<div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}"></div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('project.topology.color')" class="color">
<div class="color-show" @click="colorPickerClick" v-clickoutside="colorOut">
<div class="color-show-left" :style="{background:form.color}"></div>
<span> {{form.color}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-show="showPicker"></i>
</span>
</div>
<el-option label="from" value="from"><img src="./image/leftArrow.png" /></el-option>
<el-option label="to" value="to"><img src="./image/rightArrow.png" /></el-option>
<el-option label="from;to" value="from;to"><img src="./image/LRArrow.png" /></el-option>
<el-option label="" value="0"><img src="./image/noArrow.png" /></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('project.topology.color')" class="color">
<div class="color-show" @click="colorPickerClick">
<div class="color-show-left" :style="{background:form.color}"></div>
<span> {{form.color}}</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="form.color"
:predefine="predefineColors"
ref="colorPicker"
@active-change="colorChange"
>
</el-color-picker>
</div>
</el-form-item>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="form.color"
:predefine="predefineColors"
ref="colorPicker"
@active-change="colorChange"
>
</el-color-picker>
</div>
</el-form-item>
</div>
<div class="right-box-sub-title">
<span>{{$t('alert.config.expr')}}</span>
<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div>
<el-row class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<el-row class="element-item expr" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<el-form-item :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + (index-1)">
<el-row>
<template>
<el-col class="expr-title" style="">
{{$t('project.topology.chartName')}}
</el-col>
<el-col style="width: calc(100% - 140px);">
<el-input
v-model="form.name[index-1]"
type="text"
size="small"
></el-input>
</el-col>
<el-col style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
</template>
</el-row>
</el-form-item>
<el-row>
<template>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
{{$t('project.topology.chartName')}}
</el-col>
<el-col style="width: calc(100% - 140px);">
<el-input v-model="name[index-1]" type="text" size="small"></el-input>
</el-col>
<el-col style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
</template>
</el-row>
<el-row>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
<el-col class="expr-title">
{{$t('project.topology.unit')}}
</el-col>
<el-col style="width: calc(100% - 120px);">
@@ -110,10 +159,11 @@
@change="expressionChange"
@removeExpression="removeExpression"
:showRemove="false"
:projectRightBox="true"
></promql-input>
<el-row>
<template>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
<el-col class="expr-title">
{{$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="rz"></i>
@@ -172,11 +222,13 @@
lineId:n.id,
width:n.width,
lineName:n.label,
name:[],
dashes:!n.dashes?n.dashes:JSON.stringify(n.dashes),
};
if( n.expressions){
n.expressions.forEach((item,index)=>{
this.addExpression();
this.name[index]=item.name;
this.form.name[index]=item.name;
this.unit[index]=item.unit;
this.expressions[index]=item.metric;
this.legends[index]=item.legend;
@@ -191,7 +243,7 @@
data(){
return{
form:{
arrows:'',
arrows:'0',
label:'',
color:'#1e90ff',
lineName:'',
@@ -199,6 +251,8 @@
width:'',
type:'',
roundness:'',
name:[],
dashes:''
},
predefineColors: [
'#ff4500',
@@ -209,18 +263,20 @@
'#1e90ff',
'#c71585',
],
showPicker:false,
unitOptions: chartDataFormat.unitOptions(),
promqlKeys:[],
expressions: [],
promqlCount:0,
elementIds:[],
legends:[],
name:[],
widthOption:['1','2','3','4'],
dashesOption:[false,'[3,3]','[9,9]','[15,15]','[21,21]'],
unit:[],
rules:{
arrows: [
{ required: true, message: '', trigger: 'change' },
],
// arrows: [
// { required: true, message: '', trigger: 'change' },
// ],
lineName: [
{ required: true, message: '', trigger: 'change' },
],
@@ -246,10 +302,11 @@
roundness:(Math.random()*8 +1)/10 ,//获取0.1-0.9之间的随机数
type:'curvedCW',
};
model.dashes=!model.dashes?model.dashes:JSON.parse(model.dashes);
model.expressions=[];
this.promqlKeys.forEach((item,index)=>{
model.expressions.push({
"name": this.name[index],
"name": this.form.name[index],
"unit": this.unit[index],
"metric": this.expressions[index],
"legend": this.legends[index],
@@ -265,7 +322,7 @@
addExpression() {
this.expressions.push('');
this.legends.push('');
this.name.push('');
this.form.name.push('');
this.unit.push('');
this.promqlKeys.push(getUUID());
this.elementIds.push("");
@@ -275,7 +332,7 @@
if (this.promqlCount >= 1) {
this.expressions.splice(index, 1);
this.legends.splice(index, 1);
this.name.splice(index, 1);
this.form.name.splice(index, 1);
this.unit.splice(index, 1);
this.promqlKeys.splice(index, 1);
this.elementIds.splice(index, 1);
@@ -301,6 +358,7 @@
this.esc();
},
colorPickerClick(){
this.showPicker=true;
this.$refs['colorPicker'].showPicker=true;
},
colorChange(val){
@@ -313,6 +371,9 @@
let b = parseInt(rgb[2].split(')')[0]);
let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
return hex;
},
colorOut(){
this.showPicker=false;
}
},
@@ -345,7 +406,7 @@
border-radius: 5px;
display: flex;
align-items: center;
width: calc(100% - 30px);
width: calc(100% - 60px);
height: 30px;
}
.color-show-left{
@@ -367,23 +428,109 @@
/deep/ .el-form-item__label{
font-size: 14px;
color: #666666;
opacity: 0.6;
}
.arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
.arrows /deep/ .el-input.el-input--prefix.el-input--suffix,.line-width /deep/ .el-input.el-input--prefix.el-input--suffix{
border: 1px solid #DCDFE6;
height: 28px;
width: calc(100% - 30px);
width: calc(100% - 32px);
}
.arrows /deep/ .el-input__inner{
.arrows /deep/ .el-input__inner,.line-width /deep/ .el-input__inner{
display: none;
}
.arrows /deep/ .el-input__prefix{
.arrows /deep/ .el-input__prefix,.line-width /deep/ .el-input__prefix{
height: 28px;
line-height: 28px;
color: #899FB7;
}
.arrows /deep/ .el-input__prefix > div{
width: 100%;
height: 100%;
}
.line-width /deep/ .el-input__prefix{
width: 100%;
display: flex;
align-items: center;
}
.line-width /deep/ .el-input__prefix > div{
width: 100%;
}
/deep/ .el-select{
width: 262px;
}
.line-option{
display: flex;
flex-wrap: wrap;
}
.line-option > div{
width: 50%;
}
.line-option .line-width .el-input{
width: clac(100% - 60px);
}
/deep/ .el-input--small .el-input__icon{
line-height: 28px;
}
.width-option-line{
position: relative;
color: #899FB7;
}
.position-left{
position: absolute;
left:-4px ;
top: -18px;
}
.position-right{
position: absolute;
right: -4px;
top: -18px;
}
/deep/ .el-select-dropdown__item.selected .width-option-line {
border-color: #ee9d3f !important;
color: #ee9d3f !important;
}
/deep/ .el-dropdown-menu__item:focus .width-option-line, .el-dropdown-menu__item:not(.is-disabled):hover .width-option-line, .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover .width-option-line, .el-select-dropdown__item.hover .width-option-line, .el-select-dropdown__item:hover .width-option-line{
border-color: #ee9d3f !important;
color: #ee9d3f !important;
}
.color-arrows{
color: #C0C4CC;
position: absolute;
right: 70px;
}
.color-arrows .nz-icon{
font-size: 12px;
}
.element-item{
padding: 20px 0;
border-bottom: 1px dashed #dfe7f2;
width: 100%;
}
.element-item.expr /deep/ .el-form-item__content{
position: relative;
margin-left: 0 !important;
}
.element-item.expr /deep/ .el-form-item__content .el-row{
margin-bottom: 0;
}
.element-item.expr /deep/ .el-form-item__content .el-form-item__error{
left: 120px;
}
.expr-title{
width: 120px;
padding-right: 20px;
text-align: right;
color: #666;
font-size: 14px;
letter-spacing: 0;
line-height: 22px;
}
.width-option{
width: 195px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.el-row {
margin-bottom: 20px;
line-height: 32px;

78
nezha-fronted/src/components/common/project/addNode.vue
View File

@@ -63,29 +63,35 @@
<span>{{$t('alert.config.expr')}}</span>
<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div>
<el-row class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<el-row class="element-item expr" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<el-form-item :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + (index-1)">
<el-row>
<template>
<el-col class="expr-title" style="">
{{$t('project.topology.chartName')}}
</el-col>
<el-col style="width: calc(100% - 140px);">
<el-input
v-model="form.name[index-1]"
type="text"
size="small"
></el-input>
</el-col>
<el-col style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
</template>
</el-row>
</el-form-item>
<el-row>
<template>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
{{$t('project.topology.chartName')}}
</el-col>
<el-col style="width: calc(100% - 140px);">
<el-input v-model="name[index-1]" type="text" size="small"></el-input>
</el-col>
<el-col style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
</template>
</el-row>
<el-row>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
<el-col class="expr-title">
{{$t('project.topology.unit')}}
</el-col>
<el-col style="width: calc(100% - 120px);">
<el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%"
:options="unitOptions"
:props="{ expandTrigger: 'click',emitPath:false }"
:show-all-levels="false"
v-model="unit[index-1]"
></el-cascader>
:options="unitOptions"
:props="{ expandTrigger: 'click',emitPath:false }"
:show-all-levels="false"
v-model="unit[index-1]"
></el-cascader>
</el-col>
</el-row>
<promql-input
@@ -99,10 +105,11 @@
@change="expressionChange"
@removeExpression="removeExpression"
:showRemove="false"
:projectRightBox="true"
></promql-input>
<el-row>
<template>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
<el-col class="expr-title">
{{$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="rz"></i>
@@ -159,7 +166,7 @@
if( n.expressions){
n.expressions.forEach((item,index)=>{
this.addExpression();
this.name[index]=item.name;
this.form.name[index]=item.name;
this.unit[index]=item.unit;
this.expressions[index]=item.metric;
this.legends[index]=item.legend;
@@ -191,6 +198,7 @@
form:{
moduleId:'',
iconId:'',
name:[],
},
selImage:'',
file:'',
@@ -201,7 +209,6 @@
promqlCount:0,
elementIds:[],
legends:[],
name:[],
unit:[],
imgageLoading:false,
rules:{
@@ -276,12 +283,13 @@
model.expressions=[];
this.promqlKeys.forEach((item,index)=>{
model.expressions.push({
"name": this.name[index],
"name": this.form.name[index],
"unit": this.unit[index],
"metric": this.expressions[index],
"legend": this.legends[index],
})
});
console.log(this.form.name,this.unit,model);
this.$emit('addModel',model);
}
});
@@ -293,7 +301,7 @@
addExpression() {
this.expressions.push('');
this.legends.push('');
this.name.push('');
this.form.name.push('');
this.unit.push('');
this.promqlKeys.push(getUUID());
this.elementIds.push("");
@@ -303,7 +311,7 @@
if (this.promqlCount >= 1) {
this.expressions.splice(index, 1);
this.legends.splice(index, 1);
this.name.splice(index, 1);
this.form.name.splice(index, 1);
this.unit.splice(index, 1);
this.promqlKeys.splice(index, 1);
this.elementIds.splice(index, 1);
@@ -377,6 +385,7 @@
/deep/ .avatar-uploader{
display: inline-block;
color: #1989fa;
vertical-align: top;
}
/deep/.right-box-form .icon .el-select{
width: 60%;
@@ -411,7 +420,7 @@
.icon /deep/ .el-input.el-input--prefix.el-input--suffix{
border: 1px solid #DCDFE6;
height: 28px;
width: calc(100% - 30px);
width: calc(100% - 10px);
}
.icon /deep/ .el-input__inner{
display: none;
@@ -420,6 +429,25 @@
height: 28px;
line-height: 28px;
}
.element-item.expr /deep/ .el-form-item__content{
position: relative;
margin-left: 0 !important;
}
.element-item.expr /deep/ .el-form-item__content .el-row{
margin-bottom: 0;
}
.element-item.expr /deep/ .el-form-item__content .el-form-item__error{
left: 120px;
}
.expr-title{
width: 120px;
padding-right: 20px;
text-align: right;
color: #666;
font-size: 14px;
letter-spacing: 0;
line-height: 22px;
}
/* begin--搜索框*/
.endpoint-asset-search {
display: inline-block;

BIN
nezha-fronted/src/components/common/project/image/LRArrow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 308 B

BIN
nezha-fronted/src/components/common/project/image/a.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 618 B

BIN
nezha-fronted/src/components/common/project/image/b.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 825 B

BIN
nezha-fronted/src/components/common/project/image/c.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
nezha-fronted/src/components/common/project/image/d.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 551 B

BIN
nezha-fronted/src/components/common/project/image/dashed0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 540 B

BIN
nezha-fronted/src/components/common/project/image/dashed1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 576 B

BIN
nezha-fronted/src/components/common/project/image/dashed2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 475 B

BIN
nezha-fronted/src/components/common/project/image/dashed3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 501 B

BIN
nezha-fronted/src/components/common/project/image/dashed4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 512 B

BIN
nezha-fronted/src/components/common/project/image/e.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 817 B

BIN
nezha-fronted/src/components/common/project/image/f.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 858 B

BIN
nezha-fronted/src/components/common/project/image/leftArrow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 256 B

BIN
nezha-fronted/src/components/common/project/image/noArrow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 198 B

BIN
nezha-fronted/src/components/common/project/image/rightArrow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 270 B

4
nezha-fronted/src/components/common/project/popData/alertTable.vue
View File

@@ -358,6 +358,10 @@
<style scoped>
.right-box-project-alert{
width: 1220px;
padding-right: 30px;
}
.right-box-title{
font-weight: bold;
}
.mc{
position: fixed;

5
nezha-fronted/src/components/common/project/popData/assetTable.vue
View File

@@ -135,6 +135,7 @@
}
},
data(){
vm=this;
return{
pageObj: {
pageNo: 1,
@@ -271,6 +272,10 @@
<style scoped>
.right-box-project-alert{
width: 1220px;
padding-right: 30px;
}
.right-box-title{
font-weight: bold;
}
.mc{
position: fixed;

4
nezha-fronted/src/components/common/project/popData/endpointTable.vue
View File

@@ -283,6 +283,10 @@
<style scoped>
.right-box-project-alert{
width: 1220px;
padding-right: 30px;
}
.right-box-title{
font-weight: bold;
}
.mc{
position: fixed;

33
nezha-fronted/src/components/common/project/topology.vue
View File

@@ -165,10 +165,12 @@
NodeArr(n){
if(n.length===2){
this.lineData={
arrows:'',
arrows:'0',
label:'',
color:'#1e90ff',
lineId:'',
width:'1',
dashes:false,
id:'',
};
this.addLineShow=true;
@@ -227,7 +229,9 @@
color:'#1e90ff',
lineId:'',
id:'',
dashes:[],
},
hoverEdge:false,
isLineAdd:true,
isNodeAdd:true,
nodeData:{
@@ -318,6 +322,7 @@
"target": item.to,
"smooth": item.smooth,
"expressions": item.expressions,
"dashes":item.dashes,
};
arr1.push(obj)
});
@@ -367,10 +372,11 @@
arrowStrikethrough:false,
chosen:{
edge:(values, id, selected, hovering)=>{
values.middleArrow=true;
values.middleArrowScale=1;
values.middleArrowType='circle';
console.log(id, selected, hovering);
if(this_.hoverEdge){
values.middleArrow=true;
values.middleArrowScale=1;
values.middleArrowType='circle';
}
},
},
},
@@ -484,7 +490,6 @@
}else{
edges.from=this.NodeArr[0];
edges.to=this.NodeArr[1];
edges.dashes=[15,15];
}
edgesArray.push(edges);
this.$emit("setTopologyData",this.nodesArray,edgesArray);
@@ -632,7 +637,6 @@
},
//工具栏点击后显示对应内容
popDataShowUpdate(key,flag){//key 显示对应的弹窗 flag是否不显示工具栏
// console.log(key);
this.popDataShow={
endpoint:false,
asset:false,
@@ -643,7 +647,6 @@
main:false,
};
if(key&&!this.editVisNetwork){
// console.log(this.lineData);
if(key==='total'&&this.selNodeId){
this.totalId=this.selNodeId;
this.totalArray=this.nodesArray;
@@ -683,7 +686,6 @@
let this_=this;
this.init('modal');
this.network.on("click", function (params) {
console.log(params);
this_.networkPopClose();
if(!params.edges.length&&!params.nodes.length){
this_.popDataShowUpdate('',true);
@@ -723,7 +725,6 @@
this_.isLineAdd=false;
}
if(!this_.editVisNetwork){
console.log(this_.lineData);
if(this_.lineData.expressions&&this_.lineData.expressions.length){
this_.popDataShowUpdate('total')
}else{
@@ -734,6 +735,14 @@
// this_.addLineShow=true;
});
this.network.on("hoverEdge", function () { // 悬停边
this_.hoverEdge=true;
});
this.network.on("blurEdge", function () { // 边失去焦点
this_.hoverEdge=false;
});
this.network.on("dragStart", function (params) {//节点移动开始
this_.NodeArrShow=false;
let selId=params.nodes[0];
@@ -802,8 +811,10 @@
}
return false
});
this.network.on("resize", function () {//检测resize
this.network.on("resize", function (params,a) {//检测resize
setTimeout(()=>{
this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y;
this_.modelTopUpdate();
this_.selNodeArrUpdate();
if(this_.networkPopShow){

3
nezha-fronted/src/components/common/project/visNetwork.vue
View File

@@ -208,6 +208,7 @@
}
this.$refs['topology'].viewsCenter=res.data.topo.viewsCenter?res.data.topo.viewsCenter:{x:0,y:0};
this.$refs['topology'].zoom=res.data.topo.zoom?res.data.topo.zoom:1;
this.$refs['topology'].selNodeId='';
})
},
reload(){
@@ -229,6 +230,7 @@
}
this.$refs['topology'].viewsCenter=res.data.topo.viewsCenter?res.data.topo.viewsCenter:{x:0,y:0};
this.$refs['topology'].zoom=res.data.topo.zoom?res.data.topo.zoom:1;
this.$refs['topology'].selNodeId='';
})
},
formatNodesArr(arr){
@@ -263,7 +265,6 @@
let arr1=[];
if(!arr){return arr1}
arr.forEach((item)=>{
item.dashes=[5,5];
item.from=item.source;
item.to=item.target;
item.label=item.name;

4
nezha-fronted/src/components/common/timePicker.vue
View File

@@ -130,8 +130,8 @@ export default {
isPopoverDisabled:false,
isCustom:false,
searchTime:[
bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),'yyyy-MM-dd hh:mm:ss'),
bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
],
showTime: {
id: 4,

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

@@ -227,8 +227,8 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
promqlKeys: [],
expressions: [''],
filterTime: [
bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),'yyyy-MM-dd hh:mm:ss'),
bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
],
/*工具参数*/

14
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -24,7 +24,7 @@
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
<el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i class="el-icon-arrow-down" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
<span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i class="el-icon-arrow-down" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
<el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue" style="text-align: left;" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange"></el-cascader-panel>
</el-dropdown>
<label style="line-height: 30px;" v-else>{{$t("alert.config.expr")}}</label>
@@ -66,7 +66,8 @@
plugins: {type: Array},
styleType: Number,
historyParam:{type:Object},
showRemove:{type:Boolean,default:true}
showRemove:{type:Boolean,default:true},
projectRightBox:{type:Boolean,default:false}
},
data(){
return {
@@ -245,6 +246,15 @@
z-index: 2100;
background-color: #FFF;
}
.expr-title{
width: 120px;
padding-right: 20px;
text-align: right;
color: #666;
font-size: 14px;
letter-spacing: 0;
line-height: 22px;
}
</style>
<style>
.metric-selector-pop{

2
nezha-fronted/src/components/page/dashboard/overview/chart.vue
View File

@@ -347,7 +347,7 @@
let str = `<div>`;
params.forEach((item, i) => {
if(i===0){
let value=bus.computeTimezone(item.data[0])
let value=item.data[0]
let t_date = new Date(value);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');

2
nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
View File

@@ -90,7 +90,7 @@
intervale: 0,
rotate: 0,
formatter: function (value) {
value=bus.computeTimezone(value)
value=value
var t_date = new Date(value);
return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
+ [t_date.getHours(), t_date.getMinutes()].join(':');

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

@@ -94,10 +94,7 @@
panel: {show: false},
},
tableHover: false,
searchTime: [
new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
new Date(bus.computeTimezone(new Date().getTime()))
],
searchTime: bus.getTimezontDateRange(),
intervalTimer: null,
interval: 0,
showPanel: { //panel下拉列表
@@ -331,9 +328,9 @@
// 获取数据,用在子页面
getData(params) {
if (params.start_time === '' || params.end_time === '') {
let now = new Date();
let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
let startTimeTmp = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss');
let now = bus.getTimezontDateRange();
let endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss');
let startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss');
params.start_time = startTimeTmp;
params.end_time = endTimeTmp;
}

9
nezha-fronted/src/libs/bus.js
View File

@@ -267,6 +267,15 @@ export default new Vue({
return sourceTime;
}
},
getTimezontDateRange:function(offset=-1){
return [
new Date(new Date(this.computeTimezone(new Date().getTime())).setHours(new Date(this.computeTimezone(new Date().getTime())).getHours() + offset)),
new Date(this.computeTimezone(new Date().getTime()))
]
},
getOffsetTimezoneData(offset=0){
return new Date(this.computeTimezone(new Date().getTime())).setHours(new Date(this.computeTimezone(new Date().getTime())).getHours() + offset)
},
debounce(fn, delay) {
// 记录上一次的延时器
var timer = null;