add HistoryRecordPane

9 files changed, 132 insertions, 31 deletions

diff --git a/front-end/src/component/farmer-card/index.jsx b/front-end/src/component/farmer-card/index.jsx
index 5503f56..d4c8638 100644
--- a/front-end/src/component/farmer-card/index.jsx
+++ b/front-end/src/component/farmer-card/index.jsx
@@ -11,6 +11,7 @@ class FarmerCard extends React.Component {
         let machine = this.props.machine
         let system = machine.os_name + ' ' + machine.os_version;
         let camp = machine.comp_name + ' ' + machine.comp_version;
+        let owner = machine.owner || {}
         return (
 
             <div className="farmer-card">
@@ -26,7 +27,7 @@ class FarmerCard extends React.Component {
                                 <List.Item icon='microchip' content={camp} />
                                 <List.Item
                                     icon='mail'
-                                    content={<a href={machine.owner}>{machine.owner}</a>}
+                                    content={<a href={owner.email}>{owner.email}</a>}
                                 />
                             </List>
                         </Card.Description>
diff --git a/front-end/src/component/farmer-detail-card/index.jsx b/front-end/src/component/farmer-detail-card/index.jsx
index 9e328d5..10549ce 100644
--- a/front-end/src/component/farmer-detail-card/index.jsx
+++ b/front-end/src/component/farmer-detail-card/index.jsx
@@ -11,6 +11,7 @@ class FarmerDetailCard extends React.Component {
         let machine = this.props.machine || {}
         let system = machine.os_name + ' ' + machine.os_version;
         let camp = machine.comp_name + ' ' + machine.comp_version;
+        let owner = machine.owner || {};
         return (
 
             <div className="farmer-card">
@@ -18,7 +19,7 @@ class FarmerDetailCard extends React.Component {
                     <Card.Content>
                         <Image floated='right' size='mini'
                                src={machine.avatar}/>
-                        <Card.Header>Farmer: {machine.alias}</Card.Header>
+                        <Card.Header>Owner: {owner.username}</Card.Header>
                         <Card.Meta>report num: {machine.reports}</Card.Meta>
                         <Card.Description>
                             <List>
@@ -26,19 +27,20 @@ class FarmerDetailCard extends React.Component {
                                 <List.Item icon='microchip' content={camp} />
                                 <List.Item
                                     icon='mail'
-                                    content={<a href={machine.owner}>{machine.owner}</a>}
+                                    content={<a href={owner.email}>{owner.email}</a>}
                                 />
                             </List>
                         </Card.Description>
                     </Card.Content>
-                    {/*<Card.Content extra>*/}
-                        {/*<div className='ui buttons'>*/}
-                            {/*/!*todo link to machine page*!/*/}
-                            {/*<Button basic color='blue'>*/}
-                                {/*Other records*/}
-                            {/*</Button>*/}
-                        {/*</div>*/}
-                    {/*</Card.Content>*/}
+                    <Card.Content extra>
+
+                        <div className='ui buttons'>
+                            {/*todo link to machine page*/}
+                            <Button basic mini color='grey'>
+                                4 branches involved
+                            </Button>
+                        </div>
+                    </Card.Content>
                 </Card>
             </div>
         );
diff --git a/front-end/src/component/history-records-pane1/index.css b/front-end/src/component/history-records-pane1/index.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/front-end/src/component/history-records-pane1/index.css
diff --git a/front-end/src/component/history-records-pane1/index.jsx b/front-end/src/component/history-records-pane1/index.jsx
new file mode 100644
index 0000000..4bd4e74
--- /dev/null
+++ b/front-end/src/component/history-records-pane1/index.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import Pagination from 'util/pagination/index.jsx';
+import {Tab, Divider, Icon, Label} from 'semantic-ui-react'
+
+import MachineRecordTable from 'util/machine-record-table/index.jsx'
+import PGUtil        from 'util/util.jsx'
+const _util = new PGUtil();
+import './index.css';
+
+class HistoryRecordPane1 extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            list: [],
+            branches: props.branches || [],
+            selected_branch: '',
+            restoreNum: 0,
+            selected: [{
+                'cate': 'Category 1',
+                'index': 0,
+                'key': 'date',
+                'data': [
+                    {'name': 'All', 'value': ''},
+                    {'name': '7 days', 'value': '7'},
+                    {'name': '30 days', 'value': '30'}
+                ],
+            }],
+        }
+        console.log('br')
+        console.dir(this.state.branches)
+    }
+
+    componentDidMount() {
+        // this.loadHistoryRecordList();
+    }
+    componentWillReceiveProps(nextProps) {
+        this.setState({branches: nextProps.branches});
+    }
+    reloadRecordTable(branch_id){
+        console.log('new reload branch is: ' + branch_id)
+    }
+
+
+    render(){
+        let _list = this.state.branches || [];
+        console.log('list is')
+        console.dir(_list)
+        let branch_tags = _list.map((branchItem, index) => {
+            return (
+                <Label onClick={() => this.reloadRecordTable(branchItem.value)}>
+                    <Icon name='usb' />{branchItem.branch}
+                </Label>
+            );
+        });
+
+
+
+        return (
+            <div>
+                <div className="branch-tags-container">
+                    {branch_tags}
+                </div>
+
+                    <MachineRecordTable list={this.state.list} total={this.state.total} current={this.state.currentPage} loadfunc={this.loadRecordList}/>
+
+            </div>
+        );
+    }
+}
+
+export default HistoryRecordPane1;
\ No newline at end of file
diff --git a/front-end/src/page/machineInfo/index.jsx b/front-end/src/page/machineInfo/index.jsx
index 8e54e4c..8a07628 100644
--- a/front-end/src/page/machineInfo/index.jsx
+++ b/front-end/src/page/machineInfo/index.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
 // import './index.css';
-import {Table, Divider, Segment, Icon} from 'semantic-ui-react'
+import {Tab, Divider, Segment, Icon} from 'semantic-ui-react'
 import FarmerDetailCard      from 'component/farmer-detail-card/index.jsx'
 import Record      from 'service/record-service.jsx'
 import PGUtil        from 'util/util.jsx'
-import MachineRecordTable from 'util/machine-record-table/index.jsx'
+import HistoryRecordsPane1 from 'component/history-records-pane1/index.jsx'
+
 const _util = new PGUtil();
 const _record = new Record();
 class MachineInfo extends React.Component {
@@ -12,6 +13,7 @@ class MachineInfo extends React.Component {
         super(props);
         this.state = {
             machineNo: this.props.match.params.machine_sn,
+            branches:[],
             machineInfo: {},
             isLoading: false,
             currentPage: 1,
@@ -47,12 +49,17 @@ class MachineInfo extends React.Component {
         // listParam.page = page;
         listParam.machine_sn = this.state.machineNo;
         _record.getHistoryRecordList(listParam).then(res => {
-            console.log('res is:' + res)
+            console.log('res is:')
+            console.dir(res)
             this.setState({
+                branches: res.branches || [],
                 machineInfo: res.machine_info || {},
                 list: res.reports || [],
                 // total: res.count,
                 isLoading: false
+            }, ()=> {
+                console.log(this.state.branches);
+                // 123
             });
             // _this.changeIsLoading(false);
         }, errMsg => {
@@ -77,10 +84,10 @@ class MachineInfo extends React.Component {
     }
 
     render() {
-        let show = this.state.isLoading ? "none" : "block";
-        let style = {
-            display: show
-        };
+        // let branches = this.state.branches;
+        let panes = [
+            { menuItem: 'Tab 1', render: () => <Tab.Pane attached={true}><HistoryRecordsPane1 branches={this.state.branches}/></Tab.Pane> },
+        ]
 
         return (
             <div className="container-fluid detail-container">
@@ -98,16 +105,19 @@ class MachineInfo extends React.Component {
                     <Divider className="machine-info-divier"></Divider>
                 </div>
                 <div className="col-md-3">
-                    <Segment vertical>Farmer Info</Segment>
+                    {/*<Segment vertical>Farmer Info</Segment>*/}
                     <FarmerDetailCard machine={this.state.machineInfo}></FarmerDetailCard>
                 </div>
 
                 <div className="col-md-9">
                     {/*<div className="card-container row">*/}
 
-                    <div className="info-container col-md-12 col-md-offset-1">
-                        <MachineRecordTable list={this.state.list} total={this.state.total} current={this.state.currentPage} loadfunc={this.loadRecordList}/>
-                    </div>
+                    {/*<div className="info-container col-md-12 col-md-offset-1">*/}
+                        {/*<MachineRecordTable list={this.state.list} total={this.state.total} current={this.state.currentPage} loadfunc={this.loadRecordList}/>*/}
+
+
+                        <Tab menu={{ attached: false }} panes={panes} />
+                    {/*</div>*/}
 
                 </div>
             </div>
diff --git a/front-end/src/util/machine-record-table/index.jsx b/front-end/src/util/machine-record-table/index.jsx
index 4705b0c..0e96f7b 100644
--- a/front-end/src/util/machine-record-table/index.jsx
+++ b/front-end/src/util/machine-record-table/index.jsx
@@ -96,7 +96,7 @@ class MachineRecordTable extends React.Component {
                     <Table.Cell><a href="#">{alias}</a></Table.Cell>
 
                     {/*system*/}
-                    <Table.Cell><a href="#">{system}</a></Table.Cell>
+                    {/*<Table.Cell><a href="#">{system}</a></Table.Cell>*/}
 
                     {/*branch*/}
                     {/*<Table.Cell>{branch}</Table.Cell>*/}
@@ -139,7 +139,7 @@ class MachineRecordTable extends React.Component {
                     {/*</Table.Row>*/}
                     <Table.Row>
                         <Table.HeaderCell rowSpan='2'>Alias</Table.HeaderCell>
-                        <Table.HeaderCell rowSpan='2'>System</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>
diff --git a/web/apps/test_records/serializer.py b/web/apps/test_records/serializer.py
index 556db49..11a8cf3 100644
--- a/web/apps/test_records/serializer.py
+++ b/web/apps/test_records/serializer.py
@@ -304,10 +304,10 @@ class MachineHistoryRecordSerializer(serializers.ModelSerializer):
     '''
     machine_info = serializers.SerializerMethodField()
     reports = serializers.SerializerMethodField()
-
+    branches = serializers.SerializerMethodField()
     class Meta:
         model = UserMachine
-        fields = ('machine_info', 'reports')
+        fields = ('machine_info', 'reports', 'branches')
 
     def get_reports(self, obj):
         target_records = TestRecord.objects.filter(test_machine_id=obj.id).values_list(
@@ -330,3 +330,19 @@ class MachineHistoryRecordSerializer(serializers.ModelSerializer):
         serializer = UserMachineSerializer(target_machine)
 
         return serializer.data
+
+    def get_branches(self, obj):
+        target_records = TestRecord.objects.filter(test_machine_id=obj.id).values_list(
+            'branch').annotate(Count('id'))
+
+        ret = []
+        for branch_item in target_records:
+            item = {}
+            item['value'] = branch_item[0]
+
+            branch = TestBranch.objects.filter(id=branch_item[0]).first()
+            serializer = TestBranchSerializer(branch)
+            item['branch'] = serializer.data["branch_name"]
+            ret.append(item)
+
+        return ret
diff --git a/web/apps/test_records/views.py b/web/apps/test_records/views.py
index ce70145..e76db5a 100644
--- a/web/apps/test_records/views.py
+++ b/web/apps/test_records/views.py
@@ -78,7 +78,7 @@ def TestRecordCreate(request, format=None):
     # jsLoads = json.loads(data[0])
 
     # todo get machine by token
-    # test_machine = UserMachine.objects.filter(secret)
+    test_machine = 1
 
     from django.db import transaction
 
diff --git a/web/apps/users/serializer.py b/web/apps/users/serializer.py
index c3fffc8..91346b3 100644
--- a/web/apps/users/serializer.py
+++ b/web/apps/users/serializer.py
@@ -37,9 +37,9 @@ class UserMachineSerializer(serializers.ModelSerializer):
         return reports_num
 
     def get_owner(self, obj):
-        target_owner = UserProfile.objects.filter(id=obj.machine_owner_id).values('email').first()
-
-        return target_owner['email']
+        target_owner = UserProfile.objects.filter(id=obj.machine_owner_id).first()
+        serializer = JWTUserProfileSerializer(target_owner)
+        return serializer.data
 
     def get_avatar(self, obj):
         target_owner = UserProfile.objects.filter(id=obj.machine_owner_id).values('email').first()
@@ -51,4 +51,4 @@ class UserMachineSerializer(serializers.ModelSerializer):
 class JWTUserProfileSerializer(serializers.ModelSerializer):
     class Meta:
         model = UserProfile
-        fields = ('username', )
\ No newline at end of file
+        fields = ('username', 'email')
\ No newline at end of file