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

NEZ-1787 feat： 时间选择器组件 优化

Browse Source
This commit is contained in:
zhangyu
2022-04-24 18:02:26 +08:00
parent fe6b1ba5cf
commit 9914919747
8 changed files with 125 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nezha-fronted/config/index.js
View File

@@ -19,10 +19,10 @@ module.exports = {
} }
}, },
// Various Dev Server settings // Various Dev Server settings
// host: '0.0.0.0', // can be overwritten by process.env.HOST host: '0.0.0.0', // can be overwritten by process.env.HOST
host: '127.0.0.1', // can be overwritten by process.env.HOST // host: '127.0.0.1', // can be overwritten by process.env.HOST
port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true, autoOpenBrowser: false,
errorOverlay: true, errorOverlay: true,
notifyOnErrors: true, notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

58
nezha-fronted/src/assets/css/components/common/timePicker.scss
View File

@@ -166,7 +166,7 @@
.date-range-panel { .date-range-panel {
// height: 460px; // height: 460px;
width: 500px; width: 500px;
background: #FFFFFF; background: $--background-color-empty;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
position: absolute; position: absolute;
right: 4%; right: 4%;
@@ -179,26 +179,58 @@
flex-direction: column; flex-direction: column;
.content-title { .content-title {
font-size: 14px; font-size: 14px;
color: #666666; color: $--color-text-regular;
font-weight: 400; font-weight: 400;
} }
.content-input { .content-input {
width: 230px; width: 230px;
display: flex;
position: relative;
align-items: center;
margin-bottom: 12px;
.el-input{ .el-input{
width: auto; width: auto;
flex: 1;
.el-input__inner{ .el-input__inner{
border: 1px solid #E7EAED; border: 1px solid $--border-color-light;
border-radius: 2px; border-radius: 2px 0px 0px 2px;
width: 230px; width: 230px;
padding: 0 8px; padding: 0 8px;
height: 30px; //height: 30px;
line-height: 30px; //line-height: 30px;
margin-bottom: 12px;
outline: #169AFF; outline: #169AFF;
} }
} }
.input-hint{
display: none;
}
.nz-icon-box{
height: 28px;
box-sizing: border-box;
background: $--background-color-disabled;
line-height: 28px;
padding: 0 4px;
border-radius: 0 2px 2px 0;
}
&.input-error{
.el-input{
.el-input__inner{
border: 1px solid $--color-danger;
outline: $--color-danger;
}
}
.input-hint{
display: block;
color: $--color-danger;
position: absolute;
left: 0;
font-size: 14px;
bottom: -25px;
}
}
} }
.date-range-history { .date-range-history {
@@ -236,22 +268,22 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
color: #333333; color: $--color-text-primary;
font-weight: 400; font-weight: 400;
padding: 0 10px; padding: 0 10px;
cursor: pointer; cursor: pointer;
} }
li:hover { li:hover {
background: #F5F5F5; background: $--alert-rule-background-color;
color: #333333; color: $--color-text-primary;
} }
li.activeLi :hover { li.activeLi :hover {
background: #F5F5F5; background: $--alert-rule-background-color;
color: $--color-primary !important; color: $--color-primary !important;
} }
li.activeLi { li.activeLi {
background: #F5F5F5; background: $--alert-rule-background-color;
color: $--color-primary !important; color: $--color-primary !important;
font-weight: 400; font-weight: 400;
@@ -264,4 +296,4 @@
} }
} }
} }

4
nezha-fronted/src/assets/css/themes/theme-light.scss
View File

@@ -32,7 +32,7 @@ $--left-menu-background-color-hover: $--left-menu-background-color-active;
/* 3.字色 */ /* 3.字色 */
// 标题字色(覆盖element-ui内置变量) // 标题字色(覆盖element-ui内置变量)
$--color-text-primary: #333332; $--color-text-primary: #333333;
// 普通字色(覆盖element-ui内置变量) // 普通字色(覆盖element-ui内置变量)
$--color-text-regular: #666665; $--color-text-regular: #666665;
// 次要字色(覆盖element-ui内置变量) // 次要字色(覆盖element-ui内置变量)
@@ -221,7 +221,7 @@ $--switch-background-color: #dcdfe6;
$--project-input-background-color: $--color-text-disabled; $--project-input-background-color: $--color-text-disabled;
/* alert rule */ /* alert rule */
$--alert-rule-background-color: #f4f4f5; $--alert-rule-background-color: #f5f5f5;
$--alert-rule-color: $--overview-icon-color; $--alert-rule-color: $--overview-icon-color;
/* webSSH */ /* webSSH */

