feat(riot-v5): upgrade catalog component + Http and fix global style

src/components/catalog/catalog.riot

@@ -0,0 +1,107 @@
+<!--
+Copyright (C) 2016-2019 Jones Magloire @Joxit
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+<catalog>
+  <material-card ref="catalog-tag" class="catalog header">
+    <div class="material-card-title-action">
+      <h2>
+        Repositories of { state.name }
+        <div class="item-count">{ state.length } images</div>
+      </h2>
+    </div>
+  </material-card>
+  <div if="{ !state.loadend }" class="spinner-wrapper">
+    <material-spinner></material-spinner>
+  </div>
+  <catalog-element each="{ item in state.repositories }" item="{ item }" />
+  <script>
+    import MaterialCard from 'riot-mui/src/material-elements/material-card/material-card.riot';
+    import MaterialSpinner from 'riot-mui/src/material-elements/material-spinner/material-spinner.riot';
+
+    import {
+      Http
+    } from '../../scripts/http';
+
+    export default {
+      components: {
+        MaterialCard,
+        MaterialSpinner
+      },
+      state: {
+        name: '',
+        length: 0,
+        loadend: false,
+        repositories: []
+      },
+
+      onBeforeMount(props) {
+        this.state.name = props.name;
+        this.state.catalogElementsLimit = props.catalogElementsLimit;
+      },
+      onMounted(props) {
+        this.display(props, this.state)
+      },
+      onUpdated(props, state) {
+
+      },
+
+      display(props, state) {
+        this.state.repositories = [];
+        const self = this;
+        const oReq = new Http();
+        oReq.addEventListener('load', function () {
+          state.repositories = [];
+          if (this.status == 200) {
+            state.repositories = JSON.parse(this.responseText).repositories || [];
+            state.repositories.sort();
+            state.length = state.repositories.length;
+            state.repositories = state.repositories.reduce(function (acc, e) {
+              const slash = e.indexOf('/');
+              if (slash > 0) {
+                const repoName = e.substring(0, slash) + '/';
+                if (acc.length == 0 || acc[acc.length - 1].repo != repoName) {
+                  acc.push({
+                    repo: repoName,
+                    images: []
+                  });
+                }
+                acc[acc.length - 1].images.push(e);
+                return acc;
+              }
+              acc.push(e);
+              return acc;
+            }, []);
+          } else if (this.status == 404) {
+            // registryUI.snackbar('Server not found', true);
+          } else {
+            // registryUI.snackbar(this.responseText);
+          }
+        });
+        oReq.addEventListener('error', function () {
+          // registryUI.snackbar(this.getErrorMessage(), true);
+          state.repositories = [];
+        });
+        oReq.addEventListener('loadend', function () {
+          self.update({
+            loadend: true
+          });
+        });
+        oReq.open('GET', props.registryUrl + '/v2/_catalog?n=' + state.catalogElementsLimit);
+        oReq.send();
+      }
+    }
+  </script>
+</catalog>

src/components/docker-registry-ui.riot

@@ -21,6 +21,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     </material-navbar>
   </header>
   <main>
+    <catalog registry-url="{ state.registryUrl }" name="{ state.name }"
+      catalog-elements-limit="{ state.catalogElementsLimit }"></catalog>
   </main>
   <footer>
     <material-footer>
@@ -41,13 +43,23 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     } from '../../package.json';
     import MaterialNavbar from 'riot-mui/src/material-elements/material-navbar/material-navbar.riot';
     import MaterialFooter from 'riot-mui/src/material-elements/material-footer/material-footer.riot';
+    import Catalog from './catalog/catalog.riot';
+    import {
+      stripHttps
+    } from '../scripts/utils';
 
     export default {
       components: {
         MaterialNavbar,
-        MaterialFooter
+        MaterialFooter,
+        Catalog
+      },
+      onBeforeMount(props) {
+        this.state.registryUrl = props.registryUrl || (window.location.origin + window.location.pathname.replace(/\/+$/,
+          ''));
+        this.state.name = props.name || stripHttps(props.registryUrl);
+        this.state.catalogElementsLimit = props.catalogElementsLimit || 100000;
       },
-      onMounted() {},
       version
     }
   </script>