Skip to content

[Design] Convert the pipeline security tab to use GraphQL

Summary

Update the pipeline security tab to use GraphQL & other shared UI components used on the project, group, & instance level vulnerability reports.

Improvements

The pipeline security tab looks the same as the project/group/Security Center vulnerability reports, but it is implemented using entirely different code/endpoints.

Risks

If we do not implement the changes correctly, the pipeline security tab could not work as expected If we have to modify some of the shared components of the vulnerability reports and we do not test it properly, then the vulnerability reports may not work as expected

Key Differences

The Project Vulnerability Report has a new pipeline health status widget. This does not make sense on the Pipeline security tab. However, the Pipeline security tab has scanner-specific information (such as number of DAST URLs scanned) unique to this view. We need to preserve these features on the respective pages.

Involved components

The pipeline security tab currently uses the following components

  • Frontend
    • ee/app/assets/javascripts/security_dashboard/pipeline_init.js
    • ee/app/assets/javascripts/security_dashboard/components/pipeline_security_dashboard.vue
    • ee/app/assets/javascripts/security_dashboard/components/security_dashboard_vuex.vue
    • ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table.vue
    • ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table_row.vue
    • ee/app/assets/javascripts/security_dashboard/components/selection_summary_vuex.vue
    • ee/app/assets/javascripts/vulnerabilities/components/vulnerability_list.vue
    • ee/app/assets/javascripts/security_dashboard/components/vulnerability_count_list_vuex.vue
  • Backend
    • Currently unknown. Does the GraphQL query for vulnerabilities support getting pipeline-level vulnerabilities? I do not believe it does.

Intended side effects

  • Greater UI consistency as the instance, group, project AND pipeline security centers will all be implemented with the same code
  • Faster development speed for features that will go on the vulnerability reports and the pipeline security tab: With many new improvements coming to the vulnerability reports, we will want some of these improvements on the pipeline security tab as well; if we do, without this update, we will have to do twice the work. This has already happened in #210327 (closed), where two endpoints and UIs needed to be updated to add new columns to the pipeline security tab and the project-level vulnerability reports.
  • Less files: #223189 (closed) aims to remove many unused Vuex files due to the conversion of the security dashboards to GraphQL, but the pipeline security tab still uses many Vuex files; this conversion would allow us to remove many more Vuex files once completed.

Implementation Plan

  • frontend: update vulnerability_list.vue to support conditionally showing the actions column the pipeline security tab currently has (the column the modal can be expanded from)
  • frontend: replace the usage of the security_dashboard_vuex.vue component in pipeline_security_dashboard.vue with an implementation similar to all the first_class_*_security_dashboard.vue files. out of date
  • frontend: clean up/remove all unused files

Related to #223189 (closed)

Edited by Daniel Tian