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 f5a8f72 Refactor topology graph layout
f5a8f72 is described below
commit f5a8f72509513570b36d182b01f0e1f8b31f8ef0
Author: hanahmily <[email protected]>
AuthorDate: Mon Jan 22 11:27:09 2018 +0800
Refactor topology graph layout
---
src/main/frontend/src/components/Topology/Base.js | 9 +++++----
src/main/frontend/src/routes/Application/Application.js | 2 +-
src/main/frontend/src/routes/Service/Service.js | 2 +-
3 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/src/main/frontend/src/components/Topology/Base.js
b/src/main/frontend/src/components/Topology/Base.js
index 9324f9a..d895616 100644
--- a/src/main/frontend/src/components/Topology/Base.js
+++ b/src/main/frontend/src/components/Topology/Base.js
@@ -24,13 +24,14 @@ export default class Base extends Component {
if (nextProps.elements === this.elements) {
return;
}
- this.cy.json({ elements: this.transform(nextProps.elements), style:
this.getStyle() });
- const layout = this.cy.layout({
+ const { layout: layoutConfig = {
name: 'cose-bilkent',
animate: false,
idealEdgeLength: 200,
edgeElasticity: 0.1,
- });
+ } } = this.props;
+ this.cy.json({ elements: this.transform(nextProps.elements), style:
this.getStyle() });
+ const layout = this.cy.layout(layoutConfig);
layout.pon('layoutstop').then(() => {
this.cy.minZoom(this.cy.zoom() - 0.3);
});
@@ -59,7 +60,7 @@ export default class Base extends Component {
};
}
render() {
- const { height } = this.props;
+ const { height = this.state.height } = this.props;
return (<div style={{ ...this.state, height }} ref={(el) => {
conf.container = el; }} />);
}
}
diff --git a/src/main/frontend/src/routes/Application/Application.js
b/src/main/frontend/src/routes/Application/Application.js
index 1b6f5aa..77843e9 100644
--- a/src/main/frontend/src/routes/Application/Application.js
+++ b/src/main/frontend/src/routes/Application/Application.js
@@ -71,7 +71,7 @@ export default class Application extends Component {
bordered={false}
bodyStyle={{ padding: 0, marginTop: 24 }}
>
- <AppTopology
elements={this.props.application.getApplicationTopology} />
+ <AppTopology
elements={this.props.application.getApplicationTopology} layout={{ name:
'concentric', minNodeSpacing: 200 }} />
</Card>
<Row gutter={24}>
<Col {...middleColResponsiveProps}>
diff --git a/src/main/frontend/src/routes/Service/Service.js
b/src/main/frontend/src/routes/Service/Service.js
index 4cfac85..021f7e4 100644
--- a/src/main/frontend/src/routes/Service/Service.js
+++ b/src/main/frontend/src/routes/Service/Service.js
@@ -96,7 +96,7 @@ export default class Service extends Component {
bordered={false}
bodyStyle={{ padding: 0 }}
>
- <ServiceTopology
elements={this.props.service.getServiceTopology} />
+ <ServiceTopology
elements={this.props.service.getServiceTopology} layout={{ name: 'concentric',
minNodeSpacing: 200 }} />
</Card>
</Col>
</Row>
--
To stop receiving notification emails like this one, please contact
[email protected].
