fix: docker registry >=2.8.2 sets catalog max entries to 1000 (#306)

fixes #306

README.md

@@ -69,6 +69,8 @@ Checkout all options in [Available options](#available-options) section.
     - Yes but it is at your own risk using two regstry servers, check the comment [#155](https://github.com/Joxit/docker-registry-ui/issues/155#issuecomment-1286052124).
 -   How to fix CORS issue on s3 bucket ?
     - You should add a CORS Policy on your bucket, check the issue [#193](https://github.com/Joxit/docker-registry-ui/issues/193).
+-   Why my docker regisrty server is returning an error `pagination number invalid` ?
+    - Since docker registry server 2.8.2 there is default limit of 1000 images in catalog. If you need more images update the configuration `REGISTRY_CATALOG_MAXENTRIES` with your max value and check the issue [#306](https://github.com/Joxit/docker-registry-ui/issues/306).
 
 Need more informations ? Try my [examples](https://github.com/Joxit/docker-registry-ui/tree/main/examples) or open an issue.
 
@@ -83,7 +85,7 @@ Some env options are available for use this interface for **only one server** (w
 - `PULL_URL`: Set a custom url when you copy the `docker pull` command (see [#71](https://github.com/Joxit/docker-registry-ui/issues/71)). (default: value derived from `REGISTRY_URL`). Since 1.1.0
 - `DELETE_IMAGES`: Set if we can delete images from the UI. (default: `false`)
 - `SHOW_CONTENT_DIGEST`: Show/Hide content digest in docker tag list (see [#126](https://github.com/Joxit/docker-registry-ui/issues/126) and [#131](https://github.com/Joxit/docker-registry-ui/pull/131)). (default: `false`). Since 1.4.9
-- `CATALOG_ELEMENTS_LIMIT`: Limit the number of elements in the catalog page (see [#39](https://github.com/Joxit/docker-registry-ui/issues/39), [#127](https://github.com/Joxit/docker-registry-ui/pull/127) and [#132](https://github.com/Joxit/docker-registry-ui/pull/132)). (default: `100000`). Since 1.4.9
+- `CATALOG_ELEMENTS_LIMIT`: Limit the number of elements in the catalog page (see [#39](https://github.com/Joxit/docker-registry-ui/issues/39), [#127](https://github.com/Joxit/docker-registry-ui/pull/127), [#132](https://github.com/Joxit/docker-registry-ui/pull/132)) and [#306](https://github.com/Joxit/docker-registry-ui/issues/306). (default: `1000`). Since 1.4.9
 - `SINGLE_REGISTRY`: Remove the menu that show the dialogs to add, remove and change the endpoint of your docker registry. (default: `false`). Since 2.0.0
 - `NGINX_PROXY_PASS_URL`: Update the default Nginx configuration and set the **proxy_pass** to your backend docker registry (this avoid CORS configuration). This is usually the name of your registry container in the form `http://registry:5000`. Since 2.0.0
 - `NGINX_PROXY_HEADER_*`: Update the default Nginx configuration and **set custom headers** for your backend docker registry via environment variable and file (`/etc/nginx/.env`). Only when `NGINX_PROXY_PASS_URL` is used (see [#89](https://github.com/Joxit/docker-registry-ui/pull/89)). Since 1.2.3

src/components/catalog/catalog.riot

@@ -96,6 +96,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             }, []);
           } else if (this.status === 404) {
             self.props.onNotify({ code: 'CATALOG_NOT_FOUND', url: catalogUrl }, true);
+          } else if (this.status === 400) {
+            let response;
+            try {
+              response = JSON.parse(this.responseText);
+            } catch (e) {}
+            if (!response || !Array.isArray(response.errors)) {
+              return self.props.onNotify(this.responseText, true);
+            }
+            self.props.onNotify({ ...response, url: catalogUrl }, true);
           } else {
             self.props.onNotify(this.responseText);
           }

src/components/docker-registry-ui.riot

@@ -83,12 +83,20 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       opened="{ state.authenticationDialogOpened }"
     ></registry-authentication>
     <error-page
-      if="{ state.pageError }"
+      if="{ state.pageError && !Array.isArray(state.pageError.errors) }"
       code="{ state.pageError.code }"
       status="{ state.pageError.status }"
       message="{ state.pageError.message }"
       url="{ state.pageError.url }"
     ></error-page>
+    <error-page
+      if="{ state.pageError && Array.isArray(state.pageError.errors) }"
+      each="{ error in (state.pageError && state.pageError.errors) }"
+      code="{ error.code }"
+      detail="{ error.detail }"
+      message="{ error.message }"
+      url="{ state.pageError.url }"
+    ></error-page>
     <material-snackbar message="{ state.snackbarMessage }" is-error="{ state.snackbarIsError }"></material-snackbar>
   </main>
   <footer>
@@ -168,7 +176,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           window.location.origin + window.location.pathname.replace(/\/+$/, '');
         this.state.registryUrl = registryUrl.replace(/\/$/, '').replace(/index(\.html?)?$/, '');
         this.state.name = props.name || stripHttps(props.registryUrl);
-        this.state.catalogElementsLimit = props.catalogElementsLimit || 100000;
+        this.state.catalogElementsLimit = props.catalogElementsLimit || 1000;
         this.state.pullUrl = this.pullUrl(this.state.registryUrl, props.pullUrl);
         this.state.useControlCacheHeader = props.useControlCacheHeader;
         const theme = loadTheme(props, this.root.parentNode.style);
@@ -211,12 +219,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         return stripHttps(url);
       },
       notifySnackbar(message, isError) {
+        console.log(message);
         if (typeof message === 'string') {
           this.update({
             snackbarMessage: message,
             snackbarIsError: isError || false,
           });
-        } else if (message && message.code) {
+        } else if (message && (message.code || message.errors)) {
           this.update({
             pageError: message,
           });

src/components/error-page.riot

@@ -29,6 +29,38 @@
     <template if="{ props.code === 'INCORRECT_URL' }">
       <p>`{ props.url }` does not seems to be a correct URL, should starts with http:// or https://.</p>
     </template>
+    <template if="{ props.code === 'PAGINATION_NUMBER_INVALID' }">
+      <p>
+        A default limit of <code>1000</code> images in catalog has been added in docker registry server
+        <a href="https://github.com/distribution/distribution/releases/tag/v2.8.2">v2.8.2</a> (May 11, 2023) and we
+        cannot exceed this value without configuration.
+      </p>
+      <p>
+        The new default value for the UI is <code>1000</code> since
+        <a href="https://github.com/Joxit/docker-registry-ui/milestone/6">2.5.0</a> and was <code>100000</code> from
+        <a href="https://github.com/Joxit/docker-registry-ui/issues/39">0.3.6</a>.
+      </p>
+      <h3>Possible fixes</h3>
+      <p>
+        You can update the environment variable
+        <code>REGISTRY_CATALOG_MAXENTRIES={ props.detail?.n || 100000 }</code> of your
+        <span>docker registry server</span> or you can update your
+        <code>/etc/docker/registry/config.yml</code> configuration of your <span>docker registry server</span> and add
+        those lines:
+      </p>
+      <pre>
+<span class="keyword">catalog</span>:
+  <span class="keyword">maxentries</span>: <span>{props.detail?.n || 100000}</span>
+</pre>
+      <p>
+        If you don't need that many images, you can reduce the number of elements fetch by the
+        <span>docker registry UI</span> with the environment variable <code>CATALOG_ELEMENTS_LIMIT=1000</code>.
+      </p>
+      <p>
+        More about this issue:
+        <a href="https://github.com/Joxit/docker-registry-ui/issues/306">Joxit/docker-registry-ui#306</a>.
+      </p>
+    </template>
   </div>
   <script>
     export default {
@@ -37,6 +69,8 @@
         switch (props.code) {
           case 'CATALOG_NOT_FOUND':
             return '404';
+          case 'PAGINATION_NUMBER_INVALID':
+            return '400';
         }
       },
       URL: window.URL,
@@ -46,7 +80,7 @@
     :host {
       display: flex;
       flex-direction: row;
-      margin-top: 20px;
+      margin: 20px 3em;
     }
     :host .content {
       margin: auto;
@@ -65,5 +99,21 @@
     :host .content h2 {
       font-weight: 700;
     }
+    :host pre,
+    code {
+      background-color: var(--hover-background);
+      font-family: 'Roboto Mono', monospace !important;
+      text-align: left;
+      border-radius: 5px;
+    }
+    code {
+      padding: 0 0.5em;
+    }
+    :host pre {
+      padding: 0.5em;
+    }
+    :host pre .keyword {
+      color: var(--accent-text);
+    }
   </style>
 </error-page>