Upgrade to v0.5.0

Merge pull request #51 from Joxit/feat/creation-date
[feat #49] Add creation date to taglist
2026-02-19 21:29:51 +00:00 · 2018-11-20 21:56:14 +01:00 · 2018-11-18 12:09:51 +01:00 · 2018-11-16 22:07:49 +01:00 · 2018-08-25 23:33:33 +02:00 · 2018-08-04 18:58:36 +02:00
19 changed files with 239 additions and 47 deletions
--- a/README.md
+++ b/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

@@ -122,7 +123,7 @@ docker run -d --net registry-ui-net --name registry-srv registry:2
 docker run -d --net registry-ui-net -p 80:80 -e REGISTRY_URL=http://registry-srv:5000 -e DELETE_IMAGES=true -e REGISTRY_TITLE="My registry" joxit/docker-registry-ui:static
 ```

-There are some examples with [docker-compose](https://docs.docker.com/compose/) and docker-registry-ui as proxy [here](https://github.com/Joxit/docker-registry-ui/tree/master/examples/ui-as-proxy/).
+There are some examples with [docker-compose](https://docs.docker.com/compose/) and docker-registry-ui as proxy [here](https://github.com/Joxit/docker-registry-ui/tree/master/examples/ui-as-proxy/) or docker-registry-ui as standalone [here](https://github.com/Joxit/docker-registry-ui/tree/master/examples/ui-as-standalone/).

 ## Using CORS

--- a/demo/index.html
+++ b/demo/index.html
@@ -28,8 +28,7 @@
 <body>
  <app></app>
  <script src="../dist/scripts/vendor.js"></script>
-  <script src="../dist/scripts/tags.js"></script>
-  <script src="../dist/scripts/script.js"></script>
+  <script src="../dist/scripts/docker-registry-ui.js"></script>
  <script>
    (function(i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r;
--- a/dist/scripts/docker-registry-ui-static.js
+++ b/dist/scripts/docker-registry-ui-static.js
--- a/dist/scripts/docker-registry-ui.js
+++ b/dist/scripts/docker-registry-ui.js
--- a/dist/scripts/vendor.js
+++ b/dist/scripts/vendor.js
--- a/examples/ui-as-proxy/README.md
+++ b/examples/ui-as-proxy/README.md
@@ -3,7 +3,7 @@
 You can set up the static user interface as proxy in several ways.

 If you want to populate your registry, use `populate.sh` script.
-The interface will be accessible with <http://localhost>.
+The interface and the docker registry will be accessible with <http://localhost>.

 The simplest way is with `simple.yml` docker-compose file.

--- a/examples/ui-as-standalone/README.md
+++ b/examples/ui-as-standalone/README.md
@@ -0,0 +1,22 @@
+# Docker Registry Static as standalone example
+
+You can set up the static user interface as standalone in several ways.
+
+If you want to populate your registry, use `populate.sh` script.
+The interface will be accessible with <http://localhost>.
+Your docker registry will be accessible with <http://localhost:5000>.
+
+The simplest way is with `simple.yml` docker-compose file.
+
+```sh
+docker-compose -f simple.yml up -d
+./populate.sh
+```
+
+You can add some credentials to access your registry wit `credentials.yml` docker-compose file.
+Credentials for this example are login: `registry` and password: `ui` using bcrypt.
+
+```sh
+docker-compose -f credentials.yml up -d
+./populate.sh
+```
--- a/examples/ui-as-standalone/credentials.yml
+++ b/examples/ui-as-standalone/credentials.yml
@@ -0,0 +1,20 @@
+version: '2.0'
+services:
+  registry:
+    image: registry:2.6.2
+    ports:
+      - 5000:5000
+    volumes:
+      - ./registry-data:/var/lib/registry
+      - ./registry-config/credentials.yml:/etc/docker/registry/config.yml
+      - ./registry-config/htpasswd:/etc/docker/registry/htpasswd
+
+  ui:
+    image: joxit/docker-registry-ui:static
+    ports:
+      - 80:80
+    environment:
+      - REGISTRY_TITLE=My Private Docker Registry
+      - URL=http://localhost:5000
+    depends_on:
+      - registry
--- a/examples/ui-as-standalone/populate.sh
+++ b/examples/ui-as-standalone/populate.sh
@@ -0,0 +1,17 @@
+#!/bin/bash
+
+docker tag joxit/docker-registry-ui:static localhost:5000/joxit/docker-registry-ui:static
+docker tag joxit/docker-registry-ui:static localhost:5000/joxit/docker-registry-ui:0.3
+docker tag joxit/docker-registry-ui:static localhost:5000/joxit/docker-registry-ui:0.3.0
+docker tag joxit/docker-registry-ui:static localhost:5000/joxit/docker-registry-ui:0.3.0-static
+docker tag joxit/docker-registry-ui:static localhost:5000/joxit/docker-registry-ui:0.3-static
+
+docker push localhost:5000/joxit/docker-registry-ui
+
+docker tag registry:2.6.2 localhost:5000/registry:latest
+docker tag registry:2.6.2 localhost:5000/registry:2.6.2
+docker tag registry:2.6.2 localhost:5000/registry:2.6
+docker tag registry:2.6.2 localhost:5000/registry:2.6.0
+docker tag registry:2.6.2 localhost:5000/registry:2
+
+docker push localhost:5000/registry
--- a/examples/ui-as-standalone/registry-config/credentials.yml
+++ b/examples/ui-as-standalone/registry-config/credentials.yml
@@ -0,0 +1,25 @@
+version: 0.1
+log:
+  fields:
+    service: registry
+storage:
+  delete:
+    enabled: true
+  cache:
+    blobdescriptor: inmemory
+  filesystem:
+    rootdirectory: /var/lib/registry
+http:
+  addr: :5000
+  headers:
+    X-Content-Type-Options: [nosniff]
+    Access-Control-Allow-Origin: ['http://localhost']
+    Access-Control-Allow-Methods: ['HEAD', 'GET', 'OPTIONS', 'DELETE']
+    Access-Control-Allow-Headers: ['Authorization']
+    Access-Control-Max-Age: [1728000]
+    Access-Control-Allow-Credentials: [true]
+    Access-Control-Expose-Headers: ['Docker-Content-Digest']
+auth:
+  htpasswd:
+    realm: basic-realm
+    path: /etc/docker/registry/htpasswd
--- a/examples/ui-as-standalone/registry-config/htpasswd
+++ b/examples/ui-as-standalone/registry-config/htpasswd
@@ -0,0 +1 @@
+registry:$2y$11$1bmuJLK8HrQl5ACS/WeqRuJLUArUZfUcP2R23asmozEpfN76.pCHy
--- a/examples/ui-as-standalone/registry-config/simple.yml
+++ b/examples/ui-as-standalone/registry-config/simple.yml
@@ -0,0 +1,21 @@
+version: 0.1
+log:
+  fields:
+    service: registry
+storage:
+  delete:
+    enabled: true
+  cache:
+    blobdescriptor: inmemory
+  filesystem:
+    rootdirectory: /var/lib/registry
+http:
+  addr: :5000
+  headers:
+    X-Content-Type-Options: [nosniff]
+    Access-Control-Allow-Origin: ['http://localhost']
+    Access-Control-Allow-Methods: ['HEAD', 'GET', 'OPTIONS', 'DELETE']
+    Access-Control-Allow-Headers: ['Authorization']
+    Access-Control-Max-Age: [1728000]
+    Access-Control-Allow-Credentials: [true]
+    Access-Control-Expose-Headers: ['Docker-Content-Digest']
--- a/examples/ui-as-standalone/simple.yml
+++ b/examples/ui-as-standalone/simple.yml
@@ -0,0 +1,19 @@
+version: '2.0'
+services:
+  registry:
+    image: registry:2.6.2
+    ports:
+      - 5000:5000
+    volumes:
+      - ./registry-data:/var/lib/registry
+      - ./registry-config/simple.yml:/etc/docker/registry/config.yml
+
+  ui:
+    image: joxit/docker-registry-ui:static
+    ports:
+      - 80:80
+    environment:
+      - REGISTRY_TITLE=My Private Docker Registry
+      - URL=http://localhost:5000
+    depends_on:
+      - registry
--- a/gulpfile.js
+++ b/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));
--- a/package.json
+++ b/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"
  }
--- a/src/index.html
+++ b/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>
--- a/src/tags/app.tag
+++ b/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>
--- a/src/tags/image-date.tag
+++ b/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>
--- a/src/tags/taglist.tag
+++ b/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 }">
Author	SHA1	Message	Date
Joxit	2f5e0dd307	Upgrade to v0.5.0	2018-11-20 21:56:14 +01:00
Jones Magloire	08c5eaee7e	Merge pull request #51 from Joxit/feat/creation-date [feat #49] Add creation date to taglist	2018-11-18 12:09:51 +01:00
Joxit	4cb79a670f	[feat #49 ] Add creation date to taglist	2018-11-16 22:07:49 +01:00
Joxit	5173110883	Add new example for https://github.com/Joxit/docker-registry-ui/issues/26#issuecomment-415995589	2018-08-25 23:33:33 +02:00
Joxit	d3e93f7064	Fix demo for v0.4.0, sorry 😕	2018-08-04 18:58:36 +02:00
				`@@ -0,0 +1 @@`
				`registry:$2y$11$1bmuJLK8HrQl5ACS/WeqRuJLUArUZfUcP2R23asmozEpfN76.pCHy`