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.

Sign up for GitHub

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

Jump to bottom

Enhance the performance of data grid with many fields #7226

Open
wants to merge 3 commits into
base: 4.10.1
Choose a base branch
from
Open

Enhance the performance of data grid with many fields #7226

wants to merge 3 commits into from

Conversation

Desvelao
Copy link
Member

@Desvelao Desvelao commented Jan 9, 2025 •
edited
Loading

Description

This pull request enhances the performance of data grid component used in Events tab and Vulnerability Detection > Inventory.

Changes:

  • Remove to the Columns button the ability to set the columns visibility
  • Create an Available fields button as additional control of data grid
    that manages the fields visibility similar to the render of Columns
    button when this ability was enabled

Side changes:

  • Change the color of Export formatted button of data grid to text to
    match the color of the of buttons

Issues Resolved

#7223

Evidence

  • Vulnerabilities Detection > Inventory
    image
    image
    image

  • Module > Events
    image
    image
    image

Test

Legend:
⚫: none
🟢: pass
🟡: warning
🔴: fail
⚪: not applicable

UI

Test Chrome Firefox Safari
Go to module > Events and use the Available fields button to add a new field and ensure the selected field is visible as a column in the table. ⚫ ⚫ ⚫
Go to module > Events and use the Available fields button to remove a field and ensure the selected field is visible not as a column in the table. ⚫ ⚫ ⚫
Go to module > Events and use the search input to filter the available fields in the Available fields button. ⚫ ⚫ ⚫
Go to module > Events and use the COlumns button to change the column sorting, ensure the column sorting of the table is displayed as configured in the button. ⚫ ⚫ ⚫
Go to Vulnerability Detection > Inventory and use the Available fields button to add a new field and ensure the selected field is visible as a column in the table. ⚫ ⚫ ⚫
Go to Vulnerability Detection > Inventory and use the Available fields button to remove a field and ensure the selected field is visible not as a column in the table. ⚫ ⚫ ⚫
Go to Vulnerability Detection > Inventory and use the search input to filter the available fields in the Available fields button. ⚫ ⚫ ⚫
Go to Vulnerability Detection > Inventory and use the COlumns button to change the column sorting, ensure the column sorting of the table is displayed as configured in the button. ⚫ ⚫ ⚫

Details

⚫ Go to module > Events and use the Available fields button to add a new field and ensure the selected field is visible as a column in the table.

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to module > Events and use the Available fields button to remove a field and ensure the selected field is visible not as a column in the table.

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to module > Events and use the search input to filter the available fields in the Available fields button.

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to module > Events and use the COlumns button to change the column sorting, ensure the column sorting of the table is displayed as configured in the button.

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to Vulnerability Detection > Inventory and use the Available fields button to add a new field and ensure the selected field is visible as a column in the table.

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to Vulnerability Detection > Inventory and use the Available fields button to remove a field and ensure the selected field is visible not as a column in the table.

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to Vulnerability Detection > Inventory and use the search input to filter the available fields in the Available fields button.

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to Vulnerability Detection > Inventory and use the COlumns button to change the column sorting, ensure the column sorting of the table is displayed as configured in the button.

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

Review the performance (loading time) when accessing to the Events or Vulnerabilities Detection > Inventory views, recommended using some environment with a high load of alerts/vulnerabilities.

Check List

  • New functionality includes testing.
  • New functionality has been documented.
  • Update CHANGELOG.md
  • Commits are signed per the DCO using --signoff

@Desvelao
change(data-grid): enhance performance of data grid with many fields
f9ddb2b 
- Remove to the Columns button the ability to set the columns visibility
- Create an Available fields button as additional control of data grid
  that manages the fields visibility similar to the render of Columns
  button when this ability was enabled

Side changes:
- Change the color of Export formatted button of data grid to text to
  match the color of the of buttons
