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

feat：dashboard支持定义变量页面搭建

Browse Source
This commit is contained in:
zyh
2022-06-24 18:18:13 +08:00
parent c447e540d4 0b576243f4
commit 8601913bf4
48 changed files with 485 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
nezha-fronted/src/assets/css/common.scss
View File

@@ -473,11 +473,17 @@ textarea {
.is-disabled{
color: $--color-text-disabled !important;
}
.ql-tooltip {
.ql-snow .ql-tooltip {
background: $--background-color-empty;
border: 1px solid $--select-page-focus-color;
box-shadow: 0px 0px 5px $--scrollbar-background-color;
color: $--color-text-primary;
input[type=text]{
border: 1px solid $--select-page-focus-color;
background: $--background-color-empty;
outline: none;
}
}
.chart-time-series.hide{
display: none !important;
}

3
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -3,9 +3,8 @@
}
.my-loading-parent--relative {
position: relative;
display: inline-block;
height: 100%;
width: 100%;
width: auto;
}
.panel-chart {
border: 1px solid $--chart-box-border-color;

46
nezha-fronted/src/assets/css/components/common/intro.scss Normal file
View File

@@ -0,0 +1,46 @@
.is-intro.el-dialog{
max-height: unset;
max-width: unset;
height: 100%;
.el-dialog__header{
display: none;
}
.el-dialog__body{
height: 100%;
padding: 0;
> div{
height: 100%;
}
}
}
.dc-img{
width: 100%;
height: 100%;
background: url("~@/assets/img/jj.png") no-repeat;
background-size:cover;
}
.dc-img1{
width: 100%;
height: 100%;
background: url("~@/assets/img/jj1.png") no-repeat;
background-size:cover;
}
.dc-img2{
width: 100%;
height: 100%;
background: url("~@/assets/img/jj3.png") no-repeat;
background-size:cover;
}
.dc-img3{
width: 100%;
height: 100%;
background: url("~@/assets/img/dc3.png") no-repeat;
background-size:cover;
}
.intro-bottom{
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
}

2
nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
View File

@@ -37,7 +37,7 @@
}
.project-title {
background: #eeeeee;
background: $--background-color-base;
height: 36px;
line-height: 36px;
border-radius: 0;

14
nezha-fronted/src/assets/css/components/common/project/topology.scss
View File

@@ -60,7 +60,7 @@
}
}
.edit-topologyLine{
background: rgba(196,196,196,0.4) !important;
//background: rgba(196,196,196,0.4) !important;
border-bottom: 1px solid $--explore-border-color-bottom;
}
.topology-scroll{
@@ -333,10 +333,9 @@
margin-right: 10px;
}
.project-title {
height: 55px;
height: 36px;
padding-bottom: 0;
}
.drag-header {
cursor: move;
background: #1a1a1a;
@@ -543,3 +542,12 @@
overflow: hidden;
box-sizing: border-box;
}
.full.pr10 {
.el-select.el-select--small,.el-input {
background-color: $--background-color-empty;
border: 1px solid $--background-color-empty;
}
}
.el-upload-dragger{
background-color: $--background-color-empty;
}

6
nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
View File

@@ -38,12 +38,12 @@
}
.metrics-input-box{
.input-box .el-textarea .el-textarea__inner {
width: calc(100% + 42px);
width: 100%;
}
.metric-selector-input-box{
line-height: 32px;
.el-input__count{
right: -38px !important;
right: 18px !important;
}
}
.el-col-24{
@@ -330,4 +330,4 @@
.nz-icon-mimabukejian{
font-size: 18px;
}
}
}

220
nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
View File

