feat(riot-v5): upgrade all tag-history components

src/components/docker-registry-ui.riot

@@ -31,6 +31,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           image="{ router.getTagListImage() }" show-content-digest="{props.showContentDigest}"
           is-image-remove-activated="{props.isImageRemoveActivated}"></tag-list>
       </route>
+      <route path="{baseRoute}taghistory/(.*)">
+        <tag-history registry-url="{ state.registryUrl }" registry-name="{ state.name }" pull-url="{ state.pullUrl }"
+          image="{ router.getTagHistoryImage() }" tag="{ router.getTagHistoryTag() }"
+          is-image-remove-activated="{props.isImageRemoveActivated}"></tag-history>
+      </route>
     </router>
   </main>
   <footer>
@@ -55,7 +60,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       Route,
     } from '@riotjs/route'
     import Catalog from './catalog/catalog.riot';
-    import TagList from './tag-list/tag-list.riot'
+    import TagList from './tag-list/tag-list.riot';
+    import TagHistory from './tag-history/tag-history.riot';
     import {
       stripHttps
     } from '../scripts/utils';
@@ -65,6 +71,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       components: {
         Catalog,
         TagList,
+        TagHistory,
         Router,
         Route
       },

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

@@ -0,0 +1,40 @@
+<!--
+Copyright (C) 2016-2021 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/>.
+-->
+<tag-history-element class="{ state.key }">
+  <div class="headline"><i class="material-icons">{ state.icon }</i>
+    <p>{ state.name }</p>
+  </div>
+  <div class="value" if="{ state.value }"> { state.value }</div>
+  <div class="value" each="{ value in state.values }" if="{ state.values }"> { value }</div>
+  <script>
+    import {
+      getHistoryIcon
+    } from '../../scripts/utils';
+    export default {
+      onBeforeMount(props, state) {
+        state.key = props.entry.key;
+        state.icon = getHistoryIcon(props.entry.key);
+        state.name = props.entry.key.replace('_', ' ');
+        if (props.value instanceof Array) {
+          state.values = props.entry.value;
+        } else {
+          state.value = props.entry.value;
+        }
+      }
+    }
+  </script>
+</tag-history-element>

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

