Refactoring and redesign endpoints summary charts #6268

jbiset · 2024-01-04T19:33:32Z

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

…points-summary-charts

…oints-summary-charts

…ts are added to both methods

…oints-summary-charts

lucianogorza · 2024-02-23T20:38:11Z

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 · 2024-02-23T21:00:48Z

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 · 2024-02-26T12:22:37Z

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 - ⚫

…nd fixed filtering by unknown values of both.

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.

plugins/main/public/components/endpoints-summary/dashboard/components/outdated-agents-card.scss

lucianogorza · 2024-02-27T20:06:04Z

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

…oints-summary-charts

github-actions · 2024-02-28T14:00:17Z

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 · 2024-02-28T14:00:30Z

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 · 2024-02-28T14:04:57Z

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 · 2024-02-28T14:57:24Z

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

jbiset and others added 3 commits January 3, 2024 13:51

Refactor the agent by status and develop other charts

5e6790e

Update outdated agents card

d12282b

Merge branch 'master' into enhancement/6258-refactor-and-redesign-end…

c23ee4f

…points-summary-charts

jbiset linked an issue Jan 4, 2024 that may be closed by this pull request

Refactoring and redesign Endpoints Summary charts #6258

Closed

9 tasks

jbiset added 4 commits January 8, 2024 17:14

Add dynamic colors to graphics and responsive layout

a9969e6

Fix responsive layout

a77d62a

Change outdated agents panel max size

6c8d90b

Change agent_distinct imposter endpoint and fix getAgentsByOS service

e44a942

asteriscos changed the base branch from master to 4.9.0 February 13, 2024 10:03

jbiset and others added 8 commits February 21, 2024 11:16

Merge branch '4.9.0' into enhancement/6258-refactor-and-redesign-endp…

bf3c945

…oints-summary-charts

Changed agent-by-group and agent-by-OS endpoints to filter agent 000.

9de564f

The getAgentsByGroup and getAgentsByOs methods are improved. Unit tes…

9e0a031

…ts are added to both methods

fix query when filtering by group and when filtering by outdated agents

e097730

Disabled filter outdated agent when no data and add donut-card test

86b05b4

Finished donut-card tests and added outdated-agents-card tests

35613f0

Adjusted visual styles of chart-legend and outdated-agents-card popover

f00a03a

Merge branch '4.9.0' into enhancement/6258-refactor-and-redesign-endp…

251ba1e

…oints-summary-charts

jbiset marked this pull request as ready for review February 23, 2024 19:22

Add CHANGELOG

99177e7

jbiset changed the title ~~Refactor and redesign endpoints summary charts~~ Refactoring and redesign endpoints summary charts Feb 23, 2024

lucianogorza self-requested a review February 23, 2024 19:42

jbiset added 6 commits February 26, 2024 09:56

Fix responsive visualizations

a4ff85c

Changed the services of obtaining agents by group and agents by OS. A…

326f778

…nd fixed filtering by unknown values of both.

Fix chart legend on tablet-desktop breakpoint

f5dad7a

Change width chart legent to desktop breakpoint

08436ff

Fix get-agents-by-group test

73a99cf

Updated get-agents-by-os to get top 5 agents by OS

25b17b6

yenienserrano reviewed Feb 27, 2024

View reviewed changes

Desvelao reviewed Feb 27, 2024

View reviewed changes

plugins/main/public/components/endpoints-summary/dashboard/components/outdated-agents-card.scss Outdated Show resolved Hide resolved

lucianogorza previously approved these changes Feb 27, 2024

View reviewed changes

jbiset and others added 2 commits February 28, 2024 08:17

Merge branch '4.9.0' into enhancement/6258-refactor-and-redesign-endp…

f46bdc9

…oints-summary-charts

Fixed CSS for both the outdated-agents-card popover and the donut legend

52a929c

jbiset dismissed lucianogorza’s stale review via 52a929c February 28, 2024 13:58

lucianogorza approved these changes Feb 28, 2024

View reviewed changes

yenienserrano approved these changes Feb 28, 2024

View reviewed changes

Tostti approved these changes Feb 28, 2024

View reviewed changes

Tostti merged commit f3fe46b into 4.9.0 Feb 28, 2024
4 checks passed

Tostti deleted the enhancement/6258-refactor-and-redesign-endpoints-summary-charts branch February 28, 2024 15:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactoring and redesign endpoints summary charts #6268

Refactoring and redesign endpoints summary charts #6268

jbiset commented Jan 4, 2024 •

edited

Loading

lucianogorza commented Feb 23, 2024 •

edited

Loading

yenienserrano commented Feb 23, 2024 •

edited

Loading

JuanGarriuz commented Feb 26, 2024 •

edited

Loading

yenienserrano left a comment

lucianogorza commented Feb 27, 2024 •

edited

Loading

lucianogorza left a comment

github-actions bot commented Feb 28, 2024

github-actions bot commented Feb 28, 2024

github-actions bot commented Feb 28, 2024

Tostti commented Feb 28, 2024 •

edited

Loading

Tostti left a comment

Refactoring and redesign endpoints summary charts #6268

Refactoring and redesign endpoints summary charts #6268

Conversation

jbiset commented Jan 4, 2024 • edited Loading

Description

Issues Resolved

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

Steps to test:

Check List

lucianogorza commented Feb 23, 2024 • edited Loading

CR

Test

yenienserrano commented Feb 23, 2024 • edited Loading

Test

Steps to test:

JuanGarriuz commented Feb 26, 2024 • edited Loading

Test

Steps to test:

yenienserrano left a comment

Choose a reason for hiding this comment

lucianogorza commented Feb 27, 2024 • edited Loading

CR 🟢

Test 🟢

lucianogorza left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 28, 2024

github-actions bot commented Feb 28, 2024

github-actions bot commented Feb 28, 2024

Tostti commented Feb 28, 2024 • edited Loading

Test

Steps to test:

Tostti left a comment

Choose a reason for hiding this comment

jbiset commented Jan 4, 2024 •

edited

Loading

lucianogorza commented Feb 23, 2024 •

edited

Loading

yenienserrano commented Feb 23, 2024 •

edited

Loading

JuanGarriuz commented Feb 26, 2024 •

edited

Loading

lucianogorza commented Feb 27, 2024 •

edited

Loading

Tostti commented Feb 28, 2024 •

edited

Loading