Redesign the agent's dashboard

[gdiazlo]

Describe the solution you'd like

In the agent's dashboard, there is an SCA card with a severity indicator of the last SCA scan made for that agent. It is not clear how we're selecting the policy or if we're agregating them in those indicators.

A user needs to go through three pages to reach a list of the failing policies. We want to take the user to the information without going through all these pages.

We need to design the widget in a way the user can reach the information weŕe displaying with a single click.

We will discuss possible designs as well as their implementation in this issue.

[chantal-kelm]

I think this could be a solution, more intuitive for the user: https://user-images.githubusercontent.com/99441266/179787358-49c6d8a7-048c-48ec-9301-759f374707bc.mp4

[chantal-kelm]

A solution could be to remove the table seen in the video, remove the page where that table is displayed, and display that table on the SCA card within an agent's screen.

Video:

https://user-images.githubusercontent.com/99441266/180035751-a38feaed-6f07-407a-97f2-94f2bb927f23.mp4

Image of how the SCA card would look like in an agent:

By clicking on any row of the table the user would be redirected to this page:

[chantal-kelm]

Today I took the issue and have been working on understanding how the filters are being passed through the url and based on that displaying certain tables. Once I understood this, I rendered the table where we want, I still need to keep working on this issue.

[chantal-kelm]

This issue was due tomorrow, but due to many changes from the ci cd team on this issue, I was able to start it today and will change the due date to 23/09

[chantal-kelm]

Desired behavior:

When we click on a row of the table we want to show in the SCA card: 'Latest scans' we want it to redirect us to a new page where we will show the second table.

Research:

Currently, the routes of the project are made with Angular, and the same route shows different screens depending on the states that are changing, so there is no specific route as there should be. This also happens in the section we want to redesign. So when we want to redirect as in this case when clicking on a row we don't have a URL to redirect to. In the future, it would be good to finish moving the project to React, and include the React router DOM that would solve these problems.

Proposed solution:

According to what I discussed with my colleague Antonio and seeing how the current development is, the best option will be to click on a row, pass some parameters by URL and if those parameters are present in the URL show the table we want, handling the states to behave as we expect, taking into account that this section handles states and filters for the tables, all this should coexist with the new development.

[chantal-kelm]

Today I have been working on setting the corresponding states.

[chantal-kelm]

While this issue was being developed, it was noticed that there was an error with the policy_id when making a request to the Wazuh API. It was not clarified if it could be a problem of the Wazuh API or if the problem is of the library used to make the requests when using a value containing invalid characters. An issue will be opened, and it will be investigated whether the problem is API or library related.

An investigation was done to see if the policy_id could contain invalid characters that cause the same problem that was detected in a development.

We consulted with Core and received the following response:

Currently, no validation is done for this field beyond it being a string, at least at the core level, until it is stored in the DB. Then it is the API that queries it until it ends up in the UI, but I doubt that there are currently any restrictions in the API as well.

Surely then this field can contain characters that cause the problem you mention in the app, in that case it would be good to put a validation and know which characters should be invalid.

We will open an issue about this and continue with the topic.

On the other hand when you click on the table of the SCA card and make the redirection it is checked that the relevant states are set and that the URL is or not present a parameter, based on these states and parameter it is decided whether to display a table or another. As the redirection showed for a second a table and then finished making the check and showed another, to improve the user experience it was decided to put a loading that the user sees while behind the checks are made of parameters and states and decide which table to show, I'm currently working on the latter.

[Machi3mfl]

For testing

Check the new SCA Lastest scans table in the Agent Dashboard

1. Select Agent and go to Agent Dashboard
2. Check table style in the SCA: Lastest scans card.
3. Click on the table row and check if redirect to the SCA > Inventory to the selected policy.

Check the SCA > Inventory behavior

1. Select Agent and go to Agent Dashboard
2. Click on the SCA title in the Header navigation ( SCA > Inventory)
3. Check the Policies table is rendered on the Inventory Tab.
4. Click in the Policy Table Row and check if is redirected to the Policy Checks view

[Machi3mfl]

I added a new issue to treat and improve the current implementation: Refactor Agent SCA Inventory. This issue will be fixed with the linked Pull Request but we need the refactor to improve the code readability, reusability, and performance. (It's not a UI refactor)

[Machi3mfl]

Video showing the new design and navigation

https://user-images.githubusercontent.com/6089438/196999355-44f2b836-e1d3-481d-a4a9-f49c38575800.mp4

Video showing the SCA: Lastest scan with pagination

https://user-images.githubusercontent.com/6089438/196983300-bc77fd07-e745-47f2-9c4f-c6ccbe1dbe25.mp4