add result table
authorHongyuan Ma <CS_MaleicAcid@163.com>
Sat, 23 Jun 2018 18:20:12 +0000 (02:20 +0800)
committerHongyuan Ma <CS_MaleicAcid@163.com>
Sat, 23 Jun 2018 18:20:12 +0000 (02:20 +0800)
front-end/src/component/test-result-card/index.jsx
front-end/src/page/detailInfo/index.css
front-end/src/page/detailInfo/index.jsx
web/apps/test_records/filters.py
web/pgperffarm/settings.py

index 2f51865a38dd943c81aa9cca9259d866688f3d7b..900144816f92b3df9c60f58f02f6abeed3d9764f 100644 (file)
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Card, Icon} from 'semantic-ui-react'
+import {Card, Icon,Table} from 'semantic-ui-react'
 import './index.css';
 
 class TestResultCard extends React.Component {
@@ -34,6 +34,7 @@ class TestResultCard extends React.Component {
                     <Card.Content extra>
                         <Icon name='user'/>
                         4 Friends
+
                     </Card.Content>
                 </Card>
             </div>
index 62c24cbb580016531dc01a160d97b2dd433c5f9e..aabe1baaec44e5a5a3f3b026da15e15917999915 100644 (file)
@@ -9,3 +9,24 @@
     margin-left: 0%;
     margin-top: 15px;
 }
+.row {
+    /*margin-left:120px;*/
+}
+
+.detail-container{
+    padding-top: 80px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+@media (min-width: 1200px) {
+    .detail-container {
+        width: 1170px;
+    }
+}
+
+/*@media (min-width: 1400px) {*/
+    /*.detail-container {*/
+        /*width: 1370px;*/
+    /*}*/
+/*}*/
\ No newline at end of file
index e71d8cc5ceec65a1f1976c1eb7e233ddd4bda5d5..7668449851d37687a5be6550f313cdac1658b99a 100644 (file)
@@ -1,10 +1,10 @@
 import React from 'react';
 import './index.css';
-import {Grid, Divider, Segment, Image as ImageComponent, Item} from 'semantic-ui-react'
+import {Table, Divider, Segment, Image, Label, Card, Button} from 'semantic-ui-react'
 import TestResultCard from 'component/test-result-card/index.jsx';
 import PGUtil        from 'util/util.jsx'
 import Record      from 'service/record-service.jsx'
-const _util           = new PGUtil();
+const _util = new PGUtil();
 const _record = new Record();
 class DetailInfo extends React.Component {
     constructor(props) {
@@ -19,11 +19,12 @@ class DetailInfo extends React.Component {
         // this.handleIsLoading = this.handleIsLoading.bind(this);
     }
 
-    componentDidMount(){
+    componentDidMount() {
         this.loadDetailInfo();
     }
+
     // load record detail
-    loadDetailInfo(){
+    loadDetailInfo() {
         let listParam = {};
         listParam.recordNo = this.state.recordNo;
 
@@ -31,7 +32,7 @@ class DetailInfo extends React.Component {
             this.setState(res);
         }, errMsg => {
             this.setState({
-                list : []
+                list: []
             });
             _util.errorTips(errMsg);
         });
@@ -39,83 +40,130 @@ class DetailInfo extends React.Component {
 
     render() {
         return (
-            <div id="page-wrapper">
-                <div className="container row">
-                    <div className="col-md-12">
-                        <div className="col-md-2">
-                            <TestResultCard />
-                        </div>
+            <div className="container-fluid detail-container">
+                <div className="col-md-3">
+                    <Segment vertical>Farmer Info</Segment>
+                    <Card>
+                        <Card.Content>
+                            <Image floated='right' size='mini' src='http://www.semantic-ui.cn/images/avatar2/small/lena.png' />
+                            <Card.Header>Steve Sanders</Card.Header>
+                            <Card.Meta>Friends of Elliot</Card.Meta>
+                            <Card.Description>
+                                Steve wants to add you to the group <strong>best friends</strong>
+                            </Card.Description>
+                        </Card.Content>
+                        <Card.Content extra>
+                            <div className='ui two buttons'>
+                                <Button basic color='green'>
+                                    Approve
+                                </Button>
+                                <Button basic color='red'>
+                                    Decline
+                                </Button>
+                            </div>
+                        </Card.Content>
+                    </Card>
+                </div>
 
-                        <div className="col-md-10">
-                            {/*<div className="card-container row">*/}
-                            <div className="card-container col-md-11 col-md-offset-1">
-                                <div className="col-md-5 card-div">
-                                    <TestResultCard />
-                                </div>
+                <div className="col-md-9">
+                    {/*<div className="card-container row">*/}
+                    <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>
 
-                                <div className="col-md-5 card-div">
-                                    <TestResultCard />
-                                </div>
-                            </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>
 
-                            <div className="info-container col-md-9 col-md-offset-1">
-                                {/*<Segment>*/}
-                                <Divider/>
-                                <Divider horizontal>Horizontal</Divider>
-                                {/*</Segment>*/}
-
-                                <div>
-                                    <h2><a href="#linuxInfo">Linux Info</a></h2>
-                                    <div className="" data-example-id="">
-                                        <dl>
-                                            <dt><a href="#">Description lists</a></dt>
-                                            <dd>A description list is perfect for defining terms.</dd>
-                                            <dt>Euismod</dt>
-                                            <dd>
-                                            </dd>
-                                            <dd></dd>
-                                            <dt>Malesuada porta</dt>
-                                            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-                                        </dl>
-                                    </div>
-                                </div>
+                                <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>
+                        <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>
 
                         </div>
                     </div>
-                </div>
 
-                {/*<div className="ui card">*/}
-                {/*<div class="content">*/}
-                {/*<div class="header">Project Timeline</div>*/}
-                {/*</div>*/}
-                {/*<div class="content">*/}
-                {/*<h4 class="ui sub header">活动</h4>*/}
-                {/*<div class="ui small feed">*/}
-                {/*<div class="event">*/}
-                {/*<div class="content">*/}
-                {/*<div class="summary"><a>Elliot Fu</a> added <a>Jenny Hess</a> to the project </div>*/}
-                {/*</div>*/}
-                {/*</div>*/}
-                {/*<div class="event">*/}
-                {/*<div class="content">*/}
-                {/*<div class="summary"><a>Stevie Feliciano</a> was added as an <a>Administrator</a> </div>*/}
-                {/*</div>*/}
-                {/*</div>*/}
-                {/*<div class="event">*/}
-                {/*<div class="content">*/}
-                {/*<div class="summary"><a>Helen Troy</a> added two pictures </div>*/}
-                {/*</div>*/}
-                {/*</div>*/}
-                {/*</div>*/}
-                {/*</div>*/}
-                {/*<div class="extra content">*/}
-                {/*<button class="ui button">Join Project</button>*/}
-                {/*</div>*/}
-                {/*</div>*/}
+                    <div className="info-container col-md-12 col-md-offset-1">
+                        {/*<Segment>*/}
+                        <Divider/>
+                        <Divider horizontal>Horizontal</Divider>
+                        {/*</Segment>*/}
+
+                        <div>
+                            <h2><a href="#linuxInfo">Linux Info</a></h2>
+                            <div className="" data-example-id="">
+                                <dl>
+                                    <dt><a href="#">Description lists</a></dt>
+                                    <dd>A description list is perfect for defining terms.</dd>
+                                    <dt>Euismod</dt>
+                                    <dd>
+                                    </dd>
+                                    <dd></dd>
+                                    <dt>Malesuada porta</dt>
+                                    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+                                </dl>
+                            </div>
+                        </div>
+
+                    </div>
 
+                </div>
             </div>
+
         )
     }
 }
index 998f3d77874f7029a8deb3e09ba4dbb554fb5f2d..f2e293ee48b5029d66fbad5b61a894b6500b9208 100644 (file)
@@ -10,7 +10,7 @@ class TestRecordListFilter(django_filters.rest_framework.FilterSet):
     """
     TestRecordListFilter
     """
-    date = django_filters.DateTimeFilter(name='add_time',lookup_expr='gte')
+    date = django_filters.DateTimeFilter(name='add_time',lookup_expr='gt')
 
     class Meta:
         model = TestRecord
index a02e3cfda6529e1a344b50490c4a29d17d166e0b..15e89deecd2ae57884975574fb5d6288b8a9926d 100644 (file)
@@ -135,7 +135,7 @@ REST_FRAMEWORK = {
     #     'rest_framework.authentication.BasicAuthentication',
     #     'rest_framework.authentication.SessionAuthentication',
     # ),
-    'DEFAULT_FILTER_BACKENDS': ('django_filters.rest_framework.DjangoFilterBackend',),
+    'DEFAULT_FILTER_BACKENDS': ('django_filters.rest_framework.DjangoFilterBackend',),
     'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.LimitOffsetPagination',
     'PAGE_SIZE': 20
 }