[Branding] assets folder and SSL support (#1329)

Adding `assets` folder that gets served up under UI for ease of us.

SSL support when OpenSearch Dashboards SSL is enabled.

Issue Resolved:
#1164

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

assets/.gitignore

@@ -0,0 +1,4 @@
+# Ignore everything in this directory
+*
+# Except this file
+!.gitignore

src/core/server/core_app/core_app.ts

@@ -89,6 +89,7 @@ export class CoreApp {
   }
   private registerStaticDirs(coreSetup: InternalCoreSetup) {
     coreSetup.http.registerStaticDir('/ui/{path*}', Path.resolve(__dirname, './assets'));
+    coreSetup.http.registerStaticDir('/ui/assets/{path*}', fromRoot('assets'));
 
     coreSetup.http.registerStaticDir(
       '/node_modules/@osd/ui-framework/dist/{path*}',

src/core/server/rendering/rendering_service.tsx

@@ -34,6 +34,7 @@ import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { first, take } from 'rxjs/operators';
 import { i18n } from '@osd/i18n';
+import { Agent as HttpsAgent } from 'https';
 
 import Axios from 'axios';
 // @ts-expect-error untyped internal module used to prevent axios from using xhr adapter in tests
@@ -50,22 +51,29 @@ import {
   BrandingAssignment,
 } from './types';
 import { OpenSearchDashboardsConfigType } from '../opensearch_dashboards_config';
+import { HttpConfigType } from '../http/http_config';
+import { SslConfig } from '../http/ssl_config';
 
 const DEFAULT_TITLE = 'OpenSearch Dashboards';
 
 /** @internal */
 export class RenderingService {
   constructor(private readonly coreContext: CoreContext) {}
   private logger = this.coreContext.logger;
+  private httpsAgent?: HttpsAgent;
+
   public async setup({
     http,
     status,
     uiPlugins,
   }: RenderingSetupDeps): Promise<InternalRenderingServiceSetup> {
-    const opensearchDashboardsConfig = await this.coreContext.configService
-      .atPath<OpenSearchDashboardsConfigType>('opensearchDashboards')
-      .pipe(first())
-      .toPromise();
+    const [opensearchDashboardsConfig, serverConfig] = await Promise.all([
+      this.coreContext.configService
+        .atPath<OpenSearchDashboardsConfigType>('opensearchDashboards')
+        .pipe(first())
+        .toPromise(),
+      this.coreContext.configService.atPath<HttpConfigType>('server').pipe(first()).toPromise(),
+    ]);
 
     return {
       render: async (
@@ -87,9 +95,12 @@ export class RenderingService {
         const darkMode = settings.user?.['theme:darkMode']?.userValue
           ? Boolean(settings.user['theme:darkMode'].userValue)
           : false;
+
+        this.setupHttpAgent(serverConfig as HttpConfigType);
+
         const brandingAssignment = await this.assignBrandingConfig(
           darkMode,
-          opensearchDashboardsConfig
+          opensearchDashboardsConfig as OpenSearchDashboardsConfigType
         );
 
         const metadata: RenderingMetadata = {
@@ -150,6 +161,26 @@ export class RenderingService {
 
   public async stop() {}
 
+  /**
+   * Setups HTTP Agent if SSL is enabled to pass SSL config
+   * values to Axios to make requests in while validating
+   * resources.
+   *
+   * @param {Readonly<HttpConfigType>} httpConfig
+   */
+  private setupHttpAgent(httpConfig: Readonly<HttpConfigType>) {
+    if (httpConfig.ssl?.enabled) {
+      const sslConfig = new SslConfig(httpConfig.ssl);
+      this.httpsAgent = new HttpsAgent({
+        ca: sslConfig.certificateAuthorities,
+        cert: sslConfig.certificate,
+        key: sslConfig.key,
+        passphrase: sslConfig.keyPassphrase,
+        rejectUnauthorized: false,
+      });
+    }
+  }
+
   /**
    * Assign values for branding related configurations based on branding validation
    * by calling checkBrandingValid(). For dark mode URLs, add additonal validation
@@ -322,7 +353,11 @@ export class RenderingService {
       this.logger.get('branding').error(`${configName} config is invalid. Using default branding.`);
       return false;
     }
-    return await Axios.get(url, { adapter: AxiosHttpAdapter, maxRedirects: 0 })
+    return await Axios.get(url, {
+      httpsAgent: this.httpsAgent,
+      adapter: AxiosHttpAdapter,
+      maxRedirects: 0,
+    })
       .then(() => {
         return true;
       })

src/dev/build/tasks/clean_tasks.ts

@@ -204,11 +204,12 @@ export const CleanEmptyFolders: Task = {
 
   async run(config, log, build) {
     // Delete every single empty folder from
-    // the distributable except the plugins
-    // and data folder.
+    // the distributable except the plugins,
+    // data, and assets folder.
     await deleteEmptyFolders(log, build.resolvePath('.'), [
       build.resolvePath('plugins'),
       build.resolvePath('data'),
+      build.resolvePath('assets'),
     ]);
   },
 };

src/dev/build/tasks/create_empty_dirs_and_files_task.ts

@@ -31,6 +31,10 @@ export const CreateEmptyDirsAndFiles: Task = {
   description: 'Creating some empty directories and files to prevent file-permission issues',
 
   async run(config, log, build) {
-    await Promise.all([mkdirp(build.resolvePath('plugins')), mkdirp(build.resolvePath('data'))]);
+    await Promise.all([
+      mkdirp(build.resolvePath('plugins')),
+      mkdirp(build.resolvePath('data')),
+      mkdirp(build.resolvePath('assets')),
+    ]);
   },
 };

src/dev/build/tasks/os_packages/run_fpm.ts

@@ -126,6 +126,8 @@ export async function runFpm(
     `usr/share/opensearch-dashboards/config`,
     '--exclude',
     `usr/share/opensearch-dashboards/data`,
+    '--exclude',
+    `usr/share/opensearch-dashboards/assets`,
 
     // flags specific to the package we are building, supplied by tasks below
     ...pkgSpecificFlags,

test/server_integration/http/ssl/index.js

@@ -37,5 +37,13 @@ export default function ({ getService }) {
     it('handles requests using ssl', async () => {
       await supertest.get('/').expect(302);
     });
+
+    it('handles UI requests using ssl', async () => {
+      await supertest.get('ui/').expect(302);
+    });
+
+    it('handles UI assests requests using ssl', async () => {
+      await supertest.get('ui/assets').expect(302);
+    });
   });
 }