@@ -1,96 +1,131 @@
.right-box-panel{
.item-report{
.form__sub-title{
margin-bottom: 5px;
}
}
.item-receivers{
.el-select.el-select--small{
width: 100%;
}
.item-receivers-text{
font-size: 12px;
color: $--color-text-secondary;
padding-left: 5px;
}
}
.el-input--suffix.el-date-editor--datetime .el-input__inner{
padding-left: 15px;
}
.form-items--half-width-group{
.item-receivers{
.el-input--suffix.el-date-editor--datetime .el-input__inner{
padding-left: 15px;
}
.form-items--half-width-group{
.item-receivers{
width: 100%;
.el-select.el-select--small{
width: 100%;
.el-select.el-select--small{
width: 100%;
}
}
.form-item--half-width{
.el-date-editor.el-date-editor--datetime{
width: 100%;
.el-input__inner{
height: 32px;
}
}
.form-item--half-width{
.el-date-editor.el-date-editor--datetime{
width: 100%;
.el-input__inner{
height: 32px;
}
}
}
.check-month_box{
.el-checkbox-group{
}
.check-month_box{
.el-checkbox-group{
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
.el-checkbox-button{
display: flex;
justify-content: start;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.el-checkbox-button{
display: flex;
justify-content: center;
align-items: center;
width: calc(100% / 7);
margin-right: -2px;
margin-bottom: -1px;
border: 1px solid $--border-color-light;
.el-checkbox-button__inner{
border: 0px;
border-left: 0px !important;
border-bottom: 0px !important;
display: block;
width: 100%;
height: 100%;
background-color: $--background-color-empty;
border-radius: 0;
}
width: calc(100% / 7);
margin-right: -2px;
margin-bottom: -1px;
border: 1px solid $--border-color-light;
.el-checkbox-button__inner{
border: 0px;
border-left: 0px !important;
border-bottom: 0px !important;
display: block;
width: 100%;
height: 100%;
background-color: $--background-color-empty;
border-radius: 0;
}
}
}
.el-checkbox-button.is-checked{
border: 1px solid #fbb569 !important;
}
.el-checkbox-button.is-checked .el-checkbox-button__inner {
color: #fff;
border-radius: 0;
background-color: $--color-primary !important;
.el-checkbox-button.is-checked .el-checkbox-button__inner {
color: #fff;
border-radius: 0;
background-color: $--color-primary !important;
}
}
}
.range-time{
width: 100%;
.el-form-item__content{
height: 41px;
.el-radio-group{
height: 100%;
border-left: 1px solid $--border-color-light;
.el-radio-button__inner{
height: 100%;
line-height: 1.5;
font-size: 14px;
color: $--color-text-primary;
}
}
.el-checkbox-group{
height: 100%;
.el-checkbox-button{
margin-right: -2px;
.el-checkbox-button__inner{
background-color: $--background-color-empty;
border:1px solid $--border-color-light;
}
}
}
}
.range-time{
width: 100%;
.el-form-item__content{
height: 41px;
.el-radio-group{
display: flex;
border-left: 0;
height: 100%;
.el-radio-button{
flex: 1;
border: 1px solid $--border-color-light;
margin-right: -1px;
}
.el-radio-button.is-active{
border: 1px solid #fbb569 !important;
border-radius: 0;
}
.el-radio-button__inner{
border: 0;
height: 100%;
line-height: 1.5;
font-size: 14px;
color: $--color-text-primary;
}
}
.el-checkbox-group{
height: 100%;
.el-checkbox-button{
margin-right: -2px;
width: calc(100% / 6.9) !important;
.el-checkbox-button__inner{
background-color: $--background-color-empty;
border:1px solid $--border-color-light;
}
}
}
}
.el-radio-group{
display: flex;
border-left: 0;
.el-radio-button{
flex: 1;
}
}
.el-checkbox-button.is-checked .el-checkbox-button__inner {
color: #fff;
border-radius: 0;
background-color: $--color-primary !important;
border: 1px solid $--color-primary !important;
// margin-right: -1px;
}
}
.form-tabs{
width: 100%;
margin-bottom: 0 !important;
.el-tabs__nav{
display: flex;
.el-tabs__item{
flex: 1;
}
.el-checkbox-button.is-checked .el-checkbox-button__inner {
color: #fff;
border-radius: 0;
@@ -99,31 +134,16 @@
// margin-right: -1px;
}
}
.form-tabs{
width: 100%;
.el-tabs__nav{
display: flex;
.el-tabs__item{
flex: 1;
}
.el-checkbox-button.is-checked .el-checkbox-button__inner {
color: #fff;
border-radius: 0;
background-color: $--color-primary !important;
border: 1px solid $--color-primary !important;
// margin-right: -1px;
}
}
}
.form-day-week{
width: 100%;
.el-input-group__append{
border: 1px solid $--border-color-light;
background-color: $--right-box-sub-title-background-color;
}
.form-day-week{
width: 100%;
.el-input-group__append{
border: 1px solid $--border-color-light;
background-color: $--right-box-sub-title-background-color;
}
}
}
.variable-box{
}
}
.variable-box{
margin-bottom: 16px;
.variable-title{
border: 1px solid $--border-color-light;
@@ -178,12 +198,10 @@
cursor: pointer;
margin-top: 16px;
}
}
}
}
}
.el-form-item__content{
text-align: unset !important;
.el-checkbox-button{
width: calc(100% / 7) !important;
.el-checkbox-button__inner{
@@ -212,6 +230,4 @@
}
.allOptionTip{
max-width:208px;
}
}

1
nezha-fronted/src/assets/css/components/index.scss
View File

@@ -67,6 +67,7 @@
@import './common/elementSet.scss';
@import './common/loading.scss';
@import './common/login.scss';
@import './common/intro.scss';
@import './common/multipleTime.scss';
@import './common/nezhaColor.scss';
@import './common/nzTransfer.scss';

1
nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
View File

@@ -58,6 +58,7 @@
}
.el-cascader-menu {
width: 200px;
height: 100%;
}
.metric-btn:hover, .metric-btn:focus {
background-image: linear-gradient(180deg, rgb(247, 248, 250) 0%, rgb(247, 248, 250) 100%);

1
nezha-fronted/src/assets/css/themes/src/table.scss
View File

@@ -259,6 +259,7 @@
right: 0;
width: 1px;
height: 100%;
background: $--border-color-light;
}
}

BIN
nezha-fronted/src/assets/img/dc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
nezha-fronted/src/assets/img/dc1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
nezha-fronted/src/assets/img/dc2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
nezha-fronted/src/assets/img/dc3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
nezha-fronted/src/assets/img/jj.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 292 KiB

BIN
nezha-fronted/src/assets/img/jj1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 407 KiB

BIN
nezha-fronted/src/assets/img/jj3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 217 KiB

16
nezha-fronted/src/components/common/ChartDiagram/diagram.vue
View File

@@ -61,7 +61,7 @@
<div slot="prefix">
<div class="icon-item" style="width: 100%;padding: 0">
<svg>
<g fill="none" stroke="black" stroke-width="1">
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
<path
:d="penLineType.find((item,i)=>item.id==lineName).d"
>
@@ -74,7 +74,7 @@
<el-option v-for="(item,index) in penLineType" :value="item.id" :key="index">
<div class="icon-item" style="position: relative;width: 100%;padding: 0">
<svg>
<g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
<g fill="none" :stroke="(lineName==item.name)?'#ee9d3f': item.strokeColor " stroke-width="1">
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
</g>
</svg>
@@ -354,7 +354,9 @@ const canvasOptions = {
export default {
name: 'diagram',
data () {
const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
return {
theme,
title: this.$t('overall.uploadCustomPicture'),
objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
chartDataInfo: {},
@@ -517,10 +519,10 @@ export default {
chartData: {},
chartGetData: [],
penLineType: [
{ d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
{ d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
{ d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
// {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
{ d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
{ d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
{ d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'}
// {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind', strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
],
lineName: 'curve',
cachesIndex: 0,
@@ -831,8 +833,10 @@ export default {
this.projectAlertShow = true
this.saveData = { ...data }
this.topologyInfo.name = ''
data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
resolve(data)
} else {
data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
if (data.data) {
this.topologyInfo = {
fontSize: data.data.fontSize,

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

@@ -638,7 +638,7 @@
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("overall.login.name") }}</div>
<div class="alert-label-title">{{ $t("profile.username") }}</div>
<div class="alert-label-value">
{{ alertLabelData && alertLabelData.username ? alertLabelData.username : "--" }}
</div>
@@ -656,13 +656,13 @@
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("overall.soure") }}</div>
<div class="alert-label-title">{{ $t("profile.source") }}</div>
<div class="alert-label-value">
{{ alertLabelData && alertLabelData.source ? alertLabelData.source : "--" }}
</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">{{ $t("config.operationlog.state") }}</div>
<div class="alert-label-title">{{ $t("overall.state") }}</div>
<div class="alert-label-value">
<div
v-if="alertLabelData"
@@ -776,30 +776,14 @@ export default {
topOffSetView = topOffSet
}
if (position.top > clientHeight / 2) {
if (this.type === 'user') {
labelPosition = {
// user info 距离
left: `${position.left + position.width / 3 + leftOffSet}px`,
top: `${position.top - this.heightList - topOffSetView}px`
}
} else {
labelPosition = {
left: `${position.left + position.width + leftOffSet}px`,
top: `${position.top - this.heightList - topOffSetView}px`
}
labelPosition = {
left: `${position.left + position.width + leftOffSet}px`,
top: `${position.top - this.heightList - topOffSetView}px`
}
} else {
if (this.type === 'user') {
// user info 距离
labelPosition = {
left: `${position.left + position.width / 3 + leftOffSet}px`,
top: `${position.top + topOffSet}px`
}
} else {
labelPosition = {
left: `${position.left + position.width + leftOffSet}px`,
top: `${position.top + topOffSet}px`
}
labelPosition = {
left: `${position.left + position.width + leftOffSet}px`,
top: `${position.top + topOffSet}px`
}
}
if (position.left > clientWidth / 2) {

2
nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
View File

@@ -137,7 +137,7 @@ export default {
width: 120,
sortable: 'custom'
}, {
label: this.$t('alert.config.receiver'),
label: this.$t('alert.receiver'),
prop: 'receivers',
show: false,
minWidth: 100

2
nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue
View File

@@ -109,7 +109,7 @@ export default {
show: true,
width: 150
}, {
label: this.$t('overall.enable'),
label: this.$t('overall.enabled'),
prop: 'status',
show: true,
width: 100

9
nezha-fronted/src/components/common/i18n.js
View File

@@ -3,6 +3,8 @@ import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import { get } from '@/http'
import messages from './language'
import enLocale from 'element-ui/lib/locale/lang/en' // 引入element语言包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 引入element语言包
Vue.use(VueI18n)
// 从localStorage获取语言选择。
const i18n = new VueI18n({
@@ -14,7 +16,12 @@ locale.i18n((key, value) => i18n.t(key, value)) // 兼容element
export function loadI18n (i18nData) {
if (i18nData) {
Object.keys(i18nData).forEach(lang => {
i18n.setLocaleMessage(lang, i18nData[lang])
if (lang === 'zh') {
Object.assign(i18nData[lang], { ...zhLocale })
} else if (lang === 'en') {
Object.assign(i18nData[lang], { ...enLocale })
}
i18n.setLocaleMessage(lang, { ...i18nData[lang] })
})
}
}

78
nezha-fronted/src/components/common/intro.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<el-dialog
width="100%"
height="100%"
title="内层 Dialog"
:custom-class="'is-intro'"
:show-close="false"
:visible.sync="showIntro"
append-to-body>
<div>
<div v-if="introStep==='main'">
<el-button @click="introStepChange('dc')">设置dc</el-button>
<el-button>设置asset</el-button>
<el-button>设置project</el-button>
<el-button>设置dc</el-button>
</div>
<div v-if="introStep === 'dc'" style="height: 100%">
<div v-if="step === 0" class="dc-img"></div>
<div v-else-if="step === 1" class="dc-img1"></div>
<div v-else-if="step === 2" class="dc-img2"></div>
<div v-else-if="step === 3" class="dc-img3"></div>
<div v-else>
<el-button @click="introStepChange('asset')">继续设置asset</el-button>
</div>
</div>
<div v-if="introStep === 'asset'" style="height: 100%">
<div v-if="step === 0" >设置asset</div>
<div v-if="step === 1" ></div>
<div v-if="step === 2" ></div>
<div v-if="step === 3" ></div>
<div v-if="step === 4" ></div>
</div>
<div class="intro-bottom">
<el-button @click="prev()">上一步</el-button>
<el-button @click="next()">下一步</el-button>
<el-button @click="exit()">退出</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'intro',
data: function () {
return {
showIntro: false,
introStep: 'main',
step: 0,
timer: ''
}
},
methods: {
introStepChange (type) {
this.step = 0
this.introStep = type
},
prev () {
this.step--
},
next () {
this.step++
if (this.introStep == 'dc' && this.step === 4) {
this.timer = setTimeout(() => {
this.introStepChange('main')
})
}
},
exit () {
this.showIntro = false
}
}
}
</script>
<style scoped>
</style>

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

@@ -97,5 +97,4 @@ const newen = {
},
...enLocale
}
export default newen

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

@@ -3,7 +3,7 @@
<div class="input-box">
<div class="input-box-item" style="display: none;">
<el-input v-model="lnglat" @blur="setLatlng" @change="setLatlng">
<template slot="prepend" v-if="showZoom">{{$t('config.dc.lnglat')}}</template>
<template slot="prepend" v-if="showZoom">{{$t('config.system.basic.lnglat')}}</template>
</el-input>
</div>
<div class="input-box-item" v-if="showZoom">

2
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -828,9 +828,11 @@ export default {
this.projectAlertShow = true
this.saveData = JSON.parse(JSON.stringify(data))
this.topologyInfo.name = this.obj.name
data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
resolve(data)
data = null
} else {
data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
if (data.data) {
this.topologyInfo = {
fontSize: data.data.fontSize,

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

@@ -2,7 +2,7 @@
<div v-clickoutside="{obj:endpoint,func:clickOutside}" :class="{'right-box-add-endpoint-snmp': currentModule.type && currentModule.type.toLowerCase() == 'snmp'}" class="right-box right-box-add-endpoint">
<div class="right-box__header">
<!-- begin--标题-->
<div class="header__title">{{$t("overall.createEndpoint")}}</div>
<div class="header__title">{{$t("config.system.basic.lnglatll.createEndpoint")}}</div>
<!-- end--标题-->
<div class="header__operation">
<span v-cancel="{obj: object, func: esc}"><i class="nz-icon nz-icon-close"></i></span>

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

@@ -127,7 +127,7 @@
</el-form-item>
<el-form-item
:label="$t('overall.enable')"
:label="$t('overall.enabled')"
prop="status"
class="form-item__switch"
>

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

@@ -184,7 +184,7 @@ export default {
roles: [],
mfaLevelList: [
{ value: 0, label: this.$t('profile.close') },
{ value: 1, label: this.$t('overall.enable') },
{ value: 1, label: this.$t('overall.enabled') },
{ value: 2, label: this.$t('config.user.forceEnable') }
],
languageList: [

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

@@ -100,7 +100,7 @@
</el-input>
</el-form-item>
<!--unit-->
<el-form-item v-if="showSnmpTrap" :label="$t('alert.config.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-form-item v-if="showSnmpTrap" :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable
placeholder=""
popper-class="no-style-class dc-dropdown unit-popper-class"
@@ -290,7 +290,7 @@
</el-select>
</el-form-item>
<!--receiver-->
<el-form-item :label="$t('alert.config.receiver')" prop="receiver" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-form-item :label="$t('alert.receiver')" prop="receiver" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-select
id="alert-box-input-receiver"
v-model.trim="editAlertRule.receiverShow"

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

@@ -27,7 +27,7 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('config.dc.lnglat')" prop="lnglat">
<el-form-item :label="$t('config.system.basic.lnglat')" prop="lnglat">
<div style="display: flex">
<el-input v-model="editDc.lnglat" maxlength="256" placeholder="" size="small" style="width: calc(100% - 50px);margin-right: 20px;"></el-input>
<latlng-picker

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

@@ -715,7 +715,7 @@ export default {
{ name: this.$t('project.endpoint.authTypeToken'), value: 2 }
],
endpointStateList: [
{ name: this.$t('overall.enable'), value: 1 },
{ name: this.$t('overall.enabled'), value: 1 },
{ name: this.$t('profile.close'), value: 0 }
],
configsCopyValue: '',

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

@@ -155,120 +155,121 @@
<!-- Report -->
<div>
<div class="form__sub-title">
<span>{{$t('dashboard.panel.report')}}</span>
<el-switch v-model="editPanel.param.report.enable" size="small"></el-switch>
</div>
<el-form-item class="item-report">
<div class="form__sub-title">
<span>{{$t('dashboard.panel.report')}}</span>
<el-switch v-model="editPanel.param.report.enable" size="small"></el-switch>
</div>
</el-form-item>
<div v-if="editPanel.param.report.enable">
<transition name="el-zoom-in-top" >
<div class="form-items--half-width-group">
<el-form-item
:label="$t('backup.start')"
class="form-item--half-width"
prop="param.report.schedule.stime"
:label="$t('backup.start')"
class="form-item--half-width"
prop="param.report.schedule.stime"
>
<my-date-picker align="right" class=" "
v-model="editPanel.param.report.schedule.stime"
:format="timeFormatStrToDatePickFormat(dateFormatStr)"
popper-class="panel-time-picker-popper right-box-select-top"
prefix-icon=" "
size="mini"
type="datetime">
</my-date-picker>
</el-form-item>
<my-date-picker align="right" class=" "
v-model="editPanel.param.report.schedule.stime"
:format="timeFormatStrToDatePickFormat(dateFormatStr)"
popper-class="panel-time-picker-popper right-box-select-top"
prefix-icon=" "
size="mini"
type="datetime">
</my-date-picker>
</el-form-item>
<el-form-item
:label="$t('dashboard.panel.endAt')"
class="form-item--half-width"
prop="param.report.schedule.etime"
>
<my-date-picker align="right" class=" "
v-model="editPanel.param.report.schedule.etime"
:format="timeFormatStrToDatePickFormat(dateFormatStr)"
popper-class="panel-time-picker-popper right-box-select-top"
prefix-icon=" "
size="mini"
type="datetime">
</my-date-picker>
</el-form-item>
:label="$t('dashboard.panel.endAt')"
class="form-item--half-width"
prop="param.report.schedule.etime"
>
<my-date-picker align="right" class=" "
v-model="editPanel.param.report.schedule.etime"
:format="timeFormatStrToDatePickFormat(dateFormatStr)"
popper-class="panel-time-picker-popper right-box-select-top"
prefix-icon=" "
size="mini"
type="datetime">
</my-date-picker>
</el-form-item>
<el-form-item :label='$t("dashboard.panel.period")' class="range-time" prop="param.report.range.unit">
<el-radio-group v-model="editPanel.param.report.range.unit" size="small">
<el-radio-button label="day">{{ $t("dashboard.panel.prevDay") }}</el-radio-button>
<el-radio-button label="week">{{ $t("dashboard.panel.prevWeek") }}</el-radio-button>
<el-radio-button label="month">{{ $t("dashboard.panel.prevMonth") }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
:label="$t('backup.schedule')"
prop="param.report.schedule.type"
class="form-tabs">
<el-tabs
v-model="editPanel.param.report.schedule.type"
type="card"
@tab-click="datasourceChange"
class="backups-info-tab"
>
<el-tab-pane :label="$t('backup.Daily')" name="2"></el-tab-pane>
<el-tab-pane :label="$t('backup.Weekly')" name="3"></el-tab-pane>
<el-tab-pane :label="$t('backup.Monthly')" name="4"></el-tab-pane>
</el-tabs>
</el-form-item>
<el-form-item
v-if="isShow === 2 || isShow === 3 ? true :false"
:label="$t('backup.RepeatEvery')"
prop="param.report.schedule.repeat"
class="form-day-week">
<el-input
size="small"
v-model="editPanel.param.report.schedule.repeat"
id="chart-box-title"
v-if="isShow === 3 ? true :false">
<template slot="append">{{ $t("backup.week") }}</template>
</el-input>
<el-input
size="small"
v-model="editPanel.param.report.schedule.repeat"
id="chart-box-title"
v-if="isShow === 2 ? true :false">
<template slot="append">{{ $t("backup.day") }}</template>
</el-input>
</el-form-item>
<el-form-item v-if="isShow === 3 ? true : false" :label='$t("backup.WeekOn")' class="range-time" prop="nums">
<el-checkbox-group
v-model="editPanel.param.report.schedule.nums">
<el-checkbox-button
v-for="(item,index) in week"
:label="index + 1"
:key="index"
>{{item}}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item
v-show="isShow === 4 ? true : false"
:label="$t('backup.DayOfMonth')"
prop="nums"
class="check-month_box"
id="day-of-month"
>
<el-checkbox-group v-model="editPanel.param.report.schedule.nums">
<el-checkbox-button
v-for="(item, index) in month"
:label="index === 31 ? -1 : index + 1"
:key="item"
>{{ item }}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.receivers')" class="item-receivers" prop="param.report.receivers">
<el-select v-model="editPanel.param.report.receivers" clearable multiple placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
<el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
</div>
</el-form-item>
<el-form-item
:label="$t('backup.schedule')"
prop="param.report.schedule.type"
class="form-tabs">
<el-tabs
v-model="editPanel.param.report.schedule.type"
type="card"
@tab-click="datasourceChange"
class="backups-info-tab"
>
<el-tab-pane :label="$t('backup.Daily')" name="2"></el-tab-pane>
<el-tab-pane :label="$t('backup.Weekly')" name="3"></el-tab-pane>
<el-tab-pane :label="$t('backup.Monthly')" name="4"></el-tab-pane>
</el-tabs>
</el-form-item>
<el-form-item
v-if="isShow === 2 || isShow === 3 ? true :false"
:label="$t('backup.RepeatEvery')"
prop="param.report.schedule.repeat"
class="form-day-week">
<el-input
size="small"
v-model="editPanel.param.report.schedule.repeat"
id="chart-box-title"
v-if="isShow === 3 ? true :false">
<template slot="append">{{ $t("backup.week") }}</template>
</el-input>
<el-input
size="small"
v-model="editPanel.param.report.schedule.repeat"
id="chart-box-title"
v-if="isShow === 2 ? true :false">
<template slot="append">{{ $t("backup.day") }}</template>
</el-input>
</el-form-item>
<el-form-item v-if="isShow === 3 ? true : false" :label='$t("backup.WeekOn")' class="range-time" prop="nums">
<el-checkbox-group
v-model="editPanel.param.report.schedule.nums">
<el-checkbox-button
v-for="(item,index) in week"
:label="index + 1"
:key="index"
>{{item}}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item
v-show="isShow === 4 ? true : false"
:label="$t('backup.DayOfMonth')"
prop="nums"
class="check-month_box"
id="day-of-month"
>
<el-checkbox-group v-model="editPanel.param.report.schedule.nums">
<el-checkbox-button
v-for="(item, index) in month"
:label="index === 31 ? -1 : index + 1"
:key="item"
>{{ item }}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.receivers')" class="item-receivers" prop="param.report.receivers">
<el-select v-model="editPanel.param.report.receivers" clearable multiple placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
<el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
</div>
</transition>
</div>
</div>
</div>
</el-form>
</div>
</div>
@@ -377,17 +378,6 @@ export default {
this.dateFormatStr = 'YYYY-MM-DD HH:mm:ss'
if (this.editPanel.id) {
this.isShow = Number(this.editPanel.param.report.schedule.type)
this.editPanel.param.report.schedule.type = this.editPanel.param.report.schedule.type + ''
if (this.editPanel.param.report.schedule.stime !== '') {
this.editPanel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.stime)
} else {
this.editPanel.param.report.schedule.stime = ''
}
if (this.editPanel.param.report.schedule.etime !== '') {
this.editPanel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.etime)
} else {
this.editPanel.param.report.schedule.etime = ''
}
}
},
mounted () {
@@ -496,8 +486,8 @@ export default {
type: Number(this.editPanel.param.report.schedule.type),
repeat: this.editPanel.param.report.schedule.repeat ? this.editPanel.param.report.schedule.repeat : 1,
nums: this.editPanel.param.report.schedule.nums,
stime: this.editPanel.param.report.schedule.stime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime) : this.editPanel.param.report.schedule.stime,
etime: this.editPanel.param.report.schedule.etime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime) : this.editPanel.param.report.schedule.etime
stime: this.editPanel.param.report.schedule.stime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss') : this.editPanel.param.report.schedule.stime,
etime: this.editPanel.param.report.schedule.etime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss') : this.editPanel.param.report.schedule.etime
},
receivers: this.editPanel.param.report.receivers
},
@@ -584,15 +574,21 @@ export default {
'editPanel.param.report.schedule.stime': {
deep: true,
handler (n) {
this.editPanel.param.report.schedule.stime = bus
.timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
const startTime = this.$loadsh.get(this.editPanel, 'param.report.schedule.stime', '')
if (startTime !== '') {
this.editPanel.param.report.schedule.stime = bus
.timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
}
}
},
'editPanel.param.report.schedule.etime': {
deep: true,
handler (n) {
this.editPanel.param.report.schedule.etime = bus
.timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
const endTime = this.$loadsh.get(this.editPanel, 'param.report.schedule.etime', '')
if (endTime !== '') {
this.editPanel.param.report.schedule.etime = bus
.timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
}
}
}
}

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

@@ -15,7 +15,7 @@
<el-input placeholder="" maxlength="64" show-word-limit v-model="editCredential.name" size="small" id="credential-box-input-name"></el-input>
</el-form-item>
<el-form-item :label='$t("overall.remark")' prop="remark">
<el-input placeholder="" maxlength="256" show-word-limit v-model="editCredential.remark" size="small" id="credential-box-input-remark"></el-input>
<el-input placeholder="" maxlength="256" rows="2" show-word-limit size="small" type="textarea" v-model="editCredential.remark" id="credential-box-input-remark"></el-input>
</el-form-item>
<el-form-item :label='$t("config.mib.credential.type")' prop="type">
<el-select v-model="editCredential.type" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" @change="typeChange">

2
nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
View File

@@ -243,7 +243,7 @@ export default {
width: 120,
sortable: 'custom'
}, {
label: this.$t('alert.config.receiver'),
label: this.$t('alert.receiver'),
prop: 'receivers',
show: false,
minWidth: 100

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

@@ -153,7 +153,7 @@
</nz-tooltip>
</template>
<template v-else-if="item.prop === 'enabled'">
<span v-if="scope.row[item.prop] === 1">{{$t('overall.enable')}}</span>
<span v-if="scope.row[item.prop] === 1">{{$t('overall.enabled')}}</span>
<span v-else>{{$t('profile.close')}}</span>
</template>
<span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>

32
nezha-fronted/src/components/layout/header.vue
View File

@@ -66,6 +66,7 @@
</el-dropdown>
</div>
<guide :show-dialog="showGuide" @dialogClosed="dialogClosed" @close="showGuide = false"></guide>
<intro></intro>
<!-- <span v-for="item in fontData" :key="item">-->
<!-- <span class="temp-dom" :class="`temp-dom&#45;&#45;${fontSzie}`" v-for="fontSzie in [12,13,14,15]" :key="fontSzie">{{item}}</span>-->
<!-- </span>-->
@@ -76,16 +77,19 @@
import bus from '../../libs/bus'
import { mapActions } from 'vuex'
import guide from '@/components/common/popBox/guide'
import intro from '@/components/common/intro'
export default {
name: 'Header',
components: {
guide
guide,
intro
},
data () {
return {
username: '',
name: '',
language: 'en',
showIntro: 'true',
// 顶部菜单相关
createMenu: [ // 新增按钮内容
{
@@ -228,32 +232,6 @@ export default {
this.getLinkData()
}
window.addEventListener('visibilitychange', this.testUser)
// setTimeout(() => {
// this.$intro()
// .setOptions({
// // 我给看的效果图是英⽂的（默认英⽂），这⾥是更换成中⽂
// prevLabel: '上⼀步',
// nextLabel: '下⼀步',
// skipLabel: '跳过',
// doneLabel: '完成',
// // steps步骤，可以写个⼯具类保存起来
// steps: this.steps,
// dontShowAgain: true
// })
// .oncomplete(() => {
// // 需要注意的是，这⾥⽤了箭头函数
// // 点击结束按钮后执⾏的事件
// })
// .onexit(() => {
// // 点击跳过按钮后执⾏的事件
// })
// .onbeforeexit(() => {
// // 确认完毕之后执⾏的事件
// // return confirm('Are you sure?')
// })
// // this.$intro('#personal').start() // start the guide
// // this.$intro('#personal').showHints() // show hints
// }, 1000)
},
computed: {
linkData () {

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

@@ -72,7 +72,7 @@ export default {
customTableTitle: [
{ label: this.$t('alert.config.schedEnable'), prop: 'schedule' },
{ label: this.$t('backup.backupRetention'), prop: 'retention' },
{ label: this.$t('overall.enable'), prop: 'state' }
{ label: this.$t('overall.enabled'), prop: 'state' }
],
customTableTitle2: [
{ label: this.$t('config.assetLabel.date'), prop: 'time', minwidth: 228 },

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

@@ -60,7 +60,7 @@
<el-form-item :label="$t('config.system.basic.mapConfig')" class="basic-lnglat" prop="lnglat">
<div style="display: flex">
<el-input v-model="basic.lnglat" maxlength="256" placeholder="" style="width: calc(100% - 50px); padding-right: 50px;">
<template slot="prepend">{{$t('config.dc.lnglat')}}</template>
<template slot="prepend">{{$t('config.system.basic.lnglat')}}</template>
</el-input>
<latlng-picker ref="latlngPicker" :init-data="basic.lnglat" :show-zoom="true" @lnglatChange="lnglatChange"></latlng-picker>
</div>

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

@@ -70,7 +70,7 @@
<template slot="append"><span >{{$t('config.system.basic.day')}}</span></template>
</el-input>
</el-form-item>
<el-form-item :label="$t('config.system.monitor.logs_storage_type')" prop="logs_storage_type">
<el-form-item :label="$t('config.system.monitor.metrics_storage_type')" prop="logs_storage_type">
<el-select v-model="monitor.logs_storage_type" popper-class="right-box-select-top right-public-box-dropdown-top">
<el-option :label="$t('config.system.monitor.local')" value="1"></el-option>
<el-option :label="$t('config.system.monitor.s3')" value="2"></el-option>

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

@@ -50,7 +50,7 @@
</div>
<div class="profile-left__button table-operation-items">
<button @click="profileEnable" class="footer__btn" v-if="mfaEnable != '1' && mfaLevel == 0">
<span>{{$t('overall.enable')}}</span>
<span>{{$t('overall.enabled')}}</span>
</button>
<button @click="profileDisable" class="footer__btn footer__btn--light" :class="{'footer__btn--disabled': mfaEnable == 1 || mfaLevel == 2}" v-if="mfaEnable == '1' || mfaLevel > 0" :disabled="mfaEnable == 1 || mfaLevel == 2 ">
<span>{{$t('profile.close')}}</span>

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

@@ -149,7 +149,7 @@
</el-form-item>
<el-form-item :label="$t('setup.system.federation')" prop="prometheusFederationEnabled" key="sysprometheusFederationEnabled" >
<el-select v-model="system.prometheusFederationEnabled" :placeholder="$t('el.select.placeholder')" style="width: 100%" >
<el-option :label="$t('overall.enable')" :value="1"></el-option>
<el-option :label="$t('overall.enabled')" :value="1"></el-option>
<el-option :label="$t('overall.unavailable')" :value="0"></el-option>
</el-select>
</el-form-item>

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

@@ -56,7 +56,7 @@
<el-form-item :label="$t('config.system.basic.mapConfig')" class="basic-lnglat" prop="lnglat">
<div style="display: flex">
<el-input v-model="basic.lnglat" maxlength="256" placeholder="" style="width: calc(100% - 50px); padding-right: 50px;">
<template slot="prepend">{{$t('config.dc.lnglat')}}</template>
<template slot="prepend">{{$t('config.system.basic.lnglat')}}</template>
</el-input>
<latlng-picker ref="latlngPicker" :init-data="basic.lnglat" :show-zoom="true" @lnglatChange="lnglatChange"></latlng-picker>
</div>

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

@@ -131,7 +131,7 @@ export default {
prop: 'name',
show: true
}, {
label: 'Token',
label: this.$t('apiKey.key'),
prop: 'token',
show: true
}, {

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

@@ -89,7 +89,7 @@ export default {
minWidth: 100,
show: true
}, {
label: this.$t('asset.talon.token'),
label: this.$t('apiKey.key'),
prop: 'token',
minWidth: 180,
show: true

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

@@ -125,7 +125,9 @@ export default {
}
},
data () {
const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
return {
theme,
operations: {
levels: [0, 1, 2, 3, 4, 5, 6],
descending: true
@@ -262,8 +264,10 @@ export default {
itemHeight: 4,
borderRadius: 3,
textStyle: {
padding: [0, 0, 0, 6]
}
padding: [0, 0, 0, 6],
color: this.theme == 'light' ? '#666666' : '#BEBEBE',
},
inactiveColor: this.theme == 'light' ? '#BEBEBE' : '#666666' // 字体颜色
},
series,
xAxis: {

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

@@ -23,7 +23,6 @@
v-model="cascaderValue"
v-clickoutside="closeDropdown"
v-my-loading="tempBoxShowLoading"
:loading="loading"
:options="metricOptions"
v-if="type !== 'log'"
:props="cascaderProps"
@@ -925,7 +924,7 @@ export default {
let childrenCopy = JSON.parse(JSON.stringify(children))
const findChild = this.metricOptions.find(item => item.label === data.parent)
if (childrenCopy.length > 100) {
childrenCopy = childrenCopy.splice(findChild.children.length, findChild.children.length + 101)
childrenCopy = childrenCopy.splice(findChild.children.length, 100)
findChild.children.splice(findChild.children.length - 1, 1)
findChild.children.push(...childrenCopy)
if (findChild.children.length < children.length - 1) {

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

@@ -391,30 +391,48 @@ export default {
})
},
edit (u) {
this.panel = Object.assign({}, u)
if (!this.panel.param.report) {
this.panel = {
...u,
param: {
report: {
enable: false,
range: {
unit: ''
},
schedule: {
type: '0',
repeat: 1,
nums: [],
stime: '',
etime: ''
},
receivers: []
},
chartShare: 'none'
this.$get('visual/panel?ids=' + u.id).then(res => {
if (res.code === 200) {
this.panel = res.data.list[0]
if (!this.panel.param.report) {
this.panel = {
...this.panel,
param: {
report: {
enable: false,
range: {
unit: ''
},
schedule: {
type: '0',
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.rightBox.panel.show = true
})
// this.panel = Object.assign({}, u)
},
toAdd () {
if (!this.hasButton('panel_view')) {