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

NEZ-2015 fix： asset / entpoint detail 页面操作 增加 Edit dashboard 按钮

Browse Source
This commit is contained in:
zhangyu
2022-07-08 18:06:31 +08:00
parent 3a012319bd
commit a0a1d4b498
6 changed files with 227 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
View File

@@ -46,7 +46,7 @@
}
}
&>.bottom-panel{
padding: 15px 10px 10px 10px !important;
padding: 15px 10px 0px 10px !important;
}
}
.sub-top-tools .top-tool-btn-txt .nz-icon{

9
nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss
View File

@@ -150,6 +150,15 @@
button:hover {
background: $--background-color-empty;
}
.footer__btn {
background-color: $--color-primary;
border: none;
}
.footer__btn.footer__btn--light {
background-color: $--button-light-hover-background-color;
border: 1px solid $--button-light-border-color;
color: $--button-light-color;
}
}
.date-range-panel{
.el-button--primary{

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

@@ -174,31 +174,31 @@ export default {
},
asset: {
panel: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: true },
{ prop: 'panelTab', name: this.$t('overall.dashboard'), active: true },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
{ prop: 'log', name: this.$t('overall.logs'), active: false }
],
alertMessage: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false },
{ prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true },
{ prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
{ prop: 'log', name: this.$t('overall.logs'), active: false }
],
endpoint: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false },
{ prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: this.$t('asset.endpoint'), active: true },
{ prop: 'log', name: this.$t('overall.logs'), active: false }
],
log: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false },
{ prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
{ prop: 'log', name: this.$t('overall.logs'), active: true }
],
alertMessageSub: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false },
{ prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
{ prop: 'log', name: this.$t('overall.logs'), active: false },
@@ -214,7 +214,7 @@ export default {
},
endpoint: {
endpointTabTitle: [
{ prop: 'panelTab', name: this.$t('overall.detail') },
{ prop: 'panelTab', name: this.$t('overall.dashboard') },
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
{ prop: 'Metrics', name: this.$t('overall.metric') },
{ prop: 'log', name: this.$t('overall.logs') }
@@ -272,7 +272,7 @@ export default {
const config = this.obj.configs.find(c => c.type === 'logs')
const hasLog = config && config.enable === 1
const tabs = [
{ prop: 'panelTab', name: this.$t('overall.detail') },
{ prop: 'panelTab', name: this.$t('overall.dashboard') },
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
{ prop: 'Metrics', name: this.$t('overall.metric') }
]

21
nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
View File

@@ -99,6 +99,7 @@
<div id="tableList" class="table-list" style="padding-top: 0;overflow: hidden">
<div id="dashboardScrollbar" class="table-list-box">
<div class="box-content" ref="dashboardScrollbar" v-my-loading="chartListLoading" style="overflow-y: auto;display: flex;flex-direction: column">
<panel-variables :labelArrs="variables" :time-range="searchTime" @getPanelData="getPanelData"></panel-variables>
<chart-list
ref="chartList"
name="panel"
@@ -113,6 +114,7 @@
@on-remove-chart="delChart"
@on-add-group-item-chart="addGroupItem"
@refreshPanel="refreshPanel"
:variablesInit="variablesInit"
:loading="chartListLoading"
:chart-detail-info="chartDetailInfo"
></chart-list>
@@ -158,6 +160,7 @@ import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
import exportHtmlMixin from '@/components/common/mixin/exportHtml'
import panelVariables from "@/components/common/panel/panelVariables";
export default {
name: 'panelTabNew',
mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin, exportHtmlMixin],
@@ -275,7 +278,9 @@ export default {
panelDataList: [],
batchDeleteObjs: [],
nowTimeType: {},
chartDetailInfo: {}
chartDetailInfo: {},
variables: [],
variablesInit: false
}
},
components: {
@@ -283,7 +288,8 @@ export default {
chartList,
nzBottomDataList,
topToolMoreOptions,
chartTempBox
chartTempBox,
panelVariables // 处理panel变量的组件
},
methods: {
// 刷新
@@ -544,10 +550,13 @@ export default {
},
// 公用操作
getTableData (linkId) {
this.variablesInit = false
if (this.from === this.fromRoute.alertRule) {
this.variablesInit = true
this.getData(this.filter)
} else {
if (this.from === this.fromRoute.chartTemp) {
this.variablesInit = true
if (this.obj.type === 'group') {
this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => {
this.panelDataList = res.data.list
@@ -564,11 +573,13 @@ export default {
this.getData(this.filter)
}
} else {
this.$get('visual/panel', { type: this.from, link: linkId }).then(response => {
this.$get('visual/panel', { type: this.from, link: linkId || this.obj.id }).then(response => {
console.log(response)
if (response.code === 200) {
this.panelData = response.data.list
if (this.panelData.length > 0) {
this.showPanel.id = this.filter.panelId = this.panelData[0].id
this.variables = this.$loadsh.get(this.panelData, '[0].param.variables')
this.getData(this.filter)
}
} else {
@@ -787,6 +798,10 @@ export default {
} else {
this.exportToHtml(this.obj.name)
}
},
getPanelData () {
this.variablesInit = true
this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
}
},
mounted () {

293
nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
View File

@@ -1,133 +1,145 @@
<template>
<el-dropdown trigger="click" :size="size">
<button id="more" :class="triggerButtonClass" :title="$t('overall.more')">
<i class="nz-icon nz-icon-more2"></i>
</button>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<el-dropdown-item v-if="showLock">
<div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>{{!panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div>
</el-dropdown-item>
<!-- import、export之前的内容 -->
<slot name="before"></slot>
<el-dropdown-item v-has="permissions.import" v-if="importUrl">
<div id="chart-import" @click="showImportBox(1)"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</div>
</el-dropdown-item>
<el-dropdown-item v-has="permissions.export" v-if="exportUrl">
<div id="chart-export" @click="showImportBox(2)"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</div>
</el-dropdown-item>
<!-- import、export之后的内容 -->
<slot name="after"></slot>
</el-dropdown-menu>
<div>
<el-dropdown trigger="click" :size="size">
<button id="more" :class="triggerButtonClass" :title="$t('overall.more')">
<i class="nz-icon nz-icon-more2"></i>
</button>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<el-dropdown-item v-if="showLock">
<div @click="editPanel" id="edit-bottom-panel"><i class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
</el-dropdown-item>
<el-dropdown-item v-if="showLock">
<div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>{{!panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div>
</el-dropdown-item>
<!-- import、export之前的内容 -->
<slot name="before"></slot>
<el-dropdown-item v-has="permissions.import" v-if="importUrl">
<div id="chart-import" @click="showImportBox(1)"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</div>
</el-dropdown-item>
<el-dropdown-item v-has="permissions.export" v-if="exportUrl">
<div id="chart-export" @click="showImportBox(2)"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</div>
</el-dropdown-item>
<!-- import、export之后的内容 -->
<slot name="after"></slot>
</el-dropdown-menu>
<el-dialog :close-on-click-modal="importBox.type!=3" destroy-on-close :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
<div v-if="importBox.type == 1">
<div class="upload-body">
<el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false" :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls" action="" class="upload-demo" drag>
<div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
<i class="nz-icon nz-icon-upload"></i>
<div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
</el-upload>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: right;">
<button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
<span>{{$t('overall.template')}}</span>
</button>
<button :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
<span>{{$t('overall.importExcel')}}</span>
</button>
<button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
<span>{{$t('overall.cancel')}}</span>
</button>
<el-dialog :close-on-click-modal="importBox.type!=3" destroy-on-close :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
<div v-if="importBox.type == 1">
<div class="upload-body">
<el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false" :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls" action="" class="upload-demo" drag>
<div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
<i class="nz-icon nz-icon-upload"></i>
<div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
</el-upload>
</div>
</div>
</div>
<div v-if="importBox.type == 2">
<div class="upload-body" style="height: 200px">
<div class="export-box">
<span class="export-title">Records</span>
<el-radio-group v-model="importBox.record" size="small">
<el-radio-button :label="item.value" v-for="(item,index) in recordArr" :key="index" :disabled="item.value==='records'&&!deleteObjs.length">{{item.name}}</el-radio-button>
</el-radio-group>
</div>
<div class="export-box">
<span class="export-title">File format</span>
<el-radio-group v-model="importBox.format" size="small">
<el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index">{{item.name}}</el-radio-button>
</el-radio-group>
</div>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns">
<button :id="id+'-xlsx-import-export'" class="nz-btn nz-btn-size-normal nz-btn-style-normal-new" @click="exportData">
<span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
</button>
<button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
<span>{{$t('overall.close')}}</span>
</button>
</div>
</div>
</div>
<div v-if="importBox.type==3">
<div class="upload-body result-body">
<div v-if="importResult&&importResult.failNum">
<div class="result-title-top">
<div class="">
<i class="nz-icon nz-icon-import-success"/>
<span>{{$t('overall.result.successNum',{successNum:importResult.successNum})}}</span><br/>
</div>
<div class="">
<i class="nz-icon nz-icon-import-failed"/>
<span>{{$t('overall.result.failedNum',{failedNum:importResult.failNum,total:importResult.totalNum})}}</span>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: right;">
<button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
<span>{{$t('overall.template')}}</span>
</button>
<button :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
<span>{{$t('overall.importExcel')}}</span>
</button>
<button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
<span>{{$t('overall.cancel')}}</span>
</button>
</div>
<div>
<div v-if="importResult&&importResult.failDetail" class="result-detail">
<div style="height: 100%; overflow: auto">
<template v-for="(item, index) in importResult.failDetail">
<div :key="index" class="import-result-block">
<div class="import-result-item">
<div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
<div class="line-content" :title="item.errorMsg">{{item.errorMsg}}</div>
</div>
</div>
<div v-if="importBox.type == 2">
<div class="upload-body" style="height: 200px">
<div class="export-box">
<span class="export-title">Records</span>
<el-radio-group v-model="importBox.record" size="small">
<el-radio-button :label="item.value" v-for="(item,index) in recordArr" :key="index" :disabled="item.value==='records'&&!deleteObjs.length">{{item.name}}</el-radio-button>
</el-radio-group>
</div>
<div class="export-box">
<span class="export-title">File format</span>
<el-radio-group v-model="importBox.format" size="small">
<el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index">{{item.name}}</el-radio-button>
</el-radio-group>
</div>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns">
<button :id="id+'-xlsx-import-export'" class="nz-btn nz-btn-size-normal nz-btn-style-normal-new" @click="exportData">
<span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
</button>
<button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
<span>{{$t('overall.close')}}</span>
</button>
</div>
</div>
</div>
<div v-if="importBox.type==3">
<div class="upload-body result-body">
<div v-if="importResult&&importResult.failNum">
<div class="result-title-top">
<div class="">
<i class="nz-icon nz-icon-import-success"/>
<span>{{$t('overall.result.successNum',{successNum:importResult.successNum})}}</span><br/>
</div>
<div class="">
<i class="nz-icon nz-icon-import-failed"/>
<span>{{$t('overall.result.failedNum',{failedNum:importResult.failNum,total:importResult.totalNum})}}</span>
</div>
</div>
<div>
<div v-if="importResult&&importResult.failDetail" class="result-detail">
<div style="height: 100%; overflow: auto">
<template v-for="(item, index) in importResult.failDetail">
<div :key="index" class="import-result-block">
<div class="import-result-item">
<div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
<div class="line-content" :title="item.errorMsg">{{item.errorMsg}}</div>
</div>
</div>
</div>
</template>
</template>
</div>
</div>
</div>
</div>
</div>
<div v-else class="result-success-box">
<div>
<i class="nz-icon nz-icon-import-success"/>
<div v-else class="result-success-box">
<div>
<i class="nz-icon nz-icon-import-success"/>
</div>
<div class="result-success-txt">{{$t('overall.result.successfully')}}</div>
<div class="result-success-txt">
{{$t('overall.result.imported')}}
<span style="color: #333333" v-if="importResult">{{importResult.successNum}}</span>
{{$t('overall.result.records')}}
</div>
</div>
<div class="result-success-txt">{{$t('overall.result.successfully')}}</div>
<div class="result-success-txt">
{{$t('overall.result.imported')}}
<span style="color: #333333" v-if="importResult">{{importResult.successNum}}</span>
{{$t('overall.result.records')}}
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns">
<button :id="id+'-xlsx-import-rollback'" class="nz-btn nz-btn-size-normal nz-btn-style-error" @click="rollbackImport">
<span>{{$t('overall.rollbackImport')}}</span>
</button>
<button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
<span>{{$t('overall.close')}}</span>
</button>
</div>
</div>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns">
<button :id="id+'-xlsx-import-rollback'" class="nz-btn nz-btn-size-normal nz-btn-style-error" @click="rollbackImport">
<span>{{$t('overall.rollbackImport')}}</span>
</button>
<button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
<span>{{$t('overall.close')}}</span>
</button>
</div>
</div>
</div>
</el-dialog>
</el-dropdown>
</el-dialog>
</el-dropdown>
<transition name="right-box">
<panel-box v-if="rightBox.panel.show" ref="panelBox" :obj="panel" @close="closePanelBox" :isBottom="true" :panelType="params.from"></panel-box>
</transition>
</div>
</template>
<script>
import axios from 'axios'
import panelBox from '@/components/common/rightBox/panelBox'
let timeout
export default {
name: 'topToolMoreOptions',
components: {
panelBox
},
props: {
size: {
type: String,
@@ -179,7 +191,12 @@ export default {
{ name: 'CSV', value: 2 },
{ name: 'JSON', value: 3 }
],
suffix: '.xlsx'
suffix: '.xlsx',
panel: {},
rightBox: { // 面板弹出框相关
panel: { show: false },
loading: false
}
}
},
mounted () {
@@ -528,7 +545,57 @@ export default {
},
formatNum (num) {
return num > 9 ? num : '0' + num
}
},
editPanel () {
this.$get('visual/panel/' + this.params.panelId).then(res => {
if (res.code === 200) {
this.panel = res.data
if (!this.$loadsh.get(this.panel, 'param.report', '')) {
this.panel = {
...this.panel,
param: {
report: {
enable: false,
range: {
unit: 'day'
},
schedule: {
type: '2',
repeat: 1,
nums: [],
stime: '',
etime: ''
},
receivers: []
},
chartShare: 'none'
}
}
}
this.panel.param.report.schedule.type = this.panel.param.report.schedule.type + ''
const startTime = this.$loadsh.get(this.panel, 'param.report.schedule.stime', '')
if (startTime !== '') {
this.panel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss')
} else {
this.panel.param.report.schedule.stime = ''
}
const endTime = this.$loadsh.get(this.panel, 'param.report.schedule.etime', '')
if (endTime !== '') {
this.panel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss')
} else {
this.panel.param.report.schedule.etime = ''
}
this.rightBox.panel.show = true
}
})
// this.panel = Object.assign({}, u)panelType
},
closePanelBox (refresh) {
this.rightBox.panel.show = false
if (refresh) {
this.$emit('afterImport')
}
},
},
watch: {
panelLock: {

19
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -12,7 +12,7 @@
<div class="container__form">
<el-form ref="form" :model="editPanel" :rules="rules" label-position = "top" label-width="120px" size="small">
<el-form-item :label='$t("overall.name")' prop="name">
<el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
<el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small" :disabled="isBottom"></el-input>
</el-form-item>
<!--remark-->
<el-form-item :label='$t("overall.remark")' class="range-time" prop="remark">
@@ -317,6 +317,14 @@ export default {
props: {
obj: {
type: Object
},
isBottom: {
type: Boolean,
default: false
},
panelType: {
type: String,
default: 'dashboard'
}
},
mixins: [editRigthBox],
@@ -506,7 +514,7 @@ export default {
...this.editPanel,
id: this.editPanel.id ? this.editPanel.id : '',
name: this.editPanel.name,
type: 'dashboard',
type: this.panelType,
remark: this.editPanel.remark,
param: {
report: {
@@ -612,12 +620,7 @@ export default {
this.editPanel = JSON.parse(JSON.stringify(n))
// 如果是空数组 则添加一条变量数据
if (!this.editPanel.param.variables || !this.editPanel.param.variables.length) {
const temp = [{
show: true,
type: 'query',
multi: false,
allOption: false
}]
const temp = []
this.$set(this.editPanel.param, 'variables', temp)
}
}