build: release 1.5.0 supports for multi-arch images

Update values.yaml (#135 )
fix(multi-arch): wrong history order when we use multi-arch tabs many times
2026-02-17 21:19:51 +00:00 · 2020-06-21 23:39:05 +02:00 · 2020-06-12 08:58:15 +02:00 · 2020-06-11 00:07:08 +02:00 · 2020-06-10 09:18:29 +02:00 · 2020-06-09 19:47:09 +02:00
50 changed files with 857 additions and 109 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -27,7 +27,7 @@ My docker-compose file

 ```

-My private docker registry configuration 
+My private docker registry configuration
 ```yml

 ```
@@ -41,18 +41,18 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.

 ## System information
- 
+
 - OS: [e.g. Debian 10, Windows, Android 9...]
 <!-- Browser is only for UI bugs -->
 - Browser:
    - Name:  [e.g. Chrome, Firefox...]
    - Version: [e.g. 22]
 - Docker registry UI:
-    - Version: [e.g. 1.3.0]
-    - Interface variant: [standard or static]
+    - Version: [e.g. 1.4.0]
    - Server: [docker or dist]
 <!-- Only for Docker and for where the UI is hosted -->
    - Docker version: [e.g. 19.03]
+    - Docker registry ui tag: [latest, static, master, 1.4-static...]
    - OS/Arch: [e.g. linux/amd64]
    - Tools: [e.g. docker-compose, kubernets..]

--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ node_modules
 package-lock.json
 registry-data
 .idea
-_site
+_site
+*.orig
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -11,6 +11,8 @@
 - Sébastien Huss [@sebt3](https://github.com/sebt3)
 - Vladimir Kozyrev [@fieryvova](https://github.com/fieryvova)
 - Haibo Jia [@bluethon](https://github.com/bluethon)
+- Manuel Leitold [@agrippa1994](https://github.com/agrippa1994)
+- Murad [@muradheydarov](https://github.com/muradheydarov)

 ## Because committers are not the only contributors

@@ -24,4 +26,9 @@
 - [@wuyue92tree](https://github.com/wuyue92tree)
 - Giovanni Toraldo [@gionn](https://github.com/gionn)
 - [@marcusblake](https://github.com/marcusblake)
- Dario [@pidario](https://github.com/pidario)
+- Dario [@pidario](https://github.com/pidario)
+- Jernej K. [@Cvetk0](https://github.com/Cvetk0)
+- Cristian Posoiu [@cr1st1p](https://github.com/cr1st1p)
+- Sepp Zuther [@Herr-Sepp](https://github.com/Herr-Sepp)
+- Tomas Hulata [@tombokombo](https://github.com/tombokombo)
+- Ben Jackson [@bjj](https://github.com/bjj)
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@ In the **static interface**, it will connect to a single registry and will not c

 This web user interface uses [Riot](https://github.com/Riot/riot) the react-like user interface micro-library and [riot-mui](https://github.com/kysonic/riot-mui) components.

-## [Project Page](https://joxit.dev/docker-registry-ui), [Live Demo](https://joxit.dev/docker-registry-ui/demo/) [Examples](https://github.com/Joxit/docker-registry-ui/tree/master/examples)
+## [Project Page](https://joxit.dev/docker-registry-ui), [Live Demo](https://joxit.dev/docker-registry-ui/demo/), [Examples](https://github.com/Joxit/docker-registry-ui/tree/master/examples)

 ![preview](https://raw.github.com/Joxit/docker-registry-ui/master/docker-registry-ui.gif "Preview of Docker Registry UI")

@@ -46,6 +46,9 @@ This web user interface uses [Riot](https://github.com/Riot/riot) the react-like
 -   Add Title when using `REGISTRY_URL` (see [#28](https://github.com/Joxit/docker-registry-ui/issues/28)) **static interface**.
 -   Customise docker pull command on static registry UI (see [#71](https://github.com/Joxit/docker-registry-ui/issues/71)) **static interface**.
 -   Add custom header via environment variable and file via `NGINX_PROXY_HEADER_*` (see [#89](https://github.com/Joxit/docker-registry-ui/pull/89)) **static interface**
+-   Show/Hide content digest in taglist via `SHOW_CONTENT_DIGEST` (values are: [`true`, `false`], default: `true`) (see [#126](https://github.com/Joxit/docker-registry-ui/issues/126)).
+-   Limit the number of elements in the image list via `CATALOG_ELEMENTS_LIMIT` (see [#127](https://github.com/Joxit/docker-registry-ui/pull/127)).
+-   Multi arch support in history page (see [#130](https://github.com/Joxit/docker-registry-ui/issues/130) and [#134](https://github.com/Joxit/docker-registry-ui/pull/134))

 ## FAQ

@@ -63,6 +66,10 @@ This web user interface uses [Riot](https://github.com/Riot/riot) the react-like
    -   This means you are using a UI with HTTPS and your registry is using HTTP (unsecured). When you are on a HTTPS site, you can't get HTTP content. Upgrade you registry with a HTTPS connection.
 -   Why the default nginx `Host` is set to `$http_host` ?
    -   This fixes the issue [#88](https://github.com/Joxit/docker-registry-ui/issues/88). More about this in [#113](https://github.com/Joxit/docker-registry-ui/issues/113).
+-   Why DELETE fails with 401 status code (using Basic Auth) ?
+    -   This is caused by a bug in docker registry, I suggest to have your UI on the same domain than your registry e.g. registry.example.com/ui/. (see [#104](https://github.com/Joxit/docker-registry-ui/issues/104)).
+-   Can I use the docker registry ui as a standalone application (with Electron) ?
+    -   Yes, check out the example [here](https://github.com/Joxit/docker-registry-ui/tree/master/examples/electron). (see [#129](https://github.com/Joxit/docker-registry-ui/pull/129))

 Need more informations ? Try my [examples](https://github.com/Joxit/docker-registry-ui/tree/master/examples) or open an issue.

@@ -179,9 +186,12 @@ http:
  headers:
    Access-Control-Allow-Origin: ['<your docker-registry-ui url>']
    Access-Control-Allow-Credentials: [true]
+    Access-Control-Allow-Headers: ['Authorization', 'Accept']
    Access-Control-Allow-Methods: ['HEAD', 'GET', 'OPTIONS'] # Optional
 ```

+An alternative for CORS issues is a plugin on your browser, more info [here](https://github.com/Joxit/docker-registry-ui/issues/25#issuecomment-621104846) (thank you [xmontero](https://github.com/xmontero)).
+
 ## Using delete

 For deleting images, you need to activate the delete feature in your registry:
@@ -223,7 +233,7 @@ http:
    X-Content-Type-Options: [nosniff]
    Access-Control-Allow-Origin: ['http://127.0.0.1:8001']
    Access-Control-Allow-Methods: ['HEAD', 'GET', 'OPTIONS', 'DELETE']
-    Access-Control-Allow-Headers: ['Authorization']
+    Access-Control-Allow-Headers: ['Authorization', 'Accept']
    Access-Control-Max-Age: [1728000]
    Access-Control-Allow-Credentials: [true]
    Access-Control-Expose-Headers: ['Docker-Content-Digest']
@@ -233,13 +243,19 @@ auth:
    path: /etc/docker/registry/htpasswd
 ```

+## Standalone Application
+If you do not want to install the docker-registry-ui on your server, you may
+check out the [Electron](examples/electron/README.md) standalone application.
+
 ## All examples

 - [Use docker-registry-ui as a proxy (use REGISTRY_URL)](https://github.com/Joxit/docker-registry-ui/tree/master/examples/ui-as-proxy)
 - [Use docker-registry-ui as standalone (use URL)](https://github.com/Joxit/docker-registry-ui/tree/master/examples/ui-as-standalone)
 - [Use docker-registry-ui with traefik](https://github.com/Joxit/docker-registry-ui/tree/master/examples/traefik)
- [Use docker-registry-ui with docker registry and Amazon s3](https://github.com/Joxit/docker-registry-ui/tree/master/examples/issue-75) ([#75](https://github.com/Joxit/docker-registry-ui/issues/88))
+- [Use docker-registry-ui with docker registry and Amazon s3](https://github.com/Joxit/docker-registry-ui/tree/master/examples/issue-75) ([#75](https://github.com/Joxit/docker-registry-ui/issues/75))
 - [FIX revproxy to registry does not work when published under non-root url](https://github.com/Joxit/docker-registry-ui/tree/master/examples/issue-73) ([#73](https://github.com/Joxit/docker-registry-ui/issues/73))
 - [Use docker-registry-ui with HTTPS](https://github.com/Joxit/docker-registry-ui/tree/master/examples/issue-20) ([#20](https://github.com/Joxit/docker-registry-ui/issues/20))
 - [Unable to push image when docker-registry-ui is used as a proxy on non 80 port](https://github.com/Joxit/docker-registry-ui/tree/master/examples/issue-88) ([#88](https://github.com/Joxit/docker-registry-ui/issues/88))
 - [Add custom headers bases on environment variable and/or file when the ui is used as proxy](https://github.com/Joxit/docker-registry-ui/tree/master/examples/proxy-headers) ([#89](https://github.com/Joxit/docker-registry-ui/pull/89))
+- [UI showing same sha256 content digest for all tags + Delete is not working](https://github.com/Joxit/docker-registry-ui/tree/master/examples/issue-116) ([#116](https://github.com/Joxit/docker-registry-ui/issues/116))
+- [Electron-based Standalone Application](https://github.com/Joxit/docker-registry-ui/tree/master/examples/electron) ([#129](https://github.com/Joxit/docker-registry-ui/pull/129))
--- a/bin/entrypoint
+++ b/bin/entrypoint
@@ -8,6 +8,14 @@ if [ -z "${DELETE_IMAGES}" ] || [ "${DELETE_IMAGES}" = false ] ; then
  sed -i -r "s/(isImageRemoveActivated[:=])[^,;]*/\1false/" scripts/docker-registry-ui.js
 fi

+if [ "${SHOW_CONTENT_DIGEST}" = false ] ; then
+  sed -i -r "s/(showContentDigest[:=])[^,;]*/\1false/" scripts/docker-registry-ui.js
+fi
+
+if [ -n "${CATALOG_ELEMENTS_LIMIT}" ] ; then
+  sed -i -r "s/(catalogElementsLimit[:=])[^,;]*/\1${CATALOG_ELEMENTS_LIMIT}/" scripts/docker-registry-ui.js
+fi
+
 get_nginx_proxy_headers() {
  (
    env &&
--- 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/style.css
+++ b/dist/style.css
--- a/examples/README.md
+++ b/examples/README.md
@@ -3,8 +3,9 @@
 - [Use docker-registry-ui as a proxy (use REGISTRY_URL)](https://github.com/Joxit/docker-registry-ui/tree/master/examples/ui-as-proxy)
 - [Use docker-registry-ui as standalone (use URL)](https://github.com/Joxit/docker-registry-ui/tree/master/examples/ui-as-standalone)
 - [Use docker-registry-ui with traefik](https://github.com/Joxit/docker-registry-ui/tree/master/examples/traefik)
- [Use docker-registry-ui with docker registry and Amazon s3](https://github.com/Joxit/docker-registry-ui/tree/master/examples/issue-75) ([#75](https://github.com/Joxit/docker-registry-ui/issues/88))
+- [Use docker-registry-ui with docker registry and Amazon s3](https://github.com/Joxit/docker-registry-ui/tree/master/examples/issue-75) ([#75](https://github.com/Joxit/docker-registry-ui/issues/75))
 - [FIX revproxy to registry does not work when published under non-root url](https://github.com/Joxit/docker-registry-ui/tree/master/examples/issue-73) ([#73](https://github.com/Joxit/docker-registry-ui/issues/73))
 - [Use docker-registry-ui with HTTPS](https://github.com/Joxit/docker-registry-ui/tree/master/examples/issue-20) ([#20](https://github.com/Joxit/docker-registry-ui/issues/20))
 - [Unable to push image when docker-registry-ui is used as a proxy on non 80 port](https://github.com/Joxit/docker-registry-ui/tree/master/examples/issue-88) ([#88](https://github.com/Joxit/docker-registry-ui/issues/88))
- [Add custom headers bases on environment variable and/or file when the ui is used as proxy](https://github.com/Joxit/docker-registry-ui/tree/master/examples/proxy-headers) ([#89](https://github.com/Joxit/docker-registry-ui/pull/89))
+- [Add custom headers bases on environment variable and/or file when the ui is used as proxy](https://github.com/Joxit/docker-registry-ui/tree/master/examples/proxy-headers) ([#89](https://github.com/Joxit/docker-registry-ui/pull/89))
+- [UI showing same sha256 content digest for all tags + Delete is not working](https://github.com/Joxit/docker-registry-ui/tree/master/examples/issue-116) ([#116](https://github.com/Joxit/docker-registry-ui/issues/116))
--- a/examples/electron/.gitignore
+++ b/examples/electron/.gitignore
@@ -0,0 +1,8 @@
+# NPM renames .gitignore to .npmignore
+# In order to prevent that, we remove the initial "."
+# And the CLI then renames it
+
+dist/
+node_modules/
+Registry*
+.cache
--- a/examples/electron/README.md
+++ b/examples/electron/README.md
@@ -0,0 +1,57 @@
+# Standalone Application
+
+## Overview
+
+This standalone application is based on Electron which encapsulates the whole
+docker-registry-ui in a single executable, that can be run on your local
+computer.
+
+## Building
+* Check out or download the repository, open a terminal at the checkout
+  directory, download the dependencies and build the web app:
+    ```bash
+    npm install
+    npm run build
+    ```
+* After building the web application, navigate to the ```electron``` directory
+  and execute following commands to build the executable:
+    ```bash
+    cd electron
+    npm install
+    npm run dist
+    ```
+If you encounter any issues, please check the troubleshooting below.
+
+
+## Password Protected Registries
+If you want to interact with password protected Docker Registries, this
+application will use the keystore of your system to gather the credentials for
+accessing the Registry.
+
+This is accomplished with the [keytar](https://www.npmjs.com/package/keytar)
+package. In concjunction with keytar, the integrated credential
+helper supports you with managing the credentials to the Registries.
+
+![alt Authentication on macOS](./doc/assets/authentication.gif)
+
+
+## Troubleshooting
+*   Problem: The application does not start with ```npm start``` and exits with following message:
+    ```
+    [7742:0509/001117.199224:FATAL:setuid_sandbox_host.cc(157)] The SUID sandbox helper binary was found, but is not configured correctly. Rather than run without sandboxing I'm aborting now. You need to make sure that ./node_modules/electron dist/chrome-sandbox is owned by root and has mode 4755.
+    ```
+
+    Solution: Add proper rights to the chrome-sanbox
+    ```bash
+    sudo chown root ./node_modules/electron/dist/chrome-sandbox
+    sudo chmod 4755 ./node_modules/electron/dist/chrome-sandbox
+    ```
+
+* Problem: I am on Linux and to not have any password wallet for keytar.
+
+  Solution: Install following dependencies according to the official [setup instructions](https://atom.github.io/node-keytar/) for keytar on Linux:
+    * Debian/Ubuntu: ```sudo apt-get install libsecret-1-dev```
+    * Red Hat-based: ```sudo yum install libsecret-devel```
+    * Arch Linux: ```sudo pacman -S libsecret```
+
+
--- a/examples/electron/authentication/index.html
+++ b/examples/electron/authentication/index.html
@@ -0,0 +1,8 @@
+<html>
+
+<body>
+    <div id="root"></div>
+    <script src="index.tsx"></script>
+</body>
+
+</html>
--- a/examples/electron/authentication/index.tsx
+++ b/examples/electron/authentication/index.tsx
@@ -0,0 +1,211 @@
+import * as React from "react";
+import {useEffect, useState} from "react";
+import {render} from "react-dom";
+import * as keytar from 'keytar';
+import {ipcRenderer} from 'electron';
+import {
+    Button,
+    createMuiTheme,
+    CssBaseline,
+    IconButton,
+    LinearProgress,
+    makeStyles,
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    TextField,
+    ThemeProvider,
+    useMediaQuery
+} from "@material-ui/core";
+import {Alert, AlertTitle} from '@material-ui/lab';
+import {blue} from "@material-ui/core/colors";
+import {Add as AddIcon, Delete as DeleteIcon, Save as SaveIcon} from "@material-ui/icons";
+
+const mainStyle = makeStyles((theme) => ({
+    root: {
+        padding: theme.spacing(2),
+        display: "flex",
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+    },
+    main: {
+        flexGrow: 1,
+        paddingTop: theme.spacing(2),
+        paddingBottom: theme.spacing(2),
+    },
+    input: {
+        width: '100%',
+    },
+}));
+
+function CredentialRow({credential, index, onDelete, onUpdate}) {
+    const [account, setAccount] = useState(credential?.account || '');
+    const [password, setPassword] = useState(credential?.password || '');
+
+    const style = mainStyle();
+    return (<TableRow>
+        <TableCell>
+            <TextField
+                className={style.input}
+                type="text"
+                placeholder='https://user@someregistry:5000/'
+                value={account} variant="outlined"
+                onChange={(e) => {
+                    setAccount(e.target.value)
+                }}/>
+        </TableCell>
+        <TableCell>
+            <TextField type="password"
+                       className={style.input}
+                       variant="outlined"
+                       placeholder='Password'
+                       value={password}
+                       onChange={(e) => {
+                           setPassword(e.target.value)
+                       }}/>
+        </TableCell>
+        <TableCell align="right">
+            <IconButton onClick={async () => await onUpdate(credential, index, {account, password})}>
+                <SaveIcon/>
+            </IconButton>
+            <IconButton onClick={async () => await onDelete(credential, index,)}>
+                <DeleteIcon/>
+            </IconButton>
+        </TableCell>
+    </TableRow>);
+}
+
+
+function CredentialsTable({onError}) {
+    const [credentials, setCredentials] = useState(null);
+
+    async function loadItems() {
+        try {
+            const credentials = await keytar.findCredentials('docker-registry-ui');
+            for (const credential of credentials) {
+                // fix for windows
+                credential.password = credential.password.replace(/\000+/g, '');
+            }
+            setCredentials(credentials);
+        } catch (e) {
+            onError(e.toString());
+        }
+    }
+
+    async function handleDelete(item, index) {
+        // delete an item that has not been stored yet
+        if (!item) {
+            const newCredentials = [...credentials];
+            newCredentials.splice(index, 1);
+            setCredentials(newCredentials);
+            return;
+        }
+
+        try {
+            await keytar.deletePassword('docker-registry-ui', item.account);
+            await loadItems();
+        } catch (e) {
+            onError(e.toString());
+        }
+    }
+
+    async function handleUpdate(oldCredentials, index, newCredentials) {
+        try {
+            await handleDelete(oldCredentials, index);
+            await keytar.setPassword('docker-registry-ui', newCredentials.account, newCredentials.password);
+            await loadItems();
+        } catch (e) {
+            console.error("Error while updating key: ", e);
+            onError(e.toString());
+        }
+    }
+
+    useEffect(() => {
+        const load = async () => {
+            await loadItems();
+        };
+
+        load();
+        return;
+    }, []);
+
+    if (credentials === null) {
+        return <LinearProgress/>
+    }
+
+    return (
+        <TableContainer component={Paper}>
+            <Table>
+                <TableHead>
+                    <TableRow>
+                        <TableCell>Host of the registry including username</TableCell>
+                        <TableCell>Password</TableCell>
+                        <TableCell align='right'>
+                            <IconButton onClick={() => {
+                                setCredentials([...credentials, null])
+                            }} disabled={credentials.includes(null)}>
+                                <AddIcon/>
+                            </IconButton>
+                        </TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {credentials.map((credential, index) => <CredentialRow
+                        onDelete={handleDelete}
+                        onUpdate={handleUpdate}
+                        index={index}
+                        key={credential?.account || ''}
+                        credential={credential}/>)}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+}
+
+function App() {
+    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+    const [error, setError] = useState();
+    const classes = mainStyle();
+
+    const theme = React.useMemo(
+        () =>
+          createMuiTheme({
+            palette: {
+              type: prefersDarkMode ? 'dark' : 'light',
+              primary: blue,
+            },
+          }),
+        [prefersDarkMode],
+      );
+
+    return (
+        <ThemeProvider theme={theme}>
+            <CssBaseline/>
+            <div className={classes.root}>
+                {error && <Alert severity='error' onClose={() => {
+                    setError(null)
+                }}>
+                    <AlertTitle>Error</AlertTitle>
+                    {error}
+                </Alert>}
+                <main className={classes.main}>
+                    <CredentialsTable onError={setError}/>
+                </main>
+            </div>
+        </ThemeProvider>
+    );
+}
+
+render(<App/>, document.getElementById("root"));
+
+// @ts-ignore
+if (module.hot) {
+    // @ts-ignore
+    module.hot.accept();
+}
+
--- a/examples/electron/doc/assets/authentication.gif
+++ b/examples/electron/doc/assets/authentication.gif
--- a/examples/electron/index.js
+++ b/examples/electron/index.js
@@ -0,0 +1,229 @@
+const {app, BrowserWindow, globalShortcut, Menu} = require('electron');
+const isDevMode = require('electron-is-dev');
+const keytar = require('keytar');
+const url = require('url');
+
+const isMac = process.platform === 'darwin'
+
+// Place holders for our windows so they don't get garbage collected.
+let mainWindow = null;
+
+// Credentials that are fetched from the Keychain
+let credentials = [];
+
+// Credentials helper window
+let credentialsWindow;
+
+const template = [
+    // { role: 'appMenu' }
+    ...(isMac ? [{
+        label: app.name,
+        submenu: [
+            {role: 'about'},
+            {type: 'separator'},
+            {
+                label: 'Preferences', accelerator: 'CmdorCtrl+,', click: () => {
+                    credentialsWindow.show();
+                }
+            },
+            {type: 'separator'},
+            {role: 'hide'},
+            {role: 'hideothers'},
+            {role: 'unhide'},
+            {type: 'separator'},
+            {role: 'quit'}
+        ]
+    }] : []),
+    // { role: 'fileMenu' }
+    {
+        label: 'File',
+        submenu: [
+            ...(isMac ? [] : [{role: 'quit'}]),
+            {
+                label: 'Preferences', accelerator: 'CmdorCtrl+,', click: () => {
+                    credentialsWindow.show();
+                }
+            },
+        ]
+    },
+    // { role: 'editMenu' }
+    {
+        label: 'Edit',
+        submenu: [
+            {role: 'undo'},
+            {role: 'redo'},
+            {type: 'separator'},
+            {role: 'cut'},
+            {role: 'copy'},
+            {role: 'paste'},
+            ...(isMac ? [
+                {role: 'pasteAndMatchStyle'},
+                {role: 'delete'},
+                {role: 'selectAll'},
+                {type: 'separator'},
+                {
+                    label: 'Speech',
+                    submenu: [
+                        {role: 'startspeaking'},
+                        {role: 'stopspeaking'}
+                    ]
+                }
+            ] : [
+                {role: 'delete'},
+                {type: 'separator'},
+                {role: 'selectAll'}
+            ])
+        ]
+    },
+    // { role: 'viewMenu' }
+    {
+        label: 'View',
+        submenu: [
+            {role: 'reload'},
+            {role: 'forcereload'},
+            {role: 'toggledevtools'},
+            {type: 'separator'},
+            {role: 'resetzoom'},
+            {role: 'zoomin'},
+            {role: 'zoomout'},
+            {type: 'separator'},
+            {role: 'togglefullscreen'},
+            {type: 'separator'},
+            {
+                label: 'Credentials Helper', accelerator: 'CmdorCtrl+k', click: () => {
+                    credentialsWindow.show();
+                }
+            },
+        ]
+    },
+    // { role: 'windowMenu' }
+    {
+        label: 'Window',
+        submenu: [
+            {role: 'minimize'},
+            {role: 'zoom'},
+            ...(isMac ? [
+                {type: 'separator'},
+                {role: 'front'},
+                {type: 'separator'},
+                {role: 'window'}
+            ] : [
+                {role: 'close'}
+            ])
+        ]
+    },
+    {
+        role: 'help',
+        submenu: [
+            {
+                label: 'Learn More',
+                click: async () => {
+                    const {shell} = require('electron')
+                    await shell.openExternal('https://joxit.dev/docker-registry-ui/')
+                }
+            }
+        ]
+    }
+];
+
+const menu = Menu.buildFromTemplate(template);
+if (isMac) {
+    Menu.setApplicationMenu(menu);
+}
+
+async function loadCredentials() {
+    try {
+        credentials = await keytar.findCredentials('docker-registry-ui');
+        for (const credential of credentials) {
+            // fix for windows
+            credential.password = credential.password.replace(/\000+/g, '');
+        }
+    } catch (e) {
+        console.log(e);
+        credentials = [];
+    }
+}
+
+async function createWindow() {
+    return new Promise((resolve, reject) => {
+        mainWindow = new BrowserWindow({
+            height: 920,
+            width: 1600,
+            show: false,
+            webPreferences: {
+                nodeIntegration: false,
+            }
+        });
+
+        if (isDevMode) {
+            mainWindow.webContents.openDevTools();
+        }
+
+        if (!isMac) {
+            mainWindow.setMenu(menu);
+        }
+
+        mainWindow.loadURL(`file://${__dirname}/dist/index.html`);
+        mainWindow.webContents.on('dom-ready', () => {
+            console.log("Main Window DOM ready");
+            resolve();
+        });
+    });
+}
+
+async function createCredentialsWindow() {
+    return new Promise((resolve) => {
+        credentialsWindow = new BrowserWindow({
+            width: 1000,
+            height: 400,
+            show: false,
+            title: 'Credential Manager',
+            parent: mainWindow,
+            webPreferences: {
+                nodeIntegration: true,
+            }
+        });
+
+        if (isDevMode) {
+            credentialsWindow.openDevTools();
+        }
+
+        if (!isMac) {
+            credentialsWindow.setMenu(null);
+        }
+
+        credentialsWindow.loadURL(`file://${__dirname}/dist/authentication/index.html`);
+        credentialsWindow.webContents.on('dom-ready', () => {
+            console.log('Credentials Window DOM is ready');
+            resolve();
+        });
+
+        credentialsWindow.on('close', async (e) => {
+            console.log("Closed credential window");
+            credentialsWindow.hide();
+            e.preventDefault();
+            await loadCredentials();
+            mainWindow.reload();
+        });
+    });
+}
+
+app.on('ready', async () => {
+    await Promise.all([
+        loadCredentials(),
+        createWindow(),
+        createCredentialsWindow(),
+    ]);
+    mainWindow.show();
+});
+
+
+app.on("login", (event, contents, authencation, info, callback) => {
+    for (const credential of credentials) {
+        const parsedUrl = url.parse(credential.account);
+        if (parsedUrl.hostname === info.host) {
+            return callback(parsedUrl.auth, credential.password);
+        }
+    }
+    callback();
+});
--- a/examples/electron/package.json
+++ b/examples/electron/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "docker-registry-ui",
+  "version": "1.4.8",
+  "productName": "Registry UI",
+  "description": "Electron Application for Docker Registry UI",
+  "main": "index.js",
+  "scripts": {
+    "start": "electron ./",
+    "start:dev": "parcel serve -d dist/authentication -t electron --public-url ./ authentication/index.html",
+    "build": "parcel build -d dist/authentication -t electron --public-url ./ authentication/index.html",
+    "rebuild": "electron-rebuild -f -w keytar",
+    "package": "electron-packager --overwrite .",
+    "sync": "copyfiles ../../dist/* ../../dist/**/* ./examples/out",
+    "dist": "npm run rebuild && npm run sync && npm run build && npm run package"
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.9.13",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.52",
+    "electron-is-dev": "^1.1.0",
+    "keytar": "^5.6.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "copyfiles": "^2.2.0",
+    "electron": "^8.0.0",
+    "electron-builder": "^22.6.0",
+    "electron-packager": "^14.2.1",
+    "electron-rebuild": "^1.10.1",
+    "parcel-bundler": "^1.12.4",
+    "typescript": "^3.8.3"
+  },
+  "keywords": [
+    "electron"
+  ],
+  "author": "",
+  "license": "AGPL-3.0"
+}
--- a/examples/helm/docker-registry-ui/values.yaml
+++ b/examples/helm/docker-registry-ui/values.yaml
@@ -63,7 +63,7 @@ registry:
  image:
    registry: docker.io
    repository: registry
