This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch 5.0.0/beta
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/5.0.0/beta by this push:
new b94ae20 Add time range to trace page
b94ae20 is described below
commit b94ae20d16e9f1dc5c1ba624738c9e3bf869a594
Author: hanahmily <hanahm...@gmail.com>
AuthorDate: Sat Apr 28 17:18:10 2018 +0800
Add time range to trace page
---
src/layouts/BasicLayout.js | 17 ++++--
src/models/trace.js | 15 ++++-
src/routes/Trace/Trace.js | 2 -
src/routes/Trace/TraceSearch.js | 119 ++++++++++++++++++++++++----------------
src/utils/models.js | 3 +-
src/utils/time.js | 4 ++
6 files changed, 104 insertions(+), 56 deletions(-)
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 5b6e0d6..f68b215 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -88,7 +88,10 @@ class BasicLayout extends React.PureComponent {
};
}
componentWillUpdate(nextProps) {
- const { globalVariables: { duration } } = nextProps;
+ const { globalVariables: { duration }, isMonitor } = nextProps;
+ if (!isMonitor) {
+ return;
+ }
if (!duration || Object.keys(duration).length < 1) {
return;
}
@@ -214,11 +217,13 @@ class BasicLayout extends React.PureComponent {
onDurationReload={this.handleDurationReload}
onRedirect={this.handleRedirect}
/>
- <DurationPanel
- selected={dSelected}
- onSelected={this.handleDurationSelected}
- collapsed={dCollapsed}
- />
+ {isMonitor ? (
+ <DurationPanel
+ selected={dSelected}
+ onSelected={this.handleDurationSelected}
+ collapsed={dCollapsed}
+ />
+ ) : null}
<Content style={{ margin: '24px 24px 0', height: '100%' }}>
<Switch>
{
diff --git a/src/models/trace.js b/src/models/trace.js
index 48184e9..131ff01 100644
--- a/src/models/trace.js
+++ b/src/models/trace.js
@@ -15,9 +15,10 @@
* limitations under the License.
*/
-
+import moment from 'moment';
import { query } from '../services/graphql';
import { generateModal } from '../utils/models';
+import { generateDuration } from '../utils/time';
const optionsQuery = `
query ApplicationOption($duration: Duration!) {
@@ -93,6 +94,18 @@ export default generateModal({
},
showTimeline: false,
},
+ varState: {
+ values: {
+ duration: generateDuration({
+ from() {
+ return moment().subtract(15, 'minutes');
+ },
+ to() {
+ return moment();
+ },
+ }),
+ },
+ },
optionsQuery,
defaultOption: {
applicationId: {
diff --git a/src/routes/Trace/Trace.js b/src/routes/Trace/Trace.js
index 414e4b1..9986f8d 100644
--- a/src/routes/Trace/Trace.js
+++ b/src/routes/Trace/Trace.js
@@ -24,9 +24,7 @@ import TraceTimeline from './TraceTimeline';
@connect(state => ({
trace: state.trace,
- duration: state.global.duration,
loading: state.loading.models.trace,
- globalVariables: state.global.globalVariables,
}))
export default class Trace extends PureComponent {
handleGoBack = () => {
diff --git a/src/routes/Trace/TraceSearch.js b/src/routes/Trace/TraceSearch.js
index 8f6698f..8e0cdaa 100644
--- a/src/routes/Trace/TraceSearch.js
+++ b/src/routes/Trace/TraceSearch.js
@@ -16,15 +16,16 @@
*/
import React, { PureComponent } from 'react';
-import { Form, Input, Select, Button, Card, InputNumber, Row, Col, Pagination
} from 'antd';
+import { Form, Input, Select, Button, Card, InputNumber, Row, Col, Pagination,
DatePicker } from 'antd';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
import { DataSet } from '@antv/data-set';
import moment from 'moment';
import TraceList from '../../components/Trace/TraceList';
-import { Panel } from '../../components/Page';
+import { generateDuration } from '../../utils/time';
import styles from './Trace.less';
const { Option } = Select;
+const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const initPaging = {
pageNum: 1,
@@ -36,79 +37,101 @@ const initPaging = {
mapPropsToFields(props) {
const { variables: { values } } = props.trace;
const result = {};
- Object.keys(values).forEach((_) => {
+ Object.keys(values).filter(_ => _ !== 'range-time-picker').forEach((_) => {
result[_] = Form.createFormField({
value: values[_],
});
});
+ const { duration } = values;
+ if (duration) {
+ result['range-time-picker'] = Form.createFormField({
+ value: [duration.raw.start, duration.raw.end],
+ });
+ }
return result;
},
})
export default class Trace extends PureComponent {
componentDidMount() {
+ const { trace: { variables: { values } } } = this.props;
+ const { duration } = values;
this.props.dispatch({
type: 'trace/initOptions',
- payload: { variables: this.props.globalVariables },
- });
- }
- componentWillUpdate(nextProps) {
- if (nextProps.globalVariables.duration ===
this.props.globalVariables.duration) {
- return;
- }
- this.props.dispatch({
- type: 'trace/initOptions',
- payload: { variables: nextProps.globalVariables },
+ payload: { variables: { duration: duration.input } },
});
+ const condition = { ...values };
+ condition.queryDuration = values.duration.input;
+ delete condition.duration;
+ this.fetchData(condition, initPaging);
}
- handleChange = (variables) => {
- const filteredVariables = { ...variables };
- filteredVariables.queryDuration = filteredVariables.duration;
- delete filteredVariables.duration;
- if (!filteredVariables.paging) {
- filteredVariables.paging = initPaging;
- }
- this.props.dispatch({
- type: 'trace/fetchData',
- payload: { variables: { condition: filteredVariables } },
+ getDefaultDuration = () => {
+ return generateDuration({
+ from() {
+ return moment().subtract(15, 'minutes');
+ },
+ to() {
+ return moment();
+ },
});
}
handleSearch = (e) => {
if (e) {
e.preventDefault();
}
- const { dispatch, form, globalVariables: { duration } } = this.props;
+ const { form, dispatch } = this.props;
form.validateFields((err, fieldsValue) => {
if (err) return;
+ const condition = { ...fieldsValue };
+ delete condition['range-time-picker'];
+ const rangeTime = fieldsValue['range-time-picker'];
+ const duration = generateDuration({ from: () => rangeTime[0], to: () =>
rangeTime[1] });
dispatch({
type: 'trace/saveVariables',
payload: {
values: {
- ...fieldsValue,
- queryDuration: duration,
+ ...condition,
+ duration,
paging: initPaging,
},
},
});
+ this.fetchData({ ...condition, queryDuration: duration.input });
+ });
+ }
+ fetchData = (queryCondition, paging = initPaging) => {
+ this.props.dispatch({
+ type: 'trace/fetchData',
+ payload: {
+ variables: {
+ condition: {
+ ...queryCondition,
+ paging,
+ },
+ },
+ },
});
}
handleTableChange = (pagination) => {
- const { dispatch, globalVariables: { duration },
- trace: { variables: { values } } } = this.props;
+ const { dispatch, trace: { variables: { values } } } = this.props;
+ const condition = {
+ ...values,
+ paging: {
+ pageNum: pagination.current,
+ pageSize: pagination.pageSize,
+ needTotal: true,
+ },
+ };
dispatch({
type: 'trace/saveVariables',
payload: {
values: {
- ...values,
- queryDuration: duration,
- paging: {
- pageNum: pagination.current,
- pageSize: pagination.pageSize,
- needTotal: true,
- },
+ ...condition,
},
},
});
+ delete condition.duration;
+ this.fetchData({ ...condition, queryDuration: values.duration.input },
condition.paging);
}
handleShowTrace = (traceId) => {
const { dispatch } = this.props;
@@ -186,6 +209,16 @@ export default class Trace extends PureComponent {
const { trace: { variables: { options } } } = this.props;
return (
<Form onSubmit={this.handleSearch} layout="vertical">
+ <FormItem label="Time Range">
+ {getFieldDecorator('range-time-picker')(
+ <RangePicker
+ showTime
+ disabledDate={current => current && current.valueOf() >=
Date.now()}
+ format="YYYY-MM-DD HH:mm"
+ style={{ width: '100%' }}
+ />
+ )}
+ </FormItem>
<FormItem label="Application">
{getFieldDecorator('applicationId')(
<Select placeholder="All application" style={{ width: '100%' }}>
@@ -276,17 +309,11 @@ export default class Trace extends PureComponent {
</Col>
</Row>
{this.renderPage(values, queryBasicTraces.total)}
- <Panel
- variables={values}
- globalVariables={this.props.globalVariables}
- onChange={this.handleChange}
- >
- <TraceList
- loading={loading}
- data={queryBasicTraces.traces}
- onClickTraceTag={this.handleShowTrace}
- />
- </Panel>
+ <TraceList
+ loading={loading}
+ data={queryBasicTraces.traces}
+ onClickTraceTag={this.handleShowTrace}
+ />
{this.renderPage(values, queryBasicTraces.total)}
</div>
</Card>
diff --git a/src/utils/models.js b/src/utils/models.js
index 26cd596..25a064a 100644
--- a/src/utils/models.js
+++ b/src/utils/models.js
@@ -19,7 +19,7 @@
import { query as queryService } from '../services/graphql';
export function generateModal({ namespace, dataQuery, optionsQuery,
defaultOption, state = {},
- effects = {}, reducers = {}, subscriptions = {} }) {
+ varState = {}, effects = {}, reducers = {}, subscriptions = {} }) {
return {
namespace,
state: {
@@ -27,6 +27,7 @@ export function generateModal({ namespace, dataQuery,
optionsQuery, defaultOptio
values: {},
labels: {},
options: {},
+ ...varState,
},
data: state,
},
diff --git a/src/utils/time.js b/src/utils/time.js
index abe3e82..a547acb 100644
--- a/src/utils/time.js
+++ b/src/utils/time.js
@@ -38,6 +38,10 @@ export function generateDuration({ from, to }) {
range: Array.from({ length: end.diff(start, measureType) + 1 },
(v, i) => start.clone().add(i, measureType).format(displayFormat)),
},
+ raw: {
+ start,
+ end,
+ },
};
}
--
To stop receiving notification emails like this one, please contact
hanahm...@apache.org.
