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

NEZ-351 perf: dashboard相关滑框bug修复、优化

Browse Source
This commit is contained in:
chenjinsong
2020-07-31 20:57:04 +08:00
parent 4e8af2df33
commit 68399d2750
23 changed files with 180 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -1024,8 +1024,7 @@ li{
border-radius: 5px;
}
.small-pop{
width: 25px !important;
min-width: unset !important;
min-width: 40px !important;
}
.nz-pop2 {
padding: 0 20px 20px 20px;

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

@@ -269,20 +269,6 @@ export default {
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false,
severityData: [
{
key: 'medium',
value: this.$t("alert.config.medium")
},
{
key: 'high',
value: this.$t("alert.config.high")
},
{
key: 'low',
value: this.$t("alert.config.low")
}
],
graphShow: false,
chartDatas: [],
chartUnit:5,

3
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -101,9 +101,6 @@
name:"alertLabel",
props:{
id:{},
severityData:{
type:Array
},
type:{},
labelLoading:{},
that:{}

22
nezha-fronted/src/components/common/alert/alertMessageTable.vue
View File

@@ -53,7 +53,7 @@
v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>-->
<span class="too-long-split" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)">
<el-tooltip placement="right" effect="light">
<alertRuleInfo slot="content" :id="scope.row.alertRule.id" :severityData="severityData" :messageLoad="scope.row.loading"></alertRuleInfo>
<alertRuleInfo slot="content" :id="scope.row.alertRule.id" :messageLoad="scope.row.loading"></alertRuleInfo>
<span>{{scope.row[item.prop].alertName}}</span>
</el-tooltip>
</span>
@@ -73,9 +73,9 @@
<span v-else>-</span>
</template>
<span v-else-if="item.prop == 'severity'">
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'high'})}}</span>
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'medium'})}}</span>
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'low'})}}</span>
</span>
<!--<div v-else-if="item.prop == 'linkObject'">
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
@@ -326,20 +326,6 @@
],
tablelable: [],
dropCol: [],
severityData: [
{
key: 'medium',
value: this.$t("alert.config.medium")
},
{
key: 'high',
value: this.$t("alert.config.high")
},
{
key: 'low',
value: this.$t("alert.config.low")
}
],
viewRuleData: {
id: '',
alertName: '',

9
nezha-fronted/src/components/common/alert/alertRuleInfo.vue
View File

@@ -15,9 +15,9 @@
<div class="alert-rule-box">
<div class="alert-rule-title">Level</div>
<div class="alert-rule-value">
<span v-if="alertRuleData && alertRuleData.severity === 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
<span style="padding-left: 18px;" v-if="alertRuleData && alertRuleData.severity === 'medium'">{{severityData[0].value}}</span>
<span v-if="alertRuleData && alertRuleData.severity === 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
<span v-if="alertRuleData && alertRuleData.severity === 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'high'})}}</span>
<span style="padding-left: 18px;" v-if="alertRuleData && alertRuleData.severity === 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'medium'})}}</span>
<span v-if="alertRuleData && alertRuleData.severity === 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'low'})}}</span>
</div>
</div>
</div>
@@ -29,9 +29,6 @@
name:"alert-rule-info",
props:{
id:{},
severityData:{
type:Array
},
messageLoad:{},
},
watch:{

14
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
View File

@@ -234,20 +234,6 @@
},
tablelable: [],
dropCol: [],
severityData: [
{
key: 'medium',
value: this.$t("alert.config.medium")
},
{
key: 'high',
value: this.$t("alert.config.high")
},
{
key: 'low',
value: this.$t("alert.config.low")
}
],
tableData: [],
}
},

4
nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
View File

