OpenShift Console Customization

RH OCP Web Console Customization

You can add your logo, name, links & text to customize the OpenShift Container Platform web console.
This is especially helpful if you need to tailor the web console to meet specific corporate or government requirements.

Adding a custom logo and product name
You can create custom branding by adding a custom logo or custom product name. You can set both or one without the other, as these settings are independent of each other.

Create a file of the logo that you want to use. The logo can be a file in any common image format, including GIF, JPG, PNG, or SVG, and is constrained to a max-width of 200px and a max-height of 68px. Image size must not exceed 1 MB due to constraints on the ConfigMap object size.

Custom Logo

Import your logo file into a config map in the openshift-config namespace:
[ocpadmin@bastion suyi]$ oc create configmap console-custom-logo --from-file /home/ocpadmin/suyi/logo.png -n openshift-config

You can alternatively apply the following YAML to create the config map:

apiVersion: v1
kind: ConfigMap
metadata:
  name: console-custom-logo
  namespace: openshift-config
binaryData:
  console-custom-logo.png: <base64-encoded_logo> ... 

Edit the web console’s Operator configuration to include customLogoFile and customProductName:
$ oc edit consoles.operator.openshift.io cluster

        apiVersion: operator.openshift.io/v1
        kind: Console
        metadata:
          name: cluster
        spec:
          customization:
            customLogoFile:
              key: console-custom-logo.png
              name: console-custom-logo
            customProductName: My Console

Once the Operator configuration is updated, it will sync the custom logo config map into the console namespace, mount it to the console pod, and redeploy.

Check for success. If there are any issues, the console cluster Operator will report a Degraded status, and the console Operator configuration will also report a CustomLogoDegraded status, but with reasons like KeyOrFilenameInvalid or NoImageProvided.
To check the clusteroperator, run: $ oc get clusteroperator console -o yaml
To check the console Operator configuration, run: $ oc get consoles.operator.openshift.io -o yaml

Custom Links

• From Administration → Custom Resource Definitions, click on ConsoleLink.
• Select Instances tab
• Click Create Console Link and edit the file:

        apiVersion: console.openshift.io/v1
        kind: ConsoleLink
        metadata:
          name: Suyi
        spec:
          href: 'https://www.debug.school/suyash'
          location: HelpMenu 
          text: Suyi

• Valid location settings are HelpMenu, UserMenu, ApplicationMenu, and NamespaceDashboard.
• To make the custom link appear in all namespaces, follow this example:

        apiVersion: console.openshift.io/v1
        kind: ConsoleLink
        metadata:
          name: namespaced-dashboard-link-for-all-namespaces
        spec:
          href: 'https://www.debug.school/suyash'
          location: NamespaceDashboard
          text: This appears in all namespaces

• To make the custom link appear in the application menu, follow this example:

        apiVersion: console.openshift.io/v1
        kind: ConsoleLink
        metadata:
          name: application-menu-link-1
        spec:
          href: 'https://www.example.com'
          location: ApplicationMenu
          text: Link 1
          applicationMenu:
            section: My New Section
            # image that is 24x24 in size
            imageURL: https://via.placeholder.com/24

• Click Save to apply your changes.

Login Page Customization

Add Terms of Service information with custom login pages. Custom login pages can also be helpful if you use a third-party login provider, such as GitHub or Google, to show users a branded page that they trust and expect before being redirected to the authentication provider. You can also render custom error pages during the authentication process.
Customizing the error template is limited to identity providers (IDPs) that use redirects, such as request header and OIDC-based IDPs. It does not affect IDPs that use direct password authentication, such as LDAP and htpasswd.

1. Run the following commands to create templates you can modify: $ oc adm create-login-template > login.html
2. $ oc adm create-provider-selection-template > providers.html
3. $ oc adm create-error-template > errors.html
4. Create the secrets: $ oc create secret generic login-template --from-file=login.html -n openshift-config
5. $ oc create secret generic providers-template --from-file=providers.html -n openshift-config
6. $ oc create secret generic error-template --from-file=errors.html -n openshift-config
7. Execute $ oc edit oauths cluster
8. Update the specification:

        apiVersion: config.openshift.io/v1
        kind: OAuth
        metadata:
          name: cluster
        # ...
        spec:
          templates:
            error:
                name: error-template
            login:
                name: login-template
            providerSelection:
                name: providers-template

Congratulations! 🧦🚄🥡♾️
You have successfully customized the login page!

Ref: https://docs.openshift.com/container-platform/4.14/web_console/customizing-the-web-console.html