Upgrade to v0.5.0

[feat #49] Add creation date to taglist

README.md

@@ -27,6 +27,7 @@ This web user interface uses [Riot](https://github.com/Riot/riot) the react-like
 -   Alpine and Debian based images with supports for arm32v7 and arm64v8
 -   Copy `docker pull` command to clipbloard
 -   Show sha256 for specific tag (hover image tag)
+-   Display image creation date (see #49)
 
 ## Getting Started
 

gulpfile.js

@@ -3,9 +3,10 @@ const cleanCSS = require('gulp-clean-css');
 const concat = require('gulp-concat');
 const del = require('del');
 const filter = require('gulp-filter');
-const fs = require('fs');
 const gIf = require('gulp-if');
 const gulp = require('gulp');
+const parallel = gulp.parallel;
+const series = gulp.series;
 const htmlmin = require('gulp-htmlmin');
 const license = require('gulp-license');
 const riot = require('gulp-riot');
@@ -37,7 +38,7 @@ const staticScripts = [
   'src/scripts/static.js'
 ];
 
-gulp.task('html', function() {
+function html() {
   var htmlFilter = filter('**/*.html', {restore: true});
   return gulp.src(['src/index.html'])
     .pipe(useref())
@@ -52,13 +53,13 @@ gulp.task('html', function() {
     }))
     .pipe(htmlFilter.restore)
     .pipe(gulp.dest('dist'));
-});
+};
 
-gulp.task('clean', function(done) {
+function clean() {
   return del(['dist']);
-});
+};
 
-gulp.task('docker-registry-ui-static', ['html'], function() {
+function appStatic() {
   return merge(gulp.src(staticScripts), gulp.src(staticTags).pipe(riot()))
     .pipe(concat('docker-registry-ui-static.js'))
     .pipe(minifier())
@@ -70,9 +71,9 @@ gulp.task('docker-registry-ui-static', ['html'], function() {
     }))
     .pipe(injectVersion())
     .pipe(gulp.dest('dist/scripts'));
-});
+};
 
-gulp.task('docker-registry-ui', ['html'], function() {
+function app() {
   return merge(gulp.src(allScripts), gulp.src(allTags).pipe(riot()))
     .pipe(concat('docker-registry-ui.js'))
     .pipe(minifier())
@@ -84,15 +85,15 @@ gulp.task('docker-registry-ui', ['html'], function() {
     }))
     .pipe(injectVersion())
     .pipe(gulp.dest('dist/scripts'));
-});
+};
 
-gulp.task('vendor', ['html'], function() {
+function vendor() {
   return gulp.src(['node_modules/riot/riot.min.js', 'node_modules/riot-route/dist/route.min.js', 'node_modules/riot-mui/build/js/riot-mui-min.js'])
     .pipe(concat('vendor.js'))
     .pipe(gulp.dest('dist/scripts'));
-});
+};
 
-gulp.task('styles', ['html'], function() {
+function styles() {
   return gulp.src(['src/*.css'])
     .pipe(concat('style.css'))
     .pipe(cleanCSS({
@@ -105,18 +106,12 @@ gulp.task('styles', ['html'], function() {
       organization: 'Jones Magloire @Joxit'
     }))
     .pipe(gulp.dest('dist/'));
-});
+};
 
-gulp.task('fonts', function() {
+function fonts() {
   return gulp.src('src/fonts/*')
     .pipe(filter('**/*.{otf,eot,svg,ttf,woff,woff2}'))
     .pipe(gulp.dest('dist/fonts'));
-});
+};
 
-gulp.task('sources', ['docker-registry-ui', 'vendor', 'docker-registry-ui-static', 'styles'], function() {
-  gulp.start();
-});
-
-gulp.task('build', ['clean'], function() {
-  gulp.start(['sources', 'fonts']);
-});
+exports.build = series(clean, html, parallel(fonts, styles, vendor, app, appStatic));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docker-registry-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "scripts": {
     "build": "./node_modules/gulp/bin/gulp.js build"
   },
@@ -14,20 +14,20 @@
   "dependencies": {},
   "devDependencies": {
     "del": "^3.0.0",
-    "gulp": "^3.9",
-    "gulp-clean-css": "^3.9.4",
+    "gulp": "^4.0",
+    "gulp-clean-css": "^3.10.0",
     "gulp-concat": "^2.6.0",
     "gulp-filter": "^5.1.0",
     "gulp-htmlmin": "^3.0.0",
     "gulp-if": "^2.0.0",
     "gulp-inject-version": "^1.0.1",
     "gulp-license": "^1.1.0",
-    "gulp-riot": "^1.1.4",
-    "gulp-uglify": "^3.0.0",
-    "gulp-useref": "^3.1.5",
-    "riot": "^3.11.1",
+    "gulp-riot": "^1.1.5",
+    "gulp-uglify": "^3.0.1",
+    "gulp-useref": "^3.1.6",
+    "riot": "^3.13.1",
     "riot-mui": "^0.1.1",
-    "riot-route": "^3.1.3",
+    "riot-route": "^3.1.4",
     "stream-series": "^0.1.1",
     "uglify-es": "^3.3.10"
   }

src/index.html

@@ -48,6 +48,7 @@
   <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/image-date.tag" type="riot/tag"></script>
   <script src="tags/app.tag" type="riot/tag"></script>
   <script src="scripts/http.js"></script>
   <script src="scripts/script.js"></script>

src/tags/app.tag

@@ -78,7 +78,7 @@
       return registryUI.snackbar(message, true);
     }
     registryUI.cleanName = function() {
-      var url = (registryUI.url() && registryUI.url().length > 0 && registryUI.url()) || window.location.host;
+      const url = (registryUI.url() && registryUI.url().length > 0 && registryUI.url()) || window.location.host;
       if (url) {
         return url.startsWith('http') ? url.replace(/https?:\/\//, '') : url;
       }
@@ -114,6 +114,12 @@
         }
         return this.fillInfo();
       });
