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 |
---|---|---|
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:
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.