- pr feedback

elastic · Jul 21, 2021 · bfde95a · bfde95a
1 parent 6a7f93e
commit bfde95a
Show file tree

Hide file tree

Showing 14 changed files with 60 additions and 59 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/alerts_viewer/alerts_table.tsx b/x-pack/plugins/security_solution/public/common/components/alerts_viewer/alerts_table.tsx
@@ -17,6 +17,8 @@ import { DefaultCellRenderer } from '../../../timelines/components/timeline/cell
 import * as i18n from './translations';
 import { useKibana } from '../../lib/kibana';
 import { SourcererScopeName } from '../../store/sourcerer/model';
+import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
+import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
 
 export interface OwnProps {
   end: string;
@@ -74,20 +76,29 @@ const AlertsTableComponent: React.FC<Props> = ({
   const alertsFilter = useMemo(() => [...defaultAlertsFilters, ...pageFilters], [pageFilters]);
   const { filterManager } = useKibana().services.data.query;
 
+  const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
+
   useEffect(() => {
     dispatch(
       timelineActions.initializeTGridSettings({
         id: timelineId,
         documentType: i18n.ALERTS_DOCUMENT_TYPE,
         filterManager,
-        defaultColumns: alertsDefaultModel.columns,
+        defaultColumns: alertsDefaultModel.columns.map((c) =>
+          !tGridEnabled && c.initialWidth == null
+            ? {
+                ...c,
+                initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
+              }
+            : c
+        ),
         excludedRowRendererIds: alertsDefaultModel.excludedRowRendererIds,
         footerText: i18n.TOTAL_COUNT_OF_ALERTS,
         title: i18n.ALERTS_TABLE_TITLE,
         // TODO: avoid passing this through the store
       })
     );
-  }, [dispatch, filterManager, timelineId]);
+  }, [dispatch, filterManager, tGridEnabled, timelineId]);
 
   return (
     <StatefulEventsViewer

diff --git a/x-pack/plugins/security_solution/public/common/components/alerts_viewer/default_headers.ts b/x-pack/plugins/security_solution/public/common/components/alerts_viewer/default_headers.ts
@@ -7,10 +7,7 @@
 
 import { ColumnHeaderOptions, RowRendererId } from '../../../../common/types/timeline';
 import { defaultColumnHeaderType } from '../../../timelines/components/timeline/body/column_headers/default_headers';
-import {
-  DEFAULT_COLUMN_MIN_WIDTH,
-  DEFAULT_DATE_COLUMN_MIN_WIDTH,
-} from '../../../timelines/components/timeline/body/constants';
+import { DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
 import { SubsetTimelineModel } from '../../../timelines/store/timeline/model';
 import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
 
@@ -23,48 +20,39 @@ export const alertsHeaders: ColumnHeaderOptions[] = [
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.module',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
     linkField: 'rule.reference',
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.dataset',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.category',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.severity',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'observer.name',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'host.name',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'message',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'agent.id',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'agent.type',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
 ];
 

diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/default_headers.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/default_headers.tsx
@@ -7,10 +7,7 @@
 
 import { ColumnHeaderOptions } from '../../../../common';
 import { defaultColumnHeaderType } from '../../../timelines/components/timeline/body/column_headers/default_headers';
-import {
-  DEFAULT_COLUMN_MIN_WIDTH,
-  DEFAULT_DATE_COLUMN_MIN_WIDTH,
-} from '../../../timelines/components/timeline/body/constants';
+import { DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
 
 export const defaultHeaders: ColumnHeaderOptions[] = [
   {
@@ -21,41 +18,33 @@ export const defaultHeaders: ColumnHeaderOptions[] = [
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'message',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'host.name',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.module',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.dataset',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.action',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'user.name',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'source.ip',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'destination.ip',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
 ];
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx
@@ -52,6 +52,7 @@ import { buildTimeRangeFilter } from './helpers';
 import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
 import { columns, RenderCellValue } from '../../configurations/security_solution_detections';
 import { useInvalidFilterQuery } from '../../../common/hooks/use_invalid_filter_query';
+import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
 
 interface OwnProps {
   defaultFilters?: Filter[];
@@ -343,10 +344,19 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
     ? alertsDefaultModelRuleRegistry
     : alertsDefaultModel;
 
+  const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
+
   useEffect(() => {
     dispatch(
       timelineActions.initializeTGridSettings({
-        defaultColumns: columns,
+        defaultColumns: columns.map((c) =>
+          !tGridEnabled && c.initialWidth == null
+            ? {
+                ...c,
+                initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
+              }
+            : c
+        ),
         documentType: i18n.ALERTS_DOCUMENT_TYPE,
         excludedRowRendererIds: defaultTimelineModel.excludedRowRendererIds as RowRendererId[],
         filterManager,
@@ -359,7 +369,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
         showCheckboxes: true,
       })
     );
-  }, [dispatch, defaultTimelineModel, filterManager, timelineId]);
+  }, [dispatch, defaultTimelineModel, filterManager, tGridEnabled, timelineId]);
 
   const headerFilterGroup = useMemo(
     () => <AlertsTableFilterGroup onFilterGroupChanged={onFilterGroupChangedCallback} />,

diff --git a/...ecurity_solution/public/detections/configurations/examples/observablity_alerts/columns.ts b/...ecurity_solution/public/detections/configurations/examples/observablity_alerts/columns.ts
@@ -47,6 +47,5 @@ export const columns: Array<
     columnHeaderType: defaultColumnHeaderType,
     displayAsText: i18n.ALERTS_HEADERS_REASON,
     id: 'signal.reason',
-    initialWidth: 644,
   },
 ];
diff --git a/...urity_solution/public/detections/configurations/examples/security_solution_rac/columns.ts b/...urity_solution/public/detections/configurations/examples/security_solution_rac/columns.ts
@@ -41,6 +41,5 @@ export const columns: Array<
     columnHeaderType: defaultColumnHeaderType,
     id: 'signal.reason',
     displayAsText: i18n.ALERTS_HEADERS_REASON,
-    initialWidth: 644,
   },
 ];
diff --git a/...ecurity_solution/public/detections/configurations/security_solution_detections/columns.ts b/...ecurity_solution/public/detections/configurations/security_solution_detections/columns.ts
@@ -62,40 +62,33 @@ export const columns: Array<
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.module',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
     linkField: 'rule.reference',
   },
   {
     aggregatable: true,
     category: 'event',
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.action',
-    initialWidth: 140,
     type: 'string',
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.category',
-    initialWidth: 150,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'host.name',
-    initialWidth: 120,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'user.name',
-    initialWidth: 120,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'source.ip',
-    initialWidth: 120,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'destination.ip',
-    initialWidth: 140,
   },
 ];
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/navigation/events_query_tab_body.tsx b/x-pack/plugins/security_solution/public/hosts/pages/navigation/events_query_tab_body.tsx
@@ -24,6 +24,8 @@ import { MatrixHistogramType } from '../../../../common/search_strategy/security
 import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
 import { DefaultCellRenderer } from '../../../timelines/components/timeline/cell_rendering/default_cell_renderer';
 import { SourcererScopeName } from '../../../common/store/sourcerer/model';
