mirrors
/
docker-registry-ui
mirror of https://github.com/Joxit/docker-registry-ui.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

EP-40352: removed labels in different material ui.

This commit is contained in:
Suhal Vemu 2024-03-12 10:53:03 +05:30
parent c784551a17
commit e879392e86
No known key found for this signature in database
GPG Key ID: 18832091D9EAF95A
5 changed files with 175 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/catalog/catalog.riot
View File

@ -86,7 +86,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
});
oReq.addEventListener('load', function () {
if (this.status === 200) {
repositories = JSON.parse(this.responseText).repositories || [];
let repositories_1 = JSON.parse(this.responseText).repositories || [];
for (let i = 0; i < repositories_1.length; i++){
if (!repositories_1[i].includes("unlabeled")){
repositories.push(repositories_1[i])
}
}
repositories.sort();
nImages = repositories.length;
if (typeof state.branching === 'function') {

7
src/components/docker-registry-ui.riot
View File

@ -114,12 +114,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
Docker Registry UI { version }
</a>
<ul>
<li>
<a href="https://github.com/Joxit/docker-registry-ui">Contribute on GitHub</a>
</li>
<li>
<a href="https://github.com/Joxit/docker-registry-ui/blob/main/LICENSE">License AGPL-3.0</a>
</li>
<li if="{ props.theme === 'auto' || props.theme === '' }">
<material-switch
on-change="{ onThemeChange }"
@ -141,6 +135,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import { Router, Route } from '@riotjs/route';
import Catalog from './catalog/catalog.riot';
import TagList from './tag-list/tag-list.riot';
import Labels from './tag-history/image-label.riot';
import TagHistory from './tag-history/tag-history.riot';
import DialogsMenu from './dialogs/dialogs-menu.riot';
import SearchBar from './search-bar.riot';

137
src/components/tag-history/image-label.riot Normal file
View File

@ -0,0 +1,137 @@
<!--
Copyright (C) 2016-2023 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-label class="image-labels">
<div class="row">
<div class="headline column">
<i if="{ state.key !== 'docker_version' }" class="material-icons">{ state.icon }</i>
<span if="{ state.key === 'docker_version' }" id="docker_verion"></span>
<span>{ state.name }</span>
</div>
<div class="content column">
<div class="values value " each="{ value in state.values }" if="{ state.values }"><span class="detail-type">{value[0]+' : '}</span><span class="{value[0]}">{value[1]}</span></div>
</div>
</div>
<script>
import { getHistoryIcon } from '../../scripts/utils';
import dockerVersionIcon from '../../images/docker-logo.svg';
export default {
onBeforeStart(props, state) {
state.key = props.entry.key;
state.icon = getHistoryIcon(props.entry.key);
state.name = props.entry.key;
state.values = Object.entries(JSON.parse(props.entry.value));
state.values=state.values.map(value=>
{
if(value[0]=='layers'){
return [value[0],value[1].join('\n')];
}
return value;
})
console.log(state.values)
},
onBeforeMount(props, state) {
this.onBeforeStart(props, state);
},
onBeforeUpdate(props, state) {
this.onBeforeStart(props, state);
},
onMounted(props, state) {
const dockerVersion = this.$('#docker_verion');
if (dockerVersion) {
dockerVersion.innerHTML = dockerVersionIcon().firstElementChild.outerHTML;
}
},
cleanName(name) {
if (name === 'id') {
return name;
} else if (name === 'os') {
return 'OS';
} else if (name.startsWith('custom-label-')) {
name = name.replace('custom-label-', '');
}
return name
.replace(/([a-z])([A-Z])/g, '$1 $2')
.replace(/[_-]/g, ' ')
.split(' ')
.map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
.join(' ');
},
};
</script>
<style>
:host.Labels .value,
:host.Env .value {
margin-bottom: 0.5em;
}
:host i {
font-size: 20px;
padding: 0px;
}
:host.docker_version .headline .material-icons,
:host.docker_version .headline #docker_verion {
height: 24px;
}
:host {
display: block;
padding: 20px;
min-width: 100px;
min-height: 3em;
width: auto;
}
:host .content {
overflow-x: auto;
}
:host .detail-type{
font-weight: bold;
}
:host .layers{
display: table-caption;
}
:host.id .content {
overflow-x: initial;
float:right;
}
:host .headline {
height: 24px;
display: flex;
flex-direction: row;
align-items: center;
font-weight: bold;
float: left;
width:40%;
}
:host .headline * {
margin-right: 6px;
}
:host.id div.value {
font-size: 12px;
}
</style>
</image-label>

59
src/components/tag-history/tag-history.riot
View File

@ -49,7 +49,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
opened="{ state.showDockerfile }"
on-close="{ onDockerfileClose }"
elements="{ state.elements }"
labels="{ state.labels }"
labelelements = "{ state.labelelements }"
></dockerfile>
<material-tabs
@ -67,38 +67,36 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<material-card each="{ element in state.elements }">
<tag-history-element
each="{ entry in element }"
if="{ entry.value && entry.value.length > 0}"
if="{ entry.value && !entry.key.includes('com') && entry.key!='Labels' && entry.value.length > 0 && entry.key!=null}"
entry="{ entry }"
></tag-history-element>
</material-card>
<material-card>layers</material-card>
<material-card each="{ element in state.layers }">
<tag-history-element
each="{ entry in element }"
if="{ entry.value && entry.value.length > 0}"
entry="{ entry }"
></tag-history-element>
<material-card each="{element in state.labelelements}">
<image-label
each="{ entry in element }"
if="{ entry.value && entry.value.length > 0}"
entry="{ entry }"
></image-label>
</material-card>
<script>
import { DockerImage } from '../../scripts/docker-image';
import { bytesToSize } from '../../scripts/utils';
import Dockerfile from '../dialogs/dockerfile.riot';
import router from '../../scripts/router';
import TagHistoryElement from './tag-history-element.riot';
import Labels from "./label.riot";
import ImageLabel from './image-label.riot';
export default {
components: {
TagHistoryElement,
Dockerfile,
ImageLabel,
},
onBeforeMount(props, state) {
state.elements = [];
state.labels = [];
state.labelelements = [];
state.image = new DockerImage(props.image, props.tag, {
list: true,
registryUrl: props.registryUrl,
@ -117,7 +115,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
const state = this.state;
const { registryUrl, onNotify, useControlCacheHeader } = this.props;
state.elements = [];
state.labels = [];
state.labelelements = [];
state.image.variants[idx] =
state.image.variants[idx] ||
new DockerImage(this.props.image, arch.digest, {
@ -129,20 +127,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
if (state.image.variants[idx].blobs) {
return this.processBlobs(state.image.variants[idx].blobs);
}
state.image.variants[idx].fillInfo();
state.image.variants[idx].fillInfo();;
state.image.variants[idx].on('blobs', this.processBlobs);
},
processBlobs(blobs) {
const state = this.state;
const { historyCustomLabels } = this.props;
//console.log(historyCustomLabels)
const labels = this.state.image.blobs.config.Labels;
const temp = Object.entries(labels)
const labelelements=temp.map(obj=>{
const labelelements = temp.map(obj=>{
return {key:obj[0],value:obj[1]}
})
console.log(labelelements)
function exec(elt) {
const guiElements = [];
@ -155,25 +153,28 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}
return guiElements.sort(eltSort);
}
const elements = new Array(blobs.history.length + 1);
const elements = new Array(1);
elements[0] = exec(getConfig(blobs, { historyCustomLabels }));
blobs.history.forEach(function (elt, i) {
elements[blobs.history.length - i] = exec(elt);
});
elements.splice(1, 0,labelelements );
console.log(elements)
// blobs.history.forEach(function (elt, i) {
// elements[blobs.history.length - i] = exec(elt);
// });
//elements.splice(1, 0,labelelements);
// for (let i=0; i<elements.length;i++){
// if (i>1){
// elements[i]=null;
// }
// }
this.update({
elements,
loadend: true,
});
this.state.labelelements.push(labelelements);
this.update();
},
multiArchList(manifests) {
manifests = manifests.manifests || manifests;
const archs = manifests.map(function (manifest) {
@ -280,7 +281,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
'Cmd',
'Entrypoint',
'Env',
//'Labels',
'Labels',
'User',
'Volumes',
'WorkingDir',

1
src/index.html
View File

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