Catalyst / admin/SAynapse-Horizon 14.8 GB / 57.8 GB 40.0 GB free
Help Sign in

admin / SAynapse-Horizon

public

Self Hosted Cyber Threat Intelligence Hub

Code Issues Pull requests Pipelines Packages Security Insights Wiki Settings
SAynapse-Horizon / Synapse-Horizon-v2 / src / components / Header.jsx 3429 B · main 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { ShieldCheck, Activity, Clock, Siren } from 'lucide-react'
import { formatUtc } from '../utils/format'
import RadarMark from './RadarMark'

// Top application bar: identity + at-a-glance structural indicators.
export default function Header({ activeCount, totalSources, lastPull, loading, displayTick, triageCount = 0 }) {
  const clock = new Date(displayTick)
  const clockStr = formatUtc(clock.toISOString())

  return (
    <header className="flex items-center justify-between gap-4 border-b border-slate-800/80 bg-slate-950/60 px-5 py-3 backdrop-blur">
      <div className="flex items-center gap-3 min-w-0">
        <div className="h-10 w-10 shrink-0 overflow-hidden rounded-lg bg-slate-950 ring-1 ring-inset ring-slate-700">
          <RadarMark className="h-full w-full" />
        </div>
        <div className="min-w-0">
          <h1 className="truncate text-lg font-semibold tracking-tight text-slate-100">
            SYNAPSE<span className="text-sky-400">·</span>HORIZON
          </h1>
          <p className="truncate text-[11px] font-medium uppercase tracking-[0.18em] text-slate-500">
            Cyber Threat Intelligence · SOC Fusion Console
          </p>
        </div>
      </div>

      <div className="hidden items-center gap-2 md:flex">
        <Indicator
          icon={Activity}
          tone={loading ? 'amber' : 'emerald'}
          label="Pipeline"
          value={loading ? 'INGESTING' : 'NOMINAL'}
          pulse={loading}
        />

        {triageCount > 0 && (
          <div
            role="status"
            aria-label={`Critical triage required for ${triageCount} event${triageCount === 1 ? '' : 's'}`}
            title="Critical triage required — acknowledge each event to clear"
            className="triage-flash flex items-center gap-2 rounded-md bg-rose-500 px-2.5 py-1.5 ring-1 ring-inset ring-rose-300/60"
          >
            <Siren className="h-3.5 w-3.5 shrink-0 text-white" />
            <div className="leading-tight">
              <div className="text-[9px] font-semibold uppercase tracking-widest text-rose-100/90">
                Triage
              </div>
              <div className="text-xs font-semibold text-white">Required · {triageCount}</div>
            </div>
          </div>
        )}

        <Indicator
          icon={ShieldCheck}
          tone="sky"
          label="Channels"
          value={`${activeCount}/${totalSources}`}
        />
        <Indicator
          icon={Clock}
          tone="slate"
          label="System Clock"
          value={clockStr}
          mono
        />
      </div>
    </header>
  )
}

const TONES = {
  emerald: 'text-emerald-400 bg-emerald-500/10 ring-emerald-500/30',
  amber: 'text-amber-400 bg-amber-500/10 ring-amber-500/30',
  sky: 'text-sky-400 bg-sky-500/10 ring-sky-500/30',
  slate: 'text-slate-300 bg-slate-500/10 ring-slate-600/40',
}

function Indicator({ icon: Icon, tone, label, value, mono, pulse }) {
  return (
    <div className={`flex items-center gap-2 rounded-md px-2.5 py-1.5 ring-1 ring-inset ${TONES[tone]}`}>
      <Icon className={`h-3.5 w-3.5 ${pulse ? 'animate-pulse-dot' : ''}`} />
      <div className="leading-tight">
        <div className="text-[9px] font-medium uppercase tracking-widest text-slate-500">{label}</div>
        <div className={`text-xs font-semibold text-slate-200 ${mono ? 'font-mono' : ''}`}>{value}</div>
      </div>
    </div>
  )
}