[ADD] button components

src/actions/index.js

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { API_URL } from '../constants/ResourceNames'
 import { REQUEST_OK, REQUEST_KO } from '../constants/ActionTypes'
 
 /**
@@ -6,7 +7,7 @@ import { REQUEST_OK, REQUEST_KO } from '../constants/ActionTypes'
  * @param {*} resource 
  */
 export const get = (resource) => dispatch => {
-    return axios.get(`/api/v1${resource}`).then(response => dispatch(ok(resource, response.data))).catch(error => dispatch(ko(resource, error)));
+    return axios.get(`${API_URL}${resource}`).then(response => dispatch(ok(resource, response.data))).catch(error => dispatch(ko(resource, error)));
 }
 
 /**

src/components/icons/Heartbeat.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import SvgIcon from 'material-ui/SvgIcon'
+import { withStyles } from 'material-ui/styles'
+
+class HeartbeatIcon extends Component {
+    render() {
+        return (
+            <SvgIcon>
+                <path fill="#000000" d="M7.5,4A5.5,5.5 0 0,0 2,9.5C2,10 2.09,10.5 2.22,11H6.3L7.57,7.63C7.87,6.83 9.05,6.75 9.43,7.63L11.5,13L12.09,11.58C12.22,11.25 12.57,11 13,11H21.78C21.91,10.5 22,10 22,9.5A5.5,5.5 0 0,0 16.5,4C14.64,4 13,4.93 12,6.34C11,4.93 9.36,4 7.5,4V4M3,12.5A1,1 0 0,0 2,13.5A1,1 0 0,0 3,14.5H5.44L11,20C12,20.9 12,20.9 13,20L18.56,14.5H21A1,1 0 0,0 22,13.5A1,1 0 0,0 21,12.5H13.4L12.47,14.8C12.07,15.81 10.92,15.67 10.55,14.83L8.5,9.5L7.54,11.83C7.39,12.21 7.05,12.5 6.6,12.5H3Z" />
+            </SvgIcon>
+        )
+    }
+}
+
+export default withStyles(null, { withTheme: true })(HeartbeatIcon)

src/components/pages/401.js

@@ -9,4 +9,4 @@ class Page401 extends Component {
     }
 }
 
-export default Page401
+export default Page401

src/components/pages/ContainersList.js

@@ -11,9 +11,24 @@ class ContainerList extends Component {
     }
 
     render() {
+        const columns = [
+            {
+                title: 'Identificador',
+                key: 'id'
+            },
+            {
+                title: 'Nombre',
+                key: 'name'
+            },
+            {
+                title: 'Status',
+                key: 'status'
+            }
+        ]
+
         return (
             <Base title={this.props.title}>
-                <ContainersTable />
+                <ContainersTable columns={columns} rows={this.props.data} />
             </Base>
         )
     }

src/components/tables/ContainersTable.js

@@ -1,37 +1,67 @@
 import React, { Component } from 'react'
 import { withStyles } from 'material-ui/styles'
 import Paper from 'material-ui/Paper'
+import Button from 'material-ui/Button'
 import Table, { TableHead, TableBody, TableRow, TableCell} from 'material-ui/Table'
 import Checkbox from 'material-ui/Checkbox'
 
 const styles = theme => ({
     root: {
         width: '100%'
+    },
+    buttons: {
+        marginRight: theme.spacing.unit / 2,
+        marginBottom: theme.spacing.unit * 3
+    },
+    tableRow: {
+        '&:hover': {
+            backgroundColor: theme.palette.grey[200],
+            cursor: 'pointer'
+        }
     }
 })
 
 class ContainersTable extends Component {
+
     render() {
-        const { classes } = this.props
+        const { classes, theme, columns, rows } = this.props
+
+        console.log(theme)
 
         return (
-            <Paper className={classes.root}>
-                <Table>
-                    <TableHead>
-                        <TableRow>
-                            <TableCell>
-                                <Checkbox />
-                            </TableCell>
-                            <TableCell>Identificador</TableCell>
-                            <TableCell>Nombre</TableCell>
-                        </TableRow>
-                    </TableHead>
-                    <TableBody>
-                    </TableBody>
-                </Table>
-            </Paper>
+            <div>
+                <Button variant='raised' color='primary' size='small' className={classes.buttons}>Arrancar</Button>
+                <Button variant='raised' color='primary' size='small' className={classes.buttons}>Parar</Button>
+                <Button variant='raised' color='primary' size='small' className={classes.buttons}>Reiniciar</Button>
+                <Paper className={classes.root}>
+                    <Table>
+                        <TableHead>
+                            <TableRow>
+                                <TableCell>
+                                    {/* <Checkbox color='primary' /> */}
+                                </TableCell>
+                                {columns.map(column => 
+                                    <TableCell>{column.title}</TableCell>
+                                )}
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {rows.map(item => 
+                                <TableRow key={item.id} className={classes.tableRow}>
+                                    <TableCell>
+                                        <Checkbox color='primary' />
+                                    </TableCell>
+                                    {columns.map(column => 
+                                        <TableCell>{item[column.key]}</TableCell>
+                                    )}
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                </Paper>
+            </div>
         )
     }
 }
 
-export default withStyles(styles)(ContainersTable)
+export default withStyles(styles, {withTheme: true})(ContainersTable)

src/constants/ResourceNames.js

@@ -1 +1,9 @@
-export const CONTAINERS = '/container/all/'
+/** 
+ * 
+ */
+export const API_URL = 'http://localhost:8000/api/v1/'
+
+/** 
+ * 
+ */
+export const CONTAINERS = 'docker/container/all/'

src/reducers/containers.js

@@ -1,5 +1,5 @@
 import { CONTAINERS } from '../constants/ResourceNames'
-import { REQUEST_GET } from '../constants/ActionTypes';
+import { REQUEST_OK } from '../constants/ActionTypes'
 
 
 /**
@@ -12,8 +12,8 @@ export const containers = (state = [], action) => {
         return state
     }
 
-    if (action.type === REQUEST_GET) {
-        return action.payload
+    if (action.type === REQUEST_OK) {
+        return action.payload.containers
     }
 
     return state