perfect record detail page

8 files changed, 188 insertions, 58 deletions

diff --git a/client/post-example/results.json b/client/post-example/results.json
index 5929c31..19074cc 100644
--- a/client/post-example/results.json
+++ b/client/post-example/results.json
@@ -4,7 +4,7 @@
             "10": {
                 "1": {
                     "std": 397.30643899999995, 
-                    "metric": 21442.645435, 
+                    "metric": 22442.645435, 
                     "median": 11892.645435, 
                     "results": [
                         {
@@ -70,7 +70,7 @@
                 }, 
                 "4": {
                     "std": 285.0294699999995, 
-                    "metric": 11215.454019999997, 
+                    "metric": 22215.454019999997, 
                     "median": 28795.454019999997, 
                     "results": [
                         {
@@ -107,7 +107,7 @@
             "10": {
                 "1": {
                     "std": 86.91589850000001, 
-                    "metric": 3300.6329775, 
+                    "metric": 3211.6329775, 
                     "median": 150.6329775, 
                     "results": [
                         {
@@ -140,7 +140,7 @@
                 }, 
                 "2": {
                     "std": 4.182392499999992, 
-                    "metric": 290.8884175, 
+                    "metric": 220.8884175, 
                     "median": 280.8884175, 
                     "results": [
                         {
@@ -173,7 +173,7 @@
                 }, 
                 "4": {
                     "std": 15.571989000000002, 
-                    "metric": 1290.858649, 
+                    "metric": 1090.858649, 
                     "median": 399.858649, 
                     "results": [
                         {
diff --git a/front-end/src/component/result-filter/index.jsx b/front-end/src/component/result-filter/index.jsx
index 69991b7..0e7329f 100644
--- a/front-end/src/component/result-filter/index.jsx
+++ b/front-end/src/component/result-filter/index.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import Pagination from 'util/pagination/index.jsx';
+import PGUtil        from 'util/util.jsx'
+const _util = new PGUtil();
 import './index.css';
 
 class ResultFilter extends React.Component {
@@ -13,11 +15,12 @@ class ResultFilter extends React.Component {
             restoreNum: 0,
             selected: [{
                 'cate': 'Category 1',
-                'index': 2,
+                'index': 0,
+                'key': 'date',
                 'data': [
-                    'All',
-                    '7 days',
-                    '30 days'
+                    {'name':'All', 'value':''},
+                    {'name':'7 days', 'value':'7'},
+                    {'name':'30 days', 'value':'30'}
                 ],
             }],
             // selected: [{
@@ -61,7 +64,8 @@ class ResultFilter extends React.Component {
         let cate_index = e.currentTarget.getAttribute("data-cate-index")
 
         let newSelected = this.state.selected;
-
+        console.log('prev index is:' + newSelected[cate_index]["index"])
+        console.log('cur index is:' + item_index)
         if (newSelected[cate_index]["index"] != item_index) {
             newSelected[cate_index]["index"] = item_index;
             this.setState({
@@ -71,22 +75,41 @@ class ResultFilter extends React.Component {
         }
     }
 
-    deleteSelectItemClick(e) {
-
-    }
 
     handleClick() {
         console.log('handleClick!!', this);
-        var self = this;
+        let self = this;
     }
+    getFilterParams() {
+        let params_list = this.state.selected;
+        let result = {};
+        for (let i = 0; i < params_list.length; i++) {
+            let params_item = params_list[i];
+            console.log('cur filter index is:' + params_item.index)
+            let value = params_item.data[params_item.index]['value']
+            let key = params_item.key;
+            if (value){
+                console.log('key is:' + key)
+                if(key == 'date'){
+                    result[key] = _util.getDateStr(value * -1)
+                }else{
+                    result[key] =value
+                }
+
+            }
 
+        }
+        return result
+    }
     applyButtonClick() {
         this.setState({
             // selected: newArr,
             isClear: false
         });
         this.props.onIsLoadingChange(true);
-        this.props.onApplyBtnClick(true);
+        let params = this.getFilterParams()
+        console.dir(params)
+        this.props.onApplyBtnClick(params);
         console.log('isLoading:' + this.props.isLoading)
     }
 
@@ -114,7 +137,7 @@ class ResultFilter extends React.Component {
                     <dd onClick={(e) => this.selectItemClick(e)} key={index} data-cate-name={item["cate"]}
                         data-cate-index={i} data-item-index={index} data-item-name={s}
                         className={is_high_light}><a
-                        href="javascript:void(0);">{s}</a></dd>
+                        href="javascript:void(0);">{s['name']}</a></dd>
                 )
             });
 
diff --git a/front-end/src/page/detailInfo/index.css b/front-end/src/page/detailInfo/index.css
index 0cc1b93..8d5a658 100644
--- a/front-end/src/page/detailInfo/index.css
+++ b/front-end/src/page/detailInfo/index.css
@@ -30,4 +30,22 @@
     /*.detail-container {*/
         /*width: 1370px;*/
     /*}*/
-/*}*/
\ No newline at end of file
+/*}*/
+
+.client-title-div {
+    display: flex;
+    justify-content:space-between;
+    flex-grow:1;
+}
+
+.trend-span .improved{
+     color: #5b8c00!important;
+ }
+
+.trend-span .quo{
+    color: #0050b3!important;
+}
+
+.trend-span .regressive{
+    color: #cf1322!important;
+}
\ No newline at end of file
diff --git a/front-end/src/page/detailInfo/index.jsx b/front-end/src/page/detailInfo/index.jsx
index f881b74..f23bcd2 100644
--- a/front-end/src/page/detailInfo/index.jsx
+++ b/front-end/src/page/detailInfo/index.jsx
@@ -7,6 +7,7 @@ import InfoList      from 'component/info-list/index.jsx'
 import Record      from 'service/record-service.jsx'
 const _util = new PGUtil();
 const _record = new Record();
+
 class DetailInfo extends React.Component {
     constructor(props) {
         super(props);
@@ -51,17 +52,97 @@ class DetailInfo extends React.Component {
         console.log(machine)
         // Object.keys(obj).map(key => console.log(obj[key]));
         let ro_10 = ro['10'] || {};
+        let rw_10 = rw['10'] || {};
+
+        let rw_tables = Object.keys(rw_10).map(key => {
+            console.log(rw_10[key])
+            let metric = 0;
+            let percentage = 0.0;
+            let status = -1;
+            let tableRow = rw_10[key].map((item, idx) => {
+                console.log('item is:')
+                console.log(item)
+                metric = parseFloat(item['metric']).toFixed(4)
+                percentage = (item['percentage'] * 100).toFixed(2).toString() + '%'
+                status = item['status']
+
+                let results = item['results'].map((result, idx) => {
+                    return (
+                        <Table.Row>
+                            <Table.Cell>{result.run}</Table.Cell>
+                            <Table.Cell>{result.tps}</Table.Cell>
+                            <Table.Cell>{result.mode}</Table.Cell>
+                            <Table.Cell>{result.latency}</Table.Cell>
+                        </Table.Row>
+                    );
+                });
+                return results;
+
+            });
+            let trend_span
+
+            if (status == -1) {
+                trend_span = <span>{percentage}</span>;
+            } else if (status == 1){
+                trend_span = <span className="trend-span improved"><Icon name="angle double up"/>+{percentage}</span>;
+            } else if (status == 2){
+                trend_span = <span className="trend-span quo"><Icon name="bars"/>+{percentage}</span>;
+            } else if (status == 3){
+                trend_span = <span className="trend-span regressive"><Icon name="angle double down"/>{percentage}</span>;
+            }
+
+            return (
+                <Table celled striped>
+                    <Table.Header>
+                        <Table.Row>
+                            <Table.HeaderCell colSpan="4">
+                                <div className="client-title-div">
+                                    <div>Client(s) {key}: {metric}  {trend_span}</div>
+                                    <div><a href=""> >>prev</a></div>
+                                </div>
+                                {/*<div>*/}
+                                    {/*<span>Improved ()</span>*/}
+                                {/*</div>*/}
+                            </Table.HeaderCell>
+                        </Table.Row>
+                        <Table.Row>
+                            <Table.HeaderCell>Run</Table.HeaderCell>
+                            <Table.HeaderCell>Tps</Table.HeaderCell>
+                            <Table.HeaderCell>mode</Table.HeaderCell>
+                            <Table.HeaderCell>latency</Table.HeaderCell>
+                        </Table.Row>
+                    </Table.Header>
+
+                    <Table.Body>
+                        {tableRow}
+                        {/*<Table.Row>*/}
+                        {/*<Table.Cell>2018-09-11 15:32</Table.Cell>*/}
+                        {/*<Table.Cell>200.221</Table.Cell>*/}
+                        {/*<Table.Cell>simple</Table.Cell>*/}
+                        {/*<Table.Cell>-1</Table.Cell>*/}
+                        {/*</Table.Row>*/}
+                    </Table.Body>
+                </Table>
+            );
+        });
+
 
         let ro_tables = Object.keys(ro_10).map(key => {
             console.log(ro_10[key])
+            let metric = 0;
+            let percentage = 0.0;
+            let status = -1;
             let tableRow = ro_10[key].map((item, idx) => {
                 console.log('item is:')
                 console.log(item)
+                metric = parseFloat(item['metric']).toFixed(4)
+                percentage = (item['percentage'] * 100).toFixed(2).toString() + '%'
+                status = item['status']
 
                 let results = item['results'].map((result, idx) => {
                     return (
                         <Table.Row>
-                            <Table.Cell>{result.start}</Table.Cell>
+                            <Table.Cell>{result.run}</Table.Cell>
                             <Table.Cell>{result.tps}</Table.Cell>
                             <Table.Cell>{result.mode}</Table.Cell>
                             <Table.Cell>{result.latency}</Table.Cell>
@@ -71,19 +152,34 @@ class DetailInfo extends React.Component {
                 return results;
 
             });
+            let trend_span
+
+            if (status == -1) {
+                trend_span = <span>{percentage}</span>;
+            } else if (status == 1){
+                trend_span = <span className="trend-span improved"><Icon name="angle double up"/>+{percentage}</span>;
+            } else if (status == 2){
+                trend_span = <span className="trend-span quo"><Icon name="bars"/>+{percentage}</span>;
+            } else if (status == 3){
+                trend_span = <span className="trend-span regressive"><Icon name="angle double down"/>{percentage}</span>;
+            }
 
             return (
                 <Table celled striped>
                     <Table.Header>
                         <Table.Row>
-                            <Table.HeaderCell colSpan="4">Clients:{key} scale:10 <a href=""> >>prev</a>
-                                <div>
-                                    mertic:200 <span>Improved (+12.4%)</span>
+                            <Table.HeaderCell colSpan="4">
+                                <div className="client-title-div">
+                                    <div>Client(s) {key}: {metric}  {trend_span}</div>
+                                    <div><a href=""> >>prev</a></div>
                                 </div>
+                                {/*<div>*/}
+                                {/*<span>Improved ()</span>*/}
+                                {/*</div>*/}
                             </Table.HeaderCell>
                         </Table.Row>
                         <Table.Row>
-                            <Table.HeaderCell>Start</Table.HeaderCell>
+                            <Table.HeaderCell>Run</Table.HeaderCell>
                             <Table.HeaderCell>Tps</Table.HeaderCell>
                             <Table.HeaderCell>mode</Table.HeaderCell>
                             <Table.HeaderCell>latency</Table.HeaderCell>
@@ -113,6 +209,7 @@ class DetailInfo extends React.Component {
 
                     <Segment vertical>Farmer Info</Segment>
                     <FarmerCard machine={machine}></FarmerCard>
+                    //todo add a catalog
                 </div>
 
                 <div className="col-md-9">
@@ -160,31 +257,7 @@ class DetailInfo extends React.Component {
                         <div className="col-md-6 card-div">
 
                             <Segment vertical>RW</Segment>
-                            <Table celled striped color='red' key='1'>
-                                <Table.Header>
-                                    <Table.Row>
-                                        <Table.HeaderCell colSpan="3">Clients:4</Table.HeaderCell>
-                                    </Table.Row>
-                                    <Table.Row>
-                                        <Table.HeaderCell>Food</Table.HeaderCell>
-                                        <Table.HeaderCell>Calories</Table.HeaderCell>
-                                        <Table.HeaderCell>Protein</Table.HeaderCell>
-                                    </Table.Row>
-                                </Table.Header>
-
-                                <Table.Body>
-                                    <Table.Row>
-                                        <Table.Cell>Apples</Table.Cell>
-                                        <Table.Cell>200</Table.Cell>
-                                        <Table.Cell>0g</Table.Cell>
-                                    </Table.Row>
-                                    <Table.Row>
-                                        <Table.Cell>Orange</Table.Cell>
-                                        <Table.Cell>310</Table.Cell>
-                                        <Table.Cell>0g</Table.Cell>
-                                    </Table.Row>
-                                </Table.Body>
-                            </Table>
+                            {rw_tables}
 
                         </div>
                     </div>
diff --git a/front-end/src/page/status/index.jsx b/front-end/src/page/status/index.jsx
index c33502c..3c1cd95 100644
--- a/front-end/src/page/status/index.jsx
+++ b/front-end/src/page/status/index.jsx
@@ -30,7 +30,8 @@ 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);
@@ -40,17 +41,20 @@ class Status extends React.Component {
         this.loadRecordList();
     }
 
-    handleApplyBtnClick() {
-        console.log('apply btn clicked!')
-        this.loadRecordList()
+    handleApplyBtnClick(params) {
+        console.log('handle apply!')
+
+        let self = this
+        this.setState({filter: params}, ()=> {
+            self.loadRecordList()
+        });
     }
 
     // load record list
     loadRecordList(page=1) {
         let _this = this;
         let listParam = {};
-        listParam.filter = this.state.filter;
-
+        listParam= this.state.filter;
         listParam.page = page;
 
         _record.getRecordList(listParam).then(res => {
@@ -71,7 +75,6 @@ class Status extends React.Component {
             _this.changeIsLoading(false);
         });
 
-
         console.log(this.state.list)
     }
 
@@ -92,7 +95,7 @@ class Status extends React.Component {
     onIsLoadingChange(flag) {
         console.log('flag:' + flag)
         this.setState({
-            isLoading: flag
+            isLoading: flag,
         });
         console.log('status isLoading:' + this.state.isLoading)
     }
diff --git a/front-end/src/service/record-service.jsx b/front-end/src/service/record-service.jsx
index 33ba627..987d517 100644
--- a/front-end/src/service/record-service.jsx
+++ b/front-end/src/service/record-service.jsx
@@ -8,8 +8,10 @@ class Record{
         let url = PGConstant.base_url + '/records';
 
         let data = {};
-        data.page    = listParam.page;
+        data = listParam;
 
+        console.log('final data')
+        console.dir(listParam);
         return _util.request({
             type    : 'get',
             url     : url,
diff --git a/front-end/src/util/util.jsx b/front-end/src/util/util.jsx
index 2c0ae90..7202929 100644
--- a/front-end/src/util/util.jsx
+++ b/front-end/src/util/util.jsx
@@ -71,6 +71,15 @@ class PGUtil {
     removeStorage(name) {
         window.localStorage.removeItem(name);
     }
+
+    getDateStr(AddDayCount) {
+        let dd = new Date();
+        dd.setDate(dd.getDate()+AddDayCount);
+        let y = dd.getFullYear();
+        let m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);
+        let d = dd.getDate()<10?"0"+dd.getDate():dd.getDate();
+        return y+"-"+m+"-"+d;
+    }
 }
 
 export default PGUtil;
\ No newline at end of file
diff --git a/web/apps/test_records/serializer.py b/web/apps/test_records/serializer.py
index 8ab52e3..b83fb7e 100644
--- a/web/apps/test_records/serializer.py
+++ b/web/apps/test_records/serializer.py
@@ -51,11 +51,13 @@ class TestResultSerializer(serializers.ModelSerializer):
     '''
     use TestResultSerializer
     '''
-
+    mode = serializers.SerializerMethodField()
     class Meta:
         model = TestResult
         fields = "__all__"
-
+    def get_mode(self, obj):
+        new_dict = {v: k for k, v in DB_ENUM["mode"].items()}
+        return new_dict[obj.mode]
 
 class CreateTestRecordSerializer(serializers.ModelSerializer):
     '''