8
nezha-fronted/src/components/chart/chartMixin.js
View File

@@ -117,7 +117,7 @@ export default {
// 处理legend别名 // 处理legend别名
alias = alias + this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend) alias = alias + this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend)
if (!alias) { if (!alias) {
alias = chartInfo.elements[expressionIndex].expression alias = chartInfo.elements[expressionIndex].expression || ''
} }
if (alias == 'Previous ') { if (alias == 'Previous ') {
alias += chartInfo.elements[expressionIndex].expression alias += chartInfo.elements[expressionIndex].expression
@@ -148,9 +148,9 @@ export default {
if (/\{\{.+\}\}/.test(aliasExpression)) { if (/\{\{.+\}\}/.test(aliasExpression)) {
const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) { const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2) const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
// if (!legend) { if (!legend) {
// return label return label
// } }
const reg = new RegExp(label + '=".+?"') const reg = new RegExp(label + '=".+?"')
let value = null let value = null
if (reg.test(legend)) { if (reg.test(legend)) {

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

@@ -494,7 +494,6 @@ export default {
if (this.$refs.pickTime) { if (this.$refs.pickTime) {
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
console.log(nowTimeType, this.nowTimeType)
this.setSearchTime(nowTimeType.type, nowTimeType.value) this.setSearchTime(nowTimeType.type, nowTimeType.value)
this.filter.start_time = bus.timeFormate(this.searchTime[0]) this.filter.start_time = bus.timeFormate(this.searchTime[0])
this.filter.end_time = bus.timeFormate(this.searchTime[1]) this.filter.end_time = bus.timeFormate(this.searchTime[1])
@@ -520,7 +519,6 @@ export default {
this.$set(this.searchTime, 0, startTime) this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime) this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'h') this.$set(this.searchTime, 2, val + 'h')
console.log(this.searchTime)
} else if (type === 'date') { } else if (type === 'date') {
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val)) const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val))
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime()))) const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))

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

@@ -221,3 +221,10 @@ export function sysObjectIdInput (rule, value, callback) {
export function longAndLat (rule, value, callback) { // 校验经纬度 export function longAndLat (rule, value, callback) { // 校验经纬度
} }
export function dataValidate () {
// const time = '([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$'
// const YMD = '/((([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29))'
// const DMY = '/((^(3[01]|[12][0-9]|0[1-9])(\\/)(10|12|0[13578])(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(30|[12][0-9]|0[1-9])(\\/)(11|0[469])(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(2[0-8]|1[0-9]|0[1-9])(\\/)(02)(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(29)(\\/)(02)(\\/)([2468][048]00)$)|(^(29)(\\/)(02)(\\/)([3579][26]00)$)|(^(29)(\\/)(02)(\\/)([1][89][0][48])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][0][48])$)|(^(29)(\\/)(02)(\\/)([1][89][2468][048])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][2468][048])$)|(^(29)(\\/)(02)(\\/)([1][89][13579][26])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][13579][26])$))/'
// const MDY =
}

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

