You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by ha...@apache.org on 2018/01/15 06:45:12 UTC
[incubator-skywalking-ui] branch feature/5.0.0 updated: Generate
input duration
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 <ha...@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" <co...@skywalking.apache.org>'].