+.active_branch{
+    color: #fff9f8 !important;
+    background-color: #40a9ff !important;
+}
\ No newline at end of file
 
 import {Tab, Divider, Icon, Label} from 'semantic-ui-react'
 
 import MachineRecordTable from 'util/machine-record-table/index.jsx'
+import Record      from 'service/record-service.jsx'
 import PGUtil        from 'util/util.jsx'
+
 const _util = new PGUtil();
+const _record = new Record();
 import './index.css';
 
 class HistoryRecordPane1 extends React.Component {
         super(props);
 
         this.state = {
-            list: [],
+            currentList: [],
+            currentTotal: 0,
+            currentPage:1,
+            machine_sn: props.machine_sn || '',
             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'}
-                ],
-            }],
+            selected_branch: 1,
         }
-        console.log('br')
-        console.dir(this.state.branches)
+        // console.dir(this.state.branches)
+        this.loadMachineRecordListByBranch = this.loadMachineRecordListByBranch.bind(this);
+        // this.loadMachineRecordListByBranch
     }
 
     componentDidMount() {
         // this.loadHistoryRecordList();
     }
     componentWillReceiveProps(nextProps) {
-        this.setState({branches: nextProps.branches});
+        this.setState({
+            branches: nextProps.branches,
+            machine_sn: nextProps.machine_sn,
+        });
     }
-    reloadRecordTable(branch_id){
+    handleBranchTagClick(branch_id){
         console.log('new reload branch is: ' + branch_id)
+
+        this.setState({
+            selected_branch: branch_id,
+        },() => {
+            this.loadMachineRecordListByBranch()
+        });
+
     }
 
+    // load record list
+    loadMachineRecordListByBranch(page=1) {
+        let _this = this;
+        let listParam = {};
+
+        listParam.page = page;
+        listParam.test_machine__machine_sn = this.state.machine_sn;
+        listParam.branch__id = this.state.selected_branch;
+
+        _record.getMachineRecordListByBranch(listParam).then(res => {
+            _this.setState({
+                currentList: res.results,
+                currentTotal: res.count,
+                isLoading: false
+            });
+        }, errMsg => {
+            _this.setState({
+                curentList: []
+            });
+            _util.errorTips(errMsg);
+
+            console.log(errMsg)
+        });
+
+        console.log(this.state.list)
+    }
 
     render(){
         let _list = this.state.branches || [];
         console.log('list is')
         console.dir(_list)
         let branch_tags = _list.map((branchItem, index) => {
+            let className = branchItem.value == this.state.selected_branch ? 'active_branch' : '';
             return (
-                <Label onClick={() => this.reloadRecordTable(branchItem.value)}>
+                <Label className={className} onClick={() => this.handleBranchTagClick(branchItem.value)}>
                     <Icon name='usb' />{branchItem.branch}
                 </Label>
             );
                     {branch_tags}
                 </div>
 
-                    <MachineRecordTable list={this.state.list} total={this.state.total} current={this.state.currentPage} loadfunc={this.loadRecordList}/>
+                    <MachineRecordTable list={this.state.currentList} total={this.state.currentTotal} current={this.state.currentPage} loadfunc={this.loadMachineRecordListByBranch}/>
 
             </div>
         );
 
             list: [
             ]
         },
-        console.dir(this.props.match.params)
-        this.onPageChange = this.onPageChange.bind(this);
+        // console.dir(this.props.match.params)
+        // this.onPageChange = this.onPageChange.bind(this);
         this.handleApplyBtnClick = this.handleApplyBtnClick.bind(this);
         this.loadHistoryRecordList = this.loadHistoryRecordList.bind(this);
     }
         console.log(this.state.list)
     }
 
-    onPageChange(page) {
-        console.log(page);
-        console.log(this);
-        this.setState({
-            current: page,
-        });
-    }
-
     render() {
         // let branches = this.state.branches;
         let panes = [
-            { menuItem: 'Tab 1', render: () => <Tab.Pane attached={true}><HistoryRecordsPane1 branches={this.state.branches}/></Tab.Pane> },
+            { menuItem: 'Review By Branches', render: () => <Tab.Pane attached={true}><HistoryRecordsPane1 machine_sn={this.state.machineInfo.machine_sn} branches={this.state.branches}/></Tab.Pane> },
         ]
 
         return (
                         {/*<MachineRecordTable list={this.state.list} total={this.state.total} current={this.state.currentPage} loadfunc={this.loadRecordList}/>*/}
 
 
-                        <Tab menu={{ attached: false }} panes={panes} />
+                        <Tab menu={{pointing: true }} panes={panes} />
                     {/*</div>*/}
 
                 </div>
 
         });
     }
 
-    // get history record list
+    // get machine info
     getHistoryRecordList(listParam){
         let url = PGConstant.base_url + '/machine-records/' + listParam.machine_sn;
 
             data    : data
         });
     }
+
+
+    getMachineRecordListByBranch(listParam){
+        let url = PGConstant.base_url + '/machine-records-by-branch/';
+
+        let data = {};
+        data = listParam;
+
+        console.log('final data')
+        console.dir(listParam);
+        return _util.request({
+            type    : 'get',
+            url     : url,
+            data    : data
+        });
+    }
 }
 
 export default Record;
