diff --git a/frontend/src/js/component/wb-navbar-common.js b/frontend/src/js/component/wb-navbar-common.js
index f07610d..c4b4cf3 100644
--- a/frontend/src/js/component/wb-navbar-common.js
+++ b/frontend/src/js/component/wb-navbar-common.js
@@ -8,7 +8,8 @@ class WBNavbarCommon extends Component {
) } onItemClicked={ item => app.navbarItemClicked(item) }
diff --git a/frontend/src/js/component/wb-user-listing.js b/frontend/src/js/component/wb-user-listing.js
new file mode 100644
index 0000000..88e7970
--- /dev/null
+++ b/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 (
+
+
Users
+
+ { items ? items.map(it => (
+
+ )) : 'Loading...' }
+
+
+
+
+ );
+ }
+}
+
+WBUserListing.defaultProps = {
+ 'itemsPerPage': 20,
+ 'page': 0
+};
+
+export default WBUserListing;
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 4718dca..f229443 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/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 {
+
+
);
}
diff --git a/frontend/src/js/page/wb-users-page.js b/frontend/src/js/page/wb-users-page.js
new file mode 100644
index 0000000..5e79335
--- /dev/null
+++ b/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 (
+
+
+
+ this.getUrl(page) } />
+
+ );
+ }
+};
+
+export default WBUsersPage;