mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-11-18 03:26:17 +00:00
Update AppImage
This commit is contained in:
MacRimi
@@ -7,7 +7,6 @@ import { Input } from "./ui/input"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
|
||||
import { ScrollArea } from "./ui/scroll-area"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog"
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "./ui/sheet"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"
|
||||
import { Calendar } from "./ui/calendar"
|
||||
@@ -21,7 +20,6 @@ import {
|
||||
XCircle,
|
||||
Database,
|
||||
Activity,
|
||||
HardDrive,
|
||||
CalendarIcon,
|
||||
RefreshCw,
|
||||
Bell,
|
||||
@@ -126,6 +124,13 @@ export function SystemLogs() {
|
||||
fetchAllData()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (dateFilter !== "custom") {
|
||||
// Reload logs when non-custom filter changes
|
||||
fetchSystemLogs().then(setLogs)
|
||||
}
|
||||
}, [dateFilter, customDays])
|
||||
|
||||
const fetchAllData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
@@ -164,7 +169,23 @@ export function SystemLogs() {
|
||||
|
||||
const fetchSystemLogs = async (): Promise<SystemLog[]> => {
|
||||
try {
|
||||
const apiUrl = getApiUrl("/api/logs")
|
||||
let apiUrl = getApiUrl("/api/logs")
|
||||
|
||||
const params = new URLSearchParams()
|
||||
|
||||
if (dateFilter === "custom" && dateRange?.from && dateRange?.to) {
|
||||
params.append("from_date", format(dateRange.from, "yyyy-MM-dd"))
|
||||
params.append("to_date", format(dateRange.to, "yyyy-MM-dd"))
|
||||
} else if (dateFilter !== "now") {
|
||||
const daysAgo = dateFilter === "custom" ? Number.parseInt(customDays) : Number.parseInt(dateFilter)
|
||||
params.append("since_days", daysAgo.toString())
|
||||
}
|
||||
|
||||
if (params.toString()) {
|
||||
apiUrl += `?${params.toString()}`
|
||||
}
|
||||
|
||||
console.log("[v0] Fetching logs from:", apiUrl)
|
||||
|
||||
const response = await fetch(apiUrl, {
|
||||
method: "GET",
|
||||
@@ -455,9 +476,18 @@ export function SystemLogs() {
|
||||
|
||||
const handleApplyDateRange = async () => {
|
||||
if (dateRange?.from && dateRange?.to) {
|
||||
console.log("[v0] Applying date range filter:", dateRange)
|
||||
setIsDatePickerOpen(false)
|
||||
// Fetch logs with the selected date range
|
||||
await fetchSystemLogs()
|
||||
setLoading(true)
|
||||
try {
|
||||
const newLogs = await fetchSystemLogs()
|
||||
setLogs(newLogs)
|
||||
console.log("[v0] Loaded", newLogs.length, "logs for date range")
|
||||
} catch (error) {
|
||||
console.error("[v0] Error loading logs for date range:", error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -787,12 +817,14 @@ export function SystemLogs() {
|
||||
{event.type}
|
||||
{event.vmid && ` (VM/CT ${event.vmid})`}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground whitespace-nowrap">{event.duration}</div>
|
||||
<div className="text-xs text-muted-foreground font-mono whitespace-nowrap">
|
||||
{event.starttime}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-foreground mb-1 line-clamp-2">{event.message}</div>
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
Node: {event.node} • User: {event.user}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">{event.starttime}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -800,7 +832,7 @@ export function SystemLogs() {
|
||||
{events.length === 0 && (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<Activity className="h-12 w-12 mx-auto mb-4 opacity-50" />
|
||||
<p>No recent events found</p>
|
||||
<p>No events found</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -809,64 +841,32 @@ export function SystemLogs() {
|
||||
|
||||
{/* Backups Tab */}
|
||||
<TabsContent value="backups" className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
<Card className="bg-card/50 border-border">
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold text-cyan-500">{backupStats.qemu}</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">QEMU Backups</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-card/50 border-border">
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold text-orange-500">{backupStats.lxc}</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">LXC Backups</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-card/50 border-border">
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold text-foreground">{formatBytes(backupStats.totalSize)}</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">Total Size</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="h-[500px] w-full rounded-md border border-border">
|
||||
<ScrollArea className="h-[600px] w-full rounded-md border border-border">
|
||||
<div className="space-y-2 p-4">
|
||||
{backups.map((backup, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start space-x-4 p-3 rounded-lg bg-card/50 border border-border/50 hover:bg-card/80 transition-colors cursor-pointer"
|
||||
className="flex flex-col md:flex-row md:items-start space-y-2 md:space-y-0 md:space-x-4 p-3 rounded-lg bg-card/50 border border-border/50 hover:bg-card/80 transition-colors cursor-pointer"
|
||||
onClick={() => {
|
||||
setSelectedBackup(backup)
|
||||
setIsBackupModalOpen(true)
|
||||
}}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
<HardDrive className="h-5 w-5 text-blue-500" />
|
||||
<Badge variant="outline" className={getBackupTypeColor(backup.volid)}>
|
||||
{getBackupTypeLabel(backup.volid)}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-1 gap-2 flex-wrap">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Badge variant="outline" className={getBackupTypeColor(backup.volid)}>
|
||||
{getBackupTypeLabel(backup.volid)}
|
||||
</Badge>
|
||||
<Badge variant="outline" className={getBackupStorageColor(backup.volid)}>
|
||||
{getBackupStorageLabel(backup.volid)}
|
||||
</Badge>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="text-sm font-medium text-foreground truncate">{backup.storage}</div>
|
||||
<div className="text-xs text-muted-foreground font-mono whitespace-nowrap">
|
||||
{backup.created}
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-green-500/10 text-green-500 border-green-500/20 whitespace-nowrap"
|
||||
>
|
||||
{backup.size_human}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground mb-1 truncate">Storage: {backup.storage}</div>
|
||||
<div className="text-xs text-muted-foreground flex items-center">
|
||||
<Calendar className="h-3 w-3 mr-1 flex-shrink-0" />
|
||||
<span className="truncate">{backup.created}</span>
|
||||
</div>
|
||||
<div className="text-sm text-foreground mb-1 line-clamp-2">{backup.volid}</div>
|
||||
<div className="text-xs text-muted-foreground truncate">Size: {backup.size_human}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -894,23 +894,22 @@ export function SystemLogs() {
|
||||
setIsNotificationModalOpen(true)
|
||||
}}
|
||||
>
|
||||
<div className="flex-shrink-0 flex items-center gap-2">
|
||||
{getNotificationIcon(notification.type)}
|
||||
<div className="flex-shrink-0">
|
||||
<Badge variant="outline" className={getNotificationTypeColor(notification.type)}>
|
||||
{getNotificationIcon(notification.type)}
|
||||
{notification.type.toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="text-xs text-muted-foreground font-mono whitespace-nowrap ml-2">
|
||||
<div className="text-sm font-medium text-foreground truncate">{notification.service}</div>
|
||||
<div className="text-xs text-muted-foreground font-mono whitespace-nowrap">
|
||||
{notification.timestamp}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-foreground mb-1 line-clamp-2">{notification.message}</div>
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
Service: {notification.service} • Source: {notification.source}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground truncate">Source: {notification.source}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -927,236 +926,6 @@ export function SystemLogs() {
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={isLogModalOpen} onOpenChange={setIsLogModalOpen}>
|
||||
<DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<FileText className="h-5 w-5" />
|
||||
Log Details
|
||||
</DialogTitle>
|
||||
<DialogDescription>Complete information about this log entry</DialogDescription>
|
||||
</DialogHeader>
|
||||
{selectedLog && (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Level</div>
|
||||
<Badge variant="outline" className={getLevelColor(selectedLog.level)}>
|
||||
{getLevelIcon(selectedLog.level)}
|
||||
{selectedLog.level.toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Service</div>
|
||||
<div className="text-sm text-foreground break-words">{selectedLog.service}</div>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Timestamp</div>
|
||||
<div className="text-sm text-foreground font-mono break-words">{selectedLog.timestamp}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Source</div>
|
||||
<div className="text-sm text-foreground break-words">{selectedLog.source}</div>
|
||||
</div>
|
||||
{selectedLog.pid && (
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Process ID</div>
|
||||
<div className="text-sm text-foreground font-mono">{selectedLog.pid}</div>
|
||||
</div>
|
||||
)}
|
||||
{selectedLog.hostname && (
|
||||
<div className="sm:col-span-2">
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Hostname</div>
|
||||
<div className="text-sm text-foreground break-words">{selectedLog.hostname}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-2">Message</div>
|
||||
<div className="p-4 rounded-lg bg-muted/50 border border-border">
|
||||
<pre className="text-sm text-foreground whitespace-pre-wrap break-words">{selectedLog.message}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={isEventModalOpen} onOpenChange={setIsEventModalOpen}>
|
||||
<DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Activity className="h-5 w-5" />
|
||||
Event Details
|
||||
</DialogTitle>
|
||||
<DialogDescription>Complete information about this event</DialogDescription>
|
||||
</DialogHeader>
|
||||
{selectedEvent && (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Status</div>
|
||||
<Badge variant="outline" className={getLevelColor(selectedEvent.level)}>
|
||||
{getLevelIcon(selectedEvent.level)}
|
||||
{selectedEvent.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Type</div>
|
||||
<div className="text-sm text-foreground break-words">{selectedEvent.type}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Node</div>
|
||||
<div className="text-sm text-foreground">{selectedEvent.node}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">User</div>
|
||||
<div className="text-sm text-foreground break-words">{selectedEvent.user}</div>
|
||||
</div>
|
||||
{selectedEvent.vmid && (
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">VM/CT ID</div>
|
||||
<div className="text-sm text-foreground font-mono">{selectedEvent.vmid}</div>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Duration</div>
|
||||
<div className="text-sm text-foreground">{selectedEvent.duration}</div>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Start Time</div>
|
||||
<div className="text-sm text-foreground break-words">{selectedEvent.starttime}</div>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">End Time</div>
|
||||
<div className="text-sm text-foreground break-words">{selectedEvent.endtime}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-2">UPID</div>
|
||||
<div className="p-4 rounded-lg bg-muted/50 border border-border">
|
||||
<pre className="text-sm text-foreground font-mono whitespace-pre-wrap break-all">
|
||||
{selectedEvent.upid}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={isBackupModalOpen} onOpenChange={setIsBackupModalOpen}>
|
||||
<DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Database className="h-5 w-5" />
|
||||
Backup Details
|
||||
</DialogTitle>
|
||||
<DialogDescription>Complete information about this backup</DialogDescription>
|
||||
</DialogHeader>
|
||||
{selectedBackup && (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Type</div>
|
||||
<Badge variant="outline" className={getBackupTypeColor(selectedBackup.volid)}>
|
||||
{getBackupTypeLabel(selectedBackup.volid)}
|
||||
</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Storage Type</div>
|
||||
<Badge variant="outline" className={getBackupStorageColor(selectedBackup.volid)}>
|
||||
{getBackupStorageLabel(selectedBackup.volid)}
|
||||
</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Storage</div>
|
||||
<div className="text-sm text-foreground break-words">{selectedBackup.storage}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Size</div>
|
||||
<Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
|
||||
{selectedBackup.size_human}
|
||||
</Badge>
|
||||
</div>
|
||||
{selectedBackup.vmid && (
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">VM/CT ID</div>
|
||||
<div className="text-sm text-foreground font-mono">{selectedBackup.vmid}</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="sm:col-span-2">
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Created</div>
|
||||
<div className="text-sm text-foreground break-words">{selectedBackup.created}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-2">Volume ID</div>
|
||||
<div className="p-4 rounded-lg bg-muted/50 border border-border">
|
||||
<pre className="text-sm text-foreground font-mono whitespace-pre-wrap break-all">
|
||||
{selectedBackup.volid}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={isNotificationModalOpen} onOpenChange={setIsNotificationModalOpen}>
|
||||
<DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Bell className="h-5 w-5" />
|
||||
Notification Details
|
||||
</DialogTitle>
|
||||
<DialogDescription>Complete information about this notification</DialogDescription>
|
||||
</DialogHeader>
|
||||
{selectedNotification && (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Type</div>
|
||||
<Badge variant="outline" className={getNotificationTypeColor(selectedNotification.type)}>
|
||||
{selectedNotification.type.toUpperCase()}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Timestamp</div>
|
||||
<div className="text-sm text-foreground font-mono break-words">{selectedNotification.timestamp}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Service</div>
|
||||
<div className="text-sm text-foreground break-words">{selectedNotification.service}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-1">Source</div>
|
||||
<div className="text-sm text-foreground break-words">{selectedNotification.source}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground mb-2">Message</div>
|
||||
<div className="p-4 rounded-lg bg-muted/50 border border-border max-h-[300px] overflow-y-auto">
|
||||
<pre className="text-sm text-foreground whitespace-pre-wrap break-words">
|
||||
{selectedNotification.message}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => handleDownloadNotificationLog(selectedNotification)}
|
||||
className="border-border w-full sm:w-auto"
|
||||
>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Download Complete Message
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user