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:42 UTC
[incubator-skywalking-ui] branch feature/5.0.0 updated (381f40b ->
1080608)
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a change to branch feature/5.0.0
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git.
from 381f40b Finished dashboard demo
new e59b586 App application demo page
new 48199b3 Add service demo page
new 1080608 First version of demo is finished
The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
src/main/frontend/src/common/nav.js | 24 +++
.../src/components/Charts/{Bar => Line}/index.js | 19 +--
src/main/frontend/src/components/Charts/index.js | 2 +
.../src/components/DescriptionList/Description.js | 17 ++
.../components/DescriptionList/DescriptionList.js | 21 +++
.../src/components/DescriptionList/demo/basic.md | 35 +++++
.../components/DescriptionList/demo/vertical.md | 35 +++++
.../src/components/DescriptionList/index.d.ts | 22 +++
.../src/components/DescriptionList/index.js | 5 +
.../src/components/DescriptionList/index.less | 75 +++++++++
.../src/components/DescriptionList/index.md | 39 +++++
.../src/components/DescriptionList/responsive.js | 6 +
src/main/frontend/src/layouts/BasicLayout.js | 82 ++++++----
.../frontend/src/models/{dashboard.js => alert.js} | 3 +-
.../src/models/{dashboard.js => application.js} | 2 +-
src/main/frontend/src/models/dashboard.js | 2 +-
.../src/models/{dashboard.js => server.js} | 2 +-
.../src/models/{dashboard.js => service.js} | 3 +-
src/main/frontend/src/routes/Alert/Alert.js | 84 ++++++++++
.../{List/TableList.less => Alert/Alert.less} | 5 +
.../frontend/src/routes/Application/Application.js | 155 +++++++++++++++++++
.../Application.less} | 0
.../frontend/src/routes/Dashboard/Dashboard.js | 10 +-
src/main/frontend/src/routes/Server/Server.js | 172 +++++++++++++++++++++
src/main/frontend/src/routes/Service/Service.js | 159 +++++++++++++++++++
.../.gitkeep => src/routes/Service/Service.less} | 0
26 files changed, 925 insertions(+), 54 deletions(-)
copy src/main/frontend/src/components/Charts/{Bar => Line}/index.js (91%)
create mode 100644 src/main/frontend/src/components/DescriptionList/Description.js
create mode 100644 src/main/frontend/src/components/DescriptionList/DescriptionList.js
create mode 100644 src/main/frontend/src/components/DescriptionList/demo/basic.md
create mode 100644 src/main/frontend/src/components/DescriptionList/demo/vertical.md
create mode 100644 src/main/frontend/src/components/DescriptionList/index.d.ts
create mode 100644 src/main/frontend/src/components/DescriptionList/index.js
create mode 100644 src/main/frontend/src/components/DescriptionList/index.less
create mode 100644 src/main/frontend/src/components/DescriptionList/index.md
create mode 100644 src/main/frontend/src/components/DescriptionList/responsive.js
copy src/main/frontend/src/models/{dashboard.js => alert.js} (90%)
copy src/main/frontend/src/models/{dashboard.js => application.js} (90%)
copy src/main/frontend/src/models/{dashboard.js => server.js} (90%)
copy src/main/frontend/src/models/{dashboard.js => service.js} (90%)
create mode 100644 src/main/frontend/src/routes/Alert/Alert.js
copy src/main/frontend/src/routes/{List/TableList.less => Alert/Alert.less} (92%)
create mode 100644 src/main/frontend/src/routes/Application/Application.js
copy src/main/frontend/src/routes/{Dashboard/Dashboard.less => Application/Application.less} (100%)
create mode 100644 src/main/frontend/src/routes/Server/Server.js
create mode 100644 src/main/frontend/src/routes/Service/Service.js
copy src/main/frontend/{mock/.gitkeep => src/routes/Service/Service.less} (100%)
--
To stop receiving notification emails like this one, please contact
['"commits@skywalking.apache.org" <co...@skywalking.apache.org>'].
[incubator-skywalking-ui] 01/03: App application demo page
Posted by ha...@apache.org.
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>.
[incubator-skywalking-ui] 02/03: Add service demo page
Posted by ha...@apache.org.
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 <ha...@gmail.com>
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
"commits@skywalking.apache.org" <co...@skywalking.apache.org>.
[incubator-skywalking-ui] 03/03: First version of demo is finished
Posted by ha...@apache.org.
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 1080608e0dba0b2e1e4ce4e31e1e502580b2e4f2
Author: gaohongtao <ha...@gmail.com>
AuthorDate: Fri Dec 22 23:08:11 2017 +0800
First version of demo is finished
---
src/main/frontend/src/common/nav.js | 12 ++
.../frontend/src/components/Charts/Line/index.js | 144 +++++++++++++++++
src/main/frontend/src/components/Charts/index.js | 2 +
.../src/components/DescriptionList/Description.js | 17 ++
.../components/DescriptionList/DescriptionList.js | 21 +++
.../src/components/DescriptionList/demo/basic.md | 35 +++++
.../components/DescriptionList/demo/vertical.md | 35 +++++
.../src/components/DescriptionList/index.d.ts | 22 +++
.../src/components/DescriptionList/index.js | 5 +
.../src/components/DescriptionList/index.less | 75 +++++++++
.../src/components/DescriptionList/index.md | 39 +++++
.../src/components/DescriptionList/responsive.js | 6 +
src/main/frontend/src/models/alert.js | 17 ++
src/main/frontend/src/models/server.js | 16 ++
src/main/frontend/src/routes/Alert/Alert.js | 84 ++++++++++
src/main/frontend/src/routes/Alert/Alert.less | 50 ++++++
src/main/frontend/src/routes/Server/Server.js | 172 +++++++++++++++++++++
17 files changed, 752 insertions(+)
diff --git a/src/main/frontend/src/common/nav.js b/src/main/frontend/src/common/nav.js
index 7677c3d..cb40d40 100644
--- a/src/main/frontend/src/common/nav.js
+++ b/src/main/frontend/src/common/nav.js
@@ -28,11 +28,23 @@ export const getNavData = app => [
component: dynamicWrapper(app, ['application'], () => import('../routes/Application/Application')),
},
{
+ name: 'Server',
+ icon: 'server',
+ path: 'server',
+ component: dynamicWrapper(app, ['server'], () => import('../routes/Server/Server')),
+ },
+ {
name: 'Service',
icon: 'service',
path: 'service',
component: dynamicWrapper(app, ['service'], () => import('../routes/Service/Service')),
},
+ {
+ name: 'Alert',
+ icon: 'alert',
+ path: 'alert',
+ component: dynamicWrapper(app, ['alert'], () => import('../routes/Alert/Alert')),
+ },
],
},
];
diff --git a/src/main/frontend/src/components/Charts/Line/index.js b/src/main/frontend/src/components/Charts/Line/index.js
new file mode 100644
index 0000000..1a9c9f0
--- /dev/null
+++ b/src/main/frontend/src/components/Charts/Line/index.js
@@ -0,0 +1,144 @@
+import React, { PureComponent } from 'react';
+import G2 from 'g2';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
+import equal from '../equal';
+import styles from '../index.less';
+
+class Line extends PureComponent {
+ state = {
+ autoHideXLabels: false,
+ }
+
+ componentDidMount() {
+ this.renderChart(this.props.data);
+
+ window.addEventListener('resize', this.resize);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if (!equal(this.props, nextProps)) {
+ this.renderChart(nextProps.data);
+ }
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.resize);
+ if (this.chart) {
+ this.chart.destroy();
+ }
+ this.resize.cancel();
+ }
+
+ @Bind()
+ @Debounce(200)
+ resize() {
+ if (!this.node) {
+ return;
+ }
+ const canvasWidth = this.node.parentNode.clientWidth;
+ const { data = [], autoLabel = true } = this.props;
+ if (!autoLabel) {
+ return;
+ }
+ const minWidth = data.length * 30;
+ const { autoHideXLabels } = this.state;
+
+ if (canvasWidth <= minWidth) {
+ if (!autoHideXLabels) {
+ this.setState({
+ autoHideXLabels: true,
+ });
+ this.renderChart(data);
+ }
+ } else if (autoHideXLabels) {
+ this.setState({
+ autoHideXLabels: false,
+ });
+ this.renderChart(data);
+ }
+ }
+
+ handleRef = (n) => {
+ this.node = n;
+ }
+
+ renderChart(data) {
+ const { autoHideXLabels } = this.state;
+ const {
+ height = 0,
+ fit = true,
+ margin = [32, 0, (autoHideXLabels ? 8 : 32), 40],
+ } = this.props;
+
+
+ if (!data || (data && data.length < 1)) {
+ return;
+ }
+
+ // clean
+ this.node.innerHTML = '';
+
+ const { Frame } = G2;
+ const frame = new Frame(data);
+
+ const chart = new G2.Chart({
+ container: this.node,
+ forceFit: fit,
+ legend: null,
+ height: height - 22,
+ plotCfg: {
+ margin,
+ },
+ });
+ if (autoHideXLabels) {
+ chart.axis('x', {
+ title: false,
+ tickLine: false,
+ labels: false,
+ });
+ } else {
+ chart.axis('x', {
+ title: false,
+ });
+ }
+ chart.axis('y', {
+ title: false,
+ line: false,
+ tickLine: false,
+ });
+ chart.source(frame, {
+ x: {
+ type: 'cat',
+ },
+ y: {
+ min: 0,
+ },
+ });
+ chart.tooltip({
+ title: null,
+ crosshairs: {
+ type: 'line',
+ },
+ });
+ chart.line().position('x*y');
+ chart.render();
+
+ this.chart = chart;
+ }
+
+ render() {
+ const { height, title } = this.props;
+
+ return (
+ <div className={styles.chart} style={{ height }}>
+ <div>
+ { title && <h4>{title}</h4>}
+ <div ref={this.handleRef} />
+ </div>
+ </div>
+ );
+ }
+}
+
+export default Line;
diff --git a/src/main/frontend/src/components/Charts/index.js b/src/main/frontend/src/components/Charts/index.js
index cea9949..bed2e72 100644
--- a/src/main/frontend/src/components/Charts/index.js
+++ b/src/main/frontend/src/components/Charts/index.js
@@ -1,6 +1,7 @@
import numeral from 'numeral';
import ChartCard from './ChartCard';
import Bar from './Bar';
+import Line from './Line';
import Pie from './Pie';
import Radar from './Radar';
import Gauge from './Gauge';
@@ -17,6 +18,7 @@ const yuan = val => `¥ ${numeral(val).format('0,0')}`;
export default {
yuan,
Bar,
+ Line,
Pie,
Gauge,
Radar,
diff --git a/src/main/frontend/src/components/DescriptionList/Description.js b/src/main/frontend/src/components/DescriptionList/Description.js
new file mode 100644
index 0000000..2aae62b
--- /dev/null
+++ b/src/main/frontend/src/components/DescriptionList/Description.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Col } from 'antd';
+import styles from './index.less';
+import responsive from './responsive';
+
+const Description = ({ term, column, className, children, ...restProps }) => {
+ const clsString = classNames(styles.description, className);
+ return (
+ <Col className={clsString} {...responsive[column]} {...restProps}>
+ {term && <div className={styles.term}>{term}</div>}
+ {children && <div className={styles.detail}>{children}</div>}
+ </Col>
+ );
+};
+
+export default Description;
diff --git a/src/main/frontend/src/components/DescriptionList/DescriptionList.js b/src/main/frontend/src/components/DescriptionList/DescriptionList.js
new file mode 100644
index 0000000..7eca3a7
--- /dev/null
+++ b/src/main/frontend/src/components/DescriptionList/DescriptionList.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Row } from 'antd';
+import styles from './index.less';
+
+export default ({ className, title, col = 3, layout = 'horizontal', gutter = 32,
+ children, size, ...restProps }) => {
+ const clsString = classNames(styles.descriptionList, styles[layout], className, {
+ [styles.descriptionListSmall]: size === 'small',
+ [styles.descriptionListLarge]: size === 'large',
+ });
+ const column = col > 4 ? 4 : col;
+ return (
+ <div className={clsString} {...restProps}>
+ {title ? <div className={styles.title}>{title}</div> : null}
+ <Row gutter={gutter}>
+ {React.Children.map(children, child => React.cloneElement(child, { column }))}
+ </Row>
+ </div>
+ );
+};
diff --git a/src/main/frontend/src/components/DescriptionList/demo/basic.md b/src/main/frontend/src/components/DescriptionList/demo/basic.md
new file mode 100644
index 0000000..8dd8534
--- /dev/null
+++ b/src/main/frontend/src/components/DescriptionList/demo/basic.md
@@ -0,0 +1,35 @@
+---
+order: 0
+title: Basic
+---
+
+基本描述列表。
+
+````jsx
+import DescriptionList from 'ant-design-pro/lib/DescriptionList';
+
+const { Description } = DescriptionList;
+
+ReactDOM.render(
+ <DescriptionList size="large" title="title">
+ <Description term="Firefox">
+ A free, open source, cross-platform,
+ graphical web browser developed by the
+ Mozilla Corporation and hundreds of
+ volunteers.
+ </Description>
+ <Description term="Firefox">
+ A free, open source, cross-platform,
+ graphical web browser developed by the
+ Mozilla Corporation and hundreds of
+ volunteers.
+ </Description>
+ <Description term="Firefox">
+ A free, open source, cross-platform,
+ graphical web browser developed by the
+ Mozilla Corporation and hundreds of
+ volunteers.
+ </Description>
+ </DescriptionList>
+, mountNode);
+````
diff --git a/src/main/frontend/src/components/DescriptionList/demo/vertical.md b/src/main/frontend/src/components/DescriptionList/demo/vertical.md
new file mode 100644
index 0000000..a304f94
--- /dev/null
+++ b/src/main/frontend/src/components/DescriptionList/demo/vertical.md
@@ -0,0 +1,35 @@
+---
+order: 1
+title: Vertical
+---
+
+垂直布局。
+
+````jsx
+import DescriptionList from 'ant-design-pro/lib/DescriptionList';
+
+const { Description } = DescriptionList;
+
+ReactDOM.render(
+ <DescriptionList size="large" title="title" layout="vertical">
+ <Description term="Firefox">
+ A free, open source, cross-platform,
+ graphical web browser developed by the
+ Mozilla Corporation and hundreds of
+ volunteers.
+ </Description>
+ <Description term="Firefox">
+ A free, open source, cross-platform,
+ graphical web browser developed by the
+ Mozilla Corporation and hundreds of
+ volunteers.
+ </Description>
+ <Description term="Firefox">
+ A free, open source, cross-platform,
+ graphical web browser developed by the
+ Mozilla Corporation and hundreds of
+ volunteers.
+ </Description>
+ </DescriptionList>
+, mountNode);
+````
diff --git a/src/main/frontend/src/components/DescriptionList/index.d.ts b/src/main/frontend/src/components/DescriptionList/index.d.ts
new file mode 100644
index 0000000..b13c630
--- /dev/null
+++ b/src/main/frontend/src/components/DescriptionList/index.d.ts
@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface DescriptionListProps {
+ layout?: "horizontal" | "vertical";
+ col?: number;
+ title: React.ReactNode;
+ gutter?: number;
+ size?: "large" | "small";
+}
+
+declare class Description extends React.Component<
+ {
+ term: React.ReactNode;
+ },
+ any
+> {}
+
+export default class DescriptionList extends React.Component<
+ DescriptionListProps,
+ any
+> {
+ static Description: typeof Description;
+}
diff --git a/src/main/frontend/src/components/DescriptionList/index.js b/src/main/frontend/src/components/DescriptionList/index.js
new file mode 100644
index 0000000..357f479
--- /dev/null
+++ b/src/main/frontend/src/components/DescriptionList/index.js
@@ -0,0 +1,5 @@
+import DescriptionList from './DescriptionList';
+import Description from './Description';
+
+DescriptionList.Description = Description;
+export default DescriptionList;
diff --git a/src/main/frontend/src/components/DescriptionList/index.less b/src/main/frontend/src/components/DescriptionList/index.less
new file mode 100644
index 0000000..067144e
--- /dev/null
+++ b/src/main/frontend/src/components/DescriptionList/index.less
@@ -0,0 +1,75 @@
+@import "~antd/lib/style/themes/default.less";
+
+.descriptionList {
+ // offset the padding-bottom of last row
+ :global {
+ .ant-row {
+ margin-bottom: -16px;
+ overflow: hidden;
+ }
+ }
+
+ .title {
+ font-size: 14px;
+ color: @heading-color;
+ font-weight: 500;
+ margin-bottom: 16px;
+ }
+
+ .term {
+ line-height: 22px;
+ padding-bottom: 16px;
+ margin-right: 8px;
+ color: @heading-color;
+ white-space: nowrap;
+ display: table-cell;
+
+ &:after {
+ content: ":";
+ margin: 0 8px 0 2px;
+ position: relative;
+ top: -.5px;
+ }
+ }
+
+ .detail {
+ line-height: 22px;
+ width: 100%;
+ padding-bottom: 16px;
+ color: @text-color;
+ display: table-cell;
+ }
+
+ &.vertical {
+
+ .term {
+ padding-bottom: 8px;
+ display: block;
+ }
+
+ .detail {
+ display: block;
+ }
+ }
+}
+
+.descriptionListSmall {
+ // offset the padding-bottom of last row
+ :global {
+ .ant-row {
+ margin-bottom: -8px;
+ }
+ }
+ .title {
+ margin-bottom: 12px;
+ color: @text-color;
+ }
+ .term, .detail {
+ padding-bottom: 8px;
+ }
+}
+.descriptionListLarge {
+ .title {
+ font-size: 16px;
+ }
+}
diff --git a/src/main/frontend/src/components/DescriptionList/index.md b/src/main/frontend/src/components/DescriptionList/index.md
new file mode 100644
index 0000000..bfa60cb
--- /dev/null
+++ b/src/main/frontend/src/components/DescriptionList/index.md
@@ -0,0 +1,39 @@
+---
+title:
+ en-US: DescriptionList
+ zh-CN: DescriptionList
+subtitle: 描述列表
+cols: 1
+order: 4
+---
+
+成组展示多个只读字段，常见于详情页的信息展示。
+
+## API
+
+### DescriptionList
+
+| 参数 | 说明 | 类型 | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| layout | 布局方式 | Enum{'horizontal', 'vertical'} | 'horizontal' |
+| col | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定 | number(0 < col <= 4) | 3 |
+| title | 列表标题 | ReactNode | - |
+| gutter | 列表项间距，单位为 `px` | number | 32 |
+| size | 列表型号，可以设置为 `large` `small` | Enum{'large', 'small'} | - |
+
+#### 响应式规则
+
+| 窗口宽度 | 展示列数 |
+|---------------------|---------------------------------------------|
+| `≥768px` | `col` |
+| `≥576px` | `col < 2 ? col : 2` |
+| `<576px` | `1` |
+
+### DescriptionList.Description
+
+| 参数 | 说明 | 类型 | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| term | 列表项标题 | ReactNode | - |
+
+
+
diff --git a/src/main/frontend/src/components/DescriptionList/responsive.js b/src/main/frontend/src/components/DescriptionList/responsive.js
new file mode 100644
index 0000000..a5aa73f
--- /dev/null
+++ b/src/main/frontend/src/components/DescriptionList/responsive.js
@@ -0,0 +1,6 @@
+export default {
+ 1: { xs: 24 },
+ 2: { xs: 24, sm: 12 },
+ 3: { xs: 24, sm: 12, md: 8 },
+ 4: { xs: 24, sm: 12, md: 6 },
+};
diff --git a/src/main/frontend/src/models/alert.js b/src/main/frontend/src/models/alert.js
new file mode 100644
index 0000000..ccd3380
--- /dev/null
+++ b/src/main/frontend/src/models/alert.js
@@ -0,0 +1,17 @@
+// import { xxx } from '../services/xxx';
+export default {
+ namespace: "alert",
+ state: {},
+ effects: {
+ *fetch({ payload }, { call, put }) {
+ },
+ },
+ reducers: {
+ save(state, action) {
+ return {
+ ...state,
+ };
+ },
+ },
+};
+
diff --git a/src/main/frontend/src/models/server.js b/src/main/frontend/src/models/server.js
new file mode 100644
index 0000000..241cd05
--- /dev/null
+++ b/src/main/frontend/src/models/server.js
@@ -0,0 +1,16 @@
+// import { xxx } from '../services/xxx';
+export default {
+ namespace: "server",
+ state: {},
+ effects: {
+ *fetch({ payload }, { call, put }) {
+ },
+ },
+ reducers: {
+ save(state, action) {
+ return {
+ ...state,
+ };
+ },
+ },
+};
diff --git a/src/main/frontend/src/routes/Alert/Alert.js b/src/main/frontend/src/routes/Alert/Alert.js
new file mode 100644
index 0000000..34ea5b3
--- /dev/null
+++ b/src/main/frontend/src/routes/Alert/Alert.js
@@ -0,0 +1,84 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'dva';
+import { Card, Table, Input } from 'antd';
+import styles from './Alert.less';
+
+const { Search } = Input;
+
+@connect(state => ({
+ alert: state.alert,
+}))
+export default class Alert extends PureComponent {
+ render() {
+ const columns = [{
+ title: 'Content',
+ dataIndex: 'content',
+ }, {
+ title: 'Start Time',
+ dataIndex: 'time',
+ }, {
+ title: 'Alert Type',
+ dataIndex: 'type',
+ filters: [{
+ text: 'Application',
+ value: 'Application',
+ }, {
+ text: 'Server',
+ value: 'Server',
+ }, {
+ text: 'Service',
+ value: 'Service',
+ }],
+ filterMultiple: false,
+ onFilter: (value, record) => record.type.indexOf(value) === 0,
+ }];
+
+ const data = [{
+ key: '1',
+ content: 'Application alert',
+ time: '19:30',
+ type: 'Application',
+ }, {
+ key: '2',
+ content: 'Server is down',
+ time: '13:30',
+ type: 'Server',
+ }, {
+ key: '3',
+ content: 'Server is slow',
+ time: '8:30',
+ type: 'Service',
+ }, {
+ key: '4',
+ content: 'Service sla is low',
+ time: '3:30',
+ type: 'Service',
+ }];
+
+ function onChange(pagination, filters, sorter) {
+ console.log('params', pagination, filters, sorter);
+ }
+
+ const extraContent = (
+ <div className={styles.extraContent}>
+ <Search
+ className={styles.extraContentSearch}
+ placeholder="Search..."
+ onSearch={() => ({})}
+ />
+ </div>
+ );
+
+ return (
+ <Card
+ title="Alert List"
+ bordered={false}
+ extra={extraContent}
+ >
+ <div className={styles.tableList}>
+ <Table columns={columns} dataSource={data} onChange={onChange} />
+ </div>
+ </Card>
+ );
+ }
+}
diff --git a/src/main/frontend/src/routes/Alert/Alert.less b/src/main/frontend/src/routes/Alert/Alert.less
new file mode 100644
index 0000000..b10d030
--- /dev/null
+++ b/src/main/frontend/src/routes/Alert/Alert.less
@@ -0,0 +1,50 @@
+@import "~antd/lib/style/themes/default.less";
+@import "../../utils/utils.less";
+
+.tableList {
+ .tableListOperator {
+ margin-bottom: 16px;
+ button {
+ margin-right: 8px;
+ }
+ }
+}
+
+.tableListForm {
+ :global {
+ .ant-form-item {
+ margin-bottom: 24px;
+ margin-right: 0;
+ display: flex;
+ > .ant-form-item-label {
+ width: auto;
+ line-height: 32px;
+ padding-right: 8px;
+ }
+ }
+ .ant-form-item-control-wrapper {
+ flex: 1;
+ }
+ }
+ .submitButtons {
+ white-space: nowrap;
+ margin-bottom: 24px;
+ }
+}
+
+@media screen and (max-width: @screen-lg) {
+ .tableListForm :global(.ant-form-item) {
+ margin-right: 24px;
+ }
+}
+
+@media screen and (max-width: @screen-md) {
+ .tableListForm :global(.ant-form-item) {
+ margin-right: 8px;
+ }
+}
+
+.extraContentSearch {
+ margin-left: 16px;
+ width: 272px;
+}
diff --git a/src/main/frontend/src/routes/Server/Server.js b/src/main/frontend/src/routes/Server/Server.js
new file mode 100644
index 0000000..707fe8f
--- /dev/null
+++ b/src/main/frontend/src/routes/Server/Server.js
@@ -0,0 +1,172 @@
+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, Line,
+} from '../../components/Charts';
+import DescriptionList from '../../components/DescriptionList';
+
+const { Description } = DescriptionList;
+
+@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 server"
+ optionFilterProp="children"
+ onChange={handleChange}
+ onFocus={handleFocus}
+ onBlur={handleBlur}
+ >
+ <Option value="Server1">Server1</Option>
+ <Option value="Server1">Server1</Option>
+ <Option value="Server1">Server1</Option>
+ </Select>
+ <Card title="Info" style={{ marginTop: 24 }} bordered={false}>
+ <DescriptionList>
+ <Description term="OS Name">Mac OS X</Description>
+ <Description term="Host Name">hanahmily</Description>
+ <Description term="Process Id">21144</Description>
+ <Description term="IPv4">192.168.1.4</Description>
+ </DescriptionList>
+ </Card>
+ <Row gutter={24}>
+ <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"
+ >
+ <MiniArea
+ color="#975FE4"
+ height={46}
+ data={visitData}
+ />
+ </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"
+ >
+ <MiniBar
+ height={46}
+ data={visitData}
+ />
+ </ChartCard>
+ </Col>
+ </Row>
+ <Row gutter={24}>
+ <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: 24 }}>
+ <Card
+ title="CPU"
+ bordered={false}
+ bodyStyle={{ padding: 0 }}
+ >
+ <Line
+ height={250}
+ data={visitData}
+ />
+ </Card>
+ </Col>
+ </Row>
+ <Row gutter={24}>
+ <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: 24 }}>
+ <Card
+ title="MEMORY"
+ bordered={false}
+ bodyStyle={{ padding: 0 }}
+ >
+ <Line
+ height={250}
+ data={visitData}
+ />
+ </Card>
+ </Col>
+ </Row>
+ <Row gutter={24}>
+ <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: 24 }}>
+ <Card
+ title="GC"
+ bordered={false}
+ bodyStyle={{ padding: 0 }}
+ >
+ <Line
+ height={250}
+ data={visitData}
+ />
+ </Card>
+ </Col>
+ </Row>
+ </div>
+ );
+ }
+}
--
To stop receiving notification emails like this one, please contact
"commits@skywalking.apache.org" <co...@skywalking.apache.org>.