RBOM theme changes

deepfence_frontend/apps/dashboard/src/components/icons/common/ScrollLine.tsx

@@ -11,7 +11,7 @@ export const ScrollLine = () => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M13.2218 2.55884V4.32439L6.22179 4.30884V2.54328C6.22179 2.00634 5.78651 1.57106 5.24957 1.57106C4.71262 1.57106 4.27734 2.00634 4.27734 2.54328V11.4877C4.27786 11.834 4.17494 12.1725 3.98179 12.4599H9.94734C10.4843 12.4599 10.9196 12.0247 10.9196 11.4877V5.10606H11.6973V11.4722C11.6973 12.4387 10.9138 13.2222 9.94734 13.2222H2.52734C1.56085 13.2222 0.777344 12.4387 0.777344 11.4722V9.33328H2.79568V10.1111H1.55512V11.5033C1.55512 12.0402 1.9904 12.4755 2.52734 12.4755C3.06429 12.4755 3.49957 12.0402 3.49957 11.5033V2.55884C3.49957 1.59234 4.28307 0.808838 5.24957 0.808838H11.4718C12.4383 0.808838 13.2218 1.59234 13.2218 2.55884ZM12.444 2.55884C12.4355 2.02798 12.0027 1.6021 11.4718 1.60217L6.70401 1.58662C6.89695 1.87412 6.99984 2.21259 6.99957 2.55884V3.54662H12.444V2.55884Z"
-        fill="black"
+        fill="currentColor"
       />
     </svg>
   );

deepfence_frontend/apps/dashboard/src/features/dashboard/pages/Dashboard.tsx

@@ -6,7 +6,7 @@ import { TopRisksRuntimeDummy } from '@/features/dashboard/components/TopRisksRu
 
 const Dashboard = () => {
   return (
-    <div className="overflow-auto p-4 grid grid-cols-4 gap-x-5 gap-y-4">
+    <div className="overflow-auto p-4 grid grid-cols-4 gap-4">
       <div className="col-span-4">
         <NodeCounts />
       </div>

deepfence_frontend/apps/dashboard/src/features/vulnerabilities/components/SBOMModal.tsx

@@ -0,0 +1,164 @@
+import { useSuspenseQuery } from '@suspensive/react-query';
+import { Suspense, useMemo, useState } from 'react';
+import { generatePath } from 'react-router-dom';
+import {
+  CircleSpinner,
+  createColumnHelper,
+  SlidingModal,
+  SlidingModalCloseButton,
+  SlidingModalContent,
+  SlidingModalHeader,
+  SortingState,
+  Table,
+} from 'ui-components';
+
+import { ModelSbomResponse } from '@/api/generated';
+import { DFLink } from '@/components/DFLink';
+import { ScrollLine } from '@/components/icons/common/ScrollLine';
+import { SeverityBadge } from '@/components/SeverityBadge';
+import { TruncatedText } from '@/components/TruncatedText';
+import { queries } from '@/queries';
+
+function useScanSBOM(scanId: string) {
+  return useSuspenseQuery({
+    ...queries.vulnerability.sbomForScan({ scanId }),
+  });
+}
+
+export const SbomModal = ({
+  onClose,
+  scanId,
+  nodeName,
+}: {
+  scanId: string;
+  nodeName: string;
+  onClose: () => void;
+}) => {
+  return (
+    <SlidingModal
+      open={true}
+      onOpenChange={() => {
+        onClose();
+      }}
+      size="xxl"
+    >
+      <SlidingModalCloseButton />
+      <SlidingModalHeader>
+        <div className="flex items-center gap-2 dark:text-text-text-and-icon dark:bg-bg-breadcrumb-bar p-5 text-h3">
+          <div className="h-5 w-5 shrink-0">
+            <ScrollLine />
+          </div>
+          <div>SBOM for {nodeName}</div>
+        </div>
+      </SlidingModalHeader>
+      <SlidingModalContent>
+        <Suspense
+          fallback={
+            <div className="min-h-[500px] flex items-center justify-center">
+              <CircleSpinner size="lg" />
+            </div>
+          }
+        >
+          <div className="p-5">
+            <ModalContent scanId={scanId} />
+          </div>
+        </Suspense>
+      </SlidingModalContent>
+    </SlidingModal>
+  );
+};
+
+const ModalContent = ({ scanId }: { scanId: string }) => {
+  const { data } = useScanSBOM(scanId);
+  const [sort, setSort] = useState<SortingState>([
+    {
+      id: 'severity',
+      desc: true,
+    },
+  ]);
+  const [pageSize, setPageSize] = useState(10);
+
+  const columns = useMemo(() => {
+    const columnHelper = createColumnHelper<ModelSbomResponse>();
+    const columns = [
+      columnHelper.accessor('package_name', {
+        cell: (info) => <TruncatedText text={info.getValue() ?? ''} />,
+        header: () => <TruncatedText text="Package Name" />,
+        minSize: 50,
+        size: 70,
+        maxSize: 100,
+      }),
+      columnHelper.accessor('locations', {
+        cell: (info) => {
+          return <TruncatedText text={info.getValue()?.join(', ') ?? ''} />;
+        },
+        header: () => <TruncatedText text="Location" />,
+        minSize: 70,
+        size: 90,
+        maxSize: 100,
+      }),
+      columnHelper.accessor('cve_id', {
+        cell: (info) => {
+          return info.getValue()?.length ? (
+            <DFLink
+              to={generatePath('/vulnerability/unique-vulnerabilities/:cveId', {
+                cveId: info.getValue()!,
+              })}
+              target="_blank"
+            >
+              <TruncatedText text={info.getValue() ?? ''} />
+            </DFLink>
+          ) : null;
+        },
+        header: () => 'Top CVE',
+        minSize: 50,
+        size: 60,
+        maxSize: 100,
+      }),
+      columnHelper.accessor('severity', {
+        sortUndefined: -1,
+        cell: (info) => {
+          if (!info.getValue()) return '';
+          return <SeverityBadge severity={info.getValue() ?? ''} />;
+        },
+        sortingFn: (rowA, rowB) => {
+          const severityA = rowA.original.severity?.toLowerCase() || 'default';
+          const severityB = rowB.original.severity?.toLowerCase() || 'default';
+          const severityMap: { [key: string]: number } = {
+            critical: 4,
+            high: 3,
+            medium: 2,
+            low: 1,
+            unknown: 0,
+            default: 0,
+          };
+          return severityMap[severityA] - severityMap[severityB];
+        },
+        header: () => <TruncatedText text="Severity" />,
+        minSize: 30,
+        size: 50,
+        maxSize: 100,
+      }),
+    ];
+    return columns;
+  }, []);
+
+  if (data.message?.length) {
+    return <div className="dark:text-text-text-and-icon">{data.message}</div>;
+  }
+
+  return (
+    <Table
+      data={data.sbom ?? []}
+      columns={columns}
+      enableSorting
+      sortingState={sort}
+      onSortingChange={setSort}
+      enablePagination
+      enableColumnResizing
+      pageSize={pageSize}
+      enablePageResize
+      onPageResize={setPageSize}
+    />
+  );
+};