fix: severit grouping

src/components/DataTable.vue

@@ -45,7 +45,7 @@
       :v-model:expanded.sync="expanded"
     >
       <template v-slot:expanded-row="{ columns, item }">
-        <td :colspan="columns.length">
+        <td :colspan="columns.length" class="px-5 py-2">
           <h3>{{ item.Title }}</h3>
           <p>{{ item.Description }}</p>
           <p>
@@ -112,12 +112,23 @@ const ignoredCves = computed(() => {
 const vulnerabilityStats = computed(() => {
   const total = props.selectedVulnerabilities.length
   const fixable = props.selectedVulnerabilities.filter(
-    (v) => v.Severity === "Fixable",
+    (vulnerabilities) => vulnerabilities.FixedVersion != undefined,
   ).length
-  const severityInformation: VulnerabilitySeverityInformation[] = []
 
-  // Add logic to populate severityInformation
+  const vulnerabilitySeverityTypes: string[] = [
+    ...new Set(props.selectedVulnerabilities.map((item) => item.Severity)),
+  ]
 
+  const severityInformation = vulnerabilitySeverityTypes
+    .map((severity) => {
+      return {
+        severity,
+        count: props.selectedVulnerabilities.filter(
+          (vulnerabilities) => vulnerabilities.Severity === severity,
+        ).length,
+      }
+    })
+    .sort((a, b) => compareBySeverity(a.severity, b.severity))
   return {
     total,
     fixable,