Image Overview page with mockdata

Author: xingzhang-suse

pkg/sbombastic-image-vulnerability-scanner/components/ImageRiskAssessment.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="chart-section">
         <div class="title">
-            {{ t('imageScanner.images.imageBySeverityChart.title') }}
+            {{ t('imageScanner.images.imageRiskAssessment.title') }}
         </div>
         <div class="severity-bar-chart">
-            <BarChart :chartData="chartData" colorPrefix="cve" :description="t('imageScanner.images.imageBySeverityChart.subTitle')" />
+            <BarChart :chartData="chartData" colorPrefix="cve" :description="t('imageScanner.images.imageRiskAssessment.subTitle')" />
         </div>
     </div>
 </template>

pkg/sbombastic-image-vulnerability-scanner/components/TopRiskyImagesChart.vue

@@ -4,8 +4,8 @@
         Most affected images at risk
     </div>
     <div class="image-record" v-for="image in topRiskyImages">
-        <div class="image-name">{{ image.image_name }}</div>
-        <AmountBarBySeverity class="image-cve" :cveAmount="image.cve_cnt"/>
+        <div class="image-name">{{ image.imageName }}</div>
+        <AmountBarBySeverity class="image-cve" :cveAmount="image.cveCnt"/>
     </div>
   </div>
 </template>

pkg/sbombastic-image-vulnerability-scanner/components/common/DownloadCustomReport.vue

@@ -0,0 +1,34 @@
+<template>
+  <button
+    class="btn role-primary"
+    :disabled="!(selectedRows && selectedRows.length)"
+    @click="downloadFn()"
+>
+    <i class="icon icon-download"></i>
+    {{ buttonName }}
+  </button>
+</template>
+
+<script>
+
+export default {
+  name: 'scanButton',
+  props: {
+    selectedRows: {
+      type: Array,
+      default: () => []
+    },
+    buttonName: {
+      type: String,
+      default: () => []
+    },
+    downloadFn: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  methods: {
+   
+  },
+}
+</script>

pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts

@@ -145,3 +145,88 @@ export const VEX_MANAGEMENT_TABLE = [
     sort: "metadata.creationTimestamp",
   },
 ];
+
+export const IMAGE_LIST_TABLE = [
+  {
+    name: "name",
+    labelKey: "imageScanner.images.listTable.headers.imageName",
+    value: "metadata.name",
+    formatter: "ImageNameCell",
+    sort: "metadata.name",
+  },
+  {
+    name: "cves",
+    labelKey: "imageScanner.images.listTable.headers.identifiedCVEs",
+    value: "spec.scanResult",
+    formatter: "IdentifiedCVEsCell",
+    sort: "spec.scanResult",
+    width: 300,
+  },
+  {
+    name: "repository",
+    labelKey: "imageScanner.images.listTable.headers.repository",
+    value: "spec.repository",
+    sort: "spec..repository",
+  },
+  {
+    name: "registry",
+    labelKey: "imageScanner.images.listTable.headers.registry",
+    value: "spec.registry",
+    sort: "spec.registry",
+  }
+];
+
+export const REPO_BASED_TABLE = [
+  {
+    name: "repository",
+    labelKey: "imageScanner.images.listTable.headers.repository",
+    value: "repository",
+    sort: "repository",
+    width: 200,
+  },
+  {
+    name: "cves",
+    labelKey: "imageScanner.images.listTable.headers.vulnerabilities",
+    value: "cveCntByRepo",
+    formatter: "IdentifiedCVEsPercentageCell",
+    sort: "cveCntByRepo",
+    width: 300,
+  },
+  {
+    name: "registry",
+    labelKey: "imageScanner.images.listTable.headers.registry",
+    value: "registry",
+    sort: "registry",
+    width: 450,
+  },
+];
+
+export const REPO_BASED_IMAGE_LIST_TABLE = [
+  {
+    name: "",
+    value: "",
+    sort: "",
+    width: 60,
+  },
+  {
+    name: "image",
+    labelKey: "imageScanner.images.listTable.headers.imageName",
+    formatter: "ImageNameCell",
+    sort: "metadata.name",
+    width: 200,
+  },
+  {
+    name: "cves",
+    labelKey: "imageScanner.images.listTable.headers.identifiedCVEs",
+    value: "scanResult",
+    formatter: "IdentifiedCVEsCell",
+    sort: "imageScanner",
+    width: 310,
+  },
+  {
+    name: "",
+    value: "",
+    sort: "",
+    width: 450,
+  },
+];