From 4383cd2e4eafbff4cb0253df4e3c4b3bd870b58e Mon Sep 17 00:00:00 2001
From: Hongyuan Ma <CS_MaleicAcid@163.com>
Date: Mon, 18 Jun 2018 11:39:42 +0800
Subject: [PATCH] update basic-table

---
 front-end/src/page/status/index.jsx      | 55 +--------------
 front-end/src/util/basic-table/index.jsx | 90 ++++++++++++------------
 2 files changed, 48 insertions(+), 97 deletions(-)

diff --git a/front-end/src/page/status/index.jsx b/front-end/src/page/status/index.jsx
index 6067a78..ba3cccd 100644
--- a/front-end/src/page/status/index.jsx
+++ b/front-end/src/page/status/index.jsx
@@ -1,10 +1,6 @@
 import React from 'react';
 // import './index.css';
 import ResultFilter from 'component/result-filter/index.jsx';
-import ClientBox from 'component/client-box/index.jsx';
-import Pagination from 'util/pagination/index.jsx';
-import RateBar from 'util/rate-bar/index.jsx';
-import TableList    from 'util/table-list/index.jsx';
 import BasicTable    from 'util/basic-table/index.jsx';
 import Record      from 'service/record-service.jsx'
 import PGUtil        from 'util/util.jsx'
@@ -103,51 +99,6 @@ class Status extends React.Component {
             display: show
         };
 
