Add collection type filtering: log, output, etc.

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

@@ -6,6 +6,7 @@ import WBPagination from 'wb-pagination';
 import urlForObject from 'url-for-object';
 import arvadosTypeName from 'arvados-type-name';
 import arvadosObjectName from 'arvados-object-name';
+import WBCheckboxes from 'wb-checkboxes';
 
 class WBCollectionListing extends Component {
 
@@ -14,6 +15,8 @@ class WBCollectionListing extends Component {
     this.state.rows = [];
     this.state.numPages = 0;
     this.state.orderStream = uuid.v4();
+    this.state.collectionTypes = [ 'Intermediate', 'Output', 'Log', 'Other' ];
+    this.state.collectionTypeMask = [ true, true, true, true ];
   }
 
   componentDidMount() {
@@ -64,9 +67,9 @@ class WBCollectionListing extends Component {
   }
 
   fetchItems() {
-    let { arvHost, arvToken } = this.props.app.state;
-
-    let { activePage, itemsPerPage, ownerUuid, textSearch } = this.props;
+    const { arvHost, arvToken } = this.props.app.state;
+    const { activePage, itemsPerPage, ownerUuid, textSearch } = this.props;
+    const { collectionTypes, collectionTypeMask } = this.state;
 
     let filters = [];
 
@@ -76,6 +79,17 @@ class WBCollectionListing extends Component {
     if (textSearch)
       filters.push([ 'any', 'ilike', '%' + textSearch + '%' ]);
 
+    if (collectionTypeMask.filter(a => (!a)).length != 0) {
+      if (collectionTypeMask[3]) {
+        for (let i = 0; i < 3; i++)
+          if (!collectionTypeMask[i])
+            filters.push([ 'properties.type', '!=', collectionTypes[i].toLowerCase() ]);
+      } else {
+        filters.push([ 'properties.type', 'in',
+          collectionTypes.filter((_, k) => collectionTypeMask[k]).map(a => a.toLowerCase()) ]);
+      }
+    }
+
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)) +
       '&limit=' + encodeURIComponent(itemsPerPage) +
@@ -135,13 +149,19 @@ class WBCollectionListing extends Component {
     this.fetchItems();
   }
 
-  render({ app, ownerUuid, activePage, getPageUrl }, { rows, numPages, error }) {
+  render({ app, ownerUuid, activePage, getPageUrl }, { rows, numPages, error,
+    collectionTypes, collectionTypeMask }) {
+
     return (
       <div>
         { error ? (<div class="alert alert-danger" role="alert">
           { error }
         </div>) : null }
 
+        <WBCheckboxes items={ collectionTypes } checked={ collectionTypeMask }
+          cssClass="float-left mx-2 my-2" title="Collection Type: "
+          onChange={ () => route(getPageUrl(0)) } />
+
         <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'File Count', 'Total Size', 'Actions' ] }
           headerClasses={ [ 'w-1'] }
           rows={ rows } />