feat(vulnerabilities): Add Vulnerabilities overview action buttons and dropdown

Author: rushk014

pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml

@@ -77,7 +77,7 @@ imageScanner:
       image:
         allImages: All images
         excludeBaseImages: Exclude base images
-        includeBaseImages: Include base images
+        includeBaseImages: Include base images only
       cve:
         allCves: All identified CVEs
         affectingCvesOnly: Affecting CVEs only

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue

@@ -1,7 +1,23 @@
 <template>
   <div class="page">
     <div class="header-section">
-        <h1>Vulnerabilities</h1>
+      <div class="title">
+        {{ t("imageScanner.vulnerabilities.title") }}
+      </div>
+      <div class="filter-dropdown">
+        <LabeledSelect
+          v-model:value="selectedImageFilter"
+          :options="filterImageOptions"
+          :close-on-select="true"
+          :multiple="false"
+        />
+      </div>
+      <div>
+        <button class="btn role-primary">
+          <i class="icon icon-download"></i>
+          {{ t('imageScanner.images.downloadReport') }}
+        </button>
+      </div>
     </div>
     <div class="summary-section">
       <TopSevereVulnerabilitiesChart 
@@ -21,15 +37,27 @@
         :headers="VULNERABILITIES_TABLE"
         :key-field="'id'"
         @selection="onSelectionChange"
-      />
+      >
+        <template #header-left>
+          <div class="table-top-left">
+            <DownloadCustomReport
+              class="table-btn" 
+              :selectedRows="selectedRows"
+              :buttonName="t('imageScanner.images.buttons.downloadCustomReport')"
+            />
+          </div>
+        </template>
+      </SortableTable>
     </div>
   </div>
 </template>
 
 <script>
   import SortableTable from '@shell/components/SortableTable';
-  import SeverityDistribution from '@sbombastic-image-vulnerability-scanner/components/SeverityDistribution.vue';
-  import TopSevereVulnerabilitiesChart from '@sbombastic-image-vulnerability-scanner/components/TopSevereVulnerabilitiesChart.vue';
+  import LabeledSelect from "@shell/components/form/LabeledSelect";
+  import SeverityDistribution from '@sbombastic-image-vulnerability-scanner/components/SeverityDistribution';
+  import TopSevereVulnerabilitiesChart from '@sbombastic-image-vulnerability-scanner/components/TopSevereVulnerabilitiesChart';
+  import DownloadCustomReport from '@sbombastic-image-vulnerability-scanner/components/common/DownloadCustomReport';
   import { VULNERABILITIES_TABLE } from '@sbombastic-image-vulnerability-scanner/config/table-headers';
   import { severityDistribution, cves } from '@sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.vulnerability';
 
@@ -38,15 +66,24 @@
     components: {
       SeverityDistribution,
       TopSevereVulnerabilitiesChart,
+      DownloadCustomReport,
       SortableTable,
+      LabeledSelect,
     },
     data() {
+      const filterImageOptions = [
+        this.t('imageScanner.images.filters.image.allImages'),
+        this.t('imageScanner.images.filters.image.excludeBaseImages'),
+        this.t('imageScanner.images.filters.image.includeBaseImages')
+      ];
       return {
         VULNERABILITIES_TABLE,
         severityDistribution: null,
         topSevereVulnerabilities: [],
         vulnerabilities: [],
         selectedRows: [],
+        filterImageOptions,
+        selectedImageFilter: filterImageOptions[0],
       };
     },
     async fetch() {
@@ -87,6 +124,27 @@
     align-items: flex-start;
     gap: 24px;
     align-self: stretch;
+
+    .title {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      gap: 4px;
+      flex: 1 0 0;
+      color: #141419;
+      font-family: Lato;
+      font-size: 24px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 32px; /* 133.333% */
+    }
+
+    .filter-dropdown {
+      display: flex;
+      width: 225px;
+      height: 40px;
+    }
   }
 
   .summary-section {