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/22 02:36:02 UTC
[incubator-skywalking-ui] 01/02: Add Topology graph zooming
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 <ha...@gmail.com>
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
hanahmily@apache.org.