+import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
+import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
 
 const EVENTS_HISTOGRAM_ID = 'eventsHistogramQuery';
 
@@ -66,14 +68,23 @@ const EventsQueryTabBodyComponent: React.FC<HostsComponentsQueryProps> = ({
   const dispatch = useDispatch();
   const { globalFullScreen } = useGlobalFullScreen();
 
+  const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
+
   useEffect(() => {
     dispatch(
       timelineActions.initializeTGridSettings({
         id: TimelineId.hostsPageEvents,
-        defaultColumns: eventsDefaultModel.columns,
+        defaultColumns: eventsDefaultModel.columns.map((c) =>
+          !tGridEnabled && c.initialWidth == null
+            ? {
+                ...c,
+                initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
+              }
+            : c
+        ),
       })
     );
-  }, [dispatch]);
+  }, [dispatch, tGridEnabled]);
 
   useEffect(() => {
     return () => {

diff --git a/...ecurity_solution/public/timelines/components/timeline/body/column_headers/helpers.test.ts b/...ecurity_solution/public/timelines/components/timeline/body/column_headers/helpers.test.ts
@@ -12,8 +12,7 @@ import { getActionsColumnWidth, getColumnWidthFromType, getColumnHeaders } from
 import {
   DEFAULT_COLUMN_MIN_WIDTH,
   DEFAULT_DATE_COLUMN_MIN_WIDTH,
-  DEFAULT_ACTIONS_COLUMN_WIDTH,
-  EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH,
+  MINIMUM_ACTIONS_COLUMN_WIDTH,
   SHOW_CHECK_BOXES_COLUMN_WIDTH,
 } from '../constants';
 import '../../../../../common/mock/match_media';
@@ -31,22 +30,22 @@ describe('helpers', () => {
 
   describe('getActionsColumnWidth', () => {
     test('returns the default actions column width when isEventViewer is false', () => {
-      expect(getActionsColumnWidth(false)).toEqual(DEFAULT_ACTIONS_COLUMN_WIDTH);
+      expect(getActionsColumnWidth(false)).toEqual(MINIMUM_ACTIONS_COLUMN_WIDTH);
     });
 
-    test('returns the default actions column width + checkbox width when isEventViewer is false and showCheckboxes is true', () => {
+    test('returns the minimum actions column width + checkbox width when isEventViewer is false and showCheckboxes is true', () => {
       expect(getActionsColumnWidth(false, true)).toEqual(
-        DEFAULT_ACTIONS_COLUMN_WIDTH + SHOW_CHECK_BOXES_COLUMN_WIDTH
+        MINIMUM_ACTIONS_COLUMN_WIDTH + SHOW_CHECK_BOXES_COLUMN_WIDTH
       );
     });
 
-    test('returns the events viewer actions column width when isEventViewer is true', () => {
-      expect(getActionsColumnWidth(true)).toEqual(EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH);
+    test('returns the minimum actions column width when isEventViewer is true', () => {
+      expect(getActionsColumnWidth(true)).toEqual(MINIMUM_ACTIONS_COLUMN_WIDTH);
     });
 
-    test('returns the events viewer actions column width + checkbox width when isEventViewer is true and showCheckboxes is true', () => {
+    test('returns the minimum actions column width + checkbox width when isEventViewer is true and showCheckboxes is true', () => {
       expect(getActionsColumnWidth(true, true)).toEqual(
-        EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH + SHOW_CHECK_BOXES_COLUMN_WIDTH
+        MINIMUM_ACTIONS_COLUMN_WIDTH + SHOW_CHECK_BOXES_COLUMN_WIDTH
       );
     });
   });

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts
@@ -6,7 +6,7 @@
  */
 
 /** The minimum (fixed) width of the Actions column */
-export const MINIMUM_ACTIONS_COLUMN_WIDTH = 50; // px;
+export const MINIMUM_ACTIONS_COLUMN_WIDTH = 148; // px;
 
 /** Additional column width to include when checkboxes are shown **/
 export const SHOW_CHECK_BOXES_COLUMN_WIDTH = 24; // px;

diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx
@@ -73,7 +73,7 @@ const EMPTY_CONTROL_COLUMNS: ControlColumnProps[] = [];
 
 const EmptyHeaderCellRender: ComponentType = () => null;
 
-const gridStyle: EuiDataGridStyle = { border: 'none', header: 'underline' };
+const gridStyle: EuiDataGridStyle = { border: 'none', fontSize: 's', header: 'underline' };
 
 const transformControlColumns = ({
   actionColumnsWidth,

diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/row_action/index.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/row_action/index.tsx
@@ -52,9 +52,10 @@ const RowActionComponent = ({
   timelineId,
   width,
 }: Props) => {
-  const { data: timelineNonEcsData, ecs: ecsData, _id: eventId, _index: indexName } = data[
-    rowIndex
-  ];
+  const { data: timelineNonEcsData, ecs: ecsData, _id: eventId, _index: indexName } = useMemo(
+    () => data[rowIndex],
+    [data, rowIndex]
+  );
 
   const dispatch = useDispatch();
 

diff --git a/x-pack/plugins/timelines/public/components/t_grid/toolbar/fields_browser/index.tsx b/x-pack/plugins/timelines/public/components/t_grid/toolbar/fields_browser/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiButtonIcon, EuiPortal, EuiToolTip } from '@elastic/eui';
+import { EuiButtonEmpty, EuiPortal, EuiToolTip } from '@elastic/eui';
 import { noop } from 'lodash/fp';
 import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import styled from 'styled-components';
@@ -25,7 +25,6 @@ export const INPUT_TIMEOUT = 250;
 const FieldsBrowserButtonContainer = styled.div`
   display: inline-block;
   position: relative;
-  width: 24px;
 `;
 
 FieldsBrowserButtonContainer.displayName = 'FieldsBrowserButtonContainer';
@@ -127,16 +126,18 @@ export const StatefulFieldsBrowserComponent: React.FC<FieldBrowserProps> = ({
   return (
     <FieldsBrowserButtonContainer data-test-subj="fields-browser-button-container">
       <EuiToolTip content={i18n.FIELDS_BROWSER}>
-        <EuiButtonIcon
+        <EuiButtonEmpty
           aria-label={i18n.FIELDS_BROWSER}
           buttonRef={customizeColumnsButtonRef}
           className={fieldsButtonClassName}
+          color="text"
           data-test-subj="show-field-browser"
           iconType="listAdd"
           onClick={toggleShow}
+          size="xs"
         >
           {i18n.FIELDS}
-        </EuiButtonIcon>
+        </EuiButtonEmpty>
       </EuiToolTip>
 
       {show && (