docker-registry-ui/src/components/error-page.riot

<error-page>
  <div class="content">
    <h1 if="{ getStatusCode() }">{ getStatusCode() }</h1>
    <h2>{ props.code }</h2>
    <template if="{ props.code === 'CATALOG_NOT_FOUND' }">
      <p>We received a 404 status code from your registry.</p>
      <p>The contact point was <a href="{ props.url }">{ props.url }</a></p>
      <p>
        This may be caused by a misconfiguration of Docker Registry UI. Check the
        <a href="https://joxit.dev/docker-registry-ui/#faq">FAQ</a> and
        <a href="https://joxit.dev/docker-registry-ui/#available-options">Available options</a>
      </p>
    </template>
    <template if="{ props.code === 'MIXED_CONTENT' }">
      <p>
        <span>Mixed Content</span>: The page at `<a href="{ window.location.origin }">{ window.location.origin }</a>`
        was loaded over HTTPS, but requested an insecure server endpoint `<a href="{ new URL(props.url).origin }"
          >{ new URL(props.url).origin }</a
        >`.
      </p>
      <p>This request <span>may</span> has been blocked; the content must be served over HTTPS.</p>
      <p>
        You may unset the option `<span>REGISTRY_URL</span>` and set the registry server container URL in
        `<span>NGINX_PROXY_PASS_URL</span>`. It's usually the name of your container, and it should be on the same
        network as the UI.
      </p>
      <p>You can check the issue <a href="https://github.com/Joxit/docker-registry-ui/issues/277">#277</a>.</p>
    </template>
    <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>
    <template if="{ props.code === 'CATALOG_BRANCHING_CONFIGURATION' }">
      <p>Wrong configuration for the branching feature: { props.message }</p>
      <p>Configuration environment variables are : CATALOG_MIN_BRANCH and CATALOG_MAX_BRANCH</p>
    </template>
  </div>
  <script>
    export default {
      getStatusCode() {
        const { props } = this;
        switch (props.code) {
          case 'CATALOG_NOT_FOUND':
            return '404';
          case 'PAGINATION_NUMBER_INVALID':
            return '400';
        }
      },
      URL: window.URL,
    };
  </script>
  <style>
    :host {
      display: flex;
      flex-direction: row;
      margin: 20px 3em;
    }
    :host .content {
      margin: auto;
      text-align: center;
    }
    :host .content a {
      color: var(--accent-text);
    }
    :host .content a:visited {
      color: var(--accent-text);
    }
    :host .content p span {
      color: var(--accent-text);
      font-weight: 700;
    }
    :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>