RFC: Adding banner to distinguish multiple Foreman instances

Hi everyone!

Currently, we have a feature called “instance title” that adds an icon to the header and provides a tooltip to indicate which Foreman instance the user is working on.
Screenshot from 2023-07-05 14-32-13

We have received feedback suggesting that the icon is not easily noticeable, and users would prefer something more prominent, such as a banner.

With recent UI changes to the pages, we now have the opportunity to implement a banner. Since the banner can have different colors, I suggest adding a setting to allow users to select their preferred color. However, if you have alternative ideas on how we can handle color selection, please don’t hesitate to share them.

Here is what the banner will look like (in red and grey):


We welcome any feedback or suggestions on this proposed change. If you believe there is a better approach or any other ideas that could improve the user experience, please let us know.

1 Like

@Bernhard_Suttner originally implemented the feature in Feature #29024: customize/branding/theming of title bar to help distiguish multiple Foremans from each other, aka POC/Test/Prod - Foreman so perhaps he can weigh in here.

1 Like

Does this banner display for all users? Is it hideable?

A banner above the entire UI seems like it would be more useful for, say, emphatic deprecation warnings such as the upcoming katello-agent removal. Differentiating between instances should be easily viewable, but I also feel like it shouldn’t overshadow the rest of the UI. The first thing I would expect as a user is to just be able to change the logo. Or maybe put some additional text below the logo.

maybe @MariSvirik has more ideas?

1 Like

Does this banner display for all users?

The banner is only displayed if instance title is defined.

Is it hideable?

Maybe we can hide it and use session storage to remember the choice?

Differentiating between instances should be easily viewable, but I also feel like it shouldn’t overshadow the rest of the UI

Another placement for the banner is under the header, like this:

the first thing I would expect as a user is to just be able to change the logo

I’m not sure we can do that for downstream, and its less accessible as users will have to create their own logo and upload it, instead of just typing a name and selecting a color.

Or maybe put some additional text below the logo.

users wanted a different color for a quick visual difference, which is provided by the different colors

We already decided this some time ago - to have it on the top.

And users would opt-in to see this, so it would be hideable via settings.

What are the colors users can choose from?
I feel like red is suggesting a problem, error - but I am aware that this would be user’s choice.

I like it as a simple solution for what it is meant for: differentiation between environments.

For theming what many corporations want to make it match the corporate design much more is needed, including the logo others already mentioned.

So :+1: from me (as long it does not block theming if this would be tackled later).

What are the colors users can choose from?

The colors that are presented here:
but if needed we can customize it with css (and I will need @MariSvirik to provide a specific color list, or we can maybe just do a color selector with all colors)
https://www.patternfly.org/v4/components/banner

hideable via settings.

@MariSvirik The instance title setting are per Foreman, not per user currently.

(as long it does not block theming if this would be tackled later).

@Dirk What will be something that is blocking/not blocking theming?

Typically what customers want to customize for corporate design is the logo and main color, sometimes also a secondary color. This is why I like this simple approach as you could easily use different secondary colors allowed by the corporate design to differentiate the instances while switching the main color blue of Foreman to the main color of the Company and change the logo.

To give some examples for corporate themes I did see in the past on our Icinga customers (so no Foreman example here):

  • One part of Deutsche Telekom has switched blue to magenta and changed the logo to theirs.
  • One bank has switched the blue to yellow, changed the logo to theirs and on the login screen they changed the background to match their current marketing campaign and added some information how to login.
  • The IT department of a chain of stores did added the instance title to the logo with incorporate their logo with the one from Icinga while switching some colors of the webinterface.

Something similar is what I would expect as a theming option if Foreman wants to provide this feature for users/customers who want this.

It’s a very interesting feature :slightly_smiling_face:

We communicate to our users via several channels but there are always people who are missing.

As they often go to the interface, they will see that there is something going on on the instance (such as maintenance operations, upgrades, …)

:+1: A very simple solution.

You can modify your settings to use a different RSS URL. Then all you need to do is to publish some RSS feed somewhere and users will be notified about news.

I have done this by hacking the RSS it would be extremely nice to make it available in settings.

BUT, I would suggest making this a generic banner type feature and not just an instance feature.

This could also then be used for other things like, putting up a red banner of:
“Foreman Server Upgrade Will Occur on THIS Friday, and system will be unavailable.” or some such messages as well to notify the users.

It should also probably hide and not take up a line on the interface if not enabled.

The RSS URL is a setting, so I’m not sure what you mean.

On the original topic, I like the proposed option as a “quick fix” for what a lot of people asked for.
The design with a one-color banner-block over the top bar is not very pretty imo, but at least it is consistent with how a lot of other applications I have seen using such a feature have implemented this. I find the color selection to be somewhat limited, but it should be enough for the intended use cases.

Thanks @MariaAga for this idea and thanks @ekohl to ping me.

The icon was OK for us and for our customers. To have a separate banner sounds like a good improvement. Actually, I don’t like the idea to have another setting to just set the background color. We have to many settings. Maybe it can be hard-coded using a color of the currently used theme?

What do you mean by currently used theme?

the “foreman” theme has some nice colors which can be picked. And if satellite and orcharhino re-use this color definition name, it will simply look great :wink:

But if users have 2 orcharhinos and the banner uses the colors of it, wouldnt it mean that both banner will be the same green?

Yes. Looks like the idea was to have different colors for different instances… :slight_smile:
If this is the reason, the icon can have different colors, too. No reason to have this big banner then. The color can be “hard-coded” and calculated on the base of the foreman host name.

If you have banner and the text is crystal clear, there is no need to have fancy colorful banner.

Yes, there are a lot of settings in Foreman, but that should not block actually useful settings to not be included. As far as I understand it, the banner is primarily intended to differentiate multiple Foreman instances, and for most people it’s way easier to see if a differing colour than to ready a text in that banner. If “Read the text” was enough, there would be no need for such a feature since people can already read the URL bar :wink:

How would you propose this should work? I can’t imagine how you would “calculate” what colour the banner should have.

Why not just provide a box to setting fg/bg colors at least via #FFFFFF html codes with a default of white on grey or something?

Many people will want to use their own scheme, like Red for production, Green for test etc… and others may have other ideas they want to use like Yellow for “notices”.