diff --git a/AppImage/components/proxmox-dashboard.tsx b/AppImage/components/proxmox-dashboard.tsx index 2bb5c2b..7619900 100644 --- a/AppImage/components/proxmox-dashboard.tsx +++ b/AppImage/components/proxmox-dashboard.tsx @@ -13,6 +13,7 @@ import { SystemLogs } from "./system-logs" import { Settings } from "./settings" import { OnboardingCarousel } from "./onboarding-carousel" import { HealthStatusModal } from "./health-status-modal" +import { ReleaseNotesModal, useVersionCheck } from "./release-notes-modal" import { getApiUrl } from "../lib/api-config" import { RefreshCw, @@ -76,6 +77,7 @@ export function ProxmoxDashboard() { const [showNavigation, setShowNavigation] = useState(true) const [lastScrollY, setLastScrollY] = useState(0) const [showHealthModal, setShowHealthModal] = useState(false) + const { showReleaseNotes, setShowReleaseNotes } = useVersionCheck() const fetchSystemData = useCallback(async () => { const apiUrl = getApiUrl("/api/system-info") @@ -283,6 +285,7 @@ export function ProxmoxDashboard() { return (
+ {!isServerConnected && (
diff --git a/AppImage/components/release-notes-modal.tsx b/AppImage/components/release-notes-modal.tsx new file mode 100644 index 0000000..8336611 --- /dev/null +++ b/AppImage/components/release-notes-modal.tsx @@ -0,0 +1,149 @@ +"use client" + +import { useEffect, useState } from "react" +import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog" +import { Button } from "./ui/button" +import { ScrollArea } from "./ui/scroll-area" +import { Badge } from "./ui/badge" +import { Sparkles } from "lucide-react" + +const APP_VERSION = "1.0.1" // Sync with package.json + +const CHANGELOG = { + "1.0.1": { + date: "2025-02-11", + changes: { + added: [ + "Automatic support for reverse proxies", + "New api-config.ts utility for automatic proxy configuration detection", + "Complete proxy configuration documentation", + "Configuration examples for Nginx, Caddy, Apache, Traefik, and Nginx Proxy Manager", + ], + changed: [ + "Refactored API call system to use relative URLs when a proxy is detected", + "All components now use the new getApiUrl() utility for URL construction", + "Improved Flask server connection detection", + ], + fixed: [ + "Issue where charts and metrics wouldn't load when accessed through a reverse proxy", + "Hardcoded URLs to port 8008 causing connection errors behind proxies", + ], + }, + }, + "1.0.0": { + date: "2025-02-01", + changes: { + added: [ + "Complete monitoring dashboard for Proxmox", + "Real-time metrics for CPU, memory, network, and storage", + "VM and LXC container management", + "Detailed hardware information", + "System logs viewer", + "Light/dark theme support", + "Responsive design", + ], + }, + }, +} + +interface ReleaseNotesModalProps { + open: boolean + onOpenChange: (open: boolean) => void +} + +export function ReleaseNotesModal({ open, onOpenChange }: ReleaseNotesModalProps) { + const currentVersion = CHANGELOG[APP_VERSION as keyof typeof CHANGELOG] + + const handleDontShowAgain = () => { + localStorage.setItem("proxmenux-last-seen-version", APP_VERSION) + onOpenChange(false) + } + + return ( + + + +
+ + What's New in v{APP_VERSION} +
+ + + + {currentVersion && ( +
+
Released on {currentVersion.date}
+ + {currentVersion.changes.added && ( +
+ + Added + +
    + {currentVersion.changes.added.map((item, idx) => ( +
  • {item}
    • + ))} +
+
+ )} + + {currentVersion.changes.changed && ( +
+ + Changed + +
    + {currentVersion.changes.changed.map((item, idx) => ( +
  • {item}
    • + ))} +
+
+ )} + + {currentVersion.changes.fixed && ( +
+ + Fixed + +
    + {currentVersion.changes.fixed.map((item, idx) => ( +
  • {item}
    • + ))} +
+
+ )} +
+ )} + + +
+ + +
+ + + ) +} + +// Hook to detect version changes +export function useVersionCheck() { + const [showReleaseNotes, setShowReleaseNotes] = useState(false) + + useEffect(() => { + const lastSeenVersion = localStorage.getItem("proxmenux-last-seen-version") + + // Show release notes if: + // 1. User has never seen any version + // 2. Current version is different from last seen + if (!lastSeenVersion || lastSeenVersion !== APP_VERSION) { + setShowReleaseNotes(true) + } + }, []) + + return { showReleaseNotes, setShowReleaseNotes } +} + +// Export version and changelog for Settings page +export { APP_VERSION, CHANGELOG } diff --git a/AppImage/components/settings.tsx b/AppImage/components/settings.tsx index 3cc86ce..01cf566 100644 --- a/AppImage/components/settings.tsx +++ b/AppImage/components/settings.tsx @@ -6,6 +6,8 @@ import { Input } from "./ui/input" import { Label } from "./ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card" import { Shield, Lock, User, AlertCircle, CheckCircle, Info, LogOut, Wrench, Package } from "lucide-react" +import { Sparkles, ChevronDown, ChevronUp } from "lucide-react" +import { APP_VERSION, CHANGELOG } from "./release-notes-modal" import { getApiUrl } from "../lib/api-config" import { TwoFactorSetup } from "./two-factor-setup" @@ -40,6 +42,9 @@ export function Settings() { const [proxmenuxTools, setProxmenuxTools] = useState([]) const [loadingTools, setLoadingTools] = useState(true) + const [expandedVersions, setExpandedVersions] = useState>({ + [APP_VERSION]: true, // Current version expanded by default + }) useEffect(() => { checkAuthStatus() @@ -274,6 +279,13 @@ export function Settings() { window.location.reload() } + const toggleVersion = (version: string) => { + setExpandedVersions((prev) => ({ + ...prev, + [version]: !prev[version], + })) + } + return (
@@ -566,6 +578,116 @@ export function Settings() { + {/* Release Notes */} + + +
+ + Release Notes +
+ View changes and improvements in ProxMenux Monitor + + +
+
+
+ +
+
+

Current Version

+

ProxMenux Monitor v{APP_VERSION}

+
+
+
Latest
+
+ +
+ {Object.entries(CHANGELOG).map(([version, details]) => { + const isExpanded = expandedVersions[version] + const isCurrent = version === APP_VERSION + + return ( +
+ + + {isExpanded && ( +
+ {details.changes.added && ( +
+
+
+ Added +
+
+
    + {details.changes.added.map((item, idx) => ( +
  • {item}
    • + ))} +
+
+ )} + + {details.changes.changed && ( +
+
+
+ Changed +
+
+
    + {details.changes.changed.map((item, idx) => ( +
  • {item}
    • + ))} +
+
+ )} + + {details.changes.fixed && ( +
+
+
+ Fixed +
+
+
    + {details.changes.fixed.map((item, idx) => ( +
  • {item}
    • + ))} +
+
+ )} +
+ )} +
+ ) + })} +
+ + + {/* ProxMenux Optimizations */} diff --git a/AppImage/package.json b/AppImage/package.json index d2bcac5..af6ae56 100644 --- a/AppImage/package.json +++ b/AppImage/package.json @@ -1,5 +1,5 @@ { - "name": "proxmenux-monitor", + "name": "ProxMenux-Monitor", "version": "1.0.1", "description": "Proxmox System Monitoring Dashboard", "private": true,