@@ -168,8 +168,6 @@
this.$emit('changeTab', tab);
},
saveChart() { //新增chart
this.rightBox.show = true;
this.$nextTick(() => {
let chart = {
id:'',
title: '',
@@ -191,7 +189,7 @@
}
}
this.chart = chart;
});
this.rightBox.show = true;
},
dropdownHandler(show) {
if (show) {

39
nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
View File

@@ -14,12 +14,13 @@
<export-excel
export-file-name="endpoint"
export-url="/endpoint/export"
import-url="/endpoint/import"
:params="searchLabel"
@afterImport="getTableData"
class="margin-l-20"
>
<template slot="optionZone">
<button @click.stop="toAdd" :title="$t('overall.createEndpoint')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
<button @click.stop="add" :title="$t('overall.createEndpoint')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
<i class="nz-icon nz-icon-create-square"></i>
</button>
</template>
@@ -93,8 +94,12 @@
:path="'/assetEndpoint'"
ref="elementset"
></element-set>
<add-endpoint-box :currentProject="currentProject" :module="currentModule" @reload="getTableData" ref="addEndpointBox"></add-endpoint-box>
<edit-endpoint-box @close="closeEditEndpoint" v-if="editBoxShow" :currentProject="endpoint.project" :currentModule="endpoint.module" :endpoint="endpoint" @reload="getTableData" ref="editEndpointBox"></edit-endpoint-box>
<transition name="right-box">
<add-endpoint-box v-if="rightBox.add.show" :current-project="currentProject" :current-module="currentModule" @close="closeRightBox" ref="addEndpointBox"></add-endpoint-box>
</transition>
<transition name="right-box">
<edit-endpoint-box v-if="rightBox.edit.show" :current-project="currentProject" :current-module="currentModule" :endpoint="endpoint" @close="closeRightBox" ref="editEndpointBox"></edit-endpoint-box>
</transition>
</span>
</template>
@@ -110,11 +115,12 @@
},
data() {
return {
showAddBox: false,
editBoxShow: false,
rightBox: {
add: {show: false},
edit: {show: false},
},
endpoint: {}, //用来查看详情和编辑的对象
endpointDetail: {}, //用来查看详情的对象
asset: {}, //对应props的obj
//asset: {}, //对应props的obj
showTopBtn: false, //top按钮是否显示
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
@@ -218,14 +224,12 @@
}
});
},
query(endpoint) {
},
detail(endpoint) {
},
closeEditEndpoint() {
this.editBoxShow = false;
closeRightBox(refresh) {
this.rightBox.add.show = false;
this.rightBox.edit.show = false;
if (refresh) {
this.getTableData();
}
},
toEdit(endpoint) {
this.endpoint = JSON.parse(JSON.stringify(endpoint));
@@ -238,9 +242,8 @@
this.$refs.editEndpointBox.toEdit(true, this.endpoint.id);
});
},
toAdd() {
this.$refs.addEndpointBox.show(true);
this.$refs.addEndpointBox.clearEndpoints();
add() {
this.rightBox.add.show = true;
},
search(searchObj) {
let orderBy = '';

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

@@ -99,22 +99,6 @@
new Date(bus.computeTimezone(new Date().getTime()))
],
intervalTimer: null,
intervalList: [{
value: 0,
name: this.$t("dashboard.panel.refreshInterval.never"),
}, {
value: 60,
name: this.$t("dashboard.panel.refreshInterval.oneMinute"),
}, {
value: 180,
name: this.$t("dashboard.panel.refreshInterval.threeMinutes"),
}, {
value: 300,
name: this.$t("dashboard.panel.refreshInterval.fiveMinutes"),
}, {
value: 600,
name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
}],
interval: 0,
panel: { //新增panel
id: '',

44
nezha-fronted/src/components/common/js/constants.js
View File

@@ -16,4 +16,46 @@ export const asset = {
{value: 1, label: i18n.t('asset.inStock')},
{value: 2, label: i18n.t('asset.notInStock')}
],
}
};
export const alertMessage = {
severityData: [
{value: 'medium', label: i18n.t("alert.config.medium")},
{value: 'high', label: i18n.t("alert.config.high")},
{value: 'low', label: i18n.t("alert.config.low")}
],
typeData: [
{value: 1, label: i18n.t('alert.config.typeOption.project')},
{value: 2, label: i18n.t('alert.config.typeOption.module')},
{value: 3, label: i18n.t('alert.config.typeOption.asset')}
],
levels:[
{value: 'medium', label: i18n.t("alert.config.medium")},
{value: 'high', label: i18n.t("alert.config.high")},
{value: 'low', label: i18n.t("alert.config.low")}
],
states:[
{value: '1', label: i18n.t('alert.list.pending')},
{value: '2', label: i18n.t('alert.list.expired')}
],
};
export const statisticsList = [
{value: "min", label: i18n.t("dashboard.panel.chartForm.statisticsVal.min")},
{value: "max", label: i18n.t("dashboard.panel.chartForm.statisticsVal.max")},
{value: "average", label: i18n.t("dashboard.panel.chartForm.statisticsVal.average")},
{value: "total", label: i18n.t("dashboard.panel.chartForm.statisticsVal.total")},
{value: "first", label: i18n.t("dashboard.panel.chartForm.statisticsVal.first")},
{value: "last", label: i18n.t("dashboard.panel.chartForm.statisticsVal.last")},
{value: "range", label: i18n.t("dashboard.panel.chartForm.statisticsVal.range")},
{value: "different", label: i18n.t("dashboard.panel.chartForm.statisticsVal.different")},
];
export const intervalList = [
{value: -1, label: i18n.t("dashboard.panel.refreshInterval.never")},
{value: 30, label: '30s'},
{value: 60, label: '1m'},
{value: 300, label: '5m'},
{value: 900, label: '15m'},
{value: 1800, label: '30m'}
];

