ci(1.5.3): push latest tag instead of master in releases and remove multi stage build in favor of GH CI

close #169

.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..]
 

.github/workflows/main.yml

@@ -0,0 +1,44 @@
+name: Build and pus master/main docker images
+
+on:
+  push:
+    branches: [ master, main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Install dependencies
+      run: npm install
+    - name: Build the interface
+      run: npm run build
+    - uses: actions/checkout@v2
+    - name: Set up QEMU
+      uses: docker/setup-qemu-action@v1
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v1
+    - name: Login to DockerHub
+      uses: docker/login-action@v1
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_TOKEN }}
+    - name: Build and push Standard Version
+      uses: docker/build-push-action@v2
+      with:
+        context: .
+        file: ./Dockerfile
+        platforms: linux/386,linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64,linux/ppc64le,linux/s390x
+        push: true
+        tags: |
+          joxit/docker-registry-ui:master
+          joxit/docker-registry-ui:main
+    - name: Build and push Static Version
+      uses: docker/build-push-action@v2
+      with:
+        context: .
+        file: ./static.dockerfile
+        platforms: linux/386,linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64,linux/ppc64le,linux/s390x
+        push: true
+        tags: |
+          joxit/docker-registry-ui:master-static
+          joxit/docker-registry-ui:main-static

.github/workflows/release.yml

@@ -0,0 +1,64 @@
+name: Release
+
+on:
+  push:
+    tags: '*'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
+    - name: Install dependencies
+      run: npm install
+    - name: Build the interface
+      run: npm run build
+    - name: Current tag
+      id: current-tag
+      run: echo "::set-output name=tag::$(git describe --tags | grep -o '^[0-9]*\.[0-9]*')"
+    - name: Download kokai
+      run: curl -sSL https://github.com/Joxit/kokai/releases/download/$(curl -sSL https://api.github.com/repos/Joxit/kokai/releases/latest | jq -r ".tag_name")/kokai-linux-x86_64 > kokai
+    - name: Create Release Note
+      run: chmod +x kokai && ./kokai release --ref ${{ github.ref }} --tag-from-ref . > RELEASE_NOTE.md
+    - name: Create Release
+      id: create_release
+      uses: actions/create-release@v1
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        tag_name: ${{ github.ref }}
+        release_name: Release ${{ github.ref }}
+        body_path: RELEASE_NOTE.md
+        draft: false
+        prerelease: false
+    - name: Set up QEMU
+      uses: docker/setup-qemu-action@v1
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v1
+    - name: Login to DockerHub
+      uses: docker/login-action@v1
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_TOKEN }}
+    - name: Build and push Standard Version
+      uses: docker/build-push-action@v2
+      with:
+        context: .
+        file: ./Dockerfile
+        platforms: linux/386,linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64,linux/ppc64le,linux/s390x
+        push: true
+        tags: |
+          joxit/docker-registry-ui:latest
+          joxit/docker-registry-ui:${{steps.current-tag.outputs.tag}}
+    - name: Build and push Static version
+      uses: docker/build-push-action@v2
+      with:
+        context: .
+        file: ./static.dockerfile
+        platforms: linux/386,linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64,linux/ppc64le,linux/s390x
+        push: true
+        tags: |
+          joxit/docker-registry-ui:static
+          joxit/docker-registry-ui:${{steps.current-tag.outputs.tag}}-static

.gitignore

@@ -3,4 +3,5 @@ node_modules
 package-lock.json
 registry-data
 .idea
-_site
+_site
+*.orig

CONTRIBUTORS.md

@@ -11,6 +11,10 @@
 - 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)
