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
This commit is contained in:
@changcode
2021-08-25 10:39:32 +08:00
parent fa237b9723 c0728a5f5a
commit 0711d2fd1c
10 changed files with 93 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1414,11 +1414,12 @@ export default {
// 设置图表的尺寸
setChartSize (item, index) {
console.log(item)
this.$nextTick(() => {
const chartBox = document.getElementById('chart-' + item.id)
if (chartBox) {
chartBox.style.width = `${(item.span / 12) * 100}%`
chartBox.style.height = `${document.getElementById('listContainer').offsetWidth / 12 * item.height}px`
chartBox.style.height = `${document.getElementById('listContainer' + item.groupId).offsetWidth / 12 * item.height}px`
}
})
},

3
nezha-fronted/src/components/common/js/tools.js
View File

@@ -399,8 +399,9 @@ export const chartResizeTool = {
const chartBlankWidth = this.chartBlankWidth
const chartBlankHeight = this.chartBlankHeight
const titleHeight = this.titleHeight
const containerWidth = data.groupId ? document.getElementById('listContainer' + data.groupId).offsetWidth - 20 : document.getElementById('listContainer').offsetWidth
const containerWidth = data.groupId ? document.getElementById('listContainer' + data.groupId).offsetWidth + 40 : document.getElementById('listContainer').offsetWidth
const step = this.stepWidth(containerWidth)
console.log(originalData,containerWidth)
const mouseOriginalX = event.clientX // 鼠标初始坐标
const mouseOriginalY = event.clientY
const originalWidth = step * data.span // 图表、阴影初始宽高

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

@@ -1403,7 +1403,15 @@ const cn = {
basicTypeFile: '路径',
basicTypeJournal: '单位',
basicTypeSyslog: '监听地址',
basicAppName: '应用名称'
basicAppName: '应用名称',
metrics: '指标',
logs: '日志',
parameter: '参数',
labels2: '标签',
relabel: 'Relabel',
auth: '作者',
basic: '基础',
pipeline: '管道'
},
metrics: {
metrics: '指标',

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

@@ -1406,7 +1406,15 @@ const en = {
basicTypeFile: 'Path',
basicTypeJournal: 'Unit',
basicTypeSyslog: 'Listen address',
basicAppName: 'App name'
basicAppName: 'App name',
metrics: 'Metrics',
logs: 'Logs',
parameter: 'Parameter',
labels2: 'Labels',
relabel: 'Relabel',
auth: 'Auth',
basic: 'Basic',
pipeline: 'Pipeline'
},
metrics: {
metrics: 'Metrics', // "指标"

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

@@ -102,13 +102,13 @@
<div class="endpoint-title">
<span class="endpoint-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="metricsShow?'':'is-active'" @click="metricsShow = !metricsShow"></i>
Metrics
{{$t('project.endpoint.metrics')}}
</span>
<el-switch v-model="editEndpoint.configs[0].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
</div>
<transition name="el-zoom-in-top">
<el-tabs v-model="activeName" v-show="metricsShow" v-if="editEndpoint.configs[0].enable">
<el-tab-pane label="Basic" name="Basic">
<el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
<!--path-->
<el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path">
<el-input id="module-box-input-path" v-model="editEndpoint.configs[0].config.metrics_path" placeholder="" size="small"></el-input>
@@ -191,7 +191,7 @@
</span>
</div>
</el-tab-pane>
<el-tab-pane label="Parameter" name="Parameter">
<el-tab-pane :label="$t('project.endpoint.parameter')" name="Parameter">
<div id="module-box-params" ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
<div v-for="(item, index) in editEndpoint.paramObj" :key="index" class="param-box-row">
<el-form-item :prop="'paramObj.' + index + '.key'" class="param-box-row-key">
@@ -216,7 +216,7 @@
</span>
</div>
</el-tab-pane>
<el-tab-pane label="Labels" name="Labels">
<el-tab-pane :label="$t('project.endpoint.labels2')" name="Labels">
<div id="module-box-labels" ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
<div v-for="(item, index) in editEndpoint.labelModule" :key="index" class="param-box-row">
<el-form-item :prop="'labelModule.' + index + '.key'" :rules="[{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" class="param-box-row-key">
@@ -235,7 +235,7 @@
</span>
</div>
</el-tab-pane>
<el-tab-pane label="Relabel" name="Relabel">
<el-tab-pane :label="$t('project.endpoint.relabel')" name="Relabel">
<div id="module-box-relabel" ref="labelBoxScrollbar" style="height: 100%; overflow: hidden;">
<div v-for="(item, index) in this.editEndpoint.configs[0].config.relabel_config" :key="index" class="">
<div class="pipeline-box">
@@ -314,7 +314,7 @@
</span>
</div>
</el-tab-pane>
<el-tab-pane v-if="editEndpoint.configs[0].config.protocol !== 'snmp'" label="Auth" name="Auth">
<el-tab-pane v-if="editEndpoint.configs[0].config.protocol !== 'snmp'" :label="$t('project.endpoint.auth')" name="Auth">
<!--authtype-->
<el-form-item :label='$t("project.endpoint.type")' prop="authtype">
<el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
@@ -342,7 +342,7 @@
<div class="endpoint-title" style="margin-top: 10px">
<span class="endpoint-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="logsShow?'':'is-active'" @click="logsShow = !logsShow"></i>
Logs
{{$t('project.endpoint.logs')}}
</span>
<el-switch v-model="editEndpoint.configs[1].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
</div>
@@ -350,7 +350,7 @@
<div v-show="logsShow" v-if="editEndpoint.configs[1].enable">
<div v-for="(item, index) in editEndpoint.configs[1].config" :key="index" style="position: relative">
<el-tabs v-model="activeNameLogs[index]" class="special-tabs" @tab-click="()=>{tabClick(index)}">
<el-tab-pane label="Basic" name="Basic">
<el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
<!--type-->
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
<el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
@@ -391,7 +391,7 @@
<el-input v-model="item.appName" :id="'module-box-basic-appName' +index" placeholder='' size="small"></el-input>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="Labels" name="Labels">
<el-tab-pane :label="$t('project.endpoint.labels2')" name="Labels">
<div id="module-box-logs-labels" ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
<div v-for="(item1, i) in item.labelModule" :key="i" class="param-box-row">
<el-form-item :prop="'configs.1.config.'+ index +'.labelModule.' + i + '.key'" :rules="[{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" class="param-box-row-key">
@@ -410,7 +410,7 @@
</span>
</div>
</el-tab-pane>
<el-tab-pane label="Pipeline" name="Pipeline">
<el-tab-pane :label="$t('project.endpoint.pipeline')" name="Pipeline">
<div v-for="(item2, index2) in item.pipeline" :key="index2">
<div class="pipeline-box">
<span class="pipeline-title">{{item2.type}}</span>

20
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -82,13 +82,13 @@
<div class="endpoint-title">
<span class="endpoint-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="metricsShow?'':'is-active'" @click="metricsShow = !metricsShow"></i>
Metrics
{{$t('project.endpoint.metrics')}}
</span>
<el-switch v-model="editModule.configs[0].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
</div>
<transition name="el-zoom-in-top">
<el-tabs v-model="activeName" v-show="metricsShow" v-if="editModule.configs[0].enable">
<el-tab-pane label="Basic" name="Basic">
<el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
<!--path-->
<el-form-item :label='$t("project.endpoint.path")' class="half-form-item" prop="configs.metrics_path">
<el-input id="module-box-input-path" v-model="editModule.configs[0].config.metrics_path" placeholder="" size="small"></el-input>
@@ -172,7 +172,7 @@
</span>
</div>
</el-tab-pane>
<el-tab-pane label="Parameter" name="Parameter">
<el-tab-pane :label="$t('project.endpoint.parameter')" name="Parameter">
<div id="module-box-params" ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
<div v-for="(item, index) in editModule.paramObj" :key="index" class="param-box-row">
<el-form-item :prop="'paramObj.' + index + '.key'" class="param-box-row-key">
@@ -197,7 +197,7 @@
</span>
</div>
</el-tab-pane>
<el-tab-pane label="Labels" name="Labels">
<el-tab-pane :label="$t('project.endpoint.labels2')" name="Labels">
<div id="module-box-labels" ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
<div v-for="(item, index) in editModule.labelModule" :key="index" class="param-box-row">
<el-form-item :prop="'labelModule.' + index + '.key'" :rules="[{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" class="param-box-row-key">
@@ -216,7 +216,7 @@
</span>
</div>
</el-tab-pane>
<el-tab-pane label="Relabel" name="Relabel">
<el-tab-pane :label="$t('project.endpoint.relabel')" name="Relabel">
<div id="module-box-relabel" ref="labelBoxScrollbar" style="height: 100%; overflow: hidden;">
<div v-for="(item, index) in this.editModule.configs[0].config.relabel_config" :key="index" class="">
<div class="pipeline-box">
@@ -295,7 +295,7 @@
</span>
</div>
</el-tab-pane>
<el-tab-pane v-if="editModule.configs[0].config.protocol !== 'snmp'" label="Auth" name="Auth">
<el-tab-pane v-if="editModule.configs[0].config.protocol !== 'snmp'" :label="$t('project.endpoint.auth')" name="Auth">
<!--authtype-->
<el-form-item :label='$t("project.endpoint.type")' prop="authtype">
<el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
@@ -323,7 +323,7 @@
<div class="endpoint-title" style="margin-top: 10px">
<span class="endpoint-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="logsShow?'':'is-active'" @click="logsShow = !logsShow"></i>
Logs
{{$t('project.endpoint.logs')}}
</span>
<el-switch v-model="editModule.configs[1].enable" active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
</div>
@@ -331,7 +331,7 @@
<div v-show="logsShow" v-if="editModule.configs[1].enable">
<div v-for="(item, index) in editModule.configs[1].config" :key="index" style="position: relative">
<el-tabs v-model="activeNameLogs[index]" class="special-tabs" @tab-click="()=>{tabClick(index)}" :ref="'logsTabs' + index">
<el-tab-pane label="Basic" name="Basic">
<el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
<!--type-->
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
<el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
@@ -372,7 +372,7 @@
<el-input v-model="item.appName" :id="'module-box-basic-appName' +index" placeholder='' size="small"></el-input>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="Labels" name="Labels">
<el-tab-pane :label="$t('project.endpoint.labels2')" name="Labels">
<div id="module-box-logs-labels" ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
<div v-for="(item1, i) in item.labelModule" :key="i" class="param-box-row">
<el-form-item :prop="'configs.1.config.'+ index +'.labelModule.' + i + '.key'" :rules="[{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" class="param-box-row-key">
@@ -391,7 +391,7 @@
</span>
</div>
</el-tab-pane>
<el-tab-pane label="Pipeline" name="Pipeline">
<el-tab-pane :label="$t('project.endpoint.pipeline')" name="Pipeline">
<div v-for="(item2, index2) in item.pipeline" :key="index2">
<div class="pipeline-box">
<span class="pipeline-title">{{item2.type}}</span>

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

@@ -119,34 +119,40 @@
</el-tooltip>
</template>
<template v-else-if="item.prop === 'state'">
<!-- <el-popover placement="right" trigger="hover" width="200" :popper-class="''" :disabled="scope.row[item.prop]<2">-->
<!-- <div>-->
<!-- <div v-html="suspendedStr(scope.row[item.prop])"></div>-->
<!-- </div>-->
<!-- <div slot="reference" style="width: 100px">-->
<!-- <div v-if="scope.row[item.prop]===0">-->
<!-- <div class="active-icon red-bg inline-block"></div> down-->
<!-- </div>-->
<!-- <div v-else-if="scope.row[item.prop]===1">-->
<!-- <div class="active-icon green-bg inline-block"></div> up-->
<!-- </div>-->
<!-- <div v-else-if="scope.row[item.prop]">-->
<!-- <div class="active-icon gray-bg inline-block"></div> suspended-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-popover>-->
<div>
<div class="state-box">
<div class="state-box-content" ><span class="state-content-text">Metrics </span><div class="active-icon red-bg inline-block" style="margin-right: 5px"></div></div>
<div class="state-box-content" ><span class="state-content-text">Logs </span><div class="active-icon red-bg inline-block" style="margin-right: 0px"></div></div>
<div class="state-box-content" ><span class="state-content-text">Dc </span><div class="active-icon red-bg inline-block" style="margin-right: 5px"></div></div>
<div class="state-box-content" ><span class="state-content-text">Endpoint </span><div class="active-icon red-bg inline-block" style="margin-right: 0px"></div></div>
<div class="state-box-content" ><span class="state-content-text">Asset </span><div class="active-icon red-bg inline-block" style="margin-right: 5px"></div></div>
<div class="state-box-content" ><span class="state-content-text">Asset </span><div class="active-icon red-bg inline-block" style="margin-right: 0px"></div></div>
<div class="state-box-content" ><span class="state-content-text">Asset </span><div class="active-icon red-bg inline-block" style="margin-right: 5px"></div></div>
<div class="state-box-content" ><span class="state-content-text">Asset </span><div class="active-icon red-bg inline-block" style="margin-right: 0px"></div></div>
<el-popover placement="left" trigger="hover" width="100" :popper-class="''" :disabled="scope.row.configs[0].state<2">
<div>
<div v-html="suspendedStr(scope.row.configs[0].state)"></div>
</div>
</div>
<span slot="reference" style="width: auto">
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
<span v-if="scope.row.configs[0].state===0">
<span class="active-icon red-bg inline-block"></span>
</span>
<span v-else-if="scope.row.configs[0].state===1">
<span class="active-icon green-bg inline-block"></span>
</span>
<span v-else-if="scope.row.configs[0].state">
<span class="active-icon gray-bg inline-block"></span>
</span>
</span>
</el-popover>
<el-popover placement="right" trigger="hover" width="100" :popper-class="''" :disabled="scope.row.configs[1].state<2">
<div>
<div v-html="suspendedStr(scope.row.configs[1].state)"></div>
</div>
<span slot="reference" style="width: auto">
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
<span v-if="scope.row.configs[1].state===0">
<span class="active-icon red-bg inline-block"></span>
</span>
<span v-else-if="scope.row.configs[1].state===1">
<span class="active-icon green-bg inline-block"></span>
</span>
<span v-else-if="scope.row.configs[1].state">
<span class="active-icon gray-bg inline-block"></span>
</span>
</span>
</el-popover>
</template>
<template v-else-if="item.prop === 'enabled'">
<span v-if="scope.row[item.prop] === 1">{{$t('project.endpoint.enable')}}</span>
@@ -245,7 +251,8 @@ export default {
label: this.$t('project.endpoint.state'),
prop: 'state',
show: true,
minWidth: 90,
minWidth: 200,
width: 200,
sortable: 'custom'
}
// {
@@ -375,6 +382,14 @@ export default {
.state-content-text{
width:64px;text-align:left;margin-right: 5px;display: inline-block
}
.colorFA901C{
color: #fa901c;
}
.endpoint-cell-left{
/*display: inline-block;*/
/*width: 70px;*/
margin-right: 5px;
}
</style>
<style>
.endpointConfigsTips{

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

@@ -63,7 +63,7 @@
</div>
<div class="profile-left__bottom-title">
<div>{{$t('profile.lastLoginTime')}}</div>
<div>{{userList.lastLoginTime}}</div>
<div>{{utcTimeToTimezoneStr(userList.lastLoginTime)}}</div>
</div>
</div>
</div>

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

@@ -394,89 +394,6 @@ export default {
collapseValue: ['1', '2'],
showTab: ['1', '2'],
logData: []
/*logData: [JSON.parse(`{
"result": [{
"labels": {
"asset": "44.53",
"endpoint": "192.168.44.53",
"filename": "/opt/cn/cn-web/logs/cn-web.log",
"job": "cn-log",
"project": "cn"
},
"level": "debug",
"message": "2021-07-23 03:39:01.842 [quartzScheduler_QuartzSchedulerThread] DEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggers",
"timestamp": 1627545412000000000,
"uuid": "1jqsjdjdf"
}, {
"labels": {
"asset": "44.53",
"endpoint": "192.168.44.53",
"filename": "/opt/cn/cn-web/logs/cn-web.log",
"job": "cn-log",
"project": "cn"
},
"level": "debug",
"message": "2021-07-23 03:39:01.842 [quartzScheduler_QuartzSchedulerThread] DEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggers",
"timestamp": 1627545412000000000,
"uuid": "1jqsjdjdf"
}, {
"labels": {
"asset": "44.53",
"endpoint": "192.168.44.53",
"filename": "/opt/cn/cn-web/logs/cn-web.log",
"job": "cn-log",
"project": "cn"
},
"level": "debug",
"message": "2021-07-22 03:39:01.842 [quartzScheduler_QuartzSchedulerThread] DEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggersDEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggersDEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggersDEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggersDEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggers",
"timestamp": 1627543512000000000,
"uuid": "1jqsjdjdg"
}, {
"labels": {
"asset": "44.53",
"endpoint": "192.168.44.53",
"filename": "/opt/cn/cn-web/logs/cn-web.log",
"job": "cn-log",
"project": "cn"
},
"level": "debug",
"message": "2021-07-21 03:39:01.842 [quartzScheduler_QuartzSchedulerThread] DEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggers",
"timestamp": 1627542512000000000,
"uuid": "1jqsjdjdh"
}, {
"labels": {
"asset": "44.53",
"endpoint": "192.168.44.53",
"filename": "/opt/cn/cn-web/logs/cn-web.log",
"job": "cn-log",
"project": "cn"
},
"level": "debug",
"message": "2021-07-20 03:39:01.842 [quartzScheduler_QuartzSchedulerThread] DEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggers",
"timestamp": 1627502512000000000,
"uuid": "1jqsjdjdi"
}
],
"resultType": "streamsFormat",
"series": [
{
"name": "debug",
"data": [[1588889221, 123], [1588889222, 10]]
}, {
"name": "info",
"data": [[1588889221, 123], [1588889222, 10]]
}, {
"name": "warn",
"data": [[1588889221, 123], [1588889222, 10]]
}, {
"name": "error",
"data": [[1588889221, 123], [1588889222, 10]]
}, {
"name": "unknown",
"data": [[1588889221, 123], [1588889222, 10]]
}
]
}`)]*/ // 日志数据
}
},
created () {
@@ -598,9 +515,9 @@ export default {
res = res.filter((r, i) => errorRowIndex.indexOf(i) === -1)
}
if (res.length > 0) {
this.logData = res.map(r => r.data)
const hasGraph = this.logData.some(d => d.resultType === 'matrix')
const hasLog = this.logData.some(d => d.resultType === 'streamsFormat')
const logData = res.map(r => r.data)
const hasGraph = logData.some(d => d.resultType === 'matrix')
const hasLog = logData.some(d => d.resultType === 'streamsFormat')
const graphTabIndex = this.showTab.indexOf('1')
if (hasGraph) {
if (graphTabIndex === -1) {
@@ -614,7 +531,7 @@ export default {
const logTabIndex = this.showTab.indexOf('2')
if (hasLog) {
if (logTabIndex === -1) {
this.showTab.push('1')
this.showTab.push('2')
}
} else {
if (logTabIndex > -1) {
@@ -623,6 +540,7 @@ export default {
}
this.$nextTick(() => {
hasGraph && this.loadLogGraph()
this.logData = logData
})
}
}).catch(e => {

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

@@ -61,7 +61,7 @@
prop="date"
width="140"
>
<template slot-scope="{ row }">{{row.date}}</template>
<template slot-scope="{ row }">{{utcTimeToTimezoneStr(row.date)}}</template>
</el-table-column>
<el-table-column
prop="message"
@@ -225,7 +225,7 @@ export default {
rotate: 0,
fontSize: 13 * window.devicePixelRatio,
formatter (value) {
return vm.$unixTimeParseToString(vm.toMillisecondTime(value) / 1000, 'hh:mm')
return vm.utcTimeToTimezoneStr(vm.$unixTimeParseToString(vm.toMillisecondTime(value) / 1000), 'hh:mm')
}
},
boundaryGap: [0, '1%']