Summary

This task focuses on creating the first component in the Coverage tab of the SIEM Readiness page.
The component is a card displaying a donut chart that visualizes all enabled detection rules, divided into two parts:

• Enabled rules with an installed integration or data source
• Enabled rules with a missing integration or data source

Details

• Prompt states - full flow in Figma
• The donut chart should show the ratio between the two rule groups.
• Each segment should include a link that navigates to the Integrations page, ideally pre-filtered to show only the relevant integrations for that segment.
• Include a short description or label summarizing the rule coverage state.
• The full user flow, visuals, and interactions should follow the Figma design.

Out of scope

• Case creation or case view functionality.

How to test

• Install Elastic Rules (SIEM Detection rules)
• Enable all the installed Rules, then check the Coverage Tabs All Rule section, the graph and rule count should be updated there
• Click on View Installed Integration button, user should be able to see all Installed integration and clicking on any of the choice will redirect user to Integration page for that Integration
• Click on View Missing Integration button, user should be able to see all missing integration and clicking on any of the choice will redirect user to Integration page for that Integration. After installing that integration the count the graph and rule count should be updated

References

• 🎨 Figma
• 🗣️ [Discuss] Logic for categorizing Non-Elastic Integration Logs
• 📘 [Epic] SIEM Readiness - Visibility- Log Coverage against Categories
• 🏁 [Epic] SIEM Readiness View - Milestone 1 MVP