@Desvelao Desvelao self-assigned this Jan 9, 2025
@Desvelao Desvelao linked an issue Jan 9, 2025 that may be closed by this pull request
Events tab data grid performance improvement #7223
Open
@Desvelao Desvelao marked this pull request as ready for review January 9, 2025 12:48
@Desvelao Desvelao requested a review from a team January 9, 2025 12:48
@JuanGarriuz JuanGarriuz self-requested a review January 9, 2025 12:56
@chantal-kelm chantal-kelm self-requested a review January 9, 2025 13:23
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 9, 2025

Wazuh Core plugin code coverage (Jest) test % values
Statements 45.5% ( 400 / 879 )
Branches 41.09% ( 157 / 382 )
Functions 43.87% ( 136 / 310 )
Lines 45.69% ( 398 / 871 )

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 9, 2025

Wazuh Check Updates plugin code coverage (Jest) test % values
Statements 78.72% ( 185 / 235 )
Branches 62.72% ( 69 / 110 )
Functions 61.7% ( 29 / 47 )
Lines 78.72% ( 185 / 235 )

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 9, 2025

Main plugin code coverage (Jest) test % values
Statements 14.88% ( 4436 / 29801 )
Branches 9.76% ( 1876 / 19216 )
Functions 14.64% ( 1056 / 7213 )
Lines 15.1% ( 4330 / 28671 )

@yenienserrano
Copy link
Member

yenienserrano commented Jan 9, 2025 •
edited
Loading

Test

Legend:
⚫: none
🟢: pass
🟡: warning
🔴: fail
⚪: not applicable

UI

Test Chrome Firefox Safari
Go to module > Events and use the Available fields button to add a new field and ensure the selected field is visible as a column in the table. 🟢 ⚫ 🟢
Go to module > Events and use the Available fields button to remove a field and ensure the selected field is visible not as a column in the table. 🟢 ⚫ 🟢
Go to module > Events and use the search input to filter the available fields in the Available fields button. 🟢 ⚫ 🟢
Go to module > Events and use the COlumns button to change the column sorting, ensure the column sorting of the table is displayed as configured in the button. 🟡 ⚫ 🟢
Go to Vulnerability Detection > Inventory and use the Available fields button to add a new field and ensure the selected field is visible as a column in the table. 🟢 ⚫ 🟢
Go to Vulnerability Detection > Inventory and use the Available fields button to remove a field and ensure the selected field is visible not as a column in the table. 🟢 ⚫ 🟢
Go to Vulnerability Detection > Inventory and use the search input to filter the available fields in the Available fields button. 🟢 ⚫ 🟢
Go to Vulnerability Detection > Inventory and use the COlumns button to change the column sorting, ensure the column sorting of the table is displayed as configured in the button. 🟡 ⚫ 🟢

Details

🟢 Go to module > Events and use the Available fields button to add a new field and ensure the selected field is visible as a column in the table.

Chrome - 🟢

image

Firefox - ⚫

Safari - 🟢

image
🟢 Go to module > Events and use the Available fields button to remove a field and ensure the selected field is visible not as a column in the table.

Chrome - ⚫

image

Firefox - ⚫

Safari - 🟢

image
🟢 Go to module > Events and use the search input to filter the available fields in the Available fields button.

Chrome - 🟢

image

Firefox - ⚫

Safari - 🟢

image
🟡 Go to module > Events and use the COlumns button to change the column sorting, ensure the column sorting of the table is displayed as configured in the button.

Chrome - 🟡

When dragging and dropping, it is all red.

image image

Firefox - ⚫

Safari - 🟢

image
🟢 Go to Vulnerability Detection > Inventory and use the Available fields button to add a new field and ensure the selected field is visible as a column in the table.

Chrome - 🟢

image

Firefox - ⚫

Safari - 🟢

image
🟢 Go to Vulnerability Detection > Inventory and use the Available fields button to remove a field and ensure the selected field is visible not as a column in the table.

Chrome - 🟢

image

Firefox - ⚫

