Repo gui shows simple table of calcs.

gui/src/api.js

@@ -66,8 +66,8 @@ function repo(uploadHash, calcHash) {
     .then(response => response.json())
 }
 
-function repoAll(uploadHash, calcHash) {
-  return fetch(`${apiBase}/repo`)
+function repoAll(page, perPage) {
+  return fetch(`${apiBase}/repo?page=${page}&per_page=${perPage}`)
     .then(response => response.json())
 }
 

gui/src/components/Repo.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles, Paper, LinearProgress } from '@material-ui/core';
-import ReactJson from 'react-json-view'
+import { withStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TablePagination from '@material-ui/core/TablePagination';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+import { TableFooter } from '@material-ui/core';
 import api from '../api';
-import Markdown from './Markdown';
 
 
-class Repo extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired
-  }
-  static styles = theme => ({
-    root: {},
-    calcData: {
-      padding: theme.spacing.unit
-    }
-  });
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      data: null
-    }
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing.unit * 3,
+  },
+  table: {
+  },
+  tableWrapper: {
+    // overflowX: 'auto',
+  },
+});
+
+class EnhancedTable extends React.Component {
+  state = {
+    data: [],
+    page: 1,
+    rowsPerPage: 5,
+    total: 0
+  };
+
+  update(page, rowsPerPage) {
+    api.repoAll(page, rowsPerPage).then(data => {
+      const { pagination: { total, page, per_page }, results } = data
+      this.setState({data: results, page: page, rowsPerPage: per_page, total: total})
+    })
   }
 
   componentDidMount() {
-    api.repoAll().then(data => {
-      this.setState({data: data})
-    })
+    const { page, rowsPerPage } = this.state
+    this.update(page, rowsPerPage)
   }
 
+  handleChangePage = (event, page) => {
+    this.update(page + 1, this.state.rowsPerPage)
+  };
+
+  handleChangeRowsPerPage = event => {
+    const rowsPerPage = event.target.value
+    this.update(this.state.page, rowsPerPage)
+  };
+
   render() {
-    const { classes } = this.props
-    const { data } = this.state
+    const { classes } = this.props;
+    const { data, rowsPerPage, page, total } = this.state;
+    const emptyRows = rowsPerPage - Math.min(rowsPerPage, total - (page - 1) * rowsPerPage);
 
     return (
-      <div className={classes.root}>
-        <Markdown>{`
-          ## The Repository – Raw Code Data
-        `}</Markdown>
-        <Paper className={classes.calcData}>
-          {
-            data ?
-              <ReactJson src={this.state.data} enableClipboard={false} collapsed={4} /> :
-              <LinearProgress variant="query" />
-          }
-        </Paper>
-      </div>
-
-    )
+      <Paper className={classes.root}>
+        <div className={classes.tableWrapper}>
+          <Table className={classes.table} aria-labelledby="tableTitle">
+            <TableBody>
+              {data.map((n, index) => (
+                <TableRow
+                  hover
+                  role="checkbox"
+                  tabIndex={-1}
+                  key={index}
+                >
+                  <TableCell>{n.chemical_composition_bulk_reduced}</TableCell>
+                  <TableCell>{n.program_name}</TableCell>
+                  <TableCell>{n.program_basis_set_type}</TableCell>
+                  <TableCell>{n.system_type}</TableCell>
+                  <TableCell>{n.crystal_system}</TableCell>
+                  <TableCell>{n.space_group_number}</TableCell>
+                  <TableCell>{n.XC_functional_name}</TableCell>
+                </TableRow>
+              ))}
+              {emptyRows > 0 && (
+                <TableRow style={{ height: 49 * emptyRows }}>
+                  <TableCell colSpan={6} />
+                </TableRow>
+              )}
+            </TableBody>
+            <TableFooter>
+              <TablePagination
+                count={total}
+                rowsPerPage={rowsPerPage}
+                page={page - 1}
+                backIconButtonProps={{
+                  'aria-label': 'Previous Page',
+                }}
+                nextIconButtonProps={{
+                  'aria-label': 'Next Page',
+                }}
+                onChangePage={this.handleChangePage}
+                onChangeRowsPerPage={this.handleChangeRowsPerPage}
+              />
+            </TableFooter>
+          </Table>
+        </div>
+      </Paper>
+    );
   }
 }
 
-export default withStyles(Repo.styles)(Repo);
\ No newline at end of file
+EnhancedTable.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(EnhancedTable);
\ No newline at end of file

gui/src/config.js

@@ -17,20 +17,20 @@ export const genTheme = createMuiTheme({
 export const repoTheme = createMuiTheme({
   palette: {
     primary: repo,
-    secondary: secondary,
+    secondary: repo,
   }
 });
 
 export const archiveTheme = createMuiTheme({
   palette: {
     primary: archive,
-    secondary: secondary,
+    secondary: repo,
   }
 });
 
 export const encTheme = createMuiTheme({
   palette: {
     primary: enc,
-    secondary: secondary,
+    secondary: repo,
   }
 });
\ No newline at end of file

nomad/api.py

@@ -98,14 +98,15 @@ class RepoCalc(Resource):
 
 class RepoCalcs(Resource):
     def get(self):
-        page = request.args.get('page', 1)
-        per_page = request.args.get('per_page', 10)
+        # TODO use argparse? bad request reponse an bad params, pagination as decorator
+        page = int(request.args.get('page', 1))
+        per_page = int(request.args.get('per_page', 10))
 
         assert page >= 1
         assert per_page > 0
 
         body = {
-            'from': page - 1,
+            'from': (page - 1) * per_page,
             'size': per_page,
             'query': {
                 'match_all': {}

tests/test_api.py

@@ -153,7 +153,7 @@ def test_processing(client, file, celery_session_worker):
     assert_exists(config.files.uploads_bucket, upload['upload_id'])
 
 
-def test_get_repo_calc(client, example_entry):
+def test_repo_calc(client, example_entry):
     rv = client.get('/repo/%s/%s' % (example_entry.upload_hash, example_entry.calc_hash))
     assert rv.status_code == 200
 
@@ -163,7 +163,7 @@ def test_non_existing_repo_cals(client):
     assert rv.status_code == 404
 
 
-def test_get_repo_calcs(client, example_entry):
+def test_repo_calcs(client, example_entry):
     rv = client.get('/repo')
     assert rv.status_code == 200
     data = json.loads(rv.data)
@@ -173,6 +173,16 @@ def test_get_repo_calcs(client, example_entry):
     assert len(results) >= 1
 
 
+def test_repo_calcs_pagination(client, example_entry):
+    rv = client.get('/repo?page=1&per_page=1')
+    assert rv.status_code == 200
+    data = json.loads(rv.data)
+    results = data.get('results', None)
+    assert results is not None
+    assert isinstance(results, list)
+    assert len(results) == 1
+
+
 def test_get_archive(client, archive_id):
     rv = client.get('/archive/%s' % archive_id)
     assert rv.status_code == 302