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/08 16:13:32 UTC
[incubator-skywalking-ui] 04/05: Fetching service data
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 de65603af4af3f885983a66ca6bb35e49ff22448
Author: gaohongtao <ha...@gmail.com>
AuthorDate: Mon Jan 8 23:36:25 2018 +0800
Fetching service data
---
src/main/frontend/.roadhogrc.mock.js | 15 ++-
src/main/frontend/src/models/service.js | 26 ++++-
src/main/frontend/src/routes/Service/Service.js | 140 ++++++++----------------
3 files changed, 79 insertions(+), 102 deletions(-)
diff --git a/src/main/frontend/.roadhogrc.mock.js b/src/main/frontend/.roadhogrc.mock.js
index 7b4c343..d25ea2d 100644
--- a/src/main/frontend/.roadhogrc.mock.js
+++ b/src/main/frontend/.roadhogrc.mock.js
@@ -35,7 +35,6 @@ const proxy = mockjs.mock({
'getServerThroughput|10': [{'key|+1': 1, 'name': '@name', 'tps|100-10000': 1}],
}
},
-
'POST /api/server': {
data: {
'searchServer|5': [{}],
@@ -60,6 +59,20 @@ const proxy = mockjs.mock({
},
}
},
+ 'POST /api/service': {
+ data: {
+ 'searchService|5': [{}],
+ getServiceResponseTimeTrend: {
+ 'trendList|15': ['@natural(100, 1000)'],
+ },
+ getServiceTPSTrend: {
+ 'trendList|15': ['@natural(500, 10000)'],
+ },
+ getServiceSLATrend: {
+ 'trendList|15': ['@natural(80, 100)'],
+ },
+ }
+ },
});
export default noProxy ? {} : delay(proxy, 1000);
diff --git a/src/main/frontend/src/models/service.js b/src/main/frontend/src/models/service.js
index 3954394..0149b09 100644
--- a/src/main/frontend/src/models/service.js
+++ b/src/main/frontend/src/models/service.js
@@ -1,17 +1,35 @@
-// import { xxx } from '../services/xxx';
+import { query } from '../services/graphql';
+
export default {
- namespace: "service",
- state: {},
+ namespace: 'service',
+ state: {
+ searchService: [],
+ getServiceResponseTimeTrend: {
+ trendList: [],
+ },
+ getServiceTPSTrend: {
+ trendList: [],
+ },
+ getServiceSLATrend: {
+ trendList: [],
+ },
+ },
effects: {
*fetch({ payload }, { call, put }) {
+ const response = yield call(query, 'service', payload);
+ yield put({
+ type: 'save',
+ payload: response,
+ });
},
},
+
reducers: {
save(state, action) {
return {
...state,
+ ...action.payload.data,
};
},
},
};
-
diff --git a/src/main/frontend/src/routes/Service/Service.js b/src/main/frontend/src/routes/Service/Service.js
index e459d54..4e4fdc5 100644
--- a/src/main/frontend/src/routes/Service/Service.js
+++ b/src/main/frontend/src/routes/Service/Service.js
@@ -1,76 +1,39 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
import { connect } from 'dva';
-import { Row, Col, Select, Card, Tooltip, Icon, Table } from 'antd';
-import moment from 'moment';
+import { Row, Col, Select, Card } from 'antd';
import {
ChartCard, MiniArea, MiniBar,
} from '../../components/Charts';
+import { timeRange } from '../../utils/utils';
+
+const { Option } = Select;
@connect(state => ({
service: state.service,
+ duration: state.global.duration,
}))
-export default class Dashboard extends PureComponent {
- render() {
- const visitData = [];
- const beginDay = new Date().getTime();
-
- const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
- for (let i = 0; i < fakeY.length; i += 1) {
- visitData.push({
- x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
- y: fakeY[i],
+export default class Service extends Component {
+ shouldComponentUpdate(nextProps) {
+ if (this.props.duration !== nextProps.duration) {
+ this.props.dispatch({
+ type: 'service/fetch',
+ payload: {},
});
}
- function handleChange(value) {
- console.log(`selected ${value}`);
- }
- function handleBlur() {
- console.log('blur');
- }
-
- function handleFocus() {
- console.log('focus');
- }
- const tableColumns = [{
- title: 'Time',
- dataIndex: 'time',
- key: 'time',
- }, {
- title: 'Entry',
- dataIndex: 'name',
- key: 'name',
- }, {
- title: 'Duration',
- dataIndex: 'duration',
- key: 'duration',
- }];
- const { Option } = Select;
- const slowServiceData = [{
- key: '1',
- name: 'ServiceA',
- time: '2017/12/11 19:22:32',
- duration: '5000ms',
- }, {
- key: '1',
- name: 'ServiceA',
- time: '2017/12/11 19:22:32',
- duration: '5000ms',
- }, {
- key: '1',
- name: 'ServiceA',
- time: '2017/12/11 19:22:32',
- duration: '5000ms',
- }, {
- key: '1',
- name: 'ServiceA',
- time: '2017/12/11 19:22:32',
- duration: '5000ms',
- }, {
- key: '1',
- name: 'ServiceA',
- time: '2017/12/11 19:22:32',
- duration: '5000ms',
- }];
+ return this.props.service !== nextProps.service;
+ }
+ handleChange(serviceId) {
+ this.props.dispatch({
+ type: 'service/fetch',
+ payload: { serviceId },
+ });
+ }
+ avg = list => (list.length > 0 ?
+ (list.reduce((acc, curr) => acc + curr) / list.length).toFixed(2) : 0)
+ render() {
+ const { getServiceResponseTimeTrend, getServiceTPSTrend,
+ getServiceSLATrend } = this.props.service;
+ const timeRangeArray = timeRange(this.props.duration);
return (
<div>
<Select
@@ -78,81 +41,64 @@ export default class Dashboard extends PureComponent {
style={{ width: 200 }}
placeholder="Select a service"
optionFilterProp="children"
- onChange={handleChange}
- onFocus={handleFocus}
- onBlur={handleBlur}
+ onChange={this.handleChange.bind(this)}
>
<Option value="Service1">Service1</Option>
- <Option value="Service1">Service1</Option>
- <Option value="Service1">Service1</Option>
+ <Option value="Service2">Service2</Option>
+ <Option value="Service3">Service3</Option>
</Select>
<Row gutter={24}>
<Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
<ChartCard
title="Avg Throughout"
- action={<Tooltip title="Tip"><Icon type="info-circle-o" /></Tooltip>}
- total="500 tps"
+ total={`${this.avg(getServiceTPSTrend.trendList)}`}
>
<MiniArea
+ animate={false}
color="#975FE4"
height={46}
- data={visitData}
+ data={getServiceTPSTrend.trendList
+ .map((v, i) => { return { x: timeRangeArray[i], y: v }; })}
/>
</ChartCard>
</Col>
<Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
<ChartCard
title="Avg Response Time"
- action={<Tooltip title="Tip"><Icon type="info-circle-o" /></Tooltip>}
- total="300 ms"
+ total={`${this.avg(getServiceResponseTimeTrend.trendList)} ms`}
>
<MiniArea
- color="#975FE4"
+ animate={false}
height={46}
- data={visitData}
+ data={getServiceResponseTimeTrend.trendList
+ .map((v, i) => { return { x: timeRangeArray[i], y: v }; })}
/>
</ChartCard>
</Col>
<Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
<ChartCard
title="Avg SLA"
- action={<Tooltip title="Tip"><Icon type="info-circle-o" /></Tooltip>}
- total="95.5%"
+ total={`${this.avg(getServiceSLATrend.trendList)} %`}
>
<MiniBar
+ animate={false}
height={46}
- data={visitData}
+ data={getServiceSLATrend.trendList
+ .map((v, i) => { return { x: timeRangeArray[i], y: v }; })}
/>
</ChartCard>
</Col>
</Row>
<Row gutter={24}>
- <Col xs={24} sm={24} md={24} lg={16} xl={16} style={{ marginTop: 24 }}>
+ <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: 24 }}>
<Card
bordered={false}
bodyStyle={{ padding: 0 }}
>
- <div Style="height: 430px">The toplogy of service dependencies</div>
- </Card>
- </Col>
- <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
- <Card
- title="Slow Trace"
- bordered={false}
- bodyStyle={{ padding: 0 }}
- >
- <Table
- columns={tableColumns}
- dataSource={slowServiceData}
- pagination={{
- style: { marginBottom: 0 },
- pageSize: 5,
- }}
- />
+ <div style={{ height: 430 }}>The toplogy of service dependencies</div>
</Card>
</Col>
</Row>
-
</div>
);
}
--
To stop receiving notification emails like this one, please contact
"commits@skywalking.apache.org" <co...@skywalking.apache.org>.