UI: Add ability to visually distinguish between deployment environments

[thundergolfer]

Is this a BUG REPORT or FEATURE REQUEST?: FEATURE REQUEST

We run a dev environment and a production environment, which is fairly typical. We currently access the argo-ui through a proxy cmd, and I think it's easy enough to not specific the environment (dev/prod) properly and get confused as both look visually the same.

What do you think about this problem? If/When we place domains in front of the UIs, eg. dev-argo-ui.company-ds.com and prod-argo-ui.company-ds.com I think this issue will be alleviated, but not totally fixed as no element exists in the UI to display the deployment environment.

[MaksimKiselev]

@thundergolfer

I've use custom user css styles installed via browser extensions for mark that some environment is production.

F.e. for chrome https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb

html:before {
    display: block;
    height: 40px;
    content: '';
}

body:after {
    position: fixed;
    z-index: 9999999;
    height: 40px;
    top: 0;
    width: 100%;
    background-color: red;
    color: white;
    display: block;
    font-size: 35px;
    content: 'PRODUCTION';
    font-weight: bold;
    text-align: center;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        color: red;
    }
}

[scompt]

@alexec Can you provide some insight into what a mergeable solution for this could look like? I've also used CSS in the past to distinguish environments and it seems like a decent idea. It would also allow some rudimentary branding/customization.

The first idea that comes to mind would be to add a key to the Workflow Controller Configmap to specify some CSS that gets injected into the header of the server. It doesn't look like there's a separate server config map.

[alexec]

I think it should go in the config map too. That way we can pass it to workflow pods.

I suggest it's just called environment. This will need to be returned via the GetInfo endpoint so that the UI can inspect the value. It can then add a class to the (see app-router.tsx) identifying the environment.

Rather than CSS, I suggest that we add a floating icon next <ChatButton/>.

@alexmt we should make what ever we do consistent with Argo CD.

[dtaniwaki]

Are we going to make the same approach with ArgoCD?
https://github.com/argoproj/argo-cd/blob/master/docs/operator-manual/custom-styles.md

[dtaniwaki]

@alexec @alexmt
I have implemented the custom CSS feature. Would you review it?
#6282

We can pass another value in the settings endpoint if we'd like to customize a floating icon as @alexec suggested in the future.

[tooptoop4]

/reopen as only navbar option was done

[agilgur5]

/reopen as only navbar option was done

The issue did not specify anything concrete, so the added feature did in fact cover it.

It would be much better to open a new issue with specific details on what "option" you want (custom CSS?) rather than try to reopen a completed 5+ year old one

[agilgur5]

Custom themes (a bit different from arbitrary CSS), as mentioned in #6282 (review), is also the topic of #10825