Remove embedded `discover`

[gdiazlo]

Description

We want to remove the embedded discover and replace it with a more modern component. This will allow us to remove angular as a dependency, improve usability and performance. Also, this will allow us to adapt to the upcoming changes from the upstream OpenSearch related to the new discover, the changes of the OUI library and others.

We use discover in multiple places, the most apparent one is the Events tabs:

But its components are also used to build other visualizations, managing filters and some events. The removal of the discover will require a refactor of these uses.

Our strategy will be to create our own component based on the one we already created for the new inventory tab:

https://github.com/wazuh/wazuh-dashboard-plugins/assets/6089438/7eb30f09-936f-4e5f-a24f-52a3005f1ee8

We will add to the current inventory tab the time filters and the timeline visualization as shown in the discover.

In general our implementation strategy will be to add the necessary changes to make the discover redundant, and then, remove it. Also, we don't want to lose functionality, if there are use cases not identified in this issue, discuss them in the comments sections below. We will update the issue body with the conclusion.

Functional requirements

As a user, I want to be able to:

Explore data:

• view the events in a timeline visualization.
• customize the fields displayed in the table
• receive events as they are produced (auto reload)
• see the whole event details in a fly-out panel

Generate reports:

• manage saved queries (CRUD)
• generate a report in the reporting plugin, based on a query
• download a query as a CSV.

Explore event context:

• click on a scripted field and follow a link to other modules
• click a field and display a fly-out with a sub-query of related events

Non-functional requirements

• Research the use of scripted fields to add context to values anywhere in our data tables

Implementation restrictions

• Use the newly developed inventory component, adapting or increasing its features. These modifications should not break the current behaviors.

Plan

• [x] #6197
• [x] #6222
• [x] #6236
  • [x] Create histogram visualization
  • [x] Enhance column rendering to support custom call to actions
  • [x] Develop the Save Query feature
• [x] Implement the new discover view in the rest of the modules
  • [x] #6273
  • [x] #6276
  • [x] #6277
  • [x] #6278
  • [x] #6279
  • [x] #6280
  • [x] #6281
  • [x] #6282
  • [x] #6295
  • [x] #6296
  • [x] #6298
  • [x] #6299
  • [x] #6300
  • [x] #6450
  • [x] #6451
  • [x] #6452
• [x] #6477
• [x] #6499
  • [x] #6644
• [x] #6556
• [x] #6535
• [ ] #6680

Related fixes/features

• [x] #6434

[Machi3mfl]

New Discover

Components features

Search bar

• Search input to filter by a keyword
• Date picker to filter by a date (range, absolute, etc)
• Add filter modal to filter using UI

Histogram chart

• Hits chart by time
• Visualization options (Maximize and inspect chart)

Data grid

• Table with pagination and rows per page selector
• Table with headers features like sort, columns selector, export results to CSV, density layout selector, etc
• Custom column rendering (Is possible to render any component for a specific column via code)

type tDataGridColumn = {
    render?: (value: any) => string | React.ReactNode;
} & EuiDataGridColumn;

export const discoverModuleColumns: tDataGridColumn[] = [{
    id: 'timestamp',
},
{
    id: 'agent.name',
    render: (value: string) => { // return any React.ReactNode for the cell
        return (
            <EuiBadge>{value}</EuiBadge>
        )
    }
},
{
    id: 'rule.description'
},
{
    id: 'rule.level'
},
{
    id: 'rule.id'
}]

• Row details flyout to show all the document data

[asteriscos]

I will close this issue, because the angularJS routing will be solved in the next stage of the release.

• https://github.com/wazuh/wazuh-dashboard-plugins/issues/6680