@@ -46,22 +46,31 @@
size="mini" size="mini"
ref="calendar" ref="calendar"
:format="timeFormatStrToDatePickFormat(timeFormatMain)" :format="timeFormatStrToDatePickFormat(timeFormatMain)"
@change="dateChange(whoChoose)" :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
v-model="searchTimeValue" @change="dateChange"
type="date" :default-time="['00:00:00', '23:59:59']"
v-model="oldSearchTime"
type="daterange"
popper-class="panel-time-picker-popper time-picker-popover__select-top" popper-class="panel-time-picker-popper time-picker-popover__select-top"
align="right" align="right"
> >
</my-date-picker> </my-date-picker>
<!-- @change="dateChange(whoChoose)"-->
<div class="content-title">{{$t('dashboard.panel.chartForm.valMapping.from')}}</div> <div class="content-title">{{$t('dashboard.panel.chartForm.valMapping.from')}}</div>
<div @click="myDatePickerShow('start')" tabindex="1" class="content-input"> <div tabindex="1" class="content-input" :class="oldSearchTimeError[0] ? 'input-error' : ''">
<el-input v-model="searchTime[0]" @change="dateChange('start',searchTime[0])"> </el-input> <el-input @focus="searchTimeValue = oldSearchTime[0]" v-model="oldSearchTime[0]" @change="dateInputChange('start',oldSearchTime[0])" size="mini"> </el-input>
<div @click="myDatePickerShow()" class="nz-icon-box">
<i class="nz-icon nz-icon-table1"/>
</div>
<div class="input-hint">{{inputError}}</div>
</div> </div>
<div class="content-title">{{$t('dashboard.panel.chartForm.valMapping.to')}}</div> <div class="content-title">{{$t('dashboard.panel.chartForm.valMapping.to')}}</div>
<div @click="myDatePickerShow('end')" tabindex="2" class="content-input"> <div tabindex="2" class="content-input" :class="oldSearchTimeError[1] ? 'input-error' : ''">
<el-input v-model="searchTime[1]" @change="dateChange('end',searchTime[1])"> </el-input> <el-input @focus="searchTimeValue = oldSearchTime[1]" v-model="oldSearchTime[1]" @change="dateInputChange('end',oldSearchTime[1])" size="mini"> </el-input>
<div @click="myDatePickerShow()" class="nz-icon-box">
<i class="nz-icon nz-icon-table1"/>
</div>
<div class="input-hint">{{$t('date.formatError')}}</div>
</div> </div>
<div> <div>
<el-button <el-button
@@ -132,6 +141,7 @@
<script> <script>
import bus from '@/libs/bus' import bus from '@/libs/bus'
import moment from 'moment-timezone'
export default { export default {
name: 'timePicker', name: 'timePicker',
@@ -159,6 +169,13 @@ export default {
bus.timeFormate(bus.getOffsetTimezoneData(-1)), bus.timeFormate(bus.getOffsetTimezoneData(-1)),
bus.timeFormate(bus.getOffsetTimezoneData()) bus.timeFormate(bus.getOffsetTimezoneData())
], ],
oldSearchTime: [bus.timeFormate(bus.getOffsetTimezoneData(-1)),
bus.timeFormate(bus.getOffsetTimezoneData())],
oldSearchTimeError: {
0: false,
1: false
},
inputError: this.$t('date.formatError'),
showTime: { showTime: {
id: 4, id: 4,
text: this.$t('dashboard.panel.lastOneHour') text: this.$t('dashboard.panel.lastOneHour')
@@ -253,6 +270,9 @@ export default {
this.getItem() this.getItem()
this.getUtcStr() this.getUtcStr()
this.getRangeHistoryArr() this.getRangeHistoryArr()
const timeTemp = this.$loadsh.cloneDeep(this.searchTime)
this.oldSearchTime[0] = timeTemp[0]
this.oldSearchTime[1] = timeTemp[1]
}, },
methods: { methods: {
changeDropdownFlag () { changeDropdownFlag () {
@@ -268,8 +288,8 @@ export default {
this.utc = localStorage.getItem('timezoneOffset') this.utc = localStorage.getItem('timezoneOffset')
}, },
myDatePickerShow (item) { myDatePickerShow (item) {
this.whoChoose = item // this.whoChoose = item
this.isCustom = true // this.isCustom = true
this.$refs.calendar.focus() this.$refs.calendar.focus()
this.$refs.calendar.pickerVisible = true this.$refs.calendar.pickerVisible = true
if (document.getElementById('viewGraphDialog')) { if (document.getElementById('viewGraphDialog')) {
@@ -308,9 +328,13 @@ export default {
this.utcStr = str + this.utc this.utcStr = str + this.utc
}, },
timeRange (item) { timeRange (item) {
if (this.oldSearchTimeError[0] || this.oldSearchTimeError[1]) {
return
}
this.searchTime = this.$loadsh.cloneDeep(this.oldSearchTime)
this.showTime = this.nowTimeType = { this.showTime = this.nowTimeType = {
id: 0, id: 0,
text: this.$t('dashboard.panel.customTimeRange'), text: this.searchTime[0] + ' ' + this.$t('dashboard.panel.to') + ' ' + this.searchTime[1],
value: -1 value: -1
} }
this.isCustom = true this.isCustom = true
@@ -329,49 +353,42 @@ export default {
this.$emit('change', this.searchTime) this.$emit('change', this.searchTime)
}, },
showDropdown () { showDropdown () {
const timeTemp = this.$loadsh.cloneDeep(this.searchTime)
this.oldSearchTime[0] = timeTemp[0]
this.oldSearchTime[1] = timeTemp[1]
this.oldSearchTimeError[0] = false
this.oldSearchTimeError[1] = false
this.dropdownFlag = !this.dropdownFlag this.dropdownFlag = !this.dropdownFlag
}, },
dateChange (type, v) { dateInputChange (type, v) {
if (type == 'start') { if (type == 'start') {
if (!v) { const dateValidate = moment(this.oldSearchTime[0], this.timeFormatMain).isValid()
const startTime = bus.timeFormate(this.searchTimeValue).trim().split(' ')[0] + ' ' if (!dateValidate) {
this.$set(this.searchTime, 0, startTime) this.inputError = this.$t('date.formatError')
this.oldSearchTimeError[0] = true
} else { } else {
const str = v.trim().split(' ')[1] this.oldSearchTimeError[0] = false
const reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/ this.oldSearchTime[0] = bus.timeFormate(this.oldSearchTime[0])
if (reg.test(str)) {
const startTime = bus.timeFormate(v)
this.$set(this.searchTime, 0, startTime)
} else {
this.$set(this.searchTime, 0, '')
}
} }
} else if (type == 'end') { } else if (type == 'end') {
if (!v) { const dateValidate = moment(this.oldSearchTime[1], this.timeFormatMain).isValid()
const endTime = bus.timeFormate(this.searchTimeValue).trim().split(' ')[0] + ' ' if (!dateValidate) {
this.$set(this.searchTime, 1, endTime) this.oldSearchTimeError[1] = true
} else { } else {
const str = v.trim().split(' ')[1] this.oldSearchTimeError[1] = false
const reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/ // this.$set(this.oldSearchTime, 1, bus.timeFormate(this.oldSearchTime[1]))
if (reg.test(str)) { this.oldSearchTime[1] = bus.timeFormate(this.oldSearchTime[1])
const endTime = bus.timeFormate(v)
this.$set(this.searchTime, 1, endTime)
} else {
this.$set(this.searchTime, 1, '')
}
} }
} }
this.searchTime[2] = '' console.log(moment(this.oldSearchTime[0], this.timeFormatMain).isValid(), moment(this.oldSearchTime[1], this.timeFormatMain).isValid(), !moment(this.oldSearchTimeError[0]).isBefore(this.oldSearchTime[1]))
this.$set(this.showTime, 'id', 0) if (moment(this.oldSearchTime[0], this.timeFormatMain).isValid() && moment(this.oldSearchTime[1], this.timeFormatMain).isValid() && !moment(this.oldSearchTimeError[0]).isBefore(this.oldSearchTime[1])) {
this.$set( this.oldSearchTimeError[0] = true
this.showTime, this.inputError = this.$t('date.fromGreaterTo')
'text', }
this.searchTime[0] + },
' ' + dateChange () {
this.$t('dashboard.panel.to') + this.oldSearchTimeError[0] = false
' ' + this.oldSearchTimeError[1] = false
this.searchTime[1]
)
}, },
setCustomTime (timeGroup, timeRange) { setCustomTime (timeGroup, timeRange) {
if (timeGroup) { if (timeGroup) {

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

@@ -552,7 +552,6 @@ export default {
obj.queryHistory = [] obj.queryHistory = []
obj.promQL = function (context) { obj.promQL = function (context) {
return Promise.resolve(this.complete.promQL(context)).then((res) => { return Promise.resolve(this.complete.promQL(context)).then((res) => {
console.log(res)
const { state, pos } = context const { state, pos } = context
const tree = syntaxTree(state).resolve(pos, -1) const tree = syntaxTree(state).resolve(pos, -1)
const start = res != null ? res.from : tree.from const start = res != null ? res.from : tree.from
@@ -687,7 +686,6 @@ export default {
}, },
fetchFn (a, b) { fetchFn (a, b) {
const params = {} const params = {}
console.log(b)
if (b) { if (b) {
params['match[]'] = b.body.get('match[]') params['match[]'] = b.body.get('match[]')
params.start = b.body.get('start') params.start = b.body.get('start')
@@ -699,7 +697,7 @@ export default {
redirect: 'follow', redirect: 'follow',
headers: { headers: {
Authorization: localStorage.getItem('nz-token'), Authorization: localStorage.getItem('nz-token'),
'content-type':'application/x-www-form-urlencoded' 'content-type': 'application/x-www-form-urlencoded'
} }
}) })
} }
@@ -1063,7 +1061,6 @@ export default {
// elInput.selectionEnd = startPos + insertTxt.length // elInput.selectionEnd = startPos + insertTxt.length
this.expressionList[this.index] = insertTxt this.expressionList[this.index] = insertTxt
this.codeMirrorValue[this.index] = insertTxt this.codeMirrorValue[this.index] = insertTxt
console.log('inserttext', this.codeMirrorValue[this.index])
this.initCodeMirror() this.initCodeMirror()
} }
/* setMsg:function(){ /* setMsg:function(){