From 67a5967b143e737df6af7c2c23da4bf3dab2d449 Mon Sep 17 00:00:00 2001
From: Hongyuan Ma <CS_MaleicAcid@163.com>
Date: Sun, 24 Jun 2018 22:25:19 +0800
Subject: [PATCH] Perfect table rendering in detail page

---
 client/post-example/results.json              |  12 +-
 front-end/src/component/farmer-card/index.jsx |   1 +
 front-end/src/page/detailInfo/index.jsx       | 127 +++++++++++++-----
 web/apps/test_records/models.py               |   2 +
 4 files changed, 102 insertions(+), 40 deletions(-)

diff --git a/client/post-example/results.json b/client/post-example/results.json
index 151f679..5929c31 100644
--- a/client/post-example/results.json
+++ b/client/post-example/results.json
@@ -4,7 +4,7 @@
             "10": {
                 "1": {
                     "std": 397.30643899999995, 
-                    "metric": 11992.645435, 
+                    "metric": 21442.645435, 
                     "median": 11892.645435, 
                     "results": [
                         {
@@ -37,7 +37,7 @@
                 }, 
                 "2": {
                     "std": 252.71243850000064, 
-                    "metric": 38183.186513499997, 
+                    "metric": 30183.186513499997, 
                     "median": 28953.186513499997, 
                     "results": [
                         {
@@ -70,7 +70,7 @@
                 }, 
                 "4": {
                     "std": 285.0294699999995, 
-                    "metric": 38215.454019999997, 
+                    "metric": 11215.454019999997, 
                     "median": 28795.454019999997, 
                     "results": [
                         {
@@ -107,7 +107,7 @@
             "10": {
                 "1": {
                     "std": 86.91589850000001, 
-                    "metric": 1300.6329775, 
+                    "metric": 3300.6329775, 
                     "median": 150.6329775, 
                     "results": [
                         {
@@ -140,7 +140,7 @@
                 }, 
                 "2": {
                     "std": 4.182392499999992, 
-                    "metric": 180.8884175, 
+                    "metric": 290.8884175, 
                     "median": 280.8884175, 
                     "results": [
                         {
@@ -173,7 +173,7 @@
                 }, 
                 "4": {
                     "std": 15.571989000000002, 
-                    "metric": 1190.858649, 
+                    "metric": 1290.858649, 
                     "median": 399.858649, 
                     "results": [
                         {
diff --git a/front-end/src/component/farmer-card/index.jsx b/front-end/src/component/farmer-card/index.jsx
index 048f3ac..4cec78e 100644
--- a/front-end/src/component/farmer-card/index.jsx
+++ b/front-end/src/component/farmer-card/index.jsx
@@ -33,6 +33,7 @@ class FarmerCard extends React.Component {
                     </Card.Content>
                     <Card.Content extra>
                         <div className='ui buttons'>
+                            {/*todo link to machine page*/}
                             <Button basic color='blue'>
                                 Other records
                             </Button>
diff --git a/front-end/src/page/detailInfo/index.jsx b/front-end/src/page/detailInfo/index.jsx
index 1cbb46b..84f23b5 100644
--- a/front-end/src/page/detailInfo/index.jsx
+++ b/front-end/src/page/detailInfo/index.jsx
@@ -29,7 +29,7 @@ class DetailInfo extends React.Component {
 
         _record.getRecordInfo(listParam).then(res => {
             this.setState({
-                recordInfo:res
+                recordInfo: res
             });
             console.log(this.state.recordInfo)
         }, errMsg => {
@@ -42,8 +42,65 @@ class DetailInfo extends React.Component {
 
     render() {
         let machine = this.state.recordInfo.test_machine || {};
+        let dataset = this.state.recordInfo.dataset_info || {};
+
+        let ro = dataset.ro || {};
+        let rw = dataset.rw || {};
         console.log(machine)
-        // let system = machine.os_name + ' ' + machine.os_version + ' ' + machine.comp_name + ' ' + machine.comp_version;
+        // Object.keys(obj).map(key => console.log(obj[key]));
+        let ro_10 = ro['10'] || {};
+
+        let ro_tables = Object.keys(ro_10).map(key => {
+            console.log(ro_10[key])
+            let tableRow = ro_10[key].map((item, idx) => {
+                console.log('item is:')
+                console.log(item)
+
+                let results = item['results'].map((result, idx) => {
+                    return (
+                        <Table.Row>
+                            <Table.Cell>{result.start}</Table.Cell>
+                            <Table.Cell>{result.tps}</Table.Cell>
+                            <Table.Cell>{result.mode}</Table.Cell>
+                            <Table.Cell>{result.latency}</Table.Cell>
+                        </Table.Row>
+                    );
+                });
+                return results;
+
+            });
+
+            return (
+                <Table celled striped key={key}>
+                    <Table.Header>
+                        <Table.Row>
+                            <Table.HeaderCell colSpan="4">Clients:{key} scale:10 <a href=""> >>prev</a>
+                                <div>
+                                    mertic:200 <span>Improved (+12.4%)</span>
+                                </div>
+                            </Table.HeaderCell>
+                        </Table.Row>
+                        <Table.Row>
+                            <Table.HeaderCell>Start</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>
+            );
+        });
+
         return (
             <div className="container-fluid detail-container">
                 <div className="record-title">
@@ -61,39 +118,41 @@ class DetailInfo extends React.Component {
                     <div className="card-container col-md-12 col-md-offset-1">
                         <div className="col-md-6 card-div">
                             <Segment vertical>RO</Segment>
-                            <Table celled striped key='1'>
-                                <Table.Header>
-                                    <Table.Row>
-                                        <Table.HeaderCell colSpan="4">Clients:4 scale:10 <a href=""> >>prev</a>
-                                            <div>
-
-                                                mertic:200 <span>Improved (+12.4%)</span>
-                                            </div>
-                                        </Table.HeaderCell>
-                                    </Table.Row>
-                                    <Table.Row>
-                                        <Table.HeaderCell>Start</Table.HeaderCell>
-                                        <Table.HeaderCell>Tps</Table.HeaderCell>
-                                        <Table.HeaderCell>mode</Table.HeaderCell>
-                                        <Table.HeaderCell>latency</Table.HeaderCell>
-                                    </Table.Row>
-                                </Table.Header>
+                            {ro_tables}
+                            {/*<Table celled striped key='1'>*/}
+                            {/*<Table.Header>*/}
+                            {/*<Table.Row>*/}
+                            {/*<Table.HeaderCell colSpan="4">Clients:4 scale:10 <a href=""> >>prev</a>*/}
+                            {/*<div>*/}
+
+                            {/*mertic:200 <span>Improved (+12.4%)</span>*/}
+                            {/*</div>*/}
+                            {/*</Table.HeaderCell>*/}
+                            {/*</Table.Row>*/}
+                            {/*<Table.Row>*/}
+                            {/*<Table.HeaderCell>Start</Table.HeaderCell>*/}
+                            {/*<Table.HeaderCell>Tps</Table.HeaderCell>*/}
+                            {/*<Table.HeaderCell>mode</Table.HeaderCell>*/}
+                            {/*<Table.HeaderCell>latency</Table.HeaderCell>*/}
+                            {/*</Table.Row>*/}
+                            {/*</Table.Header>*/}
+
+                            {/*<Table.Body>*/}
+                            {/*<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.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>*/}
 
-                                <Table.Body>
-                                    <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.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>
                         </div>
 
                         <div className="col-md-6 card-div">
diff --git a/web/apps/test_records/models.py b/web/apps/test_records/models.py
index 0758850..53b040a 100644
--- a/web/apps/test_records/models.py
+++ b/web/apps/test_records/models.py
@@ -216,6 +216,8 @@ class TestResult(models.Model):
     clients = models.IntegerField(verbose_name="clients", help_text="clients of the test result")
     start = models.DecimalField(max_digits=16, decimal_places=6, verbose_name="start",
                                 help_text="starttime of the test result")
+    tps = models.DecimalField(default=0,max_digits=18, decimal_places=6, verbose_name="tps",
+                                help_text="tps of the test result")
     run = models.IntegerField(verbose_name="run", help_text="run number")
     threads = models.IntegerField(verbose_name="threads", help_text="threads of the test result")
 
-- 
2.39.5