[Branding] Support for Local File Paths in branding configuration

[ABurns1263]

Is your feature request related to a problem? Please describe.
My company requires being able to reference a local image for branding, instead of a url to an image, in the opensearch_dashboards.yaml file.

Describe the solution you'd like

We would like to be able to use local file paths in the branding configuration, as ssl key and configuration do in the same file.

Describe alternatives you've considered

We have tried to reference local file paths using
http://localhost:
http://127.0.0.1
file:///
before our local file path to icons, however these did not configure the images onto opensearch dashboards

[kavilla]

Hey @ABurns1263, thanks for opening this.

If you could clarify:

We have tried to reference local file paths using
http://localhost:
http://127.0.0.1
file:///
before our local file path to icons, however these did not configure the images onto opensearch dashboards

Are you serving up like images locally? The branding should have access to localhost images as long as you are serving up those images with your own web server to be accessible by localhost. But if you are just attempting to access files directly from localhost it shouldn't work.

If you don't really want to go about creating a web server to host those images or utilize a cloud storage. There is a workaround:

This is assuming you downloaded the release and hosting on 5601 (but you can supplement your port), but anything under src/core/server/core_app/assets gets served up under ui.

For example if I put a pizza.svg in that folder I could set the config to point be:

opensearchDashboards.branding:
  logo:
    defaultUrl: http://localhost:5601/ui/pizza.svg

But there are some cons with that:

• If you take a new release those images will be lost so you will have to re-add those if you go to a new version.
• It's a nested folder
• If you trying to do it from forking the project it's the same file path: https://github.com/opensearch-project/OpenSearch-Dashboards/tree/main/src/core/server/core_app/assets, but the endpoint it gets served up will change based on the random generation 3 digit characters if you run the application out of the box. So you will have to modify your config and refresh the page. But if you are just using the release then ignore this point.

We would like to be able to use local file paths in the branding configuration, as ssl key and configuration do in the same file.

I believe the application checks if those values are set and serves the SSL files to be accessible by the application from the file path provided. Which is do-able but might be backlogged unless a member of the community would like to implement it.

One final point: I see #1019. This might be another option as well.

[enp]

Problem is here - https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/core/server/rendering/rendering_service.tsx#L317 - this code must be reimplemented to allow configuration like so opensearchDashboards.branding.logo.defaultUrl: '/ui/default_branding/opensearch_logo.svg' and validate it as local file https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/core/server/core_app/assets/default_branding/opensearch_logo.svg

[kavilla]

Problem is here - https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/core/server/rendering/rendering_service.tsx#L317 - this code must be reimplemented to allow configuration like so opensearchDashboards.branding.logo.defaultUrl: '/ui/default_branding/opensearch_logo.svg' and validate it as local file https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/core/server/core_app/assets/default_branding/opensearch_logo.svg

Sorry about the late reply! In this do you propose to pointing to the github repo? @enp

@ABurns1263, I believe we can hijack this issue to allow for adding assets folder at the root level of the application that can be served up under /ui as well. For example, OpenSearch Dashboards/assets then on startup the application will host those files along with the other files in OpenSearch Dashboards/src/core/server/core_app/asset. Will this solve your problem or do you need the ability to point to a specific file directory?

[enp]

I believe we can hijack this issue to allow for adding assets folder at the root level of the application that can be served up under /ui as well. For example, OpenSearch Dashboards/assets then on startup the application will host those files along with the other files in OpenSearch Dashboards/src/core/server/core_app/asset. Will this solve your problem or do you need the ability to point to a specific file directory?

Specific directory not mandatory, predefined looks enough

[Stek0v]

Colleagues, is there any news on this feature? @kavilla ?

[Ironem]

This is assuming you downloaded the release and hosting on 5601 (but you can supplement your port), but anything under src/core/server/core_app/assets gets served up under ui.

For example if I put a pizza.svg in that folder I could set the config to point be:

