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

Merge branch 'dev-2.0' of https://git.mesalab.cn/nezha/nezha-fronted into dev-2.0

Browse Source 
# Conflicts:
#	nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
This commit is contained in:
zhangyu
2021-05-20 14:10:08 +08:00
parent f805795f1d 9488eef644
commit 2c81a8cfa8
23 changed files with 256 additions and 526 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
nezha-fronted/src/components/charts/chart-detail.vue
View File

@@ -76,7 +76,7 @@
</div>
</div>
<!-- endpoint-detail、asset、model的assetInfo的feature-->
<div v-if="(data.from == $CONSTANTS.fromRoute.endpoint || data.from == $CONSTANTS.fromRoute.asset || data.from == $CONSTANTS.fromRoute.model) && data.type == 'assetInfo' && item.type == 'attribute'" :key="i" class="content-item">
<div v-if="(data.from === $CONSTANTS.fromRoute.endpoint || data.from === $CONSTANTS.fromRoute.asset || data.from == $CONSTANTS.fromRoute.model) && data.type == 'assetInfo' && item.type == 'attribute'" :key="i" class="content-item">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{key}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
@@ -119,57 +119,8 @@
</div>
</div>
<!-- project的projectInfo的project详情-->
<div v-else-if="data.from == $CONSTANTS.fromRoute.project && data.type == 'projectInfo' && projectKey[key]" :key="i" class="content-item">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{projectKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<template v-if="key == 'alertStat'">
<div class="active-icon dark-red"></div>
<span>{{value[0]}}</span>&nbsp;&nbsp;
<div class="active-icon red"></div>
<span>{{value[1]}}</span>&nbsp;&nbsp;
<div class="active-icon orange"></div>
<span>{{value[2]}}</span>
</template>
<template v-else-if="projectKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</div>
</div>
<!-- project的projectInfo的module详情-->
<div v-else-if="data.from == $CONSTANTS.fromRoute.project && data.type == 'projectInfo' && moduleKey[key]" :key="i" class="content-item">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{moduleKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<template v-if="key == 'alertStat'">
<div class="active-icon dark-red"></div>
<span>{{value[0]}}</span>&nbsp;&nbsp;
<div class="active-icon red"></div>
<span>{{value[1]}}</span>&nbsp;&nbsp;
<div class="active-icon orange"></div>
<span>{{value[2]}}</span>
</template>
<template v-else-if="key == 'endpointStat'">
<img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
<span>{{value[0]}}</span>&nbsp;&nbsp;
<img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
<span>{{value[1]}}</span>&nbsp;&nbsp;
</template>
<template v-else-if="moduleKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</div>
</div>
<!-- endpoint-detail的endpointInfo的endpoint详情-->
<div v-else-if="data.from == $CONSTANTS.fromRoute.endpoint && data.type == 'endpointInfo' && endpointKey[key]" :key="i" class="content-item">
<div v-else-if="data.from === $CONSTANTS.fromRoute.endpoint && data.type == 'endpointInfo' && endpointKey[key]" :key="i" class="content-item">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{endpointKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>

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

@@ -116,7 +116,7 @@
@dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
:chart-index="index"></chart-url>
<chart-detail v-if="item.type === 'assetInfo' || item.type == 'projectInfo' || item.type == 'endpointInfo' || item.type == 'alertRuleInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
<chart-detail v-if="item.type === 'assetInfo' || item.type === 'projectInfo' || item.type === 'endpointInfo' || item.type === 'alertRuleInfo'" :key="'inner' + item.id" :ref="'editChart'+item.id"
:from="from" :panel-id="filter.panelId"
:chart-index="index"
@on-refresh-data="refreshChart"

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

@@ -51,9 +51,9 @@
<alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
<panel-tab-new v-if="from === fromRoute.module && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<!--endpoint列表的tab-->
<panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointQuery>
<alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
<panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.endpoint.endpointTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<!--chartTemp的Tab-->
<panel-tab-new v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.chartTemp.chartTempTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<!--alertRule Tab-->
@@ -164,7 +164,7 @@ export default {
},
endpoint: {
endpointTabTitle: [
// { prop: 'panel', name: 'Detail' },
{ prop: 'panelTab', name: this.$t('overall.detail') },
{ prop: 'endpointQuery', name: 'Query' },
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') }
]

18
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
View File

@@ -285,6 +285,24 @@ export default {
})
}
},
del (row) {
const self = this
this.$confirm(this.$t('tip.confirmDelete'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.$delete(this.url + '?ids=' + row.id + '&state=3').then(response => {
if (response.code === 200) {
self.delFlag = true
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
self.getTableData()
} else {
this.$message.error(response.msg)
}
})
})
},
getTableData (state) {
if (state) {
this.state = state

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

@@ -17,21 +17,6 @@
</el-input>
</div>
<pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
<!-- <export-excel
id="asset-list"
:params="searchLabel"
:permissions="{import: 'panel_chart_add', export: 'panel_view'}"
class="top-tool-export margin-r-10"
export-file-name="asset-charts"
export-url="visual/panel/export"
import-url="visual/panel/import"
@afterImport="getTableData"
>
<template slot="optionZone">
<button id="asset-create-asset" v-has="'panel_chart_add'" :title="$t('overall.createAsset')" class="top-tool-btn" @click.stop="addChart">
<i class="nz-icon nz-icon-create-square"></i></button>
</template>
</export-excel>-->
<button id="asset-create-asset" v-has="'panel_chart_add'" :title="$t('overall.createAsset')" class="top-tool-btn margin-r-10" @click.stop="addChart">
<i class="nz-icon nz-icon-create-square"></i>
</button>
@@ -49,10 +34,46 @@
:showLock="from === fromRoute.asset"
@panelLockChange="panelLockChange"
>
<template v-slot:after>
<el-dropdown-item v-has="'panel_chart_add'">
<div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>{{ $t('overall.AddByTemplate') }}</div>
</el-dropdown-item>
</template>
</top-tool-more-options>
</div>
<div v-else-if="from === fromRoute.chartTemp"> <button @click="panelLock=!panelLock" id="panel-lock" :title='panelLock ? $t("overall.locked") : $t("overall.unlocked")' class="top-tool-btn margin-r-10"
type="button">
<div v-else-if="from === fromRoute.endpoint" style="display: flex">
<div class="top-tool-search margin-r-20">
<el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive" clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">
<i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>
</el-input>
</div>
<pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
<button id="endpoint-create-chart" v-has="'panel_chart_add'" :title="$t('overall.createAsset')" class="top-tool-btn margin-r-10" @click.stop="addChart">
<i class="nz-icon nz-icon-create-square"></i>
</button>
<top-tool-more-options
id="asset-list"
:link="obj"
:params="filter"
:permissions="{import: 'panel_chart_add', export: 'panel_view'}"
:showCur="false"
:showLock="from === fromRoute.endpoint"
class="top-tool-export margin-r-10"
export-file-name="endpoint-charts"
export-url="visual/panel/export"
import-url="visual/panel/import"
@afterImport="getTableData"
@panelLockChange="panelLockChange"
>
<template v-slot:after>
<el-dropdown-item v-has="'panel_chart_add'">
<div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>{{ $t('overall.AddByTemplate') }}</div>
</el-dropdown-item>
</template>
</top-tool-more-options>
</div>
<div v-else-if="from === fromRoute.chartTemp">
<button id="panel-lock" :title='panelLock ? $t("overall.locked") : $t("overall.unlocked")' class="top-tool-btn margin-r-10" @click="panelLock=!panelLock" type="button">
<i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i>
</button>
<button @click="chartBySync" id="chart-sync" :title='panelLock ? $t("overall.locked") : $t("overall.unlocked")' class="top-tool-btn margin-r-10"
@@ -74,12 +95,15 @@
</div>
</div>
<button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
<transition name="right-box">
<chart-box :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" ref="addChartModal" v-if="rightBox.show"></chart-box>
</transition>
</div>
</template>
</nz-bottom-data-list>
<transition name="right-box">
<chart-box v-if="rightBox.chart.show" ref="addChartModal" :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
</transition>
<transition name="right-box">
<chart-temp-box v-if="rightBox.chartTemp.show" :from="from" :obj="chart" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @on-create-success="createSuccess"></chart-temp-box>
</transition>
</div>
</template>
@@ -90,6 +114,7 @@ import bus from '../../../../libs/bus'
import subDataListMixin from '@/components/common/mixin/subDataList'
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
import { fromRoute } from '@/components/common/js/constants'
import chartTempBox from '@/components/common/rightBox/chartTempBox'
import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
export default {
name: 'panelTabNew',
@@ -107,8 +132,13 @@ export default {
showTopBtn: false, // top按钮
visible: false,
rightBox: { // 面板弹出框相关
chart: {
show: false
},
chartTemp: {
show: false
}
},
tableHover: false,
searchTime: bus.getTimezontDateRange(),
intervalTimer: null,
@@ -161,7 +191,13 @@ export default {
showPanel: {
name: '',
type: this.from,
id: ''
id: null
},
blankChartTemp: {
varType: 1,
pid: '',
panelId: null,
varIds: []
},
// removeModal: false, // 删除弹出
// deleteObj: {}, // 删除对象
@@ -174,7 +210,8 @@ export default {
chartBox,
chartList,
nzBottomDataList,
topToolMoreOptions
topToolMoreOptions,
chartTempBox
},
methods: {
// 刷新
@@ -192,7 +229,18 @@ export default {
/* 图表相关操作--start */
addChart () {
this.chart = this.newChart()
this.rightBox.show = true
this.rightBox.chart.show = true
},
addChartByTemp () {
this.chart = Object.assign({}, this.blankChartTemp)
this.chart.panelId = this.showPanel.id
if (this.from === fromRoute.endpoint) {
this.chart.varType = 2
}
if (this.from === fromRoute.asset || this.from === fromRoute.endpoint) {
this.chart.varIds.push(this.obj.id)
}
this.rightBox.chartTemp.show = true
},
newChart () {
return JSON.parse(JSON.stringify(this.blankChart))
@@ -202,7 +250,8 @@ export default {
this.$emit('changeTab', tab)
},
closeRightBox (refresh) {
this.rightBox.show = false
this.rightBox.chart.show = false
this.rightBox.chartTemp.show = false
if (refresh) {
this.refresh()
if (this.from === fromRoute.chartTemp) {
@@ -227,7 +276,7 @@ export default {
data.param = { url: '', threshold: '' }
}
this.chart = JSON.parse(JSON.stringify(data))
this.rightBox.show = true
this.rightBox.chart.show = true
},
// 移除图表:弹出确认框询问
delChart (data, from) {
@@ -256,7 +305,7 @@ export default {
this.chart.panelId = this.showPanel.id
this.chart.panelName = this.showPanel.name
this.chart.isGroup = true
this.rightBox.show = true
this.rightBox.chart.show = true
},
delChartOk () {
this.getData(this.filter)
@@ -322,10 +371,10 @@ export default {
},
// 公用操作
getTableData (linkId) {
if (this.from === this.fromRoute.alertRule || this.from === this.fromRoute.endpoint) {
if (this.from === this.fromRoute.alertRule) {
this.getData(this.filter)
} else {
if (this.from == this.$CONSTANTS.fromRoute.chartTemp) {
if (this.from === this.fromRoute.chartTemp) {
if (this.obj.type === 'group') {
this.$get('/visual/panel/chart', { ids: this.obj.id, groupId: 0 }).then(res => {
res.data.list.forEach(item => {
@@ -497,7 +546,7 @@ export default {
this.$message.error(res.msg)
}
})
},
}
},
mounted () {
this.scrollbarWrap = this.$refs.dashboardScrollbar

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

@@ -14,6 +14,9 @@ const cn = {
twoDay: '2 天',
week: '1 周',
folder: '文件夹',
key: '键名',
state: '状态',
projectName: '系统名称',
startTime: '开始时间',
endTime: '结束时间',
metric: '指标',
@@ -76,7 +79,7 @@ const cn = {
createPrometheusServer: '新增Agent',
createDatacenter: '新增数据中心',
active: '活跃',
type: '类别',
type: '类型',
detail: '详细信息',
changePin: '修改密码',
createCabinet: '新增机柜',
@@ -630,7 +633,7 @@ const cn = {
assetPing: 'Ping',
lastReply: 'Ping最后应答',
vendor: '厂商',
name: 'Name',
name: '名称',
dc: '数据中心',
type: '主机地址',
pingInfo: 'Ping'

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

@@ -20,6 +20,9 @@ const en = {
twoDay: '2 days',
week: '1 week',
folder: 'Folder',
key: 'Key',
state: 'State',
projectName: 'project name',
startTime: 'Start time',
endTime: 'End time',
metric: 'Metric',
@@ -126,7 +129,7 @@ const en = {
copySuccess: 'Copy success',
parent: 'Parent',
dc: 'Data center',
labels: 'Labels',
labels: 'Label',
moreOption: 'More option',
copy: 'Copy',
silence: 'Silence',

22
nezha-fronted/src/components/common/mixin/table.js
View File

@@ -25,10 +25,6 @@ export default {
methods: {
tableOperation ([command, row, param]) {
switch (command) {
case 'edit': {
this.$emit('edit', row)
break
}
case 'delete': {
this.$emit('del', row)
break
@@ -37,21 +33,8 @@ export default {
this.$emit('showBottomBox', 'recordTab', row)
break
}
case 'cli': {
this.$emit('cli', row)
break
}
case 'duplicate': {
this.$emit('duplicate', row)
break
}
case 'copy': {
this.$emit('copy', row)
break
}
case 'shutdown': {
// this.$emit('copy', row)
this.$emit('shutdown', row)
case 'endpointQuery': {
this.$emit('showBottomBox', 'endpointQuery', row)
break
}
case 'sync': {
@@ -60,6 +43,7 @@ export default {
break
}
default:
this.$emit(command, row)
break
}
},

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

@@ -7,6 +7,7 @@
<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-if="importUrl">
<div id="chart-import" @click="showImportBox(1)"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</div>
@@ -14,10 +15,8 @@
<el-dropdown-item 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-item v-has="'panel_chart_add'">
<div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-download1"></i>Add template</div>
</el-dropdown-item>-->
</el-dropdown-menu>
<el-dialog :close-on-click-modal="importBox.type!=3" :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
@@ -27,9 +26,6 @@
<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>
<!--<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt" >{{$t('overall.upload')}}</span>
</button>-->
</el-upload>
</div>
<div slot="footer" class="footer">
@@ -74,9 +70,6 @@
<div class="result-title">{{$t('overall.result.failedDetail')}}:</div>
<div v-if="importResult&&importResult.failDetail" class="result-detail">
<div style="height: 100%; overflow: auto;">
<!-- <ul>
<li v-for="(item,index) in importResult.failDetail"><span>{{item.lineNo}}</span>:<span>{{item.errorMsg}}</span> </li>
</ul>-->
<template v-for="(item, index) in importResult.failDetail">
<div :key="index" class="import-result-block">
<div class="import-result-item">
@@ -94,9 +87,6 @@
<button :id="id+'-xlsx-import-rollback'" class="nz-btn nz-btn-size-normal-new nz-btn-style-error-new" @click="rollbackImport">
<span>{{$t('overall.rollbackImport')}}</span>
</button>
<!--<button @click="closeDialog" class="el-button el-button&#45;&#45;default el-button&#45;&#45;small">-->
<!--<span>{{$t('overall.cancel')}}</span>-->
<!--</button>-->
</div>
</div>
</div>

13
nezha-fronted/src/components/common/rightBox/administration/userBox.vue
View File

@@ -8,7 +8,7 @@
</div>
<div class="right-box__container">
<div class="container__form">
<el-form ref="userForm" :model="editUser" :rules="editUser.id ? rules2 : rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
<el-form ref="userForm" :model="editUser" :rules="editUser.id ? rules2 : rules" label-position="top" label-width="120px">
<!--name-->
<el-form-item :label="$t('config.user.name')" prop="name">
<el-input id="account-input-name" v-model="editUser.name" :disabled="editUser.username==='admin' && editUser.id==1"
@@ -39,7 +39,16 @@
</el-form-item>
<!--roles-->
<el-form-item :label="$t('config.user.roles')" prop="roleIds">
<el-select id="account-input-roleIds" v-model="editUser.roleIds" :disabled="(editUser.username==='admin') && editUser.id==1" clearable collapse-tags placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="()=>{this.$forceUpdate()}">
<el-select id="account-input-roleIds"
v-model="editUser.roleIds"
:disabled="(editUser.username==='admin') && editUser.id==1"
class="right-box__select"
clearable
collapse-tags
placeholder=""
popper-class="right-box-select-dropdown prevent-clickoutside"
size="small"
@change="()=>{this.$forceUpdate()}">
<template v-for="role in roles">
<!-- <el-option :key="role.id" :label="role.i18n?$t(role.i18n+''):role.name" :value="role.id"></el-option>-->
<el-option :key="role.id" :label="role.name" :value="role.id"></el-option>

92
nezha-fronted/src/components/common/rightBox/chartTempBox.vue
View File

@@ -8,10 +8,18 @@
</div>
<div class="right-box__container">
<div class="container__form">
<el-form ref="userForm" :model="editChartTemp" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
<el-form ref="userForm" :model="editChartTemp" :rules="rules" label-position="top" label-width="120px">
<!--type-->
<el-form-item :label="$t('dashboard.panel.chartForm.varType')" prop="varType">
<el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.varType" value-key="chartType" id="chart-box-group" @change="varTypeChange">
<el-form-item v-if="from !== fromRoute.endpoint" :label="$t('dashboard.panel.chartForm.varType')" prop="varType">
<el-select id="chart-box-group"
v-model="editChartTemp.varType"
class="right-box__select"
clearable
placeholder=""
popper-class="right-box-select-dropdown prevent-clickoutside"
size="small"
value-key="chartType"
@change="varTypeChange">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
@@ -19,7 +27,13 @@
</el-form-item>
<!--chartTemp list-->
<el-form-item :label="$t('dashboard.panel.chartForm.pid')" prop="pid">
<el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.pid" value-key="chartType" id="chart-box-group" >
<el-select id="chart-box-group"
v-model="editChartTemp.pid"
class="right-box__select" clearable
placeholder=""
popper-class="right-box-select-dropdown prevent-clickoutside"
size="small"
value-key="chartType" >
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTempArr">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
@@ -27,18 +41,21 @@
</el-form-item>
<!-- 选择资产，穿梭框 -->
<template v-if="showTransfer">
<div class="form__sub-title">{{editChartTemp.varType === 1 ? 'Asset' : 'Endpoint'}}</div>
<nz-transfer ref="transfer"
:from="from"
:page-obj="transfer.pageObj"
:search-msg="transfer.searchMsg"
:table-data="transfer.tableData"
style="margin-bottom: 20px;"
:tableTitle="transferTableTitle"
style="margin-bottom: 20px;"
@leftToRight="addAsset"
@search="search"
@rightToLeft="removeAsset">
@rightToLeft="removeAsset"
@search="search">
<template v-slot:title>Selected</template>
</nz-transfer>
</template>
</el-form>
</div>
</div>
@@ -55,6 +72,7 @@
<script>
import nzTransfer from '@/components/common/nzTransfer'
import { fromRoute } from '@/components/common/js/constants'
export default {
name: 'chartTemp',
components: {
@@ -63,20 +81,14 @@ export default {
props: {
obj: {
type: Object
}
},
computed: {
isCurrentUser () {
return function (username) {
return localStorage.getItem('nz-username') == username
}
}
from: String
},
data () {
return {
fromRoute,
editChartTemp: {},
url: 'visual/panel/chart/fromTmpl',
rightBox: { model: { show: false } },
rules: { // 表单校验规则
varType: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
@@ -171,6 +183,16 @@ export default {
this.getChartTempData()
this.getTableData()
},
computed: {
showTransfer () {
if (this.from === fromRoute.endpoint) {
return false
} else if (this.from === fromRoute.asset && this.editChartTemp.varType === 1) {
return false
}
return true
}
},
methods: {
clickOutside () {
this.esc(false)
@@ -185,14 +207,24 @@ export default {
this.prevent_opt.save = true
if (!this.transfer.selectedData.length) {
this.prevent_opt.save = false
if (this.from !== fromRoute.endpoint) { // 来自endpoint时不校验
if (this.editChartTemp.varType === 1) {
if (this.from !== fromRoute.asset) { // 来自asset且type=1时不校验
this.$message.error(this.$t('dashboard.panel.chartForm.selectAsset'))
}
} else {
this.$message.error(this.$t('dashboard.panel.chartForm.selectEndpoint'))
}
return
}
}
if (this.from === fromRoute.asset && this.editChartTemp.varType === 1) { // 来自asset时取assetId
this.editChartTemp.varIds = this.obj.varIds
} else if (this.from === fromRoute.endpoint) { // 来自endpoint时取endpointId
this.editChartTemp.varIds = this.obj.varIds
} else {
this.editChartTemp.varIds = this.transfer.selectedData.map(item => item.id)
}
this.$refs.userForm.validate((valid) => {
if (valid) {
if (this.editChartTemp.id) {
@@ -267,7 +299,11 @@ export default {
},
getEndpointData () {
this.$refs.transfer.startLoading()
this.$get('monitor/endpoint', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
const idFilter = {}
if (this.from === fromRoute.asset) {
idFilter.assetIds = this.obj.varIds[0]
}
this.$get('monitor/endpoint', { ...this.transfer.searchLabel, ...this.transfer.pageObj, ...idFilter }).then(response => {
this.$refs.transfer.endLoading()
if (response.code === 200) {
this.transfer.tableData = response.data.list
@@ -278,8 +314,12 @@ export default {
varTypeChange () {
this.getChartTempData()
this.editChartTemp.pid = ''
// 从asset详情页进来的，varType=1时不显示asset列表，varId默认为asset的id; 从endpoint详情页进来的，varId默认为endpoint的id
if ((this.from === fromRoute.asset && this.editChartTemp.varType === 1) || this.from === fromRoute.endpoint) {
this.transfer.selectedData = this.obj.varIds
} else {
this.transfer.selectedData = []
this.$refs.transfer.selectedData = []
}
if (this.editChartTemp.varType === 1) {
this.transferTableTitle = [
{
@@ -365,12 +405,6 @@ export default {
type: 'input',
label: 'id',
disabled: false
}, {
id: 14,
name: this.$t('asset.asset'),
type: 'query',
label: 'query',
disabled: false
}, {
id: 34,
name: this.$t('project.project.projectName'),
@@ -386,8 +420,20 @@ export default {
label: 'moduleName',
disabled: false
}]
if (this.from !== fromRoute.asset) {
this.transfer.searchMsg.searchLabelList.push({
id: 14,
name: this.$t('asset.asset'),
type: 'query',
label: 'query',
disabled: false
})
}
}
this.$nextTick(() => {
this.$refs.transfer.selectedData = []
this.getTableData()
})
}
}
}

342
nezha-fronted/src/components/common/rightBox/userBox.vue
View File

@@ -1,342 +0,0 @@
<template>
<div v-clickoutside="{obj:editUser,func:clickOutside}" class="right-box right-box-account">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns right-box-form-delete">
<button v-if="editUser.id&&editUser.id!==1" id="account-edit-del" v-has="'account_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien"
type="button"
@click="del">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{editUser.id ? ($t("config.account.editAccount")) : $t("config.account.createAccount")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<div class="right-box-form-box">
<el-form ref="accountForm" :model="editUser" :rules="editUser.id ? rules2 : rules" class="right-box-form right-box-form-left" label-position = "top" label-width="120px">
<!--username-->
<el-form-item :label="$t('config.account.account')" prop="username">
<el-input id="account-input-username" v-model="editUser.username" :disabled="editUser.username==='admin' && editUser.id==1" autocomplete="new-password"
maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
</el-form-item>
<!--password-->
<el-form-item :label="$t('config.account.pin')" prop="pin">
<el-input id="account-input-password" v-model="editUser.pin" autocomplete="new-password" maxlength="16" placeholder=""
show-word-limit size="small" type="password" @blur="pinBlur"></el-input>
</el-form-item>
<!--pinChange-->
<el-form-item :label="$t('config.account.confirmPin')" label-width="200px" prop="pinChange">
<el-input id="account-input-pinChange" v-model="editUser.pinChange" autocomplete="new-password" maxlength="16" placeholder=""
show-word-limit size="small" type="password"></el-input>
</el-form-item>
<!--email-->
<el-form-item label="E-mail" prop="email">
<el-input id="account-input-email" v-model="editUser.email" placeholder="" size="small" type="text"></el-input>
</el-form-item>
<!--enable-->
<el-form-item :label="$t('config.account.enable')">
<el-switch id="account-input-status" v-model="editUser.status" :disabled="isCurrentUser(editUser.username) || (editUser.username==='admin' && editUser.id==1) " active-color="#ee9d3f" active-value="1"
inactive-value="0">
</el-switch>
</el-form-item>
<!--roles-->
<el-form-item :label="$t('config.account.roles')" prop="roleIds">
<el-select id="account-input-roleIds" v-model="editUser.roleIds" :disabled="(editUser.username==='admin') && editUser.id==1" clearable collapse-tags placeholder="" popper-class="config-dropdown" size="small" @change="()=>{this.$forceUpdate()}">
<template v-for="role in roles">
<el-option :key="role.id" :label="role.i18n?$t(role.i18n):role.name" :value="role.id"></el-option>
</template>
</el-select>
</el-form-item>
<el-form-item v-if="editUser.id" :label="$t('config.account.createTime')">
<div class="right-box-form-content-txt">{{editUser.createTime}}</div>
</el-form-item>
<div class="right-box-sub-title">{{$t('config.account.notification')}}
<button id="add-notification" :disabled="addDisabled" class="float-right" type="button" @click="addNotification">
<span><i class="nz-icon nz-icon-create-square"></i></span>
</button>
</div>
<div class="right-box-line"></div>
<div id="account-input-box">
<el-form-item v-for="(notification, index) in editUser.notifications" :key="index" class="notification-item">
<el-select v-model="notification.scriptId" placeholder="" popper-class="no-style-class" size="small" style="display: inline-block;width: 100px;margin-left: 15px">
<el-option v-for="(item, i) in selectableScripts" :key="i" :disabled="item.disabled" :label="item.name" :value="item.id"></el-option>
</el-select>
<el-input v-model="notification.account" placeholder="" size="small" style="width: calc(100% - 157px);"></el-input>
<span style="padding-left: 5px;" @click="removeNotification(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
</el-form-item>
</div>
</el-form>
</div>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box__footer">
<button id="account-esc" v-cancel="{obj:editUser,func:esc}"
class="footer__btn">
<span>{{$t('overall.cancel')}}</span>
</button>
<button id="account-save" :class="{'nz-btn-disabled':prevent_opt.save}"
:disabled="prevent_opt.save"
class="footer__btn" @click="save"
>
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
export default {
name: 'accountBox',
props: {
obj: Object
},
computed: {
isCurrentUser () {
return function (username) {
return localStorage.getItem('nz-username') == username
}
},
addDisabled () {
const enabled = this.selectableScripts.filter(item => {
return !item.disabled
})
return enabled.length === 0
}
},
data () {
const validatepin = (rule, value, callback) => { // 确认密码的二次校验
if (value === '' && this.editUser.pin) {
callback(new Error(this.$t('config.account.inputConfirmPin')))
} else if (value !== this.editUser.pin) {
callback(new Error(this.$t('config.account.confirmPinErr')))
} else {
callback()
}
}
return {
scriptIds: [],
rules: { // 表单校验规则
username: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
pin: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
pinChange: [
{ validator: validatepin, trigger: 'blur' },
{ required: true, message: '', trigger: 'blur' }
],
roleIds: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
email: [
{ type: 'email', message: this.$t('validate.email') }
]
},
rules2: { // 表单校验规则
username: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
pinChange: [
{ validator: validatepin, trigger: 'blur' }
],
roleIds: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
email: [
{ type: 'email', message: this.$t('validate.email') }
]
},
editUser: {},
scripts: [],
selectableScripts: [],
pinChange: '',
roles: []
}
},
methods: {
/* 关闭弹框 */
esc (refresh) {
this.prevent_opt.save = false
console.log('cancel function ')
this.$emit('close', refresh)
},
clickOutside () {
this.esc(false)
},
/* 保存 */
save () {
if (this.prevent_opt.save) { return } ;
this.prevent_opt.save = true
this.$refs.accountForm.validate(valid => {
if (valid) {
const editUser = JSON.parse(JSON.stringify(this.editUser))
editUser.roleIds = [editUser.roleIds]
if (this.editUser.id) {
this.$put('sys/user', editUser).then(response => {
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.$message.error(response.msg)
}
})
} else {
editUser.roleIds = this.roles.find(t => t.name == 'common').id
this.$post('sys/user', editUser).then(response => {
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.$message.error(response.msg)
}
})
}
} else {
this.prevent_opt.save = false
return false
}
})
},
/* 删除 */
del () {
if (this.prevent_opt.save) { return }
this.prevent_opt.save = true
this.$confirm(this.$t('tip.confirmDelete'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.$delete('sys/user?ids=' + this.editUser.id).then(response => {
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
this.esc(true)
} else {
this.$message.error(response.msg)
}
})
this.prevent_opt.save = false
}).catch(() => {
this.prevent_opt.save = false
})
},
/* 密码失去焦点 检验确认密码 */
pinBlur () {
if (this.editUser.pin && this.editUser.pinChange) {
this.$refs.accountForm.validateField('pinChange')
}
},
getScripts () {
this.$get('/alert/script?pageNo=1&pageSize=-1').then(response => {
this.scripts = response.data.list
this.getSelectableScripts()
})
},
getSelectableScripts () {
const userNotifications = this.editUser.notifications
if (userNotifications) {
this.selectableScripts = this.scripts.map(item => {
const exist = this.editUser.notifications.some(n => {
return item.id === n.scriptId
})
if (exist) {
this.$set(item, 'disabled', true)
} else {
this.$set(item, 'disabled', false)
}
return item
})
} else {
this.selectableScripts = this.scripts.map(item => {
this.$set(item, 'disabled', false)
return item
})
}
},
addNotification () {
const scripts = this.selectableScripts.find(item => {
return item.disabled === false
})
if (scripts) {
if (!this.editUser.notifications) {
this.editUser.notifications = []
}
this.editUser.notifications.push({ scriptId: scripts.id, account: '' })
}
},
getRoles () {
this.roles = []
this.$get('sys/role?pageSize=-1').then(response => {
if (response.code === 200) {
this.roles = response.data.list
} else {
this.$message.error('load roles faild')
}
})
},
removeNotification (index) {
this.editUser.notifications.splice(index, 1)
}
},
mounted () {
this.getScripts()
this.getRoles()
},
watch: {
// 将prop里的user转为组件内部对象
obj: {
immediate: true,
deep: true,
handler (n) {
this.editUser = JSON.parse(JSON.stringify(n))
this.editUser.roleIds = n.roles && n.roles.map(t => t.id)[0]
}
},
'editUser.notifications': {
deep: true,
immediate: true,
handler (n) {
this.getSelectableScripts()
}
}
}
}
</script>
<style lang="scss">
@import '@/assets/css/common/rightBoxCommon.scss';
.right-box-account {
.right-box-sub-title {
#add-notification {
border: none;
outline: none;
cursor: pointer;
i {
font-size: 17px;
background-color: #f6f6f6;
}
}
}
}
.notification-item {
.el-select {
width: 100px;
}
}
</style>
<style scoped>
.form-item-title{
position: absolute;
left: -120px;
}
</style>

3
nezha-fronted/src/components/common/table/settings/endpointTable.vue
View File

@@ -94,12 +94,13 @@
fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button class="table-operation-item" @click="showBottomBox('endpointQuery', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<button class="table-operation-item" @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" v-has="['monitor_endpoint_edit','monitor_endpoint_delete']" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'monitor_endpoint_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>

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

@@ -168,7 +168,7 @@ export default {
label: 'summary',
disabled: false
}, {
name: 'Labels',
name: this.$t('overall.labels'),
type: 'input',
label: 'labels',
disabled: false
@@ -227,6 +227,24 @@ export default {
this.queryChartDate()
})
},
del (row) {
const self = this
this.$confirm(this.$t('tip.confirmDelete'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.$delete(this.url + '?ids=' + row.id + '&state=3').then(response => {
if (response.code === 200) {
self.delFlag = true
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
self.getTableData()
} else {
this.$message.error(response.msg)
}
})
})
},
messageDetail (row) {
this.$get('/alert/rule/' + row.alertRule.id).then(res => {
this.currentMsg = { ...row, alertRule: { ...res.data } }

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

@@ -158,7 +158,7 @@ export default {
label: 'ids',
disabled: false
}, {
name: 'Name',
name: this.$t('overall.name'),
type: 'input',
label: 'name',
disabled: false

4
nezha-fronted/src/components/page/config/agent.vue
View File

@@ -139,7 +139,7 @@ export default {
label: 'ids',
disabled: false
}, {
name: this.$t('config.agent.dataCenter'),
name: this.$t('dashboard.overview.dataCenter.dataCenter'),
type: 'dc',
label: 'dc',
disabled: false
@@ -149,7 +149,7 @@ export default {
label: 'promType',
disabled: false
}, {
name: this.$t('state.state'),
name: this.$t('overall.state'),
type: 'select',
label: 'promState',
disabled: false

8
nezha-fronted/src/components/page/config/assetMeta.vue
View File

@@ -108,22 +108,22 @@ export default {
zheze_none: true,
searchLabelList: [
{
name: 'Id',
name: 'ID',
type: 'input',
label: 'ids',
disabled: false
}, {
name: 'Name',
name: this.$t('overall.name'),
type: 'input',
label: 'name',
disabled: false
}, {
name: 'Key',
name: this.$t('overall.key'),
type: 'input',
label: 'key',
disabled: false
}, {
name: 'Group',
name: this.$t('config.assetLabel.group'),
type: 'group',
label: 'group',
disabled: false

2
nezha-fronted/src/components/page/config/credentials.vue
View File

@@ -97,7 +97,7 @@ export default {
label: 'name',
disabled: false
}, {
name: 'Type',
name: this.$t('overall.type'),
type: 'select',
label: 'credentialType',
disabled: false

2
nezha-fronted/src/components/page/config/model.vue
View File

@@ -74,7 +74,7 @@ export default {
label: 'ids',
disabled: false
}, {
name: 'Name',
name: this.$t('overall.name'),
type: 'input',
label: 'name',
disabled: false

4
nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
View File

@@ -123,13 +123,13 @@ export default {
label: 'ids',
disabled: false
}, {
name: 'Name',
name: this.$t('overall.name'),
type: 'input',
label: 'name',
disabled: false
},
{
name: this.$t('asset.asset'),
name: this.$t('overall.asset'),
type: 'input',
label: 'assetName',
disabled: false

4
nezha-fronted/src/components/page/monitor/module/moduleList.vue
View File

@@ -128,13 +128,13 @@ export default {
label: 'ids',
disabled: false
}, {
name: 'Name',
name: this.$t('overall.name'),
type: 'input',
label: 'name',
disabled: false
},
{
name: 'Project name',
name: this.$t('overall.projectName'),
type: 'project',
label: 'projectIds',
disabled: false

4
nezha-fronted/src/components/page/monitor/project/projectList.vue
View File

@@ -77,13 +77,13 @@ export default {
zheze_none: true,
searchLabelList: [
{
name: 'Id',
name: 'ID',
type: 'input',
label: 'ids',
disabled: false
},
{
name: 'Name',
name: this.$t('overall.name'),
type: 'input',
label: 'name',
disabled: false