From 77e9b680ae665c3657c497b74130a2615d00b47c Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Sat, 21 Mar 2026 20:05:15 -0500
Subject: [PATCH] feat(19-04): add SNMPMetricsSection component for SNMP
 profile display

- Shows assigned SNMP profile name with system badge indicator
- Shows profile description when available
- Returns null when no snmpProfileId is assigned
- Fetches profile data via snmpProfilesApi.get
- Foundation for Phase 20 custom OID charting (PROF-03)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/fleet/SNMPMetricsSection.tsx   | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 frontend/src/components/fleet/SNMPMetricsSection.tsx

diff --git a/frontend/src/components/fleet/SNMPMetricsSection.tsx b/frontend/src/components/fleet/SNMPMetricsSection.tsx
new file mode 100644
index 0000000..a9e85fc
--- /dev/null
+++ b/frontend/src/components/fleet/SNMPMetricsSection.tsx
@@ -0,0 +1,51 @@
+import { useQuery } from '@tanstack/react-query'
+import { Activity } from 'lucide-react'
+import { snmpProfilesApi } from '@/lib/api'
+
+interface SNMPMetricsSectionProps {
+  tenantId: string
+  deviceId: string
+  snmpProfileId: string | null
+}
+
+/**
+ * Displays the assigned SNMP profile info for an SNMP device.
+ *
+ * Standard metrics (interfaces, health) flow through existing hypertables
+ * and are shown by InterfaceGauges. Custom OID charting is Phase 20 (PROF-03).
+ */
+export function SNMPMetricsSection({ tenantId, snmpProfileId }: SNMPMetricsSectionProps) {
+  if (!snmpProfileId) return null
+
+  const { data: profile } = useQuery({
+    queryKey: ['snmp-profile', tenantId, snmpProfileId],
+    queryFn: () => snmpProfilesApi.get(tenantId, snmpProfileId!),
+    enabled: !!snmpProfileId,
+  })
+
+  return (
+    <div className="rounded-sm border border-border-default bg-panel px-3 py-2">
+      <div className="flex items-center gap-2 mb-1">
+        <Activity className="h-4 w-4 text-text-muted" />
+        <h3 className="text-sm font-medium text-text-secondary">SNMP Profile</h3>
+      </div>
+      <div className="space-y-1">
+        <div className="flex items-center gap-3 py-1 border-b border-border-subtle">
+          <span className="text-[10px] text-text-muted w-24 flex-shrink-0">Profile</span>
+          <span className="text-xs text-text-primary">
+            {profile?.name ?? 'Loading...'}
+            {profile?.is_system && (
+              <span className="ml-1.5 text-[10px] text-text-muted">(system)</span>
+            )}
+          </span>
+        </div>
+        {profile?.description && (
+          <div className="flex items-center gap-3 py-1">
+            <span className="text-[10px] text-text-muted w-24 flex-shrink-0">Description</span>
+            <span className="text-xs text-text-secondary">{profile.description}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}