mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2026-04-25 08:56:21 +00:00
396 lines
14 KiB
TypeScript
396 lines
14 KiB
TypeScript
"use client"
|
||
|
||
import { cn } from "@/lib/utils"
|
||
|
||
interface SriovInfo {
|
||
role: "vf" | "pf-active" | "pf-idle"
|
||
physfn?: string // VF only: parent PF BDF
|
||
vfCount?: number // PF only: active VF count
|
||
totalvfs?: number // PF only: maximum VFs
|
||
}
|
||
|
||
interface GpuSwitchModeIndicatorProps {
|
||
mode: "lxc" | "vm" | "sriov" | "unknown"
|
||
isEditing?: boolean
|
||
pendingMode?: "lxc" | "vm" | null
|
||
onToggle?: (e: React.MouseEvent) => void
|
||
className?: string
|
||
sriovInfo?: SriovInfo
|
||
}
|
||
|
||
export function GpuSwitchModeIndicator({
|
||
mode,
|
||
isEditing = false,
|
||
pendingMode = null,
|
||
onToggle,
|
||
className,
|
||
sriovInfo,
|
||
}: GpuSwitchModeIndicatorProps) {
|
||
// SR-IOV is a non-editable hardware state. Pending toggles don't apply here.
|
||
const displayMode = mode === "sriov" ? "sriov" : (pendingMode ?? mode)
|
||
const isLxcActive = displayMode === "lxc"
|
||
const isVmActive = displayMode === "vm"
|
||
const isSriovActive = displayMode === "sriov"
|
||
const hasChanged =
|
||
mode !== "sriov" && pendingMode !== null && pendingMode !== mode
|
||
|
||
// Colors
|
||
const sriovColor = "#14b8a6" // teal-500
|
||
const activeColor = isSriovActive
|
||
? sriovColor
|
||
: isLxcActive
|
||
? "#3b82f6"
|
||
: isVmActive
|
||
? "#a855f7"
|
||
: "#6b7280"
|
||
const inactiveColor = "#374151" // gray-700 for dark theme
|
||
const dimmedColor = "#4b5563" // gray-600 for dashed SR-IOV branches
|
||
const lxcColor = isLxcActive ? "#3b82f6" : inactiveColor
|
||
const vmColor = isVmActive ? "#a855f7" : inactiveColor
|
||
|
||
const handleClick = (e: React.MouseEvent) => {
|
||
// SR-IOV state can't be toggled — swallow the click so it doesn't reach
|
||
// the card (which would open the detail modal unexpectedly from this
|
||
// area). For lxc/vm, preserve the original behavior.
|
||
if (isSriovActive) {
|
||
e.stopPropagation()
|
||
return
|
||
}
|
||
if (isEditing) {
|
||
e.stopPropagation()
|
||
if (onToggle) {
|
||
onToggle(e)
|
||
}
|
||
}
|
||
// When not editing, let the click propagate to the card to open the modal
|
||
}
|
||
|
||
// Build the VF count label shown in the SR-IOV badge. For PFs we know
|
||
// exactly how many VFs are active; for a VF we show its parent PF.
|
||
const sriovBadgeText = (() => {
|
||
if (!isSriovActive) return ""
|
||
if (sriovInfo?.role === "vf") return "SR-IOV VF"
|
||
if (sriovInfo?.vfCount && sriovInfo.vfCount > 0) return `SR-IOV ×${sriovInfo.vfCount}`
|
||
return "SR-IOV"
|
||
})()
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"flex items-center gap-6",
|
||
isEditing && !isSriovActive && "cursor-pointer",
|
||
className
|
||
)}
|
||
onClick={handleClick}
|
||
>
|
||
{/* Large SVG Diagram */}
|
||
<svg
|
||
viewBox="0 0 220 100"
|
||
className="h-24 w-56 flex-shrink-0"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
{/* GPU Chip - Large with "GPU" text */}
|
||
<g transform="translate(0, 22)">
|
||
{/* Main chip body */}
|
||
<rect
|
||
x="4"
|
||
y="8"
|
||
width="44"
|
||
height="36"
|
||
rx="6"
|
||
fill={`${activeColor}20`}
|
||
stroke={activeColor}
|
||
strokeWidth="2.5"
|
||
className="transition-all duration-300"
|
||
/>
|
||
{/* Chip pins - top */}
|
||
<line x1="14" y1="2" x2="14" y2="8" stroke={activeColor} strokeWidth="2.5" strokeLinecap="round" className="transition-all duration-300" />
|
||
<line x1="26" y1="2" x2="26" y2="8" stroke={activeColor} strokeWidth="2.5" strokeLinecap="round" className="transition-all duration-300" />
|
||
<line x1="38" y1="2" x2="38" y2="8" stroke={activeColor} strokeWidth="2.5" strokeLinecap="round" className="transition-all duration-300" />
|
||
{/* Chip pins - bottom */}
|
||
<line x1="14" y1="44" x2="14" y2="50" stroke={activeColor} strokeWidth="2.5" strokeLinecap="round" className="transition-all duration-300" />
|
||
<line x1="26" y1="44" x2="26" y2="50" stroke={activeColor} strokeWidth="2.5" strokeLinecap="round" className="transition-all duration-300" />
|
||
<line x1="38" y1="44" x2="38" y2="50" stroke={activeColor} strokeWidth="2.5" strokeLinecap="round" className="transition-all duration-300" />
|
||
{/* GPU text */}
|
||
<text
|
||
x="26"
|
||
y="32"
|
||
textAnchor="middle"
|
||
fill={activeColor}
|
||
className="text-[14px] font-bold transition-all duration-300"
|
||
style={{ fontFamily: 'system-ui, sans-serif' }}
|
||
>
|
||
GPU
|
||
</text>
|
||
</g>
|
||
|
||
{/* Connection line from GPU to switch */}
|
||
<line
|
||
x1="52"
|
||
y1="50"
|
||
x2="78"
|
||
y2="50"
|
||
stroke={activeColor}
|
||
strokeWidth="3"
|
||
strokeLinecap="round"
|
||
className="transition-all duration-300"
|
||
/>
|
||
|
||
{/* Central Switch Node - Large circle with inner dot */}
|
||
<circle
|
||
cx="95"
|
||
cy="50"
|
||
r="14"
|
||
fill={isEditing && !isSriovActive ? "#f59e0b20" : `${activeColor}20`}
|
||
stroke={isEditing && !isSriovActive ? "#f59e0b" : activeColor}
|
||
strokeWidth="3"
|
||
className="transition-all duration-300"
|
||
/>
|
||
<circle
|
||
cx="95"
|
||
cy="50"
|
||
r="6"
|
||
fill={isEditing && !isSriovActive ? "#f59e0b" : activeColor}
|
||
className="transition-all duration-300"
|
||
/>
|
||
|
||
{/* LXC Branch Line - going up-right.
|
||
In SR-IOV mode the branch is dashed + dimmed to show that the
|
||
target is theoretically reachable via a VF but not controlled
|
||
by ProxMenux. */}
|
||
<path
|
||
d="M 109 42 L 135 20"
|
||
fill="none"
|
||
stroke={isSriovActive ? dimmedColor : lxcColor}
|
||
strokeWidth={isLxcActive ? "3.5" : "2"}
|
||
strokeLinecap="round"
|
||
strokeDasharray={isSriovActive ? "3 3" : undefined}
|
||
className="transition-all duration-300"
|
||
/>
|
||
|
||
{/* VM Branch Line - going down-right (dashed/dimmed in SR-IOV). */}
|
||
<path
|
||
d="M 109 58 L 135 80"
|
||
fill="none"
|
||
stroke={isSriovActive ? dimmedColor : vmColor}
|
||
strokeWidth={isVmActive ? "3.5" : "2"}
|
||
strokeLinecap="round"
|
||
strokeDasharray={isSriovActive ? "3 3" : undefined}
|
||
className="transition-all duration-300"
|
||
/>
|
||
|
||
{/* SR-IOV in-line connector + badge (only when mode === 'sriov').
|
||
A horizontal line from the switch node leads to a pill-shaped
|
||
badge carrying the "SR-IOV ×N" label. Placed on the GPU's
|
||
baseline to visually read as an in-line extension, not as a
|
||
third branch. */}
|
||
{isSriovActive && (
|
||
<>
|
||
<line
|
||
x1="109"
|
||
y1="50"
|
||
x2="130"
|
||
y2="50"
|
||
stroke={sriovColor}
|
||
strokeWidth="3"
|
||
strokeLinecap="round"
|
||
className="transition-all duration-300"
|
||
/>
|
||
<rect
|
||
x="132"
|
||
y="40"
|
||
width="60"
|
||
height="20"
|
||
rx="10"
|
||
fill={`${sriovColor}25`}
|
||
stroke={sriovColor}
|
||
strokeWidth="2"
|
||
className="transition-all duration-300"
|
||
/>
|
||
<text
|
||
x="162"
|
||
y="54"
|
||
textAnchor="middle"
|
||
fill={sriovColor}
|
||
className="text-[11px] font-bold transition-all duration-300"
|
||
style={{ fontFamily: 'system-ui, sans-serif' }}
|
||
>
|
||
{sriovBadgeText}
|
||
</text>
|
||
</>
|
||
)}
|
||
|
||
{/* LXC Container Icon - dimmed/smaller in SR-IOV mode. */}
|
||
{!isSriovActive && (
|
||
<g transform="translate(138, 2)">
|
||
<rect
|
||
x="0"
|
||
y="0"
|
||
width="32"
|
||
height="28"
|
||
rx="4"
|
||
fill={isLxcActive ? `${lxcColor}25` : "transparent"}
|
||
stroke={lxcColor}
|
||
strokeWidth={isLxcActive ? "2.5" : "1.5"}
|
||
className="transition-all duration-300"
|
||
/>
|
||
<line x1="0" y1="10" x2="32" y2="10" stroke={lxcColor} strokeWidth={isLxcActive ? "1.5" : "1"} className="transition-all duration-300" />
|
||
<line x1="0" y1="19" x2="32" y2="19" stroke={lxcColor} strokeWidth={isLxcActive ? "1.5" : "1"} className="transition-all duration-300" />
|
||
<circle cx="7" cy="5" r="2" fill={lxcColor} className="transition-all duration-300" />
|
||
<circle cx="7" cy="14.5" r="2" fill={lxcColor} className="transition-all duration-300" />
|
||
<circle cx="7" cy="23.5" r="2" fill={lxcColor} className="transition-all duration-300" />
|
||
</g>
|
||
)}
|
||
{/* SR-IOV: compact dimmed LXC glyph so the geometry stays recognizable
|
||
but it's clearly not the active target. */}
|
||
{isSriovActive && (
|
||
<g transform="translate(138, 6)" opacity="0.35">
|
||
<rect x="0" y="0" width="20" height="18" rx="3" fill="transparent" stroke={dimmedColor} strokeWidth="1.5" />
|
||
<line x1="0" y1="6" x2="20" y2="6" stroke={dimmedColor} strokeWidth="1" />
|
||
<line x1="0" y1="12" x2="20" y2="12" stroke={dimmedColor} strokeWidth="1" />
|
||
</g>
|
||
)}
|
||
|
||
{/* LXC Label */}
|
||
{!isSriovActive && (
|
||
<text
|
||
x="188"
|
||
y="22"
|
||
textAnchor="start"
|
||
fill={lxcColor}
|
||
className={cn(
|
||
"transition-all duration-300",
|
||
isLxcActive ? "text-[14px] font-bold" : "text-[12px] font-medium"
|
||
)}
|
||
style={{ fontFamily: 'system-ui, sans-serif' }}
|
||
>
|
||
LXC
|
||
</text>
|
||
)}
|
||
{isSriovActive && (
|
||
<text
|
||
x="162"
|
||
y="16"
|
||
fill={dimmedColor}
|
||
className="text-[9px] font-medium"
|
||
style={{ fontFamily: 'system-ui, sans-serif' }}
|
||
>
|
||
LXC
|
||
</text>
|
||
)}
|
||
|
||
{/* VM Monitor Icon - active view */}
|
||
{!isSriovActive && (
|
||
<g transform="translate(138, 65)">
|
||
<rect
|
||
x="2"
|
||
y="0"
|
||
width="28"
|
||
height="18"
|
||
rx="3"
|
||
fill={isVmActive ? `${vmColor}25` : "transparent"}
|
||
stroke={vmColor}
|
||
strokeWidth={isVmActive ? "2.5" : "1.5"}
|
||
className="transition-all duration-300"
|
||
/>
|
||
<rect
|
||
x="5"
|
||
y="3"
|
||
width="22"
|
||
height="12"
|
||
rx="1"
|
||
fill={isVmActive ? `${vmColor}30` : `${vmColor}10`}
|
||
className="transition-all duration-300"
|
||
/>
|
||
<line x1="16" y1="18" x2="16" y2="24" stroke={vmColor} strokeWidth={isVmActive ? "2.5" : "1.5"} strokeLinecap="round" className="transition-all duration-300" />
|
||
<line x1="8" y1="24" x2="24" y2="24" stroke={vmColor} strokeWidth={isVmActive ? "2.5" : "1.5"} strokeLinecap="round" className="transition-all duration-300" />
|
||
</g>
|
||
)}
|
||
{/* SR-IOV: compact dimmed VM monitor glyph, mirror of the LXC glyph. */}
|
||
{isSriovActive && (
|
||
<g transform="translate(138, 72)" opacity="0.35">
|
||
<rect x="0" y="0" width="20" height="13" rx="2" fill="transparent" stroke={dimmedColor} strokeWidth="1.5" />
|
||
<line x1="10" y1="13" x2="10" y2="17" stroke={dimmedColor} strokeWidth="1.5" strokeLinecap="round" />
|
||
<line x1="5" y1="17" x2="15" y2="17" stroke={dimmedColor} strokeWidth="1.5" strokeLinecap="round" />
|
||
</g>
|
||
)}
|
||
|
||
{/* VM Label */}
|
||
{!isSriovActive && (
|
||
<text
|
||
x="188"
|
||
y="84"
|
||
textAnchor="start"
|
||
fill={vmColor}
|
||
className={cn(
|
||
"transition-all duration-300",
|
||
isVmActive ? "text-[14px] font-bold" : "text-[12px] font-medium"
|
||
)}
|
||
style={{ fontFamily: 'system-ui, sans-serif' }}
|
||
>
|
||
VM
|
||
</text>
|
||
)}
|
||
{isSriovActive && (
|
||
<text
|
||
x="162"
|
||
y="82"
|
||
fill={dimmedColor}
|
||
className="text-[9px] font-medium"
|
||
style={{ fontFamily: 'system-ui, sans-serif' }}
|
||
>
|
||
VM
|
||
</text>
|
||
)}
|
||
</svg>
|
||
|
||
{/* Status Text - Large like GPU name */}
|
||
<div className="flex flex-col gap-1 min-w-0 flex-1">
|
||
<span
|
||
className={cn(
|
||
"text-base font-semibold transition-all duration-300",
|
||
isSriovActive
|
||
? "text-teal-500"
|
||
: isLxcActive
|
||
? "text-blue-500"
|
||
: isVmActive
|
||
? "text-purple-500"
|
||
: "text-muted-foreground"
|
||
)}
|
||
>
|
||
{isSriovActive
|
||
? "SR-IOV active"
|
||
: isLxcActive
|
||
? "Ready for LXC containers"
|
||
: isVmActive
|
||
? "Ready for VM passthrough"
|
||
: "Mode unknown"}
|
||
</span>
|
||
<span className="text-sm text-muted-foreground">
|
||
{isSriovActive
|
||
? "Virtual Functions managed externally"
|
||
: isLxcActive
|
||
? "Native driver active"
|
||
: isVmActive
|
||
? "VFIO-PCI driver active"
|
||
: "No driver detected"}
|
||
</span>
|
||
{isSriovActive && sriovInfo && (
|
||
<span className="text-xs font-mono text-teal-600/80 dark:text-teal-400/80">
|
||
{sriovInfo.role === "vf"
|
||
? `Virtual Function${sriovInfo.physfn ? ` · parent PF ${sriovInfo.physfn}` : ""}`
|
||
: sriovInfo.vfCount !== undefined
|
||
? `1 PF + ${sriovInfo.vfCount} VF${sriovInfo.vfCount === 1 ? "" : "s"}${sriovInfo.totalvfs ? ` / ${sriovInfo.totalvfs} max` : ""}`
|
||
: null}
|
||
</span>
|
||
)}
|
||
{hasChanged && (
|
||
<span className="text-sm text-amber-500 font-medium animate-pulse">
|
||
Change pending...
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|