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/06/29 03:23:49 UTC
[incubator-skywalking-ui] 01/02: Add applicationId to the link is
from topN service list to service page
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch 5.0.0/beta2
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
commit f47233628643621e1169d204ba28b75cbe872929
Author: Gao Hongtao <ha...@gmail.com>
AuthorDate: Fri Jun 29 10:21:41 2018 +0800
Add applicationId to the link is from topN service list to service
page
---
mock/application.js | 2 +-
mock/dashboard.js | 2 +-
src/components/Page/Search/index.js | 3 ++-
src/models/application.js | 8 ++++++--
src/models/dashboard.js | 8 ++++++--
src/models/service.js | 13 +++++++++++++
src/routes/Application/Application.js | 7 +++++--
src/routes/Dashboard/Dashboard.js | 7 +++++--
src/routes/Service/Service.js | 5 +++--
9 files changed, 42 insertions(+), 13 deletions(-)
diff --git a/mock/application.js b/mock/application.js
index 5edd30f..4da9fe8 100644
--- a/mock/application.js
+++ b/mock/application.js
@@ -32,7 +32,7 @@ export default {
res.json(mockjs.mock(
{
data: {
- 'getSlowService|10': [{ 'key|+1': 1, label: '@url', 'value|200-1000': 1 }],
+ 'getSlowService|10': [{ service: { 'key|+1': 1, label: '@url', 'applicationId|+1': 1, applicationName: '@name' }, 'value|200-1000': 1 }],
'getServerThroughput|10': [{
'key|+1': 3,
osName: 'Linux-@name',
diff --git a/mock/dashboard.js b/mock/dashboard.js
index 1c5ef14..0d58909 100644
--- a/mock/dashboard.js
+++ b/mock/dashboard.js
@@ -48,7 +48,7 @@ export default {
},
responseTimeStep: 50,
},
- 'getTopNSlowService|10': [{ 'key|+1': 1, label: '@url', 'value|200-1000': 1 }],
+ 'getTopNSlowService|10': [{ service: { 'key|+1': 1, label: '@url', 'applicationId|+1': 1, applicationName: '@name' }, '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 a7060a8..3337fde 100644
--- a/src/components/Page/Search/index.js
+++ b/src/components/Page/Search/index.js
@@ -36,7 +36,7 @@ export default class Search extends PureComponent {
}
componentDidMount() {
if (this.props.variables && Object.keys(this.props.variables).length > 0) {
- this.originFetchServer('', true);
+ this.originFetchServer('', !this.props.value.key);
}
}
componentDidUpdate(prevProps) {
@@ -49,6 +49,7 @@ export default class Search extends PureComponent {
return;
}
const { url, query, variables = {}, transform } = this.props;
+ console.info(variables);
this.lastFetchId += 1;
const fetchId = this.lastFetchId;
this.setState({ data: [], fetching: true });
diff --git a/src/models/application.js b/src/models/application.js
index 7b04d70..cd40b39 100644
--- a/src/models/application.js
+++ b/src/models/application.js
@@ -31,8 +31,12 @@ const optionsQuery = `
const dataQuery = `
query Application($applicationId: ID!, $duration: Duration!) {
getSlowService(applicationId: $applicationId, duration: $duration, topN: 10) {
- key: id
- label: name
+ service {
+ key: id
+ label: name
+ applicationId
+ applicationName
+ }
value: avgResponseTime
}
getServerThroughput(applicationId: $applicationId, duration: $duration, topN: 999999) {
diff --git a/src/models/dashboard.js b/src/models/dashboard.js
index 58ea75c..b5d14ee 100644
--- a/src/models/dashboard.js
+++ b/src/models/dashboard.js
@@ -55,8 +55,12 @@ export default generateModal({
responseTimeStep
}
getTopNSlowService(duration: $duration, topN: 10) {
- key: id
- label: name
+ service {
+ key: id
+ label: name
+ applicationId
+ applicationName
+ }
value: avgResponseTime
}
getTopNApplicationThroughput(duration: $duration, topN: 10) {
diff --git a/src/models/service.js b/src/models/service.js
index af8dfed..4324b54 100644
--- a/src/models/service.js
+++ b/src/models/service.js
@@ -164,6 +164,9 @@ export default generateModal({
return rawState;
}
const { variables: { values } } = rawState;
+ if (!values.applicationId) {
+ return rawState;
+ }
return {
...rawState,
data: {
@@ -187,17 +190,27 @@ export default generateModal({
setup({ history, dispatch }) {
return history.listen(({ pathname, state }) => {
if (pathname === '/monitor/service' && state) {
+ console.info(state);
dispatch({
type: 'saveVariables',
payload: {
values: {
serviceId: state.key,
+ applicationId: state.applicationId,
},
labels: {
serviceId: state.label,
+ applicationId: state.applicationName,
},
},
});
+ dispatch({
+ type: 'saveData',
+ payload: {
+ appInfo: { applicationId: state.applicationId },
+ serviceInfo: { key: state.key, label: state.label },
+ },
+ });
}
});
},
diff --git a/src/routes/Application/Application.js b/src/routes/Application/Application.js
index 6b9d89c..4bdde2b 100644
--- a/src/routes/Application/Application.js
+++ b/src/routes/Application/Application.js
@@ -200,9 +200,12 @@ export default class Application extends PureComponent {
bodyStyle={{ padding: '0px 10px' }}
>
<RankList
- data={data.getSlowService}
+ data={data.getSlowService.map(_ => ({ ..._.service, value: _.value }))}
renderValue={_ => `${_.value} ms`}
- onClick={(key, item) => redirect(this.props.history, '/monitor/service', { key, label: item.label })}
+ onClick={(key, item) => redirect(this.props.history, '/monitor/service', { key,
+ label: item.label,
+ applicationId: item.applicationId,
+ applicationName: item.applicationName })}
/>
</Card>
</Col>
diff --git a/src/routes/Dashboard/Dashboard.js b/src/routes/Dashboard/Dashboard.js
index 6b454d9..8680d61 100644
--- a/src/routes/Dashboard/Dashboard.js
+++ b/src/routes/Dashboard/Dashboard.js
@@ -150,9 +150,12 @@ export default class Dashboard extends PureComponent {
bodyStyle={{ padding: '0px 10px' }}
>
<RankList
- data={data.getTopNSlowService}
+ data={data.getTopNSlowService.map(_ => ({ ..._.service, value: _.value }))}
renderValue={_ => `${_.value} ms`}
- onClick={(key, item) => redirect(this.props.history, '/monitor/service', { key, label: item.label })}
+ onClick={(key, item) => redirect(this.props.history, '/monitor/service', { key,
+ label: item.label,
+ applicationId: item.applicationId,
+ applicationName: item.applicationName })}
/>
</Card>
</Col>
diff --git a/src/routes/Service/Service.js b/src/routes/Service/Service.js
index cabe194..2bfc47c 100644
--- a/src/routes/Service/Service.js
+++ b/src/routes/Service/Service.js
@@ -99,7 +99,7 @@ export default class Service extends PureComponent {
if (!values.applicationId) {
return;
}
- const { key: serviceId, label: serviceName } = variables;
+ const { key: serviceId, label: serviceName, duration } = variables;
if (!serviceId) {
return;
}
@@ -107,10 +107,11 @@ export default class Service extends PureComponent {
type: 'service/fetchData',
payload: { variables: {
serviceId,
+ duration,
traceCondition: {
applicationId: values.applicationId,
operationName: serviceName,
- queryDuration: variables.duration,
+ queryDuration: duration,
traceState: 'ALL',
queryOrder: 'BY_DURATION',
paging: {