+- Giacomo Mazzamuto [@gmazzamuto](https://github.com/gmazzamuto)
+- Joe Bureau [@jabstone](https://github.com/jabstone)
 
 ## Because committers are not the only contributors
 
@@ -24,6 +28,10 @@
 - [@wuyue92tree](https://github.com/wuyue92tree)
 - Giovanni Toraldo [@gionn](https://github.com/gionn)
 - [@marcusblake](https://github.com/marcusblake)
-- Dario [@pidario](https://github.com/pidario)
+- Dario Piombo [@pidario](https://github.com/pidario)
 - Jernej K. [@Cvetk0](https://github.com/Cvetk0)
-- Cristian Posoiu [@cr1st1p](https://github.com/cr1st1p)
+- 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)
+- 三十文 [@xfduan](https://github.com/xfduan)

Dockerfile

@@ -12,22 +12,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/>.
-FROM node:10-alpine AS builder
-
-WORKDIR /usr/app
-
-COPY package.json .
-
-RUN yarn install
-
-COPY . .
-
-RUN yarn build
-
 FROM nginx:alpine
 
 LABEL maintainer="Jones MAGLOIRE @Joxit"
 
 WORKDIR /usr/share/nginx/html/
 
-COPY --from=builder /usr/app/dist/ /usr/share/nginx/html/
+COPY dist/ /usr/share/nginx/html/

README.md

@@ -1,5 +1,5 @@
 ---
-title: Project Page
+title: Docker Registry User Interface
 ---
 
 # Docker Registry UI
@@ -10,13 +10,13 @@ title: Project Page
 ## Overview
 
 This project aims to provide a simple and complete user interface for your private docker registry.
-You have the choice between two versions, the **standard interface** and the **static interface**.
+You have the choice between two versions, the **standard interface** (`joxit/docker-registry-ui:latest`) and the **static interface** (`joxit/docker-registry-ui:static`).
 
 In the **standard interface**, there is no default registry, you need to add your own within the UI.
-You can manage more than one registry server.
+With this version, you can manage **more than one** registry server but all the environment variables will be **unavailable**.
 All registries will be stored in the [local storage](https://en.wikipedia.org/wiki/Web_storage#Local_and_session_storage) of your browser. No configuration is needed when you launch the UI.
 
-In the **static interface**, it will connect to a single registry and will not change. The configuration is done at the start of the interface, when you use the docker images whose tags contain the `static` keyword.
+In the **static interface**, it will connect to a single registry and will not change. The configuration is done at the start of the interface, when you use the docker images whose tags contain the `static` keyword. With this version, you can manage **only one registry** and all environment variables will be **available**.
 
 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.
 
@@ -46,9 +46,14 @@ 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)) **static interface**.
+-   Limit the number of elements in the image list via `CATALOG_ELEMENTS_LIMIT` (see [#127](https://github.com/Joxit/docker-registry-ui/pull/127)) **static interface**.
+-   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
 
+-   What is the difference between **`joxit/docker-registry-ui:latest`** and **`joxit/docker-registry-ui:static`** tags ?
+    -    The `latest` tag was the first version of the project, one UI for many docker registries. The `static` tag allows you to have an interface for a single registry and also allows you select your features.
 -   Why, when I delete all tags of an image, the image is still in the UI ?
     -   This is a limitation of docker registry, the garbage collector don't remove empty images. If you want to delete dangling images, you will need to delete the folder in your registry data. (see [#77](https://github.com/Joxit/docker-registry-ui/issues/77))
 -   Why the image size in the UI is not the same as displayed during `docker images` ?
@@ -65,81 +70,31 @@ This web user interface uses [Riot](https://github.com/Riot/riot) the react-like
     -   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))
+-   I deleted images through the UI, but they are still present on the server. How can I delete them?
+    - When you delete an image with the UI, only the reference is deleted and not the content. To remove dangling images, you need to run the garbage collector of the registry with the command `registry garbage-collect config.yml` or `docker exec registry registry garbage-collect config.yml`. (see [#77](https://github.com/Joxit/docker-registry-ui/issues/77) [#147](https://github.com/Joxit/docker-registry-ui/issues/147))
+-   Why when I delete one tag, all tags with the same SHA are deleted ?
+    - This a docker registry API limitation, there is only one way to [delete images with tag](https://docs.docker.com/registry/spec/api/#deleting-an-image), it's by its `name` and its `manifest` (it's a sha of the content). So when you delete a tag, this will delete all tags of this image with the same SHA/manifest.
+
 
 Need more informations ? Try my [examples](https://github.com/Joxit/docker-registry-ui/tree/master/examples) or open an issue.
 
 ## Getting Started
 
-### Basic
+The docker image contains the source code and nginx in order to serve the docker-registry-ui. Please remember the difference between the **standard interface** (`latest` tag) and **static interface** (`static` tags).
 
-First you need node and npm in order to download dependencies.
+### Run the standard interface
+
+You can run the standard interface see the website on your 80 port. You will be able to use the interface for **many registry servers**, but all the configuration via environment variables from the static interface will be **unavailable**.
 
 ```sh
-git clone https://github.com/Joxit/docker-registry-ui.git
-cd docker-registry-ui
-npm install
+docker run -d -p 80:80 joxit/docker-registry-ui:latest
 ```
 
-Now you can open index.html with your browser or use a http-server
+### Run the static interface
 
-```sh
-npm install -g http-server
-http-server
-```
-
-### Docker
-
-The docker contains the source code and a node webserver in order to serve the docker-registry-ui.
-
-#### Get the docker image
-
-You can get the image in three ways
-
-From sources with this command:
-
-```sh
-git clone https://github.com/Joxit/docker-registry-ui.git
-# Alpine
-docker build -t joxit/docker-registry-ui:latest docker-registry-ui
-docker build -t joxit/docker-registry-ui:static -f docker-registry-ui/static.dockerfile docker-registry-ui
-# Debian
-docker build -t joxit/docker-registry-ui:debian -f docker-registry-ui/debian.dockerfile docker-registry-ui
-docker build -t joxit/docker-registry-ui:static -f docker-registry-ui/debian-static.dockerfile docker-registry-ui
-```
-
-Or build with the url:
-
-```sh
-# Alpine
-docker build -t joxit/docker-registry-ui:latest github.com/Joxit/docker-registry-ui
-docker build -t joxit/docker-registry-ui:static -f static.dockerfile github.com/Joxit/docker-registry-ui
-# Debian
-docker build -t joxit/docker-registry-ui:debian -f debian.dockerfile github.com/Joxit/docker-registry-ui
-docker build -t joxit/docker-registry-ui:debian-static -f debian-static.dockerfile github.com/Joxit/docker-registry-ui
-```
-
-Or pull the image from [docker hub](https://hub.docker.com/r/joxit/docker-registry-ui/):
-
-```sh
-# Alpine
-docker pull joxit/docker-registry-ui:latest
-docker pull joxit/docker-registry-ui:static
-# Debian
-docker pull joxit/docker-registry-ui:debian
-docker pull joxit/docker-registry-ui:debian-static
-```
-
-#### Run the docker
-
-To run the docker and see the website on your 80 port, try this:
-
-```sh
-docker run -d -p 80:80 joxit/docker-registry-ui
-```
-
-#### Run the static interface
-
-Some env options are available for use this interface for only one server.
+Some env options are available for use this interface for **only one server**.
 
 -   [`URL`](https://github.com/Joxit/docker-registry-ui/tree/master/examples/ui-as-standalone): set the static URL to use (You will need CORS configuration). Example: `http://127.0.0.1:5000`. (`Required`)
 -   [`REGISTRY_URL`](https://github.com/Joxit/docker-registry-ui/tree/master/examples/ui-as-proxy): your docker registry URL to contact (CORS configuration is not needed). Example: `http://my-docker-container:5000`. (Can't be used with `URL`, since 0.3.2).
@@ -147,6 +102,8 @@ Some env options are available for use this interface for only one server.
 -   `REGISTRY_TITLE`: Set a custom title for your user interface when using `REGISTRY_URL` (since 0.3.4).
 -   `PULL_URL`: Set a custom url for the docker pull command, this is useful when you use `REGISTRY_URL` and your registry is on a different host (since 1.1.0).
 -   [`NGINX_PROXY_HEADER_*`](https://github.com/Joxit/docker-registry-ui/tree/master/examples/proxy-headers): Set custom headers for your docker registry, usefull when you want to add your credentials. (Can be use only with `REGISTRY_URL`).
+-   [`SHOW_CONTENT_DIGEST`](https://github.com/Joxit/docker-registry-ui/issues/126): Show content digest in docker tag list. Default: `true`.
+-   [`CATALOG_ELEMENTS_LIMIT`](https://github.com/Joxit/docker-registry-ui/pull/132): Limit the number of elements in the catalog page. Default: `100000`.
 
 Example with `URL` option.
 
@@ -181,9 +138,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:
@@ -203,6 +163,8 @@ http:
     Access-Control-Expose-Headers: ['Docker-Content-Digest']
 ```
 
+If you are running the **static interface** don't forget the environment variable `DELETE_IMAGES`.
+
 ## Registry example
 
 Example of docker registry configuration file:
@@ -225,7 +187,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']
@@ -235,6 +197,10 @@ 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)
@@ -245,4 +211,6 @@ auth:
 - [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))
+- [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))
+- [Use docker-registry-ui as proxy with read-only right](https://github.com/Joxit/docker-registry-ui/tree/master/examples/read-only-auth) ([#47](https://github.com/Joxit/docker-registry-ui/issues/47))

_config.yml

@@ -2,10 +2,12 @@ title: Docker Registry User Interface
 description: The simplest and most complete UI for your private registry!
 url: https://joxit.dev/docker-registry-ui
 google_analytics: UA-99119327-1
-theme: jekyll-theme-cayman
+remote_theme: joxit/joxit.github.io
 author: Jones Magloire
 twitter:
   username: Joxit
+instagram:
+  username: jox.it
 defaults:
   - scope:
       path: ""

arm32v7-static.dockerfile

@@ -23,6 +23,4 @@ ENV NGINX_PROXY_HEADER_Host '$http_host'
 COPY nginx/default.conf /etc/nginx/conf.d/default.conf
 COPY dist/ /usr/share/nginx/html/
 COPY dist/scripts/docker-registry-ui-static.js /usr/share/nginx/html/scripts/docker-registry-ui.js
-COPY bin/entrypoint /bin
-
-ENTRYPOINT entrypoint
+COPY bin/entrypoint /docker-entrypoint.d/90-docker-registry-ui.sh

arm64v8-static.dockerfile

@@ -23,6 +23,4 @@ ENV NGINX_PROXY_HEADER_Host '$http_host'
 COPY nginx/default.conf /etc/nginx/conf.d/default.conf
 COPY dist/ /usr/share/nginx/html/
 COPY dist/scripts/docker-registry-ui-static.js /usr/share/nginx/html/scripts/docker-registry-ui.js
-COPY bin/entrypoint /bin
-
-ENTRYPOINT entrypoint
+COPY bin/entrypoint /docker-entrypoint.d/90-docker-registry-ui.sh

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 &&
@@ -30,9 +38,3 @@ if [ -n "${REGISTRY_URL}" ] ; then
   sed -i "s^\${NGINX_PROXY_HEADERS}^$(get_nginx_proxy_headers)^" /etc/nginx/conf.d/default.conf
   sed -i "s,#!,," /etc/nginx/conf.d/default.conf
 fi
-
-if [ -z "$@" ]; then
-  exec nginx -g "daemon off;"
-else
-  exec $@
-fi

debian-static.dockerfile

@@ -23,6 +23,4 @@ ENV NGINX_PROXY_HEADER_Host '$http_host'
 COPY nginx/default.conf /etc/nginx/conf.d/default.conf
 COPY dist/ /usr/share/nginx/html/
 COPY dist/scripts/docker-registry-ui-static.js /usr/share/nginx/html/scripts/docker-registry-ui.js
-COPY bin/entrypoint /bin
-
-ENTRYPOINT entrypoint
+COPY bin/entrypoint /docker-entrypoint.d/90-docker-registry-ui.sh

demo/index.html

@@ -21,7 +21,6 @@
   <meta charset="UTF-8">
   <link rel="stylesheet" href="../dist/vendor.css">
   <link rel="stylesheet" href="../dist/style.css">
-  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,700&display=swap" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta property="og:locale" content="en_US" />
   <meta name="description" content="This is the live demo for Docker Registry User Interface. Try it now! Sources : https://github.com/Joxit/docker-registry-ui" />

dist/index.html

@@ -13,4 +13,4 @@
 
  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/>.
---><!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="vendor.css"><link rel="stylesheet" href="style.css"><link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,700&display=swap" rel="stylesheet"><meta name="viewport" content="width=device-width,initial-scale=1"><meta property="og:site_name" content="Docker Registry UI"><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@Joxit"><meta name="twitter:creator" content="@Jones Magloire"><title>Docker Registry UI</title></head><body><app></app><script src="scripts/vendor.js"></script><script src="scripts/docker-registry-ui.js"></script></body></html>
+--><!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="vendor.css"><link rel="stylesheet" href="style.css"><meta name="viewport" content="width=device-width,initial-scale=1"><meta property="og:site_name" content="Docker Registry UI"><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@Joxit"><meta name="twitter:creator" content="@Jones Magloire"><title>Docker Registry UI</title></head><body><app></app><script src="scripts/vendor.js"></script><script src="scripts/docker-registry-ui.js"></script></body></html>

examples/README.md

@@ -8,4 +8,6 @@
 - [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))
+- [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))
+- [Use docker-registry-ui as proxy with read-only right](https://github.com/Joxit/docker-registry-ui/tree/master/examples/read-only-auth) ([#47](https://github.com/Joxit/docker-registry-ui/issues/47))

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

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```
+
+

examples/electron/authentication/index.html

@@ -0,0 +1,8 @@
+<html>
+
+<body>
+    <div id="root"></div>
+    <script src="index.tsx"></script>
+</body>
+
+</html>

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();
+}
+

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();
+});

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"
+}

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

examples/issue-116/docker-compose.yml

@@ -2,7 +2,7 @@ version: '2'
 
 services:
   registry-srv:
-    image: registry:2.7.1
+    image: registry:2.7
     restart: always
     volumes:
       - storage:/var/lib/registry

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:

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:

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']

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:

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

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']

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

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']

examples/read-only-auth/README.md

@@ -0,0 +1,10 @@
+# Docker registry with read only access
+
+This is the configuration for a docker registry UI using `REGISTRY_URL` (as a proxy) with read only access to the registry.
+
+There are two htpasswd files. `read-write.htpasswd` a read and write access to the registry and `read-only.htpasswd` for a read only access.
+
+All users in `read-only.htpasswd` should be in `read-write.htpasswd`.
+
+Read only user: login: `read` password: `regisrty`.
+Read and write user: login: `write` password: `regisrty`.

examples/read-only-auth/docker-compose.yml

@@ -0,0 +1,27 @@
+version: '2.0'
+services:
+  registry:
+    image: registry:2.7
+    volumes:
+      - ./registry-data:/var/lib/registry
+      - ./registry.yml:/etc/docker/registry/config.yml
+    networks:
+      - registry-ui-net
+
+  ui:
+    image: joxit/docker-registry-ui:static
+    ports:
+      - 80:80
+    environment:
+      - REGISTRY_TITLE=My Private Docker Registry
+      - REGISTRY_URL=http://registry:5000
+    volumes:
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf
+      - ./read-write.htpasswd:/etc/nginx/auth/read-write.htpasswd:ro
+      - ./read-only.htpasswd:/etc/nginx/auth/read-only.htpasswd
+    depends_on:
+      - registry
+    networks:
+      - registry-ui-net
+networks:
+  registry-ui-net:

examples/read-only-auth/nginx.conf

@@ -0,0 +1,55 @@
+server {
+    listen       80;
+    server_name  localhost;
+#!    resolver 127.0.0.11; # This is for docker container name resolver
+    #charset koi8-r;
+    #access_log  /var/log/nginx/host.access.log  main;
+
+    # disable any limits to avoid HTTP 413 for large image uploads
+    client_max_body_size 0;
+
+    # required to avoid HTTP 411: see Issue #1486 (https://github.com/moby/moby/issues/1486)
+    chunked_transfer_encoding on;
+    # required for strict SNI checking: see Issue #70 (https://github.com/Joxit/docker-registry-ui/issues/70)
+    proxy_ssl_server_name on;
+    proxy_buffering off;
+    proxy_ignore_headers "X-Accel-Buffering";
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+    }
+
+    location /v2 {
+        # Do not allow connections from docker 1.5 and earlier
+        # docker pre-1.6.0 did not properly set the user agent on ping, catch "Go *" user agents
+        if ($http_user_agent ~ "^(docker\/1\.(3|4|5(?!\.[0-9]-dev))|Go ).*$" ) {
+            return 404;
+        }
+        # To add basic authentication to v2 use auth_basic setting.
+        auth_basic "Registry realm";
+        auth_basic_user_file /etc/nginx/auth/read-write.htpasswd;
+        # For requests that *aren't* a PUT, POST, or DELETE
+        limit_except PUT POST DELETE {
+          auth_basic_user_file /etc/nginx/auth/read-only.htpasswd;
+        }
+
+        proxy_pass http://registry:5000;
+    }
+
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+
+    # deny access to .htaccess files, if Apache's document root
+    # concurs with nginx's one
+    #
+    #location ~ /\.ht {
+    #    deny  all;
+    #}
+}

examples/read-only-auth/read-only.htpasswd

@@ -0,0 +1,2 @@
+read:$2y$05$NHpWy4HuCM8Ol2wZJsf6/.cJtGgv61jWzHTCYt/WntzRLDse1IuVO
+write:$2y$05$aqLmS1hXojRnubpSN4aVDeZ8wLhJtmQr4v0NiZl4KHUHXhDVnyoQm

examples/read-only-auth/read-write.htpasswd

@@ -0,0 +1 @@
+write:$2y$05$aqLmS1hXojRnubpSN4aVDeZ8wLhJtmQr4v0NiZl4KHUHXhDVnyoQm

examples/read-only-auth/registry.yml

@@ -0,0 +1,21 @@
+version: 0.1
+log:
+  fields:
+    service: registry
+storage:
+  delete:
+    enabled: true
+  cache:
+    blobdescriptor: inmemory
+  filesystem:
+    rootdirectory: /var/lib/registry
+http:
+  addr: :5000
+  headers:
+    X-Content-Type-Options: [nosniff]
+    Access-Control-Allow-Origin: ['http://localhost']
+    Access-Control-Allow-Methods: ['HEAD', 'GET', 'OPTIONS', 'DELETE']
+    Access-Control-Allow-Headers: ['Authorization', 'Accept']
+    Access-Control-Max-Age: [1728000]
+    Access-Control-Allow-Credentials: [true]
+    Access-Control-Expose-Headers: ['Docker-Content-Digest']

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:

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

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']

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:

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:

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']

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']

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:

gulpfile.js

@@ -16,7 +16,7 @@ const useref = require('gulp-useref');
 const injectVersion = require('gulp-inject-version');
 const merge = require('stream-series');
 
-const allTags = ['src/tags/*.tag', 'src/tags/dialogs/*.tag'];
+const allTags = ['src/tags/*.riot', 'src/tags/dialogs/*.riot'];
 
 const allScripts = [
   'src/scripts/http.js',
@@ -24,7 +24,7 @@ const allScripts = [
   'src/scripts/utils.js'
 ];
 
-const staticTags = ['src/tags/*.tag'];
+const staticTags = ['src/tags/*.riot'];
 
 const staticScripts = [
   'src/scripts/http.js',

nginx/default.conf

@@ -12,6 +12,8 @@ server {
     chunked_transfer_encoding on;
     # required for strict SNI checking: see Issue #70 (https://github.com/Joxit/docker-registry-ui/issues/70)
     proxy_ssl_server_name on;
+    proxy_buffering off;
+    proxy_ignore_headers "X-Accel-Buffering";
 
     location / {
         root   /usr/share/nginx/html;

package.json

@@ -1,8 +1,9 @@
 {
   "name": "docker-registry-ui",
-  "version": "1.4.4",
+  "version": "1.5.3",
   "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",

src/index.html

@@ -25,8 +25,8 @@
   <!-- build:css style.css -->
   <link href="style.css" rel="stylesheet" type="text/css">
   <link href="material-icons.css" rel="stylesheet" type="text/css">
+  <link href="roboto.css" rel="stylesheet" type="text/css">
   <!-- endbuild -->
-  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,700&display=swap" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta property="og:site_name" content="Docker Registry UI" />
   <meta name="twitter:card" content="summary" />
@@ -43,24 +43,24 @@
   <script src="../node_modules/riot-mui/build/js/riot-mui.js"></script>
   <!-- endbuild -->
   <!-- build:js scripts/docker-registry-ui.js -->
-  <script src="tags/catalog.tag" type="riot/tag"></script>
-  <script src="tags/catalog-element.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>
-  <script src="tags/copy-to-clipboard.tag" type="riot/tag"></script>
-  <script src="tags/dialogs/add.tag" type="riot/tag"></script>
-  <script src="tags/dialogs/change.tag" type="riot/tag"></script>
-  <script src="tags/dialogs/remove.tag" type="riot/tag"></script>
-  <script src="tags/dialogs/menu.tag" type="riot/tag"></script>
-  <script src="tags/image-size.tag" type="riot/tag"></script>
-  <script src="tags/image-date.tag" type="riot/tag"></script>
-  <script src="tags/image-content-digest.tag" type="riot/tag"></script>
-  <script src="tags/pagination.tag" type="riot/tag"></script>
-  <script src="tags/app.tag" type="riot/tag"></script>
+  <script src="tags/catalog.riot" type="riot/tag"></script>
+  <script src="tags/catalog-element.riot" type="riot/tag"></script>
+  <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/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>
+  <script src="tags/copy-to-clipboard.riot" type="riot/tag"></script>
+  <script src="tags/dialogs/add.riot" type="riot/tag"></script>
+  <script src="tags/dialogs/change.riot" type="riot/tag"></script>
+  <script src="tags/dialogs/remove.riot" type="riot/tag"></script>
+  <script src="tags/dialogs/menu.riot" type="riot/tag"></script>
+  <script src="tags/image-size.riot" type="riot/tag"></script>
+  <script src="tags/image-date.riot" type="riot/tag"></script>
+  <script src="tags/image-content-digest.riot" type="riot/tag"></script>
+  <script src="tags/pagination.riot" type="riot/tag"></script>
+  <script src="tags/app.riot" type="riot/tag"></script>
   <script src="scripts/http.js"></script>
   <script src="scripts/script.js"></script>
   <script src="scripts/utils.js"></script>

src/roboto.css

@@ -0,0 +1,52 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(fonts/Roboto-Regular.eot); /* For IE6-8 */
+  src: local('Roboto Light'),
+       local('Roboto-Light'),
+       url(fonts/Roboto-Light.woff2) format('woff2'),
+       url(fonts/Roboto-Light.woff) format('woff'),
+       url(fonts/Roboto-Light.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(fonts/Roboto-Regular.eot); /* For IE6-8 */
+  src: local('Roboto Regular'),
+       local('Roboto-Regular'),
+       url(fonts/Roboto-Regular.woff2) format('woff2'),
+       url(fonts/Roboto-Regular.woff) format('woff'),
+       url(fonts/Roboto-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(fonts/Roboto-Regular.eot); /* For IE6-8 */
+  src: local('Roboto Bold'),
+       local('Roboto-Bold'),
+       url(fonts/Roboto-Bold.woff2) format('woff2'),
+       url(fonts/Roboto-Bold.woff) format('woff'),
+       url(fonts/Roboto-Bold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(fonts/RobotoMono-Regular.eot); /* For IE6-8 */
+  src: local('Roboto Mono Regular'),
+       local('RobotoMono-Regular'),
+       local('Roboto-Mono-Regular'),
+       url(fonts/RobotoMono-Regular.woff2) format('woff2'),
+       url(fonts/RobotoMono-Regular.woff) format('woff'),
+       url(fonts/RobotoMono-Regular.ttf) format('truetype');
+}

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) {

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 = {};

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);
+  })
+}

src/style.css

@@ -24,10 +24,6 @@ html, body {
   height: 100%;
 }
 
-main {
-  margin-bottom: 100px;
-}
-
 .section-centerd {
   margin: auto;
 }
@@ -48,7 +44,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 +64,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 +301,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;
 }
@@ -356,25 +380,16 @@ material-popup .popup {
 
 footer {
   width: 100%;
-  position: fixed;
   z-index: 75;
   bottom: 0;
 }
 
-@media screen and (max-height: 750px) {
-  main {
-    min-height: calc(100% - 164px - 2.5em);
-    margin-bottom: 2em;
-  }
-  footer {
-    position: relative;
-  }
+main {
+  min-height: calc(100% - 136px);
 }
 
-@media screen and (min-width: 760px) and (max-height: 750px) {
-  main {
-    min-height: calc(100% - 144px - 2.5em);
-  }
+material-footer {
+  padding: 0.5em 1em;
 }
 
 .select-padding {
@@ -437,6 +452,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 +480,7 @@ tag-history-element {
   display: block;
   padding: 20px;
   min-width: 100px;
+  min-height: 3em;
   width: 420px;
   float: left;
   overflow-x: auto;
@@ -511,8 +535,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 {

src/tags/app.riot

@@ -45,7 +45,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
     </material-footer>
   </footer>
-  <script>
+  <script type="text/javascript">
     registryUI.appTag = this;
     route.base('#!');
     route('', function() {
@@ -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();
     };
 

src/tags/catalog-element.riot

@@ -16,19 +16,21 @@ 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}" />
-  <script>
+  <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 type="text/javascript">
     this.on('mount', function() {
       const self = this;
       const card = this.tags['material-card'];

src/tags/catalog.riot

@@ -28,7 +28,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <material-spinner></material-spinner>
   </div>
   <catalog-element each="{ item in registryUI.catalog.repositories }" />
-  <script>
+  <script type="text/javascript">
     registryUI.catalog.instance = this;
     registryUI.catalog.display = function() {
       registryUI.catalog.repositories = [];
@@ -41,7 +41,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           }
           registryUI.catalog.repositories = JSON.parse(this.responseText).repositories || [];
           registryUI.catalog.repositories.sort();
-          registryUI.catalog.length = registryUI.catalog.repositories.length;         registryUI.catalog.repositories = registryUI.catalog.repositories.reduce(function(acc, e) {
+          registryUI.catalog.length = registryUI.catalog.repositories.length;
+          registryUI.catalog.repositories = registryUI.catalog.repositories.reduce(function(acc, e) {
             const slash = e.indexOf('/');
             if (slash > 0) {
               const repoName = e.substring(0, slash) + '/';
@@ -68,7 +69,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();

src/tags/image-content-digest.riot

@@ -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 {

src/tags/pagination.riot

@@ -18,18 +18,19 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <!-- Begin of tag -->
   <div class="conatianer">
     <div class="pagination-centered">
-      <material-button waves-color="rgba(158,158,158,.4)" each="{p in this.opts.pages}" class="{ current: p.current, space-left: p['space-left'], space-right: p['space-right']}">
+      <material-button waves-color="rgba(158,158,158,.4)" each="{p in this.opts.pages}"
+        class="{ current: p.current, space-left: p['space-left'], space-right: p['space-right']}">
         <i show="{ p.icon }" class="material-icons">{ p.icon }</i>
         <div hide="{ p.icon }">{ p.page }</div>
       </material-button>
     </div>
-  <div>
-  <script>
-    this.on('updated', function() {
+  </div>
+  <script type="text/javascript">
+    this.on('updated', function () {
       if (!this.tags['material-button']) { return; }
       var buttons = Array.isArray(this.tags['material-button']) ? this.tags['material-button'] : [this.tags['material-button']];
-      buttons.forEach(function(button) {
-        button.root.onclick = function() {
+      buttons.forEach(function (button) {
+        button.root.onclick = function () {
           registryUI.taglist.instance.trigger('page-update', button.p.page)
         }
       });