Merge branch 'master' into fix/84058

packages/kbn-monaco/src/painless/diagnostics_adapter.ts

@@ -32,25 +32,41 @@ export class DiagnosticsAdapter {
   constructor(private worker: WorkerAccessor) {
     const onModelAdd = (model: monaco.editor.IModel): void => {
       let handle: any;
-      model.onDidChangeContent(() => {
-        // Every time a new change is made, wait 500ms before validating
-        clearTimeout(handle);
-        handle = setTimeout(() => this.validate(model.uri), 500);
-      });
 
-      this.validate(model.uri);
+      if (model.getModeId() === ID) {
+        model.onDidChangeContent(() => {
+          // Do not validate if the language ID has changed
+          if (model.getModeId() !== ID) {
+            return;
+          }
+
+          // Every time a new change is made, wait 500ms before validating
+          clearTimeout(handle);
+          handle = setTimeout(() => this.validate(model.uri), 500);
+        });
+
+        model.onDidChangeLanguage(({ newLanguage }) => {
+          // Reset the model markers if the language ID has changed and is no longer "painless"
+          if (newLanguage !== ID) {
+            return monaco.editor.setModelMarkers(model, ID, []);
+          }
+        });
+
+        this.validate(model.uri);
+      }
     };
     monaco.editor.onDidCreateModel(onModelAdd);
     monaco.editor.getModels().forEach(onModelAdd);
   }
 
   private async validate(resource: monaco.Uri): Promise<void> {
     const worker = await this.worker(resource);
-    const errorMarkers = await worker.getSyntaxErrors();
-
-    const model = monaco.editor.getModel(resource);
+    const errorMarkers = await worker.getSyntaxErrors(resource.toString());
 
-    // Set the error markers and underline them with "Error" severity
-    monaco.editor.setModelMarkers(model!, ID, errorMarkers.map(toDiagnostics));
+    if (errorMarkers) {
+      const model = monaco.editor.getModel(resource);
+      // Set the error markers and underline them with "Error" severity
+      monaco.editor.setModelMarkers(model!, ID, errorMarkers.map(toDiagnostics));
+    }
   }
 }

packages/kbn-monaco/src/painless/worker/painless_worker.ts

@@ -28,14 +28,18 @@ export class PainlessWorker {
     this._ctx = ctx;
   }
 
-  private getTextDocument(): string {
-    const model = this._ctx.getMirrorModels()[0];
-    return model.getValue();
+  private getTextDocument(modelUri: string): string | undefined {
+    const model = this._ctx.getMirrorModels().find((m) => m.uri.toString() === modelUri);
+
+    return model?.getValue();
   }
 
-  public async getSyntaxErrors() {
-    const code = this.getTextDocument();
-    return parseAndGetSyntaxErrors(code);
+  public async getSyntaxErrors(modelUri: string) {
+    const code = this.getTextDocument(modelUri);
+
+    if (code) {
+      return parseAndGetSyntaxErrors(code);
+    }
   }
 
   public provideAutocompleteSuggestions(

test/api_integration/apis/saved_objects/find.js

@@ -78,7 +78,8 @@ export default function ({ getService }) {
             }));
       });
 
