[feat #30] Display image size

dist/scripts/script-static.js

@@ -1,6 +1,6 @@
 /*!
  * docker-registry-ui
- * Copyright (C) 2016  Jones Magloire @Joxit
+ * Copyright (C) 2016-2018  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

dist/scripts/script.js

@@ -1,6 +1,6 @@
 /*!
  * docker-registry-ui
- * Copyright (C) 2016  Jones Magloire @Joxit
+ * Copyright (C) 2016-2018  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

dist/style.css

@@ -1,6 +1,6 @@
 /*!
  * docker-registry-ui
- * Copyright (C) 2016  Jones Magloire @Joxit
+ * Copyright (C) 2016-2018  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

gulpfile.js

@@ -42,21 +42,21 @@ gulp.task('riot-tag', ['html'], function() {
     .pipe(license('agpl3', {
       tiny: false,
       project: 'docker-registry-ui',
-      year: '2016',
+      year: '2016-2018',
       organization: 'Jones Magloire @Joxit'
     }))
     .pipe(gulp.dest('dist/scripts'));
 });
 
 gulp.task('riot-static-tag', ['html'], function() {
-  return gulp.src(['src/tags/catalog.tag', 'src/tags/app.tag', 'src/tags/taglist.tag', 'src/tags/remove-image.tag'])
+  return gulp.src(['src/tags/catalog.tag', 'src/tags/app.tag', 'src/tags/taglist.tag', 'src/tags/remove-image.tag', 'src/tags/image-size.tag'])
     .pipe(concat('tags-static.js'))
     .pipe(riot())
     .pipe(minifier({}, uglify))
     .pipe(license('agpl3', {
       tiny: false,
       project: 'docker-registry-ui',
-      year: '2016',
+      year: '2016-2018',
       organization: 'Jones Magloire @Joxit'
     }))
     .pipe(gulp.dest('dist/scripts'));
@@ -69,7 +69,7 @@ gulp.task('scripts-static', ['html'], function() {
     .pipe(license('agpl3', {
       tiny: false,
       project: 'docker-registry-ui',
-      year: '2016',
+      year: '2016-2018',
       organization: 'Jones Magloire @Joxit'
     }))
     .pipe(gulp.dest('dist/scripts'));
@@ -82,7 +82,7 @@ gulp.task('scripts', ['html'], function() {
     .pipe(license('agpl3', {
       tiny: false,
       project: 'docker-registry-ui',
-      year: '2016',
+      year: '2016-2018',
       organization: 'Jones Magloire @Joxit'
     }))
     .pipe(gulp.dest('dist/scripts'));
@@ -103,7 +103,7 @@ gulp.task('styles', ['html'], function() {
     .pipe(license('agpl3', {
       tiny: false,
       project: 'docker-registry-ui',
-      year: '2016',
+      year: '2016-2018',
       organization: 'Jones Magloire @Joxit'
     }))
     .pipe(gulp.dest('dist/'));

package.json

@@ -24,7 +24,6 @@
     "gulp-riot": "^1.1.1",
     "gulp-uglify": "^2.1.2",
     "gulp-useref": "^3.1.3",
-    "pump": "^1.0.2",
     "riot": "^3.7.4",
     "riot-mui": "^0.1.1",
     "riot-route": "^3.1.2",

src/index.html

@@ -45,6 +45,7 @@
   <script src="tags/change.tag" type="riot/tag"></script>
   <script src="tags/remove.tag" type="riot/tag"></script>
   <script src="tags/menu.tag" type="riot/tag"></script>
+  <script src="tags/image-size.tag" type="riot/tag"></script>
   <script src="tags/app.tag" type="riot/tag"></script>
   <!-- endbuild -->
   <!-- build:js scripts/script.js -->

src/tags/image-size.tag

@@ -0,0 +1,48 @@
+<!--
+ Copyright (C) 2018  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/>.
+-->
+<image-size>
+  <div>{ this.bytesToSize(this.size) }</div>
+  <script type="text/javascript">
+    var self = this;
+    this.bytesToSize = function (bytes) {
+      var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+      if (bytes == undefined || isNaN(bytes)) {
+        return '?';
+      } else if (bytes == 0) {
+        return '0 Byte';
+      }
+      var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+      return Math.ceil(bytes / Math.pow(1024, i)) + ' ' + sizes[i];
+    };
+    var oReq = new Http();
+    oReq.addEventListener('loadend', function () {
+      if (this.status == 200 || this.status == 202) {
+        self.size = JSON.parse(this.responseText).layers.reduce(function (acc, e) {
+          return acc + e.size;
+        }, 0);
+        self.update();
+      } else if (this.status == 404) {
+        registryUI.errorSnackbar('Manifest for ' + opts.name + ':' + opts.tag + ' not found');
+      } else {
+        registryUI.snackbar(this.responseText);
+      }
+    });
+    oReq.open('GET', registryUI.url() + '/v2/' + opts.name + '/manifests/' + opts.tag);
+    oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
+    oReq.send();
+  </script>
+</image-size>

src/tags/taglist.tag

@@ -30,6 +30,7 @@
       <thead>
         <tr>
           <th class="material-card-th-left">Repository</th>
+          <th>Size</th>
           <th class="{ registryUI.taglist.asc ? 'material-card-th-sorted-ascending' : 'material-card-th-sorted-descending' }" onclick="registryUI.taglist.reverse();">Tag</th>
           <th show="{ registryUI.isImageRemoveActivated }"></th>
         </tr>
@@ -37,6 +38,7 @@
       <tbody>
         <tr each="{ item in registryUI.taglist.tags }">
           <td class="material-card-th-left">{ registryUI.taglist.name }</td>
+          <td><image-size name={ registryUI.taglist.name } tag={ item } /></td>
           <td>{ item }</td>
           <td show="{ registryUI.isImageRemoveActivated }">
             <remove-image name={ registryUI.taglist.name } tag={ item }/>