kibana/examples/esql_validation_example/public/code_snippet.tsx
Drew Tate 9b4403b7dc
[ES|QL] remove worker (#218006)
## Summary

Fix https://github.com/elastic/kibana/issues/217923

Investigations in https://github.com/elastic/kibana/issues/217368 showed
that there was basically no performance impact to passing the AST across
a thread boundary. But we also didn't detect a pressing reason to remove
the worker.

Since then, however, we noticed another cost associated with the worker:
it's a hefty Javascript file, even in production builds. In addition, we
are doing parsing on the main thread _and_ the worker, so the
`kbn-esql-ast` package is actually being loaded and parsed twice by the
browser, once for the main thread and once for the worker.

This PR removes our worker. Our parsing associated with validation and
autocomplete will still be done asynchronously, but on the main thread.

I do not see any regression in perceived performance.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
2025-04-15 10:18:07 -06:00

73 lines
2.3 KiB
TypeScript

/*
* 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
* License v3.0 only", or the "Server Side Public License, v 1".
*/
import { EuiCodeBlock } from '@elastic/eui';
import React from 'react';
interface CodeSnippetProps {
currentQuery: string;
callbacks: Record<'sources' | 'fields' | 'policies' | 'metaFields', boolean>;
ignoreErrors: boolean;
}
function getCallbacksCode(callbacks: CodeSnippetProps['callbacks']) {
return `({
${
callbacks.sources
? `getSources: async () =>
['index1', 'anotherIndex', 'dataStream'].map((name) => ({ name, hidden: false })),`
: ''
}
${
callbacks.fields
? `
// the getFieldsFor callback gets an esql query to get the required fields
// note that the query is not optimized yet, so things like "| limit 0"
// might be appended to speed up the retrieval.
getFieldsFor: async (esqlFieldsQuery: string) => [
{ name: 'numberField', type: 'number' },
{ name: 'stringField', type: 'string' },
],`
: ''
}
${
callbacks.policies
? `getPolicies: async () => [
{
name: 'my-policy',
sourceIndices: ['policyIndex'],
matchField: 'otherStringField',
enrichFields: ['otherNumberField'],
},
],`
: ''
}
})`.replace(/^\s*\n/gm, '');
}
export function CodeSnippet({ currentQuery, callbacks, ignoreErrors }: CodeSnippetProps) {
return (
<EuiCodeBlock language="typescript" isCopyable>
{`
import { ESQLCallbacks, validateQuery } from '@kbn/esql-validation-autocomplete';
import { parse } from '@kbn/esql-ast';
const currentQuery = "${currentQuery}";
const callbacks: ESQLCallbacks = () => ${getCallbacksCode(callbacks)};
const {errors, warnings} = validateQuery(
currentQuery,
{ ignoreOnMissingCallbacks: ${Boolean(ignoreErrors)} },
callbacks
);
`}
</EuiCodeBlock>
);
}