This PR migrates TGrid's rendering to use EuiDataGrid, per the scre…

…enshots below: ![o11y_alerts](https://user-images.githubusercontent.com/4459398/126273572-7e02e3b1-c075-4b1a-9b77-03a6843d6b72.png) ![security_solution_alerts](https://user-images.githubusercontent.com/4459398/126279321-60d8c118-a97f-4c3f-b997-a966f7755d33.png) Related RAC Issue: elastic/security-team#1299 To reduce the size of the `timelines` and `security_solution` plugins, legacy TGrid code and the dependency on `react-beautiful-dnd` will be removed in a follow-up PR. - Related issue: elastic#105941 The legacy code and dependencies will be deleted when the following tasks are completed (in follow-up PRs): - Sorting: Map `redux` sort state to `EuiDataGrid`'s `sorting` prop - Actions: Migrate draggable hover actions to `EuiDataGrid` `cellActions` - related PR: <elastic#105500> - Integrate with the Field Browser for adding / removing columns - related PR: <elastic#105207> - Use `BrowserFields` to display field metadata when hovering over a column - related PR: <elastic#105207> - Migrate Security Solution's actions column config from a single column to multiple columns To desk test this PR, you must enable feature flags in the Observability and Security Solution: - To desk test the `Observability > Alerts` page, add the following settings to `config/kibana.dev.yml`: ``` xpack.observability.unsafe.cases.enabled: true xpack.observability.unsafe.alertingExperience.enabled: true xpack.ruleRegistry.write.enabled: true ``` - To desk test the TGrid in the following Security Solution, edit `x-pack/plugins/security_solution/common/experimental_features.ts` and in the `allowedExperimentalValues` section set: ```typescript tGridEnabled: true, ```
andrew-goldstein · Jul 20, 2021 · 437a36d · 437a36d
1 parent 300644f
commit 437a36d
Show file tree

Hide file tree

Showing 48 changed files with 863 additions and 427 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
@@ -27,6 +27,16 @@ import { CellValueElementProps } from '../../../timelines/components/timeline/ce
 import { useKibana } from '../../lib/kibana';
 import { defaultControlColumn } from '../../../timelines/components/timeline/body/control_columns';
 import { EventsViewer } from './events_viewer';
+import * as i18n from './translations';
+
+const EMPTY_CONTROL_COLUMNS: ControlColumnProps[] = [];
+const leadingControlColumns: ControlColumnProps[] = [
+  {
+    ...defaultControlColumn,
+    // eslint-disable-next-line react/display-name
+    headerCellRender: () => <>{i18n.ACTIONS}</>,
+  },
+];
 
 const FullScreenContainer = styled.div<{ $isFullScreen: boolean }>`
   height: ${({ $isFullScreen }) => ($isFullScreen ? '100%' : undefined)};
@@ -115,8 +125,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
   }, []);
 
   const globalFilters = useMemo(() => [...filters, ...(pageFilters ?? [])], [filters, pageFilters]);
-  const leadingControlColumns: ControlColumnProps[] = [defaultControlColumn];
-  const trailingControlColumns: ControlColumnProps[] = [];
+  const trailingControlColumns: ControlColumnProps[] = EMPTY_CONTROL_COLUMNS;
 
   return (
     <>

diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/translations.ts b/x-pack/plugins/security_solution/public/common/components/events_viewer/translations.ts
@@ -27,3 +27,7 @@ export const UNIT = (totalCount: number) =>
     values: { totalCount },
     defaultMessage: `{totalCount, plural, =1 {event} other {events}}`,
   });
+
+export const ACTIONS = i18n.translate('xpack.securitySolution.eventsViewer.actionsColumnLabel', {
+  defaultMessage: 'Actions',
+});
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/translations.ts b/x-pack/plugins/security_solution/public/detections/components/alerts_table/translations.ts
@@ -18,6 +18,12 @@ export const ALERTS_DOCUMENT_TYPE = i18n.translate(
   }
 );
 
+export const ALERTS_UNIT = (totalCount: number) =>
+  i18n.translate('xpack.securitySolution.detectionEngine.alerts.alertsUnit', {
+    values: { totalCount },
+    defaultMessage: `{totalCount, plural, =1 {alert} other {alerts}}`,
+  });
+
 export const OPEN_ALERTS = i18n.translate(
   'xpack.securitySolution.detectionEngine.alerts.openAlertsTitle',
   {

diff --git a/.../public/detections/configurations/examples/observablity_alerts/render_cell_value.test.tsx b/.../public/detections/configurations/examples/observablity_alerts/render_cell_value.test.tsx
@@ -41,6 +41,7 @@ describe('RenderCellValue', () => {
       eventId,
       header,
       isDetails: false,
+      isDraggable: true,
       isExpandable: false,
       isExpanded: false,
       linkValues,

diff --git a/...ution/public/detections/configurations/examples/observablity_alerts/render_cell_value.tsx b/...ution/public/detections/configurations/examples/observablity_alerts/render_cell_value.tsx
@@ -33,6 +33,7 @@ export const RenderCellValue: React.FC<
   eventId,
   header,
   isDetails,
+  isDraggable,
   isExpandable,
   isExpanded,
   linkValues,
@@ -71,6 +72,7 @@ export const RenderCellValue: React.FC<
           eventId={eventId}
           header={header}
           isDetails={isDetails}
+          isDraggable={isDraggable}
           isExpandable={isExpandable}
           isExpanded={isExpanded}
           linkValues={linkValues}

diff --git a/...ublic/detections/configurations/examples/security_solution_rac/render_cell_value.test.tsx b/...ublic/detections/configurations/examples/security_solution_rac/render_cell_value.test.tsx
@@ -41,6 +41,7 @@ describe('RenderCellValue', () => {
       eventId,
       header,
       isDetails: false,
+      isDraggable: false,
       isExpandable: false,
       isExpanded: false,
       linkValues,

diff --git a/...ion/public/detections/configurations/examples/security_solution_rac/render_cell_value.tsx b/...ion/public/detections/configurations/examples/security_solution_rac/render_cell_value.tsx
@@ -67,6 +67,7 @@ export const RenderCellValue: React.FC<
           eventId={eventId}
           header={header}
           isDetails={isDetails}
+          isDraggable={false}
           isExpandable={isExpandable}
           isExpanded={isExpanded}
           linkValues={linkValues}

diff --git a/.../public/detections/configurations/security_solution_detections/render_cell_value.test.tsx b/.../public/detections/configurations/security_solution_detections/render_cell_value.test.tsx
@@ -41,6 +41,7 @@ describe('RenderCellValue', () => {
       eventId,
       header,
       isDetails: false,
+      isDraggable: false,
       isExpandable: false,
       isExpanded: false,
       linkValues,

diff --git a/...ution/public/detections/configurations/security_solution_detections/render_cell_value.tsx b/...ution/public/detections/configurations/security_solution_detections/render_cell_value.tsx
@@ -22,6 +22,7 @@ export const RenderCellValue: React.FC<
   columnId,
   data,
   eventId,
+  isDraggable,
   header,
   isDetails,
   isExpandable,
@@ -35,6 +36,7 @@ export const RenderCellValue: React.FC<
     columnId={columnId}
     data={data}
     eventId={eventId}
+    isDraggable={isDraggable}
     header={header}
     isDetails={isDetails}
     isExpandable={isExpandable}

diff --git a/x-pack/plugins/security_solution/public/network/components/port/index.test.tsx b/x-pack/plugins/security_solution/public/network/components/port/index.test.tsx
@@ -31,15 +31,27 @@ describe('Port', () => {
 
   test('renders correctly against snapshot', () => {
     const wrapper = shallow(
-      <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
+      <Port
+        contextId="test"
+        eventId="abcd"
+        fieldName="destination.port"
+        isDraggable={true}
+        value="443"
+      />
     );
     expect(wrapper).toMatchSnapshot();
   });
 
   test('it renders the port', () => {
     const wrapper = mount(
       <TestProviders>
-        <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
+        <Port
+          contextId="test"
+          eventId="abcd"
+          fieldName="destination.port"
+          isDraggable={true}
+          value="443"
+        />
       </TestProviders>
     );
 
@@ -51,7 +63,13 @@ describe('Port', () => {
   test('it hyperlinks links destination.port to an external service that describes the purpose of the port', () => {
     const wrapper = mount(
       <TestProviders>
-        <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
+        <Port
+          contextId="test"
+          eventId="abcd"
+          fieldName="destination.port"
+          isDraggable={true}
+          value="443"
+        />
       </TestProviders>
     );
 
@@ -65,7 +83,13 @@ describe('Port', () => {
   test('it renders only one external link icon', () => {
     const wrapper = mount(
       <TestProviders>
-        <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
+        <Port
+          contextId="test"
+          eventId="abcd"
+          fieldName="destination.port"
+          isDraggable={true}
+          value="443"
+        />
       </TestProviders>
     );
 

diff --git a/x-pack/plugins/security_solution/public/network/components/port/index.tsx b/x-pack/plugins/security_solution/public/network/components/port/index.tsx
@@ -29,17 +29,22 @@ export const Port = React.memo<{
   contextId: string;
   eventId: string;
   fieldName: string;
+  isDraggable: boolean;
   value: string | undefined | null;
-}>(({ contextId, eventId, fieldName, value }) => (
-  <DefaultDraggable
-    data-test-subj="port"
-    field={fieldName}
-    id={`port-default-draggable-${contextId}-${eventId}-${fieldName}-${value}`}
-    tooltipContent={fieldName}
-    value={value}
-  >
+}>(({ contextId, eventId, fieldName, isDraggable, value }) =>
+  isDraggable ? (
+    <DefaultDraggable
+      data-test-subj="port"
+      field={fieldName}
+      id={`port-default-draggable-${contextId}-${eventId}-${fieldName}-${value}`}
+      tooltipContent={fieldName}
+      value={value}
+    >
+      <PortOrServiceNameLink portOrServiceName={value || getEmptyValue()} />
+    </DefaultDraggable>
+  ) : (
     <PortOrServiceNameLink portOrServiceName={value || getEmptyValue()} />
-  </DefaultDraggable>
-));
+  )
+);
 
 Port.displayName = 'Port';
diff --git a/...k/plugins/security_solution/public/network/components/source_destination/ip_with_port.tsx b/...k/plugins/security_solution/public/network/components/source_destination/ip_with_port.tsx
@@ -39,6 +39,7 @@ const PortWithSeparator = React.memo<{
           data-test-subj="port"
           eventId={eventId}
           fieldName={portFieldName}
+          isDraggable={true}
           value={port}
         />
       </EuiFlexItem>

diff --git a/.../security_solution/public/network/components/source_destination/source_destination_ip.tsx b/.../security_solution/public/network/components/source_destination/source_destination_ip.tsx
@@ -202,6 +202,7 @@ export const SourceDestinationIp = React.memo<SourceDestinationIpProps>(
                       data-test-subj="port"
                       eventId={eventId}
                       fieldName={`${type}.port`}
+                      isDraggable={true}
                       value={port}
                     />
                   </EuiFlexItem>

diff --git a/x-pack/plugins/security_solution/public/timelines/components/duration/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/duration/index.test.tsx
@@ -26,6 +26,7 @@ describe('Duration', () => {
           contextId="test"
           eventId="abc"
           fieldName="event.duration"
+          isDraggable={true}
           value={`${ONE_MILLISECOND_AS_NANOSECONDS}`}
         />
       </TestProviders>

diff --git a/x-pack/plugins/security_solution/public/timelines/components/duration/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/duration/index.tsx
@@ -20,18 +20,23 @@ export const Duration = React.memo<{
   contextId: string;
   eventId: string;
   fieldName: string;
+  isDraggable: boolean;
   value?: string | null;
-}>(({ contextId, eventId, fieldName, value }) => (
-  <DefaultDraggable
-    id={`duration-default-draggable-${contextId}-${eventId}-${fieldName}-${value}`}
-    // @ts-expect-error
-    name={name}
-    field={fieldName}
-    tooltipContent={null}
-    value={value}
-  >
+}>(({ contextId, eventId, fieldName, isDraggable, value }) =>
+  isDraggable ? (
+    <DefaultDraggable
+      id={`duration-default-draggable-${contextId}-${eventId}-${fieldName}-${value}`}
+      // @ts-expect-error
+      name={name}
+      field={fieldName}
+      tooltipContent={null}
+      value={value}
+    >
+      <FormattedDuration maybeDurationNanoseconds={value} tooltipTitle={fieldName} />
+    </DefaultDraggable>
+  ) : (
     <FormattedDuration maybeDurationNanoseconds={value} tooltipTitle={fieldName} />
-  </DefaultDraggable>
-));
+  )
+);
 
 Duration.displayName = 'Duration';