styles

Author: angorayc

x-pack/plugins/security_solution/common/search_strategy/timeline/events/details/index.ts

@@ -9,6 +9,7 @@ import { Inspect, Maybe } from '../../../common';
 import { TimelineRequestOptionsPaginated } from '../..';
 
 export interface TimelineEventsDetailsItem {
+  category: string;
   field: string;
   values?: Maybe<string[]>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiLink, EuiTabbedContent, EuiTabbedContentTab } from '@elastic/eui';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { get } from 'lodash/fp';
@@ -49,13 +49,13 @@ Details.displayName = 'Details';
 
 export const EventDetails = React.memo<Props>(
   ({ browserFields, columnHeaders, data, id, onUpdateColumns, timelineId, toggleColumn }) => {
-    const [view, setView] = useState<View>(EventsViewType.tableView);
-
-    const handleTabClick = useCallback((e) => setView(e.id), [setView]);
     const eventKindData = useMemo(() => (data || []).find((item) => item.field === 'event.kind'), [
       data,
     ]);
     const eventKind = get('values.0', eventKindData);
+    const [view, setView] = useState<View>(EventsViewType.tableView);
+    const handleTabClick = useCallback((e) => setView(e.id), [setView]);
+
     const alerts = useMemo(
       () => [
         {
@@ -66,13 +66,12 @@ export const EventDetails = React.memo<Props>(
               data={data}
               eventId={id}
               browserFields={browserFields}
-              columnHeaders={columnHeaders}
               timelineId={timelineId}
             />
           ),
         },
       ],
-      [data, id, browserFields, columnHeaders, timelineId]
+      [data, id, browserFields, timelineId]
     );
     const tabs: EuiTabbedContentTab[] = useMemo(
       () => [
@@ -111,6 +110,12 @@ export const EventDetails = React.memo<Props>(
       ]
     );
 
+    useEffect(() => {
+      if (data != null && eventKind !== 'event') {
+        setView(EventsViewType.summaryView);
+      }
+    }, [data, eventKind]);
+
     const selectedTab = useMemo(() => tabs.find((tab) => tab.id === view), [tabs, view]);
 
     return (

x-pack/plugins/security_solution/public/common/components/event_details/summary_view.tsx

@@ -15,8 +15,8 @@ import { get, getOr } from 'lodash/fp';
 import { TimelineEventsDetailsItem } from '../../../../common/search_strategy';
 import { OverflowField } from '../tables/helpers';
 import { FormattedFieldValue } from '../../../timelines/components/timeline/body/renderers/formatted_field';
-import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
 import * as i18n from './translations';
+import { BrowserFields } from '../../../../common/search_strategy/index_fields';
 
 type Summary = Array<{ title: string; description: JSX.Element }>;
 
@@ -33,15 +33,21 @@ const fields = [
 ];
 
 const SummaryViewComponent: React.FC<{
+  browserFields: BrowserFields;
   data: TimelineEventsDetailsItem[];
   eventId: string;
-  columnHeaders: ColumnHeaderOptions[];
   timelineId: string;
-}> = ({ data, eventId, columnHeaders, timelineId }) => {
+}> = ({ data, eventId, timelineId, browserFields }) => {
   const summaryList = useMemo(() => {
-    return data.reduce<Summary>((acc, item) => {
-      const column = columnHeaders.find((c) => c.id === item.field);
+    return (data || []).reduce<Summary>((acc, item) => {
       const fieldValue = getOr(null, 'values.0', item);
+      const eventCategory = item.category;
+      const fieldType = getOr(
+        'string',
+        `${eventCategory}.fields.${item.field}.type`,
+        browserFields
+      );
+      const fieldFormat = get(`${eventCategory}.fields.${item.field}.format`, browserFields);
       return fields.indexOf(item.field) >= 0
         ? [
             ...acc,
@@ -51,29 +57,29 @@ const SummaryViewComponent: React.FC<{
                 <FormattedFieldValue
                   contextId={`alert-details-value-formatted-field-value-${timelineId}-${eventId}-${item.field}-${fieldValue}`}
                   eventId={eventId}
-                  fieldFormat={column?.format}
+                  fieldFormat={fieldFormat}
                   fieldName={item.field}
-                  fieldType={column?.type ?? 'string'}
+                  fieldType={fieldType}
                   value={fieldValue}
                 />
               ),
             },
           ]
         : acc;
     }, []);
-  }, [data, columnHeaders, eventId, timelineId]);
+  }, [data, eventId, timelineId, browserFields]);
 
   const messageData = useMemo(() => (data || []).find((item) => item.field === 'message'), [data]);
   const message = get('values.0', messageData);
 
   return (
     <>
       <EuiSpacer />
-      <EuiDescriptionList type="responsiveColumn" listItems={summaryList} />
+      <EuiDescriptionList type="responsiveColumn" listItems={summaryList} compressed />
       {message && (
         <>
           <EuiSpacer />
-          <EuiDescriptionList>
+          <EuiDescriptionList compressed>
             <EuiDescriptionListTitle>{i18n.INVESTIGATION_GUIDE}</EuiDescriptionListTitle>
             <EuiDescriptionListDescription>
               <OverflowField value={message} />