fix(riot-v5): tag history with multi arch

src/components/tag-history/tag-history-element.riot

@@ -25,7 +25,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       getHistoryIcon
     } from '../../scripts/utils';
     export default {
-      onBeforeMount(props, state) {
+      onBeforeStar(props, state) {
         state.key = props.entry.key;
         state.icon = getHistoryIcon(props.entry.key);
         state.name = props.entry.key.replace('_', ' ');
@@ -34,6 +34,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         } else {
           state.value = props.entry.value;
         }
+      },
+      onBeforeMount(props, state) {
+        this.onBeforeStar(props, state);
+      },
+      onBeforeUpdate(props, state) {
+        this.onBeforeStar(props, state);
       }
     }
   </script>

src/components/tag-history/tag-history.riot

@@ -29,7 +29,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <material-spinner />
   </div>
 
-  <material-tabs if="{ state.archs }" useLine="true" tabs="{ state.archs }" tabchanged="{ onTabUpdate }" />
+  <material-tabs if="{ state.archs && state.loadend }" useLine="{ true }" tabs="{ state.archs }" onTabChanged="{ onTabChanged }" />
 
   <material-card each="{ element in state.elements }" class="tag-history-element">
     <tag-history-element each="{ entry in element }" if="{ entry.value && entry.value.length > 0}" entry="{ entry }" />
@@ -54,16 +54,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         state.image.on('blobs', this.processBlobs);
         state.image.on('list', this.multiArchList)
       },
-      onTabUpdate() {
+      onTabChanged(arch, idx) {
         const state = this.state;
         state.elements = []
         state.image.variants[idx] = state.image.variants[idx] ||
-          new DockerImage(this.props.image, arch.digest);
+          new DockerImage(this.props.image, arch.digest, false, this.props.registryUrl);
         if (state.image.variants[idx].blobs) {
-          return processBlobs(state.image.variants[idx].blobs);
+          return this.processBlobs(state.image.variants[idx].blobs);
         }
         state.image.variants[idx].fillInfo();
-        state.image.variants[idx].on('blobs', processBlobs);
+        state.image.variants[idx].on('blobs', this.processBlobs);
       },
       processBlobs(blobs) {
         const state = this.state;

src/index.js

@@ -5,6 +5,7 @@ import MaterialNavbar from 'riot-mui/src/material-elements/material-navbar/mater
 import MaterialFooter from 'riot-mui/src/material-elements/material-footer/material-footer.riot';
 import MaterialButton from 'riot-mui/src/material-elements/material-button/material-button.riot';
 import MaterialCheckbox from 'riot-mui/src/material-elements/material-checkbox/material-checkbox.riot';
+import MaterialTabs from 'riot-mui/src/material-elements/material-tabs/material-tabs.riot';
 
 import DockerRegistryUI from './components/docker-registry-ui.riot';
 
@@ -16,6 +17,7 @@ register('material-navbar', MaterialNavbar);
 register('material-spinner', MaterialSpinner);
 register('material-button', MaterialButton);
 register('material-checkbox', MaterialCheckbox);
+register('material-tabs', MaterialTabs);
 
 const createApp = component(DockerRegistryUI);
 const tags = document.getElementsByTagName('docker-registry-ui');

src/scripts/docker-image.js

@@ -97,7 +97,7 @@ export class DockerImage {
         if (response.mediaType === 'application/vnd.docker.distribution.manifest.list.v2+json') {
           self.trigger('list', response);
           const manifest = response.manifests[0];
-          const image = new DockerImage(self.name, manifest.digest);
+          const image = new DockerImage(self.name, manifest.digest, false, self.registryUrl);
           eventTransfer(image, self);
           image.fillInfo();
           self.variants = [image];

src/style.scss

@@ -20,6 +20,7 @@
 @import 'riot-mui/src/material-elements/material-spinner/material-spinner.scss';
 @import 'riot-mui/src/material-elements/material-button/material-button.scss';
 @import 'riot-mui/src/material-elements/material-checkbox/material-checkbox.scss';
+@import 'riot-mui/src/material-elements/material-tabs/material-tabs.scss';
 
 @import './roboto.scss';
 @import './material-icons.scss';