diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details_alerts_table.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details_alerts_table.tsx
index 0f113efe317aa..60296da8d43cd 100644
--- a/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details_alerts_table.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details_alerts_table.tsx
@@ -6,7 +6,7 @@
*/
import type { ReactElement, ReactNode } from 'react';
-import React, { type FC, useMemo, useCallback } from 'react';
+import React, { type VFC, useMemo, useCallback } from 'react';
import { type Criteria, EuiBasicTable, formatDate } from '@elastic/eui';
import { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
import type { Filter } from '@kbn/es-query';
@@ -14,6 +14,7 @@ import { isRight } from 'fp-ts/lib/Either';
import { ALERT_REASON, ALERT_RULE_NAME } from '@kbn/rule-data-utils';
import { FormattedMessage } from '@kbn/i18n-react';
import { i18n } from '@kbn/i18n';
+import { CellTooltipWrapper } from '../../shared/components/cell_tooltip_wrapper';
import type { DataProvider } from '../../../../common/types';
import { SeverityBadge } from '../../../detections/components/rules/severity_badge';
import { usePaginatedAlerts } from '../hooks/use_paginated_alerts';
@@ -36,7 +37,14 @@ export const columns = [
),
truncateText: true,
dataType: 'date' as const,
- render: (value: string) => formatDate(value, TIMESTAMP_DATE_FORMAT),
+ render: (value: string) => {
+ const date = formatDate(value, TIMESTAMP_DATE_FORMAT);
+ return (
+
+ {date}
+
+ );
+ },
},
{
field: ALERT_RULE_NAME,
@@ -47,6 +55,11 @@ export const columns = [
/>
),
truncateText: true,
+ render: (value: string) => (
+
+ {value}
+
+ ),
},
{
field: ALERT_REASON,
@@ -57,6 +70,11 @@ export const columns = [
/>
),
truncateText: true,
+ render: (value: string) => (
+
+ {value}
+
+ ),
},
{
field: 'kibana.alert.severity',
@@ -69,7 +87,12 @@ export const columns = [
truncateText: true,
render: (value: string) => {
const decodedSeverity = Severity.decode(value);
- return isRight(decodedSeverity) ? : value;
+ const renderValue = isRight(decodedSeverity) ? (
+
+ ) : (
+
{value}
+ );
+ return {renderValue};
},
},
];
@@ -108,7 +131,7 @@ export interface CorrelationsDetailsAlertsTableProps {
/**
* Renders paginated alert array based on the provided alertIds
*/
-export const CorrelationsDetailsAlertsTable: FC = ({
+export const CorrelationsDetailsAlertsTable: VFC = ({
title,
loading,
alertIds,
diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/related_cases.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/related_cases.tsx
index 5818b9314390c..76a97e6e71053 100644
--- a/x-pack/plugins/security_solution/public/flyout/left/components/related_cases.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/left/components/related_cases.tsx
@@ -10,6 +10,7 @@ import type { EuiBasicTableColumn } from '@elastic/eui';
import { EuiInMemoryTable, EuiSkeletonText } from '@elastic/eui';
import type { RelatedCase } from '@kbn/cases-plugin/common';
import { FormattedMessage } from '@kbn/i18n-react';
+import { CellTooltipWrapper } from '../../shared/components/cell_tooltip_wrapper';
import { CaseDetailsLink } from '../../../common/components/links';
import {
CORRELATIONS_DETAILS_CASES_SECTION_TABLE_TEST_ID,
@@ -29,11 +30,12 @@ const columns: Array> = [
defaultMessage="Name"
/>
),
- truncateText: true,
render: (value: string, caseData: RelatedCase) => (
-
- {caseData.title}
-
+
+
+ {caseData.title}
+
+
),
},
{
@@ -45,6 +47,7 @@ const columns: Array> = [
/>
),
truncateText: true,
+ width: '25%',
},
];
diff --git a/x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.test.tsx b/x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.test.tsx
new file mode 100644
index 0000000000000..3e6b6d7e47f8a
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.test.tsx
@@ -0,0 +1,22 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CellTooltipWrapper } from './cell_tooltip_wrapper';
+
+const TEST_ID = 'test-id';
+const children = {'test content'}
;
+
+describe('', () => {
+ it('should render non-expandable panel by default', () => {
+ const { getByTestId } = render(
+ {children}
+ );
+ expect(getByTestId(TEST_ID)).toBeInTheDocument();
+ });
+});
diff --git a/x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.tsx b/x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.tsx
new file mode 100644
index 0000000000000..39bbd08fc3ba6
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { VFC, ReactElement } from 'react';
+import React from 'react';
+import { EuiToolTip } from '@elastic/eui';
+
+export interface CellTooltipWrapperProps {
+ /**
+ * Value displayed in the tooltip and in the cell itself
+ */
+ tooltip: string | ReactElement;
+ /**
+ * Tooltip anchor position
+ */
+ anchorPosition?: 'left' | 'right' | 'top' | 'bottom';
+ /**
+ * React components to render
+ */
+ children: React.ReactElement;
+}
+
+export const CellTooltipWrapper: VFC = ({
+ tooltip,
+ anchorPosition = 'top',
+ children,
+}) => (
+
+ {children}
+
+);