\ No newline at end of file
 
     );
 }
 
-//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 MachineRecordTable extends React.Component {
     constructor(props) {
     }
 
 
-    // onPageNumChange(current) {
-    //     this.setState({
-    //         currentPage: current
-    //     }, () => {
-    //         this.props.loadfunc(current);
-    //     });
-    //     console.log('current:' + this.state.currentPage)
-    // }
+    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.props.list.records || []
+        let _list = this.props.list || []
         let style = {
             display: 'show'
         };
         });
 
         return (
-            <Table celled structured compact textAlign='center'>
-                <Table.Header>
+            <Table  basic='very' selectable structured compact textAlign='center'>
+                <Table.Header celled>
                     {/*<Table.Row>*/}
                     {/*<Table.HeaderCell rowSpan='9'>Branch: 10_STABLE</Table.HeaderCell>*/}
                     {/*</Table.Row>*/}
                             {/*<Icon name='chevron right'/>*/}
                             {/*</Menu.Item>*/}
                             {/*</Menu>*/}
-                            {/*<Pagination style={style} onChange={(current) => this.onPageNumChange(current)} pageSize={2}*/}
-                                        {/*current={this.state.currentPage} total={this.props.total}/>*/}
+                            <Pagination style={style} onChange={(current) => this.onPageNumChange(current)} pageSize={2}
+                                        current={this.state.currentPage} total={this.props.total}/>
 
                         </Table.HeaderCell>
 
 
 import django_filters
 from django.db.models import Q
 
-from .models import TestRecord
+from test_records.models import TestRecord
 
 
 class TestRecordListFilter(django_filters.rest_framework.FilterSet):
 
 from rest_framework.pagination import PageNumberPagination
 
 from exception import TestDataUploadError
-from filters import TestRecordListFilter
+from test_records.filters import TestRecordListFilter
 from models import UserMachine, TestCategory
 from pgperffarm.settings import DB_ENUM
 from user_operation.views import UserMachinePermission
     serializer_class = MachineHistoryRecordSerializer
     # pagination_class = StandardResultsSetPagination
 
-
 @api_view(['POST'])
 @permission_classes((UserMachinePermission, ))
 def TestRecordCreate(request, format=None):
 
--- /dev/null
+
+# -*- coding: utf-8 -*-
+import django_filters
+from django.db.models import Q
+
+from test_records.models import TestRecord
+
+
+class MachineRecordListFilter(django_filters.rest_framework.FilterSet):
+    """
+    TestRecordListFilter
+    """
+    branch__id = django_filters.NumberFilter(lookup_expr='icontains')
+    test_machine__machine_sn = django_filters.NumberFilter(lookup_expr='icontains')
+
+    class Meta:
+        model = TestRecord
+        fields = ['branch__id', 'test_machine__machine_sn']
\ No newline at end of file
 
 # -*- coding: utf-8 -*-
 from __future__ import unicode_literals
 
+import django_filters
 from django.shortcuts import render
 from rest_framework import mixins, viewsets, permissions, status
 
 from rest_framework import authentication
+from rest_framework.pagination import PageNumberPagination
 from rest_framework.response import Response
 from rest_framework.views import APIView
 from rest_framework_jwt.authentication import JSONWebTokenAuthentication
+
+from filters import MachineRecordListFilter
+from test_records.models import TestRecord
 from util.response import PGJsonResponse
 from users.models import UserMachine, UserProfile
-from serializer import UserMachineManageSerializer, UserPortalInfoSerializer
+from serializer import UserMachineManageSerializer, UserPortalInfoSerializer, TestRecordListSerializer
+
+class StandardResultsSetPagination(PageNumberPagination):
+    page_size = 2
+    page_size_query_param = 'page_size'
+    max_page_size = 100
+
+
+class UserMachineRecordByBranchListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
+    """
+    List machine records by branch
+    """
+
+    queryset = TestRecord.objects.all().order_by('add_time')
+    serializer_class = TestRecordListSerializer
+    pagination_class = StandardResultsSetPagination
+    filter_backends = (django_filters.rest_framework.DjangoFilterBackend,)
+    filter_class = MachineRecordListFilter
+
 
 
 class UserMachineListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
 
 #     'get': 'list',
 #     'post': 'create'
 # })
-from user_operation.views import UserMachineListViewSet, UserPortalInfoViewSet
+from user_operation.views import UserMachineListViewSet, UserPortalInfoViewSet, UserMachineRecordByBranchListViewSet
 
 router = DefaultRouter()
 router.register(r'records', TestRecordListViewSet, base_name="records")
 router.register(r'detail', TestRecordDetailViewSet, base_name="detail")
 router.register(r'machine-records', MachineHistoryRecordViewSet, base_name="machine-records")
-
+router.register(r'machine-records-by-branch', UserMachineRecordByBranchListViewSet, base_name="machine-records-by-branch")
 
 # user's machine manage list
 router.register(r'my-machine', UserMachineListViewSet, base_name="my-machine")