Make loading page logo and title configurable (#746)

Add one new config branding.loadingLogoUrl for making loading page logo
configurable. URL can be in svg and gif format. If no loading logo is found,
the static logo with a horizontal bar loading bar will be shown. If logo is also
not found, the default OpenSearch loading logo and spinner will be shown.

Signed-off-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com>

config/opensearch_dashboards.yml

@@ -157,6 +157,9 @@
 # smaller version customized logo URL
 # opensearchDashboards.branding.smallLogoUrl: ""
 
+# customized loading logo URL
+# opensearchDashboards.branding.loadingLogoUrl: ""
+
 # custom application title
 # opensearchDashboards.branding.title: ""
 

src/core/server/opensearch_dashboards_config.ts

@@ -59,6 +59,9 @@ export const config = {
       smallLogoUrl: schema.string({
         defaultValue: '/',
       }),
+      loadingLogoUrl: schema.string({
+        defaultValue: '/',
+      }),
       title: schema.string({ defaultValue: 'OpenSearch Dashboards' }),
     }),
   }),

src/core/server/rendering/rendering_service.test.ts

@@ -136,6 +136,7 @@ describe('RenderingService', () => {
       });
     });
   });
+
   describe('checkUrlValid()', () => {
     it('SVG URL is valid', async () => {
       const result = await service.checkUrlValid(
@@ -144,17 +145,20 @@ describe('RenderingService', () => {
       );
       expect(result).toEqual(true);
     });
+
     it('PNG URL is valid', async () => {
       const result = await service.checkUrlValid(
         'https://opensearch.org/assets/brand/PNG/Mark/opensearch_mark_default.png',
         'config'
       );
       expect(result).toEqual(true);
     });
-    it('URL does not contain svg, or png', async () => {
+
+    it('URL does not contain svg, png or gif', async () => {
       const result = await service.checkUrlValid('https://validUrl', 'config');
       expect(result).toEqual(false);
     });
+
     it('URL is invalid', async () => {
       const result = await service.checkUrlValid('http://notfound.svg', 'config');
       expect(result).toEqual(false);

src/core/server/rendering/rendering_service.tsx

@@ -71,6 +71,10 @@ export class RenderingService {
       opensearchDashboardsConfig.branding.smallLogoUrl,
       'smallLogoUrl'
     );
+    const isLoadingLogoUrlValid = await this.checkUrlValid(
+      opensearchDashboardsConfig.branding.loadingLogoUrl,
+      'loadingLogoUrl'
+    );
 
     return {
       render: async (
@@ -125,6 +129,9 @@ export class RenderingService {
               smallLogoUrl: isSmallLogoUrlValid
                 ? opensearchDashboardsConfig.branding.smallLogoUrl
                 : undefined,
+              loadingLogoUrl: isLoadingLogoUrlValid
+                ? opensearchDashboardsConfig.branding.loadingLogoUrl
+                : undefined,
               title: opensearchDashboardsConfig.branding.title,
             },
           },
@@ -144,7 +151,7 @@ export class RenderingService {
   }
 
   public checkUrlValid = async (url: string, configName?: string): Promise<boolean> => {
-    if (url.match(/\.(png|svg)$/) === null) {
+    if (url.match(/\.(png|svg|gif)$/) === null) {
       this.logger.get('branding').warn(configName + ' config is not found or invalid.');
       return false;
     }

src/core/server/rendering/types.ts

@@ -77,6 +77,7 @@ export interface RenderingMetadata {
     branding: {
       logoUrl?: string;
       smallLogoUrl?: string;
+      loadingLogoUrl?: string;
       title: string;
     };
   };