Skip to content

Commit

Permalink
[Painless Lab] Minor Fixes (#58135)
Browse files Browse the repository at this point in the history 
* Code restructure, improve types, add plugin id, introduced hook

Moved the code execution hook to a custom hook outside of main,
also chaining off promise to avoid lower level handling of
sequencing.

* Re-instated formatting code

To improve DX the execution error response from the painless API
was massaged to a more reader friendly state, only giving non-repeating
information.

Currently it is hard to determine the line and character information from
the painless endpoint. If the user wishes to see this raw information it
will be available in the API response flyout.

* Remove leading new line in default script

* Remove registration of feature flag

* Fix types

* Restore previous auto-submit request behaviour

* Remove use of null and remove old comment

Stick with "undefined" as the designation for something not existing.
  • Loading branch information
@jloleysens
jloleysens authored Feb 24, 2020
1 parent 74cd1c6 commit 35de7e0
Show file tree
Hide file tree
Showing 18 changed files with 252 additions and 228 deletions.
2 changes: 0 additions & 2 deletions x-pack/legacy/plugins/painless_lab/common/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
17 changes: 1 addition & 16 deletions x-pack/legacy/plugins/painless_lab/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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);
},
Expand Down
63 changes: 63 additions & 0 deletions x-pack/legacy/plugins/painless_lab/public/common/constants.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
42 changes: 32 additions & 10 deletions x-pack/legacy/plugins/painless_lab/public/common/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand All @@ -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;
1 change: 0 additions & 1 deletion x-pack/legacy/plugins/painless_lab/public/components/editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
154 changes: 28 additions & 126 deletions x-pack/legacy/plugins/painless_lab/public/components/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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">
Expand All @@ -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)}
Expand All @@ -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) : ''}
/>
)}
</>
Expand Down
Loading

0 comments on commit 35de7e0

Please sign in to comment.