Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove embedded discover #6120

Closed
74 tasks done
gdiazlo opened this issue Nov 14, 2023 · 3 comments
Closed
74 tasks done

Remove embedded discover #6120

gdiazlo opened this issue Nov 14, 2023 · 3 comments
Assignees
Labels

Comments

@gdiazlo
Copy link
Member

gdiazlo commented Nov 14, 2023

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:

image

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:

Screen.Recording.2023-10-25.at.10.52.34.mov

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

Related fixes/features

@wazuhci wazuhci moved this to Backlog in Release 4.9.0 Nov 14, 2023
@Machi3mfl Machi3mfl self-assigned this Nov 14, 2023
@wazuhci wazuhci moved this from Backlog to In progress in Release 4.9.0 Nov 15, 2023
@Machi3mfl
Copy link
Member

Machi3mfl commented Dec 5, 2023

New Discover

Screenshot 2024-01-04 at 08 58 15

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'
}]
Screenshot 2024-01-04 at 11 22 03
  • Row details flyout to show all the document data

@asteriscos
Copy link
Member

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

@github-project-automation github-project-automation bot moved this from In progress to Done in Roadmap May 30, 2024
@wazuhci wazuhci moved this from In progress to Done in Release 4.9.0 May 30, 2024
@Desvelao
Copy link
Member

Added pull request to the list of fixes: #6950

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Done
Status: Done
Development

No branches or pull requests

5 participants