[POC] Script-based visualizations

docs/developer/plugin-list.asciidoc

@@ -329,6 +329,10 @@ The plugin exposes the static DefaultEditorController class to consume.
 |WARNING: Missing README.
 
 
+|{kib-repo}blob/{branch}/src/plugins/vis_type_script/README.md[visTypeScript]
+|This plugin defines the script-based visualization type. Users can use JavaScript and the popular D3 library to build script-based custom visualizations directly in Kibana.
+
+
 |{kib-repo}blob/{branch}/src/plugins/vis_types/table/README.md[visTypeTable]
 |Contains the data table visualization, that allows presenting data in a simple table format.
 

package.json

@@ -198,6 +198,7 @@
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mapbox/vector-tile": "1.3.1",
     "@reduxjs/toolkit": "^1.6.1",
+    "@remote-ui/rpc": "1.3.0",
     "@slack/webhook": "^5.0.4",
     "@turf/along": "6.0.1",
     "@turf/area": "6.0.1",

src/core/public/index.ts

@@ -61,6 +61,7 @@ import { DeprecationsServiceStart } from './deprecations';
 import type { ThemeServiceSetup, ThemeServiceStart } from './theme';
 import { ExecutionContextSetup, ExecutionContextStart } from './execution_context';
 import type { AnalyticsServiceSetup, AnalyticsServiceStart } from './analytics';
