UI: add macOS and windows vulnerabilities to software pages

[sharon-fdm]

We'd like to implement the UI for macOS and Windows OS vulnerabilities to the software pages. This includes a new OS tabs that shows the os versions as well as the page to show the know vulnerabilities for these os versions. We also need to move the Versions tab into a toggle control on the software table. We also want to add host filtering of a specific OS version.

Figma

Tasks

OS tab with table

create new /software/os route and ensure the OS tab content shows when at this route implement OS tab and remove the Versions tab implement the OS table Extend Vulnerabilities Cell to support not supported value. implement URL bookmark-ability with the OS table implement empty, error, and loading states of OS table ensure the selected tab works correctly for titles, versions, and os page

Move Versions to a toggle switch instead of tab

implement a switch control on the software table call correct endpoint and pass response data into the table depending on what state this switch is in. ensure URL bookmarkability works with this new switch implement disabled state for the controls while toggling between software titles and versions data.

• add disable state to table filters while switching between software versions and titles. (NOTE: can we drop this?)

OS version page

create a new /software/os/:id route and ensure the OS version page shows when at this route Implement OS version summary UI implement OS vulnerabilities table ensure the correct columns show on the OS vulnerabilities table depending on the fleet instance tier (e.g free vs premium). implement empty, error, and loading states for OS version page implement correct view all hosts link URL into os version summery section

add new os icons

add new icons to the Software, Versions and, OS tables details pages. The new icons can be found here. We need to replace the current ones and handle the borders and border radius in CSS now.

• add new OS icons on new pages

Filter hosts by the os version

from the OS table navigate to the correct URL to filter hosts by os version.

Misc

• styling tweaks across the feature to match the figma
• ensure feature works when API is ready for integration.

[sharon-fdm]

@ghernandez345 Could you please fill in the details for this sub-task. (All frontend aspects) CC: @georgekarrv

[ghernandez345]

@sharon-fdm will do. I have a meeting with Noah tomorrow to go over the feature and the figma. I'll fill out the details then.

[ghernandez345]

@sharon-fdm I've added the tasks and my estimate to this ticket. There is still a question around the filter host by os version that I will fill in after I've talked to @mostlikelee.

[ghernandez345]

@sharon-fdm ok we sorted the details out. I'll be starting this work tomorrow.

[RachelElysia]

I'm updating the icons

[fleet-release]

New tabs show OS flaws, Secure in the glass city, Peace grows with each pause.