feat: add ability to search images and tags by name (#177)

src/components/catalog/catalog-element.riot

@@ -16,7 +16,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <catalog-element>
   <!-- Begin of tag -->
-  <div class="content">
+  <div class="content"
+    if="{!props.filterResults || state.nImages > 0 || matchSearch(props.filterResults, state.image)}">
     <material-card class="list highlight" expanded="{state.expanded}" onclick="{ onClick }">
       <material-waves onmousedown="{this.triggerLaunch}" center="true" color="#ddd"
         setLaunchListener="{ setLaunchListener }" />
@@ -24,17 +25,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <i class="material-icons">send</i>
         { state.image || state.repo }
         <div if="{state.images}" class="item-count right">
-          { state.images.length } images
+          { state.nImages } images
           <i class="material-icons animated {state.expanded ? 'expanded' : ''}">expand_more</i>
         </div>
       </span>
     </material-card>
-    <catalog-element if="{ state.images }"
-      class="animated {!state.expanded ? 'hide' : ''} {state.expanding ? 'expanding' : ''}"
+    <catalog-element if="{ state.images }" filter-results="{ props.filterResults }"
+      class="animated {!state.expanded && !props.filterResults ? 'hide' : ''} {state.expanding ? 'expanding' : ''}"
       each="{item in state.images}" item="{ item }" />
   </div>
   <script>
     import router from '../../scripts/router';
+    import {
+      matchSearch
+    } from '../search-bar.riot';
 
     export default {
       onBeforeMount(props, state) {
@@ -45,6 +49,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         } else if (props.item.images && props.item.repo) {
           state.images = props.item.images;
           state.repo = props.item.repo;
+          state.nImages = props.item.images.length;
+        }
+      },
+      onBeforeUpdate(props, state) {
+        if (props.filterResults && state.images) {
+          state.nImages = state.images.filter(image => matchSearch(props.filterResults, image)).length;
+        } else {
+          state.nImages = state.images && state.images.length;
         }
       },
       onClick() {
@@ -65,7 +77,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       },
       setLaunchListener(cb) {
         this.triggerLaunch = cb;
-      }
+      },
+      matchSearch
     }
   </script>
   <!-- End of tag -->

src/components/catalog/catalog.riot

@@ -26,7 +26,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <div if="{ !state.loadend }" class="spinner-wrapper">
     <material-spinner></material-spinner>
   </div>
-  <catalog-element each="{ item in state.repositories }" item="{ item }" />
+  <catalog-element each="{ item in state.repositories }" item="{ item }" filter-results="{ props.filterResults }"/>
   <script>
     import CatalogElement from './catalog-element.riot'
     import {

src/components/docker-registry-ui.riot

@@ -18,6 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <header>
     <material-navbar>
       <div class="logo">Docker Registry UI</div>
+      <search-bar on-search="{ onSearch }"></search-bar>
       <dialogs-menu if="{props.singleRegistry !== 'true'}" on-notify="{ notifySnackbar }"
         on-server-change="{ onServerChange }"></dialogs-menu>
     </material-navbar>
@@ -26,12 +27,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <router base="#!">
       <route path="{baseRoute}">
         <catalog registry-url="{ state.registryUrl }" registry-name="{ state.name }"
-          catalog-elements-limit="{ state.catalogElementsLimit }" on-notify="{ notifySnackbar }" />
+          catalog-elements-limit="{ state.catalogElementsLimit }" on-notify="{ notifySnackbar }"
+          filter-results="{ state.filter }" />
       </route>
       <route path="{baseRoute}taglist/(.*)">
         <tag-list registry-url="{ state.registryUrl }" registry-name="{ state.name }" pull-url="{ state.pullUrl }"
           image="{ router.getTagListImage() }" show-content-digest="{props.showContentDigest}"
-          is-image-remove-activated="{props.isImageRemoveActivated}" on-notify="{ notifySnackbar }"></tag-list>
+          is-image-remove-activated="{props.isImageRemoveActivated}" on-notify="{ notifySnackbar }"
+          filter-results="{ state.filter }"></tag-list>
       </route>
       <route path="{baseRoute}taghistory/(.*)">
         <tag-history registry-url="{ state.registryUrl }" registry-name="{ state.name }" pull-url="{ state.pullUrl }"
@@ -66,6 +69,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     import TagList from './tag-list/tag-list.riot';
     import TagHistory from './tag-history/tag-history.riot';
     import DialogsMenu from './dialogs/dialogs-menu.riot';
+    import SearchBar from './search-bar.riot'
     import {
       stripHttps,
       getRegistryServers
@@ -78,6 +82,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         TagList,
         TagHistory,
         DialogsMenu,
+        SearchBar,
         Router,
         Route
       },
@@ -121,6 +126,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           });
         }
       },