-    tag: 2.6.2
+    tag: 2.7.1
    pullPolicy: Always
  probe:
    liveness: true
--- a/examples/issue-116/docker-compose.yml
+++ b/examples/issue-116/docker-compose.yml
@@ -0,0 +1,42 @@
+version: '2'
+
+services:
+  registry-srv:
+    image: registry:2.7
+    restart: always
+    volumes:
+      - storage:/var/lib/registry
+      - ./htpasswd:/etc/docker/registry/htpasswd
+    ports:
+      - 5000:5000
+    environment:
+      - REGISTRY_HTTP_HEADERS_X-Content-Type-Options=[nosniff]
+      - REGISTRY_HTTP_HEADERS_Access-Control-Allow-Origin=['http://localhost']
+      - REGISTRY_HTTP_HEADERS_Access-Control-Allow-Methods=['HEAD', 'GET', 'OPTIONS', 'DELETE']
+      - REGISTRY_HTTP_HEADERS_Access-Control-Allow-Headers=['Authorization']
+      - REGISTRY_HTTP_HEADERS_Access-Control-Expose-Headers=['Docker-Content-Digest']
+      - REGISTRY_HTTP_HEADERS_Access-Control-Allow-Credentials=['true']
+      - REGISTRY_AUTH_HTPASSWD_REALM=basic-realm
+      - REGISTRY_AUTH_HTPASSWD_PATH=/etc/docker/registry/htpasswd
+      - REGISTRY_STORAGE_DELETE_ENABLED=true
+    networks:
+      - registry-ui-net
+    container_name: registry-srv
+
+  registry-ui:
+    image: joxit/docker-registry-ui:static
+    restart: always
+    ports:
+      - 80:80
+    environment:
+      - REGISTRY_TITLE=Private Docker Registry
+      - URL=http://localhost:5000
+      - DELETE_IMAGES=true
+    container_name: registry-ui
+
+networks:
+    registry-ui-net:
+
+volumes:
+    storage:
+      driver: local
--- a/examples/issue-116/htpasswd
+++ b/examples/issue-116/htpasswd
@@ -0,0 +1,3 @@
+# login: registry
+# password: ui
+registry:$2y$11$1bmuJLK8HrQl5ACS/WeqRuJLUArUZfUcP2R23asmozEpfN76.pCHy
--- a/examples/issue-20/docker-compose.yml
+++ b/examples/issue-20/docker-compose.yml
@@ -1,7 +1,7 @@
 version: '2.0'
 services:
  registry:
