From 2b01123f96dcd570a409ded30cb7a12498112a20 Mon Sep 17 00:00:00 2001 From: Maximiliano Date: Fri, 29 Dec 2023 00:58:40 -0300 Subject: [PATCH 01/14] Add styles to discover components --- .../common/wazuh-discover/discover.scss | 18 +++ .../common/wazuh-discover/wz-discover.tsx | 104 +++++++++++------- 2 files changed, 82 insertions(+), 40 deletions(-) create mode 100644 plugins/main/public/components/common/wazuh-discover/discover.scss diff --git a/plugins/main/public/components/common/wazuh-discover/discover.scss b/plugins/main/public/components/common/wazuh-discover/discover.scss new file mode 100644 index 0000000000..9e2876d20f --- /dev/null +++ b/plugins/main/public/components/common/wazuh-discover/discover.scss @@ -0,0 +1,18 @@ +.discoverContainer { + height: calc(100vh - 104px); +} + + +.headerIsExpanded .discoverContainer { + height: calc(100vh - 153px); +} + +.discoverContainer .euiDataGrid--fullScreen { + height: calc(100vh - 49px); + bottom: 0; + top: auto; +} + +.discoverContainer .discoverDataGrid { + height: calc(100vh - 496px); +} \ No newline at end of file diff --git a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx index b33ac2ed87..ac0dea39b9 100644 --- a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx +++ b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx @@ -16,7 +16,7 @@ import { EuiPanel, } from '@elastic/eui'; import { IntlProvider } from 'react-intl'; -import { IndexPattern } from '../../../../../../src/plugins/data/common'; +import { Filter, IndexPattern } from '../../../../../../src/plugins/data/common'; import { SearchResponse } from '../../../../../../src/core/server'; import { useDocViewer } from '../doc-viewer'; import DocViewer from '../doc-viewer/doc-viewer'; @@ -33,6 +33,7 @@ import { getPlugins } from '../../../kibana-services'; import { ViewMode } from '../../../../../../src/plugins/embeddable/public'; import { getDiscoverPanels } from './config/chart'; const DashboardByRenderer = getPlugins().dashboard.DashboardContainerByValueRenderer; +import './discover.scss'; /** * ToDo: @@ -49,10 +50,6 @@ type WazuhDiscoverProps = { const WazuhDiscover = (props: WazuhDiscoverProps) => { const { indexPatternName, tableColumns: defaultTableColumns } = props - const { searchBarProps } = useSearchBar({ - defaultIndexPatternID: indexPatternName, - }) - const { isLoading, filters, query, indexPatterns } = searchBarProps; const SearchBar = getPlugins().data.ui.SearchBar; const [results, setResults] = useState({} as SearchResponse); const [inspectedHit, setInspectedHit] = useState(undefined); @@ -78,12 +75,22 @@ const WazuhDiscover = (props: WazuhDiscoverProps) => { ); }; + const { searchBarProps } = useSearchBar({ + defaultIndexPatternID: indexPatternName, + }) + const { isLoading, filters, query, indexPatterns, dateRangeFrom, dateRangeTo } = searchBarProps; + const dataGridProps = useDataGrid({ ariaLabelledBy: 'Discover events table', defaultColumns: defaultTableColumns, results, indexPattern: indexPattern as IndexPattern, - DocViewInspectButton + DocViewInspectButton, + pagination: { + pageIndex: 0, + pageSize: 15, + pageSizeOptions: [15, 25, 50, 100], + } }) const { pagination, sorting, columnVisibility } = dataGridProps; @@ -96,22 +103,36 @@ const WazuhDiscover = (props: WazuhDiscoverProps) => { useEffect(() => { if (!isLoading) { setIndexPattern(indexPatterns?.[0] as IndexPattern); + /*const timeFilter: Filter['query'] = [{ + range: { + '@timestamp': { + gte: searchBarProps?.dateRangeFrom, + lte: searchBarProps?.dateRangeTo, + format: 'strict_date_optional_time', + }, + }, + }] + const allFilters = [...timeFilter, ...(filters || [])]; + console.log('searching...', allFilters, query, pagination, sorting, dateRangeFrom, dateRangeTo); + */ search({ indexPattern: indexPatterns?.[0] as IndexPattern, + //filters: allFilters, filters, query, pagination, sorting }).then((results) => { + console.log('found...', results?.hits?.total); setResults(results); setIsSearching(false); }).catch((error) => { - const searchError = ErrorFactory.create(HttpError, { error, message: 'Error fetching vulnerabilities' }) + const searchError = ErrorFactory.create(HttpError, { error, message: 'Error fetching data' }) ErrorHandler.handleError(searchError); setIsSearching(false); }) } - }, [JSON.stringify(searchBarProps), JSON.stringify(pagination), JSON.stringify(sorting)]); + }, [JSON.stringify(searchBarProps)]); const timeField = indexPattern?.timeFieldName ? indexPattern.timeFieldName : undefined; @@ -141,7 +162,7 @@ const WazuhDiscover = (props: WazuhDiscoverProps) => { return ( { - - { }} - tooltip={results?.hits?.total && results?.hits?.total > MAX_ENTRIES_PER_QUERY ? { - ariaLabel: 'Warning', - content: `The query results has exceeded the limit of 10,000 hits. To provide a better experience the table only shows the first ${formatNumWithCommas(MAX_ENTRIES_PER_QUERY)} hits.`, - iconType: 'alert', - position: 'top' - } : undefined} - /> - - Export Formated - - - ) - }} - /> - ) : null} +
+ + { }} + tooltip={results?.hits?.total && results?.hits?.total > MAX_ENTRIES_PER_QUERY ? { + ariaLabel: 'Warning', + content: `The query results has exceeded the limit of 10,000 hits. To provide a better experience the table only shows the first ${formatNumWithCommas(MAX_ENTRIES_PER_QUERY)} hits.`, + iconType: 'alert', + position: 'top' + } : undefined} + /> + + Export Formated + + + ) + }} + /> +
+ + ) : null} {inspectedHit && ( setInspectedHit(undefined)} size="m"> From 3f0420538e6cbe7e95420de85ead86b94113c091 Mon Sep 17 00:00:00 2001 From: Maximiliano Date: Fri, 29 Dec 2023 00:59:02 -0300 Subject: [PATCH 02/14] Add customize pagination settings and unit test --- .../common/data-grid/use-data-grid.test.tsx | 23 +++++++++++++++++++ .../common/data-grid/use-data-grid.ts | 7 +++--- 2 files changed, 27 insertions(+), 3 deletions(-) create mode 100644 plugins/main/public/components/common/data-grid/use-data-grid.test.tsx diff --git a/plugins/main/public/components/common/data-grid/use-data-grid.test.tsx b/plugins/main/public/components/common/data-grid/use-data-grid.test.tsx new file mode 100644 index 0000000000..3d6cdc7d5f --- /dev/null +++ b/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: () =>
, + 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]); + }) +}); \ No newline at end of file diff --git a/plugins/main/public/components/common/data-grid/use-data-grid.ts b/plugins/main/public/components/common/data-grid/use-data-grid.ts index a27cb3d2d0..a4ca8f9312 100644 --- a/plugins/main/public/components/common/data-grid/use-data-grid.ts +++ b/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; }; 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(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(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, } From 6082b91cdf68d6b722a9ea8544fa77ed18c76545 Mon Sep 17 00:00:00 2001 From: Maximiliano Date: Fri, 29 Dec 2023 00:59:39 -0300 Subject: [PATCH 03/14] Add file with data discover data grid columns definitions --- .../config/data-grid-columns.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx diff --git a/plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx b/plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx new file mode 100644 index 0000000000..aa569b1a66 --- /dev/null +++ b/plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx @@ -0,0 +1,19 @@ +import { EuiBadge } from "@elastic/eui"; +import React from 'react'; +import { tDataGridColumn } from '../../hooks/data_grid' + +export const threatHuntingColumns: tDataGridColumn[] = [{ + id: 'timestamp' +}, +{ + id: 'agent.name' +}, +{ + id: 'rule.description' +}, +{ + id: 'rule.level' +}, +{ + id: 'rule.id' +}] \ No newline at end of file From 2615ebd89cfbeda489992aa5e52cedfe5ec6fb66 Mon Sep 17 00:00:00 2001 From: Maximiliano Date: Fri, 29 Dec 2023 00:59:57 -0300 Subject: [PATCH 04/14] Replace event tab render --- .../common/modules/modules-defaults.js | 31 ++++++++++++++----- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/plugins/main/public/components/common/modules/modules-defaults.js b/plugins/main/public/components/common/modules/modules-defaults.js index 8c3fd06459..3d18631800 100644 --- a/plugins/main/public/components/common/modules/modules-defaults.js +++ b/plugins/main/public/components/common/modules/modules-defaults.js @@ -19,10 +19,13 @@ 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', @@ -30,12 +33,26 @@ const DashboardTab = { 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: () => + , + } +}; + 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: { From ced4e7f69d50fa33ada3e3588060d813bb49555a Mon Sep 17 00:00:00 2001 From: Maximiliano Date: Fri, 29 Dec 2023 14:46:20 -0300 Subject: [PATCH 05/14] Add chart min height to prevent layout errors --- .../public/components/common/wazuh-discover/discover.scss | 4 ++++ .../components/common/wazuh-discover/wz-discover.tsx | 8 +------- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/plugins/main/public/components/common/wazuh-discover/discover.scss b/plugins/main/public/components/common/wazuh-discover/discover.scss index 9e2876d20f..f0caf2140a 100644 --- a/plugins/main/public/components/common/wazuh-discover/discover.scss +++ b/plugins/main/public/components/common/wazuh-discover/discover.scss @@ -15,4 +15,8 @@ .discoverContainer .discoverDataGrid { height: calc(100vh - 496px); +} + +.discoverContainer .discoverChartContainer { + min-height: 234px; } \ No newline at end of file diff --git a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx index ac0dea39b9..1be7ef691a 100644 --- a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx +++ b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx @@ -35,12 +35,6 @@ import { getDiscoverPanels } from './config/chart'; const DashboardByRenderer = getPlugins().dashboard.DashboardContainerByValueRenderer; import './discover.scss'; -/** - * ToDo: - * - add possibility to customize column render - * - add save query feature - */ - export const MAX_ENTRIES_PER_QUERY = 10000; type WazuhDiscoverProps = { @@ -181,7 +175,7 @@ const WazuhDiscover = (props: WazuhDiscoverProps) => { {!isLoading && !isSearching && results?.hits?.total > 0 ? ( <> - + Date: Tue, 2 Jan 2024 14:59:52 -0300 Subject: [PATCH 06/14] Change chart file name --- .../common/wazuh-discover/config/data-grid-columns.tsx | 8 +++++--- .../config/{chart.ts => histogram-chart.ts} | 0 2 files changed, 5 insertions(+), 3 deletions(-) rename plugins/main/public/components/common/wazuh-discover/config/{chart.ts => histogram-chart.ts} (100%) diff --git a/plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx b/plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx index aa569b1a66..f90a7fdf64 100644 --- a/plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx +++ b/plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx @@ -1,6 +1,5 @@ -import { EuiBadge } from "@elastic/eui"; import React from 'react'; -import { tDataGridColumn } from '../../hooks/data_grid' +import { tDataGridColumn } from '../../data_grid' export const threatHuntingColumns: tDataGridColumn[] = [{ id: 'timestamp' @@ -16,4 +15,7 @@ export const threatHuntingColumns: tDataGridColumn[] = [{ }, { id: 'rule.id' -}] \ No newline at end of file +}] + + + diff --git a/plugins/main/public/components/common/wazuh-discover/config/chart.ts b/plugins/main/public/components/common/wazuh-discover/config/histogram-chart.ts similarity index 100% rename from plugins/main/public/components/common/wazuh-discover/config/chart.ts rename to plugins/main/public/components/common/wazuh-discover/config/histogram-chart.ts From d5b799379de29c3ecb064431d4c359699ecc0fd2 Mon Sep 17 00:00:00 2001 From: Maximiliano Date: Tue, 2 Jan 2024 15:00:51 -0300 Subject: [PATCH 07/14] Add date range in search method --- .../common/search-bar/search-bar-service.ts | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/plugins/main/public/components/common/search-bar/search-bar-service.ts b/plugins/main/public/components/common/search-bar/search-bar-service.ts index d7c546ccff..f7457faf4f 100644 --- a/plugins/main/public/components/common/search-bar/search-bar-service.ts +++ b/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 => { - 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 Date: Tue, 2 Jan 2024 15:01:09 -0300 Subject: [PATCH 08/14] Add saved query management in search bar --- .../common/search-bar/use-search-bar.ts | 2 ++ .../common/wazuh-discover/wz-discover.tsx | 26 +++++++------------ 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/plugins/main/public/components/common/search-bar/use-search-bar.ts b/plugins/main/public/components/common/search-bar/use-search-bar.ts index 30025f9676..a9c431b9c6 100644 --- a/plugins/main/public/components/common/search-bar/use-search-bar.ts +++ b/plugins/main/public/components/common/search-bar/use-search-bar.ts @@ -163,6 +163,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 { diff --git a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx index 1be7ef691a..3d3a5e5283 100644 --- a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx +++ b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx @@ -31,7 +31,7 @@ import useSearchBar from '../search-bar/use-search-bar'; import { search } from '../search-bar'; import { getPlugins } from '../../../kibana-services'; import { ViewMode } from '../../../../../../src/plugins/embeddable/public'; -import { getDiscoverPanels } from './config/chart'; +import { getDiscoverPanels } from './config/histogram-chart'; const DashboardByRenderer = getPlugins().dashboard.DashboardContainerByValueRenderer; import './discover.scss'; @@ -96,28 +96,20 @@ const WazuhDiscover = (props: WazuhDiscoverProps) => { useEffect(() => { if (!isLoading) { + setIsSearching(true); setIndexPattern(indexPatterns?.[0] as IndexPattern); - /*const timeFilter: Filter['query'] = [{ - range: { - '@timestamp': { - gte: searchBarProps?.dateRangeFrom, - lte: searchBarProps?.dateRangeTo, - format: 'strict_date_optional_time', - }, - }, - }] - const allFilters = [...timeFilter, ...(filters || [])]; - console.log('searching...', allFilters, query, pagination, sorting, dateRangeFrom, dateRangeTo); - */ + const dateRange = { + from: dateRangeFrom, + to: dateRangeTo, + } search({ indexPattern: indexPatterns?.[0] as IndexPattern, - //filters: allFilters, filters, query, pagination, - sorting + sorting, + dateRange }).then((results) => { - console.log('found...', results?.hits?.total); setResults(results); setIsSearching(false); }).catch((error) => { @@ -162,11 +154,13 @@ const WazuhDiscover = (props: WazuhDiscoverProps) => { grow > <> + { isSearching.toString() } {isLoading ? : } {isSearching ? : null} From 0fcc38e07736487e8f9427001140b77e68782f02 Mon Sep 17 00:00:00 2001 From: Maximiliano Date: Tue, 2 Jan 2024 15:16:53 -0300 Subject: [PATCH 09/14] Clean wz-discover file --- .../wazuh-discover/config/histogram-chart.ts | 22 +++++++++++ .../common/wazuh-discover/wz-discover.tsx | 38 ++++--------------- 2 files changed, 30 insertions(+), 30 deletions(-) diff --git a/plugins/main/public/components/common/wazuh-discover/config/histogram-chart.ts b/plugins/main/public/components/common/wazuh-discover/config/histogram-chart.ts index 8e667141b0..726936da0c 100644 --- a/plugins/main/public/components/common/wazuh-discover/config/histogram-chart.ts +++ b/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, + }) \ No newline at end of file diff --git a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx index 3d3a5e5283..5b5f5b9d89 100644 --- a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx +++ b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx @@ -30,8 +30,7 @@ import { formatNumWithCommas } from '../../../kibana-integrations/discover/appli import useSearchBar from '../search-bar/use-search-bar'; import { search } from '../search-bar'; import { getPlugins } from '../../../kibana-services'; -import { ViewMode } from '../../../../../../src/plugins/embeddable/public'; -import { getDiscoverPanels } from './config/histogram-chart'; +import { getDiscoverPanels, histogramChartInput } from './config/histogram-chart'; const DashboardByRenderer = getPlugins().dashboard.DashboardContainerByValueRenderer; import './discover.scss'; @@ -98,17 +97,16 @@ const WazuhDiscover = (props: WazuhDiscoverProps) => { if (!isLoading) { setIsSearching(true); setIndexPattern(indexPatterns?.[0] as IndexPattern); - const dateRange = { - from: dateRangeFrom, - to: dateRangeTo, - } search({ indexPattern: indexPatterns?.[0] as IndexPattern, filters, query, pagination, sorting, - dateRange + dateRange: { + from: dateRangeFrom, + to: dateRangeTo, + } }).then((results) => { setResults(results); setIsSearching(false); @@ -154,7 +152,6 @@ const WazuhDiscover = (props: WazuhDiscoverProps) => { grow > <> - { isSearching.toString() } {isLoading ? : { : null} {!isLoading && !isSearching && results?.hits?.total > 0 ? ( <> - - + + From 68c264db3367fef645acc8652624a16f9a23a9f4 Mon Sep 17 00:00:00 2001 From: Maximiliano Date: Thu, 4 Jan 2024 11:13:25 -0300 Subject: [PATCH 10/14] Fix maximize chart style --- .../components/common/wazuh-discover/discover.scss | 7 +++++++ .../common/wazuh-discover/wz-discover.tsx | 13 +++++++------ 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/plugins/main/public/components/common/wazuh-discover/discover.scss b/plugins/main/public/components/common/wazuh-discover/discover.scss index f0caf2140a..b1937d541b 100644 --- a/plugins/main/public/components/common/wazuh-discover/discover.scss +++ b/plugins/main/public/components/common/wazuh-discover/discover.scss @@ -19,4 +19,11 @@ .discoverContainer .discoverChartContainer { min-height: 234px; + .dshLayout-isMaximizedPanel { + top: 0; + left: 0; + min-height: calc(100vh - 49px); + position: fixed; + z-index: 9999; + } } \ No newline at end of file diff --git a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx index 5b5f5b9d89..7019ca2327 100644 --- a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx +++ b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx @@ -116,7 +116,10 @@ const WazuhDiscover = (props: WazuhDiscoverProps) => { setIsSearching(false); }) } - }, [JSON.stringify(searchBarProps)]); + }, + [JSON.stringify(searchBarProps), + JSON.stringify(pagination), + JSON.stringify(sorting)]); const timeField = indexPattern?.timeFieldName ? indexPattern.timeFieldName : undefined; @@ -159,11 +162,9 @@ const WazuhDiscover = (props: WazuhDiscoverProps) => { {...searchBarProps} showSaveQuery={true} />} - {isSearching ? - : null} - {!isLoading && !isSearching && results?.hits?.total === 0 ? + {!isLoading && results?.hits?.total === 0 ? : null} - {!isLoading && !isSearching && results?.hits?.total > 0 ? ( + {!isLoading && results?.hits?.total > 0 ? ( <> @@ -193,7 +194,7 @@ const WazuhDiscover = (props: WazuhDiscoverProps) => { } : undefined} /> Date: Thu, 4 Jan 2024 11:15:10 -0300 Subject: [PATCH 11/14] Update CHANGELOG --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 06dcd51fd8..33571a43d7 100644 --- a/CHANGELOG.md +++ b/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) From 17af13a6e5b24d34d0fe4639904da81b28ebcb4e Mon Sep 17 00:00:00 2001 From: Maximiliano Date: Thu, 4 Jan 2024 11:23:39 -0300 Subject: [PATCH 12/14] Fix type import --- .../common/wazuh-discover/config/data-grid-columns.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx b/plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx index f90a7fdf64..50adbd6259 100644 --- a/plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx +++ b/plugins/main/public/components/common/wazuh-discover/config/data-grid-columns.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { tDataGridColumn } from '../../data_grid' +import { tDataGridColumn } from '../../data-grid'; export const threatHuntingColumns: tDataGridColumn[] = [{ id: 'timestamp' From d51c71fe0db5f35d83c5b20d4593521bc8320aa7 Mon Sep 17 00:00:00 2001 From: Maximiliano Date: Fri, 5 Jan 2024 10:55:30 -0300 Subject: [PATCH 13/14] Fix data grid fullscreen with dock navigation --- .../common/wazuh-discover/discover.scss | 43 +++++++++---------- plugins/main/public/styles/common.scss | 13 ++++++ 2 files changed, 34 insertions(+), 22 deletions(-) diff --git a/plugins/main/public/components/common/wazuh-discover/discover.scss b/plugins/main/public/components/common/wazuh-discover/discover.scss index b1937d541b..db82845c2a 100644 --- a/plugins/main/public/components/common/wazuh-discover/discover.scss +++ b/plugins/main/public/components/common/wazuh-discover/discover.scss @@ -1,29 +1,28 @@ .discoverContainer { height: calc(100vh - 104px); -} - -.headerIsExpanded .discoverContainer { - height: calc(100vh - 153px); -} + .euiDataGrid--fullScreen { + height: calc(100vh - 49px); + bottom: 0; + top: auto; + } + + .discoverDataGrid { + height: calc(100vh - 496px); + } -.discoverContainer .euiDataGrid--fullScreen { - height: calc(100vh - 49px); - bottom: 0; - top: auto; + .discoverChartContainer { + min-height: 234px; + .dshLayout-isMaximizedPanel { + top: 0; + left: 0; + min-height: calc(100vh - 49px); + position: fixed; + z-index: 9999; + } + } } -.discoverContainer .discoverDataGrid { - height: calc(100vh - 496px); +.headerIsExpanded .discoverContainer { + height: calc(100vh - 153px); } - -.discoverContainer .discoverChartContainer { - min-height: 234px; - .dshLayout-isMaximizedPanel { - top: 0; - left: 0; - min-height: calc(100vh - 49px); - position: fixed; - z-index: 9999; - } -} \ No newline at end of file diff --git a/plugins/main/public/styles/common.scss b/plugins/main/public/styles/common.scss index c88d18117e..aaedec88e3 100644 --- a/plugins/main/public/styles/common.scss +++ b/plugins/main/public/styles/common.scss @@ -1775,6 +1775,19 @@ iframe.width-changed { } } +/* OSD Data grid full screen with dock navigation left sidebar */ + + +.euiDataGrid__restrictBody.euiBody--hasFlyout { + .euiDataGrid--fullScreen { + left: 320px; + + .euiDataGrid__virtualized { + max-width: calc(100vw - 320px); + } + } +} + /* Custom Searchbar styles */ .application .filters-search-bar .globalQueryBar, From 08775dcb7f35f4b8c2481501b99a1511ce6f34af Mon Sep 17 00:00:00 2001 From: Maximiliano Date: Fri, 5 Jan 2024 12:15:42 -0300 Subject: [PATCH 14/14] Fix data grid fullscreen flyout layout with docked sidenav --- .../public/components/common/hooks/index.ts | 1 + .../common/hooks/useDockedSideNav.tsx | 20 +++++++++++++++++++ .../common/wazuh-discover/wz-discover.tsx | 9 ++++++--- .../dashboards/inventory/inventory.tsx | 4 +++- plugins/main/public/styles/common.scss | 5 ++--- 5 files changed, 32 insertions(+), 7 deletions(-) create mode 100644 plugins/main/public/components/common/hooks/useDockedSideNav.tsx diff --git a/plugins/main/public/components/common/hooks/index.ts b/plugins/main/public/components/common/hooks/index.ts index e3ce7584c7..a4cd7dbf91 100644 --- a/plugins/main/public/components/common/hooks/index.ts +++ b/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'; diff --git a/plugins/main/public/components/common/hooks/useDockedSideNav.tsx b/plugins/main/public/components/common/hooks/useDockedSideNav.tsx new file mode 100644 index 0000000000..489536b4d6 --- /dev/null +++ b/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(false); + + useEffect(() => { + const isNavDrawerSubscription = getChrome() + .getIsNavDrawerLocked$() + .subscribe((value: boolean) => { + setSideNavDocked(value); + }); + + return () => { + isNavDrawerSubscription.unsubscribe(); + }; + }, []); + + return sideNavDocked; +}; diff --git a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx index 7019ca2327..b22c58d0d4 100644 --- a/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx +++ b/plugins/main/public/components/common/wazuh-discover/wz-discover.tsx @@ -24,13 +24,13 @@ import { DiscoverNoResults } from '../../overview/vulnerabilities/common/compone import { LoadingSpinner } from '../../overview/vulnerabilities/common/components/loading_spinner'; import { useDataGrid, tDataGridColumn, exportSearchToCSV } from '../data-grid'; import { ErrorHandler, ErrorFactory, HttpError } from '../../../react-services/error-management'; -import { withErrorBoundary } from '../hocs'; import { HitsCounter } from '../../../kibana-integrations/discover/application/components/hits_counter'; import { formatNumWithCommas } from '../../../kibana-integrations/discover/application/helpers'; import useSearchBar from '../search-bar/use-search-bar'; import { search } from '../search-bar'; import { getPlugins } from '../../../kibana-services'; -import { getDiscoverPanels, histogramChartInput } from './config/histogram-chart'; +import { histogramChartInput } from './config/histogram-chart'; +import { useDockedSideNav } from '../hooks/useDockedSideNav' const DashboardByRenderer = getPlugins().dashboard.DashboardContainerByValueRenderer; import './discover.scss'; @@ -43,12 +43,14 @@ type WazuhDiscoverProps = { const WazuhDiscover = (props: WazuhDiscoverProps) => { const { indexPatternName, tableColumns: defaultTableColumns } = props + const [sidebarDocked, setSidebarDocked] = useState(false); const SearchBar = getPlugins().data.ui.SearchBar; const [results, setResults] = useState({} as SearchResponse); const [inspectedHit, setInspectedHit] = useState(undefined); const [indexPattern, setIndexPattern] = useState(undefined); const [isSearching, setIsSearching] = useState(false); const [isExporting, setIsExporting] = useState(false); + const sideNavDocked = useDockedSideNav(); const onClickInspectDoc = useMemo(() => (index: number) => { const rowClicked = results.hits.hits[index]; @@ -179,6 +181,7 @@ const WazuhDiscover = (props: WazuhDiscoverProps) => {
@@ -231,6 +234,6 @@ const WazuhDiscover = (props: WazuhDiscoverProps) => { ); -} +}; export default WazuhDiscover; \ No newline at end of file diff --git a/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.tsx b/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.tsx index b92b1d9ae9..f4abe37010 100644 --- a/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.tsx +++ b/plugins/main/public/components/overview/vulnerabilities/dashboards/inventory/inventory.tsx @@ -31,7 +31,7 @@ import { LoadingSpinner } from '../../common/components/loading_spinner'; // common components/hooks import DocViewer from '../../../../common/doc-viewer/doc-viewer'; import useSearchBar from '../../../../common/search-bar/use-search-bar'; -import { useAppConfig } from '../../../../common/hooks'; +import { useAppConfig, useDockedSideNav } from '../../../../common/hooks'; import { useDataGrid } from '../../../../common/data-grid/use-data-grid'; import { useDocViewer } from '../../../../common/doc-viewer/use-doc-viewer'; import { withErrorBoundary } from '../../../../common/hocs'; @@ -56,6 +56,7 @@ const InventoryVulsComponent = () => { ); const [isSearching, setIsSearching] = useState(false); const [isExporting, setIsExporting] = useState(false); + const sideNavDocked = useDockedSideNav(); const onClickInspectDoc = useMemo( () => (index: number) => { @@ -198,6 +199,7 @@ const InventoryVulsComponent = () => { isSuccess && results?.hits?.total > 0 ? (