mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-11-18 11:36:17 +00:00
Update AppImage
This commit is contained in:
MacRimi
@@ -27,7 +27,6 @@ import {
|
|||||||
import Image from "next/image"
|
import Image from "next/image"
|
||||||
import { ThemeToggle } from "./theme-toggle"
|
import { ThemeToggle } from "./theme-toggle"
|
||||||
import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
|
import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
|
||||||
import { useScrollDirection } from "@/hooks/use-scroll-direction"
|
|
||||||
|
|
||||||
interface SystemStatus {
|
interface SystemStatus {
|
||||||
status: "healthy" | "warning" | "critical"
|
status: "healthy" | "warning" | "critical"
|
||||||
@@ -61,8 +60,6 @@ export function ProxmoxDashboard() {
|
|||||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||||
const [activeTab, setActiveTab] = useState("overview")
|
const [activeTab, setActiveTab] = useState("overview")
|
||||||
|
|
||||||
const { scrollDirection, isAtTop } = useScrollDirection()
|
|
||||||
|
|
||||||
const fetchSystemData = useCallback(async () => {
|
const fetchSystemData = useCallback(async () => {
|
||||||
console.log("[v0] Fetching system data from Flask server...")
|
console.log("[v0] Fetching system data from Flask server...")
|
||||||
console.log("[v0] Current window location:", window.location.href)
|
console.log("[v0] Current window location:", window.location.href)
|
||||||
@@ -297,185 +294,169 @@ export function ProxmoxDashboard() {
|
|||||||
|
|
||||||
<div className="container mx-auto px-4 md:px-6 py-4 md:py-6">
|
<div className="container mx-auto px-4 md:px-6 py-4 md:py-6">
|
||||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4 md:space-y-6">
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4 md:space-y-6">
|
||||||
<div className="sticky top-[88px] md:top-[72px] left-0 right-0 z-40 mt-4 md:mt-4">
|
<TabsList className="hidden md:grid w-full grid-cols-6 bg-card border border-border">
|
||||||
<div
|
<TabsTrigger
|
||||||
className={`transition-transform duration-300 ${
|
value="overview"
|
||||||
scrollDirection === "down" && !isAtTop ? "-translate-y-[200px]" : "translate-y-0"
|
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<div className="container mx-auto">
|
Overview
|
||||||
<TabsList className="hidden md:grid w-full grid-cols-6 bg-card border border-border">
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="overview"
|
value="storage"
|
||||||
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
|
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
|
||||||
>
|
>
|
||||||
Overview
|
Storage
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="storage"
|
value="network"
|
||||||
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
|
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
|
||||||
>
|
>
|
||||||
Storage
|
Network
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="network"
|
value="vms"
|
||||||
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
|
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
|
||||||
>
|
>
|
||||||
Network
|
VMs & LXCs
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="vms"
|
value="hardware"
|
||||||
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
|
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
|
||||||
>
|
>
|
||||||
VMs & LXCs
|
Hardware
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="hardware"
|
value="logs"
|
||||||
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
|
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
|
||||||
>
|
>
|
||||||
Hardware
|
System Logs
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
</TabsList>
|
||||||
value="logs"
|
|
||||||
className="data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:rounded-md"
|
|
||||||
>
|
|
||||||
System Logs
|
|
||||||
</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
|
|
||||||
<Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
|
<Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
|
||||||
<div className="md:hidden">
|
<div className="md:hidden">
|
||||||
<SheetTrigger asChild>
|
<SheetTrigger asChild>
|
||||||
<Button variant="outline" className="w-full justify-between bg-card border-border">
|
<Button variant="outline" className="w-full justify-between bg-card border-border">
|
||||||
<span>{getActiveTabLabel()}</span>
|
<span>{getActiveTabLabel()}</span>
|
||||||
<Menu className="h-4 w-4" />
|
<Menu className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</SheetTrigger>
|
</SheetTrigger>
|
||||||
</div>
|
|
||||||
<SheetContent side="top" className="bg-card border-border">
|
|
||||||
<div className="flex flex-col gap-2 mt-4">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => {
|
|
||||||
setActiveTab("overview")
|
|
||||||
setMobileMenuOpen(false)
|
|
||||||
}}
|
|
||||||
className={`w-full justify-start gap-3 ${
|
|
||||||
activeTab === "overview"
|
|
||||||
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<LayoutDashboard className="h-5 w-5" />
|
|
||||||
<span>Overview</span>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => {
|
|
||||||
setActiveTab("storage")
|
|
||||||
setMobileMenuOpen(false)
|
|
||||||
}}
|
|
||||||
className={`w-full justify-start gap-3 ${
|
|
||||||
activeTab === "storage"
|
|
||||||
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<HardDrive className="h-5 w-5" />
|
|
||||||
<span>Storage</span>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => {
|
|
||||||
setActiveTab("network")
|
|
||||||
setMobileMenuOpen(false)
|
|
||||||
}}
|
|
||||||
className={`w-full justify-start gap-3 ${
|
|
||||||
activeTab === "network"
|
|
||||||
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<NetworkIcon className="h-5 w-5" />
|
|
||||||
<span>Network</span>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => {
|
|
||||||
setActiveTab("vms")
|
|
||||||
setMobileMenuOpen(false)
|
|
||||||
}}
|
|
||||||
className={`w-full justify-start gap-3 ${
|
|
||||||
activeTab === "vms"
|
|
||||||
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Box className="h-5 w-5" />
|
|
||||||
<span>VMs & LXCs</span>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => {
|
|
||||||
setActiveTab("hardware")
|
|
||||||
setMobileMenuOpen(false)
|
|
||||||
}}
|
|
||||||
className={`w-full justify-start gap-3 ${
|
|
||||||
activeTab === "hardware"
|
|
||||||
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Cpu className="h-5 w-5" />
|
|
||||||
<span>Hardware</span>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => {
|
|
||||||
setActiveTab("logs")
|
|
||||||
setMobileMenuOpen(false)
|
|
||||||
}}
|
|
||||||
className={`w-full justify-start gap-3 ${
|
|
||||||
activeTab === "logs"
|
|
||||||
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<FileText className="h-5 w-5" />
|
|
||||||
<span>System Logs</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</SheetContent>
|
|
||||||
</Sheet>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<SheetContent side="top" className="bg-card border-border">
|
||||||
|
<div className="flex flex-col gap-2 mt-4">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
setActiveTab("overview")
|
||||||
|
setMobileMenuOpen(false)
|
||||||
|
}}
|
||||||
|
className={`w-full justify-start gap-3 ${
|
||||||
|
activeTab === "overview"
|
||||||
|
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<LayoutDashboard className="h-5 w-5" />
|
||||||
|
<span>Overview</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
setActiveTab("storage")
|
||||||
|
setMobileMenuOpen(false)
|
||||||
|
}}
|
||||||
|
className={`w-full justify-start gap-3 ${
|
||||||
|
activeTab === "storage"
|
||||||
|
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<HardDrive className="h-5 w-5" />
|
||||||
|
<span>Storage</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
setActiveTab("network")
|
||||||
|
setMobileMenuOpen(false)
|
||||||
|
}}
|
||||||
|
className={`w-full justify-start gap-3 ${
|
||||||
|
activeTab === "network"
|
||||||
|
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<NetworkIcon className="h-5 w-5" />
|
||||||
|
<span>Network</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
setActiveTab("vms")
|
||||||
|
setMobileMenuOpen(false)
|
||||||
|
}}
|
||||||
|
className={`w-full justify-start gap-3 ${
|
||||||
|
activeTab === "vms" ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Box className="h-5 w-5" />
|
||||||
|
<span>VMs & LXCs</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
setActiveTab("hardware")
|
||||||
|
setMobileMenuOpen(false)
|
||||||
|
}}
|
||||||
|
className={`w-full justify-start gap-3 ${
|
||||||
|
activeTab === "hardware"
|
||||||
|
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Cpu className="h-5 w-5" />
|
||||||
|
<span>Hardware</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
setActiveTab("logs")
|
||||||
|
setMobileMenuOpen(false)
|
||||||
|
}}
|
||||||
|
className={`w-full justify-start gap-3 ${
|
||||||
|
activeTab === "logs" ? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FileText className="h-5 w-5" />
|
||||||
|
<span>System Logs</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
|
||||||
<div className="pt-4 md:pt-4">
|
<TabsContent value="overview" className="space-y-4 md:space-y-6">
|
||||||
<TabsContent value="overview" className="space-y-4 md:space-y-6">
|
<SystemOverview key={`overview-${componentKey}`} />
|
||||||
<SystemOverview key={`overview-${componentKey}`} />
|
</TabsContent>
|
||||||
</TabsContent>
|
|
||||||
|
|
||||||
<TabsContent value="storage" className="space-y-4 md:space-y-6">
|
<TabsContent value="storage" className="space-y-4 md:space-y-6">
|
||||||
<StorageOverview key={`storage-${componentKey}`} />
|
<StorageOverview key={`storage-${componentKey}`} />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="network" className="space-y-4 md:space-y-6">
|
<TabsContent value="network" className="space-y-4 md:space-y-6">
|
||||||
<NetworkMetrics key={`network-${componentKey}`} />
|
<NetworkMetrics key={`network-${componentKey}`} />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="vms" className="space-y-4 md:space-y-6">
|
<TabsContent value="vms" className="space-y-4 md:space-y-6">
|
||||||
<VirtualMachines key={`vms-${componentKey}`} />
|
<VirtualMachines key={`vms-${componentKey}`} />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="hardware" className="space-y-4 md:space-y-6">
|
<TabsContent value="hardware" className="space-y-4 md:space-y-6">
|
||||||
<Hardware key={`hardware-${componentKey}`} />
|
<Hardware key={`hardware-${componentKey}`} />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="logs" className="space-y-4 md:space-y-6">
|
<TabsContent value="logs" className="space-y-4 md:space-y-6">
|
||||||
<SystemLogs key={`logs-${componentKey}`} />
|
<SystemLogs key={`logs-${componentKey}`} />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</div>
|
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
<footer className="mt-8 md:mt-12 pt-4 md:pt-6 border-t border-border text-center text-xs md:text-sm text-muted-foreground">
|
<footer className="mt-8 md:mt-12 pt-4 md:pt-6 border-t border-border text-center text-xs md:text-sm text-muted-foreground">
|
||||||
|
|||||||
@@ -1,43 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useState, useEffect } from "react"
|
|
||||||
|
|
||||||
export function useScrollDirection() {
|
|
||||||
const [scrollDirection, setScrollDirection] = useState<"up" | "down" | null>(null)
|
|
||||||
const [isAtTop, setIsAtTop] = useState(true)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let lastScrollY = window.scrollY
|
|
||||||
let ticking = false
|
|
||||||
|
|
||||||
const updateScrollDirection = () => {
|
|
||||||
const scrollY = window.scrollY
|
|
||||||
|
|
||||||
// Check if we're at the top of the page
|
|
||||||
setIsAtTop(scrollY < 10)
|
|
||||||
|
|
||||||
// Only update direction if we've scrolled more than 5px
|
|
||||||
if (Math.abs(scrollY - lastScrollY) < 5) {
|
|
||||||
ticking = false
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setScrollDirection(scrollY > lastScrollY ? "down" : "up")
|
|
||||||
lastScrollY = scrollY > 0 ? scrollY : 0
|
|
||||||
ticking = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const onScroll = () => {
|
|
||||||
if (!ticking) {
|
|
||||||
window.requestAnimationFrame(updateScrollDirection)
|
|
||||||
ticking = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener("scroll", onScroll)
|
|
||||||
|
|
||||||
return () => window.removeEventListener("scroll", onScroll)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return { scrollDirection, isAtTop }
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user