feat(config): make device hostnames clickable in batch config

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-18 11:21:22 -05:00
parent 7fc6f23960
commit 1be47d94fb

View File

@@ -40,6 +40,7 @@ import {
import { toast } from '@/components/ui/toast' import { toast } from '@/components/ui/toast'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { TableSkeleton } from '@/components/ui/page-skeleton' import { TableSkeleton } from '@/components/ui/page-skeleton'
import { DeviceLink } from '@/components/ui/device-link'
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Types // Types
@@ -241,7 +242,9 @@ function DeviceSelector({
aria-label={`Select ${device.hostname}`} aria-label={`Select ${device.hostname}`}
/> />
</td> </td>
<td className="px-3 py-2 font-medium">{device.hostname}</td> <td className="px-3 py-2 font-medium">
<DeviceLink tenantId={tenantId} deviceId={device.id}>{device.hostname}</DeviceLink>
</td>
<td className="px-3 py-2 font-mono text-text-secondary">{device.ip_address}</td> <td className="px-3 py-2 font-mono text-text-secondary">{device.ip_address}</td>
<td className="px-3 py-2"> <td className="px-3 py-2">
<span <span
@@ -580,6 +583,7 @@ function buildBatchChange(
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
function ExecutionPanel({ function ExecutionPanel({
tenantId,
change, change,
devices, devices,
execStates, execStates,
@@ -587,6 +591,7 @@ function ExecutionPanel({
isComplete, isComplete,
onExecute, onExecute,
}: { }: {
tenantId: string
change: BatchChange change: BatchChange
devices: DeviceResponse[] devices: DeviceResponse[]
execStates: DeviceExecState[] execStates: DeviceExecState[]
@@ -649,7 +654,9 @@ function ExecutionPanel({
<tbody> <tbody>
{execStates.map((state) => ( {execStates.map((state) => (
<tr key={state.deviceId} className="border-b border-border/50 last:border-0"> <tr key={state.deviceId} className="border-b border-border/50 last:border-0">
<td className="px-3 py-2 font-medium">{state.hostname}</td> <td className="px-3 py-2 font-medium">
<DeviceLink tenantId={tenantId} deviceId={state.deviceId}>{state.hostname}</DeviceLink>
</td>
<td className="px-3 py-2 font-mono text-text-secondary">{state.ipAddress}</td> <td className="px-3 py-2 font-mono text-text-secondary">{state.ipAddress}</td>
<td className="px-3 py-2"> <td className="px-3 py-2">
<StatusIcon status={state.status} /> <StatusIcon status={state.status} />
@@ -848,6 +855,7 @@ export function BatchConfigPanel({ tenantId }: BatchConfigPanelProps) {
{step === 3 && batchChange && ( {step === 3 && batchChange && (
<ExecutionPanel <ExecutionPanel
tenantId={tenantId}
change={batchChange} change={batchChange}
devices={selectedDevices} devices={selectedDevices}
execStates={execStates} execStates={execStates}