[Painless Lab] Minor Fixes

x-pack/legacy/plugins/painless_lab/common/constants.ts

@@ -7,5 +7,3 @@
 export const PLUGIN_ID = 'painlessLab';
 
 export const API_ROUTE_EXECUTE = '/api/painless_lab/execute';
-
-export const ADVANCED_SETTINGS_FLAG_NAME = 'devTools:enablePainlessLab';

x-pack/legacy/plugins/painless_lab/index.ts

@@ -3,9 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { i18n } from '@kbn/i18n';
 import { resolve } from 'path';
-import { PLUGIN_ID, ADVANCED_SETTINGS_FLAG_NAME } from './common/constants';
+import { PLUGIN_ID } from './common/constants';
 
 import { registerLicenseChecker } from './server/register_license_checker';
 import { registerExecuteRoute } from './server/register_execute_route';
@@ -27,20 +26,6 @@ export const painlessLab = (kibana: any) =>
       devTools: [resolve(__dirname, 'public/register')],
     },
     init: (server: Legacy.Server) => {
-      // Register feature flag
-      server.newPlatform.setup.core.uiSettings.register({
-        [ADVANCED_SETTINGS_FLAG_NAME]: {
-          name: i18n.translate('xpack.painlessLab.devTools.painlessLabTitle', {
-            defaultMessage: 'Painless Lab',
-          }),
-          description: i18n.translate('xpack.painlessLab.devTools.painlessLabDescription', {
-            defaultMessage: 'Enable experimental Painless Lab.',
-          }),
-          value: false,
-          category: ['Dev Tools'],
-        },
-      });
-
       registerLicenseChecker(server);
       registerExecuteRoute(server);
     },

x-pack/legacy/plugins/painless_lab/public/common/constants.tsx

@@ -61,3 +61,66 @@ export const painlessContextOptions = [
     ),
   },
 ];
+
+// Render a smiley face as an example.
+export const exampleScript = `boolean isInCircle(def posX, def posY, def circleX, def circleY, def radius) {
+  double distanceFromCircleCenter = Math.sqrt(Math.pow(circleX - posX, 2) + Math.pow(circleY - posY, 2));
+  return distanceFromCircleCenter <= radius;
+}
+
+boolean isOnCircle(def posX, def posY, def circleX, def circleY, def radius, def thickness, def squashY) {
+  double distanceFromCircleCenter = Math.sqrt(Math.pow(circleX - posX, 2) + Math.pow((circleY - posY) / squashY, 2));
+  return (
+    distanceFromCircleCenter >= radius - thickness
+    && distanceFromCircleCenter <= radius + thickness
+  );
+}
+
+def result = '';
+int charCount = 0;
+
+// Canvas dimensions
+int width = 31;
+int height = 31;
+double halfWidth = Math.floor(width * 0.5);
+double halfHeight = Math.floor(height * 0.5);
+
+// Style constants
+double strokeWidth = 0.6;
+
+// Smiley face configuration
+int headSize = 13;
+double headSquashY = 0.78;
+int eyePositionX = 10;
+int eyePositionY = 12;
+int eyeSize = 1;
+int mouthSize = 15;
+int mouthPositionX = width / 2;
+int mouthPositionY = 5;
+int mouthOffsetY = 11;
+
+for (int y = 0; y < height; y++) {
+  for (int x = 0; x < width; x++) {
+    boolean isHead = isOnCircle(x, y, halfWidth, halfHeight, headSize, strokeWidth, headSquashY);
+    boolean isLeftEye = isInCircle(x, y, eyePositionX, eyePositionY, eyeSize);
+    boolean isRightEye = isInCircle(x, y, width - eyePositionX - 1, eyePositionY, eyeSize);
+    boolean isMouth = isOnCircle(x, y, mouthPositionX, mouthPositionY, mouthSize, strokeWidth, 1) && y > mouthPositionY + mouthOffsetY;
+
+    if (isLeftEye || isRightEye || isMouth || isHead) {
+      result += "*";
+    } else {
+      result += ".";
+    }
+
+    result += " ";
+
+    // Make sure the smiley face doesn't deform as the container changes width.
+    charCount++;
+    if (charCount % width === 0) {
+      result += "\\\\n";
+    }
+  }
+}
+
+return result;
+`;

x-pack/legacy/plugins/painless_lab/public/common/types.ts

