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/15 03:09:17 UTC
[incubator-skywalking-ui] 01/01: Add TraceList component
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 0eadd26338eb39e0a6c8380cfa1e38b32c22e64a
Author: gaohongtao <ha...@gmail.com>
AuthorDate: Sun Apr 15 11:04:02 2018 +0800
Add TraceList component
Features:
Response time line chart
Trace id tags
---
mock/trace.js | 2 +-
src/components/Trace/TraceList/index.js | 84 +++++++++++++++++++++++++++++++
src/components/Trace/TraceList/index.less | 52 +++++++++++++++++++
src/routes/Trace/Trace.js | 7 +--
4 files changed, 139 insertions(+), 6 deletions(-)
diff --git a/mock/trace.js b/mock/trace.js
index 06f955c..dc24744 100644
--- a/mock/trace.js
+++ b/mock/trace.js
@@ -35,7 +35,7 @@ export default {
queryBasicTraces: {
'traces|10': [{
key: '@id',
- operationName: '@url',
+ operationName: '@url(200)',
duration: '@natural(100, 1000)',
start: new Date().getTime(),
'isError|1': true,
diff --git a/src/components/Trace/TraceList/index.js b/src/components/Trace/TraceList/index.js
new file mode 100644
index 0000000..e82f8fa
--- /dev/null
+++ b/src/components/Trace/TraceList/index.js
@@ -0,0 +1,84 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+import React, { PureComponent } from 'react';
+import { List, Avatar, Tag } from 'antd';
+import moment from 'moment';
+import styles from './index.less';
+
+
+class TraceList extends PureComponent {
+ renderOperationName = (opName, duration, isError, maxDuration) => {
+ return (
+ <div className={styles.progressWrap}>
+ <div
+ className={styles.progress}
+ style={{
+ backgroundColor: isError ? '#fde3cf' : '#87CEFA',
+ width: `${(duration * 100) / maxDuration}%`,
+ height: 25,
+ }}
+ />
+ <div className={styles.mainInfo}>
+ <span>{opName}</span>
+ <span className={styles.duration}>{`${duration}ms`}</span>
+ </div>
+ </div>);
+ }
+ renderDescription = (startTime, 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>
+ </div>
+ );
+ }
+ render() {
+ const { data: traces, loading } = this.props;
+ let maxDuration = 0;
+ traces.forEach((item) => {
+ if (item.duration > maxDuration) {
+ maxDuration = item.duration;
+ }
+ });
+ return (
+ <List
+ className={styles.traceList}
+ itemLayout="horizontal"
+ size="small"
+ dataSource={traces}
+ loading={loading}
+ renderItem={item => (
+ <List.Item>
+ <List.Item.Meta
+ avatar={<Avatar
+ style={{ backgroundColor: item.isError ? '#fde3cf' : '#1890ff', color: item.isError ? '#f56a00' : null, verticalAlign: 'middle' }}
+ icon={item.isError ? 'close' : 'check'}
+ />}
+ title={this.renderOperationName(item.operationName, item.duration,
+ item.isError, maxDuration)}
+ description={this.renderDescription(item.startTime, item.traceIds)}
+ />
+ </List.Item>
+ )}
+ />
+ );
+ }
+}
+
+export default TraceList;
diff --git a/src/components/Trace/TraceList/index.less b/src/components/Trace/TraceList/index.less
new file mode 100644
index 0000000..2413b19
--- /dev/null
+++ b/src/components/Trace/TraceList/index.less
@@ -0,0 +1,52 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '~antd/lib/style/themes/default.less';
+
+.traceList {
+ padding: 5px 0;
+ position: relative;
+ width: 100%;
+ .progressWrap {
+ background-color: @background-color-base;
+ position: relative;
+ height: 25px;
+ }
+ .progress {
+ position: absolute;
+ z-index: 10;
+ transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
+ border-radius: 1px 0 0 1px;
+ background-color: @primary-color;
+ width: 0;
+ height: 100%;
+ }
+ .mainInfo {
+ position: absolute;
+ z-index: 20;
+ width: 100%;
+ .duration {
+ float: right;
+ }
+ }
+ .startTime {
+ float: right;
+ }
+ .content {
+ width: 30%;
+ }
+}
diff --git a/src/routes/Trace/Trace.js b/src/routes/Trace/Trace.js
index 75e55ec..3df4a87 100644
--- a/src/routes/Trace/Trace.js
+++ b/src/routes/Trace/Trace.js
@@ -19,7 +19,7 @@
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Form, Input, Select, Button, Card, InputNumber } from 'antd';
-import TraceTable from '../../components/TraceTable';
+import TraceList from '../../components/Trace/TraceList';
import { Panel } from '../../components/Page';
import styles from './Trace.less';
@@ -192,12 +192,9 @@ export default class Trace extends PureComponent {
globalVariables={this.props.globalVariables}
onChange={this.handleChange}
>
- <TraceTable
+ <TraceList
loading={loading}
data={queryBasicTraces.traces}
- pagination={{ ...values.paging, total: queryBasicTraces.total }}
- onChange={this.handleTableChange}
- onExpand={this.handleTableExpand}
/>
</Panel>
</div>
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.