[Proposal] Initial Custom Branding (local config settings)

[abbyhu2000]

Problem Statement

One of the customers’ pain points is to not be able to easily customize OpenSearch Dashboards. If a customer wants dashboard customization, they need to manually fork and change the source code. However, changing source code takes too much time and is likely to fail after each upgrade; on the other hand, lack of engineering qualifications and resources also pose a great challenge to this issue.
We are proposing a way for users to customize OpenSearch Dashboard using opensearch_dashboards.yml file. Our initial target users will be the cluster administrator who configure the application and has access to the opensearch_dashboards.yml file before it is hosted. Our initial targeted branding will be a predefined list of logo and title occurrence in the application. This is a starting point and foundation for more future branding related configurations.

Requirements

Users can configure logo and application title using opensearch_dashboards.yml file. Detailed documentation will be provided for users and developers to follow.

Implementation Proposal

Targeted Logos and Titles

1. Nav bar header Logo with dark mode option
2. Welcome title and logo with dark mode option
3. Loading title and logo with dark mode option
4. Basic browser favicon configuration
5. Browser tab title configuration
6. Primary dashboard card Title and Logo with dark mode option
7. Side Menu Logo with dark mode option
8. Overview header logo with dark mode option

[kavilla]

Related issue: Dark Model Logo Based on Theme

[rohin]

This is an interesting proposal. If customization is something that would interest the community at large we should also explore the option to integrate theme and branding settings directly into the dashboard. There would be a lot of advantages to do that. A theme editor can allow users to modify color/images directly in the UI. You do not know how an image will look till you apply it on the webpage and see how it loads making it a setting that can be adjusted from the dashboard directly can allow you to see the impact and also provide ability to upload, edit and preview before applying.

Making it dynamic will allow users to build themes that meets their corporate styling as well.

Also, if are for the time being looking at a YML based setting we should look at adding a favicon used by browsers.

[abbyhu2000]

@rohin Thank you for your comment! I definitely agree that in the future, we should explore options to integrate theming and branding setting directly into the dashboard for a better user experience. We are starting with yml file and this will serve as the foundation for future branding configuration such as incorporating a theming and branding section into the Advanced Setting section. Currently this approach will need more time and consideration due to complexities and potential impact to other plugins.
Making favicon configurable is also a good idea! Favicon usually comes with a whole package because the size and resolution requirements on every browser are different, so we think it will not be ideal to ask the users to provide a list of different version of favicon images in the yml file. We are starting with making the favicon configurable by documenting the steps for changing favicon and the specific folder where the cluster administrator can import the favicon package. In the future, we will be thinking about other potential solutions to improve the user experience.
Any insights or comments are appreciated!

[adaisley]

Hi,

We previously pulled our own version of OpenDistro to make some basic branding changes like the ones you've listed above, plus favicons. The main other change we did make is customisation of the Header Help Menu, to have a link to a .pdf of a Getting Started guide that we created. We'd like to move over to an off-the-shelf solution of OpenSearch Dashboards, without having to modify and build our own version of OSD with these changes made.

Would there be scope for adding a customisable header help menu? Not necessarily with this current issue, but maybe one in future?

Cheers.

[abbyhu2000]

@adaisley Thank you for bringing this up! We will consider adding the header menu customization to the current issue.

[rambhual]

Could you please help me I am getting error when adding brandind

ValidationError: child "opensearchDashboards" fails because ["branding" is not allowed]

Can anyone post code here please

[abbyhu2000]

@ramprits Hi, how did you run this code? This feature is still in PR and have not merged into main branch and not been released yet. We are targeting to release in 1.2. Thanks!

[rambhual]

I found a YouTube video there she explained how to configure these things.
I want to configure and waiting for new release thank you for quick reply.

Youtube link

[tchury]

How can we update the logo on the login page?

[adaisley]

How can we update the logo on the login page?

We currently take a copy of the security plugin from source, run a .patch file which includes updating the logo on the login page by modifying the svg code in public/assets/opensearch_logo_h.svg and then build the plugin.

Ideally, there would be a opensearch_security.branding.logo.defaultUrl option in opensearch_dashboards.yml, but I can appreciate that might be a bit more challenging due to having to alter the plugin to work with it.

[tchury]

Thank you adaisley. Will give this a try.

[tchury]

The following to opensearchdashboards.yml to get this to work:
opensearch_security.ui.basicauth.login.title: "Our message"
opensearch_security.ui.basicauth.login.brandimage: "Our base64 encoded image"

[amanthakur]

Anyone can tell me please how I can change (please login to open search ) login page text . Where and how I can change this text . ??

[amanthakur]

,external_osdSharedDeps_React_default.a.createElement(external_osdSharedDeps_ElasticEui_["EuiText"],{size:"m",textAlign:"center"},props.config.title|| ("please login open Search Dashboard ")

i want this with my custom text but when i am changing it my custom text is not visual on login page there is same this text please anyonen can help me change this ????

[faabsen]

,external_osdSharedDeps_React_default.a.createElement(external_osdSharedDeps_ElasticEui_["EuiText"],{size:"m",textAlign:"center"},props.config.title|| ("please login open Search Dashboard ")

i want this with my custom text but when i am changing it my custom text is not visual on login page there is same this text please anyonen can help me change this ????

Offtopic: you have to add the following to your opensearch_dashboards.yml:

opensearch_security.ui.basicauth.login.title: "Title"
opensearch_security.ui.basicauth.login.subtitle: "Subtitle"
opensearch_security.ui.basicauth.login.brandimage: "URL"
opensearch_security.ui.basicauth.login.buttonstyle: "eui-class"

[vmm-afonso]

The following to opensearchdashboards.yml to get this to work: opensearch_security.ui.basicauth.login.title: "Our message" opensearch_security.ui.basicauth.login.brandimage: "Our base64 encoded image"

Hey there. After base64 encoding your image, what format did you specify on your opensearch_dashboards.yml? Also what was the original format?