-    image: registry:2.6.2
+    image: registry:2.7
    volumes:
      - ./registry-data:/var/lib/registry
    networks:
--- a/examples/issue-73/docker-compose.yml
+++ b/examples/issue-73/docker-compose.yml
@@ -1,7 +1,7 @@
 version: '2.0'
 services:
  registry:
-    image: registry:2.6.2
+    image: registry:2.7
    volumes:
      - ./registry-data:/var/lib/registry
    networks:
--- a/examples/issue-75/registry-config/config.yml
+++ b/examples/issue-75/registry-config/config.yml
@@ -28,7 +28,7 @@ http:
    X-Content-Type-Options: [nosniff]
    Access-Control-Allow-Origin: ['http://127.0.0.1']
    Access-Control-Allow-Methods: ['HEAD', 'GET', 'OPTIONS', 'DELETE']
-    Access-Control-Allow-Headers: ['Authorization']
+    Access-Control-Allow-Headers: ['Authorization', 'Accept']
    Access-Control-Max-Age: [1728000]
    Access-Control-Allow-Credentials: [true]
    Access-Control-Expose-Headers: ['Docker-Content-Digest']
--- a/examples/issue-88/config.yml
+++ b/examples/issue-88/config.yml
@@ -15,6 +15,7 @@ http:
    X-Content-Type-Options: [nosniff]
    Access-Control-Allow-Origin: ['*']
    Access-Control-Allow-Methods: ['HEAD', 'GET', 'OPTIONS', 'DELETE']
