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 2017/12/22 15:08:43 UTC
[incubator-skywalking-ui] 01/03: App application demo page
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 <ha...@gmail.com>
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
"commits@skywalking.apache.org" <co...@skywalking.apache.org>.