mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-10-10 20:06:18 +00:00
Update AppImage
This commit is contained in:
MacRimi
@@ -3,7 +3,18 @@
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Thermometer, CpuIcon, ChevronDown, ChevronUp, Zap } from "lucide-react"
|
||||
import {
|
||||
Thermometer,
|
||||
CpuIcon,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Zap,
|
||||
HardDrive,
|
||||
Network,
|
||||
FanIcon,
|
||||
PowerIcon,
|
||||
Battery,
|
||||
} from "lucide-react"
|
||||
import useSWR from "swr"
|
||||
import { useState } from "react"
|
||||
import { type HardwareData, fetcher } from "@/types/hardware"
|
||||
@@ -94,9 +105,62 @@ export default function Hardware() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Network Summary */}
|
||||
|
||||
{/* Storage Summary */}
|
||||
{hardwareData?.storage_devices && hardwareData.storage_devices.length > 0 && (
|
||||
<Card className="border-border/50 bg-card/50 p-6">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<HardDrive className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-lg font-semibold">Storage Summary</h2>
|
||||
<Badge variant="outline" className="ml-auto">
|
||||
{hardwareData.storage_devices.length} devices
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
|
||||
{hardwareData.storage_devices.map((device, index) => (
|
||||
<div key={index} className="rounded-lg border border-border/30 bg-background/50 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">{device.name}</span>
|
||||
<Badge className="bg-orange-500/10 text-orange-500 border-orange-500/20">{device.type}</Badge>
|
||||
</div>
|
||||
{device.size && <p className="mt-1 text-xs text-muted-foreground">{device.size}</p>}
|
||||
{device.model && <p className="mt-1 text-xs text-muted-foreground">{device.model}</p>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Network Summary */}
|
||||
{hardwareData?.pci_devices &&
|
||||
hardwareData.pci_devices.filter((d) => d.type.toLowerCase().includes("network")).length > 0 && (
|
||||
<Card className="border-border/50 bg-card/50 p-6">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<Network className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-lg font-semibold">Network Summary</h2>
|
||||
<Badge variant="outline" className="ml-auto">
|
||||
{hardwareData.pci_devices.filter((d) => d.type.toLowerCase().includes("network")).length} interfaces
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
|
||||
{hardwareData.pci_devices
|
||||
.filter((d) => d.type.toLowerCase().includes("network"))
|
||||
.map((device, index) => (
|
||||
<div key={index} className="rounded-lg border border-border/30 bg-background/50 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">{device.device}</span>
|
||||
<Badge className="bg-blue-500/10 text-blue-500 border-blue-500/20">Ethernet</Badge>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{device.vendor}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-4 text-xs text-muted-foreground">
|
||||
For detailed network information, see the Network section
|
||||
</p>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* PCI Devices */}
|
||||
{hardwareData?.pci_devices && hardwareData.pci_devices.length > 0 && (
|
||||
@@ -218,7 +282,122 @@ export default function Hardware() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* ... existing code for Fans, Power Supply, UPS sections ... */}
|
||||
{/* Fans */}
|
||||
{hardwareData?.fans && hardwareData.fans.length > 0 && (
|
||||
<Card className="border-border/50 bg-card/50 p-6">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<FanIcon className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-lg font-semibold">System Fans</h2>
|
||||
<Badge variant="outline" className="ml-auto">
|
||||
{hardwareData.fans.length} fans
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{hardwareData.fans.map((fan, index) => (
|
||||
<div key={index} className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">{fan.name}</span>
|
||||
<span className="text-sm font-semibold text-blue-500">
|
||||
{fan.speed.toFixed(1)} {fan.unit}
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={fan.speed} className="h-2" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Power Supplies */}
|
||||
{hardwareData?.power_supplies && hardwareData.power_supplies.length > 0 && (
|
||||
<Card className="border-border/50 bg-card/50 p-6">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<PowerIcon className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-lg font-semibold">Power Supplies</h2>
|
||||
<Badge variant="outline" className="ml-auto">
|
||||
{hardwareData.power_supplies.length} PSUs
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{hardwareData.power_supplies.map((psu, index) => (
|
||||
<div key={index} className="rounded-lg border border-border/30 bg-background/50 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">{psu.name}</span>
|
||||
{psu.status && <Badge variant={psu.status === "OK" ? "default" : "destructive"}>{psu.status}</Badge>}
|
||||
</div>
|
||||
<p className="mt-2 text-2xl font-bold text-primary">{psu.watts} W</p>
|
||||
<p className="text-xs text-muted-foreground">Current Output</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* UPS */}
|
||||
{hardwareData?.ups && (
|
||||
<Card className="border-border/50 bg-card/50 p-6">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<Battery className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-lg font-semibold">UPS Status</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg border border-border/30 bg-background/50 p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="text-sm font-medium">{hardwareData.ups.name}</span>
|
||||
<Badge variant={hardwareData.ups.status === "OL" ? "default" : "destructive"}>
|
||||
{hardwareData.ups.status}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{hardwareData.ups.battery_charge !== undefined && (
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-muted-foreground">Battery Charge</span>
|
||||
<span className="text-sm font-semibold">{hardwareData.ups.battery_charge}%</span>
|
||||
</div>
|
||||
<Progress value={hardwareData.ups.battery_charge} className="h-2" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hardwareData.ups.load !== undefined && (
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-muted-foreground">Load</span>
|
||||
<span className="text-sm font-semibold">{hardwareData.ups.load}%</span>
|
||||
</div>
|
||||
<Progress value={hardwareData.ups.load} className="h-2" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hardwareData.ups.battery_runtime !== undefined && (
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Runtime</span>
|
||||
<p className="text-sm font-semibold">{Math.floor(hardwareData.ups.battery_runtime / 60)} min</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hardwareData.ups.input_voltage !== undefined && (
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Input Voltage</span>
|
||||
<p className="text-sm font-semibold">{hardwareData.ups.input_voltage} V</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hardwareData.ups.output_voltage !== undefined && (
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Output Voltage</span>
|
||||
<p className="text-sm font-semibold">{hardwareData.ups.output_voltage} V</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user