get expandable flyout to show up

elastic · Apr 18, 2024 · 8fb5199 · 8fb5199
1 parent c622a1b
commit 8fb5199
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 17 deletions.
diff --git a/...lugins/security_solution/public/timelines/components/timeline/tabs/query/header/index.tsx b/...lugins/security_solution/public/timelines/components/timeline/tabs/query/header/index.tsx
@@ -146,11 +146,6 @@ const QueryTabHeaderComponent: React.FC<Props> = ({
             </EuiFlexGroup>
           </TabHeaderContainer>
         </EuiFlexItem>
-        {/* TODO: This is a temporary solution to hide the KPIs until lens components play nicely with timelines */}
-        {/* https://github.com/elastic/kibana/issues/17156 */}
-        {/* <EuiFlexItem grow={false}> */}
-        {/*   <TimelineKpi timelineId={timelineId} /> */}
-        {/* </EuiFlexItem> */}
       </EuiFlexGroup>
     </StyledEuiFlyoutHeader>
   );

diff --git a/...ity_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/...ity_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -13,14 +13,16 @@ import type { UnifiedDataTableProps } from '@kbn/unified-data-table';
 import { UnifiedDataTable, DataLoadingState } from '@kbn/unified-data-table';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { EuiDataGridCustomBodyProps, EuiDataGridProps } from '@elastic/eui';
+import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
+import { useIsExperimentalFeatureEnabled } from '../../../../../common/hooks/use_experimental_features';
 import { selectTimelineById } from '../../../../store/selectors';
 import { RowRendererCount } from '../../../../../../common/api/timeline';
 import { EmptyComponent } from '../../../../../common/lib/cell_actions/helpers';
 import { withDataView } from '../../../../../common/components/with_data_view';
 import { StatefulEventContext } from '../../../../../common/components/events_viewer/stateful_event_context';
 import type { ExpandedDetailTimeline, ExpandedDetailType } from '../../../../../../common/types';
 import type { TimelineItem } from '../../../../../../common/search_strategy';
-import { useKibana } from '../../../../../common/lib/kibana';
+import { useKibana, useUiSetting$ } from '../../../../../common/lib/kibana';
 import type {
   ColumnHeaderOptions,
   OnChangePage,
@@ -43,6 +45,8 @@ import { transformTimelineItemToUnifiedRows } from '../utils';
 import { TimelineEventDetailRow } from './timeline_event_detail_row';
 import { CustomTimelineDataGridBody } from './custom_timeline_data_grid_body';
 import { TIMELINE_EVENT_DETAIL_ROW_ID } from '../../body/constants';
+import { ENABLE_EXPANDABLE_FLYOUT_SETTING } from '../../../../../../common/constants';
+import { DocumentDetailsRightPanelKey } from '../../../../../flyout/document_details/right';
 
 export const SAMPLE_SIZE_SETTING = 500;
 const DataGridMemoized = React.memo(UnifiedDataTable);
@@ -101,6 +105,13 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
   }) {
     const dispatch = useDispatch();
 
+    const expandableTimelineFlyoutEnabled = useIsExperimentalFeatureEnabled(
+      'expandableTimelineFlyoutEnabled'
+    );
+
+    const { openFlyout } = useExpandableFlyoutApi();
+    const [isSecurityFlyoutEnabled] = useUiSetting$<boolean>(ENABLE_EXPANDABLE_FLYOUT_SETTING);
+
     // Store context in state rather than creating object in provider value={} to prevent re-renders caused by a new object being created
     const [activeStatefulEventContext] = useState({
       timelineID: timelineId,
@@ -139,26 +150,48 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
 
     const handleOnEventDetailPanelOpened = useCallback(
       (eventData: DataTableRecord & TimelineItem) => {
+        console.log("EVENT DATA: ", eventData);
         const updatedExpandedDetail: ExpandedDetailType = {
           panelView: 'eventDetail',
           params: {
             eventId: eventData.id,
-            indexName: eventData._index ?? '', // TODO: fix type error
+            indexName: eventData.raw._index ?? '', // TODO: fix type error
             refetch,
           },
         };
 
-        dispatch(
-          timelineActions.toggleDetailPanel({
-            ...updatedExpandedDetail,
-            tabType: activeTab,
-            id: timelineId,
-          })
-        );
-
-        activeTimeline.toggleExpandedDetail({ ...updatedExpandedDetail });
+        if (isSecurityFlyoutEnabled && expandableTimelineFlyoutEnabled) {
+          openFlyout({
+            right: {
+              id: DocumentDetailsRightPanelKey,
+              params: {
+                id: eventData._id,
+                indexName: eventData.raw._index ?? '',
+                scopeId: timelineId,
+              },
+            },
+          });
+        } else {
+          dispatch(
+            timelineActions.toggleDetailPanel({
+              ...updatedExpandedDetail,
+              tabType: activeTab,
+              id: timelineId,
+            })
+          );
+
+          activeTimeline.toggleExpandedDetail({ ...updatedExpandedDetail });
+        }
       },
-      [activeTab, dispatch, refetch, timelineId]
+      [
+        activeTab,
+        dispatch,
+        expandableTimelineFlyoutEnabled,
+        isSecurityFlyoutEnabled,
+        openFlyout,
+        refetch,
+        timelineId,
+      ]
     );
 
     const handleOnPanelClosed = useCallback(() => {