added name column to the runtime BOM

deepfence_frontend/apps/dashboard/src/features/vulnerabilities/api/sbomApiLoader.tsx

@@ -132,6 +132,22 @@ export const SbomModal = ({
             />
           );
         },
+        sortingFn: (rowA, rowB) => {
+          const severityA = rowA.original.severity?.toLowerCase();
+          const severityB = rowB.original.severity?.toLowerCase();
+          if (severityA === severityB) return 0;
+          if (severityA === 'critical') return -1;
+          if (severityB === 'critical') return 1;
+          if (severityA === 'high') return -1;
+          if (severityB === 'high') return 1;
+          if (severityA === 'medium') return -1;
+          if (severityB === 'medium') return 1;
+          if (severityA === 'low') return -1;
+          if (severityB === 'low') return 1;
+          if (severityA === 'unknown') return -1;
+          if (severityB === 'unknown') return 1;
+          return 0;
+        },
         header: () => 'Severity',
         minSize: 50,
         size: 70,

deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/RuntimeBom.tsx

@@ -180,11 +180,11 @@ const RuntimeBom = () => {
           );
         },
         header: () => 'Type',
-        minSize: 200,
-        size: 300,
-        maxSize: 500,
+        minSize: 50,
+        size: 100,
+        maxSize: 200,
       }),
-      columnHelper.accessor('node_id', {
+      columnHelper.accessor('node_name', {
         enableSorting: false,
         cell: (info) => {
           return (
@@ -199,12 +199,12 @@ const RuntimeBom = () => {
                 }}
                 href="#"
               >
-                <span className="truncate capitalize">{info.getValue()}</span>
+                <span className="truncate">{info.getValue()}</span>
               </DFLink>
             </div>
           );
         },
-        header: () => 'Name',
+        header: () => 'Node',
         minSize: 200,
         size: 300,
         maxSize: 500,

deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScans.tsx

@@ -16,6 +16,7 @@ import {
   HiDotsVertical,
   HiDownload,
   HiOutlineExclamationCircle,
+  HiViewGrid,
 } from 'react-icons/hi';
 import {
   ActionFunctionArgs,
@@ -74,6 +75,7 @@ import { VulnerabilityIcon } from '@/components/sideNavigation/icons/Vulnerabili
 import { SEVERITY_COLORS } from '@/constants/charts';
 import { IconMapForNodeType } from '@/features/onboard/components/IconMapForNodeType';
 import { SuccessModalContent } from '@/features/settings/components/SuccessModalContent';
+import { SbomModal } from '@/features/vulnerabilities/api/sbomApiLoader';
 import { ScanTypeEnum } from '@/types/common';
 import {
   ApiError,
@@ -658,6 +660,7 @@ const ActionDropdown = ({
   setShowDeleteDialog,
   setScanIdToDelete,
   setNodeIdToDelete,
+  setSelectedNode,
 }: {
   icon: React.ReactNode;
   scanId: string;
@@ -667,6 +670,12 @@ const ActionDropdown = ({
   setShowDeleteDialog: React.Dispatch<React.SetStateAction<boolean>>;
   setScanIdToDelete: React.Dispatch<React.SetStateAction<string>>;
   setNodeIdToDelete: React.Dispatch<React.SetStateAction<string>>;
+  setSelectedNode: React.Dispatch<
+    React.SetStateAction<{
+      nodeName: string;
+      scanId: string;
+    } | null>
+  >;
 }) => {
   const fetcher = useFetcher();
   const [open, setOpen] = useState(false);
@@ -731,6 +740,26 @@ const ActionDropdown = ({
               Download SBOM
             </span>
           </DropdownItem>
+          <DropdownItem
+            className="text-sm"
+            onClick={(e) => {
+              e.preventDefault();
+              if (!isScanComplete(scanStatus)) return;
+              setSelectedNode({
+                scanId,
+                nodeName: nodeId,
+              });
+            }}
+          >
+            <span
+              className={cx('flex items-center gap-x-2', {
+                'opacity-60 dark:opacity-30 cursor-default': !isScanComplete(scanStatus),
+              })}
+            >
+              <HiViewGrid />
+              View SBOM
+            </span>
+          </DropdownItem>
           <DropdownItem
             className="text-sm"
             onClick={() => {
@@ -769,7 +798,10 @@ const VulnerabilityScans = () => {
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [scanIdToDelete, setScanIdToDelete] = useState('');
   const [nodeIdToDelete, setNodeIdToDelete] = useState('');
-
+  const [selectedNode, setSelectedNode] = useState<{
+    nodeName: string;
+    scanId: string;
+  } | null>(null);
   const columnHelper = createColumnHelper<ScanResult>();
 
   const columns = useMemo(() => {
@@ -985,6 +1017,7 @@ const VulnerabilityScans = () => {
             setScanIdToDelete={setScanIdToDelete}
             setNodeIdToDelete={setNodeIdToDelete}
             setShowDeleteDialog={setShowDeleteDialog}
+            setSelectedNode={setSelectedNode}
           />
         ),
         header: () => '',
@@ -1374,6 +1407,15 @@ const VulnerabilityScans = () => {
           </DFAwait>
         </Suspense>
       </div>
+      {selectedNode ? (
+        <SbomModal
+          scanId={selectedNode.scanId}
+          nodeName={selectedNode.nodeName}
+          onClose={() => {
+            setSelectedNode(null);
+          }}
+        />
+      ) : null}
     </div>
   );
 };