Refactoring and redesign endpoints summary charts

[jbiset]

Description

This pull request modifies visualizations on Endpoints Summary changing the following:

• The Agents by State chart is refactored to be a decoupled and reusable component for other similar Endpoint Summary charts.
• The Agents by operating system graph is developed, reusing the refactored Agents by state component.
• The Agents by Group graph is developed, reusing the refactored Agents by State component.
• A card is developed showing the number of outdated agents.

Each visualization above has a user interaction that allows filters to be added to the table below as appropriate.

Additionally, the /agents/stats/distinct endpoint is updated in the imposter.

Issues Resolved

#6258

Evidence

Endpoints summary screen

Breakpoint 1440px

Breakpoint 1024px

Breakpoint 768px

Mobile

Endpoints summary screen with outdated agents popover opened

Endpoints summary screen without outdated agents popover opened

Test

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

Steps to test:

• Go to Endpoints summary and test following:

Test	Chrome	Firefox	Safari
Check that the visualizations are rendered as shown in the evidence	⚫	⚫	⚫
Check responsive version of visualizations rendering	⚫	⚫	⚫
Check that the filter outdated agents button in the outdated agents component is disabled, using a real manager that does not have outdated agents	⚫	⚫	⚫
Check that filters are applied when interacting with the Agents by status legend	⚫	⚫	⚫
Check that filters are applied when interacting with the Agents by OS legend	⚫	⚫	⚫
Check that filters are applied when interacting with the Agents by Group legend	⚫	⚫	⚫
Check that filters are applied when interacting with the Filter outdated agents button	⚫	⚫	⚫
Check the link to the "How to update agents" documentation in the Outdated popover	⚫	⚫	⚫

Details

⚫ Check that the visualizations are rendered as shown in the evidence

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Check responsive version of visualizations rendering

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Check that the filter outdated agents button in the outdated agents component is disabled, using a real manager that does not have outdated agents

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Check that filters are applied when interacting with the Agents by status legend

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Check that filters are applied when interacting with the Agents by OS legend

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Check that filters are applied when interacting with the Filter outdated agents button

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Check the link to the "How to update agents" documentation in the Outdated popover

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

Check List

• All tests pass
  • yarn test:jest
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[lucianogorza]

CR

Test

Test	Chrome	Firefox	Safari
Check that the visualizations are rendered as shown in the evidence	🟢	⚫	⚫
Check responsive version of visualizations rendering	🟡	⚫	⚫
Check that the filter outdated agents button in the outdated agents component is disabled, using a real manager that does not have outdated agents	🟢	⚫	⚫
Check that filters are applied when interacting with the Agents by status legend	🟢	⚫	⚫
Check that filters are applied when interacting with the Agents by OS legend	🔴	⚫	⚫
Check that filters are applied when interacting with the Agents by Group legend	🔴	⚫	⚫
Check that filters are applied when interacting with the Filter outdated agents button	⚫	⚫	⚫
Check the link to the "How to update agents" documentation in the Outdated popover	⚫	⚫	⚫

Details

🟢 Check that the visualizations are rendered as shown in the evidence

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟡 Check responsive version of visualizations rendering

Chrome - 🟡

In mobile (width: 414px) the charts overflow the screen

Firefox - ⚫

Safari - ⚫

🟢 Check that the filter outdated agents button in the outdated agents component is disabled, using a real manager that does not have outdated agents

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check that filters are applied when interacting with the Agents by status legend

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🔴 Check that filters are applied when interacting with the Agents by OS legend

Chrome - 🔴

The filter doesn't apply for unknown option

Firefox - ⚫

Safari - ⚫

🔴 Check that filters are applied when interacting with the Agents by Group legend

Chrome - 🔴

There are two combinations: default,group1 and group1,default that get the same agents (2 agents). Maybe we have to process the data from the API to detect duplicated cases and aggregate them.

Groups charts are confusing, i think is better to summarize by one group, and maybe show the top 5 and the Other category.

