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/04/23 09:51:23 UTC
[incubator-skywalking-ui] branch 5.0.0/beta updated: Add links
between components
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch 5.0.0/beta
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/5.0.0/beta by this push:
new 5f321dc Add links between components
5f321dc is described below
commit 5f321dcb2584c7a9a1f74ed4d7a5417ed56b76ef
Author: hanahmily <ha...@gmail.com>
AuthorDate: Mon Apr 23 17:46:53 2018 +0800
Add links between components
---
mock/dashboard.js | 4 ++--
src/components/Page/Search/index.js | 2 +-
src/models/application.js | 19 ++++++++++++++++
src/models/dashboard.js | 10 ++++----
src/models/service.js | 19 ++++++++++++++++
src/routes/Application/Application.js | 3 ++-
src/routes/Dashboard/Dashboard.js | 43 +++++++++++++++++++++++++----------
src/utils/utils.js | 7 ++++++
8 files changed, 86 insertions(+), 21 deletions(-)
diff --git a/mock/dashboard.js b/mock/dashboard.js
index 400ec81..3d6d15c 100644
--- a/mock/dashboard.js
+++ b/mock/dashboard.js
@@ -36,8 +36,8 @@ export default {
getConjecturalApps: {
'apps|3-5': [{ 'name|1': ['Oracle', 'MySQL', 'ActiveMQ', 'Redis', 'Memcache', 'SQLServer'], num: '@natural(1, 20)' }],
},
- 'getTopNSlowService|10': [{ 'key|+1': 1, name: '@url', 'avgResponseTime|200-1000': 1 }],
- 'getTopNApplicationThroughput|10': [{ 'key|+1': 1, applicationCode: '@name', 'callsPerSec|100-10000': 1 }],
+ 'getTopNSlowService|10': [{ 'key|+1': 1, label: '@url', 'value|200-1000': 1 }],
+ 'getTopNApplicationThroughput|10': [{ 'key|+1': 1, label: '@name', 'value|100-10000': 1 }],
},
}
));
diff --git a/src/components/Page/Search/index.js b/src/components/Page/Search/index.js
index 45b9ae0..9f0026a 100644
--- a/src/components/Page/Search/index.js
+++ b/src/components/Page/Search/index.js
@@ -35,7 +35,7 @@ export default class Search extends PureComponent {
fetching: false,
}
componentDidMount() {
- this.originFetchServer('', true);
+ this.originFetchServer('', !this.props.value.key);
}
fetchServer = (value, isSelectOne) => {
if (value === undefined) {
diff --git a/src/models/application.js b/src/models/application.js
index 1c24e71..6091941 100644
--- a/src/models/application.js
+++ b/src/models/application.js
@@ -176,4 +176,23 @@ export default generateModal({
};
},
},
+ subscriptions: {
+ setup({ history, dispatch }) {
+ return history.listen(({ pathname, state }) => {
+ if (pathname === '/application' && state) {
+ dispatch({
+ type: 'saveVariables',
+ payload: {
+ values: {
+ applicationId: state.key,
+ },
+ labels: {
+ applicationId: state.label,
+ },
+ },
+ });
+ }
+ });
+ },
+ },
});
diff --git a/src/models/dashboard.js b/src/models/dashboard.js
index ff287db..be8e2a1 100644
--- a/src/models/dashboard.js
+++ b/src/models/dashboard.js
@@ -35,7 +35,7 @@ export default generateModal({
apps: [],
},
getTopNSlowService: [],
- getTopNServerThroughput: [],
+ getTopNApplicationThroughput: [],
},
dataQuery: `
query Dashboard($duration: Duration!) {
@@ -57,13 +57,13 @@ export default generateModal({
}
getTopNSlowService(duration: $duration, topN: 10) {
key: id
- name
- avgResponseTime
+ label: name
+ value: avgResponseTime
}
getTopNApplicationThroughput(duration: $duration, topN: 10) {
key: applicationId
- applicationCode
- callsPerSec
+ label: applicationCode
+ value: callsPerSec
}
}
`,
diff --git a/src/models/service.js b/src/models/service.js
index 383f904..c766a55 100644
--- a/src/models/service.js
+++ b/src/models/service.js
@@ -70,4 +70,23 @@ export default generateModal({
},
},
dataQuery,
+ subscriptions: {
+ setup({ history, dispatch }) {
+ return history.listen(({ pathname, state }) => {
+ if (pathname === '/service' && state) {
+ dispatch({
+ type: 'saveVariables',
+ payload: {
+ values: {
+ serviceId: state.key,
+ },
+ labels: {
+ serviceId: state.label,
+ },
+ },
+ });
+ }
+ });
+ },
+ },
});
diff --git a/src/routes/Application/Application.js b/src/routes/Application/Application.js
index 1363350..70d8f61 100644
--- a/src/routes/Application/Application.js
+++ b/src/routes/Application/Application.js
@@ -24,7 +24,7 @@ import { AppTopology } from '../../components/Topology';
import { Panel } from '../../components/Page';
import RankList from '../../components/RankList';
import ServerLitePanel from '../../components/ServerLitePanel';
-import { getServerId } from '../../utils/utils';
+import { getServerId, redirect } from '../../utils/utils';
const { Option } = Select;
const { Item: FormItem } = Form;
@@ -197,6 +197,7 @@ export default class Application extends PureComponent {
<RankList
data={data.getSlowService}
renderValue={_ => `${_.value} ms`}
+ onClick={(key, item) => redirect(this.props.history, '/service', { key, label: item.label })}
/>
</Card>
</Col>
diff --git a/src/routes/Dashboard/Dashboard.js b/src/routes/Dashboard/Dashboard.js
index 50e1fcc..44bb86e 100644
--- a/src/routes/Dashboard/Dashboard.js
+++ b/src/routes/Dashboard/Dashboard.js
@@ -18,13 +18,14 @@
import React, { PureComponent } from 'react';
import { connect } from 'dva';
-import { Row, Col, Card } from 'antd';
+import { Row, Col, Card, Tooltip, Icon } from 'antd';
import {
ChartCard, Pie, MiniArea, Field,
} from '../../components/Charts';
import { axis } from '../../utils/time';
-import { avgTimeSeries } from '../../utils/utils';
-import { Panel, Ranking } from '../../components/Page';
+import { avgTimeSeries, redirect } from '../../utils/utils';
+import { Panel } from '../../components/Page';
+import RankList from '../../components/RankList';
@connect(state => ({
dashboard: state.dashboard,
@@ -38,6 +39,13 @@ export default class Dashboard extends PureComponent {
payload: { variables },
});
}
+ renderAction = (prompt, path) => {
+ return (
+ <Tooltip title={prompt}>
+ <Icon type="info-circle-o" onClick={() => redirect(this.props.history, path)} />
+ </Tooltip>
+ );
+ }
render() {
const { data } = this.props.dashboard;
const { numOfAlarmRate } = data.getAlarmTrend;
@@ -54,10 +62,11 @@ export default class Dashboard extends PureComponent {
}
return (
<Panel globalVariables={this.props.globalVariables} onChange={this.handleDurationChange}>
- <Row gutter={24}>
+ <Row gutter={8}>
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
<ChartCard
title="App"
+ action={this.renderAction('Show application details', '/application')}
avatar={<img style={{ width: 56, height: 56 }} src="img/icon/app.png" alt="app" />}
total={data.getClusterBrief.numOfApplication}
/>
@@ -65,6 +74,7 @@ export default class Dashboard extends PureComponent {
<Col xs={24} sm={24} md={12} lg={6} xl={6}>
<ChartCard
title="Service"
+ action={this.renderAction('Show service details', '/service')}
avatar={<img style={{ width: 56, height: 56 }} src="img/icon/service.png" alt="service" />}
total={data.getClusterBrief.numOfService}
/>
@@ -85,8 +95,8 @@ export default class Dashboard extends PureComponent {
/>
</Col>
</Row>
- <Row gutter={24}>
- <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 24 }}>
+ <Row gutter={8}>
+ <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 8 }}>
<ChartCard
title="Avg Application Alarm"
avatar={<img style={{ width: 56, height: 56 }} src="img/icon/alert.png" alt="app" />}
@@ -108,7 +118,7 @@ export default class Dashboard extends PureComponent {
/>
</ChartCard>
</Col>
- <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 24 }}>
+ <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 8 }}>
<ChartCard
contentHeight={200}
>
@@ -124,23 +134,32 @@ export default class Dashboard extends PureComponent {
</ChartCard>
</Col>
</Row>
- <Row gutter={24}>
- <Col xs={24} sm={24} md={24} lg={16} xl={16} style={{ marginTop: 24 }}>
+ <Row gutter={8}>
+ <Col xs={24} sm={24} md={24} lg={16} xl={16} style={{ marginTop: 8 }}>
<Card
title="Slow Service"
bordered={false}
bodyStyle={{ padding: '0px 10px' }}
>
- <Ranking data={data.getTopNSlowService} title="name" content="avgResponseTime" unit="ms" />
+ <RankList
+ data={data.getTopNSlowService}
+ renderValue={_ => `${_.value} ms`}
+ onClick={(key, item) => redirect(this.props.history, '/service', { key, label: item.label })}
+ />
</Card>
</Col>
- <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
+ <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 8 }}>
<Card
title="Application Throughput"
bordered={false}
bodyStyle={{ padding: '0px 10px' }}
>
- <Ranking data={data.getTopNApplicationThroughput} title="applicationCode" content="callsPerSec" unit="t/s" />
+ <RankList
+ data={data.getTopNApplicationThroughput}
+ renderValue={_ => `${_.value} cps`}
+ color="#965fe466"
+ onClick={(key, item) => redirect(this.props.history, '/application', { key, label: item.label })}
+ />
</Card>
</Col>
</Row>
diff --git a/src/utils/utils.js b/src/utils/utils.js
index 944cc37..2969ebf 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -114,3 +114,10 @@ export function getServerId(serverInfo) {
}
return `${serverInfo.pid}@${host}`;
}
+
+export function redirect(history, pathname, param) {
+ if (history.location.pathname === pathname) {
+ return;
+ }
+ history.push({ pathname, state: param });
+}
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.