@@ -3,32 +3,49 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
+export interface ContextSetup {
+  params?: any;
+  document: Record<string, unknown>;
+  index: string;
+}
+
+// This should be an enumerated list
+export type Context = string;
+
+export interface Script {
+  source: string;
+  params?: Record<string, unknown>;
+}
+
 export interface Request {
-  script: {
-    source: string;
-    params?: Record<string, unknown>;
-  };
-  context?: string;
-  context_setup?: {
-    document: Record<string, unknown>;
-    index: string;
-  };
+  script: Script;
+  context?: Context;
+  context_setup?: ContextSetup;
 }
 
 export interface Response {
-  error?: ExecutionError;
+  error?: ExecutionError | Error;
   result?: string;
 }
 
 export type ExecutionErrorScriptStack = string[];
 
+export interface ExecutionErrorPosition {
+  start: number;
+  end: number;
+  offset: number;
+}
+
 export interface ExecutionError {
   script_stack?: ExecutionErrorScriptStack;
   caused_by?: {
     type: string;
     reason: string;
   };
   message?: string;
+  position: ExecutionErrorPosition;
+  script: string;
 }
 
 export type JsonArray = JsonValue[];
@@ -37,3 +54,8 @@ export type JsonValue = null | boolean | number | string | JsonObject | JsonArra
 export interface JsonObject {
   [key: string]: JsonValue;
 }
+
+export type ContextChangeHandler = (change: {
+  context?: Partial<Context>;
+  contextSetup?: Partial<ContextSetup>;
+}) => void;

