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 <hanahm...@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
hanahm...@apache.org.

Reply via email to