This is an automated email from the ASF dual-hosted git repository. hanahmily pushed a commit to branch feature/5.0.0 in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/feature/5.0.0 by this push: new 1c5a7f0 Generate input duration 1c5a7f0 is described below commit 1c5a7f09ceb05dd57326613256faa88e39356014 Author: hanahmily <hanahm...@gmail.com> AuthorDate: Mon Jan 15 14:43:47 2018 +0800 Generate input duration --- .../src/components/Time/TimeSelect/index.js | 28 +++++++++--------- src/main/frontend/src/layouts/BasicLayout.js | 20 ++++++------- src/main/frontend/src/models/global.js | 12 ++++---- src/main/frontend/src/utils/utils.js | 33 ++++++++++++++++++++-- 4 files changed, 61 insertions(+), 32 deletions(-) diff --git a/src/main/frontend/src/components/Time/TimeSelect/index.js b/src/main/frontend/src/components/Time/TimeSelect/index.js index 041a4a5..161f5cf 100644 --- a/src/main/frontend/src/components/Time/TimeSelect/index.js +++ b/src/main/frontend/src/components/Time/TimeSelect/index.js @@ -9,17 +9,17 @@ const { RangePicker } = DatePicker; @Form.create({ mapPropsToFields(props) { - if (!props.duration) return null; + if (!props.selectedTime) return null; const result = { step: Form.createFormField({ - value: props.duration.step, + value: props.selectedTime.step, }), }; - if (props.duration.label) { + if (props.selectedTime.label) { return result; } result['range-time-picker'] = Form.createFormField({ - value: [props.duration.from(), props.duration.to()], + value: [props.selectedTime.from(), props.selectedTime.to()], }); return result; }, @@ -118,27 +118,27 @@ class TimeSelect extends PureComponent { form.validateFields((err, fieldsValue) => { if (err) return; - const duration = {}; + const selectedTime = {}; for (const key of Object.keys(fieldsValue)) { if (fieldsValue[key]) { if (key === 'range-time-picker') { - duration.from = () => fieldsValue[key][0]; - duration.to = () => fieldsValue[key][1]; + selectedTime.from = () => fieldsValue[key][0]; + selectedTime.to = () => fieldsValue[key][1]; } else { - duration[key] = fieldsValue[key]; + selectedTime[key] = fieldsValue[key]; } } } - if (duration.from && duration.to) { - this.select({ ...duration, label: null }); + if (selectedTime.from && selectedTime.to) { + this.select({ ...selectedTime, label: null }); } else { - this.select(duration); + this.select(selectedTime); } }); } - select = (newDuration) => { - const { onSelected, duration } = this.props; - onSelected({ ...duration, ...newDuration }); + select = (newSelectedTime) => { + const { onSelected, selectedTime } = this.props; + onSelected({ ...selectedTime, ...newSelectedTime }); } render() { const { isShow, form } = this.props; diff --git a/src/main/frontend/src/layouts/BasicLayout.js b/src/main/frontend/src/layouts/BasicLayout.js index 3050087..3b0aa46 100644 --- a/src/main/frontend/src/layouts/BasicLayout.js +++ b/src/main/frontend/src/layouts/BasicLayout.js @@ -224,19 +224,19 @@ class BasicLayout extends React.PureComponent { window.dispatchEvent(event); }, 600); } - handleTimeSelected = (duration) => { + handleTimeSelected = (selectedTime) => { this.props.dispatch({ type: 'global/changeSelectedTime', - payload: duration, + payload: selectedTime, }); if (this.intervalId) { clearInterval(this.intervalId); } - const { step = 0 } = duration; + const { step = 0 } = selectedTime; if (step < 1) { return; } - this.intervalId = setInterval(this.reload, duration.step); + this.intervalId = setInterval(this.reload, step); } reload = () => { this.props.dispatch({ @@ -254,14 +254,14 @@ class BasicLayout extends React.PureComponent { const menuProps = collapsed ? {} : { openKeys: this.state.openKeys, }; - const { duration = { + const { selectedTime = { from() { return moment(); }, to() { return moment(); }, - lable: 'Nan', + lable: 'NaN', } } = this.props; const timeFormat = 'YYYY-MM-DD HH:mm:ss'; @@ -304,8 +304,8 @@ class BasicLayout extends React.PureComponent { className={styles.action} onClick={this.toggleSelectTime} > - {duration.label ? duration.label : `${duration.from().format(timeFormat)} ~ ${duration.to().format(timeFormat)}`} - {duration.step > 0 ? ` Reloading every ${duration.step / 1000} seconds` : null } + {selectedTime.label ? selectedTime.label : `${selectedTime.from().format(timeFormat)} ~ ${selectedTime.to().format(timeFormat)}`} + {selectedTime.step > 0 ? ` Reloading every ${selectedTime.step / 1000} seconds` : null } </span> <span className={styles.action} onClick={this.reload}> <Icon type="reload" /> </span> <NoticeIcon @@ -375,7 +375,7 @@ class BasicLayout extends React.PureComponent { </div> </Header> <TimeSelect - duration={this.props.duration} + selectedTime={this.props.selectedTime} onSelected={this.handleTimeSelected} isShow={this.props.isShowSelectTime} /> @@ -431,6 +431,6 @@ export default connect(state => ({ collapsed: state.global.collapsed, fetchingNotices: state.global.fetchingNotices, notices: state.global.notices, - duration: state.global.duration, + selectedTime: state.global.selectedTime, isShowSelectTime: state.global.isShowSelectTime, }))(BasicLayout); diff --git a/src/main/frontend/src/models/global.js b/src/main/frontend/src/models/global.js index bb2640f..311ff7c 100644 --- a/src/main/frontend/src/models/global.js +++ b/src/main/frontend/src/models/global.js @@ -1,4 +1,6 @@ import { queryNotices } from '../services/api'; +import { generateDuration } from '../utils/utils'; + export default { namespace: 'global', @@ -62,10 +64,10 @@ export default { }; }, changeSelectedTime(state, { payload }) { - const { from, to } = payload; return { ...state, - duration: { ...payload, fromValue: from(), toValue: to() }, + selectedTime: payload, + duration: generateDuration(payload), isShowSelectTime: false, }; }, @@ -76,15 +78,13 @@ export default { }; }, reload(state) { - const { duration } = state; - const { from, to } = duration; + const { selectedTime } = state; return { ...state, - duration: { ...duration, fromValue: from(), toValue: to() }, + duration: generateDuration(selectedTime), }; }, }, - subscriptions: { setup({ history }) { // Subscribe history(url) change, trigger `load` action if pathname is `/` diff --git a/src/main/frontend/src/utils/utils.js b/src/main/frontend/src/utils/utils.js index e4060a1..4664ac7 100644 --- a/src/main/frontend/src/utils/utils.js +++ b/src/main/frontend/src/utils/utils.js @@ -1,5 +1,16 @@ import moment from 'moment'; +function createTimeMeasure(measureType, step, format) { + return { + measureType, step, format, + }; +} + +function getMeasureList() { + return [createTimeMeasure('months', 'MONTH', 'YYYY-MM'), createTimeMeasure('days', 'DAY', 'YYYY-MM-DD'), + createTimeMeasure('hours', 'HOUR', ' YYYY-MM-DD HH'), createTimeMeasure('minutes', 'MINUTE', ' YYYY-MM-DD HHmm'), createTimeMeasure('seconds', 'SECOND', ' YYYY-MM-DD HHmmss')]; +} + export function fixedZero(val) { return val * 1 < 10 ? `0${val}` : val; } @@ -93,6 +104,24 @@ export function digitUppercase(n) { return s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整'); } -export function timeRange(duration) { - return Array(15).fill(0).map((v, i) => moment().subtract(i, 'minutes').format('YYYY-MM-DD HH:mm:ss')); +export function timeRange({ display }) { + return display.range; +} + +export function generateDuration({ from, to }) { + const start = from(); + const end = to(); + const { measureType, step, format } = getMeasureList() + .find(measure => (end.diff(start, measure.measureType) > 1)); + return { + input: { + start: start.format(format), + end: end.format(format), + step, + }, + display: { + range: Array.from({ length: end.diff(start, measureType) + 1 }, + (v, i) => start.clone().add(i, measureType).format(format)), + }, + }; } -- To stop receiving notification emails like this one, please contact ['"commits@skywalking.apache.org" <commits@skywalking.apache.org>'].