Merge branch 'main' into ui-validation-for-filters

config/serverless.yml

@@ -47,6 +47,11 @@ xpack.cloud_integrations.data_migration.enabled: false
 data.search.sessions.enabled: false
 advanced_settings.enabled: false
 
+# Disable UI of security management plugins
+xpack.security.ui.userManagementEnabled: false
+xpack.security.ui.roleManagementEnabled: false
+xpack.security.ui.roleMappingManagementEnabled: false
+
 # Enforce restring access to internal APIs see https://github.com/elastic/kibana/issues/151940
 # server.restrictInternalApis: true
 # Telemetry enabled by default and not disableable via UI

docs/user/alerting/create-and-manage-rules.asciidoc

@@ -169,9 +169,8 @@ image::images/rules-imported-banner.png[Rules import banner,500]
 [[rule-details]]
 === View rule details
 
-You can determine the health of a rule by looking at the *Last response* column
-in  *{stack-manage-app}* > *{rules-ui}*. A rule can have one of the following
-responses:
+You can determine the health of a rule by looking at the *Last response* in *{stack-manage-app}* > *{rules-ui}*.
+A rule can have one of the following responses:
 
 `failed`:: The rule ran with errors.
 `succeeded`:: The rule ran without errors.
@@ -193,6 +192,14 @@ When an alert is created, it generates actions. If the conditions that caused th
 
 NOTE: The `flapping` state is possible only if you have enabled alert flapping detection in *{stack-manage-app}* > *{rules-ui}* > *Settings*. For each space, you can choose a look back window and threshold that are used to determine whether alerts are flapping. For example, you can specify that the alert must change status at least 6 times in the last 10 runs. If the rule has actions that run when the alert status changes, those actions are suppressed while the alert is flapping.
 
+If there are rule actions that failed to run successfully, you can see the details on the *History* tab.
+In the *Message* column, click the warning or expand icon image:images/expand-icon-2.png[double arrow icon to open a flyout with the document details] or click the number in the *Errored actions* column to open the *Errored Actions* panel.
+In this example, the action failed because the <<action-config-email-domain-allowlist,`xpack.actions.email.domain_allowlist`>> setting was updated and the action's email recipient is no longer included in the allowlist:
+
+[role="screenshot"]
+image::images/rule-details-errored-actions.png[Rule histor page with alerts that have errored actions]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
+
 If an alert was affected by a maintenance window, its identifier appears in the *Maintenance windows* column.
 For more information about their impact on alert notifications, refer to <<maintenance-windows>>.
 

package.json

@@ -94,7 +94,7 @@
     "@dnd-kit/utilities": "^2.0.0",
     "@elastic/apm-rum": "^5.12.0",
     "@elastic/apm-rum-react": "^1.4.2",
-    "@elastic/charts": "59.0.0",
+    "@elastic/charts": "59.1.0",
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@elastic/ems-client": "8.4.0",

packages/kbn-dom-drag-drop/src/drag_drop.tsx

