replace the table component in status page

diff --git a/front-end/src/page/status/index.jsx b/front-end/src/page/status/index.jsx
index 3c1cd955a4cd89fe95db73d76ff33043aad3ca24..3093d1beb2c200f0aafaf37d84929e35643bae1f 100644 (file)
--- a/front-end/src/page/status/index.jsx
+++ b/front-end/src/page/status/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 // import './index.css';
 import ResultFilter from 'component/result-filter/index.jsx';
-import BasicTable    from 'util/basic-table/index.jsx';
+import RecordTable    from 'util/record-table/index.jsx';
 import Record      from 'service/record-service.jsx'
 import PGUtil        from 'util/util.jsx'
 
@@ -13,8 +13,9 @@ class Status extends React.Component {
         this.state = {
             isLoading: false,
             currentPage: 1,
-            total:3,
+            total: 3,
             filter: {},
+            branch_list: [],
             list: [
                 // {
                 //     'alias': 'a_name',
@@ -31,30 +32,42 @@ class Status extends React.Component {
 
         },
 
-        this.onPageChange = this.onPageChange.bind(this);
+            this.onPageChange = this.onPageChange.bind(this);
         this.onIsLoadingChange = this.onIsLoadingChange.bind(this);
         this.handleApplyBtnClick = this.handleApplyBtnClick.bind(this);
         this.loadRecordList = this.loadRecordList.bind(this);
     }
 
-    componentDidMount() {
-        this.loadRecordList();
+    componentWillMount() {
+        this.loadBranchList();
     }
 
     handleApplyBtnClick(params) {
         console.log('handle apply!')
 
         let self = this
-        this.setState({filter: params}, ()=> {
+        this.setState({filter: params}, () => {
             self.loadRecordList()
         });
     }
 
+    loadBranchList() {
+        _record.getBranchList().then(res => {
+            this.setState({
+                branch_list: res.results,
+            });
+            console.dir(res.results)
+        }, errMsg => {
+            _util.errorTips('get branch list error');
+        });
+    }
+
+
     // load record list
-    loadRecordList(page=1) {
+    loadRecordList(page = 1) {
         let _this = this;
         let listParam = {};
-        listParam= this.state.filter;
+        listParam = this.state.filter;
         listParam.page = page;
 
         _record.getRecordList(listParam).then(res => {
@@ -105,6 +118,12 @@ class Status extends React.Component {
         let style = {
             display: show
         };
+        console.log('hi')
+        console.dir(this.state.branch_list)
+        console.log('done')
+        let table_list = this.state.branch_list.map((value, index) => (
+            <RecordTable branch={value.branch_name}/>
+        ))
 
         return (
             <div id="page-wrapper">
@@ -118,14 +137,8 @@ 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>*/}
-                {/*<Pagination style={style} onChange={this.onPageChange} current={this.state.currentPage} total={25}/>*/}
-
-                <BasicTable list={this.state.list} total={this.state.total} current={this.state.currentPage} loadfunc={this.loadRecordList}/>
-                {/*<RateBar std={this.state.std} curMark={this.state.curMark1}/>*/}
+                {table_list}
+                {/*<RecordTable list={this.state.list} total={this.state.total} current={this.state.currentPage} loadfunc={this.loadRecordList}/>*/}
 
             </div>
         )

diff --git a/front-end/src/service/record-service.jsx b/front-end/src/service/record-service.jsx
index 1e5a9b42aab06169ed6bb80162304dc1dea5a9a7..3aa81c4b6404af85c4d4f26765ef8ccbfe9971e0 100644 (file)
--- a/front-end/src/service/record-service.jsx
+++ b/front-end/src/service/record-service.jsx
@@ -4,6 +4,27 @@ import PGConstant from 'util/constant.jsx'
 const _util       = new PGUtil();
 
 class Record{
+    // get branch list
+    getBranchList(){
+        let url = PGConstant.base_url + '/branches';
+
+        return _util.request({
+            type    : 'get',
+            url     : url,
+        });
+    }
+
+    getRecordListByBranch(listParam){
+        let url = PGConstant.base_url + '/records-by-branch';
+
+        let data = {};
+        data = listParam;
+        return _util.request({
+            type    : 'get',
+            url     : url,
+            data    : data
+        });
+    }
     // get record list
     getRecordList(listParam){
         let url = PGConstant.base_url + '/records';

diff --git a/front-end/src/util/record-table/index.css b/front-end/src/util/record-table/index.css
new file mode 100644 (file)
index 0000000..0fe34f8
--- /dev/null
+++ b/front-end/src/util/record-table/index.css
@@ -0,0 +1,43 @@
+.ReactTable .rt-th{
+    background-color: #ffffff;
+}
+
+.ReactTable .-pagination{
+    background-color: #ffffff;
+}
+
+.ReactTable .rt-tr-group:nth-child(2n) {
+    background-color: #ffffff;
+}
+
+.bgc-clear{
+    background-color: #ffffff;
+}
+
+.anonymous {
+    color: #e8e8e8;
+}
+
+.anonymous :hover {
+    color: lightgrey;
+}
+.improved {
+    color: #7cb305;
+}
+
+.quo {
+    color: #40a9ff;
+}
+
+.regressive {
+    color: #fa541c;
+}
+
+.mini-label {
+    font-weight: 100!important;
+    font-size: 0.1em!important;
+    min-width: 1.3em!important;
+    min-height: 0.1em!important;
+    padding: .2em!important;
+    line-height: 0.5em!important;
+}
\ No newline at end of file

diff --git a/front-end/src/util/record-table/index.jsx b/front-end/src/util/record-table/index.jsx
new file mode 100644 (file)
index 0000000..d68eb7b
--- /dev/null
+++ b/front-end/src/util/record-table/index.jsx
@@ -0,0 +1,205 @@
+import React from 'react';
+import {Link}     from 'react-router-dom';
+import {Icon, Table, Label, Message, Button} from 'semantic-ui-react'
+import Pagination from 'util/pagination/index.jsx'
+import Record      from 'service/record-service.jsx'
+import './index.css';
+const _record = new Record();
+function Bubble(props) {
+
+    if (props.num <= 0) {
+        return null;
+    }
+    let className = props.name + 'IconClassName';
+    return (
+        <Label circular size="mini" className={"mini-label " + className}>
+            {props.num}
+        </Label>
+    );
+}
+
+//todo
+// function TrendCell(trend) {
+//     const isNull = !list;
+//     const isEmpty = !isNull && !list.length;
+//     let improvedIconClassName = trend.improved > 0 ? 'improved' : 'anonymous'
+//     let quoIconClassName = trend.quo > 0 ? 'quo' : 'anonymous'
+//     let regressiveIconClassName = trend.regressive > 0 ? 'regressive' : 'anonymous'
+//     if (!trend.is_first) {
+//         return (
+//             <Table.Cell  textAlign='center'>
+//                 first report
+//             </Table.Cell>
+//         );
+//     } else {
+//         return (
+//             <div>
+//                 <Table.Cell textAlign='center'>
+//                     <Icon className={"bgc-clear " + improvedIconClassName} name='smile outline' size='large'/>
+//                     <Bubble num={trend.improved} name="improved"/>
+//                 </Table.Cell>
+//                 <Table.Cell textAlign='center'>
+//                     <Icon className={"bgc-clear " + quoIconClassName} name='meh outline' size='large'/>
+//                     <Bubble num={trend.quo} name="quo"/>
+//                 </Table.Cell>
+//                 <Table.Cell textAlign='center'>
+//                     <Icon className={"bgc-clear " + regressiveIconClassName} name='frown outline'
+//                           size='large'/>
+//                     <Bubble num={trend.regressive} name="regressive"/>
+//                 </Table.Cell>
+//             </div>
+//         );
+//     }
+//
+// }
+
+// general basic table
+class RecordTable extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            branch: this.props.branch,
+            isFirstLoading: true,
+            total: this.props.total,
+            currentPage: 1,
+            list: []
+        }
+    }
+
+    componentWillMount() {
+        this.loadRecordListByBranch(this.state.branch);
+    }
+    loadRecordListByBranch(branch,page=1) {
+        let _this = this;
+        let listParam = {};
+        listParam.page = page;
+        listParam.branch = branch;
+
+        _record.getRecordListByBranch(listParam).then(res => {
+            console.log('branch res is:' + res)
+            this.setState({
+                list: res.results,
+                total: res.count,
+                isLoading: false
+            });
+        }, errMsg => {
+            this.setState({
+                list: []
+            });
+            _util.errorTips(errMsg);
+            console.log(errMsg)
+        });
+
+        console.log(this.state.list)
+    }
+    onPageNumChange(current) {
+        this.setState({
+            currentPage: current
+        }, () => {
+            this.props.loadfunc(current);
+        });
+        console.log('current:' + this.state.currentPage)
+    }
+
+    render() {
+        // let branch = record.pg_info.pg_branch;
+        let _list = this.state.list || []
+        let style = {
+            display: 'show'
+        };
+        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 trend = record.trend
+            let improvedIconClassName = trend.improved > 0 ? 'improved' : 'anonymous'
+            let quoIconClassName = trend.quo > 0 ? 'quo' : 'anonymous'
+            let regressiveIconClassName = trend.regressive > 0 ? 'regressive' : 'anonymous'
+            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 className={"bgc-clear " + improvedIconClassName} name='smile outline' size='large'/>
+                        <Bubble num={trend.improved} name="improved"/>
+                    </Table.Cell>
+                    <Table.Cell textAlign='center'>
+                        <Icon className={"bgc-clear " + quoIconClassName} name='meh outline' size='large'/>
+                        <Bubble num={trend.quo} name="quo"/>
+                    </Table.Cell>
+                    <Table.Cell textAlign='center'>
+                        <Icon className={"bgc-clear " + regressiveIconClassName} name='frown outline'
+                              size='large'/>
+                        <Bubble num={trend.regressive} name="regressive"/>
+                    </Table.Cell>
+
+
+                    <Table.Cell textAlign='center'>
+                        <Link color='linkedin' to={'detailInfo/' + record.uuid}>
+                            <Icon name='linkify'/> Link
+                        </Link>
+                    </Table.Cell>
+
+
+                    {/*date*/}
+                    <Table.Cell>{record.add_time}</Table.Cell>
+                </Table.Row>
+            );
+        });
+
+        return (
+            <Table celled structured compact textAlign='center'>
+                <Table.Header>
+                    {/*<Table.Row>*/}
+                        {/*<Table.HeaderCell rowSpan='9'>Branch: {this.state.branch}</Table.HeaderCell>*/}
+                    {/*</Table.Row>*/}
+                    <Table.Row>
+                        <Table.HeaderCell rowSpan='2'>Alias</Table.HeaderCell>
+                        <Table.HeaderCell rowSpan='2'>System</Table.HeaderCell>
+                        {/*<Table.HeaderCell rowSpan='2'>Branch</Table.HeaderCell>*/}
+                        <Table.HeaderCell colSpan='3'>Trending</Table.HeaderCell>
+                        <Table.HeaderCell rowSpan='2'>Detail</Table.HeaderCell>
+                        <Table.HeaderCell rowSpan='2'>Date</Table.HeaderCell>
+                    </Table.Row>
+                    <Table.Row>
+                        <Table.HeaderCell>improvement</Table.HeaderCell>
+                        <Table.HeaderCell>status quo</Table.HeaderCell>
+                        <Table.HeaderCell>regression</Table.HeaderCell>
+                    </Table.Row>
+
+                </Table.Header>
+
+                <Table.Body>
+                    {listBody}
+                </Table.Body>
+                <Table.Footer>
+                    <Table.Row>
+                        <Table.HeaderCell colSpan='10'>
+                            <Pagination style={style} onChange={(current) => this.onPageNumChange(current)} pageSize={2}
+                                        current={this.state.currentPage} total={this.props.total}/>
+
+                        </Table.HeaderCell>
+
+                    </Table.Row>
+                </Table.Footer>
+            </Table>
+        );
+
+    }
+
+
+}
+
+export default RecordTable;
\ No newline at end of file