+import type { InjectedMetadataSetup } from './injected_metadata';
 
 export type {
   PackageInfo,
@@ -251,6 +252,7 @@ export interface CoreSetup<TPluginsStart extends object = object, TStart = unkno
    * */
   injectedMetadata: {
     getInjectedVar: (name: string, defaultValue?: any) => unknown;
+    getCsp: () => ReturnType<InjectedMetadataSetup['getCspConfig']>;
   };
   /** {@link ThemeServiceSetup} */
   theme: ThemeServiceSetup;

src/core/public/injected_metadata/injected_metadata_service.ts

@@ -161,6 +161,7 @@ export interface InjectedMetadataSetup {
   getKibanaVersion: () => string;
   getCspConfig: () => {
     warnLegacyBrowsers: boolean;
+    nonce: string;
   };
   getExternalUrlConfig: () => {
     policy: IExternalUrlPolicy[];

src/core/public/plugins/plugin_context.ts

@@ -95,6 +95,7 @@ export function createPluginSetupContext<
     uiSettings: deps.uiSettings,
     injectedMetadata: {
       getInjectedVar: deps.injectedMetadata.getInjectedVar,
+      getCsp: deps.injectedMetadata.getCspConfig,
     },
     theme: deps.theme,
     getStartServices: () => plugin.startDependencies,

src/core/server/http_resources/http_resources_service.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { randomBytes } from 'crypto';
 import { RequestHandlerContext } from '..';
 
 import { CoreContext } from '../core_context';
@@ -93,18 +94,23 @@ export class HttpResourcesService implements CoreService<InternalHttpResourcesSe
     return {
       async renderCoreApp(options: HttpResourcesRenderOptions = {}) {
         const apmConfig = getApmConfig(request.url.pathname);
+        const nonce = randomBytes(16).toString('hex');
         const { uiSettings } = await context.core;
         const body = await deps.rendering.render(request, uiSettings.client, {
           isAnonymousPage: false,
           vars: {
             apmConfig,
           },
           includeExposedConfigKeys: options.includeExposedConfigKeys,
+          nonce,
         });
 
         return response.ok({
           body,
-          headers: { ...options.headers, 'content-security-policy': cspHeader },
+          headers: {
+            ...options.headers,
+            'content-security-policy': `${cspHeader}; script-src '${nonce}';`,
+          },
         });
       },
       async renderAnonymousCoreApp(options: HttpResourcesRenderOptions = {}) {
@@ -124,6 +130,7 @@ export class HttpResourcesService implements CoreService<InternalHttpResourcesSe
         });
       },
       renderHtml(options: HttpResourcesResponseOptions) {
+        // TODO do nonce to csp header
         return response.ok({
           body: options.body,
           headers: {

src/core/server/rendering/rendering_service.tsx

@@ -80,7 +80,7 @@ export class RenderingService {
     { http, uiPlugins, status }: RenderOptions,
     request: KibanaRequest,
     uiSettings: IUiSettingsClient,
-    { isAnonymousPage = false, vars, includeExposedConfigKeys }: IRenderOptions = {}
+    { isAnonymousPage = false, vars, includeExposedConfigKeys, nonce }: IRenderOptions = {}
   ) {
     const env = {
       mode: this.coreContext.env.mode,
@@ -131,7 +131,7 @@ export class RenderingService {
           darkMode,
           version: themeVersion,
         },
-        csp: { warnLegacyBrowsers: http.csp.warnLegacyBrowsers },
+        csp: { warnLegacyBrowsers: http.csp.warnLegacyBrowsers, nonce },
         externalUrl: http.externalUrl,
         vars: vars ?? {},
         uiPlugins: await Promise.all(

src/plugins/vis_type_script/README.md

@@ -0,0 +1,17 @@
+## Description
+
+This plugin defines the script-based visualization type. Users can use JavaScript and the popular D3 library to build script-based custom visualizations directly in Kibana.
+
+## Setup
+
+To use this plugin, you need to relax Kibana's default content security policy via `kibana.yml`. (This will no longer be necessary once issue [101579](https://github.com/elastic/kibana/issues/101579) is resolved.)
+
+Add the following to `kibana.yml` (**DO NOT USE IN PRODUCTION**):
+
+```yml
+csp.warnLegacyBrowsers: false
+csp.strict: false
+csp.script_src:
+  - 'unsafe-inline'
+  - 'https://unpkg.com/'
+```

src/plugins/vis_type_script/config.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { schema, TypeOf } from '@kbn/config-schema';
+
+export const configSchema = schema.object({
+  enabled: schema.boolean({ defaultValue: true }),
+});
+
+export type ConfigSchema = TypeOf<typeof configSchema>;

src/plugins/vis_type_script/jest.config.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/src/plugins/vis_type_markdown'],
+  coverageDirectory: '<rootDir>/target/kibana-coverage/jest/src/plugins/vis_type_markdown',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: ['<rootDir>/src/plugins/vis_type_markdown/{public,server}/**/*.{ts,tsx}'],
+};

src/plugins/vis_type_script/kibana.json

@@ -0,0 +1,13 @@
+{
+  "id": "visTypeScript",
+  "owner": {
+    "name": "Kibana Presentation",
+    "githubTeam": "kibana-presentation"
+  },
+  "description": "Adds a script-based visualization type",
+  "version": "kibana",
+  "ui": true,
+  "server": false,
+  "requiredPlugins": ["expressions", "visualizations", "data"],
+  "requiredBundles": ["expressions", "visualizations", "visDefaultEditor", "kibanaReact"]
+}

src/plugins/vis_type_script/public/expression/fn.ts

@@ -0,0 +1,73 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { i18n } from '@kbn/i18n';
+import type { ExpressionFunctionDefinition, Render } from '@kbn/expressions-plugin/public';
+import { ExpressionValueSearchContext } from '@kbn/data-plugin/common';
+import type { Arguments } from '../types';
+import type { RenderValue } from './renderer';
+
+type ScriptVisExpressionFunctionDefinition = ExpressionFunctionDefinition<
+  'scriptVis',
+  ExpressionValueSearchContext | null,
+  Arguments,
+  Render<RenderValue>
+>;
+
+export const createScriptVisFn = (): ScriptVisExpressionFunctionDefinition => ({
+  name: 'scriptVis',
+  type: 'render',
+  inputTypes: ['kibana_context', 'null'],
+  help: i18n.translate('visTypeMarkdown.function.help', {
+    defaultMessage: 'Script-based visualization',
+  }),
+  args: {
+    script: {
+      types: ['string'],
+      required: true,
+      help: i18n.translate('visTypeScript.function.markdown.help', {
+        defaultMessage: 'Visualization script',
+      }),
+    },
+    scriptDependencyUrls: {
+      types: ['string'],
+      multi: true,
+      required: true,
+      help: i18n.translate('visTypeScript.function.markdown.help', {
+        defaultMessage: 'List of script dependencies',
+      }),
+    },
+    styleDependencyUrls: {
+      types: ['string'],
+      multi: true,
+      required: true,
+      help: i18n.translate('visTypeScript.function.markdown.help', {
+        defaultMessage: 'List of script dependencies',
+      }),
+    },
+  },
+  fn(input, args) {
+    return {
+      type: 'render',
+      as: 'script_vis',
+      value: {
+        visType: 'script',
+        visParams: {
+          script: args.script,
+          scriptDependencyUrls: args.scriptDependencyUrls,
+          styleDependencyUrls: args.styleDependencyUrls,
+        },
+        visSearchContext: {
+          timeRange: input?.timeRange,
+          query: input?.query,
+          filters: input?.filters,
+        },
+      },
+    };
+  },
+});

src/plugins/vis_type_script/public/expression/renderer.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { IExternalUrl, IUiSettingsClient } from '@kbn/core/public';
+import type { ExpressionRenderDefinition } from '@kbn/expressions-plugin';
+import { VisualizationContainer } from '@kbn/visualizations-plugin/public';
+import { DataPublicPluginStart } from '@kbn/data-plugin/public';
+import { VisParams, VisSearchContext } from '../types';
+import { ScriptRenderer } from '../renderer';
+import { VisTypeScriptKibanaApi } from '../kibana_api';
+
+export interface RenderValue {
+  visType: 'script';
+  visParams: VisParams;
+  visSearchContext: VisSearchContext;
+}
+
+export const scriptVisRenderer: (
+  // TODO: not sure if this is correct way of passing deps to vis renderer
+  getDeps: () => Promise<{
+    data: DataPublicPluginStart;
+    uiSettingsClient: IUiSettingsClient;
+    validateUrl: IExternalUrl['validateUrl'];
+    nonce: string;
+  }>
+) => ExpressionRenderDefinition<RenderValue> = (getDeps) => ({
+  name: 'script_vis',
+  displayName: 'script-based visualization',
+  reuseDomNode: true,
+  render: async (domNode, { visParams, visSearchContext }, handlers) => {
+    const deps = await getDeps();
+    const visTypeScriptKibanaApi = new VisTypeScriptKibanaApi(deps, visSearchContext);
+
+    handlers.onDestroy(() => {
+      unmountComponentAtNode(domNode);
+    });
+
+    // hack to always force re-render the iframe to pick up the latest state and to react on "refresh"
+    const keyToForceRerenderScript = Date.now();
+
+    render(
+      <VisualizationContainer className="scriptVis" handlers={handlers}>
+        <ScriptRenderer
+          key={keyToForceRerenderScript}
+          script={visParams.script}
+          scriptDependencyUrls={visParams.scriptDependencyUrls}
+          styleDependencyUrls={visParams.styleDependencyUrls}
+          kibanaApi={visTypeScriptKibanaApi}
+          validateUrl={deps.validateUrl}
+          nonce={deps.nonce}
+        />
+      </VisualizationContainer>,
+      domNode
+    );
+  },
+});

src/plugins/vis_type_script/public/expression/to_ast.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { VisToExpressionAst } from '@kbn/visualizations-plugin/public';
+import { buildExpression, buildExpressionFunction } from '@kbn/expressions-plugin/public';
+import type { ExpressionFunctionDefinition, Render } from '@kbn/expressions-plugin/public';
+import type { RenderValue } from './renderer';
+import { VisParams } from '../types';
+
+type ScriptVisExpressionFunctionDefinition = ExpressionFunctionDefinition<
+  'scriptVis',
+  unknown,
+  {},
+  Render<RenderValue>
+>;
+
+export const toExpressionAst: VisToExpressionAst<VisParams> = (vis) => {
+  const scriptVis = buildExpressionFunction<ScriptVisExpressionFunctionDefinition>('scriptVis', {
+    script: vis.params.script,
+    scriptDependencyUrls: vis.params.scriptDependencyUrls,
+    styleDependencyUrls: vis.params.styleDependencyUrls,
+  });
+
+  const ast = buildExpression([scriptVis]);
+
+  return ast.toAst();
+};

src/plugins/vis_type_script/public/index.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { PluginInitializerContext } from '@kbn/core/public';
+import { ScriptVisPlugin as Plugin } from './plugin';
+
+export function plugin(initializerContext: PluginInitializerContext) {
+  return new Plugin(initializerContext);
+}

src/plugins/vis_type_script/public/kibana_api/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './kibana_api';