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 48199b3e8e5df2c33f80c44f9e4650608d8520b4 Author: gaohongtao <[email protected]> AuthorDate: Thu Dec 21 14:59:01 2017 +0800 Add service demo page --- src/main/frontend/src/common/nav.js | 6 + src/main/frontend/src/layouts/BasicLayout.js | 6 +- src/main/frontend/src/routes/Service/Service.js | 159 ++++++++++++++++++++++ src/main/frontend/src/routes/Service/Service.less | 0 4 files changed, 168 insertions(+), 3 deletions(-) diff --git a/src/main/frontend/src/common/nav.js b/src/main/frontend/src/common/nav.js index bcc54bd..7677c3d 100644 --- a/src/main/frontend/src/common/nav.js +++ b/src/main/frontend/src/common/nav.js @@ -27,6 +27,12 @@ export const getNavData = app => [ path: 'application', component: dynamicWrapper(app, ['application'], () => import('../routes/Application/Application')), }, + { + name: 'Service', + icon: 'service', + path: 'service', + component: dynamicWrapper(app, ['service'], () => import('../routes/Service/Service')), + }, ], }, ]; diff --git a/src/main/frontend/src/layouts/BasicLayout.js b/src/main/frontend/src/layouts/BasicLayout.js index 0214ae8..f3d0627 100644 --- a/src/main/frontend/src/layouts/BasicLayout.js +++ b/src/main/frontend/src/layouts/BasicLayout.js @@ -285,7 +285,7 @@ class BasicLayout extends React.PureComponent { popupAlign={{ offset: [20, -16] }} locale={{ emptyText: 'No alert', - clear: 'Clear ', + clear: 'More ', }} > <NoticeIcon.Tab @@ -309,7 +309,7 @@ class BasicLayout extends React.PureComponent { read: true, type: 'app-alert', }]} - title="Application" + title="Application Alert" emptyText="No alert" emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"; /> @@ -334,7 +334,7 @@ class BasicLayout extends React.PureComponent { read: true, type: 'server-alert', }]} - title="Server" + title="Server Alert" emptyText="No alert" emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"; /> diff --git a/src/main/frontend/src/routes/Service/Service.js b/src/main/frontend/src/routes/Service/Service.js new file mode 100644 index 0000000..e459d54 --- /dev/null +++ b/src/main/frontend/src/routes/Service/Service.js @@ -0,0 +1,159 @@ +import React, { PureComponent } from 'react'; +import { connect } from 'dva'; +import { Row, Col, Select, Card, Tooltip, Icon, Table } from 'antd'; +import moment from 'moment'; +import { + ChartCard, MiniArea, MiniBar, +} from '../../components/Charts'; + +@connect(state => ({ + service: state.service, +})) +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], + }); + } + 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 ( + <div> + <Select + showSearch + style={{ width: 200 }} + placeholder="Select a service" + optionFilterProp="children" + onChange={handleChange} + onFocus={handleFocus} + onBlur={handleBlur} + > + <Option value="Service1">Service1</Option> + <Option value="Service1">Service1</Option> + <Option value="Service1">Service1</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" + > + <MiniArea + color="#975FE4" + height={46} + data={visitData} + /> + </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" + > + <MiniArea + color="#975FE4" + height={46} + data={visitData} + /> + </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%" + > + <MiniBar + height={46} + data={visitData} + /> + </ChartCard> + </Col> + </Row> + <Row gutter={24}> + <Col xs={24} sm={24} md={24} lg={16} xl={16} 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, + }} + /> + </Card> + </Col> + </Row> + + </div> + ); + } +} diff --git a/src/main/frontend/src/routes/Service/Service.less b/src/main/frontend/src/routes/Service/Service.less new file mode 100644 index 0000000..e69de29 -- To stop receiving notification emails like this one, please contact "[email protected]" <[email protected]>.
![https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"](https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"){kind=link}