25
nezha-fronted/src/components/common/pickTime.vue
View File

@@ -9,12 +9,12 @@
</button>
<el-popover v-model="visible" placement="bottom-start" :width="50" trigger="click" popper-class="interval-refresh-popover" >
<ul class="popover_ul">
<li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i)">
{{i.name}}
<li v-for="i in $CONSTANTS.intervalList" :style="{color:interval == i.value ? '#31749C' : ''}" :key="i.value + i.label" @click="selectInterval(i)">
{{i.label}}
</li>
</ul>
<button type="button" style="border-radius: 0 4px 4px 0;" class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
<span class="nz-btn nz-btn-text">{{interval.value != -1?interval.name:''}}&nbsp</span><i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
<span class="nz-btn nz-btn-text">{{interval.value != -1 ? interval.label : ''}}&nbsp</span><i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
</button>
</el-popover>
</div>
@@ -58,25 +58,6 @@
searchTime:[],
visible: false,
intervalTimer: null,
intervalList: [{
value: -1,
name: this.$t("dashboard.panel.refreshInterval.never"),
}, {
value: 30,
name: '30s',
}, {
value: 60,
name: '1m',
}, {
value: 300,
name: '5m',
}, {
value: 900,
name: '15m',
}, {
value: 1800,
name: '30m',
}],
interval: -1,
unit:2,
}

2
nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
View File

@@ -228,7 +228,7 @@
name: "endpointBox",
props: {
currentProject: Object,
currentModule: Object
currentModule: Object,
},
data() {
return {

35
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
View File

@@ -57,10 +57,10 @@
<!--severity-->
<el-form-item :label="$t('alert.severity')" prop="severity">
<el-select popper-class="config-dropdown" v-model="editAlertRule.severity" placeholder="" size="small">
<el-option :id="'alert-severity-'+item.key" v-for="item in severityData" :key="item.key" :label="item.value" :value="item.key">
<template v-if="!item.isEdit">{{item.value}}</template>
<el-option :id="'alert-severity-'+item.value" v-for="item in $CONSTANTS.alertMessage.severityData" :key="item.value" :label="item.label" :value="item.value">
<template v-if="!item.isEdit">{{item.label}}</template>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
<el-input type="text" v-model="item.name" size="mini"></el-input>
<el-input type="text" v-model="item.value" size="mini"></el-input>
</span>
</el-option>
</el-select>
@@ -155,20 +155,6 @@
{type:'number',message:this.$t('validate.number')}
],
},
severityData: [
{
key: 'medium',
value: this.$t("alert.config.medium")
},
{
key: 'high',
value: this.$t("alert.config.high")
},
{
key: 'low',
value: this.$t("alert.config.low")
}
],
operators:[
{
label:'==',
@@ -196,20 +182,7 @@
},
],
unitOptions: chartDataFormat.unitOptions(),
typeData: [
{
key: 1, //project
value: this.$t('alert.config.typeOption.project')
},
{
key: 2, //module
value: this.$t('alert.config.typeOption.module')
},
{
key: 3, //asset
value: this.$t('alert.config.typeOption.asset')
}
],
userData: [],
}
},

6
nezha-fronted/src/components/common/rightBox/projectBox.vue
View File

