summaryrefslogtreecommitdiff
path: root/front-end/src/util/machine-table/index.jsx
blob: 21ec17f706e1a2b38becdc09df77f476f5ecaf94 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
import React from 'react';
import {Link}     from 'react-router-dom';
import {Icon, Table, Label, Message, Button} from 'semantic-ui-react'
import Pagination from 'util/pagination/index.jsx'
import './index.css';

function LastestLink(props) {
    let _list = props.list
    if (_list <= 0) {
        return null;
    }

    let ret = _list.map((item, index) => {
        return (
            <Link color='linkedin' to={'detailInfo/' + item.uuid}>
                 {item.branch}
            </Link>
        );
    });
    return ret;
}

// general basic table
class MachineTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isFirstLoading: true,
            total: this.props.total,
            currentPage: 1,
        }
    }


    onPageNumChange(current) {
        let _this = this
        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 || []
        let style = {
            display: 'show'
        };
        let listBody = _list.map((machineItem, index) => {
            let machine = machineItem
            let system = machine.os_name + ' ' + machine.os_version + ' ' + machine.comp_name + ' ' + machine.comp_version;

            // let improvedIconClassName = trend.improved > 0 ? 'improved' : 'anonymous'
            // let quoIconClassName = trend.quo > 0 ? 'quo' : 'anonymous'
            // let regressiveIconClassName = trend.regressive > 0 ? 'regressive' : 'anonymous'
            let color = 'positive';
            if(machine.state == 'pending'){
                color = 'warning';
            }else if(machine.state == 'prohibited'){
                color = 'negative';
            }
            return (
                <Table.Row key={index} className={color}>
                    {/*alias*/}
                    <Table.Cell>
                        <Link color='linkedin' to={'machineInfo/' + machine.machine_sn}>
                            {machine.alias}
                        </Link>
                    </Table.Cell>

                    {/*system*/}
                    <Table.Cell>{system}</Table.Cell>

                    {/*State*/}
                    <Table.Cell>
                        {machine.state}
                    </Table.Cell>

                    {/*lastest-records*/}
                    <Table.Cell textAlign='center'>
                        {/*<Icon className={"bgc-clear " + improvedIconClassName} name='smile outline' size='large'/>*/}
                        {/*<Bubble num={trend.improved} name="improved"/>*/}
                        <div className="link-div">
                            <LastestLink list={machine.lastest}/>
                        </div>
                    </Table.Cell>

                    {/*machine history*/}
                    <Table.Cell textAlign='center'>
                        <Link color='linkedin' to={'machineInfo/' + machine.machine_sn}>
                            <Icon name='linkify'/> Link
                        </Link>
                    </Table.Cell>

                    {/*date*/}
                    <Table.Cell>{machine.add_time}</Table.Cell>
                </Table.Row>
            );
        });

        return (
            <Table celled structured compact textAlign='center'>
                <Table.Header>
                    {/*<Table.Row>*/}
                        {/*<Table.HeaderCell rowSpan='9'>Branch: 10_STABLE</Table.HeaderCell>*/}
                    {/*</Table.Row>*/}
                    <Table.Row>
                        <Table.HeaderCell rowSpan='2'>Alias</Table.HeaderCell>
                        <Table.HeaderCell rowSpan='2'>System</Table.HeaderCell>
                        {/*<Table.HeaderCell rowSpan='2'>Branch</Table.HeaderCell>*/}
                        <Table.HeaderCell rowSpan='2'>State</Table.HeaderCell>
                        <Table.HeaderCell rowSpan='3'>Lastest</Table.HeaderCell>
                        <Table.HeaderCell rowSpan='2'>History</Table.HeaderCell>
                        <Table.HeaderCell rowSpan='2'>Add Date</Table.HeaderCell>
                    </Table.Row>
                    {/*<Table.Row>*/}
                        {/*<Table.HeaderCell>improvement</Table.HeaderCell>*/}
                        {/*<Table.HeaderCell>status quo</Table.HeaderCell>*/}
                        {/*<Table.HeaderCell>regression</Table.HeaderCell>*/}
                    {/*</Table.Row>*/}

                </Table.Header>

                <Table.Body>
                    {listBody}
                </Table.Body>
                <Table.Footer>
                    <Table.Row>
                        <Table.HeaderCell colSpan='10'>

                            <Pagination style={style} onChange={(current) => this.onPageNumChange(current)} pageSize={40}
                                        current={this.state.currentPage} total={this.props.total}/>
                        </Table.HeaderCell>

                    </Table.Row>
                </Table.Footer>
            </Table>
        );

    }


}

export default MachineTable;