-        let listBody = this.state.list.map((machine, index) => {
-            let info = machine.machine_info[0];
-            let info_str = info.os_name + ' ' + info.os_version + ' ' + info.comp_name + ' ' + info.comp_version;
-            let client_max = machine.client_max_num
-            return (
-
-                <tr key={index}>
-
-                    <td><a href={'#'}>{info.alias}</a></td>
-
-                    <td><a href={'#'}>{info_str}</a></td>
-
-                    <td>
-                        <div>
-                            <ClientBox clientNum="1" std="100" median="200">1</ClientBox>
-                            <ClientBox clientNum="2" std="100" median="200">2</ClientBox>
-                            <ClientBox clientNum="4" std={100} median={2}>4</ClientBox>
-                        </div>
-
-                    </td>
-                    <td>
-                        {/*<th rowspan="3"></th>*/}
-                        {/*<th rowspan="3">1-2</th>*/}
-                        {/*<th rowspan="2">1-3</th>*/}
-                        {/*<th rowspan="1">1-4</th>*/}
-                        {/*<th rowspan="3">1-5</th>*/}
-                    </td>
-
-                    <td rowSpan="2">
-                        {machine.clients}
-                        {/*<th rowspan="3"></th>*/}
-                        {/*<th rowspan="3">1-2</th>*/}
-                        {/*<th rowspan="2">1-3</th>*/}
-                        {/*<th rowspan="1">1-4</th>*/}
-                        {/*<th rowspan="3">1-5</th>*/}
-                    </td>
-                    <td>
-
-                        {/*<div style={{float: 'left'}}> <p>{machine.mark}</p></div>*/}
-                    </td>
-                    <td>{new Date().toDateString()}</td>
-                </tr>
-            );
-        });
-
         return (
             <div id="page-wrapper">
                 <h1>status page</h1>
@@ -161,9 +112,9 @@ class Status extends React.Component {
                 <ResultFilter isLoading={this.state.isLoading} onIsLoadingChange={this.onIsLoadingChange}
                               onApplyBtnClick={this.handleApplyBtnClick}/>
 
-                <TableList tableHeads={['alias', 'System', 'ro', 'rw', 'date']}>
-                    {listBody}
-                </TableList>
+                {/*<TableList tableHeads={['alias', 'System', 'ro', 'rw', 'date']}>*/}
+                    {/*{listBody}*/}
+                {/*</TableList>*/}
                 {/*<Pagination style={style} onChange={this.onPageChange} current={this.state.currentPage} total={25}/>*/}
 
                 <BasicTable list={this.state.list}></BasicTable>
diff --git a/front-end/src/util/basic-table/index.jsx b/front-end/src/util/basic-table/index.jsx
index 493528d..e26d3c6 100644
--- a/front-end/src/util/basic-table/index.jsx
+++ b/front-end/src/util/basic-table/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, Table, Menu, Message } from 'semantic-ui-react'
+import {Icon, Table, Menu, Message} from 'semantic-ui-react'
 import './index.css';
 
 // general basic table
@@ -13,7 +13,42 @@ class BasicTable extends React.Component {
 
 
     render() {
-        let list = this.props.list
+        let _list = this.props.list
+        let listBody = _list.map((record, index) => {
+            let machine = record.machine_info[0];
+            let system = machine.os_name + ' ' + machine.os_version + ' ' + machine.comp_name + ' ' + machine.comp_version;
+            let alias = machine.alias;
+            let branch = record.pg_info.pg_branch;
+
+            let trend = record.trend
+            return (
+
+                <Table.Row key={index}>
+                    {/*alias*/}
+                    <Table.Cell><a href="#">{alias}</a></Table.Cell>
+
+                    {/*system*/}
+                    <Table.Cell><a href="#">{system}</a></Table.Cell>
+
+                    {/*branch*/}
+                    <Table.Cell>{branch}</Table.Cell>
+
+                    {/*trending-data*/}
+                    <Table.Cell textAlign='center'>
+                        <Icon color='green' name='checkmark' size='large'/>{trend.improved}
+                    </Table.Cell>
+                    <Table.Cell textAlign='center'>
+                        <Icon color='green' name='meh' size='large'/>{trend.quo}
+                    </Table.Cell>
+                    <Table.Cell textAlign='center'>
+                        <i class="fa fa-meh-o"></i>{trend.regressive}
+                    </Table.Cell>
+
+                    {/*date*/}
+                    <Table.Cell>{new Date().toDateString()}</Table.Cell>
+                </Table.Row>
+            );
+        });
 
         return (
             <Table celled structured compact>
@@ -22,68 +57,33 @@ class BasicTable extends React.Component {
                         <Table.HeaderCell rowSpan='2'>Alias</Table.HeaderCell>
                         <Table.HeaderCell rowSpan='2'>System</Table.HeaderCell>
                         <Table.HeaderCell rowSpan='2'>Branch</Table.HeaderCell>
-                        <Table.HeaderCell textAlign='center' colSpan='3'>read only</Table.HeaderCell>
-                        <Table.HeaderCell textAlign='center' colSpan='3'>read & write</Table.HeaderCell>
+                        <Table.HeaderCell textAlign='center' colSpan='3'>Trending</Table.HeaderCell>
                         <Table.HeaderCell rowSpan='2'>Date</Table.HeaderCell>
                     </Table.Row>
                     <Table.Row>
-                        <Table.HeaderCell>1 client</Table.HeaderCell>
-                        <Table.HeaderCell>2 clients</Table.HeaderCell>
-                        <Table.HeaderCell>4 clients</Table.HeaderCell>
-
-                        <Table.HeaderCell>1 client</Table.HeaderCell>
-                        <Table.HeaderCell>2 clients</Table.HeaderCell>
-                        <Table.HeaderCell>4 clients</Table.HeaderCell>
+                        <Table.HeaderCell>improved</Table.HeaderCell>
+                        <Table.HeaderCell>quo</Table.HeaderCell>
+                        <Table.HeaderCell>regressive</Table.HeaderCell>
                     </Table.Row>
-                    {/*<Table.Row>*/}
-                        {/*<Table.HeaderCell>1 clients</Table.HeaderCell>*/}
-                        {/*<Table.HeaderCell>2 clients</Table.HeaderCell>*/}
-                        {/*<Table.HeaderCell>4 clients</Table.HeaderCell>*/}
-                    {/*</Table.Row>*/}
+
                 </Table.Header>
 
                 <Table.Body>
-                    <Table.Row>
-                        {/*alias*/}
-                        <Table.Cell><a href="#">Cabbage</a></Table.Cell>
-
-                        {/*system*/}
-                        <Table.Cell><a href="#">Ubuntu 16 x86_64</a></Table.Cell>
-
-                        {/*branch*/}
-                        <Table.Cell>REL9_6_STABLE</Table.Cell>
-
-                        {/*rw-data*/}
-                        <Table.Cell textAlign='center'>
-                            <Icon color='green' name='checkmark' size='large' />
-                        </Table.Cell>
-                        <Table.Cell />
-                        <Table.Cell />
-
-                        {/*rw-data*/}
-                        <Table.Cell />
-                        <Table.Cell textAlign='center'>
-                            <Icon color='green' name='checkmark' size='large' />
-                        </Table.Cell>
-                        <Table.Cell />
-
-                        {/*date*/}
-                        <Table.Cell>{new Date().toDateString()}</Table.Cell>
-                    </Table.Row>
+                    {listBody}
                 </Table.Body>
                 <Table.Footer>
                     <Table.Row>
                         <Table.HeaderCell colSpan='10'>
                             <Menu size='small' floated='right' pagination>
                                 <Menu.Item as='a' icon>
-                                    <Icon name='chevron left' />
+                                    <Icon name='chevron left'/>
                                 </Menu.Item>
                                 <Menu.Item as='a'>1</Menu.Item>
                                 <Menu.Item as='a'>2</Menu.Item>
                                 <Menu.Item as='a'>3</Menu.Item>
                                 <Menu.Item as='a'>4</Menu.Item>
                                 <Menu.Item as='a' icon>
-                                    <Icon name='chevron right' />
+                                    <Icon name='chevron right'/>
                                 </Menu.Item>
                             </Menu>
 
-- 
2.39.5