Show security reports summary in pipelines' Security Dashboard - Frontend

Implement the frontend work for #197115 (closed)

Design

Specs: link

Requirements

• backend exposes an endpoint (GraphQL) to fetch the summary for each enabled report types. Based on that data, the frontend should:
  • Display the vulnerabilities count next to the corresponding report type in the Report type filter.
  • Display the scanned resources count next to the DAST option in the filter.
  • [-] Disable report type options that aren't provided by the endpoint as those are considered not configured.

GraphQL query example

query{
  project(fullPath: "root/railsgoat-dast-test"){
    pipelines(id: 137){
      nodes{
        securityReportSummary{
          dast{
            scannedResourcesCount
            vulnerabilitiesCount
          }
          sast{
            vulnerabilitiesCount
          }
          containerScanning{
            vulnerabilitiesCount
          }
          dependencyScanning{
            vulnerabilitiesCount
          }
        }
      }
    }
  }
}

Documentation

• Might require updating screenshots to showcase the counters in filter dropdowns

Availability & Testing

• Disables filter options for non configured report.
• Shows additional information next to report types.

What does success look like, and how can we measure that?

The reports summary is properly rendered in the filters.

Links / references

• backend issue: #214388 (closed)
• Parent issue: Show the list of resources scanned by DAST in pipelines' security dashboard
• Original issue: Show the list of resources scanned by DAST