@@ -0,0 +1,184 @@
+<!--
+Copyright (C) 2016-2021 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/>.
+-->
+<tag-history>
+  <material-card ref="tag-history-tag" class="tag-history header">
+    <div class="material-card-title-action">
+      <material-button waves-center="true" rounded="true" waves-color="#ddd" onClick="{ toTaglist }">
+        <i class="material-icons">arrow_back</i>
+      </material-button>
+      <h2>
+        History of { props.image }:{ props.tag } <i class="material-icons">history</i>
+      </h2>
+    </div>
+  </material-card>
+  <div if="{ !state.loadend }" class="spinner-wrapper">
+    <material-spinner />
+  </div>
+
+  <material-tabs if="{ state.archs }" useLine="true" tabs="{ state.archs }" tabchanged="{ onTabUpdate }" />
+
+  <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 }" />
+  </material-card>
+  <script>
+    import {
+      DockerImage
+    } from '../../scripts/docker-image';
+    import {
+      bytesToSize
+    } from '../../scripts/utils';
+    import router from '../../scripts/router';
+    import TagHistoryElement from './tag-history-element.riot'
+    export default {
+      components: {
+        TagHistoryElement
+      },
+      onBeforeMount(props, state) {
+        state.elements = [];
+        state.image = new DockerImage(props.image, props.tag, true, props.registryUrl);
+        state.image.fillInfo()
+        state.image.on('blobs', this.processBlobs);
+        state.image.on('list', this.multiArchList)
+      },
+      onTabUpdate() {
+        const state = this.state;
+        state.elements = []
+        state.image.variants[idx] = state.image.variants[idx] ||
+          new DockerImage(this.props.image, arch.digest);
+        if (state.image.variants[idx].blobs) {
+          return processBlobs(state.image.variants[idx].blobs);
+        }
+        state.image.variants[idx].fillInfo();
+        state.image.variants[idx].on('blobs', processBlobs);
+      },
+      processBlobs(blobs) {
+        const state = this.state;
+
+        function exec(elt) {
+          const guiElements = [];
+          for (var attribute in elt) {
+            if (elt.hasOwnProperty(attribute) && attribute != 'empty_layer') {
+              const value = elt[attribute];
+              const guiElement = {
+                "key": attribute,
+                "value": modifySpecificAttributeTypes(attribute, value)
+              };
+              guiElements.push(guiElement);
+            }
+          }
+          return guiElements.sort(eltSort);
+        }
+        const elements = new Array(blobs.history.length + 1);
+        elements[0] = exec(getConfig(blobs));
+        blobs.history.forEach(function (elt, i) {
+          elements[blobs.history.length - i] = exec(elt)
+        });
+        this.update({
+          elements,
+          loadend: true
+        });
+      },
+      multiArchList(manifests) {
+        manifests = manifests.manifests || manifests;
+        const archs = manifests.map(function (manifest) {
+          return {
+            title: manifest.platform.os + '/' + manifest.platform.architecture + (manifest.platform.variant ?
+              manifest.platform.variant : ''),
+            digest: manifest.digest
+          }
+        });
+        this.update({
+          archs
+        });
+      },
+      toTaglist() {
+        router.taglist(this.props.image);
+      }
+    }
+    const eltIdx = function (e) {
+      switch (e) {
+        case 'created':
+          return 1;
+        case 'created_by':
+          return 2;
+        case 'size':
+          return 3;
+        case 'os':
+          return 4;
+        case 'architecture':
+          return 5;
+        case 'id':
+          return 6;
+        case 'linux':
+          return 7;
+        case 'docker_version':
+          return 8;
+        default:
+          return 10;
+      }
+    };
+
+    const eltSort = function (e1, e2) {
+      return eltIdx(e1.key) - eltIdx(e2.key);
+    };
+
+    const modifySpecificAttributeTypes = function (attribute, value) {
+      switch (attribute) {
+        case 'created':
+          return new Date(value).toLocaleString();
+        case 'created_by':
+          const cmd = value.match(/\/bin\/sh *-c *#\(nop\) *([A-Z]+)/);
+          return (cmd && cmd[1]) || 'RUN'
+        case 'size':
+          return bytesToSize(value);
+        case 'Entrypoint':
+        case 'Cmd':
+          return (value || []).join(' ');
+        case 'Labels':
+          return Object.keys(value || {}).map(function (elt) {
+            return value[elt] ? elt + '=' + value[elt] : '';
+          });
+        case 'Volumes':
+        case 'ExposedPorts':
+          return Object.keys(value);
+      }
+      return value || '';
+    };
+
+    const getConfig = function (blobs) {
+      const res = ['architecture', 'User', 'created', 'docker_version', 'os', 'Cmd', 'Entrypoint', 'Env', 'Labels',
+          'User', 'Volumes', 'WorkingDir', 'author', 'id', 'ExposedPorts'
+        ]
+        .reduce(function (acc, e) {
+          const value = blobs[e] || blobs.config[e];
+          if (value && e === 'architecture' && blobs.variant) {
+            acc[e] = value + blobs.variant;
+          } else if (value) {
+            acc[e] = value;
+          }
+          return acc;
+        }, {});
+
+      if (!res.author && (res.Labels && res.Labels.maintainer)) {
+        res.author = blobs.config.Labels.maintainer;
+        delete res.Labels.maintainer;
+      }
+
+      return res;
+    };
+  </script>
+</tag-history>

src/tags/tag-history-button.riot → src/components/tag-list/tag-history-button.riot

@@ -1,5 +1,5 @@
 <!--
-Copyright (C) 2016-2019 Jones Magloire @Joxit
+Copyright (C) 2016-2021 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
@@ -15,16 +15,16 @@ 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/>.
 -->
 <tag-history-button>
-  <material-button ref="button" title="This will show the history of given tag" waves-center="true" rounded="true" waves-color="#ddd">
+  <material-button title="This will show the history of given tag" waves-center="true" rounded="true" waves-color="#ddd"
+    onClick="{ routeToHistory }">
     <i class="material-icons">history</i>
   </material-button>
-  <script type="text/javascript">
-    this.on('mount', function() {
-    const self = this;
-    this.refs.button.root.onclick = function() {
-      registryUI.taghistory.go(self.opts.image.name, self.opts.image.tag);
-    };
-  });
-  this.update()
+  <script>
+    import router from '../../scripts/router';
+    export default {
+      routeToHistory() {
+        router.history(this.props.image.name, this.props.image.tag)
+      }
+    }
   </script>
 </tag-history-button>

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

@@ -78,6 +78,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     import ImageTag from './image-tag.riot';
     import ImageContentDigest from './image-content-digest.riot';
     import CopyToClipboard from './copy-to-clipboard.riot';
+    import TagHistoryButton from './tag-history-button.riot';
     import RemoveImage, {
       deleteImage
     } from './remove-image.riot';
@@ -89,6 +90,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         ImageContentDigest,
         CopyToClipboard,
         RemoveImage,
+        TagHistoryButton,
       },
       onBeforeMount(props) {
         this.state = {

src/scripts/docker-image.js

@@ -1,3 +1,19 @@
+/*
+ * Copyright (C) 2016-2021 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/>.
+ */
 import { Http } from './http';
 import { isDigit, eventTransfer } from './utils';
 import observable from '@riotjs/observable';

src/scripts/http.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2016-2019 Jones Magloire @Joxit
+ * Copyright (C) 2016-2021 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

src/scripts/router.js

@@ -1,3 +1,19 @@
+/*
+ * Copyright (C) 2016-2021 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/>.
+ */
 import { router, getCurrentRoute } from '@riotjs/route';
 
 function baseUrl() {
@@ -13,5 +29,14 @@ export default {
   },
   getTagListImage() {
     return getCurrentRoute().replace(/^.*(#!)?\/?taglist\//, '');
-  }
+  },
+  history(image, tag) {
+    router.push(`${baseUrl()}#!/taghistory/image/${image}/tag/${tag}`);
+  },
+  getTagHistoryImage() {
+    return getCurrentRoute().replace(/^.*(#!)?\/?taghistory\/image\/(.*)\/tag\/(.*)\/?$/, '$2');
+  },
+  getTagHistoryTag() {
+    return getCurrentRoute().replace(/^.*(#!)?\/?taghistory\/image\/(.*)\/tag\/(.*)\/?$/, '$3');
+  },
 };