+    Access-Control-Allow-Headers: ['Accept']
    Access-Control-Expose-Headers: ['Docker-Content-Digest']
 health:
  storagedriver:
--- a/examples/issue-88/docker-compose.yml
+++ b/examples/issue-88/docker-compose.yml
@@ -2,7 +2,7 @@ version: '2'

 services:
  registry-srv:
-    image: registry:latest
+    image: registry:2.7
    restart: always
    volumes:
      - storage:/var/lib/registry
@@ -20,8 +20,6 @@ services:
      - REGISTRY_TITLE=Private Docker Registry
      - REGISTRY_URL=http://registry-srv:5000
      - DELETE_IMAGES=true
-    depends_on:
-      - debugproxy
    networks:
      - registry-ui-net
    container_name: registry-ui
--- a/examples/kubernetes/registry-configmap.yaml
+++ b/examples/kubernetes/registry-configmap.yaml
@@ -25,7 +25,7 @@ data:
        X-Content-Type-Options: [nosniff]
        Access-Control-Allow-Origin: ['*']
        Access-Control-Allow-Methods: ['HEAD', 'GET', 'OPTIONS', 'DELETE']
-        Access-Control-Allow-Headers: ['Authorization']
+        Access-Control-Allow-Headers: ['Authorization', 'Accept']
        Access-Control-Max-Age: [1728000]
        Access-Control-Allow-Credentials: [true]
        Access-Control-Expose-Headers: ['Docker-Content-Digest']
