## Problem to Solve The App Sec Engineer needs to quickly see their current vulnerability count by severity without navigating through multiple screens or applying filters. ## Scope ### In Scope Filters * Panel-level * None * Page-level inherited filters * Filter by Report type * Filter by Project Interactions 1. TBD ### Out Of Scope - Business Context - Organization-level - Filtering by Scanner ## Designs  Resource: https://gitlab.com/gitlab-org/gitlab/-/issues/521639 ## Outstanding Questions <table> <tr> <th>Question</th> <th>Answer</th> <th>Assignee</th> <th>Priority</th> <th>Blocking?</th> </tr> <tr> <td> The design issue indicates clicking will "enforce severity filters". Is this bar essential a top level filter with a different UI? If so, is there a selected state. </td> <td> Clicking `View` in this panel should link to and enforce that severity filter **on the Vulnerability Report** </td> <td> @beckalippert </td> <td></td> <td></td> </tr> <tr> <td>The design issue attachment has "view" links. Will clicking those initiate the action above, or navigate to the vulnerability report?</td> <td>See above :) </td> <td> @beckalippert </td> <td></td> <td></td> </tr> <tr> <td> When clicking on the "view" link we want to open the related group's vulnerability report and apply the severity that was clicked as a filter. Do we want to provide these links from the ~backend so we have a SSOT? If yes, how should we approach this? </td> <td></td> <td> @charlieeekroon @subashis @dpisek </td> <td></td> <td></td> </tr> <tr> <td>We intend to add links/clickable items to the chart's pop-overs. However, the pop-over's default behaviour is to follow the cursor, which makes it impossible to click anything inside. We need to investigate how this can be configured (on an eCharts level), so it fits our needs.</td> <td></td> <td> @lorenzvanherwaarden @dpisek </td> <td></td> <td></td> </tr> </table> ## Query Sample ##### Sample Query: ```graphql query getTotalVulnerabilitiesBySeverity( $fullPath: ID!, $projectId: [ID!], $reportType: [VulnerabilityReportType!], $startDate: ISO8601Date!, # optional + experimental $endDate: ISO8601Date! # optional + experimental ) { group(fullPath: $fullPath) { id name securityMetrics( projectId: $projectId, reportType: $reportType ) { openVulnerabilitiesPerSeverity( startDate: $startDate, # optional + experimental endDate: $endDate # optional + experimental ) { critical high medium low info unknown } } } } ``` ##### Example input ```graphql { "fullPath": "gitlab-org", "projectId": [ "gid://gitlab/Project/25", "gid://gitlab/Project/42" ], "reportType": ["SAST", "DEPENDENCY_SCANNING"], "startDate": "2025-06-19T00:00:00Z", "endDate": "2025-06-19T23:59:59Z" } ``` ##### Example output ```graphql { "data": { "group": { "id": "gid://gitlab/Group/9970", "name": "GitLab.org", "securityMetrics": { "openVulnerabilitiesPerSeverity": { "critical": 12, "high": 45, "medium": 128, "low": 67, "info": 23, "unknown": 3 } } } } } ``` ## Dependencies ## Functional Requirements ### Page Level Support * [ ] Project * [x] Group * [ ] Pipeline \> Security (findings) * [ ] MR Security Widget (findings) * [ ] Security Center * [x] Security Dashboard ### Workflow * [ ] Requires an additional filter on the Vulnerability Report ([docs](https://docs.gitlab.com/development/internal_analytics/internal_event_instrumentation/quick_start/)) * [ ] Requires an addition to the Vulnerability Report export ([docs](https://docs.gitlab.com/user/application_security/vulnerability_report/#exporting)) * [ ] Requires an additional filter on the Dependency List ([docs](https://docs.gitlab.com/user/application_security/dependency_list/)) * [ ] Requires an addition to the Dependency List export ([docs](https://docs.gitlab.com/user/application_security/dependency_list/#export)) * [ ] Requires ~documentation ## Non-Functional Requirements ### Product Usage * [ ] Requires new instrumentation ([docs](https://docs.gitlab.com/development/internal_analytics/internal_event_instrumentation/quick_start/)) ### Feature Flag Usage * [x] This feature should be released behind a feature flag? ([docs](https://handbook.gitlab.com/handbook/product-development/product-development-flow/feature-flag-lifecycle/#when-to-use-feature-flags)) - Yes ### Testing * [ ] Requires new E2E test coverage ([docs](https://docs.gitlab.com/development/testing_guide/end_to_end/)) * [ ] Requires extended manual / UAT phase * [ ] Performance testing needed ([testing](https://docs.gitlab.com/ci/testing/load_performance_testing/)) ## Resources 1. [Epic Board](Milestone) showing issues across workflow stages. 2. Documentation links 3. Prior work/projects ## Planning Breakdown / Implementation Plan | Type | Description | Issue | BE/FE | Dependency | Milestone | |------|-------------|-------|-------|------------|-----------| | ~"type::feature" | Add new field to `Group.securityMetrics` to provide default data (potentially serving mock data to unblock the ~frontend) | | ~backend | - | | | ~"type::feature" | Pull data into resolver via actual finder | | ~backend | - | | | ~"type::feature" | Create new Vue component to display the chart (including storybook entry) | | ~frontend | - | | | ~"type::feature" | Add links to vulnerability report with filters applied | | ~frontend | - | GraphQL field available on BE | | ~"type::feature" | Add new panel to integrate chart component with the new dashboard | | ~frontend | - | | | ~"type::feature" | Query chart-data via GraphQL (including any necessary transformations) | | ~frontend | GraphQL field available on BE | | | ~"type::feature" | Integrate new panel with page-level filter: report type | | ~frontend | - | GraphQL argument available on added field | | ~"type::feature" | Integrate new panel with page-level filter: project | | ~frontend | - | GraphQL argument available on added field |