mirrors/docker-registry-ui
1
0
Fork 0
mirror of https://github.com/Joxit/docker-registry-ui.git synced 2025-05-05 03:19:55 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(multi-arch): wrong history order when we use multi-arch tabs many times

Browse source 
no arch when the landing page is not tag history
reorder history elements
This commit is contained in:
Joxit 2020-06-11 00:07:08 +02:00
parent 656914f0d7
commit c9ede6fe61
No known key found for this signature in database
GPG key ID: F526592B8E012263
3 changed files with 38 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/style.css
View file

@ -497,6 +497,7 @@ tag-history-element {
display: block; display: block;
padding: 20px; padding: 20px;
min-width: 100px; min-width: 100px;
min-height: 3em;
width: 420px; width: 420px;
float: left; float: left;
overflow-x: auto; overflow-x: auto;

1
src/tags/tag-history-button.tag
View file

@ -22,7 +22,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
this.on('mount', function() { this.on('mount', function() {
const self = this; const self = this;
this.refs.button.root.onclick = function() { this.refs.button.root.onclick = function() {
registryUI.taghistory._image = self.opts.image;
registryUI.taghistory.go(self.opts.image.name, self.opts.image.tag); registryUI.taghistory.go(self.opts.image.name, self.opts.image.tag);
}; };
}); });

76
src/tags/tag-history.tag
View file

@ -26,48 +26,48 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
</material-card> </material-card>
<div hide="{ registryUI.taghistory.loadend }" class="spinner-wrapper"> <div hide="{ registryUI.taghistory.loadend }" class="spinner-wrapper">
<material-spinner/> <material-spinner />
</div> </div>
<material-tabs if="{ this.archs }" useLine="true" tabs="{ this.archs }" tabchanged="{ this.tabchanged }"></material-tabs> <material-tabs if="{ this.archs }" useLine="true" tabs="{ this.archs }" tabchanged="{ this.tabchanged }" />
<material-card each="{ guiElement in this.elements }" class="tag-history-element"> <material-card each="{ guiElement in this.elements }" class="tag-history-element">
<tag-history-element each="{ entry in guiElement }" if="{ entry.value && entry.value.length > 0}"/> <tag-history-element each="{ entry in guiElement }" if="{ entry.value && entry.value.length > 0}" />
</material-card> </material-card>
<script type="text/javascript"> <script type="text/javascript">
const self = this; const self = this;
const eltIdx = function(e) { const eltIdx = function (e) {
switch (e) { switch (e) {
case 'id': return 1; case 'created': return 1;
case 'created': return 2; case 'created_by': return 2;
case 'created_by': return 3; case 'size': return 3;
case 'size': return 4; case 'os': return 4;
case 'os': return 5; case 'architecture': return 5;
case 'architecture': return 6; case 'id': return 6;
case 'linux': return 7; case 'linux': return 7;
case 'docker_version': return 8; case 'docker_version': return 8;
default: return 10; default: return 10;
} }
}; };
const eltSort = function(e1, e2) { const eltSort = function (e1, e2) {
return eltIdx(e1.key) - eltIdx(e2.key); return eltIdx(e1.key) - eltIdx(e2.key);
}; };
const modifySpecificAttributeTypes = function(attribute, value) { const modifySpecificAttributeTypes = function (attribute, value) {
switch (attribute) { switch (attribute) {
case 'created': case 'created':
return new Date(value).toLocaleString(); return new Date(value).toLocaleString();
case 'created_by': case 'created_by':
const cmd = value.match(/\/bin\/sh *-c *#\(nop\) *([A-Z]+)/); const cmd = value.match(/\/bin\/sh *-c *#\(nop\) *([A-Z]+)/);
return (cmd && cmd [1]) || 'RUN' return (cmd && cmd[1]) || 'RUN'
case 'size': case 'size':
return registryUI.bytesToSize(value); return registryUI.bytesToSize(value);
case 'Entrypoint': case 'Entrypoint':
case 'Cmd': case 'Cmd':
return (value || []).join(' '); return (value || []).join(' ');
case 'Labels': case 'Labels':
return Object.keys(value || {}).map(function(elt) { return Object.keys(value || {}).map(function (elt) {
return value[elt] ? elt + '=' + value[elt] : ''; return value[elt] ? elt + '=' + value[elt] : '';
}); });
case 'Volumes': case 'Volumes':
@ -77,14 +77,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
return value || ''; return value || '';
}; };
const getConfig = function(blobs) { const getConfig = function (blobs) {
const res = ['architecture', 'User', 'created', 'docker_version', 'os', 'Cmd', 'Entrypoint', 'Env', 'Labels', 'User', 'Volumes', 'WorkingDir', 'author', 'id', 'ExposedPorts'].reduce(function(acc, e) { const res = ['architecture', 'User', 'created', 'docker_version', 'os', 'Cmd', 'Entrypoint', 'Env', 'Labels', 'User', 'Volumes', 'WorkingDir', 'author', 'id', 'ExposedPorts']
const value = blobs[e] || blobs.config[e]; .reduce(function (acc, e) {
if (value) { const value = blobs[e] || blobs.config[e];
acc[e] = value; if (value && e === 'architecture' && blobs.variant) {
} acc[e] = value + blobs.variant;
return acc; } else if (value) {
}, {}); acc[e] = value;
}
return acc;
}, {});
if (!res.author && (res.Labels && res.Labels.maintainer)) { if (!res.author && (res.Labels && res.Labels.maintainer)) {
res.author = blobs.config.Labels.maintainer; res.author = blobs.config.Labels.maintainer;
@ -94,7 +97,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
return res; return res;
}; };
const processBlobs = function(blobs) { const processBlobs = function (blobs) {
function exec(elt) { function exec(elt) {
const guiElements = []; const guiElements = [];
for (var attribute in elt) { for (var attribute in elt) {
@ -109,25 +112,25 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
} }
return guiElements.sort(eltSort); return guiElements.sort(eltSort);
} }
self.elements = new Array(blobs.history.length + 1);
self.elements.push(exec(getConfig(blobs))); self.elements[0] = exec(getConfig(blobs));
blobs.history.reverse().forEach(function(elt) { self.elements.push(exec(elt)) }); blobs.history.forEach(function (elt, i) { self.elements[blobs.history.length - i] = exec(elt) });
registryUI.taghistory.loadend = true; registryUI.taghistory.loadend = true;
self.update(); self.update();
}; };
const multiArchList = function(manifests) { const multiArchList = function (manifests) {
manifests = manifests.manifests || manifests; manifests = manifests.manifests || manifests;
self.archs = manifests.map(function(manifest) { self.archs = manifests.map(function (manifest) {
return { return {
title: manifest.platform.os + '/' + manifest.platform.architecture + (manifest.platform.variant ? manifest.platform.variant : ''), title: manifest.platform.os + '/' + manifest.platform.architecture + (manifest.platform.variant ? manifest.platform.variant : ''),
digest: manifest.digest digest: manifest.digest
} }
}) })
self.update(); self.update();
} };
self.tabchanged = function(arch, idx) { self.tabchanged = function (arch, idx) {
self.elements = [] self.elements = []
self.image.variants[idx] = self.image.variants[idx] || new registryUI.DockerImage(registryUI.taghistory.image, arch.digest); self.image.variants[idx] = self.image.variants[idx] || new registryUI.DockerImage(registryUI.taghistory.image, arch.digest);
if (self.image.variants[idx].blobs) { if (self.image.variants[idx].blobs) {
@ -135,23 +138,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
} }
self.image.variants[idx].fillInfo(); self.image.variants[idx].fillInfo();
self.image.variants[idx].on('blobs', processBlobs); self.image.variants[idx].on('blobs', processBlobs);
} };
registryUI.taghistory.display = function() { registryUI.taghistory.display = function () {
self.elements = [] self.elements = []
const blobs = registryUI.taghistory._image && registryUI.taghistory._image.blobs;
if (blobs) {
window.scrollTo(0, 0);
return processBlobs(blobs);
}
self.image = new registryUI.DockerImage(registryUI.taghistory.image, registryUI.taghistory.tag, true); self.image = new registryUI.DockerImage(registryUI.taghistory.image, registryUI.taghistory.tag, true);
self.image.fillInfo() self.image.fillInfo()
self.image.on('blobs', processBlobs); self.image.on('blobs', processBlobs);
self.image.on('list', multiArchList) self.image.on('list', multiArchList)
}; };
this.on('mount', function() { this.on('mount', function () {
self.refs['tag-history-tag'].tags['material-button'].root.onclick = function() { self.refs['tag-history-tag'].tags['material-button'].root.onclick = function () {
registryUI.taglist.go(registryUI.taghistory.image); registryUI.taglist.go(registryUI.taghistory.image);
}; };
}); });