@@ -43,12 +43,6 @@
},
data() {
return {
rightBox: {
show: false,
title: '',
isCreate: false,
isEdit:false
},
editProject: {},
rules: {
name: [

22
nezha-fronted/src/components/page/alert/alertMessage.vue
View File

@@ -79,7 +79,7 @@
v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>-->
<span class="too-long-split" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)">
<el-tooltip placement="right" effect="light">
<alertRuleInfo slot="content" :id="scope.row.alertRule.id" :severityData="severityData" :messageLoad="scope.row.loading"></alertRuleInfo>
<alertRuleInfo slot="content" :id="scope.row.alertRule.id" :messageLoad="scope.row.loading"></alertRuleInfo>
<span>{{scope.row[item.prop].alertName}}</span>
</el-tooltip>
</span>
@@ -99,9 +99,9 @@
<span v-else>-</span>
</template>
<span v-else-if="item.prop == 'severity'">
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'high'})}}</span>
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'medium'})}}</span>
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'low'})}}</span>
</span>
<!--<div v-else-if="item.prop == 'linkObject'">
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
@@ -409,20 +409,6 @@
},
tablelable: [],
dropCol: [],
severityData: [
{
key: 'medium',
value: this.$t("alert.config.medium")
},
{
key: 'high',
value: this.$t("alert.config.high")
},
{
key: 'low',
value: this.$t("alert.config.low")
}
],
tableData: [],
viewRuleData: {
id: '',

44
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -64,9 +64,9 @@
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
</div>
<span v-else-if="item.prop == 'severity'">
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'high'})}}</span>
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'medium'})}}</span>
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'low'})}}</span>
</span>
<template v-else-if="item.prop == 'alertNum'">
<span class="link" @click="queryMessage(scope.row)">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
@@ -202,34 +202,6 @@
pageSize: 50,
total: 0
},
severityData: [
{
key: 'medium',
value: this.$t("alert.config.medium")
},
{
key: 'high',
value: this.$t("alert.config.high")
},
{
key: 'low',
value: this.$t("alert.config.low")
}
],
typeData: [
{
key: 1,
value: this.$t('alert.config.typeOption.project')
},
{
key: 2,
value: this.$t('alert.config.typeOption.module')
},
{
key: 3,
value: this.$t('alert.config.typeOption.asset')
}
],
tableTitle: [
{
label: 'ID',
@@ -504,9 +476,9 @@
expr: obj.expr
};
let type = "";
for (let i = 0; i < this.typeData.length; i++) {
if (obj.type == this.typeData[i].key) {
type = this.typeData[i].value;
for (let i = 0; i < this.$CONSTANTS.alertMessage.typeData.length; i++) {
if (obj.type == this.$CONSTANTS.alertMessage.typeData[i].value) {
type = this.$CONSTANTS.alertMessage.typeData[i].label;
break;
}
}
@@ -519,9 +491,7 @@
}
detail.link = link;
detail.last = obj.last;
let severity = this.severityData.filter((item, index) => {
return obj.severity == item.key;
})[0].value;
let severity = this.$CONSTANTS.alertMessage.severityData.find(s => {return s.key == obj.severity});
detail.severity = severity;
detail.alertNum = obj.alertNum;
detail.description = obj.description;

14
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -288,20 +288,6 @@
},
tablelable: [],
dropCol: [],
severityData: [
{
key: 'medium',
value: this.$t("alert.config.medium")
},
{
key: 'high',
value: this.$t("alert.config.high")
},
{
key: 'low',
value: this.$t("alert.config.low")
}
],
tableData: [],
viewRuleData: {
id: '',

7
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -158,9 +158,6 @@
},
tableId: 'promTable', //需要分页的table的id，用于记录每页数量
rightBox: { //弹出框相关
show: false,
},
promServer: {},
blankPromServer: {
id: '',
@@ -272,8 +269,8 @@
detail.push({label: "Port", value: obj.port});
let type = "";
for (let i = 0; i < this.$CONSTANTS.promServer.typeData.length; i++) {
if (obj.value == this.typeData[i].type) {
type = this.typeData[i].label;
if (obj.value == this.$CONSTANTS.promServer.typeData[i].type) {
type = this.$CONSTANTS.promServer.typeData[i].label;
break;
}
}

27
nezha-fronted/src/components/page/dashboard/alertChartParam.vue
View File

@@ -36,7 +36,6 @@
},
data(){
let $temp=this;
return{
parameters:{
select:[],
@@ -51,30 +50,8 @@
// lazyLoad:$temp.lazyLoadFunc,
},
alertRules:[],
levels:[
{
value: 'medium',
label: $temp.$t("alert.config.medium")
},
{
value: 'high',
label: $temp.$t("alert.config.high")
},
{
value: 'low',
label: $temp.$t("alert.config.low")
}
],
states:[
{
value: '1',
label:$temp.$t('alert.list.pending')
},
{
value: '2',
label:$temp.$t('alert.list.expired')
}
],
levels: this.$CONSTANTS.alertMessage.levels,
states: this.$CONSTANTS.alertMessage.states,
}
},
created() {

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

@@ -74,10 +74,10 @@
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<el-form class="right-box-form right-box-form-left" :model="editChart" label-width="120px" label-position="right" :rules="rules" ref="chartForm">
<!--<el-form-item :label="$t('dashboard.panel.title')" prop="panel" v-if="!showPanel.type">
<el-form-item :label="$t('dashboard.panel.title')" prop="panelName" v-if="showPanel.type == 'dashboard'">
<el-autocomplete
:fetch-suggestions="panelSuggestion"
v-model.trim="panelName2"
v-model.trim="editChart.panelName"
placeholder=""
size="small"
value-key="name"
@@ -85,9 +85,9 @@
popper-class="chart-box-autocomplete no-style-class"
>
</el-autocomplete>
<el-input size="small" v-if="editChart.id" readonly="readonly" :value="panelName2"></el-input>
<el-input size="small" v-if="editChart.id" readonly="readonly" :value="editChart.panelName"></el-input>
</el-form-item>-->
</el-form-item>
<el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
<el-input size="small" maxlength="64" show-word-limit v-model="editChart.title"></el-input>
</el-form-item>
@@ -248,40 +248,7 @@
return {
editChart: {},
statisticsList:[
{
id:"min",
name:this.$t("dashboard.panel.chartForm.statisticsVal.min")
},
{
id:"max",
name:this.$t("dashboard.panel.chartForm.statisticsVal.max")
},
{
id:"average",
name:this.$t("dashboard.panel.chartForm.statisticsVal.average")
},
{
id:"total",
name:this.$t("dashboard.panel.chartForm.statisticsVal.total")
},
{
id:"first",
name:this.$t("dashboard.panel.chartForm.statisticsVal.first")
},
{
id:"last",
name:this.$t("dashboard.panel.chartForm.statisticsVal.last")
},
{
id:"range",
name:this.$t("dashboard.panel.chartForm.statisticsVal.range")
},
{
id:"different",
name:this.$t("dashboard.panel.chartForm.statisticsVal.different")
},
],
statisticsList: this.$CONSTANTS.statisticsList,
promqlCount: 1,
promqlKeys: [],
@@ -295,6 +262,9 @@
isSingleStat:false,
isAlert:false,
rules: {
panelName: [
{required: true, message: this.$t('validate.required'), trigger: 'change'}
],
title: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
@@ -366,9 +336,6 @@
this.isUrl = false;
this.isSingleStat = false;
this.$nextTick(() => {
if(this.showPanel){
this.panelName2 = this.showPanel.name;
}
this.initElements();
});
},
@@ -592,16 +559,18 @@
addCharts(params) {
let panelId;
//先处理panel
if (this.showPanel&&this.showPanel.type!="dashboard") {
if (this.panelId) {
panelId = this.panelId;
} else if (this.showPanel && this.showPanel.type != "dashboard") {
panelId = this.panelData[0].id;
} else {
panelId = this.autocompleteExist(this.panelName2);
panelId = this.autocompleteExist(this.editChart.panelName);
if (!panelId) {
this.$post('panel', {name: this.panelName2}).then(response => {
this.$post('panel', {name: this.editChart.panelName}).then(response => {
if (response.code === 200) {
this.$emit("reloadOnlyPanel");
this.$store.commit('panelListChange', true);
panelId = this.autocompleteExist(this.panelName2);
panelId = this.autocompleteExist(this.editChart.panelName);
} else {
if(response.msg){
this.$message.error(response.msg);
@@ -623,9 +592,8 @@
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$refs.chartForm.resetFields();//清空表单
this.panelName2 = '';
let panel = this.panelData.find(p => p.id === this.panelId);
this.$emit('on-create-success', 'create', response.data,params, panel);
this.$emit('on-create-success', 'create', response.data, params, panel);
} else {
if(response.msg){
this.$message.error(response.msg);
@@ -868,7 +836,8 @@
// 创建打开
createData(panelId, elementInfo) {
if (panelId == -1) {
this.panelId = this.panelData[0].id;
let p = this.panelData[0];
this.editChart.panelName = p.name;
} else {
this.panelId = panelId;
}
@@ -1206,6 +1175,7 @@
immediate: true,
handler(n) {
this.editChart = JSON.parse(JSON.stringify(n));
this.$set(this.editChart, "panelName", this.showPanel.name);
if (n.id) {
this.editData(this.editChart, this.showPanel.id);
} else {
@@ -1213,6 +1183,15 @@
}
}
},
editChart: {
deep: true,
handler(n) {
let panel = this.panelData.find(p => {
return p.name == n.panelName;
});
this.panelId = panel.id;
}
}
/*panelData: {
deep: true,
immediate: true,

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

@@ -195,7 +195,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
</div>
<transition name="right-box">
<chart-box v-if="rightBox.show" ref="addChartModal" @close="handleBox(false)" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{}"></chart-box>
<chart-box v-if="rightBox.show" :chart="chart" ref="addChartModal" @close="handleBox(false)" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{id: -1, name: ''}"></chart-box>
</transition>
<element-set
:allowed-all="true"
@@ -258,7 +258,8 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
saveDisabled: true,
panelData: [],
chartUnit:0,
historyParam:{useHistory:true,key:'expore-history'}
historyParam:{useHistory:true,key:'expore-history'},
chart: {},
}
},
created() {
@@ -534,10 +535,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
handleBox(show) {
this.rightBox.show = show;
},
saveChart: function () {
this.rightBox.show = true;
this.$nextTick(() => {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
saveChart() {
let chart = {
id:'',
title: '',
@@ -553,23 +551,21 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
panel: '',
sync: 0
};
for (let i = 0; i < this.expressions.length; i++) {
if (this.expressions[i] != '') {
chart.elements.push({chartId: "", expression: this.expressions[i], type: 'expert'});
}
}
this.$refs.addChartModal.editData(chart);
this.expressions.forEach((exp) => {
chart.elements.push({expression: exp, legend: "", type: "expert", id: ""});
});
this.chart = chart;
this.rightBox.show = true;
},
createSuccess(type, response, param, panel) { //添加chart成功
console.info(response, param, panel);
this.$confirm(this.$t("dashboard.metric.goPanelTip"), this.$t("tip.saveSuccess"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'success'
}).then(() => {
bus.$emit("menu-change", 'panel');
this.$store.state.showPanel.id = panel.id;
this.$store.state.showPanel.name = panel.name;
this.$store.commit("panelShowPanelChange", panel);
this.$router.push({
path: "/panel",
query: {

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

@@ -111,22 +111,6 @@
new Date(bus.computeTimezone(new Date().getTime()))
],
intervalTimer: null,
intervalList: [{
value: 0,
name: this.$t("dashboard.panel.refreshInterval.never"),
}, {
value: 60,
name: this.$t("dashboard.panel.refreshInterval.oneMinute"),
}, {
value: 180,
name: this.$t("dashboard.panel.refreshInterval.threeMinutes"),
}, {
value: 300,
name: this.$t("dashboard.panel.refreshInterval.fiveMinutes"),
}, {
value: 600,
name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
}],
interval: 0,
showPanel: { //panel下拉列表
id: '',
@@ -352,8 +336,8 @@
this.getData(this.filter);
},
// 图表创建成功，回调panel页面，进行图表的刷新
createSuccess(msg, data, params) {
this.filter.panelId = this.showPanel.id;
createSuccess(msg, data, params, panel) {
this.filter.panelId = this.panel.id;
this.getData(this.filter);
},
// 获取数据,用在子页面
@@ -411,8 +395,8 @@
this.dataTotalListBak=[...response.data.list]
let isInitData = false;
if (response.data.list.length > 0) {
if (this.$store.state.showPanel.id !== 0 && this.$store.state.showPanel.name !== '') {
this.showPanel = this.$store.state.showPanel;
if (this.$store.state.showPanel.id > 0 && this.$store.state.showPanel.name) {
this.showPanel = JSON.parse(JSON.stringify(this.$store.state.showPanel));
}
if (clearShowPanel) {
this.showPanel.id = '';
@@ -688,7 +672,7 @@
computed: {
refreshPanel() {
return this.$store.state.panelListReload;
}
},
},
watch: {
refreshPanel(n, o) {
@@ -702,7 +686,7 @@
setTimeout(function(){
temp.search();
},1000)
}
},
}
}
</script>

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

@@ -36,8 +36,8 @@ const store = new Vuex.Store({
event_positionx: -200
},
showPanel:{
id:0,
name:'',
id: 0,
name: '',
type: "dashboard"
},
consoleShow:false,//是否显示console窗口
@@ -79,6 +79,10 @@ const store = new Vuex.Store({
state.currentAsset = asset;
},
panelShowPanelChange(state, panel) { //用来panel页控制初始panel的
state.showPanel.id = panel.id;
state.showPanel.name = panel.name;
},
setHeaderTable(state, data) { //设置table头部
state.tablelable = data;