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 <[email protected]> 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 "[email protected]" <[email protected]>.