-      describe('page beyond total', () => {
+      // FLAKY: https://github.com/elastic/kibana/issues/85911
+      describe.skip('page beyond total', () => {
         it('should return 200 with empty response', async () =>
           await supertest
             .get('/api/saved_objects/_find?type=visualization&page=100&per_page=100')
@@ -419,7 +420,7 @@ export default function ({ getService }) {
           }));
     });
 
-    describe('without kibana index', () => {
+    describe.skip('without kibana index', () => {
       before(
         async () =>
           // just in case the kibana server has recreated it

x-pack/examples/alerting_example/public/components/create_alert.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 
 import { EuiIcon, EuiFlexItem, EuiCard, EuiFlexGroup } from '@elastic/eui';
 
@@ -16,15 +16,18 @@ export const CreateAlert = ({
 }: Pick<AlertingExampleComponentParams, 'triggersActionsUi'>) => {
   const [alertFlyoutVisible, setAlertFlyoutVisibility] = useState<boolean>(false);
 
+  const onCloseAlertFlyout = useCallback(() => setAlertFlyoutVisibility(false), [
+    setAlertFlyoutVisibility,
+  ]);
+
   const AddAlertFlyout = useMemo(
     () =>
       triggersActionsUi.getAddAlertFlyout({
         consumer: ALERTING_EXAMPLE_APP_ID,
-        addFlyoutVisible: alertFlyoutVisible,
-        setAddFlyoutVisibility: setAlertFlyoutVisibility,
+        onClose: onCloseAlertFlyout,
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [alertFlyoutVisible]
+    [onCloseAlertFlyout]
   );
 
   return (
@@ -37,7 +40,7 @@ export const CreateAlert = ({
           onClick={() => setAlertFlyoutVisibility(true)}
         />
       </EuiFlexItem>
-      <EuiFlexItem>{AddAlertFlyout}</EuiFlexItem>
+      <EuiFlexItem>{alertFlyoutVisible && AddAlertFlyout}</EuiFlexItem>
     </EuiFlexGroup>
   );
 };

x-pack/plugins/apm/public/components/alerting/alerting_flyout/index.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { AlertType } from '../../../../common/alert_types';
 import { TriggersAndActionsUIPublicPluginStart } from '../../../../../triggers_actions_ui/public';
@@ -23,17 +23,21 @@ export function AlertingFlyout(props: Props) {
   const {
     services: { triggersActionsUi },
   } = useKibana<KibanaDeps>();
+
+  const onCloseAddFlyout = useCallback(() => setAddFlyoutVisibility(false), [
+    setAddFlyoutVisibility,
+  ]);
+
   const addAlertFlyout = useMemo(
     () =>
       alertType &&
       triggersActionsUi.getAddAlertFlyout({
         consumer: 'apm',
-        addFlyoutVisible,
-        setAddFlyoutVisibility,
+        onClose: onCloseAddFlyout,
         alertTypeId: alertType,
         canChangeTrigger: false,
       }),
-    [addFlyoutVisible, alertType, setAddFlyoutVisibility, triggersActionsUi]
+    [alertType, onCloseAddFlyout, triggersActionsUi]
   );
-  return <>{addAlertFlyout}</>;
+  return <>{addFlyoutVisible && addAlertFlyout}</>;
 }

x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/TransactionTabs.tsx

@@ -135,6 +135,7 @@ function LogsTabContent({ transaction }: { transaction: Transaction }) {
       startTimestamp={startTimestamp - framePaddingMs}
       endTimestamp={endTimestamp + framePaddingMs}
       query={`trace.id:"${transaction.trace.id}" OR "${transaction.trace.id}"`}
+      height={640}
     />
   );
 }

x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx

@@ -46,6 +46,7 @@ export function SparkPlot({
   const defaultChartTheme = useChartTheme();
 
   const sparkplotChartTheme = merge({}, defaultChartTheme, {
+    chartMargins: { left: 0, right: 0, top: 0, bottom: 0 },
     lineSeriesStyle: {
       point: { opacity: 0 },
     },

x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/pagination.tsx

@@ -11,7 +11,11 @@ import { Paging, ResultsPerPage } from '@elastic/react-search-ui';
 import { PagingView, ResultsPerPageView } from './views';
 
 export const Pagination: React.FC<{ 'aria-label': string }> = ({ 'aria-label': ariaLabel }) => (
-  <EuiFlexGroup alignItems="center" className="documentsSearchExperience__pagingInfo">
+  <EuiFlexGroup
+    alignItems="center"
+    responsive={false}
+    className="documentsSearchExperience__pagingInfo"
+  >
     <EuiFlexItem>
       <Paging view={PagingView} aria-label={ariaLabel} />
     </EuiFlexItem>

x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/search_box_view.tsx

@@ -23,7 +23,7 @@ export const SearchBoxView: React.FC<Props> = ({ onChange, value, inputProps })
     <EuiFieldSearch
       value={value}
       onChange={(event) => onChange(event.target.value)}
-      fullWidth={true}
+      fullWidth
       {...inputProps}
     />
   );

x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/views/sorting_view.tsx

@@ -33,8 +33,9 @@ export const SortingView: React.FC<Props> = ({ onChange, options, value }) => {
   const selectedValue = value && !valuesFromOptions.includes(value) ? undefined : value;
 
   return (
-    <div>
+    <>
       <EuiSelect
+        fullWidth
         options={options.map(wrapSortingOptionForEuiSelect)}
         value={selectedValue}
         prepend={i18n.translate('xpack.enterpriseSearch.appSearch.documents.search.sortBy', {
@@ -48,6 +49,6 @@ export const SortingView: React.FC<Props> = ({ onChange, options, value }) => {
           }
         )}
       />
-    </div>
+    </>
   );
 };

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/agent_logs.tsx

@@ -16,6 +16,7 @@ import {
   EuiPanel,
   EuiButtonEmpty,
 } from '@elastic/eui';
+import useMeasure from 'react-use/lib/useMeasure';
 import { FormattedMessage } from '@kbn/i18n/react';
 import semverGte from 'semver/functions/gte';
 import semverCoerce from 'semver/functions/coerce';
@@ -180,6 +181,8 @@ export const AgentLogsUI: React.FunctionComponent<AgentLogsProps> = memo(({ agen
     [http.basePath, state.start, state.end, logStreamQuery]
   );
 
+  const [logsPanelRef, { height: logPanelHeight }] = useMeasure();
+
   const agentVersion = agent.local_metadata?.elastic?.agent?.version;
   const isLogLevelSelectionAvailable = useMemo(() => {
     if (!agentVersion) {
@@ -259,9 +262,9 @@ export const AgentLogsUI: React.FunctionComponent<AgentLogsProps> = memo(({ agen
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiPanel paddingSize="none">
+        <EuiPanel paddingSize="none" panelRef={logsPanelRef}>
           <LogStream
-            height="100%"
+            height={logPanelHeight}
             startTimestamp={dateRangeTimestamps.start}
             endTimestamp={dateRangeTimestamps.end}
             query={logStreamQuery}

x-pack/plugins/infra/public/alerting/inventory/components/alert_flyout.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useContext, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 
 import { TriggerActionsContext } from '../../../utils/triggers_actions_context';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
@@ -26,14 +26,13 @@ export const AlertFlyout = ({ options, nodeType, filter, visible, setVisible }:
 
   const { inventoryPrefill } = useAlertPrefillContext();
   const { customMetrics } = inventoryPrefill;
-
+  const onCloseFlyout = useCallback(() => setVisible(false), [setVisible]);
   const AddAlertFlyout = useMemo(
     () =>
       triggersActionsUI &&
       triggersActionsUI.getAddAlertFlyout({
         consumer: 'infrastructure',
-        addFlyoutVisible: visible!,
-        setAddFlyoutVisibility: setVisible,
+        onClose: onCloseFlyout,
         canChangeTrigger: false,
         alertTypeId: METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID,
         metadata: {
@@ -47,5 +46,5 @@ export const AlertFlyout = ({ options, nodeType, filter, visible, setVisible }:
     [triggersActionsUI, visible]
   );
 
-  return <>{AddAlertFlyout}</>;
+  return <>{visible && AddAlertFlyout}</>;
 };

x-pack/plugins/infra/public/alerting/log_threshold/components/alert_flyout.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useContext, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { TriggerActionsContext } from '../../../utils/triggers_actions_context';
 import { LOG_DOCUMENT_COUNT_ALERT_TYPE_ID } from '../../../../common/alerting/logs/log_threshold/types';
 
@@ -14,24 +14,23 @@ interface Props {
 }
 
 export const AlertFlyout = (props: Props) => {
+  const { visible, setVisible } = props;
   const { triggersActionsUI } = useContext(TriggerActionsContext);
-
+  const onCloseFlyout = useCallback(() => setVisible(false), [setVisible]);
   const AddAlertFlyout = useMemo(
     () =>
       triggersActionsUI &&
       triggersActionsUI.getAddAlertFlyout({
         consumer: 'logs',
-        addFlyoutVisible: props.visible!,
-        setAddFlyoutVisibility: props.setVisible,
+        onClose: onCloseFlyout,
         canChangeTrigger: false,
         alertTypeId: LOG_DOCUMENT_COUNT_ALERT_TYPE_ID,
         metadata: {
           isInternal: true,
         },
       }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [triggersActionsUI, props.visible]
+    [triggersActionsUI, onCloseFlyout]
   );
 
-  return <>{AddAlertFlyout}</>;
+  return <>{visible && AddAlertFlyout}</>;
 };

x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_flyout.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useContext, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { TriggerActionsContext } from '../../../utils/triggers_actions_context';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { METRIC_THRESHOLD_ALERT_TYPE_ID } from '../../../../server/lib/alerting/metric_threshold/types';
@@ -19,15 +19,15 @@ interface Props {
 }
 
 export const AlertFlyout = (props: Props) => {
+  const { visible, setVisible } = props;
   const { triggersActionsUI } = useContext(TriggerActionsContext);
-
+  const onCloseFlyout = useCallback(() => setVisible(false), [setVisible]);
   const AddAlertFlyout = useMemo(
     () =>
       triggersActionsUI &&
       triggersActionsUI.getAddAlertFlyout({
         consumer: 'infrastructure',
-        addFlyoutVisible: props.visible!,
-        setAddFlyoutVisibility: props.setVisible,
+        onClose: onCloseFlyout,
         canChangeTrigger: false,
         alertTypeId: METRIC_THRESHOLD_ALERT_TYPE_ID,
         metadata: {
@@ -36,8 +36,8 @@ export const AlertFlyout = (props: Props) => {
         },
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [triggersActionsUI, props.visible]
+    [triggersActionsUI, onCloseFlyout]
   );
 
-  return <>{AddAlertFlyout}</>;
+  return <>{visible && AddAlertFlyout}</>;
 };

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_form/processors/script.tsx

@@ -129,7 +129,7 @@ const fieldsConfig: FieldsConfig = {
 
 export const Script: FormFieldsComponent = ({ initialFieldValues }) => {
   const [showId, setShowId] = useState(() => !!initialFieldValues?.id);
-  const [scriptLanguage, setScriptLanguage] = useState<string>('plaintext');
+  const [scriptLanguage, setScriptLanguage] = useState<string>(PainlessLang.ID);
 
   const [{ fields }] = useFormData({ watch: 'fields.lang' });
 

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss

@@ -10,6 +10,10 @@
   margin-bottom: $euiSizeS;
 }
 
+.lnsInnerIndexPatternDataPanel__titleTooltip {
+  margin-right: $euiSizeXS;
+}
+
 .lnsInnerIndexPatternDataPanel__fieldItems {
   // Quick fix for making sure the shadow and focus rings are visible outside the accordion bounds
   padding: $euiSizeXS;
@@ -34,3 +38,5 @@
     margin-right: $euiSizeS;
   }
 }
+
+