fix(tag-list): missing details on images built by buildah (#264)

fixes #264
Joxit · Sep 19, 2022 · fb81859 · fb81859
1 parent 636cb60
commit fb81859
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 30 deletions.
diff --git a/src/components/dialogs/confirm-delete-image.riot b/src/components/dialogs/confirm-delete-image.riot
@@ -36,13 +36,13 @@
     import router from '../../scripts/router';
     export default {
       displayImagesToDelete(toDelete, tags) {
-        const digests = new Set();
+        const contentDigests = new Set();
         toDelete.forEach((image) => {
-          if (image.digest) {
-            digests.add(image.digest);
+          if (image.contentDigest) {
+            contentDigests.add(image.contentDigest);
           }
         });
-        return tags.filter((image) => digests.has(image.digest));
+        return tags.filter((image) => contentDigests.has(image.contentDigest));
       },
       deleteImages() {
         this.props.toDelete.forEach((image) => this.getContentDigestThenDelete(image, this.props));
@@ -53,11 +53,11 @@
         const self = this;
         oReq.addEventListener('loadend', function () {
           if (this.status === 200 || this.status === 202) {
-            oReq.getContentDigest(function (digest) {
-              if (!digest) {
+            oReq.getContentDigest(function (contentDigest) {
+              if (!contentDigest) {
                 onNotify(ERROR_CAN_NOT_READ_CONTENT_DIGEST);
               } else {
-                self.deleteImage({ name, tag, digest }, opts);
+                self.deleteImage({ name, tag, contentDigest }, opts);
               }
             });
           } else if (this.status === 404) {
@@ -73,7 +73,7 @@
         );
         oReq.send();
       },
-      deleteImage({ name, tag, digest }, opts) {
+      deleteImage({ name, tag, contentDigest }, opts) {
         const { registryUrl, ignoreError, onNotify, onAuthentication, onClick } = opts;
         const oReq = new Http({ onAuthentication });
         oReq.addEventListener('loadend', function () {
@@ -91,7 +91,7 @@
           }
           onClick();
         });
-        oReq.open('DELETE', `${registryUrl}/v2/${name}/manifests/${digest}`);
+        oReq.open('DELETE', `${registryUrl}/v2/${name}/manifests/${contentDigest}`);
         oReq.setRequestHeader(
           'Accept',
           'application/vnd.docker.distribution.manifest.v2+json, application/vnd.oci.image.manifest.v1+json'

diff --git a/src/components/tag-list/copy-to-clipboard.riot b/src/components/tag-list/copy-to-clipboard.riot
@@ -40,12 +40,12 @@
         if (props.target === 'tag') {
           return `docker pull ${props.pullUrl}/${props.image.name}:${props.image.tag}`;
         } else {
-          return `docker pull ${props.pullUrl}/${props.image.name}@${props.image.digest}`;
+          return `docker pull ${props.pullUrl}/${props.image.name}@${props.image.contentDigest}`;
         }
       },
       load(props, state) {
-        if (props.target !== 'tag' && !props.image.digest) {
-          props.image.one('content-digest', (digest) => {
+        if (props.target !== 'tag' && !props.image.contentDigest) {
+          props.image.one('content-digest', (contentDigest) => {
             this.update();
           });
           props.image.trigger('get-content-digest');

diff --git a/src/components/tag-list/image-content-digest.riot b/src/components/tag-list/image-content-digest.riot
@@ -15,7 +15,7 @@ Copyright (C) 2016-2021 Jones Magloire @Joxit
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <image-content-digest>
-  <div title="{ getTitle(props.image, state.chars) }">{ getDigest(props.image, state.chars) }</div>
+  <div title="{ getTitle(props.image, state.chars) }">{ getContentDigest(props.image, state.chars) }</div>
   <script>
     export default {
       onMounted(props, state) {
@@ -25,12 +25,12 @@ Copyright (C) 2016-2021 Jones Magloire @Joxit
         this.load(props, state);
       },
       load(props, state) {
-        if (props.image.digest) {
+        if (props.image.contentDigest) {
           return;
         }
         state.chars = -1;
-        props.image.one('content-digest', (digest) => {
-          this.digest = digest;
+        props.image.one('content-digest', (contentDigest) => {
+          this.contentDigest = contentDigest;
           props.image.on('content-digest-chars', this.onResize);
           props.image.trigger('get-content-digest-chars');
         });
@@ -44,15 +44,15 @@ Copyright (C) 2016-2021 Jones Magloire @Joxit
         }
       },
       getTitle(image, chars) {
-        return chars >= 70 ? '' : image.digest || '';
+        return chars >= 70 ? '' : image.contentDigest || '';
       },
-      getDigest(image, chars) {
+      getContentDigest(image, chars) {
         if (chars >= 70) {
-          return image.digest || '';
+          return image.contentDigest || '';
         } else if (chars <= 0) {
           return '';
         } else {
-          return image.digest && image.digest.slice(0, chars) + '...';
+          return image.contentDigest && image.contentDigest.slice(0, chars) + '...';
         }
       },
     };

diff --git a/src/components/tag-list/remove-image.riot b/src/components/tag-list/remove-image.riot
@@ -21,15 +21,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     waves-color="#ddd"
     title="This will delete the image."
     if="{ !props.multiDelete }"
-    disabled="{ !state.digest }"
+    disabled="{ !state.contentDigest }"
     onClick="{ deleteImage }"
   >
     <i class="material-icons">delete</i>
   </material-button>
   <material-checkbox
     if="{ props.multiDelete }"
     title="Select this tag to delete it."
-    disabled="{ !state.digest }"
+    disabled="{ !state.contentDigest }"
     onChange="{ handleCheckboxChange }"
     checked="{ state.checked }"
   >
@@ -41,9 +41,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     export default {
       onBeforeMount(props, state) {
         state.checked = props.checked;
-        props.image.one('content-digest', (digest) => {
+        props.image.one('content-digest', (contentDigest) => {
           this.update({
-            digest,
+            contentDigest,
           });
         });
       },

diff --git a/src/components/tag-list/tag-list.riot b/src/components/tag-list/tag-list.riot
@@ -92,6 +92,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
               .map(
                 (tag) =>
                   new DockerImage(props.image, tag, {
+                    list: true,
                     registryUrl: props.registryUrl,
                     onNotify: props.onNotify,
                     onAuthentication: props.onAuthentication,

diff --git a/src/scripts/docker-image.js b/src/scripts/docker-image.js
@@ -84,8 +84,8 @@ export class DockerImage {
       return this.trigger('content-digest-chars', this.chars);
     });
     this.on('get-content-digest', function () {
-      if (this.digest !== undefined) {
-        return this.trigger('content-digest', this.digest);
+      if (this.contentDigest !== undefined) {
+        return this.trigger('content-digest', this.contentDigest);
       }
       return this.fillInfo();
     });
@@ -117,10 +117,10 @@ export class DockerImage {
         self.sha256 = response.config && response.config.digest;
         self.trigger('size', self.size);
         self.trigger('sha256', self.sha256);
-        oReq.getContentDigest(function (digest) {
-          self.digest = digest;
-          self.trigger('content-digest', digest);
-          if (!digest) {
+        oReq.getContentDigest(function (contentDigest) {
+          self.contentDigest = contentDigest;
+          self.trigger('content-digest', contentDigest);
+          if (!contentDigest) {
             self.opts.onNotify(ERROR_CAN_NOT_READ_CONTENT_DIGEST);
           }
         });

diff --git a/src/scripts/utils.js b/src/scripts/utils.js
@@ -136,8 +136,13 @@ export function stripHttps(url) {
   return url.replace(/^https?:\/\//, '');
 }
 
+function kebabToCamelCase(s) {
+  return s.replace(/-[a-z]/, (x) => x[1].toUpperCase());
+}
+
 export function eventTransfer(from, to) {
   from.on('*', function (event, param) {
+    to[kebabToCamelCase(event)] = param;
     to.trigger(event, param);
   });
 }