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:44 UTC
[incubator-skywalking-ui] 02/03: Add service 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 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>.