+      this.on('get-date', function() {
+        if (this.date !== undefined) {
+          return this.trigger('date', this.date);
+        }
+        return this.fillInfo();
+      });
     };
 
     registryUI.DockerImage._tagReduce = function (acc, e) {
@@ -126,13 +132,13 @@
     }
 
     registryUI.DockerImage.compare = function(e1, e2) {
-      var tag1 = e1.tag.match(/./g).reduce(registryUI.DockerImage._tagReduce, []);
-      var tag2 = e2.tag.match(/./g).reduce(registryUI.DockerImage._tagReduce, []);
+      const tag1 = e1.tag.match(/./g).reduce(registryUI.DockerImage._tagReduce, []);
+      const tag2 = e2.tag.match(/./g).reduce(registryUI.DockerImage._tagReduce, []);
 
       for (var i = 0; i < tag1.length && i < tag2.length; i++) {
-        var compare = tag1[i].localeCompare(tag2[i]);
+        const compare = tag1[i].localeCompare(tag2[i]);
         if (registryUI.isDigit(tag1[i].charAt(0)) && registryUI.isDigit(tag2[i].charAt(0))) {
-          var diff = tag1[i] - tag2[i];
+          const diff = tag1[i] - tag2[i];
           if (diff != 0) {
             return diff;
           }
@@ -148,17 +154,18 @@
         return;
       }
       this._fillInfoWaiting = true;
-      var oReq = new Http();
-      var self = this;
+      const oReq = new Http();
+      const self = this;
       oReq.addEventListener('loadend', function () {
         if (this.status == 200 || this.status == 202) {
-          var response = JSON.parse(this.responseText);
+          const response = JSON.parse(this.responseText);
           self.size = response.layers.reduce(function (acc, e) {
             return acc + e.size;
           }, 0);
           self.sha256 = response.config.digest;
           self.trigger('size', self.size);
           self.trigger('sha256', self.sha256);
+          self.getBlobs(response.config.digest)
         } else if (this.status == 404) {
           registryUI.errorSnackbar('Manifest for ' + self.name + ':' + self.tag + ' not found');
         } else {
@@ -169,6 +176,25 @@
       oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
       oReq.send();
     }
+
+    registryUI.DockerImage.prototype.getBlobs = function(blob) {
+      const oReq = new Http();
+      const self = this;
+      oReq.addEventListener('loadend', function () {
+        if (this.status == 200 || this.status == 202) {
+          const response = JSON.parse(this.responseText);
+          self.creationDate = new Date(response.created);
+          self.trigger('creation-date', self.creationDate);
+        } else if (this.status == 404) {
+          registryUI.errorSnackbar('Blobs for ' + self.name + ':' + self.tag + ' not found');
+        } else {
+          registryUI.snackbar(this.responseText);
+        }
+      });
+      oReq.open('GET', registryUI.url() + '/v2/' + self.name + '/blobs/' + blob);
+      oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
+      oReq.send();
+    };
     route.start(true);
   </script>
 </app>

src/tags/image-date.tag

@@ -0,0 +1,43 @@
+<!--
+ 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-date>
+  <div title="Creation date { this.localDate }">{ this.dateFormat(this.date) } ago</div>
+  <script type="text/javascript">
+    var self = this;
+    this.dateFormat = function(date) {
+      if (date === undefined) {
+        return '';
+      }
+      const labels = ['a second', 'seconds', 'a minute', 'minutes', 'an hour', 'hours', 'a day', 'days', 'a month', 'months', 'a year', 'years'];
+      const maxSeconds = [1, 60, 3600, 86400, 2592000, 31104000, Infinity];
+      const diff = (new Date() - date) / 1000;
+      for (var i = 0; i < maxSeconds.length - 1; i++) {
+        if (maxSeconds[i] * 2 >= diff) {
+          return labels[i * 2];
+        } else if (maxSeconds[i + 1] > diff) {
+          return Math.floor(diff / maxSeconds[i]) + ' ' + labels[i * 2 + 1];
+        }
+      }
+    }
+    opts.image.on('creation-date', function(date) {
+      self.date = date;
+      self.localDate = date.toLocaleString()
+      self.update();
+    });
+    opts.image.trigger('get-date');
+  </script>
+</image-date>

src/tags/taglist.tag

@@ -31,6 +31,7 @@
         <tr>
           <th class="material-card-th-left">Repository</th>
           <th></th>
+          <th>Creation date</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>
@@ -42,6 +43,7 @@
           <td class="copy-to-clipboard">
             <copy-to-clipboard image={ image }/>
           </td>
+          <td><image-date image="{ image }" /></td>
           <td><image-size image="{ image }" /></td>
           <td><image-tag image="{ image }" /></td>
           <td show="{ registryUI.isImageRemoveActivated }">