Replace discover threat hunting (#6254)

* Add styles to discover components

* Add customize pagination settings and unit test

* Add file with data discover data grid columns definitions

* Replace event tab render

* Add chart min height to prevent layout errors

* Change chart file name

* Add date range in search method

* Add saved query management in search bar

* Clean wz-discover file

* Fix maximize chart style

* Update CHANGELOG

* Fix type import

* Fix data grid fullscreen with dock navigation

* Fix data grid fullscreen flyout layout with docked sidenav

---------

Co-authored-by: Federico Rodriguez <[email protected]>

CHANGELOG.md

@@ -11,7 +11,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 ### Changed
 
-- Removed embedded discover [#6120](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6120) [#6235](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6235)
+- Removed embedded discover [#6120](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6120) [#6235](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6235) [#6254](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6254)
 - Develop logic of a new index for the fim module [#6227](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6227)
 - Allow editing groups for an agent from Endpoints Summary [#6250](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6250)
 

plugins/main/public/components/common/data-grid/use-data-grid.test.tsx

@@ -0,0 +1,23 @@
+import { useDataGrid, tDataGridProps } from './use-data-grid';
+import { renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+
+describe('useDataGrid hook', () => {
+    it('should return override the numbers of rows per page', () => {
+
+        const dataGridProps: tDataGridProps = {
+            indexPattern: 'mocked-index-pattern',
+            results: {},
+            defaultColumns: [],
+            DocViewInspectButton: () => <div></div>,
+            ariaLabelledBy: '',
+            pagination: {
+                pageSize: 10,
+                pageSizeOptions: [10, 20, 30],
+            }
+        }
+        const { result } = renderHook(() => useDataGrid(dataGridProps));
+        expect(result.current.pagination.pageSize).toEqual(10);
+        expect(result.current.pagination.pageSizeOptions).toEqual([10, 20, 30]);
+    })
+});

plugins/main/public/components/common/data-grid/use-data-grid.ts

@@ -6,6 +6,7 @@ import { parseData, getFieldFormatted, parseColumns } from './data-grid-service'
 import { IndexPattern } from '../../../../../../src/plugins/data/common';
 
 const MAX_ENTRIES_PER_QUERY = 10000;
+const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];
 
 export type tDataGridColumn = {
     render?: (value: any) => string | React.ReactNode;
@@ -17,11 +18,12 @@ type tDataGridProps = {
     defaultColumns: tDataGridColumn[];
     DocViewInspectButton: ({ rowIndex }: EuiDataGridCellValueElementProps) => React.JSX.Element
     ariaLabelledBy: string;
+    pagination?: Partial<EuiDataGridProps['pagination']>;
 };
 
 
 export const useDataGrid = (props: tDataGridProps): EuiDataGridProps => {
-    const { indexPattern, DocViewInspectButton, results, defaultColumns } = props;
+    const { indexPattern, DocViewInspectButton, results, defaultColumns, pagination: defaultPagination } = props;
     /** Columns **/
     const [columns, setColumns] = useState<tDataGridColumn[]>(defaultColumns);
     const [columnVisibility, setVisibility] = useState(() =>
@@ -40,7 +42,7 @@ export const useDataGrid = (props: tDataGridProps): EuiDataGridProps => {
     const [sortingColumns, setSortingColumns] = useState(defaultSorting);
     const onSort = (sortingColumns) => { setSortingColumns(sortingColumns) };
     /** Pagination **/
-    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 20 });
+    const [pagination, setPagination] = useState<EuiDataGridProps['pagination']>(defaultPagination || { pageIndex: 0, pageSize: 20, pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS });
     const onChangeItemsPerPage = useMemo(() => (pageSize) =>
         setPagination((pagination) => ({
             ...pagination,
@@ -95,7 +97,6 @@ export const useDataGrid = (props: tDataGridProps): EuiDataGridProps => {
         sorting: { columns: sortingColumns, onSort },
         pagination: {
             ...pagination,
-            pageSizeOptions: [20, 50, 100],
             onChangeItemsPerPage: onChangeItemsPerPage,
             onChangePage: onChangePage,
         }

plugins/main/public/components/common/hooks/index.ts

@@ -28,3 +28,4 @@ export * from './use_async_action_run_on_start';
 export { useEsSearch } from './use-es-search';
 export { useValueSuggestion, IValueSuggestion } from './use-value-suggestion';
 export * from './use-state-storage';
+export * from './useDockedSideNav';

plugins/main/public/components/common/hooks/useDockedSideNav.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { getChrome } from '../../../kibana-services';
+
+export const useDockedSideNav = () => {
+    const [sideNavDocked, setSideNavDocked] = useState<boolean>(false);
+
+    useEffect(() => {
+        const isNavDrawerSubscription = getChrome()
+            .getIsNavDrawerLocked$()
+            .subscribe((value: boolean) => {
+                setSideNavDocked(value);
+            });
+
+        return () => {
+            isNavDrawerSubscription.unsubscribe();
+        };
+    }, []);
+
+    return sideNavDocked;
+};

plugins/main/public/components/common/modules/modules-defaults.js

@@ -19,23 +19,40 @@ import ButtonModuleExploreAgent from '../../../controllers/overview/components/o
 import { ButtonModuleGenerateReport } from '../modules/buttons';
 import { OfficePanel } from '../../overview/office-panel';
 import { GitHubPanel } from '../../overview/github-panel';
-import { DashboardVuls, InventoryVuls } from '../../overview/vulnerabilities';
+import { DashboardVuls, InventoryVuls } from '../../overview/vulnerabilities'
 import { withModuleNotForAgent } from '../hocs';
+import WazuhDiscover from '../wazuh-discover/wz-discover';
+import { threatHuntingColumns } from '../wazuh-discover/config/data-grid-columns';
 import { DashboardFim } from '../../overview/fim/dashboard/dashboard';
 import { InventoryFim } from '../../overview/fim/inventory/inventory';
+import React from 'react';
 
 const DashboardTab = {
   id: 'dashboard',
   name: 'Dashboard',
   buttons: [ButtonModuleExploreAgent, ButtonModuleGenerateReport],
   component: Dashboard,
 };
+const ALERTS_INDEX_PATTERN = 'wazuh-alerts-*';
+const DEFAULT_INDEX_PATTERN = ALERTS_INDEX_PATTERN;
+
+const renderDiscoverTab = (indexName = DEFAULT_INDEX_PATTERN, columns) => { 
+  return {
+    id: 'events',
+    name: 'Events',
+    buttons: [ButtonModuleExploreAgent],
+    component: () => 
+      <WazuhDiscover indexPatternName={indexName} tableColumns={columns}/>,
+  }
+};
+
 const EventsTab = {
-  id: 'events',
-  name: 'Events',
-  buttons: [ButtonModuleExploreAgent],
-  component: Events,
+    id: 'events',
+    name: 'Events',
+    buttons: [ButtonModuleExploreAgent],
+    component: Events,
 };
+
 const RegulatoryComplianceTabs = [
   DashboardTab,
   {
@@ -49,8 +66,8 @@ const RegulatoryComplianceTabs = [
 
 export const ModulesDefaults = {
   general: {
-    init: 'dashboard',
-    tabs: [DashboardTab, EventsTab],
+    init: 'events',
+    tabs: [DashboardTab,renderDiscoverTab(DEFAULT_INDEX_PATTERN, threatHuntingColumns)],
     availableFor: ['manager', 'agent'],
   },
   fim: {

plugins/main/public/components/common/search-bar/search-bar-service.ts

@@ -17,10 +17,14 @@ export interface SearchParams {
             direction: 'asc' | 'desc';
         }[];
     };
+    dateRange?: {
+        from: string;
+        to: string;
+    };
 }
 
 export const search = async (params: SearchParams): Promise<SearchResponse | void> => {
-    const { indexPattern, filters = [], query, pagination, sorting, fields } = params;
+    const { indexPattern, filters: defaultFilters = [], query, pagination, sorting, fields } = params;
     if(!indexPattern){
         return;
     }
@@ -31,6 +35,24 @@ export const search = async (params: SearchParams): Promise<SearchResponse | voi
         const sortDirection = column.direction === 'asc' ? 'asc' : 'desc';
         return { [column?.id || '']: sortDirection } as OpenSearchQuerySortValue;
     }) || [];
+    let filters = defaultFilters;
+
+    // check if dateRange is defined
+    if(params.dateRange && params.dateRange?.from && params.dateRange?.to){
+        const { from, to } = params.dateRange;
+        filters = [
+            ...filters,
+            {
+                range: {
+                    [indexPattern.timeFieldName || 'timestamp']: {
+                        gte: from,
+                        lte: to,
+                        format: 'strict_date_optional_time'
+                    }
+                }
+            }
+        ]
+    }
 
     const searchParams = searchSource
         .setParent(undefined)

plugins/main/public/components/common/search-bar/use-search-bar.ts

@@ -178,6 +178,8 @@ const useSearchBar = (
       setQuery(query);
       props?.onQuerySubmitted && props?.onQuerySubmitted(payload);
     },
+    // its necessary to use saved queries. if not, the load saved query not work
+    useDefaultBehaviors: true 
   };
 
   return {

plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { tDataGridColumn } from '../../data-grid';
+
+export const threatHuntingColumns: tDataGridColumn[] = [{
+    id: 'timestamp'
+},
+{
+    id: 'agent.name'
+},
+{
+    id: 'rule.description'
+},
+{
+    id: 'rule.level'
+},
+{
+    id: 'rule.id'
+}]
+
+
+

plugins/main/public/components/common/wazuh-discover/config/chart.ts → plugins/main/public/components/common/wazuh-discover/config/histogram-chart.ts

@@ -1,5 +1,6 @@
 import { DashboardPanelState } from "../../../../../../../src/plugins/dashboard/public/application";
 import { EmbeddableInput } from "../../../../../../../src/plugins/embeddable/public";
+import { ViewMode } from '../../../../../../../src/plugins/embeddable/public';
 
 const hitsHistogram = (indexPatternId: string) => {
     return {
@@ -128,3 +129,24 @@ export const getDiscoverPanels = (
         }
     };
 }
+
+export const histogramChartInput = (indexPatternName: string, filters, query, dateRangeFrom, dateRangeTo) => ({
+    viewMode: ViewMode.VIEW,
+    panels: getDiscoverPanels(indexPatternName),
+    isFullScreenMode: false,
+    filters: filters ?? [],
+    useMargins: false,
+    id: 'wz-discover-events-histogram',
+    timeRange: {
+      from: dateRangeFrom,
+      to: dateRangeTo,
+    },
+    title: 'Discover Events Histogram',
+    description: 'Histogram of events by date',
+    query: query,
+    refreshConfig: {
+      pause: false,
+      value: 15,
+    },
+    hidePanelTitles: true,
+  })

plugins/main/public/components/common/wazuh-discover/discover.scss

@@ -0,0 +1,28 @@
+.discoverContainer {
+    height: calc(100vh - 104px);
+
+    .euiDataGrid--fullScreen {
+        height: calc(100vh - 49px);
+        bottom: 0;
+        top: auto;
+    }
+
+    .discoverDataGrid {
+        height: calc(100vh - 496px);
+    }
+
+    .discoverChartContainer {
+        min-height: 234px;
+        .dshLayout-isMaximizedPanel {
+            top: 0;
+            left: 0;
+            min-height: calc(100vh - 49px);
+            position: fixed;
+            z-index: 9999;
+        }
+    }
+}
+
+.headerIsExpanded .discoverContainer {
+    height: calc(100vh - 153px);
+}