OCP4 Web Console Asthetic Improvements

[StevenBarre]

Describe the issue The web console should look different between each cluster. It should also have a useful <title> tag in the HTML.

Additional context We can change the title tag with https://github.com/bcgov-c/platform-ops/blob/ocp4-base/ocp4/roles/web-console/tasks/main.yaml#L35

We can have a custom logo for each cluster.

We can add custom banners as we already do in LAB.

Definition of done Checklist (where applicable) Add a title for each Cluster as shown in the attached images. Titles for LAB Clusters will be "KAMLOOPS LAB CLUSTER" and "CALGARY LAB CLUSTER". The ALT Text of the browser window should match the title of the concole.

[StevenBarre]

I think the best way to get what you are looking for is to just make that logo image really wide with the color and title in it.

We can only make changes in the ways supported by the operator. See the docs for all the options https://docs.openshift.com/container-platform/4.6/web_console/customizing-the-web-console.html

We should also look at maybe adding some links to docs to the little tick-tac-toe icon on the top right. Perhaps the dev hub?

Our previous discussions were in https://app.zenhub.com/workspaces/platform-experience-5bb7c5ab4b5806bc2beb9d15/issues/bcdevops/openshift4-rollout/88

[StevenBarre]

https://www.openshift.com/blog/blog-openshift-console-customization

[StevenBarre]

@mitovskaol is someone going to generate the images for me? I'm not much of a designer.

Did we make any decisions about extra links to add? Maybe to the dev hub?

[mitovskaol]

If I remember correctly @sbathgate volunteered to help with the images. In terms of the links, lets make the BCDevExchange logo clickable and point to DevHub.

[StevenBarre]

lets make the BCDevExchange logo clickable

As stated before:

We can only make changes in the ways supported by the operator. See the docs for all the options https://docs.openshift.com/container-platform/4.6/web_console/customizing-the-web-console.html

We should also look at maybe adding some links to docs to the little tick-tac-toe icon on the top right.

[sbathgate]

I can put something together for you. Wouldn't consider myself a designer but I can make something up in Photoshop that should work.

[StevenBarre]

Proposed solution is to use the banner thingy.

apiVersion: console.openshift.io/v1
kind: ConsoleNotification
metadata:
  name: kamloops-silver-cluster
spec:
  text: "KAMLOOPS SILVER CLUSTER |"
  location: BannerTop
  link:
    href: 'https://developer.gov.bc.ca'
    text: DevHub
  color: '#000'
  backgroundColor: '#C0C0C0'

Other cluster colors are

• SILVER #C0C0C0 / #000000
• KLAB #FF0000 / #FFFFFF
• Gold #FFD700 / #000000
• GoldDR #A38A00 / #000000
• CLAB #FFC0CB / #000000
• KLAB2 #00D100 / #000000

[StevenBarre]

@mitovskaol Looks like we also need a colour chosen for GOLDDR / Calgary Gold Cluster

[StevenBarre]

PR is ready to merge for SILVVER https://github.com/bcgov-c/platform-gitops-kamloops-silver/pull/15/files

I don't think we need a CHG for this do we? or a post in the alerts channel?

[mitovskaol]

@sbarre-esit it is a minor chage, so just a post in #devops-alerts should be sufficient

[StevenBarre]

Merged and tested in SILVER. Will close this now and revisit once more clusters get into CCM to get their colors.

[j-pye]

@mitovskaol Looks like we also need a colour chosen for GOLDDR / Calgary Gold Cluster?

Just following up on this. Making a diagram and it would be helpful to have the right color for GoldDR :)

[mitovskaol]

@j-pye We will go with #FFD700 for Gold.

[StevenBarre]

@mitovskaol Calgary GOLD DR should be a different color than Kamloops GOLD though?

[mitovskaol]

@sbarre-esit How about we show a thin red horizontal strip on the top of the Gold DR banner (the banner colour will be gold as in Gild cluster)?

[StevenBarre]

@mitovskaol that is not something the ConsoleNotification object supports. As shown above it only accepts values for text, text color, and background color.

[mitovskaol]

What do you think of darker gold color #A38A00?

[StevenBarre]

Works for me