Skip to content

Simplify vulnerability report component structure (dashboard components)

There are 3 types of vulnerability reports: project level, group level, and instance level:

Project level Group level Instance level
ksnip_20210114-020743 ksnip_20210114-020829 ksnip_20210114-021043

Currently, each report uses a specific root-level dashboard component, a specific component that fetches vulnerability data and sets up some properties, and finally a common vulnerability list component used by all 3:

test__1_

There's a lot of overlap between the files in the top two layers. Because these dashboards look and behave almost exactly the same and differ only in what level of vulnerabilities are shown, we should combine them into one common component and use props to configure what is shown. Otherwise, any work that needs to be done in one of the components will need to be duplicated across the other two, for example this MR where the same watch() block needed to be copied 3 times.

Implementation plan

  • Combine the 3 dashboard components into one common component.
  • Combine the 3 setup components into one common component.
  • If possible, combine the common dashboard component into the common setup component.
  • If possible, combine everything into vulnerability_list.vue.

Note that it may be possible to merge all 6 components in the top two layers into the already-existing vulnerability_list.vue component, then use props to pass in the correct GraphQL query and show/hide the counts.

Edited by Savas Vedova