From 5e94a2581618f69be2c2279ef0b27828e4ec76f8 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 31 Jan 2020 18:10:54 +0100
Subject: [PATCH] Filtering by container_request state.

---
 .../src/js/component/wb-process-listing.js    | 97 +++++++++++++++++++
 frontend/src/js/page/wb-app.js                |  5 +-
 frontend/src/js/page/wb-browse.js             | 35 ++++++-
 frontend/src/js/widget/wb-checkboxes.js       | 30 ++++++
 frontend/src/js/widget/wb-tabs.js             |  2 +-
 5 files changed, 164 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/js/component/wb-process-listing.js
 create mode 100644 frontend/src/js/widget/wb-checkboxes.js

diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
new file mode 100644
index 0000000..2d1021c
--- /dev/null
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -0,0 +1,97 @@
+import { h, Component } from 'preact';
+import { route } from 'preact-router';
+import makeArvadosRequest from 'make-arvados-request';
+import WBTable from 'wb-table';
+import WBPagination from 'wb-pagination';
+import WBCheckboxes from 'wb-checkboxes';
+
+class WBProcessListing extends Component {
+
+  constructor(...args) {
+    super(...args);
+    this.state.rows = [];
+    this.state.numPages = 0;
+    this.state.requestStates = [ 'Uncommitted', 'Committed', 'Final' ];
+    this.state.containerStates = [ 'Queued', 'Locked', 'Running', 'Cancelled', 'Complete' ];
+    this.state.reqStateMask = [ true, true, true ];
+    this.state.contStateMask = [ true, true, true, true, true ];
+  }
+
+  componentDidMount() {
+    this.fetchItems();
+  }
+
+  prepareRows(items) {
+    return items.map(item => [
+      (<div>
+        <div>
+          <a href="#"
+            onclick={ e => { e.preventDefault(); route('/process/' + item['uuid']) }}>{ item['name'] }</a>
+        </div>
+        <div>{ item['uuid'] }</div>
+      </div>),
+      item['state'],
+      item['owner_uuid'],
+      item['created_at'].replace('T', ' ').substr(0, item['created_at'].length - 11) + '',
+      item['output_uuid'],
+      (<div>
+        <button class="btn btn-outline-danger"><i class="fas fa-trash"></i></button>
+      </div>)
+    ]);
+  }
+
+  fetchItems() {
+    let { arvHost, arvToken } = this.props.appState;
+    let i = this.props.activePage;
+    let filters = [
+      [ 'state', 'in', this.state.requestStates.filter((_, idx) => this.state.reqStateMask[idx]) ]
+    ];
+    if (this.props.ownerUuid)
+      filters.push([ 'owner_uuid', '=', this.props.ownerUuid ]);
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/container_requests?filters=' + encodeURIComponent(JSON.stringify(filters)) +
+      '&limit=' + encodeURIComponent(this.props.itemsPerPage) +
+      '&offset=' + encodeURIComponent(this.props.itemsPerPage * i));
+    prom = prom.then(xhr =>
+      this.setState({
+        'numPages': Math.ceil(xhr.response['items_available'] / xhr.response['limit']),
+        'rows': this.prepareRows(xhr.response['items'])
+      }));
+  }
+
+  componentWillReceiveProps(nextProps, nextState) {
+    // this.setState({ 'rows': [] }); // .rows = [];
+    this.props = nextProps;
+    this.fetchItems();
+  }
+
+  render({ appState, ownerUuid, activePage, onPageChanged },
+    { rows, numPages, requestStates, containerStates,
+      reqStateMask, contStateMask }) {
+
+    return (
+      <div>
+        <WBCheckboxes items={ requestStates } checked={ reqStateMask }
+          cssClass="float-left mx-2 my-2" title="Request State: "
+          onChange={ () => this.fetchItems() } />
+        <WBCheckboxes items={ containerStates } checked={ contStateMask }
+          cssClass="float-left mx-2 my-2" title="Container State: "
+          onChange={ () => this.fetchItems() } />
+
+        <WBTable columns={ [ 'Name', 'Status', 'Owner', 'Created At (UTC)', 'Output', 'Actions' ] }
+          rows={ rows } />
+
+        <WBPagination numPages={ numPages }
+          activePage={ activePage }
+          onPageChanged={ i => onPageChanged(i) } />
+      </div>
+    );
+  }
+}
+
+WBProcessListing.defaultProps = {
+  'itemsPerPage': 100,
+  'ownerUuid': null
+};
+
+export default WBProcessListing;
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 85c1138..6ebb0b6 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -9,7 +9,8 @@ class WBApp extends Component {
     super(...args);
     this.state.arvHost = window.localStorage['arvHost'];
     this.state.arvToken = window.localStorage['arvToken'];
-    this.state.currentUser = JSON.parse(window.localStorage['currentUser']);
+    if ('currentUser' in window.localStorage)
+      this.state.currentUser = JSON.parse(window.localStorage['currentUser']);
     this.appCallbacks = {
       'navbarItemClicked': item => this.navbarItemClicked(item)
     };
@@ -43,7 +44,7 @@ class WBApp extends Component {
 
         <WBSignIn path="/sign-in" appState={ this.appState } />
 
-        <WBBrowse path="/browse/:ownerUuid?/:activePage?"
+        <WBBrowse path="/browse/:ownerUuid?/:activePage?/:objTypeTab?/:collectionPage?/:processPage?/:workflowPage?"
           appCallbacks={ this.appCallbacks }
           appState={ this.appState } />
       </Router>
diff --git a/frontend/src/js/page/wb-browse.js b/frontend/src/js/page/wb-browse.js
index 9d010b7..6e78c35 100644
--- a/frontend/src/js/page/wb-browse.js
+++ b/frontend/src/js/page/wb-browse.js
@@ -5,9 +5,22 @@ import WBProjectListing from 'wb-project-listing';
 import WBInlineSearch from 'wb-inline-search';
 import WBProjectCrumbs from 'wb-project-crumbs';
 import WBTabs from 'wb-tabs';
+import WBProcessListing from 'wb-process-listing';
 
 class WBBrowse extends Component {
-  render({ ownerUuid, activePage, appCallbacks, appState }) {
+  route(params) {
+    route('/browse/' +
+      ('ownerUuid' in params ? params.ownerUuid : (this.props.ownerUuid || '')) + '/' +
+      ('activePage' in params ? params.activePage : (this.props.activePage || '')) + '/' +
+      ('objTypeTab' in params ? params.objTypeTab : (this.props.objTypeTab || '')) + '/' +
+      ('collectionPage' in params ? params.collectionPage : (this.props.collectionPage || '')) + '/' +
+      ('processPage' in params ? params.processPage : (this.props.processPage || '')) + '/' +
+      ('workflowPage' in params ? params.workflowPage : (this.props.workflowPage || '')));
+  }
+
+  render({ ownerUuid, activePage, appCallbacks, appState,
+    objTypeTab, collectionPage, processPage, workflowPage }) {
+
     return (
       <div>
         <WBNavbar items={ [
@@ -30,7 +43,25 @@ class WBBrowse extends Component {
           activePage={ Number(activePage || 0) }
           onPageChanged={ i => route('/browse/' + (ownerUuid || '') + '/' + i)} />
 
-        <WBTabs tabs={ [ { 'name': 'Collections', 'isActive': true }, 'Processes', 'Workflows' ] } />
+        <WBTabs tabs={ [
+          { 'id': 'collection', 'name': 'Collections', 'isActive': (!objTypeTab || objTypeTab === 'collection') },
+          { 'id': 'process', 'name': 'Processes', 'isActive': (objTypeTab === 'process') },
+          { 'id': 'workflow', 'name': 'Workflows', 'isActive': (objTypeTab === 'workflow') } ] }
+          onTabChanged={ tab => this.route({ 'objTypeTab': tab['id'] }) } />
+
+        {
+          (!objTypeTab || objTypeTab === 'collection') ? (
+            null
+          ) : (objTypeTab === 'process' ? (
+            <WBProcessListing appState={ appState }
+              ownerUuid={ ownerUuid }
+              itemsPerPage="20"
+              activePage={ Number(processPage || 0) }
+              onPageChanged={ i => this.route({ 'processPage': i }) } />
+          ) : (objTypeTab === 'workflow' ? (
+            null
+          ) : null))
+        }
       </div>
     );
   }
diff --git a/frontend/src/js/widget/wb-checkboxes.js b/frontend/src/js/widget/wb-checkboxes.js
new file mode 100644
index 0000000..48792ab
--- /dev/null
+++ b/frontend/src/js/widget/wb-checkboxes.js
@@ -0,0 +1,30 @@
+import { h, Component } from 'preact';
+
+class WBCheckboxes extends Component {
+  render({ items, checked, onChange, cssClass, title }) {
+    return (
+      <div class={ 'btn-group-toggle' + (cssClass ? ' ' + cssClass : '') } data-toggle="buttons">
+        { title }
+        {
+          items.map((name, idx) => (
+            <label class={ 'btn btn-outline-primary' + (checked[idx] ? ' active' : '') }
+              onclick={ e => { e.preventDefault();
+                checked[idx] = !checked[idx];
+                this.setState({});
+                onChange(); } }>
+              <input type="checkbox" checked={ checked[idx] ? 'checked' : null }
+                autocomplete="off" /> { name }
+            </label>
+          ))
+        }
+      </div>
+    );
+  }
+}
+
+WBCheckboxes.defaultProps = {
+  'checked': [],
+  'onChange': () => {}
+}
+
+export default WBCheckboxes;
diff --git a/frontend/src/js/widget/wb-tabs.js b/frontend/src/js/widget/wb-tabs.js
index 140b6b7..4427df6 100644
--- a/frontend/src/js/widget/wb-tabs.js
+++ b/frontend/src/js/widget/wb-tabs.js
@@ -21,7 +21,7 @@ class WBTabs extends Component {
           cls = cls.join(' ');
           return (
             <li class="nav-item">
-              <a class={ cls } href="#" onclick={ () => onTabChanged(idx) }>{ name }</a>
+              <a class={ cls } href="#" onclick={ e => { e.preventDefault(); onTabChanged(t); } }>{ name }</a>
             </li>
           );
         }) }