Add VEX Management Overview component

Author: NickChungSUSE

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

@@ -0,0 +1,64 @@
+<template>
+  <div class="badge" :class="statusClass">
+    <div v-if="status" class="text">{{ t(`imageScanner.enum.status.${status.toLowerCase()}`) }}</div>
+  </div>
+  
+</template>
+
+<script>
+import { VEX_STATUS } from "@sbombastic-image-vulnerability-scanner/types";
+export default {
+  name: 'VexStatusBadge',
+  props: {
+    status: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    statusClass() {
+      switch ((this.status || '').toLowerCase()) {
+      case VEX_STATUS.ENABLED:
+        return 'enabled';
+      case VEX_STATUS.DISABLED:
+        return 'disabled';
+      default:
+        return '';
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.badge {
+  display: inline-block;
+  padding: 1px 8px;
+  align-items: center;
+  border-radius: 30px;
+
+  &.enabled {
+    background: #DEEFDC;
+    color: #376930;
+  }
+
+  &.disabled {
+    background: #DE2136;
+    color: #FFFFFF;
+  }
+
+  .text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: Lato;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 19px;
+  }
+}
+</style>

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

@@ -39,6 +39,19 @@ export function init($plugin: IPlugin, store: any) {
     },
   });
 
+  virtualType({
+    labelKey: 'imageScanner.vexManagement.title',
+    name: PAGE.VEX_MANAGEMENT,
+    namespaced: false,
+    route:    {
+        name:   `c-cluster-${PRODUCT_NAME}-${PAGE.VEX_MANAGEMENT}`,
+        params: {
+            product: PRODUCT_NAME
+        },
+        meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME }
+    }
+  });
+
   virtualType({
     label: "Components Demo",
     name: "demo",
@@ -55,6 +68,8 @@ export function init($plugin: IPlugin, store: any) {
     basicType([
         PAGE.IMAGE_OVERVIEW,
         PAGE.VULNERABILITY_OVERVIEW,
+        PAGE.VEX_MANAGEMENT,
+        "demo"
     ]);
 
     basicType([RESOURCE.REGISTRY], 'Advanced');

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

@@ -103,3 +103,42 @@ export const REGISTRY_SCAN_HISTORY_TABLE = [
     sort: "errors",
   },
 ];
+
+export const VEX_MANAGEMENT_TABLE = [
+    {
+        name:          "_status",
+        labelKey:      "imageScanner.vexManagement.table.headers.status",
+        value:         "_status",
+        getValue:      (row: any) => row._status,
+        formatter:     "VexStatusCellBadge",
+        sort:          "_status",
+    },
+    {
+        name:          "name",
+        labelKey:      "imageScanner.vexManagement.table.headers.name",
+        value:         "name",
+        formatter:     "VexNameLink",
+        sort:          "name",
+    },
+    {
+        name:          "uri",
+        labelKey:      "imageScanner.vexManagement.table.headers.uri",
+        value:         "uri",
+        formatter:     "UriExternalLink",
+        sort:          "uri",
+    },
+    {
+        name:          "createdBy",
+        labelKey:      "imageScanner.vexManagement.table.headers.createdBy",
+        value:         "createdBy",
+        sort:          "createdBy",
+    },
+    {
+        name:          "updated",
+        labelKey:      "imageScanner.vexManagement.table.headers.updated",
+        value:         "updated",
+        getValue:      (row: any) => row.updated,
+        formatter:     "VexDateFormatter",
+        sort:          "updated",
+    }
+];

pkg/sbombastic-image-vulnerability-scanner/formatters/UriExternalLink.vue

@@ -0,0 +1,22 @@
+<script>
+export default {
+  name: 'UriExternalLink',
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+};
+</script>
+
+<template>
+  <a class="uri-link" :href="value" target="_blank" rel="noopener noreferrer">
+    {{ value }}
+    <i class="icon icon-external-link"></i>
+  </a>
+</template>

pkg/sbombastic-image-vulnerability-scanner/formatters/VexDateFormatter.vue

@@ -0,0 +1,33 @@
+<template>
+  <span>{{ formattedDate }}</span>
+</template>
+
+<script>
+export default {
+  name: 'VexDateFormatter',
+  props: {
+    value: {
+      type: [String, Date],
+      required: true
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    formattedDate() {
+      const date = new Date(this.value);
+      const options = {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+        hour12: true
+      };
+      return date.toLocaleString('en-US', options);
+    }
+  }
+};
+</script>

pkg/sbombastic-image-vulnerability-scanner/formatters/VexNameLink.vue

@@ -0,0 +1,19 @@
+<script>
+export default {
+  name: 'VexNameLink',
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    row: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<template>
+  <RouterLink :to="`/c/${$route.params.cluster}/imageScanner/vex_management/${row.id}`">{{ value }}</RouterLink>
+</template>

pkg/sbombastic-image-vulnerability-scanner/formatters/VexStatusCellBadge.vue

@@ -0,0 +1,18 @@
+<script>
+import VexStatusBadge from "@sbombastic-image-vulnerability-scanner/components/common/VexStatusBadge.vue";
+export default {
+  components: {
+    VexStatusBadge,
+  },
+  props: {
+    value: {
+      type:    String,
+      required: true
+    },
+  },
+};
+</script>
+
+<template>
+  <VexStatusBadge :status="value.toLowerCase()" />
+</template>

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

@@ -83,6 +83,27 @@ imageScanner:
         registry: Registry
   vulnerabilities:
     title: Vulnerabilities
+  vexManagement:
+    title: VEX management
+    description: Configure the security scanner to use up-to-date VEX reports. This will prioritize remediation efforts, focusing on vulnerabilities that are confirmed to be exploitable and reducing the noise coming from false positives.
+    button:
+      create: Create
+    buttons:
+      enable: Enable
+      disable: Disable
+      delete: Delete
+    actions:
+      clone: Clone
+      editConfig: Edit configuration
+      editYaml: Edit YAML
+    table:
+      headers:
+        status: Status
+        name: Name
+        uri: URI
+        createdBy: Created by
+        updated: Updated
+        actions: Actions
   enum:
     cve:
       critical: Critical
@@ -96,6 +117,8 @@ imageScanner:
       inprogress: In progress
       complete: Complete
       failed: Failed
+      enabled: Enabled
+      disabled: Disabled
     prevScan:
       none: n/a
       scheduled: Scheduled