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/12 06:08:27 UTC
[incubator-skywalking-ui] branch feature/5.0.0 updated: Finish
AppTopology
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 ef8fa2c Finish AppTopology
ef8fa2c is described below
commit ef8fa2c8cab9f79bb26d27b4b0e5a60c64c92491
Author: hanahmily <ha...@gmail.com>
AuthorDate: Fri Jan 12 14:06:24 2018 +0800
Finish AppTopology
---
src/main/frontend/mock/dashboard.js | 84 ++++++++++------------
.../src/components/Topology/AppTopology.js | 3 +-
src/main/frontend/src/components/Topology/Base.js | 26 +++++--
3 files changed, 58 insertions(+), 55 deletions(-)
diff --git a/src/main/frontend/mock/dashboard.js b/src/main/frontend/mock/dashboard.js
index 37f2e79..a286ce6 100644
--- a/src/main/frontend/mock/dashboard.js
+++ b/src/main/frontend/mock/dashboard.js
@@ -24,78 +24,66 @@ export default {
const application = mockjs.mock({
'nodes|5-20': [
{
- data: {
- 'id|+1': 1,
- name: '@name',
- 'type|1': ['DUBBO', 'tomcat', 'SPRINGMVC'],
- 'calls|1000-2000': 1,
- 'sla|1-100.1-2': 1,
- 'apdex|0.2': 1,
- 'numOfServer|1-100': 1,
- 'numOfServerAlarm|1-100': 1,
- 'numOfServiceAlarm|1-100': 1,
- 'isIncomingNode|1': true,
- },
+ 'id|+1': 1,
+ name: '@name',
+ 'type|1': ['DUBBO', 'tomcat', 'SPRINGMVC'],
+ 'calls|1000-2000': 1,
+ 'sla|1-100.1-2': 1,
+ 'apdex|0.2': 1,
+ 'numOfServer|1-100': 1,
+ 'numOfServerAlarm|1-100': 1,
+ 'numOfServiceAlarm|1-100': 1,
+ 'isIncomingNode|1': true,
},
],
});
const users = mockjs.mock({
'nodes|1-3': [
{
- data: {
- 'id|+1': 100,
- name: 'User',
- type: 'USER',
- },
+ 'id|+1': 100,
+ name: 'User',
+ type: 'USER',
},
],
});
const resources = mockjs.mock({
'nodes|2-5': [
{
- data: {
- 'id|+1': 200,
- name: '@name',
- 'type|1': ['Oracle', 'MYSQL', 'REDIS'],
- },
+ 'id|+1': 200,
+ name: '@name',
+ 'type|1': ['Oracle', 'MYSQL', 'REDIS'],
},
],
});
const nodes = application.nodes.concat(users.nodes, resources.nodes);
const userConnectApplication = mockjs.mock({
'calls|1-3': [{
- data: {
- 'source|+1': 100,
- 'target|+1': 1,
- 'isAlarm|1': true,
- 'callType|1': ['rpc', 'http', 'dubbo'],
- 'callsPerSec|100-2000': 1,
- 'responseTimePerSec: 500-5000': 1,
- },
+ 'source|+1': 100,
+ 'target|+1': 1,
+ 'isAlarm|1': true,
+ 'callType|1': ['rpc', 'http', 'dubbo'],
+ 'callsPerSec|100-2000': 1,
+ 'responseTimePerSec|500-5000': 1,
}],
});
const applicationConnectApplication = mockjs.mock({
- 'calls|1-3': [{
- data: {
- 'source|+1': 1,
- 'target|+1': 1,
- 'isAlarm|1': true,
- 'callType|1': ['rpc', 'http', 'dubbo'],
- 'callsPerSec|100-2000': 1,
- 'responseTimePerSec: 500-5000': 1,
- },
+ 'calls|20-50': [{
+ 'source|+1': 1,
+ 'target|+1': 5,
+ 'isAlarm|1': true,
+ 'callType|1': ['rpc', 'http', 'dubbo'],
+ 'callsPerSec|100-2000': 1,
+ 'responseTimePerSec|500-5000': 1,
}],
});
const applicationConnectResources = mockjs.mock({
- 'calls|1-3': [{
- data: {
- 'source|+1': 1,
- 'target|+1': 200,
- 'isAlarm|1': true,
- 'callType|1': ['rpc', 'http', 'dubbo'],
- 'callsPerSec|100-2000': 1,
- 'responseTimePerSec: 500-5000': 1,
- },
+ 'calls|5-10': [{
+ 'source|+1': 1,
+ 'target|+1': 200,
+ 'isAlarm|1': true,
+ 'callType|1': ['rpc', 'http', 'dubbo'],
+ 'callsPerSec|100-2000': 1,
+ 'responseTimePerSec|500-5000': 1,
}],
});
const calls = userConnectApplication.calls
diff --git a/src/main/frontend/src/components/Topology/AppTopology.js b/src/main/frontend/src/components/Topology/AppTopology.js
index 0d7e59f..0c6f5ac 100644
--- a/src/main/frontend/src/components/Topology/AppTopology.js
+++ b/src/main/frontend/src/components/Topology/AppTopology.js
@@ -37,7 +37,8 @@ export default class AppTopology extends Base {
{
selector: 'edge',
style: {
- 'curve-style': 'unbundled-bezier',
+ 'curve-style': 'bezier',
+ 'control-point-step-size': 100,
'target-arrow-shape': 'triangle',
'target-arrow-color': ele => (ele.data('isAlarm') ? 'red' : 'rgb(147, 198, 174)'),
'line-color': ele => (ele.data('isAlarm') ? 'red' : 'rgb(147, 198, 174)'),
diff --git a/src/main/frontend/src/components/Topology/Base.js b/src/main/frontend/src/components/Topology/Base.js
index b934a02..99f279f 100644
--- a/src/main/frontend/src/components/Topology/Base.js
+++ b/src/main/frontend/src/components/Topology/Base.js
@@ -14,18 +14,22 @@ const cyStyle = {
export default class Base extends Component {
componentDidMount() {
- this.elements = this.props.elements;
- const { nodes, calls } = this.props.elements;
- this.cy = cytoscape({ ...conf, elements: { nodes, edges: calls }, style: this.getStyle() });
+ this.cy = cytoscape({
+ ...conf,
+ elements: this.transform(this.props.elements),
+ style: this.getStyle(),
+ });
this.cy.nodeHtmlLabel(this.getNodeLabel());
}
componentWillReceiveProps(nextProps) {
if (nextProps.elements === this.elements) {
return;
}
- this.elements = nextProps.elements;
- const { nodes, calls } = this.elements;
- this.cy.json({ elements: { nodes, edges: calls }, style: this.getStyle() });
+ this.cy.json({ elements: this.transform(nextProps.elements), style: this.getStyle() });
+ this.cy.layout({
+ name: 'cose',
+ animate: true,
+ }).run();
}
shouldComponentUpdate() {
return false;
@@ -36,6 +40,16 @@ export default class Base extends Component {
getCy() {
return this.cy;
}
+ transform(elements) {
+ this.elements = elements;
+ const { nodes, calls } = elements;
+ return {
+ nodes: nodes.map(node => ({ data: node })),
+ edges: calls.filter(call => (nodes.findIndex(node => node.id === call.source)
+ && nodes.findIndex(node => node.id === call.target)))
+ .map(call => ({ data: { ...call, id: `${call.source}-${call.target}` } })),
+ };
+ }
render() {
return (<div style={cyStyle} ref={(el) => { conf.container = el; }} />);
}
--
To stop receiving notification emails like this one, please contact
['"commits@skywalking.apache.org" <co...@skywalking.apache.org>'].