Safari - 🟢

image
🟢 Go to Vulnerability Detection > Inventory and use the search input to filter the available fields in the Available fields button.

Chrome - 🟢

image

Firefox - ⚫

Safari - 🟢

image
🟡 Go to Vulnerability Detection > Inventory and use the COlumns button to change the column sorting, ensure the column sorting of the table is displayed as configured in the button.

Chrome - 🟡

image

Firefox - ⚫

Safari - 🟢

image

@JuanGarriuz
Copy link
Member

JuanGarriuz commented Jan 9, 2025 •
edited
Loading

Test

Legend:
⚫: none
🟢: pass
🟡: warning
🔴: fail
⚪: not applicable

UI

Test Chrome Firefox Safari
Go to module > Events and use the Available fields button to add a new field and ensure the selected field is visible as a column in the table. 🟢 🟢 ⚪
Go to module > Events and use the Available fields button to remove a field and ensure the selected field is visible not as a column in the table. 🟢 🟢 ⚪
Go to module > Events and use the search input to filter the available fields in the Available fields button. 🟢 🟢 ⚪
Go to module > Events and use the COlumns button to change the column sorting, ensure the column sorting of the table is displayed as configured in the button. 🔴 🟢 ⚪
Go to Vulnerability Detection > Inventory and use the Available fields button to add a new field and ensure the selected field is visible as a column in the table. 🟢 🟢 ⚪
Go to Vulnerability Detection > Inventory and use the Available fields button to remove a field and ensure the selected field is visible not as a column in the table. 🟢 🟢 ⚪
Go to Vulnerability Detection > Inventory and use the search input to filter the available fields in the Available fields button. 🟢 🟢 ⚪
Go to Vulnerability Detection > Inventory and use the COlumns button to change the column sorting, ensure the column sorting of the table is displayed as configured in the button. 🔴 🟢 ⚪

Details

🟢 Go to module > Events and use the Available fields button to add a new field and ensure the selected field is visible as a column in the table.

Chrome - 🟢

image

Firefox - 🟢

image

🟢 Go to module > Events and use the Available fields button to remove a field and ensure the selected field is visible not as a column in the table.

Chrome - 🟢

image

Firefox - 🟢

image

🟢 Go to module > Events and use the search input to filter the available fields in the Available fields button.

Chrome - 🟢

image

Firefox - 🟢

image

🔴 Go to module > Events and use the COlumns button to change the column sorting, ensure the column sorting of the table is displayed as configured in the button.

Chrome - 🔴

The functionality is correct, but the styles show the entire table in red.

Grabacion.2025-01-09.163327.mp4

Firefox - 🟢

image

🟢 Go to Vulnerability Detection > Inventory and use the Available fields button to add a new field and ensure the selected field is visible as a column in the table.

Chrome - 🟢

image

Firefox - 🟢

image

🟢 Go to Vulnerability Detection > Inventory and use the Available fields button to remove a field and ensure the selected field is visible not as a column in the table.

Chrome - 🟢

image

Firefox - 🟢

image

🟢 Go to Vulnerability Detection > Inventory and use the search input to filter the available fields in the Available fields button.

Chrome - 🟢

image

Firefox - 🟢

image

🔴 Go to Vulnerability Detection > Inventory and use the COlumns button to change the column sorting, ensure the column sorting of the table is displayed as configured in the button.

Chrome - 🔴

image
image

Firefox - 🟢

image

I was already experiencing this issue in 4.10.1

image

There is a slight increase in the performance, but it inherits a visual issue, the vertical bar.

image
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JuanGarriuz JuanGarriuz Awaiting requested review from JuanGarriuz

@chantal-kelm chantal-kelm Awaiting requested review from chantal-kelm

At least 1 approving review is required to merge this pull request.

Assignees

@Desvelao Desvelao

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Events tab data grid performance improvement
3 participants
@Desvelao @yenienserrano @JuanGarriuz