You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by GitBox <gi...@apache.org> on 2018/11/26 05:54:50 UTC
[GitHub] hanahmily closed pull request #200: Update: fix the CI issues
hanahmily closed pull request #200: Update: fix the CI issues
URL: https://github.com/apache/incubator-skywalking-ui/pull/200
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/src/components/Authorized/PromiseRender.js b/src/components/Authorized/PromiseRender.js
index 3d2794f..5034a99 100644
--- a/src/components/Authorized/PromiseRender.js
+++ b/src/components/Authorized/PromiseRender.js
@@ -25,21 +25,23 @@ export default class PromiseRender extends React.PureComponent {
};
async componentDidMount() {
- this.props.promise
+ const {...propsData} = this.props;
+ propsData.promise
.then(() => {
this.setState({
- component: this.props.ok,
+ component: propsData.ok,
});
})
.catch(() => {
this.setState({
- component: this.props.error,
+ component: propsData.error,
});
});
}
render() {
- const C = this.state.component;
+ const {...stateData} = this.state;
+ const C = stateData.component;
return C ? (
<C {...this.props} />
) : (
diff --git a/src/components/Charts/Area/index.js b/src/components/Charts/Area/index.js
index 01c62a1..98107c4 100644
--- a/src/components/Charts/Area/index.js
+++ b/src/components/Charts/Area/index.js
@@ -42,6 +42,14 @@ class Area extends Component {
window.removeEventListener('resize', this.resize);
}
+ handleRoot = n => {
+ this.root = n;
+ };
+
+ handleRef = n => {
+ this.node = n;
+ };
+
@Bind()
@Debounce(200)
resize() {
@@ -67,15 +75,7 @@ class Area extends Component {
});
}
}
-
- handleRoot = n => {
- this.root = n;
- };
-
- handleRef = n => {
- this.node = n;
- };
-
+
render() {
const { height, title, forceFit = true, data, color, limitColor } = this.props;
diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js
index 645a36d..7456ea0 100644
--- a/src/components/Charts/Bar/index.js
+++ b/src/components/Charts/Bar/index.js
@@ -36,6 +36,14 @@ class Bar extends Component {
window.removeEventListener('resize', this.resize);
}
+ handleRoot = n => {
+ this.root = n;
+ };
+
+ handleRef = n => {
+ this.node = n;
+ };
+
@Bind()
@Debounce(400)
resize() {
@@ -63,14 +71,6 @@ class Bar extends Component {
}
}
- handleRoot = n => {
- this.root = n;
- };
-
- handleRef = n => {
- this.node = n;
- };
-
render() {
const {
height,
diff --git a/src/components/Charts/ChartCard/index.js b/src/components/Charts/ChartCard/index.js
index 2801d92..0ef484a 100644
--- a/src/components/Charts/ChartCard/index.js
+++ b/src/components/Charts/ChartCard/index.js
@@ -45,7 +45,7 @@ const ChartCard = ({
</div>
{// eslint-disable-next-line
total !== undefined && (
- <div className={styles.total} dangerouslySetInnerHTML={{ __html: total }} />
+ <div className={styles.total}>{total}</div>
)}
</div>
</div>
diff --git a/src/components/Charts/HeatMap/index.js b/src/components/Charts/HeatMap/index.js
index e36e716..a83c3c7 100644
--- a/src/components/Charts/HeatMap/index.js
+++ b/src/components/Charts/HeatMap/index.js
@@ -56,6 +56,7 @@ class HeatMap extends Component {
reducedData.map((count, i) => ({ datetime, responseTime: i, count }));
handlePlotClick = (dtStart, dtEnd, responseTime) => {
+ const {...propsData} = this.props
const removedUnit = responseTime.slice(0, responseTime.indexOf('ms'));
let min;
let max;
@@ -66,7 +67,7 @@ class HeatMap extends Component {
min = value - 100 < 0 ? 0 : value - 100;
max = value;
}
- this.props.onClick({ start: dtStart, end: dtEnd }, { min, max });
+ propsData.onClick({ start: dtStart, end: dtEnd }, { min, max });
};
render() {
diff --git a/src/components/Charts/Line/index.js b/src/components/Charts/Line/index.js
index 9ac23da..54a985e 100644
--- a/src/components/Charts/Line/index.js
+++ b/src/components/Charts/Line/index.js
@@ -38,6 +38,14 @@ class Line extends Component {
window.removeEventListener('resize', this.resize);
}
+ handleRoot = n => {
+ this.root = n;
+ };
+
+ handleRef = n => {
+ this.node = n;
+ };
+
@Bind()
@Debounce(200)
resize() {
@@ -64,14 +72,6 @@ class Line extends Component {
}
}
- handleRoot = n => {
- this.root = n;
- };
-
- handleRef = n => {
- this.node = n;
- };
-
render() {
const { height, title, forceFit = true, data } = this.props;
diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index 8c3938e..44c2c5a 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -42,12 +42,14 @@ export default class Pie extends Component {
}
componentWillReceiveProps(nextProps) {
- if (this.props.data !== nextProps.data) {
+ const {...propsData} = this.props;
+ const {...stateData} = this.state;
+ if (propsData.data !== nextProps.data) {
// because of charts data create when rendered
// so there is a trick for get rendered time
this.setState(
{
- legendData: [...this.state.legendData],
+ legendData: [...stateData.legendData],
},
() => {
this.getLengendData();
@@ -84,28 +86,6 @@ export default class Pie extends Component {
});
};
- // for window resize auto responsive legend
- @Bind()
- @Debounce(300)
- resize() {
- const { hasLegend } = this.props;
- if (!hasLegend || !this.root) {
- window.removeEventListener('resize', this.resize);
- return;
- }
- if (this.root.parentNode.clientWidth <= 380) {
- if (!this.state.legendBlock) {
- this.setState({
- legendBlock: true,
- });
- }
- } else if (this.state.legendBlock) {
- this.setState({
- legendBlock: false,
- });
- }
- }
-
handleRoot = n => {
this.root = n;
};
@@ -128,6 +108,29 @@ export default class Pie extends Component {
});
};
+// for window resize auto responsive legend
+@Bind()
+@Debounce(300)
+resize() {
+ const {...stateData} = this.state;
+ const { hasLegend } = this.props;
+ if (!hasLegend || !this.root) {
+ window.removeEventListener('resize', this.resize);
+ return;
+ }
+ if (this.root.parentNode.clientWidth <= 380) {
+ if (!stateData.legendBlock) {
+ this.setState({
+ legendBlock: true,
+ });
+ }
+ } else if (stateData.legendBlock) {
+ this.setState({
+ legendBlock: false,
+ });
+ }
+}
+
render() {
const {
valueFormat,
@@ -151,11 +154,11 @@ export default class Pie extends Component {
[styles.hasLegend]: !!hasLegend,
[styles.legendBlock]: legendBlock,
});
-
+ const {...propsData} = this.props;
const defaultColors = colors;
- let data = this.props.data || [];
- let selected = this.props.selected || true;
- let tooltip = this.props.tooltip || true;
+ let data = propsData.data || [];
+ let selected = propsData.selected || true;
+ let tooltip = propsData.tooltip || true;
let formatColor;
const scale = {
diff --git a/src/components/Charts/StackBar/index.js b/src/components/Charts/StackBar/index.js
index bdec13a..0180b0f 100644
--- a/src/components/Charts/StackBar/index.js
+++ b/src/components/Charts/StackBar/index.js
@@ -42,6 +42,14 @@ class Area extends Component {
window.removeEventListener('resize', this.resize);
}
+ handleRoot = n => {
+ this.root = n;
+ };
+
+ handleRef = n => {
+ this.node = n;
+ };
+
@Bind()
@Debounce(200)
resize() {
@@ -68,14 +76,6 @@ class Area extends Component {
}
}
- handleRoot = n => {
- this.root = n;
- };
-
- handleRef = n => {
- this.node = n;
- };
-
render() {
const { height, title, forceFit = true, data, color, limitColor } = this.props;
diff --git a/src/components/Duration/Icon/index.js b/src/components/Duration/Icon/index.js
index 4d4bbd7..999350b 100644
--- a/src/components/Duration/Icon/index.js
+++ b/src/components/Duration/Icon/index.js
@@ -35,8 +35,9 @@ export default class DurationIcon extends PureComponent {
};
renderLoad() {
+ const {...stateData} = this.state;
const { loading, className, onReload } = this.props;
- if (!loading && this.state.innerLoading < 1) {
+ if (!loading && stateData.innerLoading < 1) {
this.state.innerLoading = -1;
return (
<span className={className} onClick={onReload}>
@@ -45,7 +46,7 @@ export default class DurationIcon extends PureComponent {
</span>
);
}
- if (this.state.innerLoading < 0) {
+ if (stateData.innerLoading < 0) {
this.state.innerLoading = 1;
lodash.delay(() => this.setState({ innerLoading: 0 }), 1000);
}
diff --git a/src/components/Duration/Panel/currentTimePanel.js b/src/components/Duration/Panel/currentTimePanel.js
index e063776..93b0e09 100644
--- a/src/components/Duration/Panel/currentTimePanel.js
+++ b/src/components/Duration/Panel/currentTimePanel.js
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
class CurrentTimePanel extends PureComponent {
state = {
diff --git a/src/components/Duration/Panel/index.js b/src/components/Duration/Panel/index.js
index a8a7565..56f20a3 100644
--- a/src/components/Duration/Panel/index.js
+++ b/src/components/Duration/Panel/index.js
@@ -178,15 +178,16 @@ class DurationPanel extends PureComponent {
};
handleTimeZone = (zone) => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'global/changeTimezone',
payload: zone,
});
- this.props.dispatch({
+ propsData.dispatch({
type: 'trace/changeTimezone',
payload: zone,
});
- this.select(this.props.selected);
+ this.select(propsData.selected);
}
select = newSelectedTime => {
diff --git a/src/components/Login/LoginItem.js b/src/components/Login/LoginItem.js
index 52d5a4a..364a71c 100644
--- a/src/components/Login/LoginItem.js
+++ b/src/components/Login/LoginItem.js
@@ -40,8 +40,10 @@ function generator({ defaultProps, defaultRules, type }) {
}
componentDidMount() {
- if (this.context.updateActive) {
- this.context.updateActive(this.props.name);
+ const {...contextData} = this.context;
+ const {...propsData} = this.props;
+ if (contextData.updateActive) {
+ contextData.updateActive(propsData.name);
}
}
@@ -51,9 +53,10 @@ function generator({ defaultProps, defaultRules, type }) {
onGetCaptcha = () => {
let count = 59;
+ const {...propsData} = this.props;
this.setState({ count });
- if (this.props.onGetCaptcha) {
- this.props.onGetCaptcha();
+ if (propsData.onGetCaptcha) {
+ propsData.onGetCaptcha();
}
this.interval = setInterval(() => {
count -= 1;
@@ -65,7 +68,8 @@ function generator({ defaultProps, defaultRules, type }) {
};
render() {
- const { getFieldDecorator } = this.context.form;
+ const {...contextData} = this.context;
+ const { getFieldDecorator } = contextData.form;
const options = {};
let otherProps = {};
const { onChange, defaultValue, rules, name, ...restProps } = this.props;
diff --git a/src/components/Login/LoginTab.js b/src/components/Login/LoginTab.js
index 3d56eb7..a655339 100644
--- a/src/components/Login/LoginTab.js
+++ b/src/components/Login/LoginTab.js
@@ -42,8 +42,9 @@ export default class LoginTab extends Component {
}
componentWillMount() {
- if (this.context.tabUtil) {
- this.context.tabUtil.addTab(this.uniqueId);
+ const {...contextData} = this.context;
+ if (contextData.tabUtil) {
+ contextData.tabUtil.addTab(this.uniqueId);
}
}
diff --git a/src/components/Login/index.js b/src/components/Login/index.js
index 6e765f9..938b0d6 100644
--- a/src/components/Login/index.js
+++ b/src/components/Login/index.js
@@ -46,26 +46,28 @@ class Login extends Component {
};
state = {
- type: this.props.defaultActiveKey,
+ type: '',
tabs: [],
active: {},
};
getChildContext() {
+ const {...stateData} = this.state;
+ const {...propsData} = this.props;
return {
tabUtil: {
addTab: (id) => {
this.setState({
- tabs: [...this.state.tabs, id],
+ tabs: [...stateData.tabs, id],
});
},
removeTab: (id) => {
this.setState({
- tabs: this.state.tabs.filter(currentId => currentId !== id),
+ tabs: stateData.tabs.filter(currentId => currentId !== id),
});
},
},
- form: this.props.form,
+ form: propsData.form,
updateActive: (activeItem) => {
const { type, active } = this.state;
if (active[type]) {
@@ -80,19 +82,26 @@ class Login extends Component {
};
}
+ componentWillMount() {
+ const {...propsData} = this.props;
+ this.setState({ type: propsData.defaultActiveKey });
+ };
+
onSwitch = (type) => {
+ const {...propsData} = this.props;
this.setState({
type,
});
- this.props.onTabChange(type);
+ propsData.onTabChange(type);
};
handleSubmit = (e) => {
e.preventDefault();
+ const {...propsData} = this.props;
const { active, type } = this.state;
const activeFileds = active[type];
- this.props.form.validateFields(activeFileds, { force: true }, (err, values) => {
- this.props.onSubmit(err, values);
+ propsData.form.validateFields(activeFileds, { force: true }, (err, values) => {
+ propsData.onSubmit(err, values);
});
};
diff --git a/src/components/NoticeIcon/index.js b/src/components/NoticeIcon/index.js
index b3da0a7..3f1b0f1 100644
--- a/src/components/NoticeIcon/index.js
+++ b/src/components/NoticeIcon/index.js
@@ -54,12 +54,14 @@ export default class NoticeIcon extends PureComponent {
}
onTabChange = (tabType) => {
+ const {...propsData} = this.props;
this.setState({ tabType });
- this.props.onTabChange(tabType);
+ propsData.onTabChange(tabType);
}
getNotificationBox() {
const { children, loading, locale } = this.props;
+ const {...propsData} = this.props;
if (!children) {
return null;
}
@@ -72,7 +74,7 @@ export default class NoticeIcon extends PureComponent {
{...child.props}
data={child.props.list}
onClick={item => this.onItemClick(item, child.props)}
- onClear={() => this.props.onClear(child.props.title)}
+ onClear={() => propsData.onClear(child.props.title)}
title={child.props.title}
locale={locale}
/>
@@ -103,8 +105,9 @@ export default class NoticeIcon extends PureComponent {
return trigger;
}
const popoverProps = {};
+ const {...propsData} = this.props;
if ('popupVisible' in this.props) {
- popoverProps.visible = this.props.popupVisible;
+ popoverProps.visible = propsData.popupVisible;
}
return (
<Popover
diff --git a/src/components/Page/Panel/index.js b/src/components/Page/Panel/index.js
index 30bdf07..a80d9ed 100644
--- a/src/components/Page/Panel/index.js
+++ b/src/components/Page/Panel/index.js
@@ -27,11 +27,12 @@ export default class Panel extends Component {
}
shouldComponentUpdate(nextProps) {
+ const {...propsData} = this.props;
const { globalVariables, variables, onChange } = nextProps;
if (!this.isRender(nextProps)) {
return false;
}
- if (globalVariables !== this.props.globalVariables || variables !== this.props.variables) {
+ if (globalVariables !== propsData.globalVariables || variables !== propsData.variables) {
onChange({ ...globalVariables, ...variables });
return false;
}
diff --git a/src/components/Page/Search/index.js b/src/components/Page/Search/index.js
index c47cabe..31ecfe4 100644
--- a/src/components/Page/Search/index.js
+++ b/src/components/Page/Search/index.js
@@ -36,14 +36,16 @@ export default class Search extends PureComponent {
};
componentDidMount() {
- if (this.props.variables && Object.keys(this.props.variables).length > 0) {
- this.originFetchServer('', this.props.value.key);
+ const {...propsData} = this.props;
+ if (propsData.variables && Object.keys(propsData.variables).length > 0) {
+ this.originFetchServer('', propsData.value.key);
}
}
componentDidUpdate(prevProps) {
- if (prevProps.variables !== this.props.variables) {
- this.originFetchServer('', this.props.value.key);
+ const {...propsData} = this.props;
+ if (prevProps.variables !== propsData.variables) {
+ this.originFetchServer('', propsData.value.key);
}
}
@@ -52,6 +54,7 @@ export default class Search extends PureComponent {
return;
}
const { url, query, variables = {}, transform } = this.props;
+ const {...stateData} = this.state;
this.lastFetchId += 1;
const fetchId = this.lastFetchId;
this.setState({ data: [], fetching: true });
@@ -71,41 +74,43 @@ export default class Search extends PureComponent {
}
const list = body.data[Object.keys(body.data)[0]];
this.setState({ data: transform ? list.map(transform) : list, fetching: false });
- if (this.state.data.length < 1) {
+ if (stateData.data.length < 1) {
return;
}
if (!key) {
- this.handleSelect(this.state.data[0]);
+ this.handleSelect(stateData.data[0]);
return;
}
- const option = this.state.data.find(_ => _.key === key);
+ const option = stateData.data.find(_ => _.key === key);
if (!option) {
- this.handleSelect(this.state.data[0]);
+ this.handleSelect(stateData.data[0]);
}
});
};
handleSelect = value => {
const { onSelect } = this.props;
- const selected = this.state.data.find(_ => _.key === value.key);
+ const { ...stateData } = this.state;
+ const selected = stateData.data.find(_ => _.key === value.key);
onSelect(selected);
};
render() {
const { placeholder, value } = this.props;
+ const { ...stateData } = this.state;
return (
<Select
showSearch
style={{ width: 600 }}
placeholder={placeholder}
- notFoundContent={this.state.fetching ? <Spin size="small" /> : null}
+ notFoundContent={stateData.fetching ? <Spin size="small" /> : null}
filterOption={false}
labelInValue
onSelect={this.handleSelect.bind(this)}
onSearch={this.fetchServer}
value={value}
>
- {this.state.data.map(_ => {
+ {stateData.data.map(_ => {
return (
<Option key={_.key} value={_.key}>
{_.label}
diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js
index ca6ff3f..10229e7 100644
--- a/src/components/SiderMenu/SiderMenu.js
+++ b/src/components/SiderMenu/SiderMenu.js
@@ -52,7 +52,8 @@ export default class SiderMenu extends PureComponent {
}
componentWillReceiveProps(nextProps) {
- if (nextProps.location.pathname !== this.props.location.pathname) {
+ const {...propsData} = this.props;
+ if (nextProps.location.pathname !== propsData.location.pathname) {
this.setState({
openKeys: this.getDefaultCollapsedSubMenus(nextProps),
});
@@ -126,6 +127,7 @@ export default class SiderMenu extends PureComponent {
* @memberof SiderMenu
*/
getMenuItemPath = (item) => {
+ const {...propsData} = this.props;
const itemPath = this.conversionPath(item.path);
const icon = getIcon(item.icon);
const { target, name } = item;
@@ -141,8 +143,8 @@ export default class SiderMenu extends PureComponent {
<Link
to={itemPath}
target={target}
- replace={itemPath === this.props.location.pathname}
- onClick={() => this.props.onCollapse(true)}
+ replace={itemPath === propsData.location.pathname}
+ onClick={() => propsData.onCollapse(true)}
>
{icon}<span>{name}</span>
</Link>
@@ -206,8 +208,9 @@ export default class SiderMenu extends PureComponent {
// permission to check
checkPermissionItem = (authority, ItemDom) => {
- if (this.props.Authorized && this.props.Authorized.check) {
- const { check } = this.props.Authorized;
+ const {...propsData} = this.props;
+ if (propsData.Authorized && propsData.Authorized.check) {
+ const { check } = propsData.Authorized;
return check(
authority,
ItemDom
diff --git a/src/components/Topology/AppTopology.js b/src/components/Topology/AppTopology.js
index e3f944e..1568f69 100644
--- a/src/components/Topology/AppTopology.js
+++ b/src/components/Topology/AppTopology.js
@@ -90,7 +90,7 @@ export default class AppTopology extends Base {
const layer = cy.cyCanvas();
const canvas = layer.getCanvas();
- cy.on('render cyCanvas.resize', (evt) => {
+ cy.on('render cyCanvas.resize', () => {
const ctx = canvas.getContext('2d');
layer.resetTransform(ctx);
layer.clear(ctx);
diff --git a/src/components/TraceStack/index.js b/src/components/TraceStack/index.js
index c751188..0f3a357 100644
--- a/src/components/TraceStack/index.js
+++ b/src/components/TraceStack/index.js
@@ -259,20 +259,22 @@ class TraceStack extends PureComponent {
}
selectTimeline = (container, isOver) => {
- if (this.state.container === container) {
+ const {...stateData} = this.state;
+ if (stateData.container === container) {
return;
}
container.attr('class', isOver ? styles.backgroud : styles.backgroudHide);
}
showSpanModal = (span, position, container) => {
+ const {...stateData} = this.state;
const { container: old } = this.state;
if (old) {
old.attr('class', styles.backgroudHide);
}
container.attr('class', styles.backgroudSelected);
this.setState({
- ...this.state,
+ ...stateData,
span,
key: 'tags',
position,
@@ -282,29 +284,31 @@ class TraceStack extends PureComponent {
hideSpanModal = () => {
const { container: old } = this.state;
+ const {...stateData} = this.state;
if (old) {
old.attr('class', styles.backgroudHide);
}
this.setState({
- ...this.state,
+ ...stateData,
span: {},
container: undefined,
});
}
resize = () => {
+ const {...stateData} = this.state;
if (!this.axis) {
return;
}
- this.state.width = this.axis.parentNode.clientWidth - 50;
- if (!this.axis || this.state.width <= 0) {
+ this.setState({width:this.axis.parentNode.clientWidth - 50});
+ if (!this.axis || stateData.width <= 0) {
return;
}
this.axis.innerHTML = '';
this.duration.innerHTML = '';
this.drawAxis();
this.displayData();
- this.setState({ ...this.state, span: {} });
+ this.setState({ ...stateData, span: {} });
}
renderTitle = (items) => {
@@ -400,7 +404,7 @@ class TraceStack extends PureComponent {
</DescriptionList>);
}
const { top, left, width } = position;
-
+ const {...stateData} = this.state;
const toolTipStyle = { position: 'absolute', top: top + 86 };
if (contentList.logs) {
toolTipStyle.left = 0;
@@ -440,7 +444,7 @@ class TraceStack extends PureComponent {
style={toolTipStyle}
extra={<Button type="primary" shape="circle" icon="close" ghost onClick={this.hideSpanModal} />}
>
- {contentList[this.state.key]}
+ {contentList[stateData.key]}
</Card>
) : null}
</div>
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index ead1f91..1ea9595 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -90,6 +90,7 @@ class BasicLayout extends React.PureComponent {
}
componentWillUpdate(nextProps) {
+ const {...propsData} = this.props;
const { globalVariables: { duration }, isMonitor } = nextProps;
if (!isMonitor) {
return;
@@ -101,7 +102,7 @@ class BasicLayout extends React.PureComponent {
if (duration === preDuration) {
return;
}
- this.props.dispatch({
+ propsData.dispatch({
type: 'global/fetchNotice',
payload: { variables: { duration } },
});
@@ -133,20 +134,23 @@ class BasicLayout extends React.PureComponent {
}
handleDurationToggle = () => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'global/changeDurationCollapsed',
- payload: this.props.duration.collapsed,
+ payload: propsData.duration.collapsed,
});
}
handleDurationReload = () => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'global/reloadDuration',
});
}
handleDurationSelected = (selectedDuration) => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'global/changeDuration',
payload: selectedDuration,
});
@@ -161,27 +165,30 @@ class BasicLayout extends React.PureComponent {
}
handleMenuCollapse = (collapsed) => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'global/changeLayoutCollapsed',
payload: collapsed,
});
}
handleMenuClick = ({ key }) => {
+ const {...propsData} = this.props;
if (key === 'triggerError') {
- this.props.dispatch(routerRedux.push('/exception/trigger'));
+ propsData.dispatch(routerRedux.push('/exception/trigger'));
return;
}
if (key === 'logout') {
- this.props.dispatch({
+ propsData.dispatch({
type: 'login/logout',
});
}
}
handleNoticeVisibleChange = (visible) => {
+ const {...propsData} = this.props;
if (visible) {
- this.props.dispatch({
+ propsData.dispatch({
type: 'global/fetchNotices',
});
}
@@ -196,6 +203,7 @@ class BasicLayout extends React.PureComponent {
}
render() {
+ const {...propsData} = this.props;
const {
isMonitor, collapsed, fetching, notices, routerData, match, location, zone,
duration: { selected: dSelected, collapsed: dCollapsed },
@@ -235,7 +243,7 @@ class BasicLayout extends React.PureComponent {
onSelected={this.handleDurationSelected}
collapsed={dCollapsed}
zone={zone}
- dispatch={this.props.dispatch}
+ dispatch={propsData.dispatch}
/>
) : null}
<Content style={{ margin: '24px 24px 0', height: '100%' }}>
diff --git a/src/routes/Alarm/Alarm.js b/src/routes/Alarm/Alarm.js
index a5aa771..9da9e8a 100644
--- a/src/routes/Alarm/Alarm.js
+++ b/src/routes/Alarm/Alarm.js
@@ -44,9 +44,10 @@ const funcMap = {
}))
export default class Alarm extends PureComponent {
componentDidMount() {
+ const {...propsData} = this.props;
const { alarm: { variables: { values } } } = this.props;
if (!values.scope) {
- this.props.dispatch({
+ propsData.dispatch({
type: 'alarm/saveVariables',
payload: { values: {
scope: 'Service',
@@ -57,7 +58,8 @@ export default class Alarm extends PureComponent {
}
handleSearch = (keyword) => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'alarm/saveVariables',
payload: { values: {
keyword,
@@ -67,7 +69,8 @@ export default class Alarm extends PureComponent {
}
handlePageChange = (pag) => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'alarm/saveVariables',
payload: { values: {
paging: {
@@ -80,7 +83,8 @@ export default class Alarm extends PureComponent {
}
changeScope = (scope) => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'alarm/saveVariables',
payload: { values: {
scope,
@@ -90,8 +94,9 @@ export default class Alarm extends PureComponent {
}
handleChange = (variables) => {
+ const {...propsData} = this.props;
const { paging = defaultPaging } = variables;
- this.props.dispatch({
+ propsData.dispatch({
type: 'alarm/fetchData',
payload: { variables: { ...variables, paging }, reducer: funcMap[variables.scope] },
});
@@ -138,11 +143,12 @@ export default class Alarm extends PureComponent {
/>
</div>
);
+ const {...propsData} = this.props;
const { alarm: { variables: { values }, data } } = this.props;
return (
<Panel
variables={values}
- globalVariables={this.props.globalVariables}
+ globalVariables={propsData.globalVariables}
onChange={this.handleChange}
>
<Card
diff --git a/src/routes/Endpoint/Endpoint.js b/src/routes/Endpoint/Endpoint.js
index 278b97b..49f07df 100644
--- a/src/routes/Endpoint/Endpoint.js
+++ b/src/routes/Endpoint/Endpoint.js
@@ -20,7 +20,7 @@ import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Form, Button, Icon, Select } from 'antd';
import {
- ChartCard, MiniArea, MiniBar, Sankey, Line, EndpointDeps,
+ ChartCard, MiniArea, MiniBar, Line, EndpointDeps,
} from 'components/Charts';
import { axisY, axisMY } from '../../utils/time';
import { avgTS } from '../../utils/utils';
@@ -52,24 +52,27 @@ const { Option } = Select;
})
export default class Endpoint extends PureComponent {
componentDidMount() {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'endpoint/initOptions',
- payload: { variables: this.props.globalVariables, reducer: 'saveServiceInfo' },
+ payload: { variables: propsData.globalVariables, reducer: 'saveServiceInfo' },
});
}
componentWillUpdate(nextProps) {
- if (nextProps.globalVariables.duration === this.props.globalVariables.duration) {
+ const {...propsData} = this.props;
+ if (nextProps.globalVariables.duration === propsData.globalVariables.duration) {
return;
}
- this.props.dispatch({
+ propsData.dispatch({
type: 'endpoint/initOptions',
payload: { variables: nextProps.globalVariables, reducer: 'saveServiceInfo' },
});
}
handleServiceSelect = (selected) => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'endpoint/save',
payload: {
variables: {
@@ -84,7 +87,8 @@ export default class Endpoint extends PureComponent {
}
handleSelect = (selected) => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'endpoint/save',
payload: {
variables: {
@@ -99,7 +103,8 @@ export default class Endpoint extends PureComponent {
}
handleChange = (variables) => {
- const { variables: { values } } = this.props.endpoint;
+ const {...propsData} = this.props;
+ const { variables: { values } } = propsData.endpoint;
if (!values.serviceId) {
return;
}
@@ -107,7 +112,7 @@ export default class Endpoint extends PureComponent {
if (!endpointId) {
return;
}
- this.props.dispatch({
+ propsData.dispatch({
type: 'endpoint/fetchData',
payload: { variables: {
endpointId,
@@ -158,17 +163,18 @@ export default class Endpoint extends PureComponent {
edgeWith = edge => edge.cpm;
renderPanel = () => {
+ const {...propsData} = this.props;
const { endpoint, duration } = this.props;
const { variables: { values }, data } = endpoint;
const { getEndpointResponseTimeTrend, getEndpointThroughputTrend,
- getEndpointSLATrend, getEndpointTopology, queryBasicTraces } = data;
+ getEndpointSLATrend, queryBasicTraces } = data;
if (!values.endpointId) {
return null;
}
return (
<Panel
variables={data.endpointInfo}
- globalVariables={this.props.globalVariables}
+ globalVariables={propsData.globalVariables}
onChange={this.handleChange}
>
<Row gutter={8}>
@@ -216,7 +222,7 @@ export default class Endpoint extends PureComponent {
>
<Line
height={150}
- data={axisMY(this.props.duration, [{ title: 'p99', value: data.getP99}, { title: 'p95', value: data.getP95}
+ data={axisMY(propsData.duration, [{ title: 'p99', value: data.getP99}, { title: 'p95', value: data.getP95}
, { title: 'p90', value: data.getP90}, { title: 'p75', value: data.getP75}, { title: 'p50', value: data.getP50}])}
/>
</ChartCard>
@@ -244,7 +250,7 @@ export default class Endpoint extends PureComponent {
<TraceList
data={queryBasicTraces.traces}
onClickTraceTag={this.handleShowTrace}
- loading={this.props.loading}
+ loading={propsData.loading}
/>
</ChartCard>
</Col>
diff --git a/src/routes/Service/Service.js b/src/routes/Service/Service.js
index ce4c149..9378a95 100644
--- a/src/routes/Service/Service.js
+++ b/src/routes/Service/Service.js
@@ -57,24 +57,27 @@ const middleColResponsiveProps = {
})
export default class Service extends PureComponent {
componentDidMount() {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'service/initOptions',
- payload: { variables: this.props.globalVariables },
+ payload: { variables: propsData.globalVariables },
});
}
componentWillUpdate(nextProps) {
- if (nextProps.globalVariables.duration === this.props.globalVariables.duration) {
+ const {...propsData} = this.props;
+ if (nextProps.globalVariables.duration === propsData.globalVariables.duration) {
return;
}
- this.props.dispatch({
+ propsData.dispatch({
type: 'service/initOptions',
payload: { variables: nextProps.globalVariables },
});
}
handleSelect = (selected) => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'service/saveVariables',
payload: {
values: { serviceId: selected.key },
@@ -84,11 +87,12 @@ export default class Service extends PureComponent {
}
handleChange = (variables) => {
- const { data: { serviceInstanceInfo, showServiceInstance } } = this.props.service;
+ const {...propsData} = this.props;
+ const { data: { serviceInstanceInfo, showServiceInstance } } = propsData.service;
if (showServiceInstance) {
this.handleSelectServiceInstance(serviceInstanceInfo.key, serviceInstanceInfo);
} else {
- this.props.dispatch({
+ propsData.dispatch({
type: 'service/fetchData',
payload: { variables, reducer: 'saveService' },
});
@@ -96,28 +100,32 @@ export default class Service extends PureComponent {
}
handleGoService = () => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'service/hideServiceInstance',
});
}
handleGoServiceInstance = () => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'service/showServiceInstance',
});
}
handleSelectServiceInstance = (serviceInstanceId, serviceInstanceInfo) => {
+ const {...propsData} = this.props;
const { globalVariables: { duration } } = this.props;
- this.props.dispatch({
+ propsData.dispatch({
type: 'service/fetchServiceInstance',
payload: { variables: { duration, serviceInstanceId }, serviceInstanceInfo },
});
}
renderApp = () => {
- const { getFieldDecorator } = this.props.form;
- const { variables: { values, options, labels }, data } = this.props.service;
+ const {...propsData} = this.props;
+ const { getFieldDecorator } = propsData.form;
+ const { variables: { values, options, labels }, data } = propsData.service;
return (
<div>
<Form layout="inline">
@@ -139,7 +147,7 @@ export default class Service extends PureComponent {
</Form>
<Panel
variables={values}
- globalVariables={this.props.globalVariables}
+ globalVariables={propsData.globalVariables}
onChange={this.handleChange}
>
<Row gutter={0}>
@@ -168,7 +176,7 @@ export default class Service extends PureComponent {
<ServiceInstanceLitePanel
data={data}
serviceInstanceList={data.getServiceInstances}
- duration={this.props.duration}
+ duration={propsData.duration}
onSelectServiceInstance={this.handleSelectServiceInstance}
onMoreServiceInstance={this.handleGoServiceInstance}
/>
@@ -183,7 +191,7 @@ export default class Service extends PureComponent {
bodyStyle={{ padding: 5, height: 150}}
>
<Line
- data={axisMY(this.props.duration, [{ title: 'p99', value: data.getP99}, { title: 'p95', value: data.getP95}
+ data={axisMY(propsData.duration, [{ title: 'p99', value: data.getP99}, { title: 'p95', value: data.getP95}
, { title: 'p90', value: data.getP90}, { title: 'p75', value: data.getP75}, { title: 'p50', value: data.getP50}])}
/>
</Card>
@@ -212,7 +220,7 @@ export default class Service extends PureComponent {
<RankList
data={data.getSlowEndpoint}
renderValue={_ => `${_.value} ms`}
- onClick={(key, item) => redirect(this.props.history, '/monitor/endpoint', { key,
+ onClick={(key, item) => redirect(propsData.history, '/monitor/endpoint', { key,
label: item.label,
serviceId: values.serviceId,
serviceName: labels.serviceId })}
@@ -226,7 +234,7 @@ export default class Service extends PureComponent {
}
render() {
- const { service, duration } = this.props;
+ const { globalVariables, service, duration } = this.props;
const { variables, data } = service;
const { showServiceInstance, serviceInstanceInfo } = data;
return (
@@ -244,7 +252,7 @@ export default class Service extends PureComponent {
</Breadcrumb>
<Panel
variables={variables.values}
- globalVariables={this.props.globalVariables}
+ globalVariables={globalVariables}
onChange={this.handleChange}
>
<ServiceInstance data={data} duration={duration} />
diff --git a/src/routes/Topology/Topology.js b/src/routes/Topology/Topology.js
index 9b066df..a2c7948 100644
--- a/src/routes/Topology/Topology.js
+++ b/src/routes/Topology/Topology.js
@@ -155,20 +155,21 @@ export default class Topology extends PureComponent {
}
renderActions = () => {
- const { data: { appInfo } } = this.props.topology;
+ const {...propsData} = this.props;
+ const { data: { appInfo } } = propsData.topology;
return [
- <Icon type="appstore" onClick={() => redirect(this.props.history, '/monitor/service', { key: appInfo.id, label: appInfo.name })} />,
+ <Icon type="appstore" onClick={() => redirect(propsData.history, '/monitor/service', { key: appInfo.id, label: appInfo.name })} />,
<Icon
type="exception"
- onClick={() => redirect(this.props.history, '/trace',
+ onClick={() => redirect(propsData.history, '/trace',
{ values: {
serviceId: appInfo.id,
- duration: { ...this.props.duration, input: this.props.globalVariables.duration },
+ duration: { ...propsData.duration, input: propsData.globalVariables.duration },
},
labels: { applicationId: appInfo.name },
})}
/>,
- appInfo.isAlarm ? <Icon type="bell" onClick={() => redirect(this.props.history, '/monitor/alarm')} /> : null,
+ appInfo.isAlarm ? <Icon type="bell" onClick={() => redirect(propsData.history, '/monitor/alarm')} /> : null,
];
}
@@ -187,7 +188,8 @@ export default class Topology extends PureComponent {
}
render() {
- const { data, variables: { appRegExps, appFilters = [], latencyRange } } = this.props.topology;
+ const {...propsData} = this.props;
+ const { data, variables: { appRegExps, appFilters = [], latencyRange } } = propsData.topology;
const { metrics, layout = 0 } = data;
const { getGlobalTopology: topologData } = data;
const content = (
@@ -198,7 +200,7 @@ export default class Topology extends PureComponent {
</div>
);
return (
- <Panel globalVariables={this.props.globalVariables} onChange={this.handleChange}>
+ <Panel globalVariables={propsData.globalVariables} onChange={this.handleChange}>
<Row gutter={8}>
<Col {...{ ...colResponsiveProps, xl: 18, lg: 16 }}>
<ChartCard
@@ -215,7 +217,7 @@ export default class Topology extends PureComponent {
>
{topologData.nodes.length > 0 ? (
<AppTopology
- height={this.props.graphHeight}
+ height={propsData.graphHeight}
elements={topologData}
metrics={metrics}
onSelectedApplication={this.handleSelectedApplication}
diff --git a/src/routes/Trace/Trace.js b/src/routes/Trace/Trace.js
index 6bfe06f..bbfdee8 100644
--- a/src/routes/Trace/Trace.js
+++ b/src/routes/Trace/Trace.js
@@ -29,13 +29,15 @@ import TraceTimeline from './TraceTimeline';
}))
export default class Trace extends PureComponent {
handleGoBack = () => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'trace/hideTimeline',
});
}
render() {
const { trace: { data: { showTimeline } } } = this.props;
+ const {...propsData} = this.props;
return (
<div>
{showTimeline ? (
@@ -50,22 +52,22 @@ export default class Trace extends PureComponent {
<Row type="flex" justify="start">
<Col span={showTimeline ? 0 : 24}>
<TraceSearch
- trace={this.props.trace}
- duration={this.props.duration}
- loading={this.props.loading}
- globalVariables={this.props.globalVariables}
- dispatch={this.props.dispatch}
- zone={this.props.zone}
+ trace={propsData.trace}
+ duration={propsData.duration}
+ loading={propsData.loading}
+ globalVariables={propsData.globalVariables}
+ dispatch={propsData.dispatch}
+ zone={propsData.zone}
/>
</Col>
<Col span={showTimeline ? 24 : 0}>
{showTimeline ? (
<TraceTimeline
- trace={this.props.trace}
- duration={this.props.duration}
- loading={this.props.loading}
- globalVariables={this.props.globalVariables}
- dispatch={this.props.dispatch}
+ trace={propsData.trace}
+ duration={propsData.duration}
+ loading={propsData.loading}
+ globalVariables={propsData.globalVariables}
+ dispatch={propsData.dispatch}
/>
) : null}
</Col>
diff --git a/src/routes/Trace/TraceSearch.js b/src/routes/Trace/TraceSearch.js
index cb48a9b..59bbae7 100644
--- a/src/routes/Trace/TraceSearch.js
+++ b/src/routes/Trace/TraceSearch.js
@@ -53,9 +53,10 @@ const initPaging = {
})
export default class Trace extends PureComponent {
componentDidMount() {
+ const {...propsData} = this.props;
const { trace: { variables: { values } } } = this.props;
const { duration } = values;
- this.props.dispatch({
+ propsData.dispatch({
type: 'trace/initOptions',
payload: { variables: { duration: duration.input } },
});
@@ -103,7 +104,8 @@ export default class Trace extends PureComponent {
}
fetchData = (queryCondition, paging = initPaging) => {
- this.props.dispatch({
+ const {...propsData} = this.props;
+ propsData.dispatch({
type: 'trace/fetchData',
payload: {
variables: {
@@ -212,7 +214,8 @@ export default class Trace extends PureComponent {
}
renderForm() {
- const { getFieldDecorator } = this.props.form;
+ const {...propsData} = this.props;
+ const { getFieldDecorator } = propsData.form;
const { trace: { variables: { options } }, zone } = this.props;
return (
<Form onSubmit={this.handleSearch} layout="vertical">
diff --git a/src/routes/User/Login.js b/src/routes/User/Login.js
index bd37e2a..e3aaed4 100644
--- a/src/routes/User/Login.js
+++ b/src/routes/User/Login.js
@@ -30,8 +30,9 @@ const { UserName, Password, Submit } = Login;
}))
export default class LoginPage extends Component {
handleSubmit = (err, values) => {
+ const {...propsData} = this.props;
if (!err) {
- this.props.dispatch({
+ propsData.dispatch({
type: 'login/login',
payload: {
...values,
diff --git a/src/routes/User/Register.js b/src/routes/User/Register.js
index 87549fa..189abc0 100644
--- a/src/routes/User/Register.js
+++ b/src/routes/User/Register.js
@@ -53,9 +53,10 @@ export default class Register extends Component {
};
componentWillReceiveProps(nextProps) {
- const account = this.props.form.getFieldValue('mail');
+ const {...propsData} = this.props;
+ const account = propsData.form.getFieldValue('mail');
if (nextProps.register.status === 'ok') {
- this.props.dispatch(routerRedux.push({
+ propsData.dispatch(routerRedux.push({
pathname: '/user/register-result',
state: {
account,
@@ -94,13 +95,15 @@ export default class Register extends Component {
handleSubmit = (e) => {
e.preventDefault();
- this.props.form.validateFields({ force: true }, (err, values) => {
+ const {...propsData} = this.props;
+ const {...stateData} = this.state;
+ propsData.form.validateFields({ force: true }, (err, values) => {
if (!err) {
- this.props.dispatch({
+ propsData.dispatch({
type: 'register/submit',
payload: {
...values,
- prefix: this.state.prefix,
+ prefix: stateData.prefix,
},
});
}
@@ -109,7 +112,8 @@ export default class Register extends Component {
handleConfirmBlur = (e) => {
const { value } = e.target;
- this.setState({ confirmDirty: this.state.confirmDirty || !!value });
+ const {...stateData} = this.state;
+ this.setState({ confirmDirty: stateData.confirmDirty || !!value });
};
checkConfirm = (rule, value, callback) => {
@@ -122,6 +126,7 @@ export default class Register extends Component {
};
checkPassword = (rule, value, callback) => {
+ const {...stateData} = this.state;
if (!value) {
this.setState({
help: '请输入密码！',
@@ -132,7 +137,7 @@ export default class Register extends Component {
this.setState({
help: '',
});
- if (!this.state.visible) {
+ if (!stateData.visible) {
this.setState({
visible: !!value,
});
@@ -141,7 +146,7 @@ export default class Register extends Component {
callback('error');
} else {
const { form } = this.props;
- if (value && this.state.confirmDirty) {
+ if (value && stateData.confirmDirty) {
form.validateFields(['confirm'], { force: true });
}
callback();
@@ -175,7 +180,9 @@ export default class Register extends Component {
render() {
const { form, submitting } = this.props;
const { getFieldDecorator } = form;
- const { count, prefix } = this.state;
+ const { help, count, prefix } = this.state;
+ const { stateData } = this.state;
+
return (
<div className={styles.main}>
<h3>注册</h3>
@@ -194,7 +201,7 @@ export default class Register extends Component {
],
})(<Input size="large" placeholder="邮箱" />)}
</FormItem>
- <FormItem help={this.state.help}>
+ <FormItem help={help}>
<Popover
content={
<div style={{ padding: '4px 0' }}>
@@ -207,7 +214,7 @@ export default class Register extends Component {
}
overlayStyle={{ width: 240 }}
placement="right"
- visible={this.state.visible}
+ visible={stateData.visible}
>
{getFieldDecorator('password', {
rules: [
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services