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 2018/04/17 09:27:33 UTC
[incubator-skywalking-ui] branch 5.0.0/beta updated (0eadd26 ->
45d6940)
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a change to branch 5.0.0/beta
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git.
from 0eadd26 Add TraceList component
new f5d83d1 Add trace dot chart
add 25c2a7a Fix license issues (#148)
add 922c012 Remove unnecessary files (#152)
add 2c5f234 fix Field 'name' in type 'AppServerInfo' is undefined error in javascript (#154)
add a42f1b2 Fix trace field start time error (#156)
new 45d6940 Merge branch 'master' into 5.0.0/beta
The 2 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:
.ga | 3 -
.localized | 0
mock/.gitkeep | 0
mock/trace.js | 13 +-
public/css/iconfont.css | 73 -----------
public/css/iconfont.eot | Bin 5116 -> 0 bytes
public/css/iconfont.js | 1 -
public/css/iconfont.svg | 57 ---------
public/css/iconfont.ttf | Bin 4948 -> 0 bytes
public/css/iconfont.woff | Bin 3216 -> 0 bytes
public/img/icon/app.png | Bin 0 -> 6140 bytes
public/img/icon/app.svg | 1 -
public/img/icon/service.png | Bin 0 -> 9892 bytes
public/img/icon/service.svg | 1 -
src/common/menu.js | 8 +-
src/components/Charts/ChartCard/index.less | 17 +++
src/components/Charts/Field/index.less | 17 +++
src/components/Charts/Pie/index.less | 17 +++
src/components/SiderMenu/SiderMenu.js | 5 +-
src/components/Trace/TraceList/index.js | 8 +-
src/components/TraceTable/index.js | 2 +-
src/index.ejs | 1 -
src/models/application.js | 2 +-
src/models/trace.js | 8 +-
src/routes/Dashboard/Dashboard.js | 4 +-
src/routes/Server/Server.js | 4 +-
src/routes/Trace/Trace.js | 187 ++++++++++++++++++++++-------
27 files changed, 223 insertions(+), 206 deletions(-)
delete mode 100644 .ga
delete mode 100644 .localized
delete mode 100644 mock/.gitkeep
delete mode 100644 public/css/iconfont.css
delete mode 100644 public/css/iconfont.eot
delete mode 100644 public/css/iconfont.js
delete mode 100644 public/css/iconfont.svg
delete mode 100644 public/css/iconfont.ttf
delete mode 100644 public/css/iconfont.woff
create mode 100644 public/img/icon/app.png
delete mode 100644 public/img/icon/app.svg
create mode 100644 public/img/icon/service.png
delete mode 100644 public/img/icon/service.svg
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.
[incubator-skywalking-ui] 02/02: Merge branch 'master' into
5.0.0/beta
Posted by ha...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch 5.0.0/beta
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
commit 45d694039159c0a7e33c201806152d8f84c1dd2f
Merge: f5d83d1 a42f1b2
Author: gaohongtao <ha...@gmail.com>
AuthorDate: Tue Apr 17 17:26:17 2018 +0800
Merge branch 'master' into 5.0.0/beta
.ga | 3 --
.localized | 0
mock/.gitkeep | 0
public/css/iconfont.css | 73 -----------------------------
public/css/iconfont.eot | Bin 5116 -> 0 bytes
public/css/iconfont.js | 1 -
public/css/iconfont.svg | 57 ----------------------
public/css/iconfont.ttf | Bin 4948 -> 0 bytes
public/css/iconfont.woff | Bin 3216 -> 0 bytes
public/img/icon/app.png | Bin 0 -> 6140 bytes
public/img/icon/app.svg | 1 -
public/img/icon/service.png | Bin 0 -> 9892 bytes
public/img/icon/service.svg | 1 -
src/common/menu.js | 8 ++--
src/components/Charts/ChartCard/index.less | 17 +++++++
src/components/Charts/Field/index.less | 17 +++++++
src/components/Charts/Pie/index.less | 17 +++++++
src/components/SiderMenu/SiderMenu.js | 5 +-
src/components/TraceTable/index.js | 2 +-
src/index.ejs | 1 -
src/models/application.js | 2 +-
src/routes/Dashboard/Dashboard.js | 4 +-
src/routes/Server/Server.js | 4 +-
23 files changed, 65 insertions(+), 148 deletions(-)
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.
[incubator-skywalking-ui] 01/02: Add trace dot chart
Posted by ha...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch 5.0.0/beta
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
commit f5d83d109cd7e470fe48c02cdc4b2499dfa2a565
Author: gaohongtao <ha...@gmail.com>
AuthorDate: Tue Apr 17 17:25:42 2018 +0800
Add trace dot chart
---
mock/trace.js | 13 ++-
src/components/Trace/TraceList/index.js | 8 +-
src/models/trace.js | 8 +-
src/routes/Trace/Trace.js | 187 ++++++++++++++++++++++++--------
4 files changed, 158 insertions(+), 58 deletions(-)
diff --git a/mock/trace.js b/mock/trace.js
index dc24744..2aa3cfd 100644
--- a/mock/trace.js
+++ b/mock/trace.js
@@ -29,19 +29,24 @@ export default {
));
},
getTrace(req, res) {
+ let offset = 0;
res.json(mockjs.mock(
{
data: {
queryBasicTraces: {
- 'traces|10': [{
+ 'traces|20': [{
key: '@id',
operationName: '@url(200)',
- duration: '@natural(100, 1000)',
- start: new Date().getTime(),
+ duration: '@natural(100, 5000)',
+ start: function() { // eslint-disable-line
+ offset = offset + 3600000; // eslint-disable-line
+ const now = new Date().getTime(); // eslint-disable-line
+ return `${now + offset}`;
+ },// eslint-disable-line
'isError|1': true,
'traceIds|1-3': ['@guid'],
}],
- total: '@natural(5, 50)',
+ total: '@natural(20, 1000)',
},
},
}
diff --git a/src/components/Trace/TraceList/index.js b/src/components/Trace/TraceList/index.js
index e82f8fa..b48fadb 100644
--- a/src/components/Trace/TraceList/index.js
+++ b/src/components/Trace/TraceList/index.js
@@ -40,11 +40,11 @@ class TraceList extends PureComponent {
</div>
</div>);
}
- renderDescription = (startTime, traceIds) => {
+ renderDescription = (start, traceIds) => {
return (
<div>
- {traceIds.map((id) => { return <Tag>{id}</Tag>; })}
- <span className={styles.startTime}>{moment(startTime).format('YYYY-MM-DD HH:mm:ss.SSS')}</span>
+ {traceIds.map((id) => { return <Tag key={id}>{id}</Tag>; })}
+ <span className={styles.startTime}>{moment(parseInt(start, 10)).format('YYYY-MM-DD HH:mm:ss.SSS')}</span>
</div>
);
}
@@ -72,7 +72,7 @@ class TraceList extends PureComponent {
/>}
title={this.renderOperationName(item.operationName, item.duration,
item.isError, maxDuration)}
- description={this.renderDescription(item.startTime, item.traceIds)}
+ description={this.renderDescription(item.start, item.traceIds)}
/>
</List.Item>
)}
diff --git a/src/models/trace.js b/src/models/trace.js
index 4c2ade1..7d68be7 100644
--- a/src/models/trace.js
+++ b/src/models/trace.js
@@ -38,7 +38,7 @@ const dataQuery = `
start
isError
traceIds
- }
+ }
total
}
}
@@ -86,11 +86,7 @@ export default generateModal({
state: {
queryBasicTraces: {
traces: [],
- pagination: {
- current: 1,
- pageSize: 10,
- total: 0,
- },
+ total: 0,
},
},
optionsQuery,
diff --git a/src/routes/Trace/Trace.js b/src/routes/Trace/Trace.js
index 3df4a87..24a7666 100644
--- a/src/routes/Trace/Trace.js
+++ b/src/routes/Trace/Trace.js
@@ -18,16 +18,20 @@
import React, { PureComponent } from 'react';
import { connect } from 'dva';
-import { Row, Col, Form, Input, Select, Button, Card, InputNumber } from 'antd';
+import { Form, Input, Select, Button, Card, InputNumber, Row, Col, Pagination } from 'antd';
+import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
+import { DataSet } from '@antv/data-set';
+import moment from 'moment';
import TraceList from '../../components/Trace/TraceList';
import { Panel } from '../../components/Page';
import styles from './Trace.less';
+
const { Option } = Select;
const FormItem = Form.Item;
const initPaging = {
pageNum: 1,
- pageSize: 10,
+ pageSize: 20,
needTotal: true,
};
@@ -122,71 +126,165 @@ export default class Trace extends PureComponent {
payload: { variables: { traceId }, key },
});
}
+ renderPointChart = (traces) => {
+ if (!traces) {
+ return null;
+ }
+ const ds = new DataSet();
+ const dv = ds.createView().source(traces);
+ dv.transform({
+ type: 'map',
+ callback(row) {
+ return {
+ ...row,
+ state: row.isError ? 'error' : 'success',
+ startTime: moment(parseInt(row.start, 10)).format('YYYY-MM-DD HH:mm:ss.SSS'),
+ };
+ },
+ });
+ return (
+ <Chart
+ data={dv}
+ height={432}
+ forceFit
+ scale={{
+ startTime: {
+ tickCount: 4,
+ },
+ }}
+ >
+ <Tooltip
+ showTitle={false}
+ crosshairs={{ type: 'cross' }}
+ itemTpl='<li data-index={index} style="margin-bottom:4px;"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}<br/>{value}</li>'
+ />
+ <Axis name="startTime" />
+ <Axis
+ name="duration"
+ label={{
+ formatter: (text) => {
+ if (parseInt(text, 10) >= 1000) {
+ return `${parseInt(text, 10) / 1000} s`;
+ }
+ return `${text} ms`;
+ },
+ }}
+ />
+ <Legend />
+ <Geom
+ type="point"
+ position="startTime*duration"
+ color={['state', state => (state === 'error' ? 'red' : '#1890ff')]}
+ opacity={0.65}
+ shape="circle"
+ size={4}
+ tooltip={['operationName*startTime*duration', (operationName, startTime, duration) => {
+ return {
+ name: operationName,
+ value: `
+ ${startTime}
+ ${duration}ms
+ `,
+ };
+ }]}
+ />
+ </Chart>);
+ }
renderForm() {
const { getFieldDecorator } = this.props.form;
const { trace: { variables: { options } } } = this.props;
return (
- <Form onSubmit={this.handleSearch} layout="inline">
- <Row gutter={{ md: 8, lg: 12, xl: 24 }}>
- <Col xl={8} lg={24} sm={24}>
- <FormItem label="Application">
- {getFieldDecorator('applicationId')(
- <Select placeholder="All application" style={{ width: '100%' }}>
- {options.applicationId && options.applicationId.map((app) => {
- return (
- <Option key={app.key ? app.key : -1} value={app.key}>
- {app.label}
- </Option>);
- })}
- </Select>
- )}
- </FormItem>
- </Col>
- <Col xl={16} lg={24} sm={24}>
- <FormItem label="OperationName">
- {getFieldDecorator('operationName')(
- <Input placeholder="eg Kafka/Trace-topic-1/Consumer" />
- )}
- </FormItem>
- </Col>
- <Col xl={8} lg={24} sm={24}>
- <FormItem label="TraceId">
- {getFieldDecorator('traceId')(
- <Input placeholder="eg 3.84.15204769998380001" />
- )}
- </FormItem>
- </Col>
- <Col xl={6} lg={12} sm={24}>
+ <Form onSubmit={this.handleSearch} layout="vertical">
+ <FormItem label="Application">
+ {getFieldDecorator('applicationId')(
+ <Select placeholder="All application" style={{ width: '100%' }}>
+ {options.applicationId && options.applicationId.map((app) => {
+ return (
+ <Option key={app.key ? app.key : -1} value={app.key}>
+ {app.label}
+ </Option>);
+ })}
+ </Select>
+ )}
+ </FormItem>
+ <FormItem label="OperationName">
+ {getFieldDecorator('operationName')(
+ <Input placeholder="eg Kafka/Trace-topic-1/Consumer" />
+ )}
+ </FormItem>
+ <FormItem label="TraceId">
+ {getFieldDecorator('traceId')(
+ <Input placeholder="eg 3.84.15204769998380001" />
+ )}
+ </FormItem>
+ <Row>
+ <Col xs={24} sm={24} md={24} lg={12} xl={12}>
<FormItem label="Min Duration">
{getFieldDecorator('minTraceDuration')(
- <InputNumber placeholder="eg 100,500" style={{ width: 150 }} />
+ <InputNumber placeholder="eg 100" />
)}
</FormItem>
</Col>
- <Col xl={6} lg={12} sm={24}>
+ <Col xs={24} sm={24} md={24} lg={12} xl={12}>
<FormItem label="Max Duration">
{getFieldDecorator('maxTraceDuration')(
- <InputNumber placeholder="eg 5000" style={{ width: 150 }} />
+ <InputNumber placeholder="eg 5000" />
)}
</FormItem>
</Col>
- <Col xl={4} lg={12} sm={24}>
- <span className={styles.submitButtons}>
- <Button type="primary" htmlType="submit">Search</Button>
- </span>
- </Col>
</Row>
+ <FormItem>
+ <Button type="primary" htmlType="submit">Search</Button>
+ </FormItem>
</Form>
);
}
+ renderPage = (values, total) => {
+ if (total < 1) {
+ return null;
+ }
+ let currentPageNum = 1;
+ let currentPageSize = 20;
+ if (values.paging) {
+ const { paging: { pageNum, pageSize } } = values;
+ currentPageNum = pageNum;
+ currentPageSize = pageSize;
+ }
+ return (
+ <Row type="flex" justify="end">
+ <Col>
+ <Pagination
+ size="small"
+ current={currentPageNum}
+ pageSize={currentPageSize}
+ total={total}
+ defaultPageSize={20}
+ showSizeChanger
+ pageSizeOptions={['20', '50', '100', '200']}
+ onChange={(page, pageSize) => {
+ this.handleTableChange({ current: page, pageSize });
+ }}
+ onShowSizeChange={(current, size) => {
+ this.handleTableChange({ current: 1, pageSize: size });
+ }}
+ />
+ </Col>
+ </Row>);
+ }
render() {
const { trace: { variables: { values }, data: { queryBasicTraces } }, loading } = this.props;
return (
<Card bordered={false}>
<div className={styles.tableList}>
- <div className={styles.tableListForm}>
- {this.renderForm()}
- </div>
+ <Row>
+ <Col xs={24} sm={24} md={24} lg={8} xl={8}>
+ {this.renderForm()}
+ </Col>
+ <Col xs={24} sm={24} md={24} lg={16} xl={16}>
+ {this.renderPointChart(queryBasicTraces.traces)}
+ </Col>
+ </Row>
+ {this.renderPage(values, queryBasicTraces.total)}
<Panel
variables={values}
globalVariables={this.props.globalVariables}
@@ -197,6 +295,7 @@ export default class Trace extends PureComponent {
data={queryBasicTraces.traces}
/>
</Panel>
+ {this.renderPage(values, queryBasicTraces.total)}
</div>
</Card>
);
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.