/**
 *
 *
 * @copyright 2017 Government of Canada
 * @license MIT
 * @author igboyes
 *
 */

import React, { PropTypes } from "react";
import { connect } from "react-redux";
import { Row, Col, ListGroup, ListGroupItem } from "react-bootstrap";

import { getCUDA } from "../../jobs/actions";
import { Flex, FlexItem, Icon } from "virtool/js/components/Base";

class CUDAList extends React.Component {

    static propTypes = {
        cuda: PropTypes.arrayOf(PropTypes.object),
        onGet: PropTypes.func
    };

    componentDidMount () {
        this.props.onGet();
    }

    render () {
        if (this.props.cuda === null) {
            return <div />;
        }

        let listComponents = this.props.cuda.map(device =>
            <ListGroupItem key={device.index}>
                <Row>
                    <Col md={4}>
                        <Flex alignItems="center">
                            <Icon name="vga" style={{fontSize: "21px"}} />
                            <FlexItem pad={5}>
                                {device.model}
                            </FlexItem>
                        </Flex>
                    </Col>
                    <Col md={3}>
                        {device.clock} MHz
                    </Col>
                    <Col md={5}>
                        {device.total_memory} GB VRAM @ {device.memory_clock} MHz
                    </Col>
                </Row>
            </ListGroupItem>
        );

        if (!listComponents.length) {
            return (
                <ListGroupItem className="text-center">
                    <Icon name="info" /> No CUDA Devices Detected
                </ListGroupItem>
            );
        }

        return (
            <div>
                <h4>
                    <strong>CUDA Devices</strong>
                </h4>
                <ListGroup>
                    {listComponents}
                </ListGroup>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        cuda: state.jobs.cuda
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        onGet: () => {
            dispatch(getCUDA())
        }
    };
};

const Container = connect(mapStateToProps, mapDispatchToProps)(CUDAList);

export default Container;

@@ -284,16 +284,61 @@
 tions%22;%0A
+import %7B byteSize %7D from %22virtool/js/utils%22;%0A
 import %7B
@@ -1347,24 +1347,33 @@
            %7B
+byteSize(
 device.total
@@ -1383,12 +1383,10 @@
 mory
+)
 %7D
- GB
  VRA

Fix CUDA component memory rendering