Firefox - ⚫

Safari - ⚫

⚫ Check that filters are applied when interacting with the Filter outdated agents button

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Check the link to the "How to update agents" documentation in the Outdated popover

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

[yenienserrano]

Test

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

Steps to test:

• Go to Endpoints summary and test following:

Test	Chrome	Firefox	Safari
Check that the visualizations are rendered as shown in the evidence	🟢	⚫	⚫
Check responsive version of visualizations rendering	🟢	⚫	⚫
Check that the filter outdated agents button in the outdated agents component is disabled, using a real manager that does not have outdated agents	🟢	⚫	⚫
Check that filters are applied when interacting with the Agents by status legend	🟢	⚫	⚫
Check that filters are applied when interacting with the Agents by OS legend	🟡	⚫	⚫
Check that filters are applied when interacting with the Agents by Group legend	🟡	⚫	⚫
Check that filters are applied when interacting with the Filter outdated agents button	🟡	⚫	⚫
Check the link to the "How to update agents" documentation in the Outdated popover	🟢	⚫	⚫

Details

🟢 Check that the visualizations are rendered as shown in the evidence

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check responsive version of visualizations rendering

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check that the filter outdated agents button in the outdated agents component is disabled, using a real manager that does not have outdated agents

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check that filters are applied when interacting with the Agents by status legend

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟡 Check that filters are applied when interacting with the Agents by OS legend

2 requests for each filtered legend

Chrome - 🟡

windows

unknown

Firefox - ⚫

Safari - ⚫

🟡 Check that filters are applied when interacting with the Agents by Group legend

2 requests for each filtered legend

Chrome - 🟡

Firefox - ⚫

Safari - ⚫

🟡 Check that filters are applied when interacting with the Filter outdated agents button

2 requests for each filtered legend and one of the requests is incomplete

Chrome - 🟡

Firefox - ⚫

Safari - ⚫

🟢 Check the link to the "How to update agents" documentation in the Outdated popover

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

[JuanGarriuz]

Test

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

Steps to test:

• Go to Endpoints summary and test following:

Test	Chrome	Firefox	Safari
Check that the visualizations are rendered as shown in the evidence	🟢	⚫	⚫
Check responsive version of visualizations rendering	🟢	⚫	⚫
Check that the filter outdated agents button in the outdated agents component is disabled, using a real manager that does not have outdated agents	🟢	⚫	⚫
Check that filters are applied when interacting with the Agents by status legend	🟢	⚫	⚫
Check that filters are applied when interacting with the Agents by OS legend	🟢	⚫	⚫
Check that filters are applied when interacting with the Agents by Group legend	🟢	⚫	⚫
Check that filters are applied when interacting with the Filter outdated agents button	⚫	⚫	⚫
Check the link to the "How to update agents" documentation in the Outdated popover	🟢	⚫	⚫

Details

🟢 Check that the visualizations are rendered as shown in the evidence

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check responsive version of visualizations rendering

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check that the filter outdated agents button in the outdated agents component is disabled, using a real manager that does not have outdated agents

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check that filters are applied when interacting with the Agents by status legend

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check that filters are applied when interacting with the Agents by OS legend

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

⚫ Check that filters are applied when interacting with the Filter outdated agents button

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

🟢 Check the link to the "How to update agents" documentation in the Outdated popover

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

[yenienserrano]

Will the graphs only be updated when the page is loaded?

Because the agent table has a refresh button, and they may need to change the graph results.

[lucianogorza]

CR 🟢

Test 🟢