@@ -628,21 +628,6 @@ const DropsInner = memo(function DropsInner(props: DropsInnerProps) {
 
   const mainTargetProps = getProps(dropTypes && dropTypes[0]);
 
-  const extraDropStyles = useMemo(() => {
-    const extraDrops = dropTypes && dropTypes.length && dropTypes.slice(1);
-    if (!extraDrops || !extraDrops.length) {
-      return;
-    }
-
-    const height = extraDrops.length * 40;
-    const minHeight = height - (mainTargetRef.current?.clientHeight || 40);
-    const clipPath = `polygon(100% 0px, 100% ${height - minHeight}px, 0 100%, 0 0)`;
-    return {
-      clipPath,
-      height,
-    };
-  }, [dropTypes]);
-
   return (
     <div
       data-test-subj={`${dataTestSubjPrefix}Container`}
@@ -658,32 +643,25 @@ const DropsInner = memo(function DropsInner(props: DropsInnerProps) {
         children={children}
       />
       {dropTypes && dropTypes.length > 1 && (
-        <>
-          <div
-            className="domDragDrop__diamondPath"
-            style={extraDropStyles}
-            onDragEnter={dragEnter}
-          />
-          <EuiFlexGroup
-            gutterSize="none"
-            direction="column"
-            data-test-subj={`${dataTestSubjPrefix}ExtraDrops`}
-            className={classNames('domDragDrop__extraDrops', {
-              'domDragDrop__extraDrops-visible': isInZone || activeDropTarget?.id === value.id,
-            })}
-          >
-            {dropTypes.slice(1).map((dropType) => {
-              const dropChildren = getCustomDropTarget?.(dropType);
-              return dropChildren ? (
-                <EuiFlexItem key={dropType} className="domDragDrop__extraDropWrapper">
-                  <SingleDropInner {...getProps(dropType, dropChildren)}>
-                    {dropChildren}
-                  </SingleDropInner>
-                </EuiFlexItem>
-              ) : null;
-            })}
-          </EuiFlexGroup>
-        </>
+        <EuiFlexGroup
+          gutterSize="none"
+          direction="column"
+          data-test-subj={`${dataTestSubjPrefix}ExtraDrops`}
+          className={classNames('domDragDrop__extraDrops', {
+            'domDragDrop__extraDrops-visible': isInZone || activeDropTarget?.id === value.id,
+          })}
+        >
+          {dropTypes.slice(1).map((dropType) => {
+            const dropChildren = getCustomDropTarget?.(dropType);
+            return dropChildren ? (
+              <EuiFlexItem key={dropType} className="domDragDrop__extraDropWrapper">
+                <SingleDropInner {...getProps(dropType, dropChildren)}>
+                  {dropChildren}
+                </SingleDropInner>
+              </EuiFlexItem>
+            ) : null;
+          })}
+        </EuiFlexGroup>
       )}
     </div>
   );

packages/kbn-dom-drag-drop/src/sass/drag_drop.scss

@@ -154,19 +154,12 @@ $reorderItemMargin: $euiSizeS;
   visibility: visible;
 }
 
-.domDragDrop__diamondPath {
-  position: absolute;
-  width: 30%;
-  top: 0;
-  left: -$euiSize;
-  z-index: $domDragDropZLevel0;
-}
-
 .domDragDrop__extraDropWrapper {
   position: relative;
   width: 100%;
   height: 100%;
   background: $euiColorLightestShade;
+  border-radius: $euiSizeXS;
 
   .domDragDrop__extraDrop,
   .domDragDrop__extraDrop:before {

packages/kbn-expandable-flyout/index.ts

@@ -16,4 +16,4 @@ export {
 export type { ExpandableFlyoutApi } from './src/context';
 
 export type { ExpandableFlyoutProps } from './src';
-export type { FlyoutPanel } from './src/types';
+export type { FlyoutPanelProps } from './src/types';

packages/kbn-expandable-flyout/src/actions.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { FlyoutPanel } from './types';
+import { FlyoutPanelProps } from './types';
 
 export enum ActionType {
   openFlyout = 'open_flyout',
@@ -24,22 +24,22 @@ export type Action =
   | {
       type: ActionType.openFlyout;
       payload: {
-        right?: FlyoutPanel;
-        left?: FlyoutPanel;
-        preview?: FlyoutPanel;
+        right?: FlyoutPanelProps;
+        left?: FlyoutPanelProps;
+        preview?: FlyoutPanelProps;
       };
     }
   | {
       type: ActionType.openRightPanel;
-      payload: FlyoutPanel;
+      payload: FlyoutPanelProps;
     }
   | {
       type: ActionType.openLeftPanel;
-      payload: FlyoutPanel;
+      payload: FlyoutPanelProps;
     }
   | {
       type: ActionType.openPreviewPanel;
-      payload: FlyoutPanel;
+      payload: FlyoutPanelProps;
     }
   | {
       type: ActionType.closeRightPanel;

packages/kbn-expandable-flyout/src/context.tsx

@@ -17,7 +17,7 @@ import React, {
 } from 'react';
 import { ActionType } from './actions';
 import { reducer, State } from './reducer';
-import type { FlyoutPanel } from './types';
+import type { FlyoutPanelProps } from './types';
 import { initialState } from './reducer';
 
 export interface ExpandableFlyoutContext {
@@ -28,19 +28,23 @@ export interface ExpandableFlyoutContext {
   /**
    * Open the flyout with left, right and/or preview panels
    */
-  openFlyout: (panels: { left?: FlyoutPanel; right?: FlyoutPanel; preview?: FlyoutPanel }) => void;
+  openFlyout: (panels: {
+    left?: FlyoutPanelProps;
+    right?: FlyoutPanelProps;
+    preview?: FlyoutPanelProps;
+  }) => void;
   /**
    * Replaces the current right panel with a new one
    */
-  openRightPanel: (panel: FlyoutPanel) => void;
+  openRightPanel: (panel: FlyoutPanelProps) => void;
   /**
    * Replaces the current left panel with a new one
    */
-  openLeftPanel: (panel: FlyoutPanel) => void;
+  openLeftPanel: (panel: FlyoutPanelProps) => void;
   /**
    * Add a new preview panel to the list of current preview panels
    */
-  openPreviewPanel: (panel: FlyoutPanel) => void;
+  openPreviewPanel: (panel: FlyoutPanelProps) => void;
   /**
    * Closes right panel
    */
@@ -111,25 +115,25 @@ export const ExpandableFlyoutProvider = React.forwardRef<
       left,
       preview,
     }: {
-      right?: FlyoutPanel;
-      left?: FlyoutPanel;
-      preview?: FlyoutPanel;
+      right?: FlyoutPanelProps;
+      left?: FlyoutPanelProps;
+      preview?: FlyoutPanelProps;
     }) => dispatch({ type: ActionType.openFlyout, payload: { left, right, preview } }),
     [dispatch]
   );
 
   const openRightPanel = useCallback(
-    (panel: FlyoutPanel) => dispatch({ type: ActionType.openRightPanel, payload: panel }),
+    (panel: FlyoutPanelProps) => dispatch({ type: ActionType.openRightPanel, payload: panel }),
     []
   );
 
   const openLeftPanel = useCallback(
-    (panel: FlyoutPanel) => dispatch({ type: ActionType.openLeftPanel, payload: panel }),
+    (panel: FlyoutPanelProps) => dispatch({ type: ActionType.openLeftPanel, payload: panel }),
     []
   );
 
   const openPreviewPanel = useCallback(
-    (panel: FlyoutPanel) => dispatch({ type: ActionType.openPreviewPanel, payload: panel }),
+    (panel: FlyoutPanelProps) => dispatch({ type: ActionType.openPreviewPanel, payload: panel }),
     []
   );
 

packages/kbn-expandable-flyout/src/index.tsx

@@ -13,7 +13,7 @@ import { EuiFlexGroup, EuiFlyout } from '@elastic/eui';
 import { useExpandableFlyoutContext } from './context';
 import { PreviewSection } from './components/preview_section';
 import { RightSection } from './components/right_section';
-import type { FlyoutPanel, Panel } from './types';
+import type { FlyoutPanelProps, Panel } from './types';
 import { LeftSection } from './components/left_section';
 
 export interface ExpandableFlyoutProps extends Omit<EuiFlyoutProps, 'onClose'> {
@@ -98,21 +98,21 @@ export const ExpandableFlyout: React.FC<ExpandableFlyoutProps> = ({
       >
         {leftSection && left ? (
           <LeftSection
-            component={leftSection.component({ ...(left as FlyoutPanel) })}
+            component={leftSection.component({ ...(left as FlyoutPanelProps) })}
             width={leftSectionWidth}
           />
         ) : null}
         {rightSection && right ? (
           <RightSection
-            component={rightSection.component({ ...(right as FlyoutPanel) })}
+            component={rightSection.component({ ...(right as FlyoutPanelProps) })}
             width={rightSectionWidth}
           />
         ) : null}
       </EuiFlexGroup>
 
       {previewSection && preview ? (
         <PreviewSection
-          component={previewSection.component({ ...(mostRecentPreview as FlyoutPanel) })}
+          component={previewSection.component({ ...(mostRecentPreview as FlyoutPanelProps) })}
           showBackButton={showBackButton}
           width={previewSectionWidth}
         />

packages/kbn-expandable-flyout/src/reducer.test.ts

@@ -6,32 +6,32 @@
  * Side Public License, v 1.
  */
 
-import { FlyoutPanel } from './types';
+import { FlyoutPanelProps } from './types';
 import { initialState, reducer, State } from './reducer';
 import { Action, ActionType } from './actions';
 
-const rightPanel1: FlyoutPanel = {
+const rightPanel1: FlyoutPanelProps = {
   id: 'right1',
   path: ['path'],
 };
-const leftPanel1: FlyoutPanel = {
+const leftPanel1: FlyoutPanelProps = {
   id: 'left1',
   params: { id: 'id' },
 };
-const previewPanel1: FlyoutPanel = {
+const previewPanel1: FlyoutPanelProps = {
   id: 'preview1',
   state: { id: 'state' },
 };
 
-const rightPanel2: FlyoutPanel = {
+const rightPanel2: FlyoutPanelProps = {
   id: 'right2',
   path: ['path'],
 };
-const leftPanel2: FlyoutPanel = {
+const leftPanel2: FlyoutPanelProps = {
   id: 'left2',
   params: { id: 'id' },
 };
-const previewPanel2: FlyoutPanel = {
+const previewPanel2: FlyoutPanelProps = {
   id: 'preview2',
   state: { id: 'state' },
 };

packages/kbn-expandable-flyout/src/reducer.ts

@@ -6,22 +6,22 @@
  * Side Public License, v 1.
  */
 
-import { FlyoutPanel } from './types';
+import { FlyoutPanelProps } from './types';
 import { Action, ActionType } from './actions';
 
 export interface State {
   /**
    * Panel to render in the left section
    */
-  left: FlyoutPanel | undefined;
+  left: FlyoutPanelProps | undefined;
   /**
    * Panel to render in the right section
    */
-  right: FlyoutPanel | undefined;
+  right: FlyoutPanelProps | undefined;
   /**
    * Panels to render in the preview section
    */
-  preview: FlyoutPanel[];
+  preview: FlyoutPanelProps[];
 }
 
 export const initialState: State = {
@@ -90,7 +90,7 @@ export function reducer(state: State, action: Action) {
      * Navigates to the previous preview panel by removing the last entry in the array of preview panels.
      */
     case ActionType.previousPreviewPanel: {
-      const p: FlyoutPanel[] = [...state.preview];
+      const p: FlyoutPanelProps[] = [...state.preview];
       p.pop();
       return { ...state, preview: p };
     }

packages/kbn-expandable-flyout/src/types.ts

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-export interface FlyoutPanel {
+export interface FlyoutPanelProps {
   /**
    * Unique key to identify the panel
    */
@@ -35,5 +35,5 @@ export interface Panel {
   /**
    * Component to be rendered
    */
-  component: (props: FlyoutPanel) => React.ReactElement;
+  component: (props: FlyoutPanelProps) => React.ReactElement;
 }