--- a/examples/kubernetes/registry-deployment.yaml
+++ b/examples/kubernetes/registry-deployment.yaml
@@ -28,7 +28,7 @@ spec:
            claimName: docker-registry
      containers:
        - name: registry
-          image: "docker.io/registry:2.6.2"
+          image: "docker.io/registry:2.7"
          imagePullPolicy: Always
          ports:
            - name: registry
--- a/examples/populate-registry
+++ b/examples/populate-registry
@@ -0,0 +1,9 @@
+#!/bin/sh
+
+REGISTRY="${1:-localhost:5000}"
+
+for image in alpine:latest alpine:edge alpine:3.11 alpine:3.10 alpine:3.9; do
+  docker pull $image
+  docker tag $image $REGISTRY/$image
+  docker push $REGISTRY/$image
+done
--- a/examples/proxy-headers/registry-config/credentials.yml
+++ b/examples/proxy-headers/registry-config/credentials.yml
@@ -15,7 +15,7 @@ http:
    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-Allow-Headers: ['Authorization', 'Accept']
    Access-Control-Max-Age: [1728000]
    Access-Control-Allow-Credentials: [true]
    Access-Control-Expose-Headers: ['Docker-Content-Digest']
--- a/examples/traefik/docker-compose-swarm.yml
+++ b/examples/traefik/docker-compose-swarm.yml
@@ -1,7 +1,7 @@
 version: '3.1'
 services:
    registry:
-        image: registry:2.6.2
+        image: registry:2.7
        volumes:
            - /opt/docker-registry:/var/lib/registry
        environment:
--- a/examples/ui-as-proxy/credentials.yml
+++ b/examples/ui-as-proxy/credentials.yml
@@ -1,7 +1,7 @@
 version: '2.0'
 services:
  registry:
-    image: registry:2.6.2
+    image: registry:2.7
    volumes:
      - ./registry-data:/var/lib/registry
      - ./registry-config/credentials.yml:/etc/docker/registry/config.yml
--- a/examples/ui-as-proxy/registry-config/credentials.yml
+++ b/examples/ui-as-proxy/registry-config/credentials.yml
@@ -15,7 +15,7 @@ http:
    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-Allow-Headers: ['Authorization', 'Accept']
    Access-Control-Max-Age: [1728000]
    Access-Control-Allow-Credentials: [true]
    Access-Control-Expose-Headers: ['Docker-Content-Digest']
--- a/examples/ui-as-proxy/simple.yml
+++ b/examples/ui-as-proxy/simple.yml
@@ -1,7 +1,7 @@
 version: '2.0'
 services:
  registry:
-    image: registry:2.6.2
+    image: registry:2.7
    volumes:
      - ./registry-data:/var/lib/registry
    networks:
--- a/examples/ui-as-standalone/credentials.yml
+++ b/examples/ui-as-standalone/credentials.yml
@@ -1,7 +1,7 @@
 version: '2.0'
 services:
  registry:
-    image: registry:2.6.2
+    image: registry:2.7
    ports:
      - 5000:5000
    volumes:
--- a/examples/ui-as-standalone/registry-config/credentials.yml
+++ b/examples/ui-as-standalone/registry-config/credentials.yml
@@ -15,7 +15,7 @@ http:
    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-Allow-Headers: ['Authorization', 'Accept']
    Access-Control-Max-Age: [1728000]
    Access-Control-Allow-Credentials: [true]
    Access-Control-Expose-Headers: ['Docker-Content-Digest']
--- a/examples/ui-as-standalone/registry-config/simple.yml
+++ b/examples/ui-as-standalone/registry-config/simple.yml
@@ -15,7 +15,7 @@ http:
    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-Allow-Headers: ['Authorization', 'Accept']
    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
@@ -1,7 +1,7 @@
 version: '2.0'
 services:
  registry:
-    image: registry:2.6.2
+    image: registry:2.7
    ports:
      - 5000:5000
    volumes:
