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
commit 2ebb11ad8c5aca26545d814068da6bf971a90b7d Author: hanahmily <[email protected]> AuthorDate: Mon Jan 22 09:41:14 2018 +0800 Add Topology graph zooming --- src/main/frontend/src/components/Topology/Base.js | 15 +++++++-------- src/main/frontend/src/routes/Topology/Topology.js | 18 +++++++++++++----- 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/src/main/frontend/src/components/Topology/Base.js b/src/main/frontend/src/components/Topology/Base.js index d7e0e8e..9324f9a 100644 --- a/src/main/frontend/src/components/Topology/Base.js +++ b/src/main/frontend/src/components/Topology/Base.js @@ -7,12 +7,11 @@ import conf from './conf'; cytoscape.use(coseBilkent); cytoscape.use(nodeHtmlLabel); -const cyStyle = { - height: '600px', - display: 'block', -}; - export default class Base extends Component { + state= { + height: '600px', + display: 'block', + } componentDidMount() { this.cy = cytoscape({ ...conf, @@ -33,7 +32,7 @@ export default class Base extends Component { edgeElasticity: 0.1, }); layout.pon('layoutstop').then(() => { - this.cy.minZoom(this.cy.zoom()); + this.cy.minZoom(this.cy.zoom() - 0.3); }); layout.run(); } @@ -60,7 +59,7 @@ export default class Base extends Component { }; } render() { - const { height = cyStyle.height } = this.props; - return (<div style={{ ...cyStyle, height }} ref={(el) => { conf.container = el; }} />); + const { height } = this.props; + return (<div style={{ ...this.state, height }} ref={(el) => { conf.container = el; }} />); } } diff --git a/src/main/frontend/src/routes/Topology/Topology.js b/src/main/frontend/src/routes/Topology/Topology.js index 1c51a59..e7297fe 100644 --- a/src/main/frontend/src/routes/Topology/Topology.js +++ b/src/main/frontend/src/routes/Topology/Topology.js @@ -8,6 +8,9 @@ import { AppTopology } from '../../components/Topology'; duration: state.global.duration, })) export default class Topology extends Component { + state = { + graphHeight: 600, + } componentDidMount() { this.props.dispatch({ type: 'topology/fetch', @@ -25,11 +28,16 @@ export default class Topology extends Component { } render() { return ( - <ChartCard - title="Topolgy Graph" - > - <AppTopology height={800} elements={this.props.topology.getClusterTopology} /> - </ChartCard> + <div ref={(el) => { this.graph = el; }}> + <ChartCard + title="Topolgy Graph" + > + <AppTopology + height={this.state.graphHeight} + elements={this.props.topology.getClusterTopology} + /> + </ChartCard> + </div> ); } } -- To stop receiving notification emails like this one, please contact [email protected].
