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 e59b586a541e2240111b9dbbaf6a44aa6bcf4034 Author: gaohongtao <[email protected]> AuthorDate: Thu Dec 21 11:09:34 2017 +0800 App application demo page --- src/main/frontend/src/common/nav.js | 6 + src/main/frontend/src/layouts/BasicLayout.js | 82 +++++++---- .../src/models/{dashboard.js => application.js} | 2 +- src/main/frontend/src/models/dashboard.js | 2 +- .../src/models/{dashboard.js => service.js} | 3 +- .../frontend/src/routes/Application/Application.js | 155 +++++++++++++++++++++ .../src/routes/Application/Application.less | 28 ++++ .../frontend/src/routes/Dashboard/Dashboard.js | 10 +- 8 files changed, 249 insertions(+), 39 deletions(-) diff --git a/src/main/frontend/src/common/nav.js b/src/main/frontend/src/common/nav.js index 2d7e9dd..bcc54bd 100644 --- a/src/main/frontend/src/common/nav.js +++ b/src/main/frontend/src/common/nav.js @@ -21,6 +21,12 @@ export const getNavData = app => [ path: 'dashboard', component: dynamicWrapper(app, ['dashboard'], () => import('../routes/Dashboard/Dashboard')), }, + { + name: 'Application', + icon: 'application', + path: 'application', + component: dynamicWrapper(app, ['application'], () => import('../routes/Application/Application')), + }, ], }, ]; diff --git a/src/main/frontend/src/layouts/BasicLayout.js b/src/main/frontend/src/layouts/BasicLayout.js index 457b2cb..0214ae8 100644 --- a/src/main/frontend/src/layouts/BasicLayout.js +++ b/src/main/frontend/src/layouts/BasicLayout.js @@ -4,7 +4,7 @@ import DocumentTitle from 'react-document-title'; import { connect } from 'dva'; import { Link, Route, Redirect, Switch } from 'dva/router'; -import { Layout, Menu, Icon, Dropdown, Tag, message } from 'antd'; +import { Layout, Menu, Icon, Dropdown, Tag } from 'antd'; import NoticeIcon from 'ant-design-pro/lib/NoticeIcon'; import GlobalFooter from 'ant-design-pro/lib/GlobalFooter'; @@ -221,22 +221,8 @@ class BasicLayout extends React.PureComponent { window.dispatchEvent(event); }, 600); } - handleNoticeClear = (type) => { - message.success(`清空了${type}`); - this.props.dispatch({ - type: 'global/clearNotices', - payload: type, - }); - } - handleNoticeVisibleChange = (visible) => { - if (visible) { - this.props.dispatch({ - type: 'global/fetchNotices', - }); - } - } render() { - const { currentUser, collapsed, fetchingNotices, getRouteData } = this.props; + const { collapsed, getRouteData } = this.props; const menu = ( <Menu selectedKeys={['1']} onClick={this.onMenuClick}> @@ -244,8 +230,6 @@ class BasicLayout extends React.PureComponent { <Menu.Item key="2">Last 1 hour</Menu.Item> </Menu> ); - const noticeData = this.getNoticeData(); - // Don't show popup menu when it is been collapsed const menuProps = collapsed ? {} : { openKeys: this.state.openKeys, @@ -293,26 +277,66 @@ class BasicLayout extends React.PureComponent { </Dropdown> <NoticeIcon className={styles.action} - count={currentUser.notifyCount} + count={3} onItemClick={(item, tabProps) => { console.log(item, tabProps); // eslint-disable-line }} - onClear={this.handleNoticeClear} - onPopupVisibleChange={this.handleNoticeVisibleChange} - loading={fetchingNotices} + loading={false} popupAlign={{ offset: [20, -16] }} + locale={{ + emptyText: 'No alert', + clear: 'Clear ', + }} > <NoticeIcon.Tab - list={noticeData['告警']} - title="告警" - emptyText="无告警信息" + list={[{ + id: '000000001', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', + title: 'Appliction A error', + datetime: '2017-08-09', + type: 'app-alert', + }, { + id: '000000002', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png', + title: 'Appliction A error', + datetime: '2017-08-08', + type: 'app-alert', + }, { + id: '000000003', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png', + title: 'Appliction A error', + datetime: '2017-08-07', + read: true, + type: 'app-alert', + }]} + title="Application" + emptyText="No alert" emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"; /> <NoticeIcon.Tab - list={noticeData['消息']} - title="消息" - emptyText="您已读完所有消息" - emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"; + list={[{ + id: '000000001', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', + title: 'Server A error', + datetime: '2017-08-09', + type: 'server-alert', + }, { + id: '000000002', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png', + title: 'Server A error', + datetime: '2017-08-08', + type: 'server-alert', + }, { + id: '000000003', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png', + title: 'Service A error', + datetime: '2017-08-07', + read: true, + type: 'server-alert', + }]} + title="Server" + emptyText="No alert" + emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"; /> </NoticeIcon> </div> diff --git a/src/main/frontend/src/models/dashboard.js b/src/main/frontend/src/models/application.js similarity index 90% copy from src/main/frontend/src/models/dashboard.js copy to src/main/frontend/src/models/application.js index 8370d25..2e1190a 100644 --- a/src/main/frontend/src/models/dashboard.js +++ b/src/main/frontend/src/models/application.js @@ -1,6 +1,6 @@ // import { xxx } from '../services/xxx'; export default { - namespace: 'dashboar', + namespace: 'dashboard', state: {}, effects: { *fetch({ payload }, { call, put }) { diff --git a/src/main/frontend/src/models/dashboard.js b/src/main/frontend/src/models/dashboard.js index 8370d25..2e1190a 100644 --- a/src/main/frontend/src/models/dashboard.js +++ b/src/main/frontend/src/models/dashboard.js @@ -1,6 +1,6 @@ // import { xxx } from '../services/xxx'; export default { - namespace: 'dashboar', + namespace: 'dashboard', state: {}, effects: { *fetch({ payload }, { call, put }) { diff --git a/src/main/frontend/src/models/dashboard.js b/src/main/frontend/src/models/service.js similarity index 90% copy from src/main/frontend/src/models/dashboard.js copy to src/main/frontend/src/models/service.js index 8370d25..3954394 100644 --- a/src/main/frontend/src/models/dashboard.js +++ b/src/main/frontend/src/models/service.js @@ -1,6 +1,6 @@ // import { xxx } from '../services/xxx'; export default { - namespace: 'dashboar', + namespace: "service", state: {}, effects: { *fetch({ payload }, { call, put }) { @@ -14,3 +14,4 @@ export default { }, }, }; + diff --git a/src/main/frontend/src/routes/Application/Application.js b/src/main/frontend/src/routes/Application/Application.js new file mode 100644 index 0000000..b316724 --- /dev/null +++ b/src/main/frontend/src/routes/Application/Application.js @@ -0,0 +1,155 @@ +import React, { PureComponent } from 'react'; +import { connect } from 'dva'; +import { Row, Col, Select, Card, Table } from 'antd'; + +@connect(state => ({ + application: state.application, +})) +export default class Dashboard extends PureComponent { + render() { + function handleChange(value) { + console.log(`selected ${value}`); + } + function handleBlur() { + console.log('blur'); + } + + function handleFocus() { + console.log('focus'); + } + const tableColumns = [{ + title: 'Name', + 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', + }]; + + const applicationThroughputColumns = [{ + title: 'Name', + dataIndex: 'name', + key: 'name', + }, { + title: 'Tps', + dataIndex: 'tps', + key: 'tps', + }]; + + const applicationThroughputData = [{ + key: '1', + name: 'Server1', + tps: '500', + }, { + key: '1', + name: 'Server1', + tps: '500', + }, { + key: '1', + name: 'Server1', + tps: '500', + }, { + key: '1', + name: 'Server1', + tps: '500', + }, { + key: '1', + name: 'Server1', + tps: '500', + }]; + + const middleColResponsiveProps = { + xs: 24, + sm: 24, + md: 12, + lg: 12, + xl: 12, + style: { marginBottom: 24, marginTop: 24 }, + }; + return ( + <div> + <Select + showSearch + style={{ width: 200 }} + placeholder="Select a application" + optionFilterProp="children" + onChange={handleChange} + onFocus={handleFocus} + onBlur={handleBlur} + > + <Option value="App1">App1</Option> + <Option value="App2">App2</Option> + <Option value="App3">App3</Option> + </Select> + <Card + bordered={false} + bodyStyle={{ padding: 0, marginTop: 24 }} + > + <div Style="height: 400px">Application and externel resources(Db, Cache or MQ) Topoloy</div> + </Card> + <Row gutter={24}> + <Col {...middleColResponsiveProps}> + <Card + title="Slow Service" + bordered={false} + bodyStyle={{ padding: 0 }} + > + <Table + columns={tableColumns} + dataSource={slowServiceData} + pagination={{ + style: { marginBottom: 0 }, + pageSize: 5, + }} + /> + </Card> + </Col> + <Col {...middleColResponsiveProps}> + <Card + title="Servers Throughput" + bordered={false} + bodyStyle={{ padding: 0 }} + > + <Table + columns={applicationThroughputColumns} + dataSource={applicationThroughputData} + pagination={{ + style: { marginBottom: 0 }, + pageSize: 5, + }} + /> + </Card> + </Col> + </Row> + </div> + ); + } +} diff --git a/src/main/frontend/src/routes/Application/Application.less b/src/main/frontend/src/routes/Application/Application.less new file mode 100644 index 0000000..8e13f67 --- /dev/null +++ b/src/main/frontend/src/routes/Application/Application.less @@ -0,0 +1,28 @@ +@import "~antd/lib/style/themes/default.less"; +@import "../../utils/utils.less"; + +.mapChart { + padding-top: 24px; + height: 457px; + text-align: center; + img { + display: inline-block; + max-width: 100%; + max-height: 437px; + } +} + +.pieCard :global(.pie-stat) { + font-size: 24px!important; +} + +@media screen and (max-width: @screen-lg) { + .mapChart { + height: auto; + } +} + +.trendText { + margin-left: 8px; + color: @heading-color; +} diff --git a/src/main/frontend/src/routes/Dashboard/Dashboard.js b/src/main/frontend/src/routes/Dashboard/Dashboard.js index 9a5dbae..dc4da92 100644 --- a/src/main/frontend/src/routes/Dashboard/Dashboard.js +++ b/src/main/frontend/src/routes/Dashboard/Dashboard.js @@ -2,13 +2,9 @@ import React, { PureComponent } from 'react'; import { connect } from 'dva'; import { Row, Col, Icon, Tooltip, Card, Table } from 'antd'; import moment from 'moment'; -import numeral from 'numeral'; import { - ChartCard, Pie, MiniArea, MiniBar, MiniProgress, Field, + ChartCard, Pie, MiniArea, Field, } from '../../components/Charts'; -import Trend from '../../components/Trend'; - -import styles from './Dashboard.less'; @connect(state => ({ dashboard: state.dashboard, @@ -168,7 +164,7 @@ export default class Dashboard extends PureComponent { bordered={false} bodyStyle={{ padding: 0 }} > - <div Style="height: 400px">Topoloy</div> + <div Style="height: 480px">Topoloy</div> </Card> <Row gutter={24}> <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: 24 }}> @@ -183,7 +179,7 @@ export default class Dashboard extends PureComponent { color="#D87093" borderColor="#B22222" line="true" - height={196} + height={96} data={visitData} yAxis={{ formatter(val) { -- 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}
![https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"](https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"){kind=link}