Added user listing view.

frontend/src/js/component/wb-navbar-common.js

@@ -8,7 +8,8 @@ class WBNavbarCommon extends Component {
       <WBNavbar items={ [
         { 'name': 'Home', 'id': 'home' },
         { 'name': 'All Projects', 'id': 'all-projects' },
-        { 'name': 'User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
+        { 'name': 'All Users', 'id': 'all-users' },
+        { 'name': 'Current User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
       ].concat(items) } rhs={ (
         <WBInlineSearch />
       ) } onItemClicked={ item => app.navbarItemClicked(item) }

frontend/src/js/component/wb-user-listing.js

@@ -0,0 +1,63 @@
+import { h, Component } from 'preact';
+import WBPagination from 'wb-pagination';
+import makeArvadosRequest from 'make-arvados-request';
+import urlForObject from 'url-for-object';
+
+class WBUserListing extends Component {
+  componentDidMount() {
+    this.preparePage();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.preparePage();
+  }
+
+  preparePage() {
+    const { arvHost, arvToken } = this.props.app.state;
+    const { itemsPerPage, page } = this.props;
+
+    const order = ['last_name asc'];
+
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/users?order=' + encodeURIComponent(JSON.stringify(order)) +
+      '&limit=' + itemsPerPage + '&offset=' + (itemsPerPage * page));
+    prom = prom.then(xhr => {
+      this.setState({
+        'items': xhr.response['items'],
+        'numPages': Math.ceil(xhr.response['items_available'] / itemsPerPage)
+      });
+    });
+  }
+
+  render({ app, page, getPageUrl }, { items, numPages }) {
+    return (
+      <div class="container-fluid">
+        <h1>Users</h1>
+        <div class="d-flex flex-wrap">
+          { items ? items.map(it => (
+            <div class="card mx-2 my-2">
+              <h5 class="card-header">
+                <a href={ urlForObject(it) }>{ it.last_name + ', ' + it.first_name }</a>
+              </h5>
+              <div class="card-body">
+                <div><a href={ 'mailto:' + it.email }>{ it.email }</a></div>
+                <div>{ it.uuid }</div>
+              </div>
+            </div>
+          )) : 'Loading...' }
+        </div>
+
+        <WBPagination activePage={ page } numPages={ numPages }
+          getPageUrl={ getPageUrl } />
+      </div>
+    );
+  }
+}
+
+WBUserListing.defaultProps = {
+  'itemsPerPage': 20,
+  'page': 0
+};
+
+export default WBUserListing;

frontend/src/js/page/wb-app.js

@@ -6,6 +6,7 @@ import WBLandingPage from 'wb-landing-page';
 import WBProcessView from 'wb-process-view';
 import WBCollectionView from 'wb-collection-view';
 import WBCollectionBrowse from 'wb-collection-browse';
+import WBUsersPage from 'wb-users-page';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
@@ -38,6 +39,9 @@ class WBApp extends Component {
     } else if (item['id'] === 'all-projects') {
       route('/browse');
 
+    } else if (item['id'] === 'all-users') {
+      route('/users');
+      
     }
   }
 
@@ -68,6 +72,8 @@ class WBApp extends Component {
         <WBCollectionView path="/collection/:uuid" app={ this } />
 
         <WBCollectionBrowse path='/collection-browse/:uuid/:collectionPath?/:page?' app={ this } />
+
+        <WBUsersPage path='/users/:page?' app={ this } />
       </Router>
     );
   }

frontend/src/js/page/wb-users-page.js

@@ -0,0 +1,22 @@
+import { h, Component } from 'preact';
+import WBNavbarCommon from 'wb-navbar-common';
+import WBUserListing from 'wb-user-listing';
+
+class WBUsersPage extends Component {
+  getUrl(page) {
+    return ('/users/' + page);
+  }
+
+  render({ app, page }) {
+    return (
+      <div>
+        <WBNavbarCommon />
+
+        <WBUserListing app={ app } page={ Number(page || 0) }
+          getPageUrl={ page => this.getUrl(page) } />
+      </div>
+    );
+  }
+};
+
+export default WBUsersPage;