Vulnerability inventory rework

[asteriscos]

Hi team,

this PR removes Vulnerability dashboard, adds visualizations to Vulnerability inventory and enhances Details Flyout fields.

Changes

UI

• Removed Dashboard tab of Vulnerabilities module.
  • Removed definitions of visualizations
  • Removed the dashboard layouts: agent and overview (no selected agent)
• Added 3 new panels to Vulnerabilities/Inventory:
  • Severity: visualization
  • Details: stats
  • Summary: visualization with selector by field
• Added new fields to the flyout with the details of vulnerability:
  • condition
  • external_references
  • published
  • title
  • updated
• Added a new field data.vulnerability.status to the table of Vulnerabilites/Events

Logic

• Refactorized the methods to get the data.

React components

• Refactorized the donut visualization of Compliance panel in the agent summary dashbaord to reusable components.
• Added VisualizationBasic, VisualizationBasicWidget and VisualizationBasicSelector components.

React hooks

• Added useAsyncActionRunOnStart hook.

Screenshots

Closes #3883 and #3890

Test

Modules/Vulnerabilites

• The initial tab should be Inventory.
• The Dashboard tab was removed.

Modules/Vulnerabilities/Inventory

• With no vulnerabilities in an agent:
  • Severity panel:
    • display No results message
  • Details` panel:
    • severity levels sorted by Critical, High, Medium and Low from left to right
    • last full scan and last partial scan stats display as -.
  • Summary panel:
    • display No results message
• With vulnerabilities in an agent:
  • Severity panel:
    • severity levels sorted by Critical, High, Medium and Low
  • Details` panel:
    • severity levels sorted by Critical, High, Medium and Low from left to right
    • last full scan and last partial scan stats' format depends on the plugin platform date format.
  • Summary panel:
    • display selector
    • changing the selected field should fetch data, displaying a loading status, and renders the visualization with the new data
  • Severity levels in the visualization of Severity panel and Details should match their colors.
• Select another agent, should fetch the data corresponding to the selected agent, displaying the loading status, and renders the result depending on if there is data or not.
• Visualization behavior:
  • Hover the donut chart should display a tooltip. The tooltip has the label of data and its color.
  • Click in some label of legend, should add the corresponding filter to the table.
• Stats behavior:
  • Click in some stat, should add the corresponding filter to the table.

Modules/Inventory/Events

• A new column should appear, data.vulnerability.status

Side effects

• Check the visualization of Compliance in the agent summary section work as expected.
  • Changing the selected option, should fetch new data displaying the loading status and renders the results with the visualization or a No results prompt.
• Resize the browser window, the Compliancepanel should adjust to the layout depending on the window width.

Theme mode

• Check the UI for the new elements in light and dark mode.

[Desvelao]

review:
Testing ❌
I found some problems:

• when accessing the Vulnerabilities module.
  

• Multiple tooltips.
  
  I think we could check if a tooltip exists and remove it when the component is going to be unmounted.

• Agents summary dashboard (side effects)
  
  

[yenienserrano]

Test: ✔️

[Desvelao]

Fixed:

review: Testing x I found some problems:

• when accessing the Vulnerabilities module.
  
• Multiple tooltips.
  
  I think we could check if a tooltip exists and remove it when the component is going to be unmounted.

Not fixed. We will take in account this problem.

• Agents summary dashboard (side effects)
  
  

[github-actions]

Jest Test Coverage	%	values
Statements	4.04%	( 1476 / 36540 )
Branches	1.61%	( 459 / 28467 )
Functions	2.98%	( 266 / 8932 )
Lines	4.09%	( 1428 / 34932 )