[RAM] Enable custom alerts table cell popovers (#176804)

## Summary Adds the `renderCellPopover` and `getRenderCellPopover` configuration options to the alerts table in order to allow customizing the cell popovers.
elastic · Apr 4, 2024 · 82ccb8d · 82ccb8d
1 parent 8feb50d
commit 82ccb8d
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 29 deletions.
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx
@@ -24,10 +24,12 @@ import {
   EuiDataGridRefProps,
   EuiFlexGroup,
   EuiDataGridProps,
+  EuiDataGridCellPopoverElementProps,
   EuiCodeBlock,
   EuiText,
   EuiIcon,
   EuiSpacer,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { useQueryClient } from '@tanstack/react-query';
 import styled from '@emotion/styled';
@@ -134,6 +136,44 @@ const CustomGridBody = memo(
   }
 );
 
+// Here we force the error callout to be the same height as the cell content
+// so that the error detail gets hidden in the overflow area and only shown in
+// the cell popover
+const errorCalloutStyles = css`
+  height: 1lh;
+`;
+
+/**
+ * An error callout that displays the error stack in a code block
+ */
+const ViewError = ({ error }: { error: Error }) => (
+  <>
+    <EuiFlexGroup gutterSize="s" alignItems="center" css={errorCalloutStyles}>
+      <EuiFlexItem grow={false}>
+        <EuiIcon type="error" color="danger" />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiText
+          color="subdued"
+          size="xs"
+          css={css`
+            line-height: unset;
+          `}
+        >
+          <strong>
+            <FormattedMessage
+              id="xpack.triggersActionsUI.sections.alertTable.viewError"
+              defaultMessage="An error occurred"
+            />
+          </strong>
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <EuiSpacer />
+    <EuiCodeBlock isCopyable>{error.stack}</EuiCodeBlock>
+  </>
+);
+
 const AlertsTable: React.FunctionComponent<AlertsTableProps> = (props: AlertsTableProps) => {
   const {
     visibleColumns,
@@ -381,12 +421,10 @@ const AlertsTable: React.FunctionComponent<AlertsTableProps> = (props: AlertsTab
 
   const renderCellValue = useCallback(
     () =>
-      props.alertsTableConfiguration?.getRenderCellValue
-        ? props.alertsTableConfiguration?.getRenderCellValue({
-            setFlyoutAlert: handleFlyoutAlert,
-            context: renderCellContext,
-          })
-        : basicRenderCellValue,
+      props.alertsTableConfiguration?.getRenderCellValue?.({
+        setFlyoutAlert: handleFlyoutAlert,
+        context: renderCellContext,
+      }) ?? basicRenderCellValue,
     [handleFlyoutAlert, props.alertsTableConfiguration, renderCellContext]
   )();
 
@@ -427,27 +465,7 @@ const AlertsTable: React.FunctionComponent<AlertsTableProps> = (props: AlertsTab
         }
         return null;
       } catch (e) {
-        return (
-          <>
-            <EuiFlexGroup
-              gutterSize="s"
-              alignItems="center"
-              css={css`
-                height: 1lh;
-              `}
-            >
-              <EuiIcon type="error" color="danger" />
-              <EuiText color="danger" size="xs">
-                <FormattedMessage
-                  id="xpack.triggersActionsUI.sections.alertTable.cellErrorTitle"
-                  defaultMessage="Error while rendering cell"
-                />
-              </EuiText>
-            </EuiFlexGroup>
-            <EuiSpacer />
-            <EuiCodeBlock isCopyable>{e.stack}</EuiCodeBlock>
-          </>
-        );
+        return <ViewError error={e} />;
       }
     },
     [
@@ -466,6 +484,36 @@ const AlertsTable: React.FunctionComponent<AlertsTableProps> = (props: AlertsTab
     ]
   );
 
+  const renderCellPopover = useMemo(
+    () =>
+      props.alertsTableConfiguration?.getRenderCellPopover?.({
+        context: renderCellContext,
+      }) ?? props.renderCellPopover,
+    [props.alertsTableConfiguration, props.renderCellPopover, renderCellContext]
+  );
+
+  const handleRenderCellPopover = useMemo(
+    () =>
+      renderCellPopover
+        ? (_props: EuiDataGridCellPopoverElementProps) => {
+            try {
+              const idx = _props.rowIndex - pagination.pageSize * pagination.pageIndex;
+              const alert = alerts[idx];
+              if (alert) {
+                return renderCellPopover({
+                  ..._props,
+                  alert,
+                });
+              }
+              return null;
+            } catch (e) {
+              return <ViewError error={e} />;
+            }
+          }
+        : undefined,
+    [alerts, pagination.pageIndex, pagination.pageSize, renderCellPopover]
+  );
+
   const dataGridPagination = useMemo(
     () => ({
       ...pagination,
@@ -593,6 +641,7 @@ const AlertsTable: React.FunctionComponent<AlertsTableProps> = (props: AlertsTab
             onColumnResize={onColumnResize}
             ref={dataGridRef}
             renderCustomGridBody={props.dynamicRowHeight ? renderCustomGridBody : undefined}
+            renderCellPopover={handleRenderCellPopover}
           />
         )}
       </section>

diff --git a/...ugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.tsx b/...ugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.tsx
@@ -93,7 +93,8 @@ export type AlertsTableStateProps = {
    */
   dynamicRowHeight?: boolean;
   lastReloadRequestTime?: number;
-} & Partial<EuiDataGridProps>;
+  renderCellPopover?: AlertsTableProps['renderCellPopover'];
+} & Omit<Partial<EuiDataGridProps>, 'renderCellPopover'>;
 
 export interface AlertsTableStorage {
   columns: EuiDataGridColumn[];
@@ -185,6 +186,7 @@ const AlertsTableStateWithQueryProvider = ({
   leadingControlColumns,
   rowHeightsOptions,
   renderCellValue,
+  renderCellPopover,
   columns: propColumns,
   gridStyle,
   browserFields: propBrowserFields,
@@ -449,6 +451,7 @@ const AlertsTableStateWithQueryProvider = ({
       query,
       rowHeightsOptions,
       renderCellValue,
+      renderCellPopover,
       gridStyle,
       controls: persistentControls,
       showInspectButton,
@@ -477,6 +480,7 @@ const AlertsTableStateWithQueryProvider = ({
       query,
       rowHeightsOptions,
       renderCellValue,
+      renderCellPopover,
       gridStyle,
       persistentControls,
       showInspectButton,

diff --git a/x-pack/plugins/triggers_actions_ui/public/types.ts b/x-pack/plugins/triggers_actions_ui/public/types.ts
@@ -24,6 +24,7 @@ import type {
   EuiDataGridToolBarVisibilityOptions,
   EuiSuperSelectOption,
   EuiDataGridOnColumnResizeHandler,
+  EuiDataGridCellPopoverElementProps,
 } from '@elastic/eui';
 import type { RuleCreationValidConsumer, ValidFeatureId } from '@kbn/rule-data-utils';
 import { EuiDataGridColumn, EuiDataGridControlColumn, EuiDataGridSorting } from '@elastic/eui';
@@ -587,6 +588,7 @@ export type AlertsTableProps = {
    */
   dynamicRowHeight?: boolean;
   featureIds?: ValidFeatureId[];
+  renderCellPopover?: ReturnType<GetRenderCellPopover>;
 } & Partial<Pick<EuiDataGridProps, 'gridStyle' | 'rowHeightsOptions'>>;
 
 export type SetFlyoutAlert = (alertId: string) => void;
@@ -605,7 +607,15 @@ export type GetRenderCellValue<T = unknown> = ({
   context?: T;
 }) => (
   props: EuiDataGridCellValueElementProps & { data: TimelineNonEcsData[] }
-) => React.ReactNode | JSX.Element | null | string;
+) => React.ReactNode | JSX.Element;
+
+export type GetRenderCellPopover<T = unknown> = ({
+  context,
+}: {
+  context?: T;
+}) => (
+  props: EuiDataGridCellPopoverElementProps & { alert: Alert }
+) => React.ReactNode | JSX.Element;
 
 export type PreFetchPageContext<T = unknown> = ({
   alerts,
@@ -739,6 +749,7 @@ export interface AlertsTableConfigurationRegistry {
   };
   sort?: SortCombinations[];
   getRenderCellValue?: GetRenderCellValue;
+  getRenderCellPopover?: GetRenderCellPopover;
   useActionsColumn?: UseActionsColumnRegistry;
   useBulkActions?: UseBulkActionsRegistry;
   useCellActions?: UseCellActions;