Test	Chrome	Firefox	Safari
Check that the visualizations are rendered as shown in the evidence	🟢	⚫	⚫
Check responsive version of visualizations rendering	🟢	⚫	⚫
Check that the filter outdated agents button in the outdated agents component is disabled, using a real manager that does not have outdated agents	🟢	⚫	⚫
Check that filters are applied when interacting with the Agents by status legend	🟢	⚫	⚫
Check that filters are applied when interacting with the Agents by OS legend	🟢	⚫	⚫
Check that filters are applied when interacting with the Agents by Group legend	🟢	⚫	⚫
Check that filters are applied when interacting with the Filter outdated agents button	⚫	⚫	⚫
Check the link to the "How to update agents" documentation in the Outdated popover	⚫	⚫	⚫

Details

🟢 Check that the visualizations are rendered as shown in the evidence

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check responsive version of visualizations rendering

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check that the filter outdated agents button in the outdated agents component is disabled, using a real manager that does not have outdated agents

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check that filters are applied when interacting with the Agents by status legend

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check that filters are applied when interacting with the Agents by OS legend

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check that filters are applied when interacting with the Agents by Group legend

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check that filters are applied when interacting with the Filter outdated agents button

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

🟢 Check the link to the "How to update agents" documentation in the Outdated popover

Chrome - 🟢

Firefox - ⚫

Safari - ⚫

[lucianogorza]

LGTM

[github-actions]

Wazuh Core plugin code coverage (Jest) test	%	values
Statements	21.38%	( 176 / 823 )
Branches	19.45%	( 79 / 406 )
Functions	14.17%	( 36 / 254 )
Lines	21.57%	( 173 / 802 )

[github-actions]

Wazuh Check Updates plugin code coverage (Jest) test	%	values
Statements	76.44%	( 172 / 225 )
Branches	58.65%	( 61 / 104 )
Functions	61.7%	( 29 / 47 )
Lines	76.44%	( 172 / 225 )

[github-actions]

Main plugin code coverage (Jest) test	%	values
Statements	12.33%	( 4288 / 34757 )
Branches	8.08%	( 1855 / 22931 )
Functions	11.87%	( 988 / 8323 )
Lines	12.5%	( 4164 / 33290 )

[Tostti]

Test

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

Steps to test:

• Go to Endpoints summary and test following:

Test	Chrome	Firefox	Safari
Check that the visualizations are rendered as shown in the evidence	⚫	⚫	🟢
Check responsive version of visualizations rendering	⚫	⚫	🟢
Check that the filter outdated agents button in the outdated agents component is disabled, using a real manager that does not have outdated agents	⚫	⚫	🟢
Check that filters are applied when interacting with the Agents by status legend	⚫	⚫	🟢
Check that filters are applied when interacting with the Agents by OS legend	⚫	⚫	🟢
Check that filters are applied when interacting with the Agents by Group legend	⚫	⚫	🟢
Check that filters are applied when interacting with the Filter outdated agents button	⚫	⚫	🟢
Check the link to the "How to update agents" documentation in the Outdated popover	⚫	⚫	🟢

Details

🟢Check that the visualizations are rendered as shown in the evidence

Chrome - ⚫

Firefox - ⚫

Safari - 🟢

🟢 Check responsive version of visualizations rendering

Chrome - ⚫

Firefox - ⚫

Safari - 🟢

🟢 Check that the filter outdated agents button in the outdated agents component is disabled, using a real manager that does not have outdated agents

Chrome - ⚫

Firefox - ⚫

Safari - 🟢

🟢 Check that filters are applied when interacting with the Agents by status legend

Chrome - ⚫

Firefox - ⚫

Safari - 🟢

🟢 Check that filters are applied when interacting with the Agents by OS legend

Chrome - ⚫

Firefox - ⚫

Safari - 🟢

🟢 Check that filters are applied when interacting with the Agents by group legend

Chrome - ⚫

Firefox - ⚫

Safari - 🟢

🟢 Check that filters are applied when interacting with the Filter outdated agents button

Chrome - ⚫

Firefox - ⚫

Safari - 🟢

🟢 Check the link to the "How to update agents" documentation in the Outdated popover

Chrome - ⚫

Firefox - ⚫

Safari - 🟢

[Tostti]

LGTM