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 7682d98a204e119c25d97b9a9574113ee5444c2c Author: gaohongtao <[email protected]> AuthorDate: Mon Jan 8 23:16:56 2018 +0800 Fetching server data --- src/main/frontend/.roadhogrc.mock.js | 29 +++++- src/main/frontend/src/models/server.js | 35 +++++++- src/main/frontend/src/routes/Server/Server.js | 121 +++++++++----------------- 3 files changed, 102 insertions(+), 83 deletions(-) diff --git a/src/main/frontend/.roadhogrc.mock.js b/src/main/frontend/.roadhogrc.mock.js index 2efbc0e..7b4c343 100644 --- a/src/main/frontend/.roadhogrc.mock.js +++ b/src/main/frontend/.roadhogrc.mock.js @@ -20,10 +20,10 @@ const proxy = mockjs.mock({ 'numOfMQ|1-100': 1, }, getAlarmTrend: { - 'numOfAlarmRate|5': [5, 3, 2,], + 'numOfAlarmRate|15': ['@natural(0, 99)'], }, getConjecturalApps: { - 'apps|3-5': [{'name|1':['Oracle', 'MySQL', 'ActiveMQ', 'Redis', 'Memcache', 'SQLServer'], 'num|1-20':10}], + 'apps|3-5': [{'name|1':['Oracle', 'MySQL', 'ActiveMQ', 'Redis', 'Memcache', 'SQLServer'], 'num':'@natural(1, 20)'}], }, 'getTopNSlowService|10': [{'key|+1': 1, 'name': '@name', 'avgResponseTime|200-1000': 1}], 'getTopNServerThroughput|10': [{'key|+1': 1, 'name': '@name', 'tps|100-10000': 1}], @@ -35,6 +35,31 @@ const proxy = mockjs.mock({ 'getServerThroughput|10': [{'key|+1': 1, 'name': '@name', 'tps|100-10000': 1}], } }, + + 'POST /api/server': { + data: { + 'searchServer|5': [{}], + getServerResponseTimeTrend: { + 'trendList|15': ['@natural(100, 1000)'], + }, + getServerTPSTrend: { + 'trendList|15': ['@natural(500, 10000)'], + }, + getCPUTrend: { + 'cost|15': ['@natural(0, 99)'], + }, + getMemoryTrend: { + 'heap|15': ['@natural(500, 900)'], + 'maxHeap|15': ['@natural(900, 2000)'], + 'noheap|15': ['@natural(100, 200)'], + 'maxNoheap|15': ['@natural(200, 300)'], + }, + getGCTrend: { + 'youngGC|15': ['@natural(200, 300)'], + 'oldGC|15': ['@natural(10,100)'], + }, + } + }, }); export default noProxy ? {} : delay(proxy, 1000); diff --git a/src/main/frontend/src/models/server.js b/src/main/frontend/src/models/server.js index 241cd05..8f13809 100644 --- a/src/main/frontend/src/models/server.js +++ b/src/main/frontend/src/models/server.js @@ -1,15 +1,44 @@ -// import { xxx } from '../services/xxx'; +import { query } from '../services/graphql'; + export default { - namespace: "server", - state: {}, + namespace: 'server', + state: { + searchServer: [], + getServerResponseTimeTrend: { + trendList: [], + }, + getServerTPSTrend: { + trendList: [], + }, + getCPUTrend: { + cost: [], + }, + getMemoryTrend: { + heap: [], + maxHeap: [], + noheap: [], + maxNoheap: [], + }, + getGCTrend: { + youngGC: [], + oldGC: [], + }, + }, effects: { *fetch({ payload }, { call, put }) { + const response = yield call(query, 'server', payload); + yield put({ + type: 'save', + payload: response, + }); }, }, + reducers: { save(state, action) { return { ...state, + ...action.payload.data, }; }, }, diff --git a/src/main/frontend/src/routes/Server/Server.js b/src/main/frontend/src/routes/Server/Server.js index 707fe8f..824be0e 100644 --- a/src/main/frontend/src/routes/Server/Server.js +++ b/src/main/frontend/src/routes/Server/Server.js @@ -1,79 +1,41 @@ -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, Line, } from '../../components/Charts'; import DescriptionList from '../../components/DescriptionList'; +import { timeRange } from '../../utils/utils'; const { Description } = DescriptionList; +const { Option } = Select; @connect(state => ({ - service: state.service, + server: state.server, + 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 Server extends Component { + shouldComponentUpdate(nextProps) { + if (this.props.duration !== nextProps.duration) { + this.props.dispatch({ + type: 'server/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.server !== nextProps.server; + } + handleChange(serverId) { + this.props.dispatch({ + type: 'server/fetch', + payload: { serverId }, + }); + } + avg = list => (list.length > 0 ? + (list.reduce((acc, curr) => acc + curr) / list.length).toFixed(2) : 0) + render() { + const { getServerResponseTimeTrend, getServerTPSTrend, + getCPUTrend, getMemoryTrend, getGCTrend } = this.props.server; + const timeRangeArray = timeRange(this.props.duration); return ( <div> <Select @@ -81,13 +43,11 @@ export default class Dashboard extends PureComponent { style={{ width: 200 }} placeholder="Select a server" optionFilterProp="children" - onChange={handleChange} - onFocus={handleFocus} - onBlur={handleBlur} + onChange={this.handleChange.bind(this)} > <Option value="Server1">Server1</Option> - <Option value="Server1">Server1</Option> - <Option value="Server1">Server1</Option> + <Option value="Server2">Server2</Option> + <Option value="Server3">Server3</Option> </Select> <Card title="Info" style={{ marginTop: 24 }} bordered={false}> <DescriptionList> @@ -101,25 +61,27 @@ export default class Dashboard extends PureComponent { <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 24 }}> <ChartCard title="Avg Response Time" - action={<Tooltip title="Tip"><Icon type="info-circle-o" /></Tooltip>} - total="300 ms" + total={`${this.avg(getServerResponseTimeTrend.trendList)} ms`} > <MiniArea + animate={false} color="#975FE4" height={46} - data={visitData} + data={getServerResponseTimeTrend.trendList + .map((v, i) => { return { x: timeRangeArray[i], y: v }; })} /> </ChartCard> </Col> <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 24 }}> <ChartCard title="Avg TPS" - action={<Tooltip title="Tip"><Icon type="info-circle-o" /></Tooltip>} - total="500" + total={`${this.avg(getServerTPSTrend.trendList)} ms`} > <MiniBar + animate={false} height={46} - data={visitData} + data={getServerTPSTrend.trendList + .map((v, i) => { return { x: timeRangeArray[i], y: v }; })} /> </ChartCard> </Col> @@ -133,7 +95,8 @@ export default class Dashboard extends PureComponent { > <Line height={250} - data={visitData} + data={getCPUTrend.cost + .map((v, i) => { return { x: timeRangeArray[i], y: v }; })} /> </Card> </Col> @@ -147,7 +110,8 @@ export default class Dashboard extends PureComponent { > <Line height={250} - data={visitData} + data={getMemoryTrend.heap + .map((v, i) => { return { x: timeRangeArray[i], y: v }; })} /> </Card> </Col> @@ -161,7 +125,8 @@ export default class Dashboard extends PureComponent { > <Line height={250} - data={visitData} + data={getGCTrend.youngGC + .map((v, i) => { return { x: timeRangeArray[i], y: v }; })} /> </Card> </Col> -- To stop receiving notification emails like this one, please contact "[email protected]" <[email protected]>.
