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:

  1. Support for different filters that can be passed in:
<vulnerability-report>
  <template #filters>
    <!-- your custom filters here -->
  1. Support custom header and footer content:
<vulnerability-report>
  <template #header>
    <!-- your custom header here -->
  </template>
  <template #footer>
    <!-- your custom footer here -->
  </template>
  1. 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 into ee/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 inside vulnerability_report.vue instead of needing a separate component for it.
Edited by Daniel Tian