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/19 08:25:58 UTC
[incubator-skywalking-ui] branch feature/5.0.0 updated: Add
topology menu
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 1c23ad9 Add topology menu
1c23ad9 is described below
commit 1c23ad91389fe63b43d7f7b423a0a9125f4be190
Author: hanahmily <ha...@gmail.com>
AuthorDate: Fri Jan 19 16:24:51 2018 +0800
Add topology menu
---
src/main/frontend/.roadhogrc.mock.js | 2 +
src/main/frontend/mock/dashboard.js | 73 -------------
src/main/frontend/mock/topology.js | 113 +++++++++++++++++++++
src/main/frontend/src/common/nav.js | 6 ++
src/main/frontend/src/components/Topology/Base.js | 11 +-
src/main/frontend/src/models/dashboard.js | 4 -
.../src/models/{dashboard.js => topology.js} | 19 +---
.../frontend/src/routes/Dashboard/Dashboard.js | 7 --
src/main/frontend/src/routes/Topology/Topology.js | 35 +++++++
9 files changed, 164 insertions(+), 106 deletions(-)
diff --git a/src/main/frontend/.roadhogrc.mock.js b/src/main/frontend/.roadhogrc.mock.js
index d91f301..cf8d767 100644
--- a/src/main/frontend/.roadhogrc.mock.js
+++ b/src/main/frontend/.roadhogrc.mock.js
@@ -4,6 +4,7 @@ import { imgMap } from './mock/utils';
import { getNotices } from './mock/notices';
import { delay } from 'roadhog-api-doc';
import { getDashboard } from './mock/dashboard';
+import { getTopology } from './mock/topology';
import { getApplication } from './mock/application';
import { getServer } from './mock/server';
import { getService } from './mock/service';
@@ -17,6 +18,7 @@ const noProxy = process.env.NO_PROXY === 'true';
const proxy = {
// 支持值为 Object 和 Array
'POST /api/dashboard': getDashboard,
+ 'POST /api/topology': getTopology,
'POST /api/application': getApplication,
'POST /api/server': getServer,
'POST /api/service': getService,
diff --git a/src/main/frontend/mock/dashboard.js b/src/main/frontend/mock/dashboard.js
index a286ce6..c97c655 100644
--- a/src/main/frontend/mock/dashboard.js
+++ b/src/main/frontend/mock/dashboard.js
@@ -20,79 +20,6 @@ export default {
},
'getTopNSlowService|10': [{ 'key|+1': 1, name: '@name', 'avgResponseTime|200-1000': 1 }],
'getTopNServerThroughput|10': [{ 'key|+1': 1, name: '@name', 'tps|100-10000': 1 }],
- getClusterTopology: () => {
- const application = mockjs.mock({
- 'nodes|5-20': [
- {
- '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': [
- {
- 'id|+1': 100,
- name: 'User',
- type: 'USER',
- },
- ],
- });
- const resources = mockjs.mock({
- 'nodes|2-5': [
- {
- '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': [{
- '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|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|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
- .concat(applicationConnectApplication.calls, applicationConnectResources.calls);
- return {
- nodes,
- calls,
- };
- },
},
}
));
diff --git a/src/main/frontend/mock/topology.js b/src/main/frontend/mock/topology.js
new file mode 100644
index 0000000..e8b4733
--- /dev/null
+++ b/src/main/frontend/mock/topology.js
@@ -0,0 +1,113 @@
+import mockjs from 'mockjs';
+
+export default {
+ getTopology(req, res) {
+ res.json(mockjs.mock(
+ {
+ data: {
+ getClusterTopology: () => {
+ const application = mockjs.mock({
+ 'nodes|2': [
+ {
+ '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: [
+ {
+ id: 100,
+ name: 'User',
+ type: 'USER',
+ },
+ ],
+ });
+ const resources = mockjs.mock({
+ 'nodes|5': [
+ {
+ 'id|+1': 200,
+ name: '@name',
+ 'type|1': ['Oracle', 'MYSQL', 'REDIS'],
+ },
+ ],
+ });
+ const nodes = users.nodes.concat(application.nodes, resources.nodes);
+ const userConnectApplication = mockjs.mock({
+ calls: [
+ {
+ source: 100,
+ target: 1,
+ 'isAlarm|1': true,
+ 'callType|1': ['rpc', 'http', 'dubbo'],
+ 'callsPerSec|100-2000': 1,
+ 'responseTimePerSec|500-5000': 1,
+ },
+ {
+ source: 1,
+ target: 2,
+ 'isAlarm|1': true,
+ 'callType|1': ['rpc', 'http', 'dubbo'],
+ 'callsPerSec|100-2000': 1,
+ 'responseTimePerSec|500-5000': 1,
+ },
+ {
+ source: 1,
+ target: 200,
+ 'isAlarm|1': true,
+ 'callType|1': ['rpc', 'http', 'dubbo'],
+ 'callsPerSec|100-2000': 1,
+ 'responseTimePerSec|500-5000': 1,
+ },
+ {
+ source: 1,
+ target: 201,
+ 'isAlarm|1': true,
+ 'callType|1': ['rpc', 'http', 'dubbo'],
+ 'callsPerSec|100-2000': 1,
+ 'responseTimePerSec|500-5000': 1,
+ },
+ {
+ source: 2,
+ target: 202,
+ 'isAlarm|1': true,
+ 'callType|1': ['rpc', 'http', 'dubbo'],
+ 'callsPerSec|100-2000': 1,
+ 'responseTimePerSec|500-5000': 1,
+ },
+ {
+ source: 2,
+ target: 203,
+ 'isAlarm|1': true,
+ 'callType|1': ['rpc', 'http', 'dubbo'],
+ 'callsPerSec|100-2000': 1,
+ 'responseTimePerSec|500-5000': 1,
+ },
+ {
+ source: 2,
+ target: 204,
+ 'isAlarm|1': true,
+ 'callType|1': ['rpc', 'http', 'dubbo'],
+ 'callsPerSec|100-2000': 1,
+ 'responseTimePerSec|500-5000': 1,
+ },
+ ],
+ });
+ return {
+ nodes,
+ calls: userConnectApplication.calls,
+ };
+ },
+ },
+ }
+ ));
+ },
+};
diff --git a/src/main/frontend/src/common/nav.js b/src/main/frontend/src/common/nav.js
index efd9698..675216f 100644
--- a/src/main/frontend/src/common/nav.js
+++ b/src/main/frontend/src/common/nav.js
@@ -22,6 +22,12 @@ export const getNavData = app => [
component: dynamicWrapper(app, ['dashboard'], () => import('../routes/Dashboard/Dashboard')),
},
{
+ name: 'Topology',
+ icon: 'topology',
+ path: 'topology',
+ component: dynamicWrapper(app, ['topology'], () => import('../routes/Topology/Topology')),
+ },
+ {
name: 'Application',
icon: 'application',
path: 'application',
diff --git a/src/main/frontend/src/components/Topology/Base.js b/src/main/frontend/src/components/Topology/Base.js
index 6eeb0cd..d7e0e8e 100644
--- a/src/main/frontend/src/components/Topology/Base.js
+++ b/src/main/frontend/src/components/Topology/Base.js
@@ -8,7 +8,7 @@ cytoscape.use(coseBilkent);
cytoscape.use(nodeHtmlLabel);
const cyStyle = {
- height: '400px',
+ height: '600px',
display: 'block',
};
@@ -28,9 +28,9 @@ export default class Base extends Component {
this.cy.json({ elements: this.transform(nextProps.elements), style: this.getStyle() });
const layout = this.cy.layout({
name: 'cose-bilkent',
- animate: 'end',
- dealEdgeLength: 200,
- padding: 10,
+ animate: false,
+ idealEdgeLength: 200,
+ edgeElasticity: 0.1,
});
layout.pon('layoutstop').then(() => {
this.cy.minZoom(this.cy.zoom());
@@ -60,6 +60,7 @@ export default class Base extends Component {
};
}
render() {
- return (<div style={cyStyle} ref={(el) => { conf.container = el; }} />);
+ const { height = cyStyle.height } = this.props;
+ return (<div style={{ ...cyStyle, height }} ref={(el) => { conf.container = el; }} />);
}
}
diff --git a/src/main/frontend/src/models/dashboard.js b/src/main/frontend/src/models/dashboard.js
index f5ba419..0796d23 100644
--- a/src/main/frontend/src/models/dashboard.js
+++ b/src/main/frontend/src/models/dashboard.js
@@ -18,10 +18,6 @@ export default {
},
getTopNSlowService: [],
getTopNServerThroughput: [],
- getClusterTopology: {
- nodes: [],
- calls: [],
- },
},
effects: {
*fetch({ payload }, { call, put }) {
diff --git a/src/main/frontend/src/models/dashboard.js b/src/main/frontend/src/models/topology.js
similarity index 51%
copy from src/main/frontend/src/models/dashboard.js
copy to src/main/frontend/src/models/topology.js
index f5ba419..c9c00ab 100644
--- a/src/main/frontend/src/models/dashboard.js
+++ b/src/main/frontend/src/models/topology.js
@@ -1,23 +1,8 @@
import { query } from '../services/graphql';
export default {
- namespace: 'dashboard',
+ namespace: 'topology',
state: {
- getClusterBrief: {
- numOfApplication: 0,
- numOfService: 0,
- numOfDatabase: 0,
- numOfCache: 0,
- numOfMQ: 0,
- },
- getAlarmTrend: {
- numOfAlarmRate: [],
- },
- getConjecturalApps: {
- apps: [],
- },
- getTopNSlowService: [],
- getTopNServerThroughput: [],
getClusterTopology: {
nodes: [],
calls: [],
@@ -25,7 +10,7 @@ export default {
},
effects: {
*fetch({ payload }, { call, put }) {
- const response = yield call(query, 'dashboard', payload);
+ const response = yield call(query, 'topology', payload);
yield put({
type: 'save',
payload: response,
diff --git a/src/main/frontend/src/routes/Dashboard/Dashboard.js b/src/main/frontend/src/routes/Dashboard/Dashboard.js
index 888d8e8..05ef6b2 100644
--- a/src/main/frontend/src/routes/Dashboard/Dashboard.js
+++ b/src/main/frontend/src/routes/Dashboard/Dashboard.js
@@ -5,7 +5,6 @@ import {
ChartCard, Pie, MiniArea, Field,
} from '../../components/Charts';
import { timeRange } from '../../utils/utils';
-import { AppTopology } from '../../components/Topology';
@connect(state => ({
dashboard: state.dashboard,
@@ -93,12 +92,6 @@ export default class Dashboard extends Component {
/>
</Col>
</Row>
- <Card
- bordered={false}
- bodyStyle={{ padding: 0, marginTop: 24 }}
- >
- <AppTopology elements={this.props.dashboard.getClusterTopology} />
- </Card>
<Row gutter={24}>
<Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 24 }}>
<ChartCard
diff --git a/src/main/frontend/src/routes/Topology/Topology.js b/src/main/frontend/src/routes/Topology/Topology.js
new file mode 100644
index 0000000..1c51a59
--- /dev/null
+++ b/src/main/frontend/src/routes/Topology/Topology.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import { connect } from 'dva';
+import { ChartCard } from '../../components/Charts';
+import { AppTopology } from '../../components/Topology';
+
+@connect(state => ({
+ topology: state.topology,
+ duration: state.global.duration,
+}))
+export default class Topology extends Component {
+ componentDidMount() {
+ this.props.dispatch({
+ type: 'topology/fetch',
+ payload: {},
+ });
+ }
+ shouldComponentUpdate(nextProps) {
+ if (this.props.duration !== nextProps.duration) {
+ this.props.dispatch({
+ type: 'topology/fetch',
+ payload: {},
+ });
+ }
+ return this.props.topology !== nextProps.topology;
+ }
+ render() {
+ return (
+ <ChartCard
+ title="Topolgy Graph"
+ >
+ <AppTopology height={800} elements={this.props.topology.getClusterTopology} />
+ </ChartCard>
+ );
+ }
+}
--
To stop receiving notification emails like this one, please contact
['"commits@skywalking.apache.org" <co...@skywalking.apache.org>'].