[SPIKE] Investigate tool filter grouping by report type

This is a spike to investigate the implementation plan for this issue > #341465 (closed)

🏛️ Current

Project Vulnerability Report

With Vendors:
image image image

Without Vendors:

It is using the GlCollapsibleListbox component.

🎨 Design

Current Proposal ✨

_Here is a link to see how the project tool filter dropdown currently behaves > _https://gitlab.com/gitlab-examples/security/security-reports/-/security/vulnerability_report/

image

Note: if the vendor is GitLab, it's not included (which is how it behaves currently)

Format:

[scanner.report_type]
  [scanner.name] [scanner.vendor]

// example
SAST
  ESLint (SamScan)
Sample Data

The discussion on data can be found here > #421575 (comment 1525112161)

[
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/28252",
    "externalId": "bundler_audit",
    "name": "bundler-audit",
    "vendor": "GitLab",
    "reportType": "DEPENDENCY_SCANNING"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/1647",
    "externalId": "clair",
    "name": "Clair",
    "vendor": "GitLab",
    "reportType": "CONTAINER_SCANNING"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/28256",
    "externalId": "eslint",
    "name": "ESLint",
    "vendor": "GitLab",
    "reportType": "SAST"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/1",
    "externalId": "find_sec_bugs",
    "name": "Find Security Bugs",
    "vendor": "GitLab",
    "reportType": "SAST"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/2022",
    "externalId": "gemnasium",
    "name": "Gemnasium",
    "vendor": "GitLab",
    "reportType": "DEPENDENCY_SCANNING"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/69594",
    "externalId": "gitlab-api-fuzzing",
    "name": "GitLab API Fuzzing",
    "vendor": "GitLab",
    "reportType": "API_FUZZING"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/3331059",
    "externalId": "gitlab-manual-vulnerability-report",
    "name": "manually-created-vulnerability",
    "vendor": "GitLab",
    "reportType": "GENERIC"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/28253",
    "externalId": "gitleaks",
    "name": "Gitleaks",
    "vendor": "GitLab",
    "reportType": "SECRET_DETECTION"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/24812",
    "externalId": "klar",
    "name": "klar",
    "vendor": "GitLab",
    "reportType": "CONTAINER_SCANNING"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/50456",
    "externalId": "libfuzzer",
    "name": "libfuzzer",
    "vendor": "GitLab",
    "reportType": "COVERAGE_FUZZING"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/3556068",
    "externalId": "my_custom_scanner",
    "name": "A Custom Scanner",
    "vendor": "SamScan",
    "reportType": "SAST"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/28255",
    "externalId": "pmd-apex",
    "name": "PMD.Apex",
    "vendor": "GitLab",
    "reportType": "SAST"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/28257",
    "externalId": "sobelow",
    "name": "Sobelow",
    "vendor": "GitLab",
    "reportType": "SAST"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/740462",
    "externalId": "starboard",
    "name": "Starboard",
    "vendor": "GitLab",
    "reportType": "CLUSTER_IMAGE_SCANNING"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/475849",
    "externalId": "thiago",
    "name": "Thiago",
    "vendor": "GitLab",
    "reportType": "GENERIC"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/740463",
    "externalId": "trivy",
    "name": "Trivy",
    "vendor": "GitLab",
    "reportType": "CONTAINER_SCANNING"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/28254",
    "externalId": "trufflehog",
    "name": "TruffleHog",
    "vendor": "GitLab",
    "reportType": "SECRET_DETECTION"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/28258",
    "externalId": "tslint",
    "name": "TSLint",
    "vendor": "GitLab",
    "reportType": "SAST"
  },
  {
    "id": "gid://gitlab/Representation::VulnerabilityScannerEntry/28259",
    "externalId": "zaproxy",
    "name": "OWASP Zed Attack Proxy (ZAP)",
    "vendor": "GitLab",
    "reportType": "DAST"
  }
]
These were the suggestions that were considered

A: #341465 (comment 872841872)

SAST
  - ESLint
  - ESLint - Custom Vendor
Dependency Scanning
  - Gemnasium
  - Gemnasium - Custom Vendor
DAST
  - OWASP Zed Attack Proxy

(Checked Status)

✓ SAST
  ✓ ESLint
  ✓ ESLint - Custom Vendor
Dependency Scanning
  - Gemnasium
  ✓ Gemnasium - Custom Vendor
DAST
  ✓ OWASP Zed Attack Proxy

B: #341465 (comment 1025850746)

Container Scanning
--Trivy-GL (GitLab)
--Trivy (Aquasecurity)
--Grype-GL (GitLab)
--Grype (Anchore)

DAST
--DAST (GitLab)

C: #341465 (comment 1030310101)

All
——————————
GitLab
   SAST
      Scanner 1
      Scanner 2
   DAST
      Scanner 1
      Scanner 2
   Coverage Fuzzing
——————————
Vendor A
   SAST
      Vendor A's Branded Name
——————————
Vendor B
   DAST
   API Fuzzing

D: #341465 (comment 1033140291)

All  
——————————  
**GitLab**  
   SAST  
      VET
   SAST  
      Semgrep
   Coverage Fuzzing  
——————————  
**Semgrep**  
   SAST  
      Semgrep-NextGen

🏗️ Implementation Plan

After some discussion, a frontend only solution is possible for this iteration ✅

Here is a high-level overview of the work required.

frontend Estimated Weight
Feature Flag 1
Expose additional scanner data in HAML 1
Update the UI of the project tool dropdown 2
Ensure the dropdown selection function as expected 4
Add search to dropdown Stretch 3

A more detailed implementation steps can be found in this comment

⏳ Estimated Completion Time

Based on the projection, we can anticipate this feature can be completed within 1-2 milestones. Most likely 1, but giving an extra milestone for possible unforeseen circumstances.

A more detailed implementation steps can be found in this comment

Note

Exclude Group and Instance filter dropdown

In this iteration, we will be excluding the tool filter at the Group and Security Control (Instance) level.

There are a lot of concerns, one of them being the performance of loading the many scanners. Please see this thread > #422143 (comment 1522952389). Due to this, scanners are being removed on the Group and Instance level > !130059 (merged)

We can explore addressing the concerns in a separate epic.

Improving Dropdown UI/UX

There are currently limitations with the GlCollapsibleListbox component. To keep things simple, we will work around its current capabilities. In future iterations, we can explore adding more functionalities to this component at the gitlab-ui level.

Example:

Dropdown Group Header Action
image image
issue tba gitlab-ui#2303 (moved)
Edited by Samantha Ming