@countermeasure-platform/web-components 0.2.0

package/src/react/topology/logos.tsx

@@ -0,0 +1,328 @@
+import type { ComponentType } from 'react'
+
+/**
+ * Product logos for Topology connector nodes.
+ * Real brand logos sourced from the Countermeasure main app.
+ */
+
+interface LogoProps {
+  size?: number
+  className?: string
+}
+
+// ── Real brand logos from Countermeasure ─────────────────────────────────────
+
+export function ChronicleLogo({ size = 16, className }: LogoProps) {
+  return (
+    <img
+      src="/images/logos/chronicle.png"
+      alt="Google Chronicle SecOps"
+      width={size}
+      height={size}
+      className={className}
+      style={{ display: 'block' }}
+    />
+  )
+}
+
+export function CrowdStrikeLogo({ size = 16, className }: LogoProps) {
+  return (
+    <svg
+      viewBox="0 0 116.4 88.8"
+      width={size}
+      height={size}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="#FC0000"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M113.3,71.7c-2.6-0.2-7.1-0.8-12.9,1.8c-5.7,2.7-8,2.8-10.8,2.5c0.8,1.4,2.5,3.3,7.7,3.7c5.2,0.3,7.8,0.5,5,6.6c0.1-1.8-0.4-5.4-5.6-4.8s-6.4,5-0.8,7.1c-1.8,0.3-5.7,0.5-8.4-6.1c-1.9,0.8-4.8,2.3-10.2-1.5c1.9,0.6,4.2,0.7,4.2,0.7c-4.7-2.1-9.3-6-12.1-9.7c2.3,1.6,4.8,3.2,7.4,3.5c-3-3.4-10-10.3-18.6-17.3c5.5,3.3,12.2,8.6,23,7.4C92.1,64.4,99.4,62.1,113.3,71.7"
+      />
+      <path
+        fill="#FC0000"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M67.4,70.4c-7.3-2.7-8.8-3.3-18.2-5.3c-9.3-2.1-18.5-6.3-24.7-13c4.3,2.8,13.2,8.3,22.3,7.7c-1.4-1.8-3.9-3.1-7-4.5C43.2,56,53.6,58.3,67.4,70.4"
+      />
+      <path
+        fill="#FC0000"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M104.1,64.3c6.4,0.6,6.1,1.5,6.1,3.1C107.5,65.4,104.1,64.3,104.1,64.3 M65.5,31.2C37.9,23.3,26.9,13.4,18.4,3.1c3.9,11.9,13.1,16.2,23,24.2s10.5,12.3,13.4,17.1c6.5,10.6,7.5,12.3,14,16.9c7.6,5,16.8,1.6,26.9,3.2s18.4,9.2,20.2,12.1c2.1-3.7-2.9-9.1-4.3-10.5c0.7-4.9-10.9-7.1-15.4-8.7c-0.9-0.3-3-0.8-1.2-5.2C97.5,46.1,100.2,40.8,65.5,31.2"
+      />
+      <path
+        fill="#FC0000"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M52.1,45.9c-1.8-4.9-4.9-11.1-19.9-20.4C24.8,20.8,14.1,15,0,0c1,4,5.5,14.5,27.9,28.2C35.3,33.1,44.9,36.1,52.1,45.9"
+      />
+      <path
+        fill="#FC0000"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M52.1,55.1c-1.7-4.1-5.3-9.4-19-16.9c-6.4-3.6-17.2-9.2-27-19.8C7,22.2,11.5,30.6,31,41.1C36.4,44.2,45.5,47,52.1,55.1"
+      />
+    </svg>
+  )
+}
+
+export function TaniumLogo({ size = 16, className }: LogoProps) {
+  return (
+    <svg
+      viewBox="0 0 54 54.5"
+      width={size}
+      height={size}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="#E23430"
+        d="M16.9,23.2h36.7c-1.9-12.9-13-22.7-26.4-22.7c-14.8,0-26.7,12-26.7,26.7C0.4,42,12.4,54,27.2,54c1.3,0,2.5-0.1,3.7-0.3V31.6h-14V23.2z"
+      />
+      <path fill="#E23430" d="M40.9,50.2c6.6-4,11.4-10.7,12.7-18.6H40.9V50.2z" />
+    </svg>
+  )
+}
+
+export function OpenCTILogo({ size = 16, className }: LogoProps) {
+  return (
+    <svg
+      viewBox="0 0 37 39"
+      width={size}
+      height={size}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M35.3069 37.8572L0 2.55036L1.70124 0.849121L37.0081 36.156L35.3069 37.8572Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 36.156L35.3069 0.849121L37.0081 2.55036L1.70124 37.8572L0 36.156Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M28.7097 2.55066L18.4362 12.8206L8.1709 2.55028L9.87259 0.849497L18.4367 9.41818L27.0088 0.849121L28.7097 2.55066Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.4794 25.8989L19.3416 26.7612L28.7395 36.1558L27.0386 37.8573L18.4797 29.3014L9.92551 37.8571L8.22412 36.156L18.4794 25.8989Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.1672 2.89011L18.3279 1.05078L16.4886 2.89011L18.3279 4.72944L20.1672 2.89011Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.1687 36.1718L18.3293 34.3325L16.49 36.1719L18.3293 38.0112L20.1687 36.1718Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export function SigmaLogo({ size = 16, className }: LogoProps) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={size}
+      height={size}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+      />
+    </svg>
+  )
+}
+
+export function YaraLogo({ size = 16, className }: LogoProps) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={size}
+      height={size}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+      />
+    </svg>
+  )
+}
+
+export function MitreLogo({ size = 16, className }: LogoProps) {
+  return (
+    <svg
+      viewBox="199 0 26 30"
+      width={size}
+      height={size}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="#fa243c"
+        d="M224.3,11.92H220l-3.4,6.68-5-5.08c2.18-1.17,5.15-2.89,5.15-6.76A6.86,6.86,0,0,0,209.69,0a7,7,0,0,0-7.15,6.88c.08,2.5,1.37,4.37,3.32,6.44-2.57,1.37-6.4,3.79-6.4,8.44,0,4.38,3.55,8.24,9.26,8.24,4.65,0,6.87-2.34,8.43-5.35L222.31,30l2.81-2.74-5.78-5.9ZM209.69,3.44h0A3.22,3.22,0,0,1,213,6.72c0,2.19-1.4,3.16-3.79,4.49-1.13-1.21-2.65-2.58-2.65-4.57A3.12,3.12,0,0,1,209.69,3.44Zm-.82,22.66a4.74,4.74,0,0,1-5-4.69c0-2.11,1.29-3.95,4.49-5.55l6,6.14C213.13,24.5,211.76,26.1,208.87,26.1Z"
+      />
+    </svg>
+  )
+}
+
+export function ElasticLogo({ size = 16, className }: LogoProps) {
+  return (
+    <svg
+      viewBox="0 0 584.39 582"
+      width={size}
+      height={size}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="#F4BD19"
+        d="M228.5,250l130.24,59.64L490.4,194.16A146.92,146.92,0,0,0,225.19,82.05L203.19,195.59,228.5,250Z"
+      />
+      <path
+        fill="#3CBEB1"
+        d="M93.5,387.84a151.53,151.53,0,0,0-2.86,29.58c0,81.1,66.3,147.41,147.4,147.41A148.29,148.29,0,0,0,360.19,500.42l21.47-113.53-29.1-55.34L221.82,271.92,93.5,387.84Z"
+      />
+      <path
+        fill="#E9478C"
+        d="M92.54,162.2l89.21,21,20-101.62a69.44,69.44,0,0,0-42.94-14.31,70.69,70.69,0,0,0-66.31,94.94Z"
+      />
+      <path
+        fill="#2C458F"
+        d="M84.91,183.66C44.84,196.54,17.19,235.18,17.19,277.16a98.2,98.2,0,0,0,63.45,92.08L206.08,255.7,183.19,206.56l-98.27-22.9Z"
+      />
+      <path
+        fill="#95C63D"
+        d="M383.07,500a69.56,69.56,0,0,0,42.45,14.79,70.75,70.75,0,0,0,70.61-70.61,68.78,68.78,0,0,0-4.29-24.33l-89.21-21L383.07,500Z"
+      />
+      <path
+        fill="#176655"
+        d="M401.19,375.44l98.27,22.9C539.54,385,567.19,346.82,567.19,304.83a98.68,98.68,0,0,0-63.45-92.07L374.96,325.35,401.19,375.44Z"
+      />
+    </svg>
+  )
+}
+
+// ── Custom logos for products not in Countermeasure ──────────────────────────
+
+export function SplunkLogo({ size = 16 }: LogoProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path
+        d="M5 6l7 6-7 6"
+        stroke="#65A637"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 6l7 6-7 6"
+        stroke="#65A637"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        opacity="0.5"
+      />
+    </svg>
+  )
+}
+
+export function SentinelLogo({ size = 16 }: LogoProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <rect x="3" y="3" width="8" height="8" rx="1" fill="#0078D4" />
+      <rect x="13" y="3" width="8" height="8" rx="1" fill="#0078D4" opacity="0.7" />
+      <rect x="3" y="13" width="8" height="8" rx="1" fill="#0078D4" opacity="0.7" />
+      <rect x="13" y="13" width="8" height="8" rx="1" fill="#0078D4" opacity="0.5" />
+    </svg>
+  )
+}
+
+export function SnortLogo({ size = 16 }: LogoProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <circle cx="12" cy="12" r="9" stroke="#E4002B" strokeWidth="1.5" />
+      <circle cx="12" cy="12" r="5" stroke="#E4002B" strokeWidth="1.2" />
+      <circle cx="12" cy="12" r="1.5" fill="#E4002B" />
+      <path d="M12 3v3M12 18v3M3 12h3M18 12h3" stroke="#E4002B" strokeWidth="1.2" />
+    </svg>
+  )
+}
+
+export function AtomicRedTeamLogo({ size = 16 }: LogoProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <circle cx="12" cy="12" r="2" fill="#E4002B" />
+      <ellipse cx="12" cy="12" rx="9" ry="4" stroke="#E4002B" strokeWidth="1.2" />
+      <ellipse
+        cx="12"
+        cy="12"
+        rx="9"
+        ry="4"
+        stroke="#E4002B"
+        strokeWidth="1.2"
+        transform="rotate(60 12 12)"
+      />
+      <ellipse
+        cx="12"
+        cy="12"
+        rx="9"
+        ry="4"
+        stroke="#E4002B"
+        strokeWidth="1.2"
+        transform="rotate(120 12 12)"
+      />
+    </svg>
+  )
+}
+
+export function DefaultConnectorLogo({ size = 16 }: LogoProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path
+        d="M12 22v-4M8 7V3M16 7V3M6 7h12v5a6 6 0 01-12 0V7z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+/** Look up the right logo component for a connector name */
+export function getConnectorLogo(name: string): ComponentType<LogoProps> {
+  const key = name.toLowerCase()
+  if (key.includes('chronicle') || key.includes('google')) return ChronicleLogo
+  if (key.includes('crowdstrike') || key.includes('falcon')) return CrowdStrikeLogo
+  if (key.includes('splunk')) return SplunkLogo
+  if (key.includes('sentinel') || key.includes('microsoft')) return SentinelLogo
+  if (key.includes('tanium')) return TaniumLogo
+  if (key.includes('opencti')) return OpenCTILogo
+  if (key.includes('atomic') || key.includes('red team')) return AtomicRedTeamLogo
+  if (key.includes('sigma')) return SigmaLogo
+  if (key.includes('yara')) return YaraLogo
+  if (key.includes('et/snort') || key.includes('snort')) return SnortLogo
+  if (key.includes('mitre')) return MitreLogo
+  if (key.includes('elastic')) return ElasticLogo
+  return DefaultConnectorLogo
+}