x-pack/legacy/plugins/painless_lab/public/components/editor.tsx

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import { EuiSpacer, EuiPageContent } from '@elastic/eui';
 import { CodeEditor } from '../../../../../../src/plugins/kibana_react/public';
 
 interface Props {

x-pack/legacy/plugins/painless_lab/public/components/main.tsx

@@ -4,136 +4,26 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { HttpSetup } from 'kibana/public';
 import React, { useState, useEffect } from 'react';
-import { debounce } from 'lodash';
-import {
-  EuiCodeBlock,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiTabbedContent,
-  EuiTitle,
-  EuiSpacer,
-  EuiPageContent,
-  EuiFlyout,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { buildRequestPayload, formatJson, getFromLocalStorage } from '../lib/helpers';
-import { Request, Response } from '../common/types';
+import { ContextChangeHandler } from '../common/types';
 import { OutputPane } from './output_pane';
 import { MainControls } from './main_controls';
 import { Editor } from './editor';
 import { RequestFlyout } from './request_flyout';
+import { useSubmitCode } from '../hooks';
+import { exampleScript } from '../common/constants';
 
-let _mostRecentRequestId = 0;
-
-const submit = async (code, context, contextSetup, executeCode, setResponse, setIsLoading) => {
-  // Prevent an older request that resolves after a more recent request from clobbering it.
-  // We store the resulting ID in this closure for comparison when the request resolves.
-  const requestId = ++_mostRecentRequestId;
-  setIsLoading(true);
-
-  try {
-    localStorage.setItem('painlessLabCode', code);
-    localStorage.setItem('painlessLabContext', context);
-    localStorage.setItem('painlessLabContextSetup', JSON.stringify(contextSetup));
-    const response = await executeCode(buildRequestPayload(code, context, contextSetup));
-
-    if (_mostRecentRequestId === requestId) {
-      if (response.error) {
-        setResponse({
-          success: undefined,
-          error: response.error,
-        });
-      } else {
-        setResponse({
-          success: response,
-          error: undefined,
-        });
-      }
-      setIsLoading(false);
-    }
-  } catch (error) {
-    if (_mostRecentRequestId === requestId) {
-      setResponse({
-        success: undefined,
-        error: { error },
-      });
-      setIsLoading(false);
-    }
-  }
-};
-
-const debouncedSubmit = debounce(submit, 800);
-
-// Render a smiley face as an example.
-const exampleScript = `
-boolean isInCircle(def posX, def posY, def circleX, def circleY, def radius) {
-  double distanceFromCircleCenter = Math.sqrt(Math.pow(circleX - posX, 2) + Math.pow(circleY - posY, 2));
-  return distanceFromCircleCenter <= radius;
-}
-
-boolean isOnCircle(def posX, def posY, def circleX, def circleY, def radius, def thickness, def squashY) {
-  double distanceFromCircleCenter = Math.sqrt(Math.pow(circleX - posX, 2) + Math.pow((circleY - posY) / squashY, 2));
-  return (
-    distanceFromCircleCenter >= radius - thickness
-    && distanceFromCircleCenter <= radius + thickness
-  );
-}
-
-def result = '';
-int charCount = 0;
-
-// Canvas dimensions
-int width = 31;
-int height = 31;
-double halfWidth = Math.floor(width * 0.5);
-double halfHeight = Math.floor(height * 0.5);
-
-// Style constants
-double strokeWidth = 0.6;
-
-// Smiley face configuration
-int headSize = 13;
-double headSquashY = 0.78;
-int eyePositionX = 10;
-int eyePositionY = 12;
-int eyeSize = 1;
-int mouthSize = 15;
-int mouthPositionX = width / 2;
-int mouthPositionY = 5;
-int mouthOffsetY = 11;
-
-for (int y = 0; y < height; y++) {
-  for (int x = 0; x < width; x++) {
-    boolean isHead = isOnCircle(x, y, halfWidth, halfHeight, headSize, strokeWidth, headSquashY);
-    boolean isLeftEye = isInCircle(x, y, eyePositionX, eyePositionY, eyeSize);
-    boolean isRightEye = isInCircle(x, y, width - eyePositionX - 1, eyePositionY, eyeSize);
-    boolean isMouth = isOnCircle(x, y, mouthPositionX, mouthPositionY, mouthSize, strokeWidth, 1) && y > mouthPositionY + mouthOffsetY;
-
-    if (isLeftEye || isRightEye || isMouth || isHead) {
-      result += "*";
-    } else {
-      result += ".";
-    }
-
-    result += " ";
-
-    // Make sure the smiley face doesn't deform as the container changes width.
-    charCount++;
-    if (charCount % width === 0) {
-      result += "\\\\n";
-    }
-  }
+interface Props {
+  http: HttpSetup;
 }
 
-return result;
-`;
-
-export function Main({ executeCode }: { executeCode: (payload: Request) => Promise<Response> }) {
+export function Main({ http }: Props) {
   const [code, setCode] = useState(getFromLocalStorage('painlessLabCode', exampleScript));
-  const [response, setResponse] = useState<Response>({ error: undefined, success: undefined });
   const [isRequestFlyoutOpen, setRequestFlyoutOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
 
   const [context, setContext] = useState(
     getFromLocalStorage('painlessLabContext', 'painless_test_without_params')
@@ -143,15 +33,29 @@ export function Main({ executeCode }: { executeCode: (payload: Request) => Promi
     getFromLocalStorage('painlessLabContextSetup', {}, true)
   );
 
+  const { inProgress, response, submit } = useSubmitCode(http);
+
   // Live-update the output as the user changes the input code.
   useEffect(() => {
-    debouncedSubmit(code, context, contextSetup, executeCode, setResponse, setIsLoading);
-  }, [code, context, contextSetup, executeCode]);
+    submit(code, context, contextSetup);
+  }, [submit, code, context, contextSetup]);
 
   const toggleRequestFlyout = () => {
     setRequestFlyoutOpen(!isRequestFlyoutOpen);
   };
 
+  const contextChangeHandler: ContextChangeHandler = ({
+    context: nextContext,
+    contextSetup: nextContextSetup,
+  }) => {
+    if (nextContext) {
+      setContext(nextContext);
+    }
+    if (nextContextSetup) {
+      setContextSetup(nextContextSetup);
+    }
+  };
+
   return (
     <>
       <EuiFlexGroup gutterSize="s">
@@ -171,17 +75,15 @@ export function Main({ executeCode }: { executeCode: (payload: Request) => Promi
           <OutputPane
             response={response}
             context={context}
-            setContext={setContext}
             contextSetup={contextSetup}
-            setContextSetup={setContextSetup}
-            isLoading={isLoading}
+            isLoading={inProgress}
+            onContextChange={contextChangeHandler}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
 
       <MainControls
-        submit={() => submit(code, context, contextSetup, executeCode, setResponse)}
-        isLoading={isLoading}
+        isLoading={inProgress}
         toggleRequestFlyout={toggleRequestFlyout}
         isRequestFlyoutOpen={isRequestFlyoutOpen}
         reset={() => setCode(exampleScript)}
@@ -191,7 +93,7 @@ export function Main({ executeCode }: { executeCode: (payload: Request) => Promi
         <RequestFlyout
           onClose={() => setRequestFlyoutOpen(false)}
           requestBody={formatJson(buildRequestPayload(code, context, contextSetup))}
-          response={formatJson(response.success || response.error)}
+          response={response ? formatJson(response.result || response.error) : ''}
         />
       )}
     </>