@skyhook-io/radar-app 0.1.1

package/src/components/home/TopologyPreview.tsx

@@ -0,0 +1,219 @@
+import { useMemo } from 'react'
+import type { Topology } from '../../types'
+import type { DashboardTopologySummary } from '../../api/client'
+import { Network, ArrowRight } from 'lucide-react'
+import { clsx } from 'clsx'
+
+interface TopologyPreviewProps {
+  topology: Topology | null
+  summary: DashboardTopologySummary
+  onNavigate: () => void
+}
+
+/**
+ * Static schematic SVG that hints at the topology graph layout.
+ * Two groups with interconnected nodes using real topology color palette.
+ */
+function TopologySchematic() {
+  // Colors matching the real topology graph
+  const ingress = '#a78bfa'  // violet-400
+  const service = '#60a5fa'  // blue-400
+  const deploy  = '#34d399'  // emerald-400
+  const pod     = '#84cc16'  // lime-500
+  const config  = '#fbbf24'  // amber-400
+  const groupBorder = 'rgba(59, 130, 246, 0.25)'
+  const groupBg = 'rgba(59, 130, 246, 0.04)'
+
+  // Edge color — use a concrete color so markers render reliably
+  const ec = '#64748b' // slate-500
+
+  return (
+    <svg viewBox="0 0 160 120" className="w-full h-full" aria-hidden="true">
+      <defs>
+        <marker id="arr" viewBox="0 0 8 6" refX="7" refY="3"
+          markerWidth="6" markerHeight="5" orient="auto">
+          <path d="M 0 0 L 8 3 L 0 6 z" fill={ec} opacity="0.6" />
+        </marker>
+        <marker id="arr-f" viewBox="0 0 8 6" refX="7" refY="3"
+          markerWidth="6" markerHeight="5" orient="auto">
+          <path d="M 0 0 L 8 3 L 0 6 z" fill={ec} opacity="0.35" />
+        </marker>
+      </defs>
+
+      {/* Group 1 — top: Ingress → Service → Deploys → Pods */}
+      <rect x="4" y="4" width="100" height="52" rx="6"
+        fill={groupBg} stroke={groupBorder} strokeWidth="1" strokeDasharray="3 2" />
+
+      {/* Nodes */}
+      <rect x="10" y="24" width="16" height="10" rx="3" fill={ingress} opacity="0.85" />
+      <rect x="38" y="24" width="16" height="10" rx="3" fill={service} opacity="0.85" />
+      <rect x="66" y="14" width="16" height="10" rx="3" fill={deploy} opacity="0.85" />
+      <rect x="66" y="34" width="16" height="10" rx="3" fill={deploy} opacity="0.85" />
+      <circle cx="96" cy="19" r="4.5" fill={pod} opacity="0.65" />
+      <circle cx="96" cy="39" r="4.5" fill={pod} opacity="0.65" />
+
+      {/* Edges — group 1 */}
+      <line x1="26" y1="29" x2="37" y2="29" stroke={ec} strokeWidth="1" opacity="0.55" markerEnd="url(#arr)" />
+      <line x1="54" y1="29" x2="65" y2="20" stroke={ec} strokeWidth="1" opacity="0.55" markerEnd="url(#arr)" />
+      <line x1="54" y1="29" x2="65" y2="38" stroke={ec} strokeWidth="1" opacity="0.55" markerEnd="url(#arr)" />
+      <line x1="82" y1="19" x2="90" y2="19" stroke={ec} strokeWidth="1" opacity="0.55" markerEnd="url(#arr)" />
+      <line x1="82" y1="39" x2="90" y2="39" stroke={ec} strokeWidth="1" opacity="0.55" markerEnd="url(#arr)" />
+
+      {/* Group 2 — bottom: Service → Deploys → Pods + ConfigMap */}
+      <rect x="30" y="64" width="126" height="52" rx="6"
+        fill={groupBg} stroke={groupBorder} strokeWidth="1" strokeDasharray="3 2" />
+
+      {/* Nodes */}
+      <rect x="36" y="82" width="16" height="10" rx="3" fill={service} opacity="0.85" />
+      <rect x="66" y="72" width="16" height="10" rx="3" fill={deploy} opacity="0.85" />
+      <rect x="66" y="92" width="16" height="10" rx="3" fill={deploy} opacity="0.85" />
+      <circle cx="96" cy="73" r="4.5" fill={pod} opacity="0.65" />
+      <circle cx="96" cy="87" r="4.5" fill={pod} opacity="0.65" />
+      <circle cx="96" cy="101" r="4.5" fill={pod} opacity="0.65" />
+
+      {/* Config node */}
+      <rect x="120" y="82" width="16" height="10" rx="3" fill={config} opacity="0.55" />
+
+      {/* Edges — group 2 */}
+      <line x1="52" y1="87" x2="65" y2="78" stroke={ec} strokeWidth="1" opacity="0.55" markerEnd="url(#arr)" />
+      <line x1="52" y1="87" x2="65" y2="96" stroke={ec} strokeWidth="1" opacity="0.55" markerEnd="url(#arr)" />
+      <line x1="82" y1="77" x2="90" y2="74" stroke={ec} strokeWidth="1" opacity="0.55" markerEnd="url(#arr)" />
+      <line x1="82" y1="77" x2="90" y2="87" stroke={ec} strokeWidth="1" opacity="0.55" markerEnd="url(#arr)" />
+      <line x1="82" y1="97" x2="90" y2="101" stroke={ec} strokeWidth="1" opacity="0.55" markerEnd="url(#arr)" />
+
+      {/* Config dashed edge */}
+      <line x1="82" y1="77" x2="119" y2="87" stroke={ec} strokeWidth="0.7" opacity="0.3" strokeDasharray="2 2" markerEnd="url(#arr-f)" />
+
+      {/* Cross-group curved edge */}
+      <path d="M 18 34 Q 18 64, 36 82" fill="none" stroke={ec} strokeWidth="0.8" opacity="0.3" markerEnd="url(#arr-f)" />
+    </svg>
+  )
+}
+
+// Derive stats from real topology data
+function useTopologyStats(topology: Topology | null) {
+  return useMemo(() => {
+    if (!topology || topology.nodes.length === 0) return null
+
+    const kindCounts: Record<string, number> = {}
+    const healthCounts = { healthy: 0, degraded: 0, unhealthy: 0, unknown: 0 }
+
+    for (const node of topology.nodes) {
+      kindCounts[node.kind] = (kindCounts[node.kind] || 0) + 1
+      if (node.status in healthCounts) {
+        healthCounts[node.status as keyof typeof healthCounts]++
+      }
+    }
+
+    // Top kinds sorted by display priority
+    const kindPriority: Record<string, number> = {
+      Deployment: 1, Rollout: 1, StatefulSet: 2, DaemonSet: 2,
+      Service: 3, Ingress: 4, Gateway: 4,
+      HTTPRoute: 4, GRPCRoute: 4, TCPRoute: 4, TLSRoute: 4,
+      Pod: 5, PodGroup: 5,
+      Job: 6, CronJob: 6, ConfigMap: 7, Secret: 7,
+    }
+    const topKinds = Object.entries(kindCounts)
+      .filter(([kind]) => kind !== 'Internet')
+      .sort(([a], [b]) => (kindPriority[a] || 99) - (kindPriority[b] || 99))
+      .slice(0, 8)
+
+    return { topKinds, healthCounts }
+  }, [topology])
+}
+
+const kindDotColors: Record<string, string> = {
+  Deployment: 'bg-emerald-400', Rollout: 'bg-emerald-400',
+  StatefulSet: 'bg-cyan-400', DaemonSet: 'bg-teal-400',
+  Service: 'bg-blue-400', Ingress: 'bg-violet-400', Gateway: 'bg-violet-400',
+  HTTPRoute: 'bg-purple-400', GRPCRoute: 'bg-purple-400', TCPRoute: 'bg-purple-400', TLSRoute: 'bg-purple-400',
+  Pod: 'bg-lime-500', PodGroup: 'bg-lime-500',
+  Job: 'bg-purple-400', CronJob: 'bg-purple-400',
+  ConfigMap: 'bg-amber-400', Secret: 'bg-red-400',
+  ReplicaSet: 'bg-green-400', HPA: 'bg-pink-500', PVC: 'bg-cyan-400',
+}
+
+export function TopologyPreview({ topology, summary, onNavigate }: TopologyPreviewProps) {
+  const stats = useTopologyStats(topology)
+
+  return (
+    <button
+      onClick={onNavigate}
+      className="group h-[260px] rounded-xl bg-theme-surface shadow-theme-sm hover:-translate-y-1 hover:shadow-theme-md transition-all duration-200 text-left overflow-hidden"
+    >
+      <div className="flex flex-col h-full w-full">
+      <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50">
+        <div className="flex items-center gap-2">
+          <Network className="w-4 h-4 text-theme-text-tertiary" />
+          <span className="text-xs font-semibold uppercase tracking-wider text-theme-text-secondary">Topology</span>
+        </div>
+        <span className="text-[11px] text-theme-text-tertiary">
+          {summary.nodeCount} resources &middot; {summary.edgeCount} conn
+        </span>
+      </div>
+
+      {/* Stats (left) + Schematic (right) */}
+      <div className="flex-1 flex items-stretch min-h-0 px-3 py-1.5 gap-2">
+        {/* Left: compact stats */}
+        <div className="flex flex-col justify-center gap-0.5 min-w-0 w-[105px] shrink-0">
+          {stats ? (
+            <>
+              {stats.topKinds.map(([kind, count]) => (
+                <div key={kind} className="flex items-center gap-1.5 text-[10px] leading-tight">
+                  <span className={clsx(
+                    'w-1.5 h-1.5 rounded-full shrink-0',
+                    kindDotColors[kind] || 'bg-theme-text-tertiary',
+                  )} />
+                  <span className="text-theme-text-primary font-medium w-5 text-right tabular-nums">{count}</span>
+                  <span className="text-theme-text-tertiary truncate">{kind}</span>
+                </div>
+              ))}
+
+              {(stats.healthCounts.degraded > 0 || stats.healthCounts.unhealthy > 0) && (
+                <div className="flex items-center gap-1.5 text-[10px] text-theme-text-tertiary mt-0.5 pt-1 border-t border-theme-border/50">
+                  {stats.healthCounts.unhealthy > 0 && (
+                    <span className="flex items-center gap-0.5">
+                      <span className="w-1.5 h-1.5 rounded-full bg-red-500" />
+                      {stats.healthCounts.unhealthy}
+                    </span>
+                  )}
+                  {stats.healthCounts.degraded > 0 && (
+                    <span className="flex items-center gap-0.5">
+                      <span className="w-1.5 h-1.5 rounded-full bg-yellow-500" />
+                      {stats.healthCounts.degraded}
+                    </span>
+                  )}
+                </div>
+              )}
+            </>
+          ) : (
+            // Show summary-based placeholder while full topology loads via SSE
+            <div className="flex flex-col gap-0.5">
+              <div className="flex items-center gap-1.5 text-[10px] leading-tight">
+                <span className="w-1.5 h-1.5 rounded-full bg-blue-400 shrink-0" />
+                <span className="text-theme-text-primary font-medium w-5 text-right tabular-nums">{summary.nodeCount}</span>
+                <span className="text-theme-text-tertiary">resources</span>
+              </div>
+              <div className="flex items-center gap-1.5 text-[10px] leading-tight">
+                <span className="w-1.5 h-1.5 rounded-full bg-theme-text-tertiary shrink-0" />
+                <span className="text-theme-text-primary font-medium w-5 text-right tabular-nums">{summary.edgeCount}</span>
+                <span className="text-theme-text-tertiary">connections</span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Right: schematic illustration */}
+        <div className="flex-1 flex items-center min-w-0">
+          <TopologySchematic />
+        </div>
+      </div>
+
+      <div className="px-4 py-1.5 border-t border-theme-border/50 flex items-center justify-end gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-theme-text-secondary group-hover:text-theme-text-primary transition-colors">
+        Open Topology
+        <ArrowRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
+      </div>
+      </div>
+    </button>
+  )
+}

package/src/components/home/TrafficSummary.tsx

@@ -0,0 +1,154 @@
+import type { DashboardTrafficSummary } from '../../api/client'
+import { Activity, ArrowRight, ArrowRightLeft } from 'lucide-react'
+
+interface TrafficSummaryProps {
+  data: DashboardTrafficSummary | null
+  onNavigate: () => void
+}
+
+/**
+ * Static schematic SVG mimicking the real traffic view layout:
+ * vertical spine on the left, Internet node, chunky arrows branching
+ * right to colored service nodes, some with further connections.
+ */
+function TrafficSchematic() {
+  // Service node colors matching the real traffic view
+  const green  = '#22c55e'  // skyhook-connector style
+  const blue   = '#3b82f6'  // dev services
+  const brown  = '#a3734c'  // staging services
+  const teal   = '#14b8a6'  // keda style
+  const red    = '#ef4444'  // unhealthy / alert
+  const purple = '#a855f7'  // envoy / system
+  const inet   = '#93c5fd'  // light blue — Internet node bg
+  const inetBorder = '#60a5fa'
+
+  // Edge color
+  const ec = '#6b7280' // gray-500
+
+  return (
+    <svg viewBox="0 0 160 120" className="w-full h-auto max-h-full" aria-hidden="true">
+      <defs>
+        <marker id="trf-a" viewBox="0 0 10 8" refX="9" refY="4"
+          markerWidth="7" markerHeight="6" orient="auto">
+          <path d="M 0 0 L 10 4 L 0 8 z" fill={ec} opacity="0.55" />
+        </marker>
+        <marker id="trf-a2" viewBox="0 0 10 8" refX="9" refY="4"
+          markerWidth="7" markerHeight="6" orient="auto">
+          <path d="M 0 0 L 10 4 L 0 8 z" fill={ec} opacity="0.35" />
+        </marker>
+      </defs>
+
+      {/* Vertical spine */}
+      <line x1="38" y1="6" x2="38" y2="114" stroke={ec} strokeWidth="2.5" opacity="0.3" strokeLinecap="round" />
+
+      {/* Internet node — rounded rect with light fill */}
+      <rect x="3" y="43" width="24" height="16" rx="5" fill={inet} opacity="0.35" stroke={inetBorder} strokeWidth="0.8" />
+      <circle cx="12" cy="51" r="2.5" fill={inetBorder} opacity="0.6" />
+
+      {/* Arrow: Internet → spine */}
+      <line x1="27" y1="51" x2="36" y2="51" stroke={ec} strokeWidth="2.5" opacity="0.45" markerEnd="url(#trf-a)" />
+
+      {/* === Branch 1: green service (top) === */}
+      <line x1="39" y1="14" x2="56" y2="14" stroke={ec} strokeWidth="2" opacity="0.4" markerEnd="url(#trf-a)" />
+      <rect x="58" y="8" width="28" height="12" rx="3" fill={green} opacity="0.85" />
+      {/* status dot */}
+      <circle cx="62" cy="14" r="1.5" fill="#fbbf24" opacity="0.9" />
+
+      {/* === Branch 2: blue service → right node === */}
+      <line x1="39" y1="33" x2="56" y2="33" stroke={ec} strokeWidth="1.8" opacity="0.4" markerEnd="url(#trf-a)" />
+      <rect x="58" y="27" width="28" height="12" rx="3" fill={blue} opacity="0.85" />
+      <circle cx="62" cy="33" r="1.5" fill={green} opacity="0.9" />
+      {/* → right node (external) */}
+      <line x1="86" y1="33" x2="108" y2="24" stroke={ec} strokeWidth="1.2" opacity="0.35" markerEnd="url(#trf-a2)" />
+      <rect x="110" y="18" width="28" height="12" rx="3" fill={red} opacity="0.7" />
+
+      {/* === Branch 3: brown service === */}
+      <line x1="39" y1="51" x2="56" y2="51" stroke={ec} strokeWidth="2.2" opacity="0.45" markerEnd="url(#trf-a)" />
+      <rect x="58" y="45" width="28" height="12" rx="3" fill={brown} opacity="0.85" />
+      <circle cx="62" cy="51" r="1.5" fill={green} opacity="0.9" />
+
+      {/* === Branch 4: teal service → right node === */}
+      <line x1="39" y1="69" x2="56" y2="69" stroke={ec} strokeWidth="1.5" opacity="0.38" markerEnd="url(#trf-a)" />
+      <rect x="58" y="63" width="28" height="12" rx="3" fill={teal} opacity="0.85" />
+      <circle cx="62" cy="69" r="1.5" fill={green} opacity="0.9" />
+      {/* → right node */}
+      <line x1="86" y1="69" x2="108" y2="76" stroke={ec} strokeWidth="1.2" opacity="0.35" markerEnd="url(#trf-a2)" />
+      <rect x="110" y="70" width="28" height="12" rx="3" fill={blue} opacity="0.7" />
+
+      {/* === Branch 5: purple service (bottom) === */}
+      <line x1="39" y1="87" x2="56" y2="87" stroke={ec} strokeWidth="1.3" opacity="0.35" markerEnd="url(#trf-a)" />
+      <rect x="58" y="81" width="28" height="12" rx="3" fill={purple} opacity="0.85" />
+      <circle cx="62" cy="87" r="1.5" fill={green} opacity="0.9" />
+
+      {/* === Branch 6: small red service === */}
+      <line x1="39" y1="103" x2="56" y2="103" stroke={ec} strokeWidth="1" opacity="0.3" markerEnd="url(#trf-a)" />
+      <rect x="58" y="97" width="28" height="12" rx="3" fill={red} opacity="0.65" />
+      <circle cx="62" cy="103" r="1.5" fill={red} opacity="0.9" />
+    </svg>
+  )
+}
+
+export function TrafficSummary({ data, onNavigate }: TrafficSummaryProps) {
+  const hasFlows = data && data.flowCount > 0
+
+  return (
+    <button
+      onClick={onNavigate}
+      className="group h-[260px] rounded-xl bg-theme-surface shadow-theme-sm hover:-translate-y-1 hover:shadow-theme-md transition-all duration-200 text-left overflow-hidden"
+    >
+      <div className="flex flex-col h-full w-full">
+      <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50">
+        <div className="flex items-center gap-2">
+          <Activity className="w-4 h-4 text-theme-text-tertiary" />
+          <span className="text-xs font-semibold uppercase tracking-wider text-theme-text-secondary">Traffic</span>
+        </div>
+        {hasFlows && (
+          <span className="text-[11px] text-theme-text-tertiary">
+            {data.source} &middot; {data.flowCount} flows
+          </span>
+        )}
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-hidden">
+        {hasFlows ? (
+          /* Real data: show top flows */
+          <div className="px-4 py-2 space-y-1.5">
+            {data.topFlows.map((flow, i) => (
+              <div key={i} className="flex items-center gap-2 text-xs">
+                <span className="text-theme-text-primary truncate">{flow.src}</span>
+                <ArrowRightLeft className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+                <span className="text-theme-text-primary truncate">{flow.dst}</span>
+                <span className="text-xs text-theme-text-tertiary shrink-0 ml-auto">
+                  {flow.connections} conn
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          /* No data yet: schematic + description */
+          <div className="flex items-stretch gap-2 px-3 py-1.5 h-full">
+            <div className="flex flex-col justify-center gap-1.5 w-[105px] shrink-0">
+              <p className="text-[11px] leading-snug text-theme-text-secondary">
+                Visualize live service-to-service network flows and external dependencies
+              </p>
+              {data && (
+                <span className="text-[10px] text-theme-text-tertiary">
+                  Source: {data.source}
+                </span>
+              )}
+            </div>
+            <div className="flex-1 min-w-0 overflow-hidden">
+              <TrafficSchematic />
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="px-4 py-1.5 border-t border-theme-border/50 flex items-center justify-end gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-theme-text-secondary group-hover:text-theme-text-primary transition-colors">
+        Open Traffic
+        <ArrowRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
+      </div>
+      </div>
+    </button>
+  )
+}

package/src/components/logs/JsonLogLine.tsx

@@ -0,0 +1 @@
+export { StructuredLogLine as JsonLogLine } from '@skyhook-io/k8s-ui'

package/src/components/logs/LogCore.tsx

@@ -0,0 +1,2 @@
+export { LogCore } from '@skyhook-io/k8s-ui'
+export type { DownloadFormat } from '@skyhook-io/k8s-ui'

package/src/components/logs/LogsViewer.tsx

@@ -0,0 +1,44 @@
+import { useCallback } from 'react'
+import { fetchJSON, createLogStream } from '../../api/client'
+import { LogsViewer as SharedLogsViewer } from '@skyhook-io/k8s-ui'
+import type { LogsFetchParams } from '@skyhook-io/k8s-ui'
+import { useDesktopDownload } from '../../hooks/useDesktopDownload'
+
+interface LogsViewerProps {
+  namespace: string
+  podName: string
+  containers: string[]
+  initialContainer?: string
+}
+
+export function LogsViewer({ namespace, podName, containers, initialContainer }: LogsViewerProps) {
+  const desktopDownload = useDesktopDownload()
+
+  const fetchLogs = useCallback(async (params: LogsFetchParams) => {
+    const query = new URLSearchParams()
+    query.set('container', params.container)
+    if (params.tailLines) query.set('tailLines', String(params.tailLines))
+    if (params.sinceSeconds) query.set('sinceSeconds', String(params.sinceSeconds))
+    if (params.previous) query.set('previous', 'true')
+    const data = await fetchJSON<{ logs: { [container: string]: string } }>(
+      `/pods/${namespace}/${podName}/logs?${query}`
+    )
+    return data.logs
+  }, [namespace, podName])
+
+  const makeStream = useCallback((params: Omit<LogsFetchParams, 'previous'>) => {
+    return createLogStream(namespace, podName, params)
+  }, [namespace, podName])
+
+  return (
+    <SharedLogsViewer
+      namespace={namespace}
+      podName={podName}
+      containers={containers}
+      initialContainer={initialContainer}
+      fetchLogs={fetchLogs}
+      createStream={makeStream}
+      overrideDownload={desktopDownload}
+    />
+  )
+}

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -0,0 +1,40 @@
+import { useCallback } from 'react'
+import { fetchJSON, createWorkloadLogStream } from '../../api/client'
+import { WorkloadLogsViewer as SharedWorkloadLogsViewer } from '@skyhook-io/k8s-ui'
+import type { WorkloadLogsFetchParams, WorkloadLogsResult } from '@skyhook-io/k8s-ui'
+import { useDesktopDownload } from '../../hooks/useDesktopDownload'
+
+interface WorkloadLogsViewerProps {
+  kind: string
+  namespace: string
+  name: string
+}
+
+export function WorkloadLogsViewer({ kind, namespace, name }: WorkloadLogsViewerProps) {
+  const desktopDownload = useDesktopDownload()
+
+  const fetchAll = useCallback(async (params: WorkloadLogsFetchParams): Promise<WorkloadLogsResult> => {
+    const query = new URLSearchParams()
+    if (params.container) query.set('container', params.container)
+    if (params.tailLines) query.set('tailLines', String(params.tailLines))
+    if (params.sinceSeconds) query.set('sinceSeconds', String(params.sinceSeconds))
+    const qs = query.toString()
+    const data = await fetchJSON<WorkloadLogsResult>(
+      `/workloads/${kind}/${namespace}/${name}/logs${qs ? `?${qs}` : ''}`
+    )
+    return data
+  }, [kind, namespace, name])
+
+  const makeStream = useCallback((params: WorkloadLogsFetchParams) => {
+    return createWorkloadLogStream(kind, namespace, name, params)
+  }, [kind, namespace, name])
+
+  return (
+    <SharedWorkloadLogsViewer
+      name={name}
+      fetchAll={fetchAll}
+      createStream={makeStream}
+      overrideDownload={desktopDownload}
+    />
+  )
+}

package/src/components/logs/useLogBuffer.ts

@@ -0,0 +1,2 @@
+export { useLogBuffer, detectLogLevel } from '@skyhook-io/k8s-ui'
+export type { LogLevel, LogEntry } from '@skyhook-io/k8s-ui'

package/src/components/logs/useLogSearch.ts

@@ -0,0 +1 @@
+export { useLogSearch } from '@skyhook-io/k8s-ui'