--- a/package.json
+++ b/package.json
@@ -1,8 +1,9 @@
 {
  "name": "docker-registry-ui",
-  "version": "1.4.2",
+  "version": "1.5.0",
  "scripts": {
-    "build": "./node_modules/gulp/bin/gulp.js build"
+    "build": "./node_modules/gulp/bin/gulp.js build",
+    "build:electron": "npm run build && cd examples/electron && npm install && npm run dist"
  },
  "repository": {
    "type": "git",
--- a/src/scripts/http.js
+++ b/src/scripts/http.js
@@ -65,6 +65,7 @@ Http.prototype.addEventListener = function(e, f) {
            req.withCredentials = true;
            req.hasHeader = Http.hasHeader;
            req.getErrorMessage = Http.getErrorMessage;
+            self.oReq = req;
            req.send();
          } else {
            f.bind(this)();
--- a/src/scripts/script.js
+++ b/src/scripts/script.js
@@ -17,6 +17,8 @@
 var registryUI = {}
 registryUI.URL_QUERY_PARAM_REGEX = /[&?]url=/;
 registryUI.URL_PARAM_REGEX = /^url=/;
+registryUI.showContentDigest = true;
+registryUI.catalogElementsLimit = 100000;

 registryUI.url = function(byPassQueryParam) {
  if (!registryUI._url) {
--- a/src/scripts/static.js
+++ b/src/scripts/static.js
@@ -33,6 +33,8 @@ registryUI.name = function() {
 };
 registryUI.pullUrl = '${PULL_URL}';
 registryUI.isImageRemoveActivated = true;
+registryUI.showContentDigest = true;
+registryUI.catalogElementsLimit = 100000;
 registryUI.catalog = {};
 registryUI.taglist = {};
 registryUI.taghistory = {};
--- a/src/scripts/utils.js
+++ b/src/scripts/utils.js
@@ -119,3 +119,9 @@ registryUI.stripHttps = function (url) {
  }
  return url.replace(/^https?:\/\//, '');
 };
+
+registryUI.eventTransfer = function(from, to) {
+  from.on('*', function(event, param) {
+    to.trigger(event, param);
+  })
+}
--- a/src/style.css
+++ b/src/style.css
@@ -48,7 +48,7 @@ main {
  font-weight: inherit;
 }

-material-card, pagination .conatianer {
+material-card, material-tabs, pagination .conatianer {
  max-width: 95%;
  margin: auto;
  margin-top: 20px;
@@ -68,11 +68,34 @@ pagination .conatianer .pagination-centered {

 /* 1515px * 0.95 = 1440px */
@media screen and (min-width: 1515px){
-  material-card, pagination .conatianer {
+  material-card, material-tabs, pagination .conatianer {
    max-width: 1440px;
  }
 }

+material-tabs {
+  display: block;
+  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
+  -ms-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+  -o-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
+}
+
+material-tabs material-button,
+material-tabs material-button .content .text {
+  background-color: #fff;
+  color: #aaa;
+  text-transform: none;
+}
+
+material-tabs .line-wrapper .line {
+  background-color: #25313b;
+}
+material-tabs material-button.selected .content .text {
+  color: #25313b;
+}
+
 material-spinner {
  align-self: center;
 }
@@ -282,6 +305,11 @@ material-button .content i.material-icons,
  color: #777;
 }

+material-button[disabled] .content i.material-icons,
+material-checkbox[disabled] .content i.material-icons {
+  color: #bbb;
+}
+
 material-snackbar .toast {
  height: auto;
 }
@@ -371,6 +399,10 @@ footer {
  }
 }

+material-footer {
+  padding: 0.5em 1em;
+}
+
@media screen and (min-width: 760px) and (max-height: 750px) {
  main {
    min-height: calc(100% - 144px - 2.5em);
@@ -437,6 +469,14 @@ image-content-digest {
  padding: 7px 5px;
 }

+taglist .creation-date {
+  width: 10em;
+}
+
+taglist .image-size {
+  width: 7em;
+}
+
 catalog material-card,
 tag-history material-card {
  min-height: auto;
@@ -457,6 +497,7 @@ tag-history-element {
  display: block;
  padding: 20px;
  min-width: 100px;
+  min-height: 3em;
  width: 420px;
  float: left;
  overflow-x: auto;
@@ -511,8 +552,14 @@ catalog-element catalog-element.hide material-card {
  opacity: 0;
 }

-catalog-element catalog-element .list > span i.material-icons {
-  margin-right: 48px;
+catalog-element catalog-element > .content {
+  margin-left: 3em;
+}
+
+@media screen and (min-width: 1515px){
+  catalog-element catalog-element > .content material-card {
+    max-width: calc(1440px - 3em);
+  }
 }

 remove-image {
--- a/src/tags/app.tag
+++ b/src/tags/app.tag
@@ -118,9 +118,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
      return char >= '0' && char <= '9';
    };

-    registryUI.DockerImage = function(name, tag) {
+    registryUI.DockerImage = function(name, tag, list) {
      this.name = name;
      this.tag = tag;
+      this.list = list;
      this.chars = 0;
      riot.observable(this);
      this.on('get-size', function() {
@@ -192,6 +193,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
      oReq.addEventListener('loadend', function() {
        if (this.status == 200 || this.status == 202) {
          const response = JSON.parse(this.responseText);
+          if (response.mediaType === 'application/vnd.docker.distribution.manifest.list.v2+json') {
+            self.trigger('list', response);
+            const manifest = response.manifests[0];
+            const image = new registryUI.DockerImage(self.name, manifest.digest)
+            registryUI.eventTransfer(image, self)
+            image.fillInfo()
+            self.variants = [image];
+            return;
+          }
          self.size = response.layers.reduce(function(acc, e) {
            return acc + e.size;
          }, 0);
@@ -202,6 +212,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
          oReq.getContentDigest(function (digest) {
            self.digest = digest;
            self.trigger('content-digest', digest);
+            if (!digest) {
+              registryUI.showErrorCanNotReadContentDigest();
+            }
          });
          self.getBlobs(response.config.digest)
        } else if (this.status == 404) {
@@ -211,7 +224,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
        }
      });
      oReq.open('GET', registryUI.url() + '/v2/' + self.name + '/manifests/' + self.tag);
-      oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json, application/vnd.oci.image.manifest.v1+json');
+      oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json, application/vnd.oci.image.manifest.v1+json' 
+        + (self.list ? ', application/vnd.docker.distribution.manifest.list.v2+json' : ''));
      oReq.send();
    };

--- a/src/tags/catalog-element.tag
+++ b/src/tags/catalog-element.tag
@@ -16,18 +16,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <catalog-element>
  <!-- Begin of tag -->
-  <material-card class="list highlight" item="{item}" expanded="{expanded}">
-    <material-waves onmousedown="{launch}" center="true" color="#ddd" />
-    <span>
-      <i class="material-icons">send</i>
-      { typeof opts.item === "string" ? opts.item : opts.item.repo }
-      <div if="{typeof opts.item !== "string"}" class="item-count right">
-        { opts.item.images && opts.item.images.length } images
-        <i class="material-icons animated {expanded: opts.expanded}">expand_more</i>
-      </div>
-    </span>
-  </material-card>
-  <catalog-element if="{typeof opts.item !== "string"}" class="animated {hide: !expanded, expanding: expanding}" each="{item in item.images}" />
+  <div class="content">
+    <material-card class="list highlight" item="{item}" expanded="{expanded}">
+      <material-waves onmousedown="{launch}" center="true" color="#ddd" />
+      <span>
+        <i class="material-icons">send</i>
+        { typeof opts.item === "string" ? opts.item : opts.item.repo }
+        <div if="{typeof opts.item !== "string"}" class="item-count right">
+          { opts.item.images && opts.item.images.length } images
+          <i class="material-icons animated {expanded: opts.expanded}">expand_more</i>
+        </div>
+      </span>
+    </material-card>
+    <catalog-element if="{typeof opts.item !== "string"}" class="animated {hide: !expanded, expanding: expanding}" each="{item in item.images}" />
+  </div>
  <script>
    this.on('mount', function() {
      const self = this;
--- a/src/tags/catalog.tag
+++ b/src/tags/catalog.tag
@@ -68,7 +68,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
        registryUI.catalog.loadend = true;
        registryUI.catalog.instance.update();
      });
-      oReq.open('GET', registryUI.url() + '/v2/_catalog?n=100000');
+      oReq.open('GET', registryUI.url() + '/v2/_catalog?n=' + registryUI.catalogElementsLimit);
      oReq.send();
    };
    registryUI.catalog.display();
--- a/src/tags/image-content-digest.tag
+++ b/src/tags/image-content-digest.tag
@@ -28,7 +28,7 @@
        if (chars >= 70) {
            self.display_id = self.digest;
            self.title = '';
-        } else if (chars === 0) {
+        } else if (chars <= 0) {
            self.display_id = '';
            self.title = self.digest;
        } else {
--- a/src/tags/remove-image.tag
+++ b/src/tags/remove-image.tag
@@ -15,10 +15,10 @@ 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/>.
 -->
 <remove-image>
-  <material-button waves-center="true" rounded="true" waves-color="#ddd" title="This will delete the image." if="{ !opts.multiDelete }">
+  <material-button waves-center="true" rounded="true" waves-color="#ddd" title="This will delete the image." if="{ !opts.multiDelete }" disabled="{ !this.digest }">
    <i class="material-icons">delete</i>
  </material-button>
-  <material-checkbox if="{ opts.multiDelete }" title="Select this tag to delete it."></material-checkbox>
+  <material-checkbox if="{ opts.multiDelete }" title="Select this tag to delete it." disabled="{ !this.digest }"></material-checkbox>
  <script type="text/javascript">
    const self = this;

@@ -29,13 +29,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
      if (self.multiDelete == self.opts.multiDelete) {
        return;
      }
-      if (this.tags['material-button']) {
-        this.delete = this.tags['material-button'].root.onclick = function(ignoreError) {
+      if (self.tags['material-button']) {
+        self.delete = function(ignoreError) {
          const name = self.opts.image.name;
          const tag = self.opts.image.tag;
          registryUI.taglist.go(name);
          if (!self.digest) {
-            registryUI.showErrorCanNotReadContentDigest();
+            registryUI.snackbar('Information for ' + name + ':' + tag + ' are not yet loaded.');
            return;
          }
          const oReq = new Http();
@@ -44,7 +44,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
              registryUI.taglist.display()
              registryUI.snackbar('Deleting ' + name + ':' + tag + ' image. Run `registry garbage-collect config.yml` on your registry');
            } else if (this.status == 404) {
-              ignoreError || registryUI.errorSnackbar('Digest not found');
+              ignoreError || registryUI.errorSnackbar('Digest not found for this image in your registry.');
            } else {
              registryUI.snackbar(this.responseText);
            }
@@ -56,13 +56,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
          });
          oReq.send();
        };
+        self.tags['material-button'].root.onclick = function() {
+          self.delete();
+        }
      }

-      if (this.tags['material-checkbox']) {
-        if (!this.opts.multiDelete && this.tags['material-checkbox'].checked) {
-          this.tags['material-checkbox'].toggle();
+      if (self.tags['material-checkbox']) {
+        if (!self.opts.multiDelete && self.tags['material-checkbox'].checked) {
+          self.tags['material-checkbox'].toggle();
        }
-        this.tags['material-checkbox'].on('toggle', function() {
+        self.tags['material-checkbox'].on('toggle', function() {
          registryUI.taglist.instance.trigger('toggle-remove-image', this.checked);
        });
      }
@@ -71,6 +74,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.

    opts.image.one('content-digest', function(digest) {
      self.digest = digest;
+      self.update();
    });
    opts.image.trigger('get-content-digest');
  </script>
--- a/src/tags/tag-history-button.tag
+++ b/src/tags/tag-history-button.tag
@@ -22,7 +22,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
  this.on('mount', function() {
    const self = this;
    this.refs.button.root.onclick = function() {
-      registryUI.taghistory._image = self.opts.image;
      registryUI.taghistory.go(self.opts.image.name, self.opts.image.tag);
    };
  });
--- a/src/tags/tag-history.tag
+++ b/src/tags/tag-history.tag
@@ -26,46 +26,48 @@ 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 />
  </div>

+  <material-tabs if="{ this.archs }" useLine="true" tabs="{ this.archs }" tabchanged="{ this.tabchanged }" />
+
  <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>
  <script type="text/javascript">
    const self = this;
-    const eltIdx = function(e) {
+    const eltIdx = function (e) {
      switch (e) {
-        case 'id': return 1;
-        case 'created': return 2;
-        case 'created_by': return 3;
-        case 'size': return 4;
-        case 'os': return 5;
-        case 'architecture': return 6;
+        case 'created': return 1;
+        case 'created_by': return 2;
+        case 'size': return 3;
+        case 'os': return 4;
+        case 'architecture': return 5;
+        case 'id': return 6;
        case 'linux': return 7;
        case 'docker_version': return 8;
        default: return 10;
      }
    };

-    const eltSort = function(e1, e2) {
+    const eltSort = function (e1, e2) {
      return eltIdx(e1.key) - eltIdx(e2.key);
    };

-    const modifySpecificAttributeTypes = function(attribute, value) {
+    const modifySpecificAttributeTypes = function (attribute, value) {
      switch (attribute) {
        case 'created':
          return new Date(value).toLocaleString();
        case 'created_by':
          const cmd = value.match(/\/bin\/sh *-c *#\(nop\) *([A-Z]+)/);
-          return (cmd && cmd [1]) || 'RUN'
+          return (cmd && cmd[1]) || 'RUN'
        case 'size':
          return registryUI.bytesToSize(value);
        case 'Entrypoint':
        case 'Cmd':
          return (value || []).join(' ');
        case 'Labels':
-          return Object.keys(value || {}).map(function(elt) {
+          return Object.keys(value || {}).map(function (elt) {
            return value[elt] ? elt + '=' + value[elt] : '';
          });
        case 'Volumes':
@@ -75,14 +77,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
      return value || '';
    };

-    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 value = blobs[e] || blobs.config[e];
-        if (value) {
-          acc[e] = value;
-        }
-        return acc;
-      }, {});
+    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 value = blobs[e] || blobs.config[e];
+          if (value && e === 'architecture' && blobs.variant) {
+            acc[e] = value + blobs.variant;
+          } else if (value) {
+            acc[e] = value;
+          }
+          return acc;
+        }, {});

      if (!res.author && (res.Labels && res.Labels.maintainer)) {
        res.author = blobs.config.Labels.maintainer;
@@ -92,7 +97,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
      return res;
    };

-    const processBlobs = function(blobs) {
+    const processBlobs = function (blobs) {
      function exec(elt) {
        const guiElements = [];
        for (var attribute in elt) {
@@ -107,27 +112,44 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
        }
        return guiElements.sort(eltSort);
      }
-
-      self.elements.push(exec(getConfig(blobs)));
-      blobs.history.reverse().forEach(function(elt) { self.elements.push(exec(elt)) });
+      self.elements = new Array(blobs.history.length + 1);
+      self.elements[0] = exec(getConfig(blobs));
+      blobs.history.forEach(function (elt, i) { self.elements[blobs.history.length - i] = exec(elt) });
      registryUI.taghistory.loadend = true;
      self.update();
    };

-    registryUI.taghistory.display = function() {
-      self.elements = []
-      const blobs = registryUI.taghistory._image && registryUI.taghistory._image.blobs;
-      if (blobs) {
-        window.scrollTo(0, 0);
-        return processBlobs(blobs);
-      }
-      const image = new registryUI.DockerImage(registryUI.taghistory.image, registryUI.taghistory.tag);
-      image.fillInfo()
-      image.on('blobs', processBlobs);
+    const multiArchList = function (manifests) {
+      manifests = manifests.manifests || manifests;
+      self.archs = manifests.map(function (manifest) {
+        return {
+          title: manifest.platform.os + '/' + manifest.platform.architecture + (manifest.platform.variant ? manifest.platform.variant : ''),
+          digest: manifest.digest
+        }
+      })
+      self.update();
    };

-    this.on('mount', function() {
-      self.refs['tag-history-tag'].tags['material-button'].root.onclick = function() {
+    self.tabchanged = function (arch, idx) {
+      self.elements = []
+      self.image.variants[idx] = self.image.variants[idx] || new registryUI.DockerImage(registryUI.taghistory.image, arch.digest);
+      if (self.image.variants[idx].blobs) {
+        return processBlobs(self.image.variants[idx].blobs);
+      }
+      self.image.variants[idx].fillInfo();
+      self.image.variants[idx].on('blobs', processBlobs);
+    };
+
+    registryUI.taghistory.display = function () {
+      self.elements = []
+      self.image = new registryUI.DockerImage(registryUI.taghistory.image, registryUI.taghistory.tag, true);
+      self.image.fillInfo()
+      self.image.on('blobs', processBlobs);
+      self.image.on('list', multiArchList)
+    };
+
+    this.on('mount', function () {
+      self.refs['tag-history-tag'].tags['material-button'].root.onclick = function () {
        registryUI.taglist.go(registryUI.taghistory.image);
      };
    });
--- a/src/tags/taglist.tag
+++ b/src/tags/taglist.tag
@@ -41,9 +41,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
    <table show="{ registryUI.taglist.loadend }" style="border: none;">
      <thead>
      <tr>
-        <th>Creation date</th>
-        <th>Size</th>
-        <th id="image-content-digest-header">Content Digest</th>
+        <th class="creation-date">Creation date</th>
+        <th class="image-size">Size</th>
+        <th id="image-content-digest-header" if="{ registryUI.showContentDigest }">Content Digest</th>

        <th
        id="image-tag-header"
@@ -60,13 +60,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
      </thead>
      <tbody>
      <tr each="{ image in this.opts.tags }">
-        <td>
+        <td class="creation-date">
          <image-date image="{ image }"/>
        </td>
-        <td>
+        <td class="image-size">
          <image-size image="{ image }"/>
        </td>
-        <td>
+        <td if="{ registryUI.showContentDigest }">
          <image-content-digest image="{ image }"/>
          <copy-to-clipboard target="digest" image={ image }/>
        </td>
@@ -93,6 +93,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
      // window.innerWidth is a blocking access, cache its result.
      const innerWidth = window.innerWidth;
      var chars = 0;
+      var max = registryUI.taglist.tags.reduce(function(acc, e) {
+        return e.tag.length > acc ? e.tag.length : acc;
+      }, 0);
      if (innerWidth >= 1440) {
        chars = 71;
      } else if (innerWidth < 1024) {
@@ -101,6 +104,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
        // SHA256:12345678 + scaled between 1024 and 1440px
        chars = 15 + 56 * ((innerWidth - 1024) / 416);
      }
+      if (max > 20) chars -= (max - 20);
      registryUI.taglist.tags.map(function (image) {
        image.trigger('content-digest-chars', chars);
      });
@@ -153,8 +157,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
      return images;
    };

-    registryUI.taglist.bulkDelete = function() {
+    registryUI.taglist.bulkDelete = function(e) {
      if (self.multiDelete && self.toDelete > 0) {
+        if (e.altKey) {
+          self._getRemoveImageTags()
+            .filter(function(img) { return img.tags['material-checkbox'].checked; })
+            .forEach(function(img) { img.tags['material-checkbox'].toggle() });
+        }
        self._getRemoveImageTags().filter(function(img) {
          return img.tags['material-checkbox'].checked;
        }).forEach(function(img) {
@@ -170,6 +179,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
      checkbox._toggle = checkbox.toggle;
      checkbox.toggle = function(e) {
        if (e.altKey) {
+          if (!this.checked) { this._toggle(); }
          self._getRemoveImageTags()
            .filter(function(img) { return !img.tags['material-checkbox'].checked; })
            .forEach(function(img) { img.tags['material-checkbox'].toggle() });
Author	SHA1	Message	Date
Joxit	be813e6617	build: release 1.5.0 supports for multi-arch images	2020-06-21 23:39:05 +02:00
Murad	b4e6369a71	Update values.yaml (#135 )	2020-06-12 08:58:15 +02:00
Joxit	c9ede6fe61	fix(multi-arch): wrong history order when we use multi-arch tabs many times no arch when the landing page is not tag history reorder history elements	2020-06-11 00:07:08 +02:00
Joxit	656914f0d7	feat(multi-arch): add behaviour on tab change and fill content	2020-06-10 09:18:29 +02:00
Joxit	f8c5010fd1	feat(multi-arch): add header for list and fill history with the first arch	2020-06-09 19:47:09 +02:00
Joxit	42f19fcef7	feat(multi-arch): add tab for multi arch in history page	2020-06-07 22:52:30 +02:00
Joxit	f9620639bf	build: release 1.4.9 new options `SHOW_CONTENT_DIGEST` and `CATALOG_ELEMENTS_LIMIT` Improve view for very long tags in taglist	2020-06-01 12:31:48 +02:00
Joxit	d1700ccf74	chore: update README for new option `CATALOG_ELEMENTS_LIMIT`	2020-05-31 01:19:18 +02:00
Joxit	991eaf932d	feat: add content element limit closes: #127	2020-05-31 01:18:55 +02:00
Joxit	e2ee319d4a	chore: update readme for `SHOW_CONTENT_DIGEST`	2020-05-31 01:07:17 +02:00
Joxit	06d6293e79	feat: reduce the sha hash size when the tag is too long	2020-05-31 01:07:17 +02:00
Joxit	00fe443a7c	feat: Hide SHA-Hash column closes #126	2020-05-31 01:07:17 +02:00
Joxit	6e7fc1508e	Add CORS alternative solution in README	2020-05-18 23:08:52 +02:00
Joxit	178cd5a59d	chore: move electron to examples folder	2020-05-11 11:13:07 +02:00
Manuel Leitold	da9591609e	Add Electron-based Standalone Application (#129 ) * add electron app * add some readme * add more documentation * add a password fix for windows * format code * overwrite existing dists * build app first before building electron app * add authentication * add build * use material ui for credentials * add application bar * open dev tools only in dev mode * cleanup code * disable add button if a new item is added * do not always create credentials helper - create it once * improve add button * do not make credential helper modal * use dark mode if user prefers it * disable menubar in credentials window * clean up package json * show windows first when all DOMs are loaded * remove save button * write documentation * load credentials after credentials helper is closed * execute npm install first * add gif animation for the credential helper	2020-05-11 10:57:10 +02:00
Joxit	f0a40d6087	fix(catalog): indent aggregated entries on large screen was wrong	2020-02-02 15:59:25 +01:00
Joxit	01d8bcfccd	feat(footer): reduce footer size	2020-02-02 15:16:47 +01:00
Joxit	c60c2f3e95	feat(catalog): indent aggregated entries differently resolves #121	2020-02-01 23:45:16 +01:00
Joxit	241ee0fd13	fix(delete): alt+click every time with better messages when no digest fixes #120	2020-01-28 23:03:08 +01:00
Joxit	2e915a82b1	fix(delete): fix bug introduced in 1.4.3 resolves #119	2020-01-27 00:17:36 +01:00
Joxit	e3d592ac65	fix: UI showing same sha256 content digest for all tags when using credentials resolves #116	2020-01-26 12:25:56 +01:00
Joxit	531f9400a0	chore: add example for #116	2020-01-26 12:00:22 +01:00
Joxit	d7f6cd7e1a	chore: update readme for delete issue from #104	2020-01-25 00:37:00 +01:00
Joxit	8524c0d18b	fix(delete): update the message and wrap the delete function for onclick	2020-01-20 00:11:45 +01:00