Chapter 5. Customizing the web console in OpenShift Container Platform

Procedure

1. Import your logo file into a config map in the openshift-config namespace:

   $ oc create configmap console-custom-logo --from-file /path/to/console-custom-logo.png -n openshift-config

   Copy to Clipboard Toggle word wrap
   Tip

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

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

   1

   Copy to Clipboard Toggle word wrap

   1

   Provide a valid base64-encoded logo.

2. Edit the web console’s Operator configuration to include customLogoFile and customProductName:

   $ oc edit consoles.operator.openshift.io cluster

   Copy to Clipboard Toggle word wrap

   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

   Copy to Clipboard Toggle word wrap

   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.

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

   Copy to Clipboard Toggle word wrap

   To check the console Operator configuration, run:

   $ oc get consoles.operator.openshift.io -o yaml

   Copy to Clipboard Toggle word wrap

Procedure

1. From Administration Custom Resource Definitions, click on ConsoleLink.
2. Select Instances tab

3. Click Create Console Link and edit the file:

   apiVersion: console.openshift.io/v1
   kind: ConsoleLink
   metadata:
     name: example
   spec:
     href: 'https://www.example.com'
     location: HelpMenu 

   1

   
     text: Link 1

   Copy to Clipboard Toggle word wrap

   1

   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.example.com'
     location: NamespaceDashboard
     text: This appears in all namespaces

   Copy to Clipboard Toggle word wrap

   To make the custom link appear in only some namespaces, follow this example:

   apiVersion: console.openshift.io/v1
   kind: ConsoleLink
   metadata:
     name: namespaced-dashboard-for-some-namespaces
   spec:
     href: 'https://www.example.com'
     location: NamespaceDashboard
     # This text will appear in a box called "Launcher" under "namespace" or "project" in the web console
     text: Custom Link Text
     namespaceDashboard:
       namespaces:
       # for these specific namespaces
       - my-namespace
       - your-namespace
       - other-namespace

   Copy to Clipboard Toggle word wrap

   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

   Copy to Clipboard Toggle word wrap
4. Click Save to apply your changes.

Procedure

1. Run the following commands to create templates you can modify:

   $ oc adm create-login-template > login.html

   Copy to Clipboard Toggle word wrap

   $ oc adm create-provider-selection-template > providers.html

   Copy to Clipboard Toggle word wrap

   $ oc adm create-error-template > errors.html

   Copy to Clipboard Toggle word wrap

2. Create the secrets:

   $ oc create secret generic login-template --from-file=login.html -n openshift-config

   Copy to Clipboard Toggle word wrap

   $ oc create secret generic providers-template --from-file=providers.html -n openshift-config

   Copy to Clipboard Toggle word wrap

   $ oc create secret generic error-template --from-file=errors.html -n openshift-config

   Copy to Clipboard Toggle word wrap

3. Run:

   $ oc edit oauths cluster

   Copy to Clipboard Toggle word wrap

4. Update the specification:

   spec:
     templates:
       error:
           name: error-template
       login:
           name: login-template
       providerSelection:
           name: providers-template

   Copy to Clipboard Toggle word wrap

   Run oc explain oauths.spec.templates to understand the options.

Procedure

1. From Administration Custom Resource Definitions, click on ConsoleExternalLogLink.
2. Select Instances tab

3. Click Create Console External Log Link and edit the file:

   apiVersion: console.openshift.io/v1
   kind: ConsoleExternalLogLink
   metadata:
     name: example
   spec:
     hrefTemplate: >-
       https://example.com/logs?resourceName=${resourceName}&containerName=${containerName}&resourceNamespace=${resourceNamespace}&podLabels=${podLabels}
     text: Example Logs

   Copy to Clipboard Toggle word wrap

Procedure

1. From Administration Custom Resource Definitions, click on ConsoleNotification.
2. Select Instances tab

3. Click Create Console Notification and edit the file:

   apiVersion: console.openshift.io/v1
   kind: ConsoleNotification
   metadata:
     name: example
   spec:
     text: This is an example notification message with an optional link.
     location: BannerTop 

   1

   
     link:
       href: 'https://www.example.com'
       text: Optional link text
     color: '#fff'
     backgroundColor: '#0088ce'

   Copy to Clipboard Toggle word wrap

   1

   Valid location settings are BannerTop, BannerBottom, and BannerTopBottom.

4. Click Create to apply your changes.

Procedure

1. Navigate to Administration Custom Resource Definitions.
2. Select ConsoleCLIDownload from the list of Custom Resource Definitions (CRDs).

3. Click the YAML tab, and then make your edits:

   apiVersion: console.openshift.io/v1
   kind: ConsoleCLIDownload
   metadata:
     name: example-cli-download-links-for-foo
   spec:
     description: |
       This is an example of download links for foo
     displayName: example-foo
     links:
     - href: 'https://www.example.com/public/foo.tar'
       text: foo for linux
     - href: 'https://www.example.com/public/foo.mac.zip'
       text: foo for mac
     - href: 'https://www.example.com/public/foo.win.zip'
       text: foo for windows

   Copy to Clipboard Toggle word wrap
4. Click the Save button.

Procedure

1. From Administration Custom Resource Definitions, click on ConsoleYAMLSample.

2. Click YAML and edit the file:

   apiVersion: console.openshift.io/v1
   kind: ConsoleYAMLSample
   metadata:
     name: example
   spec:
     targetResource:
       apiVersion: batch/v1
       kind: Job
     title: Example Job
     description: An example Job YAML sample
     yaml: |
       apiVersion: batch/v1
       kind: Job
       metadata:
         name: countdown
       spec:
         template:
           metadata:
             name: countdown
           spec:
             containers:
             - name: counter
               image: centos:7
               command:
               - "bin/bash"
               - "-c"
               - "for i in 9 8 7 6 5 4 3 2 1 ; do echo $i ; done"
             restartPolicy: Never

   Copy to Clipboard Toggle word wrap

   Use spec.snippet to indicate that the YAML sample is not the full YAML resource definition, but a fragment that can be inserted into the existing YAML document at the user’s cursor.

3. Click Save.