+      onSearch(value) {
+        this.update({
+          filter: value
+        })
+      },
       baseRoute: '([^#]*?)/(\\?[^#]*?)?(#!)?(/?)',
       router,
       version

src/components/search-bar.riot

@@ -0,0 +1,48 @@
+<search-bar>
+  <material-input placeholder="Search in page"></material-input>
+  <script>
+    import {
+      router
+    } from '@riotjs/route';
+
+    export default {
+      onMounted(props, state) {
+        const input = this.$('input');
+        let value = '';
+        const notify = () => {
+          if (value !== input.value) {
+            props.onSearch(input.value.toLowerCase())
+          }
+          value = input.value;
+        }
+        input.addEventListener('keyup', notify);
+        router.on.value(() => {
+          input.value = '';
+          notify();
+        })
+      }
+    }
+
+    export function matchSearch(search, value) {
+      return !search || (value && value.toLowerCase().indexOf(search) >= 0);
+    }
+  </script>
+  <style>
+    :host material-input {
+      position: absolute;
+      top: 0em;
+      right: 64px;
+      max-width: 20%;
+    }
+
+    @media screen and (max-width: 400px) {
+      :host material-input {
+        display: none;
+      }
+    }
+
+    :host material-input input {
+      color: #fff;
+    }
+  </style>
+</search-bar>

src/components/tag-list/tag-list.riot

@@ -39,7 +39,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <tag-table if="{ state.loadend }" tags="{state.tags}" asc="{state.asc}" page="{ state.page }"
     show-content-digest="{props.showContentDigest}" is-image-remove-activated="{props.isImageRemoveActivated}"
     onReverseOrder="{ onReverseOrder }" registry-url="{ props.registryUrl }" pull-url="{ props.pullUrl }"
-    on-notify="{ props.onNotify }"></tag-table>
+    on-notify="{ props.onNotify }" filter-results="{ props.filterResults }"></tag-table>
 
   <pagination pages="{ getPageLabels(state.page, getNumPages(state.tags)) }" onPageUpdate="{onPageUpdate}"></pagination>
 
@@ -84,15 +84,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         const self = this;
         const oReq = new Http();
         oReq.addEventListener('load', function () {
-          state.tags = [];
           if (this.status == 200) {
-            const tags = JSON.parse(this.responseText).tags || [];
-            state.tags = tags.map(function (tag) {
-              return new DockerImage(props.image, tag, null, props.registryUrl, props.onNotify);
-            }).sort(compare);
+            const tags = (JSON.parse(this.responseText).tags || [])
+              .map(tag => new DockerImage(props.image, tag, null, props.registryUrl, props.onNotify))
+              .sort(compare);
             window.requestAnimationFrame(self.onResize);
             self.update({
-              page: Math.min(state.page, getNumPages(state.tags))
+              page: Math.min(state.page, getNumPages(tags)),
+              tags
             })
           } else if (this.status == 404) {
             self.props.onNotify('Server not found', true);

src/components/tag-list/tag-table.riot

@@ -40,7 +40,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         </tr>
       </thead>
       <tbody>
-        <tr each="{ image in getPage(props.tags, props.page) }">
+        <tr each="{ image in getPage(props.tags, props.page) }" if="{ matchSearch(props.filterResults, image.tag) }">
           <td class="creation-date">
             <image-date image="{ image }" />
           </td>
@@ -85,6 +85,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     import RemoveImage, {
       deleteImage
     } from './remove-image.riot';
+    import {
+      matchSearch
+    } from '../search-bar.riot';
     export default {
       components: {
         ImageDate,
@@ -135,7 +138,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           toDelete: this.state.toDelete
         })
       },
-      getPage
+      getPage,
+      matchSearch
     }
   </script>
 </tag-table>