@replicated/portal-components 0.0.1 → 0.0.3

package/dist/security-card.js

@@ -0,0 +1,702 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+var DownloadIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    className,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3v14" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 13l4 4 4-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 21h14" })
+    ]
+  }
+);
+var InfoIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    className,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16v-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8h.01" })
+    ]
+  }
+);
+var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    className,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" })
+  }
+);
+var XIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    className,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6l12 12" })
+    ]
+  }
+);
+var SpinnerIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    className: `animate-spin ${className ?? ""}`,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          className: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          className: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }
+      )
+    ]
+  }
+);
+var CopyIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    className,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+    ]
+  }
+);
+var getSeverityColor = (severity) => {
+  switch (severity) {
+    case "critical":
+      return "text-pink-600";
+    case "high":
+      return "text-yellow-600";
+    case "medium":
+      return "text-blue-400";
+    case "low":
+      return "text-green-500";
+    default:
+      return "text-gray-500";
+  }
+};
+var formatLastScanned = (dateString) => {
+  if (!dateString) return "---";
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleString("en-US", {
+      month: "numeric",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: true
+    });
+  } catch {
+    return "---";
+  }
+};
+var getShortImageName = (imageString) => {
+  const parts = imageString.split("/");
+  return parts[parts.length - 1] || imageString;
+};
+var Dropdown = ({ value, options, onChange, disabled, testId }) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const selected = options.find((o) => o.value === value);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        disabled,
+        "data-testid": testId,
+        className: "flex w-full items-center justify-between rounded-md border border-gray-200 bg-white px-4 py-2 text-left text-sm font-semibold text-gray-900 hover:bg-gray-50 disabled:opacity-50",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: selected?.label || "Select..." }),
+            selected?.sublabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-normal text-gray-500", children: selected.sublabel })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "h-4 w-4 text-gray-500" })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onChange(option.value);
+            setIsOpen(false);
+          },
+          "data-testid": `${testId}-option-${option.value}`,
+          className: "flex w-full items-center justify-between px-4 py-2 text-left text-sm hover:bg-gray-100",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-gray-900", children: option.label }),
+            option.sublabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500", children: option.sublabel })
+          ]
+        },
+        option.value
+      )) })
+    ] })
+  ] });
+};
+var VulnerabilityBadges = ({ summary }) => {
+  if (!summary) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-400", children: "No scan data" });
+  }
+  const counts = [
+    { severity: "critical", count: Object.keys(summary.critical || {}).length },
+    { severity: "high", count: Object.keys(summary.high || {}).length },
+    { severity: "medium", count: Object.keys(summary.medium || {}).length },
+    { severity: "low", count: Object.keys(summary.low || {}).length }
+  ].filter((c) => c.count > 0);
+  if (counts.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-green-600", children: "No vulnerabilities" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: counts.map(({ severity, count }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: `inline-flex items-center rounded px-1.5 py-0.5 text-xs font-medium ${getSeverityColor(severity)} bg-gray-100`,
+      children: [
+        count,
+        " ",
+        severity.charAt(0).toUpperCase()
+      ]
+    },
+    severity
+  )) });
+};
+var FixedCount = ({ count, hasDiffData }) => {
+  if (!hasDiffData) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-400", children: "None" });
+  }
+  if (count === void 0 || count === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-400", children: "None" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-green-600", children: count });
+};
+var ImageName = ({ imageString, compact }) => {
+  const parts = imageString.split("/");
+  const namePart = parts[parts.length - 1] || imageString;
+  const [name, tag] = namePart.split(":");
+  if (compact && imageString.length > 50) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "truncate text-sm text-gray-700", title: imageString, children: [
+      name,
+      tag && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400", children: [
+        ":",
+        tag
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-700", title: imageString, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400", children: [
+      parts.slice(0, -1).join("/"),
+      "/"
+    ] }),
+    name,
+    tag && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400", children: [
+      ":",
+      tag
+    ] })
+  ] });
+};
+var Modal = ({ isOpen, onClose, title, children }) => {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/50", onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 max-h-[90vh] w-full max-w-6xl overflow-auto rounded-lg bg-white shadow-xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-6 py-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "rounded-full p-1 hover:bg-gray-100",
+            children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, { className: "h-5 w-5 text-gray-500" })
+          }
+        )
+      ] }),
+      children
+    ] })
+  ] });
+};
+var Tooltip = ({ content, children }) => {
+  const [show, setShow] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-flex items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        onMouseEnter: () => setShow(true),
+        onMouseLeave: () => setShow(false),
+        children
+      }
+    ),
+    show && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-full left-1/2 z-50 mb-2 -translate-x-1/2 whitespace-nowrap rounded bg-gray-900 px-2 py-1 text-xs text-white", children: [
+      content,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-gray-900" })
+    ] })
+  ] });
+};
+function SecurityCard({
+  channelReleases,
+  showLinux,
+  showHelm,
+  primaryColor = "#326CE5",
+  initialInstallType,
+  initialChannelSequence,
+  initialData,
+  onFetchSecurityInfo,
+  onFetchSecurityDiff,
+  onFetchSBOM
+}) {
+  const availableInstallTypes = react.useMemo(() => {
+    const types = [];
+    if (showLinux) types.push("linux");
+    if (showHelm) types.push("helm");
+    return types;
+  }, [showLinux, showHelm]);
+  const [selectedInstallType, setSelectedInstallType] = react.useState(
+    initialData?.installType ?? initialInstallType ?? availableInstallTypes[0] ?? "linux"
+  );
+  const [selectedSequence, setSelectedSequence] = react.useState(
+    initialData?.channelSequence ?? initialChannelSequence ?? null
+  );
+  const [securityData, setSecurityData] = react.useState(
+    initialData?.securityInfo ?? null
+  );
+  const [diffData, setDiffData] = react.useState(
+    initialData?.securityDiff ?? null
+  );
+  const [sbomData, setSbomData] = react.useState(
+    initialData?.sbom ?? null
+  );
+  const [isLoadingScans, setIsLoadingScans] = react.useState(false);
+  const [isLoadingSbom, setIsLoadingSbom] = react.useState(false);
+  const hasUsedInitialDataRef = react.useRef(!!initialData);
+  const [securityError, setSecurityError] = react.useState(null);
+  const [sbomError, setSbomError] = react.useState(null);
+  const [showAllContainersModal, setShowAllContainersModal] = react.useState(false);
+  const filteredReleases = react.useMemo(() => {
+    return channelReleases.filter((release) => {
+      if (selectedInstallType === "linux") {
+        return !!release.installationTypes?.embeddedCluster;
+      }
+      if (selectedInstallType === "helm") {
+        return !!release.installationTypes?.helm;
+      }
+      return true;
+    });
+  }, [channelReleases, selectedInstallType]);
+  const selectedRelease = react.useMemo(() => {
+    if (!selectedSequence) return filteredReleases[0] || null;
+    return filteredReleases.find((r) => r.channelSequence === selectedSequence) || null;
+  }, [filteredReleases, selectedSequence]);
+  const previousRelease = react.useMemo(() => {
+    if (!selectedRelease) return null;
+    const idx = filteredReleases.findIndex(
+      (r) => r.channelSequence === selectedRelease.channelSequence
+    );
+    if (idx === -1 || idx >= filteredReleases.length - 1) return null;
+    return filteredReleases[idx + 1];
+  }, [filteredReleases, selectedRelease]);
+  react.useEffect(() => {
+    const firstRelease = filteredReleases[0];
+    if (filteredReleases.length > 0 && !selectedSequence && firstRelease) {
+      setSelectedSequence(firstRelease.channelSequence);
+    } else if (filteredReleases.length > 0 && selectedSequence && firstRelease) {
+      const isValid = filteredReleases.some((r) => r.channelSequence === selectedSequence);
+      if (!isValid) {
+        setSelectedSequence(firstRelease.channelSequence);
+      }
+    }
+  }, [filteredReleases, selectedSequence]);
+  react.useEffect(() => {
+    if (!selectedRelease) return;
+    if (hasUsedInitialDataRef.current && initialData) {
+      const isMatchingSelection = initialData.installType === selectedInstallType && initialData.channelSequence === selectedRelease.channelSequence;
+      if (isMatchingSelection) {
+        hasUsedInitialDataRef.current = false;
+        return;
+      }
+      hasUsedInitialDataRef.current = false;
+    }
+    const fetchData = async () => {
+      setIsLoadingScans(true);
+      setIsLoadingSbom(true);
+      setSecurityError(null);
+      setSbomError(null);
+      try {
+        const result = await onFetchSecurityInfo({
+          installType: selectedInstallType,
+          channelSequence: selectedRelease.channelSequence
+        });
+        setSecurityData(result);
+      } catch (err) {
+        setSecurityError(err instanceof Error ? err.message : "Failed to fetch security data");
+        setSecurityData(null);
+      }
+      if (previousRelease && onFetchSecurityDiff) {
+        try {
+          const diffResult = await onFetchSecurityDiff({
+            installType: selectedInstallType,
+            fromChannelSequence: previousRelease.channelSequence,
+            toChannelSequence: selectedRelease.channelSequence
+          });
+          setDiffData(diffResult);
+        } catch (err) {
+          console.error("Failed to fetch security diff:", err);
+          setDiffData(null);
+        }
+      } else {
+        setDiffData(null);
+      }
+      setIsLoadingScans(false);
+      if (onFetchSBOM) {
+        try {
+          const sbomResult = await onFetchSBOM({
+            installType: selectedInstallType,
+            channelSequence: selectedRelease.channelSequence
+          });
+          setSbomData(sbomResult);
+        } catch (err) {
+          setSbomError(err instanceof Error ? err.message : "Failed to fetch SBOM");
+          setSbomData(null);
+        }
+      }
+      setIsLoadingSbom(false);
+    };
+    fetchData();
+  }, [selectedRelease, selectedInstallType, previousRelease, onFetchSecurityInfo, onFetchSecurityDiff, onFetchSBOM, initialData]);
+  const installTypeOptions = react.useMemo(() => {
+    const options = [];
+    if (showLinux) options.push({ value: "linux", label: "Linux" });
+    if (showHelm) options.push({ value: "helm", label: "Helm" });
+    return options;
+  }, [showLinux, showHelm]);
+  const releaseOptions = react.useMemo(() => {
+    return filteredReleases.map((r) => ({
+      value: r.channelSequence.toString(),
+      label: `Version ${r.versionLabel}`,
+      sublabel: `Sequence ${r.channelSequence}${r.isRequired ? " (required)" : ""}`
+    }));
+  }, [filteredReleases]);
+  const cveTotals = react.useMemo(() => {
+    if (!securityData?.images) {
+      return { critical: 0, high: 0, medium: 0, low: 0 };
+    }
+    return securityData.images.reduce(
+      (acc, image) => {
+        if (!image.security?.result) return acc;
+        const r = image.security.result;
+        return {
+          critical: acc.critical + Object.keys(r.critical || {}).length,
+          high: acc.high + Object.keys(r.high || {}).length,
+          medium: acc.medium + Object.keys(r.medium || {}).length,
+          low: acc.low + Object.keys(r.low || {}).length
+        };
+      },
+      { critical: 0, high: 0, medium: 0, low: 0 }
+    );
+  }, [securityData]);
+  const fixedTotals = react.useMemo(() => {
+    if (!diffData?.images) {
+      return { critical: 0, high: 0, medium: 0, low: 0 };
+    }
+    return Object.values(diffData.images).reduce(
+      (acc, diff) => {
+        if (!diff.removed) return acc;
+        return {
+          critical: acc.critical + Object.keys(diff.removed.critical || {}).length,
+          high: acc.high + Object.keys(diff.removed.high || {}).length,
+          medium: acc.medium + Object.keys(diff.removed.medium || {}).length,
+          low: acc.low + Object.keys(diff.removed.low || {}).length
+        };
+      },
+      { critical: 0, high: 0, medium: 0, low: 0 }
+    );
+  }, [diffData]);
+  const parsedSbom = react.useMemo(() => {
+    if (!sbomData?.sboms?.unified?.sbom) return null;
+    try {
+      return JSON.parse(sbomData.sboms.unified.sbom);
+    } catch {
+      return null;
+    }
+  }, [sbomData]);
+  const handleDownloadSBOM = react.useCallback(() => {
+    if (!sbomData?.sboms?.unified?.sbom) return;
+    const blob = new Blob([sbomData.sboms.unified.sbom], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `sbom-report-${selectedRelease?.versionLabel || "unknown"}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, [sbomData, selectedRelease]);
+  const hasSecurityData = securityData?.images?.some((img) => img.security);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-gray-900", children: "Security Center" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "Security information and compliance reports for each release" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-72", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-2 block text-sm font-medium text-gray-700", children: "Install Type" }),
+        availableInstallTypes.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+          Dropdown,
+          {
+            value: selectedInstallType,
+            options: installTypeOptions,
+            onChange: (v) => setSelectedInstallType(v),
+            testId: "install-type-dropdown"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-semibold text-gray-900", children: installTypeOptions[0]?.label || "Linux" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-80", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-2 block text-sm font-medium text-gray-700", children: "Release Version" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Dropdown,
+          {
+            value: selectedSequence?.toString() || "",
+            options: releaseOptions,
+            onChange: (v) => setSelectedSequence(parseInt(v, 10)),
+            disabled: releaseOptions.length === 0,
+            testId: "release-dropdown"
+          }
+        )
+      ] })
+    ] }),
+    (hasSecurityData || isLoadingScans || isLoadingSbom || securityError || sbomError) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-gray-200 bg-white", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between border-b border-gray-200 bg-gray-50 px-6 py-5", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-medium text-gray-900", children: "CVE Report" }) }),
+        isLoadingScans ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[200px] items-center justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "h-8 w-8 text-gray-400" }) }) : securityError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "py-8 text-pink-500", children: [
+          "Error loading security data: ",
+          securityError
+        ] }) }) : !hasSecurityData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-8 text-gray-500", children: "No security report available for this release" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-gray-600", children: "Comprehensive vulnerability scanning using Trivy to identify and assess security risks in dependencies and container images." }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 overflow-auto rounded-md bg-gray-50 p-2", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-xs font-semibold uppercase text-gray-500", children: "Severity" }),
+              /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-xs font-semibold uppercase text-gray-500", children: "Found" }),
+              /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-xs font-semibold uppercase text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                "Fixed",
+                /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: "CVEs fixed compared to the previous release version", children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { className: "h-4 w-4 cursor-pointer text-blue-400" }) })
+              ] }) })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: ["critical", "high", "medium", "low"].map((severity) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 capitalize text-gray-700", children: severity }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-medium ${getSeverityColor(severity)}`, children: cveTotals[severity] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(FixedCount, { count: fixedTotals[severity], hasDiffData: !!diffData }) })
+            ] }, severity)) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-gray-900", children: "Container Vulnerabilities" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto rounded-lg border border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500", children: "Name" }),
+                /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500", children: "Found" }),
+                /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                  "Fixed",
+                  /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: "CVEs fixed compared to the previous release version", children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { className: "h-4 w-4 cursor-pointer text-blue-400" }) })
+                ] }) })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-gray-200 bg-white", children: securityData?.images?.slice(0, 4).map((image, idx) => {
+                const imageWithoutTag = image.image.split(":")[0] || image.image;
+                const imageDiff = diffData?.images?.[imageWithoutTag];
+                const fixedVulns = imageDiff?.removed;
+                const totalFixed = fixedVulns ? Object.keys(fixedVulns.critical || {}).length + Object.keys(fixedVulns.high || {}).length + Object.keys(fixedVulns.medium || {}).length + Object.keys(fixedVulns.low || {}).length : void 0;
+                return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[300px]", children: /* @__PURE__ */ jsxRuntime.jsx(ImageName, { imageString: image.image, compact: true }) }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(VulnerabilityBadges, { summary: image.security?.result }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(FixedCount, { count: totalFixed, hasDiffData: !!imageDiff }) })
+                ] }, idx);
+              }) })
+            ] }) }),
+            (securityData?.images?.length ?? 0) > 4 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-right", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowAllContainersModal(true),
+                className: "text-sm font-medium text-blue-600 hover:underline",
+                children: "Show all containers"
+              }
+            ) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-gray-200 bg-white", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 bg-gray-50 px-6 py-5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-medium text-gray-900", children: "Software Bill of Materials" }),
+          parsedSbom && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleDownloadSBOM,
+              style: { backgroundColor: primaryColor, borderColor: primaryColor },
+              className: "inline-flex items-center gap-2 rounded px-3 py-1.5 text-sm font-medium text-white hover:opacity-90",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, { className: "h-4 w-4" }),
+                "Download report"
+              ]
+            }
+          )
+        ] }),
+        isLoadingSbom ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[200px] items-center justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "h-8 w-8 text-gray-400" }) }) : sbomError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "py-8 text-pink-500", children: [
+          "Error loading SBOM data: ",
+          sbomError
+        ] }) }) : !parsedSbom ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-8 text-gray-500", children: "No SBOM available for this release" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-gray-600", children: "Comprehensive SBOM in SPDX format providing detailed software component inventory and licensing information." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-md bg-gray-50 p-4 text-sm text-gray-600", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Name:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: parsedSbom.name || "Unknown" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "SPDX Version:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: parsedSbom.spdxVersion || "Unknown" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Packages:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: parsedSbom.packages?.length ?? 0 })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Files:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: parsedSbom.files?.length ?? 0 })
+            ] }),
+            parsedSbom.creationInfo?.created && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Created:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: new Date(parsedSbom.creationInfo.created).toLocaleDateString() })
+            ] }),
+            parsedSbom.creationInfo?.creators?.[0] && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tool:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: parsedSbom.creationInfo.creators[0].replace("Tool: ", "") })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
+    !isLoadingScans && !isLoadingSbom && !hasSecurityData && !securityError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center pt-6 text-gray-600", children: "No security report available for this release" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Modal,
+      {
+        isOpen: showAllContainersModal,
+        onClose: () => setShowAllContainersModal(false),
+        title: `Container Images (${securityData?.images?.length ?? 0})`,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[640px] space-y-4 overflow-auto px-6 pb-6", children: securityData?.images?.map((image, idx) => {
+          const imageWithoutTag = image.image.split(":")[0] || image.image;
+          const imageDiff = diffData?.images?.[imageWithoutTag];
+          const fixedVulns = imageDiff?.removed;
+          const totalFixed = fixedVulns ? Object.keys(fixedVulns.critical || {}).length + Object.keys(fixedVulns.high || {}).length + Object.keys(fixedVulns.medium || {}).length + Object.keys(fixedVulns.low || {}).length : void 0;
+          const digest = image.security?.digest || image.sha;
+          const lastScanned = image.security?.last_scanned_at;
+          const hasDigest = digest && digest !== "---";
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-gray-200 pb-4 last:border-b-0 last:pb-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-1.5 text-sm font-semibold text-gray-900", children: getShortImageName(image.image) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 rounded bg-gray-100 px-2.5 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-xs text-gray-700", children: image.image }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between text-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "Digest:" }),
+                hasDigest ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-gray-700", children: digest }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        navigator.clipboard.writeText(digest);
+                      },
+                      className: "inline-flex items-center gap-1 text-blue-600 hover:text-blue-800",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, { className: "h-3.5 w-3.5" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Copy" })
+                      ]
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "---" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-500", children: [
+                "Last Scanned: ",
+                formatLastScanned(lastScanned)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "Found:" }),
+                image.security?.result ? /* @__PURE__ */ jsxRuntime.jsx(VulnerabilityBadges, { summary: image.security.result }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "Unavailable" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "Fixed:" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: "CVEs fixed compared to the previous release version", children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { className: "h-3.5 w-3.5 cursor-pointer text-blue-400" }) }),
+                imageDiff ? totalFixed && totalFixed > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-green-600", children: totalFixed }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "None" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "Unavailable" })
+              ] })
+            ] })
+          ] }, idx);
+        }) })
+      }
+    )
+  ] });
+}
+SecurityCard.displayName = "SecurityCard";
+
+exports.SecurityCard = SecurityCard;
+//# sourceMappingURL=security-card.js.map
+//# sourceMappingURL=security-card.js.map