[Security Solution] [Bugfix]Alerts table event rendered view timestamp (#110561)

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

@@ -783,7 +783,6 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
               pageSize={pageSize}
               pageSizeOptions={itemsPerPageOptions}
               rowRenderers={rowRenderers}
-              timelineId={id}
               totalItemCount={totalItems}
             />
           )}

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

@@ -0,0 +1,24 @@
+/*
+ * 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, screen } from '@testing-library/react';
+import { eventRenderedProps, TestProviders } from '../../../mock';
+import { EventRenderedView } from './';
+
+describe('event_rendered_view', () => {
+  test('it renders the timestamp correctly', () => {
+    render(
+      <TestProviders>
+        <EventRenderedView {...eventRenderedProps} />
+      </TestProviders>
+    );
+    expect(screen.queryAllByTestId('moment-date')[0].textContent).toEqual(
+      '2018-11-05T14:03:25-05:00'
+    );
+  });
+});

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

@@ -15,7 +15,7 @@ import {
   EuiHorizontalRule,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { ALERT_RULE_NAME, TIMESTAMP } from '@kbn/rule-data-utils';
+import { ALERT_RULE_NAME } from '@kbn/rule-data-utils';
 import { get } from 'lodash';
 import moment from 'moment';
 import React, { ComponentType, useCallback, useMemo } from 'react';
@@ -58,7 +58,7 @@ const StyledEuiBasicTable = styled(EuiBasicTable as BasicTableType)`
   }
 `;
 
-interface EventRenderedViewProps {
+export interface EventRenderedViewProps {
   alertToolbar: React.ReactNode;
   browserFields: BrowserFields;
   events: TimelineItem[];
@@ -69,13 +69,14 @@ interface EventRenderedViewProps {
   pageSize: number;
   pageSizeOptions: number[];
   rowRenderers: RowRenderer[];
-  timelineId: string;
   totalItemCount: number;
 }
 const PreferenceFormattedDateComponent = ({ value }: { value: Date }) => {
   const tz = useUiSetting<string>('dateFormat:tz');
   const dateFormat = useUiSetting<string>('dateFormat');
-  return <>{moment.tz(value, tz).format(dateFormat)}</>;
+  const zone: string = moment.tz.zone(tz)?.name ?? moment.tz.guess();
+
+  return <span data-test-subj="moment-date">{moment.tz(value, zone).format(dateFormat)}</span>;
 };
 export const PreferenceFormattedDate = React.memo(PreferenceFormattedDateComponent);
 
@@ -90,7 +91,6 @@ const EventRenderedViewComponent = ({
   pageSize,
   pageSizeOptions,
   rowRenderers,
-  timelineId,
   totalItemCount,
 }: EventRenderedViewProps) => {
   const ActionTitle = useMemo(
@@ -143,7 +143,7 @@ const EventRenderedViewComponent = ({
         width: '120px',
       },
       {
-        field: 'ecs.@timestamp',
+        field: 'ecs.timestamp',
         name: i18n.translate('xpack.timelines.alerts.EventRenderedView.timestamp.column', {
           defaultMessage: 'Timestamp',
         }),
@@ -151,7 +151,7 @@ const EventRenderedViewComponent = ({
         hideForMobile: false,
         // eslint-disable-next-line react/display-name
         render: (name: unknown, item: TimelineItem) => {
-          const timestamp = get(item, `ecs.${TIMESTAMP}`);
+          const timestamp = get(item, `ecs.timestamp`);
           return <PreferenceFormattedDate value={timestamp} />;
         },
       },
@@ -239,6 +239,7 @@ const EventRenderedViewComponent = ({
         compressed
         items={events}
         columns={columns}
+        data-test-subj="event-rendered-view"
         pagination={pagination}
         onChange={handleTableChange}
         rowProps={({ ecs }: TimelineItem) =>

x-pack/plugins/timelines/public/mock/t_grid.tsx

@@ -5,12 +5,16 @@
  * 2.0.
  */
 
+import React from 'react';
 import { ALERT_START, ALERT_STATUS } from '@kbn/rule-data-utils';
 import { TGridIntegratedProps } from '../components/t_grid/integrated';
 import { mockBrowserFields, mockDocValueFields } from './browser_fields';
 import { mockDataProviders } from './mock_data_providers';
+import { mockTimelineData } from './mock_timeline_data';
 import { ColumnHeaderOptions, TimelineId } from '../../common';
 import { mockIndexNames, mockIndexPattern } from './index_pattern';
+import { EventRenderedViewProps } from '../components/t_grid/event_rendered_view';
+
 const columnHeaders: ColumnHeaderOptions[] = [
   {
     columnHeaderType: 'not-filtered',
@@ -121,3 +125,17 @@ export const tGridIntegratedProps: TGridIntegratedProps = {
   tGridEventRenderedViewEnabled: true,
   trailingControlColumns: [],
 };
+
+export const eventRenderedProps: EventRenderedViewProps = {
+  alertToolbar: <></>,
+  browserFields: mockBrowserFields,
+  events: mockTimelineData,
+  leadingControlColumns: [],
+  onChangePage: () => null,
+  onChangeItemsPerPage: () => null,
+  pageIndex: 0,
+  pageSize: 10,
+  pageSizeOptions: [10, 25, 50, 100],
+  rowRenderers: [],
+  totalItemCount: 100,
+};