Serve static assets from NP

package.json

@@ -329,11 +329,13 @@
     "@types/glob": "^7.1.1",
     "@types/globby": "^8.0.0",
     "@types/graphql": "^0.13.2",
+    "@types/h2o2": "^8.1.1",
     "@types/hapi": "^17.0.18",
     "@types/hapi-auth-cookie": "^9.1.0",
     "@types/has-ansi": "^3.0.0",
     "@types/history": "^4.7.3",
     "@types/hoek": "^4.1.3",
+    "@types/inert": "^5.1.2",
     "@types/jest": "24.0.19",
     "@types/joi": "^13.4.2",
     "@types/jquery": "^3.3.31",

packages/kbn-optimizer/src/worker/webpack.config.ts

@@ -135,6 +135,14 @@ export function getWebpackConfig(bundle: Bundle, worker: WorkerConfig) {
                         return null;
                       }
 
+                      if (uri.startsWith('ui/assets')) {
+                        return Path.resolve(
+                          worker.repoRoot,
+                          'src/core/server/core_app/',
+                          uri.replace('ui/', '')
+                        );
+                      }
+
                       // manually force ui/* urls in legacy styles to resolve to ui/legacy/public
                       if (uri.startsWith('ui/') && parseDirPath(base).dirs.includes('legacy')) {
                         return Path.resolve(

packages/kbn-storybook/storybook_config/middleware.js

@@ -22,5 +22,5 @@ const path = require('path');
 
 // Extend the Storybook Middleware to include a route to access Legacy UI assets
 module.exports = function(router) {
-  router.get('/ui', serve(path.resolve(__dirname, '../../../../src/legacy/ui/public/assets')));
+  router.get('/ui', serve(path.resolve(__dirname, '../../../src/core/server/core_app/assets')));
 };

src/core/server/core_app/core_app.ts

@@ -16,6 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import Path from 'path';
+import { fromRoot } from '../../../core/server/utils';
+
 import { InternalCoreSetup } from '../internal_types';
 import { CoreContext } from '../core_context';
 import { Logger } from '../logging';
@@ -29,6 +32,7 @@ export class CoreApp {
   setup(coreSetup: InternalCoreSetup) {
     this.logger.debug('Setting up core app.');
     this.registerDefaultRoutes(coreSetup);
+    this.registerStaticDirs(coreSetup);
   }
 
   private registerDefaultRoutes(coreSetup: InternalCoreSetup) {
@@ -49,4 +53,12 @@ export class CoreApp {
       res.ok({ body: { version: '0.0.1' } })
     );
   }
+  private registerStaticDirs(coreSetup: InternalCoreSetup) {
+    coreSetup.http.registerStaticDir('/ui/{path*}', Path.resolve(__dirname, './assets'));
+
+    coreSetup.http.registerStaticDir(
+      '/node_modules/@kbn/ui-framework/dist/{path*}',
+      fromRoot('node_modules/@kbn/ui-framework/dist')
+    );
+  }
 }

src/core/server/http/base_path_proxy_server.ts

@@ -23,6 +23,7 @@ import { Agent as HttpsAgent, ServerOptions as TlsOptions } from 'https';
 import apm from 'elastic-apm-node';
 import { ByteSizeValue } from '@kbn/config-schema';
 import { Server, Request, ResponseToolkit } from 'hapi';
+import HapiProxy from 'h2o2';
 import { sample } from 'lodash';
 import BrowserslistUserAgent from 'browserslist-useragent';
 import * as Rx from 'rxjs';
@@ -102,7 +103,7 @@ export class BasePathProxyServer {
 
     // Register hapi plugin that adds proxying functionality. It can be configured
     // through the route configuration object (see { handler: { proxy: ... } }).
-    await this.server.register({ plugin: require('h2o2') });
+    await this.server.register([HapiProxy]);
 
     if (this.httpConfig.ssl.enabled) {
       const tlsOptions = serverOptions.tls as TlsOptions;
@@ -166,7 +167,8 @@ export class BasePathProxyServer {
           host: this.server.info.host,
           passThrough: true,
           port: this.devConfig.basePathProxyTargetPort,
-          protocol: this.server.info.protocol,
+          // typings mismatch. h2o2 doesn't support "socket"
+          protocol: this.server.info.protocol as HapiProxy.ProxyHandlerOptions['protocol'],
           xforward: true,
         },
       },
@@ -195,16 +197,17 @@ export class BasePathProxyServer {
           agent: this.httpsAgent,
           passThrough: true,
           xforward: true,
-          mapUri: (request: Request) => ({
-            uri: Url.format({
-              hostname: request.server.info.host,
-              port: this.devConfig.basePathProxyTargetPort,
-              protocol: request.server.info.protocol,
-              pathname: `${this.httpConfig.basePath}/${request.params.kbnPath}`,
-              query: request.query,
+          mapUri: (request: Request) =>
+            Promise.resolve({
+              uri: Url.format({
+                hostname: request.server.info.host,
+                port: this.devConfig.basePathProxyTargetPort,
+                protocol: request.server.info.protocol,
+                pathname: `${this.httpConfig.basePath}/${request.params.kbnPath}`,
+                query: request.query,
+              }),
+              headers: request.headers,
             }),
-            headers: request.headers,
-          }),
         },
       },
       method: '*',

src/core/server/http/http_server.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { Server } from 'hapi';
+import HapiStaticFiles from 'inert';
 import url from 'url';
 
 import { Logger, LoggerFactory } from '../logging';
@@ -44,6 +45,7 @@ export interface HttpServerSetup {
    * @param router {@link IRouter} - a router with registered route handlers.
    */
   registerRouter: (router: IRouter) => void;
+  registerStaticDir: (path: string, dirPath: string) => void;
   basePath: HttpServiceSetup['basePath'];
   csp: HttpServiceSetup['csp'];
   createCookieSessionStorageFactory: HttpServiceSetup['createCookieSessionStorageFactory'];
@@ -97,10 +99,11 @@ export class HttpServer {
     this.registeredRouters.add(router);
   }
 
-  public setup(config: HttpConfig): HttpServerSetup {
+  public async setup(config: HttpConfig): Promise<HttpServerSetup> {
     const serverOptions = getServerOptions(config);
     const listenerOptions = getListenerOptions(config);
     this.server = createServer(serverOptions, listenerOptions);
+    await this.server.register([HapiStaticFiles]);
     this.config = config;
 
     const basePathService = new BasePath(config.basePath);
@@ -109,6 +112,7 @@ export class HttpServer {
 
     return {
       registerRouter: this.registerRouter.bind(this),
+      registerStaticDir: this.registerStaticDir.bind(this),
       registerOnPreAuth: this.registerOnPreAuth.bind(this),
       registerOnPostAuth: this.registerOnPostAuth.bind(this),
       registerOnPreResponse: this.registerOnPreResponse.bind(this),
@@ -339,4 +343,23 @@ export class HttpServer {
       return t.next({ headers: authResponseHeaders });
     });
   }
+
+  private registerStaticDir(path: string, dirPath: string) {
+    if (this.server === undefined) {
+      throw new Error('Http server is not setup up yet');
+    }
+
+    this.server.route({
+      path,
+      method: 'GET',
+      handler: {
+        directory: {
+          path: dirPath,
+          listing: false,
+          lookupCompressed: true,
+        },
+      },
+      options: { auth: false },
+    });
+  }
 }

src/core/server/http/http_service.mock.ts

@@ -72,6 +72,7 @@ const createSetupContractMock = () => {
     registerRouteHandlerContext: jest.fn(),
     registerOnPreResponse: jest.fn(),
     createRouter: jest.fn().mockImplementation(() => mockRouter.create({})),
+    registerStaticDir: jest.fn(),
     basePath: createBasePathMock(),
     csp: CspConfig.DEFAULT,
     auth: createAuthMock(),

src/core/server/http/http_tools.test.ts

@@ -18,6 +18,8 @@
  */
 
 jest.mock('fs', () => ({
+  // Hapi Inert patches native methods
+  ...jest.requireActual('fs'),
   readFileSync: jest.fn(),
 }));
 

src/core/server/http/types.ts

@@ -265,6 +265,7 @@ export interface InternalHttpServiceSetup
   auth: HttpServerSetup['auth'];
   server: HttpServerSetup['server'];
   createRouter: (path: string, plugin?: PluginOpaqueId) => IRouter;
+  registerStaticDir: (path: string, dirPath: string) => void;
   getAuthHeaders: GetAuthHeaders;
   registerRouteHandlerContext: <T extends keyof RequestHandlerContext>(
     pluginOpaqueId: PluginOpaqueId,

src/core/server/legacy/legacy_service.test.ts

@@ -90,7 +90,15 @@ beforeEach(() => {
         contracts: new Map([['plugin-id', 'plugin-value']]),
         uiPlugins: {
           public: new Map([['plugin-id', {} as DiscoveredPlugin]]),
-          internal: new Map([['plugin-id', { publicTargetDir: 'path/to/target/public' }]]),
+          internal: new Map([
+            [
+              'plugin-id',
+              {
+                publicTargetDir: 'path/to/target/public',
+                publicAssetsDir: '/plugins/name/assets/',
+              },
+            ],
+          ]),
           browserConfigs: new Map(),
         },
       },

src/core/server/legacy/legacy_service.ts

@@ -334,6 +334,9 @@ export class LegacyService implements CoreService {
           plugins: startDeps.plugins,
         },
         __internals: {
+          http: {
+            registerStaticDir: setupDeps.core.http.registerStaticDir,
+          },
           hapiServer: setupDeps.core.http.server,
           kibanaMigrator: startDeps.core.savedObjects.migrator,
           uiPlugins: setupDeps.core.plugins.uiPlugins,

src/core/server/plugins/plugins_service.test.ts

@@ -539,13 +539,15 @@ describe('PluginsService', () => {
         config$.next({ plugins: { initialize: true }, plugin1: { enabled: false } });
 
         await pluginsService.discover();
-        const { uiPlugins } = await pluginsService.setup({} as any);
+        const { uiPlugins } = await pluginsService.setup(setupDeps);
         expect(uiPlugins.internal).toMatchInlineSnapshot(`
           Map {
             "plugin-1" => Object {
+              "publicAssetsDir": <absolute path>/path-1/public/assets,
               "publicTargetDir": <absolute path>/path-1/target/public,
             },
             "plugin-2" => Object {
+              "publicAssetsDir": <absolute path>/path-2/public/assets,
               "publicTargetDir": <absolute path>/path-2/target/public,
             },
           }

src/core/server/plugins/plugins_service.ts

@@ -107,6 +107,7 @@ export class PluginsService implements CoreService<PluginsServiceSetup, PluginsS
       this.log.info('Plugin initialization disabled.');
     } else {
       contracts = await this.pluginsSystem.setupPlugins(deps);
+      this.registerPluginStaticDirs(deps);
     }
 
     const uiPlugins = this.pluginsSystem.uiPlugins();
@@ -217,6 +218,7 @@ export class PluginsService implements CoreService<PluginsServiceSetup, PluginsS
           if (plugin.includesUiPlugin) {
             this.uiPluginInternalInfo.set(plugin.name, {
               publicTargetDir: Path.resolve(plugin.path, 'target/public'),
+              publicAssetsDir: Path.resolve(plugin.path, 'public/assets'),
             });
           }
 
@@ -256,4 +258,13 @@ export class PluginsService implements CoreService<PluginsServiceSetup, PluginsS
         )
     );
   }
+
+  private registerPluginStaticDirs(deps: PluginsServiceSetupDeps) {
+    for (const [pluginName, pluginInfo] of this.uiPluginInternalInfo) {
+      deps.http.registerStaticDir(
+        `/plugins/${pluginName}/assets/{path*}`,
+        pluginInfo.publicAssetsDir
+      );
+    }
+  }
 }

src/core/server/plugins/types.ts

@@ -194,6 +194,10 @@ export interface InternalPluginInfo {
    * served
    */
   readonly publicTargetDir: string;
+  /**
+   * Path to the plugin assets directory.
+   */
+  readonly publicAssetsDir: string;
 }
 
 /**

src/core/server/server.api.md

@@ -2345,8 +2345,8 @@ export const validBodyOutput: readonly ["data", "stream"];
 // src/core/server/legacy/types.ts:165:3 - (ae-forgotten-export) The symbol "LegacyAppSpec" needs to be exported by the entry point index.d.ts
 // src/core/server/legacy/types.ts:166:16 - (ae-forgotten-export) The symbol "LegacyPluginSpec" needs to be exported by the entry point index.d.ts
 // src/core/server/plugins/plugins_service.ts:44:5 - (ae-forgotten-export) The symbol "InternalPluginInfo" needs to be exported by the entry point index.d.ts
-// src/core/server/plugins/types.ts:226:3 - (ae-forgotten-export) The symbol "KibanaConfigType" needs to be exported by the entry point index.d.ts
-// src/core/server/plugins/types.ts:226:3 - (ae-forgotten-export) The symbol "SharedGlobalConfigKeys" needs to be exported by the entry point index.d.ts
-// src/core/server/plugins/types.ts:228:3 - (ae-forgotten-export) The symbol "PathConfigType" needs to be exported by the entry point index.d.ts
+// src/core/server/plugins/types.ts:230:3 - (ae-forgotten-export) The symbol "KibanaConfigType" needs to be exported by the entry point index.d.ts
+// src/core/server/plugins/types.ts:230:3 - (ae-forgotten-export) The symbol "SharedGlobalConfigKeys" needs to be exported by the entry point index.d.ts
+// src/core/server/plugins/types.ts:232:3 - (ae-forgotten-export) The symbol "PathConfigType" needs to be exported by the entry point index.d.ts
 
 ```

src/dev/precommit_hook/casing_check_config.js

@@ -41,7 +41,7 @@ export const IGNORE_FILE_GLOBS = [
   '**/.*',
   '**/{webpackShims,__mocks__}/**/*',
   'x-pack/docs/**/*',
-  'src/legacy/ui/public/assets/fonts/**/*',
+  'src/core/server/core_app/assets/fonts/**/*',
   'packages/kbn-utility-types/test-d/**/*',
   '**/Jenkinsfile*',
   'Dockerfile*',
@@ -123,18 +123,18 @@ export const TEMPORARILY_IGNORED_PATHS = [
   'src/legacy/core_plugins/timelion/server/series_functions/__tests__/fixtures/tlConfig.js',
   'src/fixtures/config_upgrade_from_4.0.0_to_4.0.1-snapshot.json',
   'src/legacy/core_plugins/vis_type_vislib/public/vislib/__tests__/lib/fixtures/mock_data/terms/_seriesMultiple.js',
-  'src/legacy/ui/public/assets/favicons/android-chrome-192x192.png',
-  'src/legacy/ui/public/assets/favicons/android-chrome-256x256.png',
-  'src/legacy/ui/public/assets/favicons/android-chrome-512x512.png',
-  'src/legacy/ui/public/assets/favicons/apple-touch-icon.png',
-  'src/legacy/ui/public/assets/favicons/favicon-16x16.png',
-  'src/legacy/ui/public/assets/favicons/favicon-32x32.png',
-  'src/legacy/ui/public/assets/favicons/mstile-70x70.png',
-  'src/legacy/ui/public/assets/favicons/mstile-144x144.png',
-  'src/legacy/ui/public/assets/favicons/mstile-150x150.png',
-  'src/legacy/ui/public/assets/favicons/mstile-310x150.png',
-  'src/legacy/ui/public/assets/favicons/mstile-310x310.png',
-  'src/legacy/ui/public/assets/favicons/safari-pinned-tab.svg',
+  'src/core/server/core_app/assets/favicons/android-chrome-192x192.png',
+  'src/core/server/core_app/assets/favicons/android-chrome-256x256.png',
+  'src/core/server/core_app/assets/favicons/android-chrome-512x512.png',
+  'src/core/server/core_app/assets/favicons/apple-touch-icon.png',
+  'src/core/server/core_app/assets/favicons/favicon-16x16.png',
+  'src/core/server/core_app/assets/favicons/favicon-32x32.png',
+  'src/core/server/core_app/assets/favicons/mstile-70x70.png',
+  'src/core/server/core_app/assets/favicons/mstile-144x144.png',
+  'src/core/server/core_app/assets/favicons/mstile-150x150.png',
+  'src/core/server/core_app/assets/favicons/mstile-310x150.png',
+  'src/core/server/core_app/assets/favicons/mstile-310x310.png',
+  'src/core/server/core_app/assets/favicons/safari-pinned-tab.svg',
   'src/legacy/ui/public/styles/bootstrap/component-animations.less',
   'src/legacy/ui/public/styles/bootstrap/input-groups.less',
   'src/legacy/ui/public/styles/bootstrap/list-group.less',

src/legacy/server/http/index.js

@@ -18,7 +18,6 @@
  */
 
 import { format } from 'url';
-import { resolve } from 'path';
 import _ from 'lodash';
 import Boom from 'boom';
 
@@ -32,22 +31,6 @@ export default async function(kbnServer, server, config) {
 
   await registerHapiPlugins(server);
 
-  // provide a simple way to expose static directories
-  server.decorate('server', 'exposeStaticDir', function(routePath, dirPath) {
-    this.route({
-      path: routePath,
-      method: 'GET',
-      handler: {
-        directory: {
-          path: dirPath,
-          listing: false,
-          lookupCompressed: true,
-        },
-      },
-      config: { auth: false },
-    });
-  });
-
   // helper for creating view managers for servers
   server.decorate('server', 'setupViews', function(path, engines) {
     this.views({
@@ -77,7 +60,4 @@ export default async function(kbnServer, server, config) {
         .permanent(true);
     },
   });
-
-  // Expose static assets
-  server.exposeStaticDir('/ui/{path*}', resolve(__dirname, '../../ui/public/assets'));
 }

src/legacy/server/plugins/lib/plugin.js

@@ -73,7 +73,10 @@ export class Plugin {
       });
 
       if (this.publicDir) {
-        server.exposeStaticDir(`/plugins/${id}/{path*}`, this.publicDir);
+        server.newPlatform.__internals.http.registerStaticDir(
+          `/plugins/${id}/{path*}`,
+          this.publicDir
+        );
       }
 
       // Many of the plugins are simply adding static assets to the server and we don't need