Create a reusable vulnerability report component
Currently, the vulnerability report is hard-coded to only handle the project
, group
, instance
, and pipeline
findings. We have upcoming work to show the vulnerability report in a number of new places, and it's becoming impractical to hard-code in every new type. We should rework the vulnerability report so that it's reusable and flexible. In general, we need the following:
- Support for different filters that can be passed in:
<vulnerability-report>
<template #filters>
<!-- your custom filters here -->
- Support custom header and footer content:
<vulnerability-report>
<template #header>
<!-- your custom header here -->
</template>
<template #footer>
<!-- your custom footer here -->
</template>
- Support passing in vulnerability data:
<vulnerability-report :vulnerabilities="vulnerabilities">
Implementation Plan
-
Create a new vulnerability_report.vue
component that's reusable. The current one does something like this:
<vulnerability-report>
<filters />
<group-vulnerabilities v-if="isGroup" :filters="filters" />
<instance-vulnerabilities v-else-if="isInstance" :filters="filters" />
<project-vulnerabilities v-else-if="isProject" :filters="filters" />
<pipeline-findings v-else-if="isPipeline" :filters="filters" />
</vulnerability-report>
but this isn't very flexible because to add a new report type, we need to create a new component and add it to the if
/else
list. Thew new component should be used by the <xyz-vulnerabilities>
components so that it's something like this instead:
<group-vulnerabilities>
<vulnerability-report :vulnerabilities="vulnerabilities">
<template #filters>...</template>
</vulnerability-report>
</group-vulnerabilities>
-
Add template slots for header, footer, and filter content to vulnerability_report.vue
:
<vulnerability-report>
<template #filters></template>
<template #header></template>
<template #footer></template>
</vulnerability-report>
-
Remove ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report_layout.vue
and combine it intoee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report.vue
. At one point there was a good reason to have a separate layout component, but nowadays it's only used to make the filters sticky, which we can do directly insidevulnerability_report.vue
instead of needing a separate component for it.
Edited by Daniel Tian