opensearchDashboards.branding:
  logo:
    defaultUrl: http://localhost:5601/ui/pizza.svg

I just tried to put an image in the src/core/server/core_app/assets folder and try to use it in the yml file and it does not work. I did the exact same thing that you described but I still get :

{"type":"log","@timestamp":"2022-03-24T15:15:09Z","tags":["info","branding"],"pid":14263,"message":"logo default config is not found or invalid"}                                                                          
{"type":"log","@timestamp":"2022-03-24T15:15:09Z","tags":["info","branding"],"pid":14263,"message":"mark default config is not found or invalid"}                                                                          
{"type":"log","@timestamp":"2022-03-24T15:15:09Z","tags":["info","branding"],"pid":14263,"message":"loadingLogo default config is not found or invalid"}                                                                   
{"type":"log","@timestamp":"2022-03-24T15:15:09Z","tags":["info","branding"],"pid":14263,"message":"favicon config is not found or invalid"}       

Is it possible that you missed something?

[kavilla]

Hey @Ironem,

There is an update https://opensearch.org/docs/latest/dashboards/branding/, for main and 1.3 release you can actually drop those file in the root level assets folder. These files will hosted under ui/assets, so you can point it to http://localhost:5601/ui/assets/pizza.svg . One thing to mention though, this is for releases, if you are doing local development it will be hosted under your the url that your OpenSearch Dashboards is hosted under. For example, if navigate to OpenSearch Dashboards and the url is http://localhost:5601/ui/xyz then you will need to make sure your config is http://localhost:5601/xyz/ui/assets/pizza.svg so it's not particularly friendly for local development in when doing work in public folders but if you are doing work in server folders then you don't need to restart the application.

There's also a note about SSL in the docs, if you are have server.ssl.enabled: true the SVG will be hosted under https://localhost:5601/ui/assets/pizza.svg.

With that if you hit http://localhost:5601/ui/pizza.svg directly in your browser to you see the SVG you provided?

Let me know!

Thank you!

[Ironem]

Hi @kavilla,

Thank you for your response. So as you mentioned, in 1.3 release, we can put files directly in the root assets folder, and we can point to it with http://localhost:5601/ui/assets/pizza.svg. This works in local environment, but when we put the OpenSearch Dashboards on an vm, the client side cannot resolve the localhost:5601.

So I'm wondering if it's possible to put a absolute path in yml like: ../assets/pizza.svg or something alike in order to tell to the dashboard to get the image directly in the current project.

Thank you again!

[Ironem]

Hello @kavilla, do you have any updates on this issue?

[Stek0v]

Hi @kavilla, мaybe there was some movement in solving this issue, which stretches from release to release?  

[lilaby21]

Hi, any news on this ? I have the same issue.

[git-blame]

I patch the file rendering_service.js to support relative URL. It's a 1-line change:

_defineProperty(this, "isUrlValid", async (url, configname) => {
  if (url === '/') {
    return false;
  }

  /** Workaround: support for relative URL, does nothing if URL is absolute/contains host info
   *  TODO: Retrieve protocol + port from configuration
   */
  url = new URL(url, 'https://localhost:5601').toString();

...

A related note: If you are using server base path, you need to include that with your icon URL (with or without the patch)

server.basePath: /foobar
server.rewriteBasePath: true

opensearchDashboards.branding:
  logo:
    defaultUrl: "/foobar/ui/..." # with patch
    defaultUrl: "https://localhost:5601/foobar/ui/..." # without patch
...

[bdovaz]

Same problem but in my case, I would like that the solution doesn't require to indicate a base path as in @git-blame's comment... It should agnostic over it as in the default paths that includes the serverBasePath:

OpenSearch-Dashboards/src/core/common/logos/get_logos.ts

Line 81 in b85e177

const defaultLightColorSchemeOpenSearchDashboards = `${serverBasePath}/${OPENSEARCH_DASHBOARDS_ON_LIGHT}`;