mirror of
https://github.com/Joxit/docker-registry-ui.git
synced 2026-02-19 21:29:51 +00:00
Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
09b77201be | ||
|
|
2f5e0dd307 | ||
|
08c5eaee7e | ||
|
|
4cb79a670f | ||
|
|
5173110883 | ||
|
|
d3e93f7064 |
@@ -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
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
2
dist/scripts/docker-registry-ui-static.js
vendored
2
dist/scripts/docker-registry-ui-static.js
vendored
File diff suppressed because one or more lines are too long
2
dist/scripts/docker-registry-ui.js
vendored
2
dist/scripts/docker-registry-ui.js
vendored
File diff suppressed because one or more lines are too long
6
dist/scripts/vendor.js
vendored
6
dist/scripts/vendor.js
vendored
File diff suppressed because one or more lines are too long
@@ -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.
|
||||
|
||||
|
||||
22
examples/ui-as-standalone/README.md
Normal file
22
examples/ui-as-standalone/README.md
Normal file
@@ -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
|
||||
```
|
||||
20
examples/ui-as-standalone/credentials.yml
Normal file
20
examples/ui-as-standalone/credentials.yml
Normal file
@@ -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
|
||||
17
examples/ui-as-standalone/populate.sh
Executable file
17
examples/ui-as-standalone/populate.sh
Executable file
@@ -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
|
||||
25
examples/ui-as-standalone/registry-config/credentials.yml
Normal file
25
examples/ui-as-standalone/registry-config/credentials.yml
Normal file
@@ -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
|
||||
1
examples/ui-as-standalone/registry-config/htpasswd
Normal file
1
examples/ui-as-standalone/registry-config/htpasswd
Normal file
@@ -0,0 +1 @@
|
||||
registry:$2y$11$1bmuJLK8HrQl5ACS/WeqRuJLUArUZfUcP2R23asmozEpfN76.pCHy
|
||||
21
examples/ui-as-standalone/registry-config/simple.yml
Normal file
21
examples/ui-as-standalone/registry-config/simple.yml
Normal file
@@ -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']
|
||||
19
examples/ui-as-standalone/simple.yml
Normal file
19
examples/ui-as-standalone/simple.yml
Normal file
@@ -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
|
||||
42
gulpfile.js
42
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');
|
||||
@@ -29,7 +30,8 @@ const staticTags = [
|
||||
'src/tags/copy-to-clipboard.tag',
|
||||
'src/tags/remove-image.tag',
|
||||
'src/tags/image-size.tag',
|
||||
'src/tags/image-tag.tag'
|
||||
'src/tags/image-tag.tag',
|
||||
'src/tags/image-date.tag'
|
||||
];
|
||||
|
||||
const staticScripts = [
|
||||
@@ -37,7 +39,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 +54,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 +72,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 +86,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 +107,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));
|
||||
16
package.json
16
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "docker-registry-ui",
|
||||
"version": "0.4.0",
|
||||
"version": "0.5.1",
|
||||
"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"
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
43
src/tags/image-date.tag
Normal file
43
src/tags/image-date.tag
Normal file
@@ -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>
|
||||
@@ -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 }">
|
||||
|
||||
Reference in New Issue
Block a user