fix unit prop and default it only in the tGrid body (#109252)

x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx

@@ -65,6 +65,7 @@ export interface OwnProps {
   utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
   additionalFilters?: React.ReactNode;
   hasAlertsCrud?: boolean;
+  unit?: (n: number) => string;
 }
 
 type Props = OwnProps & PropsFromRedux;
@@ -105,6 +106,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
   // If truthy, the graph viewer (Resolver) is showing
   graphEventId,
   hasAlertsCrud = false,
+  unit,
 }) => {
   const { timelines: timelinesUi } = useKibana().services;
   const {
@@ -187,6 +189,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
               leadingControlColumns,
               trailingControlColumns,
               tGridEventRenderedViewEnabled,
+              unit,
             })
           ) : (
             <EventsViewer

x-pack/plugins/security_solution/public/hosts/pages/navigation/events_query_tab_body.tsx

@@ -46,6 +46,7 @@ export const eventsStackByOptions: MatrixHistogramOption[] = [
 ];
 
 const DEFAULT_STACK_BY = 'event.action';
+const unit = (n: number) => i18n.EVENTS_UNIT(n);
 
 export const histogramConfigs: MatrixHistogramConfigs = {
   defaultStackByOption:
@@ -119,6 +120,7 @@ const EventsQueryTabBodyComponent: React.FC<HostsComponentsQueryProps> = ({
         scopeId={SourcererScopeName.default}
         start={startDate}
         pageFilters={pageFilters}
+        unit={unit}
       />
     </>
   );

x-pack/plugins/security_solution/public/hosts/pages/translations.ts

@@ -70,3 +70,9 @@ export const ERROR_FETCHING_EVENTS_DATA = i18n.translate(
     defaultMessage: 'Failed to query events data',
   }
 );
+
+export const EVENTS_UNIT = (totalCount: number) =>
+  i18n.translate('xpack.securitySolution.hosts.navigaton.eventsUnit', {
+    values: { totalCount },
+    defaultMessage: `{totalCount, plural, =1 {event} other {events}}`,
+  });

x-pack/plugins/timelines/public/components/t_grid/body/index.tsx

@@ -105,7 +105,7 @@ interface OwnProps {
   hasAlertsCrud?: boolean;
 }
 
-const basicUnit = (n: number) => i18n.UNIT(n);
+const defaultUnit = (n: number) => i18n.ALERTS_UNIT(n);
 const NUM_OF_ICON_IN_TIMELINE_ROW = 2;
 
 export const hasAdditionalActions = (id: TimelineId): boolean =>
@@ -273,7 +273,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
     totalItems,
     totalPages,
     trailingControlColumns = EMPTY_CONTROL_COLUMNS,
-    unit = basicUnit,
+    unit = defaultUnit,
     hasAlertsCrud,
   }) => {
     const dispatch = useDispatch();

x-pack/plugins/timelines/public/components/t_grid/body/translations.ts

@@ -217,8 +217,8 @@ export const INVESTIGATE_IN_RESOLVER_DISABLED = i18n.translate(
   }
 );
 
-export const UNIT = (totalCount: number) =>
-  i18n.translate('xpack.timelines.timeline.body.unit', {
+export const ALERTS_UNIT = (totalCount: number) =>
+  i18n.translate('xpack.timelines.timeline.alertsUnit', {
     values: { totalCount },
-    defaultMessage: `{totalCount, plural, =1 {event} other {events}}`,
+    defaultMessage: `{totalCount, plural, =1 {alert} other {alerts}}`,
   });

x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx

@@ -50,7 +50,6 @@ import { useTimelineEvents } from '../../../container';
 import { StatefulBody } from '../body';
 import { Footer, footerHeight } from '../footer';
 import { SELECTOR_TIMELINE_GLOBAL_CONTAINER, UpdatedFlexGroup, UpdatedFlexItem } from '../styles';
-import * as i18n from '../translations';
 import { Sort } from '../body/sort';
 import { InspectButton, InspectButtonContainer } from '../../inspect';
 import { SummaryViewSelector, ViewSelection } from '../event_rendered_view/selector';
@@ -138,6 +137,7 @@ export interface TGridIntegratedProps {
   data?: DataPublicPluginStart;
   tGridEventRenderedViewEnabled: boolean;
   hasAlertsCrud: boolean;
+  unit?: (n: number) => string;
 }
 
 const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
@@ -175,6 +175,7 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
   tGridEventRenderedViewEnabled,
   data,
   hasAlertsCrud,
+  unit,
 }) => {
   const dispatch = useDispatch();
   const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
@@ -183,7 +184,6 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
 
   const [tableView, setTableView] = useState<ViewSelection>('gridView');
   const getManageTimeline = useMemo(() => tGridSelectors.getManageTimelineById(), []);
-  const unit = useMemo(() => (n: number) => i18n.ALERTS_UNIT(n), []);
   const { queryFields, title } = useDeepEqualSelector((state) =>
     getManageTimeline(state, id ?? '')
   );

x-pack/plugins/timelines/public/components/t_grid/standalone/index.tsx

@@ -40,7 +40,6 @@ import { StatefulBody } from '../body';
 import { Footer, footerHeight } from '../footer';
 import { LastUpdatedAt } from '../..';
 import { SELECTOR_TIMELINE_GLOBAL_CONTAINER, UpdatedFlexItem, UpdatedFlexGroup } from '../styles';
-import * as i18n from '../translations';
 import { InspectButton, InspectButtonContainer } from '../../inspect';
 import { useFetchIndex } from '../../../container/source';
 import { AddToCaseAction } from '../../actions/timeline/cases/add_to_case_action';
@@ -113,9 +112,8 @@ export interface TGridStandaloneProps {
   trailingControlColumns: ControlColumnProps[];
   bulkActions?: BulkActionsProp;
   data?: DataPublicPluginStart;
-  unit: (total: number) => React.ReactNode;
+  unit?: (total: number) => React.ReactNode;
 }
-const basicUnit = (n: number) => i18n.UNIT(n);
 
 const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
   afterCaseSelection,
@@ -145,7 +143,7 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
   leadingControlColumns,
   trailingControlColumns,
   data,
-  unit = basicUnit,
+  unit,
 }) => {
   const dispatch = useDispatch();
   const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;

x-pack/plugins/timelines/public/components/t_grid/translations.ts

@@ -19,18 +19,6 @@ export const EVENTS_TABLE_ARIA_LABEL = ({
     defaultMessage: 'events; Page {activePage} of {totalPages}',
   });
 
-export const UNIT = (totalCount: number) =>
-  i18n.translate('xpack.timelines.timeline.unit', {
-    values: { totalCount },
-    defaultMessage: `{totalCount, plural, =1 {event} other {events}}`,
-  });
-
-export const ALERTS_UNIT = (totalCount: number) =>
-  i18n.translate('xpack.timelines.timeline.alertsUnit', {
-    values: { totalCount },
-    defaultMessage: `{totalCount, plural, =1 {alert} other {alerts}}`,
-  });
-
 export const BULK_ACTION_OPEN_SELECTED = i18n.translate(
   'xpack.timelines.timeline.openSelectedTitle',
   {