github/docker-registry-ui
1
0
Fork 0
mirror of https://github.com/Joxit/docker-registry-ui.git synced 2026-07-12 08:39:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix-image-history] Create move history-elements in its own tag tag-history-element

Browse Source 
- Add id and ExposedPort
- Better rendering for arrays
- Add more const instead of var
This commit is contained in:
Joxit
2018-12-17 00:38:25 +01:00
parent ed1e928bf3
commit 581975b99e
15 changed files with 113 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/index.html
View File

@@ -41,6 +41,7 @@
<script src="tags/catalog.tag" type="riot/tag"></script>
<script src="tags/tag-history-button.tag" type="riot/tag"></script>
<script src="tags/tag-history.tag" type="riot/tag"></script>
<script src="tags/tag-history-element.tag" type="riot/tag"></script>
<script src="tags/taglist.tag" type="riot/tag"></script>
<script src="tags/image-tag.tag" type="riot/tag"></script>
<script src="tags/remove-image.tag" type="riot/tag"></script>

4
src/scripts/http.js
View File

@@ -24,13 +24,13 @@ function Http() {
Http.prototype.addEventListener = function(e, f) {
this._events[e] = f;
var self = this;
const self = this;
switch (e) {
case 'loadend':
{
self.oReq.addEventListener('loadend', function() {
if (this.status == 401) {
var req = new XMLHttpRequest();
const req = new XMLHttpRequest();
req.open(self._method, self._url);
for (key in self._events) {
req.addEventListener(key, self._events[key]);

22
src/scripts/script.js
View File

@@ -20,7 +20,7 @@ registryUI.URL_PARAM_REGEX = /^url=/;
registryUI.name = registryUI.url = function(byPassQueryParam) {
if (!registryUI._url) {
var url = registryUI.getUrlQueryParam();
const url = registryUI.getUrlQueryParam();
if (url) {
try {
registryUI._url = registryUI.decodeURI(url);
@@ -35,7 +35,7 @@ registryUI.name = registryUI.url = function(byPassQueryParam) {
}
registryUI.getRegistryServer = function(i) {
try {
var res = JSON.parse(localStorage.getItem('registryServer'));
const res = JSON.parse(localStorage.getItem('registryServer'));
if (res instanceof Array) {
return (!isNaN(i)) ? res[i] : res.map(function(url) {
return url.trim().replace(/\/*$/, '');
@@ -45,9 +45,9 @@ registryUI.getRegistryServer = function(i) {
return (!isNaN(i)) ? '' : [];
}
registryUI.addServer = function(url) {
var registryServer = registryUI.getRegistryServer();
const registryServer = registryUI.getRegistryServer();
url = url.trim().replace(/\/*$/, '');
var index = registryServer.indexOf(url);
const index = registryServer.indexOf(url);
if (index != -1) {
return;
}
@@ -56,11 +56,11 @@ registryUI.addServer = function(url) {
registryUI.updateHistory(url);
}
localStorage.setItem('registryServer', JSON.stringify(registryServer));
}
};
registryUI.changeServer = function(url) {
var registryServer = registryUI.getRegistryServer();
url = url.trim().replace(/\/*$/, '');
var index = registryServer.indexOf(url);
const index = registryServer.indexOf(url);
if (index == -1) {
return;
}
@@ -68,11 +68,11 @@ registryUI.changeServer = function(url) {
registryServer = [url].concat(registryServer);
registryUI.updateHistory(url);
localStorage.setItem('registryServer', JSON.stringify(registryServer));
}
};
registryUI.removeServer = function(url) {
var registryServer = registryUI.getRegistryServer();
const registryServer = registryUI.getRegistryServer();
url = url.trim().replace(/\/*$/, '');
var index = registryServer.indexOf(url);
const index = registryServer.indexOf(url);
if (index == -1) {
return;
}
@@ -90,9 +90,9 @@ registryUI.updateHistory = function(url) {
}
registryUI.getUrlQueryParam = function () {
var search = window.location.search;
const search = window.location.search;
if (registryUI.URL_QUERY_PARAM_REGEX.test(search)) {
var param = search.split(/^\?|&/).find(function(param) {
const param = search.split(/^\?|&/).find(function(param) {
return param && registryUI.URL_PARAM_REGEX.test(param);
});
return param ? param.replace(registryUI.URL_PARAM_REGEX, '') : param;

30
src/style.css
View File

@@ -194,6 +194,7 @@ material-card table td {
text-align: right;
}
tag-history-button button:hover,
material-card table th.material-card-th-sorted-ascending:hover, material-card table th.material-card-th-sorted-descending:hover {
cursor: pointer;
}
@@ -337,38 +338,31 @@ select {
cursor: pointer;
}
material-card.tag-history {
tag-history material-card {
min-height: auto;
margin-bottom: 0;
}
.tag-history-element {
margin-top:5px;
margin-bottom: 0;
}
.tag-history-element > div {
padding: 20px;
min-width: 100px;
}
.tag-history-element i {
tag-history-element i {
font-size: 20px;
padding: 0px;
}
.tag-history-element .docker_version .headline .material-icons {
background-size: 20px auto;
tag-history-element.docker_version .headline .material-icons {
background-size: 24px auto;
background-image: url("images/docker-logo.svg");
background-repeat: no-repeat;
}
.tag-history-element > div {
tag-history-element {
display: block;
padding: 20px;
min-width: 100px;
width: 420px;
float: left;
overflow-x: auto;
}
.tag-history-element .headline p {
tag-history-element .headline p {
font-weight: bold;
line-height: 20px;
position: relative;
@@ -376,9 +370,7 @@ material-card.tag-history {
top: -4px;
}
.tag-history-element .id div.value,
.tag-history-element .container div.value,
.tag-history-element .parent div.value {
tag-history-element.id div.value {
font-size: 12px;
}

5
src/tags/app.tag
View File

@@ -210,6 +210,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
e.size = self.layers[i].size;
e.id = self.layers[i].digest.replace('sha256:', '');
});
self.blobs.id = blob.replace('sha256:', '');
self.trigger('creation-date', self.creationDate);
self.trigger('blobs', self.blobs);
} else if (this.status == 404) {
@@ -224,13 +225,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
};
registryUI.bytesToSize = function (bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
const 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)));
const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.ceil(bytes / Math.pow(1024, i)) + ' ' + sizes[i];
};
route.start(true);

2
src/tags/catalog.tag
View File

@@ -37,7 +37,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
registryUI.catalog.instance = this;
registryUI.catalog.display = function() {
registryUI.catalog.repositories = [];
var oReq = new Http();
const oReq = new Http();
oReq.addEventListener('load', function() {
registryUI.catalog.repositories = [];
if (this.status == 200) {

2
src/tags/copy-to-clipboard.tag
View File

@@ -22,7 +22,7 @@
<script type="text/javascript">
this.dockerCmd = 'docker pull ' + registryUI.cleanName() + '/' + opts.image.name + ':' + opts.image.tag;
this.copy = function () {
var copyText = this.refs['input'];
const copyText = this.refs['input'];
copyText.style.display = 'block';
copyText.select();
document.execCommand('copy');

2
src/tags/image-date.tag
View File

@@ -17,7 +17,7 @@
<image-date>
<div title="Creation date { this.localDate }">{ this.dateFormat(this.date) } ago</div>
<script type="text/javascript">
var self = this;
const self = this;
this.dateFormat = function(date) {
if (date === undefined) {
return '';

2
src/tags/image-size.tag
View File

@@ -17,7 +17,7 @@
<image-size>
<div title="Compressed size of your image.">{ registryUI.bytesToSize(this.size) }</div>
<script type="text/javascript">
var self = this;
const self = this;
opts.image.on('size', function(size) {
self.size = size;
self.update();

2
src/tags/image-tag.tag
View File

@@ -17,7 +17,7 @@
<image-tag>
<div title="{ this.sha256 }">{ opts.image.tag }</div>
<script type="text/javascript">
var self = this;
const self = this;
opts.image.on('sha256', function(sha256) {
self.sha256 = sha256.substring(0, 19);
self.update();

2
src/tags/menu.tag
View File

@@ -28,7 +28,7 @@
registryUI.menuTag = registryUI.menuTag || {};
registryUI.menuTag.update = this.update;
this.one('mount', function(args) {
var self = this;
const self = this;
registryUI.menuTag.close = function() {
self.tags['material-dropdown'].close();
self.update();

6
src/tags/remove-image.tag
View File

@@ -23,7 +23,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
registryUI.removeImage = registryUI.removeImage || {};
registryUI.removeImage.remove = function(name, tag) {
var oReq = new Http();
const oReq = new Http();
oReq.addEventListener('loadend', function() {
registryUI.taglist.refresh();
if (this.status == 200) {
@@ -31,8 +31,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
registryUI.errorSnackbar('You need to add Access-Control-Expose-Headers: [\'Docker-Content-Digest\'] in your server configuration.');
return;
}
var digest = this.getResponseHeader('Docker-Content-Digest');
var oReq = new Http();
const digest = this.getResponseHeader('Docker-Content-Digest');
const oReq = new Http();
oReq.addEventListener('loadend', function() {
if (this.status == 200 || this.status == 202) {
registryUI.taglist.refresh();

64
src/tags/tag-history-element.tag Normal file
View File

@@ -0,0 +1,64 @@
<!--
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 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/>.
-->
<tag-history-element class="{entry.key}">
<div class="headline"><i class="material-icons">{ this.getIcon(entry.key) }</i>
<p>{ entry.key.replace('_', ' ') }</p>
</div>
<div class="value" if={!(entry.value instanceof Array)}> { entry.value }</div>
<div class="value" each={ e in entry.value } if={entry.value instanceof Array}> { e }</div>
<script type="text/javascript">
this.getIcon = function(attribute) {
switch (attribute) {
case 'architecture':
return 'memory';
case 'created':
return 'event';
case 'docker_version':
return '';
case 'os':
return 'developer_board';
case 'Cmd':
return 'launch';
case 'Entrypoint':
return 'input';
case 'Env':
return 'notes';
case 'Labels':
return 'label';
case 'User':
return 'face';
case 'Volumes':
return 'storage';
case 'WorkingDir':
return 'home';
case 'author':
return 'account_circle';
case 'id':
case 'digest':
return 'settings_ethernet';
case 'created_by':
return 'build';
case 'size':
return 'get_app';
case 'ExposedPorts':
return 'router';
default:
''
}
}
</script>
</tag-history-element>

49
src/tags/tag-history.tag
View File

@@ -17,7 +17,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<tag-history>
<material-card ref="tag-history-tag" class="tag-history">
<div class="material-card-title-action">
<a href="#!taglist/{registryUI.taghistory.image}" onclick="registryUI.home();">
<a href="#!taglist/{registryUI.taghistory.image}">
<i class="material-icons">arrow_back</i>
</a>
<h2>
@@ -26,17 +26,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
</material-card>
<div hide="{ registryUI.taghistory.loadend }" class="spinner-wrapper">
<material-spinner></material-spinner>
<material-spinner/>
</div>
<material-card each="{ guiElement in this.elements }" class="tag-history-element">
<div each="{ entry in guiElement }" class="{ entry.key }" if="{ entry.value != ''}">
<div class="headline"><i class="material-icons">{entry.icon}</i>
<p>{ entry.key.replace('_', ' ') }</p>
</div>
<div class="value"> { entry.value }</div>
</div>
<tag-history-element each="{ entry in guiElement }" if="{ entry.value && entry.value.length > 0}"/>
</material-card>
<script type="text/javascript">
const self = this;
@@ -55,7 +49,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
};
self.eltSort = function(e1, e2) {
console.log(e1, e2)
return self.eltIdx(e1.key) - self.eltIdx(e2.key);
};
@@ -69,44 +62,25 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
case 'size':
return registryUI.bytesToSize(value);
case 'Entrypoint':
case 'Env':
case 'Cmd':
return (value || []).join(' ');
case 'Labels':
return Object.keys(value || {}).map(function(elt) {
return value[elt] ? elt + '=' + value[elt] : '';
}).join(' ');
});
case 'Volumes':
case 'ExposedPorts':
return Object.keys(value);
}
return value || '';
};
self.getIcon = function(attribute) {
switch (attribute) {
case 'architecture': return 'memory';
case 'created': return 'event';
case 'docker_version': return '';
case 'os': return 'developer_board';
case 'Cmd': return 'launch';
case 'Entrypoint': return 'input';
case 'Env': return 'notes';
case 'Labels': return 'label';
case 'User': return 'face';
case 'Volumes': return 'storage';
case 'WorkingDir': return 'home';
case 'author': return 'account_circle';
case 'id': case 'digest': return 'settings_ethernet';
case 'created_by': return 'build';
case 'size': return 'get_app';
default: ''
}
}
self.getConfig = function(blobs) {
const res = ['architecture', 'User', 'created', 'docker_version', 'os', 'Cmd', 'Entrypoint', 'Env', 'Labels', 'User', 'Volumes', 'WorkingDir', 'author'].reduce(function(acc, e) {
acc[e] = blobs[e] || blobs.config[e];
const res = ['architecture', 'User', 'created', 'docker_version', 'os', 'Cmd', 'Entrypoint', 'Env', 'Labels', 'User', 'Volumes', 'WorkingDir', 'author', 'id', 'ExposedPorts'].reduce(function(acc, e) {
const value = blobs[e] || blobs.config[e];
if (value) {
acc[e] = value;
}
return acc;
}, {});
@@ -130,8 +104,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
const value = elt[attribute];
const guiElement = {
"key": attribute,
"value": self.modifySpecificAttributeTypes(attribute, value),
'icon': self.getIcon(attribute)
"value": self.modifySpecificAttributeTypes(attribute, value)
};
guiElements.push(guiElement);
}

2
src/tags/taglist.tag
View File

@@ -72,7 +72,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
registryUI.taglist.display = function() {
registryUI.taglist.tags = [];
if (route.routeName == 'taglist') {
var oReq = new Http();
const oReq = new Http();
registryUI.taglist.instance.update();
oReq.addEventListener('load', function() {
registryUI.taglist.tags = [];