From d787c3caa0d66735b01227929ff140238c4457d2 Mon Sep 17 00:00:00 2001 From: MacRimi Date: Mon, 3 Nov 2025 18:35:16 +0100 Subject: [PATCH] Update AppImage --- AppImage/components/hardware.tsx | 7 +- AppImage/components/metrics-dialog.tsx | 7 +- AppImage/components/network-traffic-chart.tsx | 6 +- AppImage/components/node-metrics-charts.tsx | 7 +- AppImage/components/proxmox-dashboard.tsx | 13 ++-- AppImage/components/system-logs.tsx | 9 ++- AppImage/components/system-overview.tsx | 16 ++--- AppImage/lib/api-config.ts | 71 +++++++++++++++++++ 8 files changed, 109 insertions(+), 27 deletions(-) create mode 100644 AppImage/lib/api-config.ts diff --git a/AppImage/components/hardware.tsx b/AppImage/components/hardware.tsx index 6fe121c..f0a5f6f 100644 --- a/AppImage/components/hardware.tsx +++ b/AppImage/components/hardware.tsx @@ -188,7 +188,12 @@ export default function Hardware() { const fetchRealtimeData = async () => { try { - const apiUrl = `http://${window.location.hostname}:8008/api/gpu/${fullSlot}/realtime` + const { protocol, hostname, port } = window.location + const isStandardPort = port === "" || port === "80" || port === "443" + + const apiUrl = isStandardPort + ? `/api/gpu/${fullSlot}/realtime` + : `${protocol}//${hostname}:8008/api/gpu/${fullSlot}/realtime` const response = await fetch(apiUrl, { method: "GET", diff --git a/AppImage/components/metrics-dialog.tsx b/AppImage/components/metrics-dialog.tsx index 4cf49ae..b8c1c31 100644 --- a/AppImage/components/metrics-dialog.tsx +++ b/AppImage/components/metrics-dialog.tsx @@ -118,8 +118,11 @@ export function MetricsView({ vmid, vmName, vmType, onBack }: MetricsViewProps) setError(null) try { - const baseUrl = - typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : "" + const { protocol, hostname, port } = window.location + const isStandardPort = port === "" || port === "80" || port === "443" + + const baseUrl = isStandardPort ? "" : `${protocol}//${hostname}:8008` + const apiUrl = `${baseUrl}/api/vms/${vmid}/metrics?timeframe=${timeframe}` const response = await fetch(apiUrl) diff --git a/AppImage/components/network-traffic-chart.tsx b/AppImage/components/network-traffic-chart.tsx index 34d9a34..a1576f3 100644 --- a/AppImage/components/network-traffic-chart.tsx +++ b/AppImage/components/network-traffic-chart.tsx @@ -75,8 +75,10 @@ export function NetworkTrafficChart({ setError(null) try { - const baseUrl = - typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : "" + const { protocol, hostname, port } = window.location + const isStandardPort = port === "" || port === "80" || port === "443" + + const baseUrl = isStandardPort ? "" : `${protocol}//${hostname}:8008` const apiUrl = interfaceName ? `${baseUrl}/api/network/${interfaceName}/metrics?timeframe=${timeframe}` diff --git a/AppImage/components/node-metrics-charts.tsx b/AppImage/components/node-metrics-charts.tsx index 9da7cc5..a8d86e4 100644 --- a/AppImage/components/node-metrics-charts.tsx +++ b/AppImage/components/node-metrics-charts.tsx @@ -86,8 +86,11 @@ export function NodeMetricsCharts() { setError(null) try { - const baseUrl = - typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : "" + const { protocol, hostname, port } = window.location + const isStandardPort = port === "" || port === "80" || port === "443" + + const baseUrl = isStandardPort ? "" : `${protocol}//${hostname}:8008` + const apiUrl = `${baseUrl}/api/node/metrics?timeframe=${timeframe}` console.log("[v0] Fetching node metrics from:", apiUrl) diff --git a/AppImage/components/proxmox-dashboard.tsx b/AppImage/components/proxmox-dashboard.tsx index 028e49e..da744ba 100644 --- a/AppImage/components/proxmox-dashboard.tsx +++ b/AppImage/components/proxmox-dashboard.tsx @@ -11,6 +11,7 @@ import { VirtualMachines } from "./virtual-machines" import Hardware from "./hardware" import { SystemLogs } from "./system-logs" import { OnboardingCarousel } from "./onboarding-carousel" +import { getApiUrl } from "../lib/api-config" import { RefreshCw, AlertTriangle, @@ -67,8 +68,7 @@ export function ProxmoxDashboard() { console.log("[v0] Fetching system data from Flask server...") console.log("[v0] Current window location:", window.location.href) - const baseUrl = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : "" - const apiUrl = `${baseUrl}/api/system` + const apiUrl = getApiUrl("/api/system") console.log("[v0] API URL:", apiUrl) @@ -235,13 +235,8 @@ export function ProxmoxDashboard() {

• The ProxMenux server should start automatically on port 8008

• Try accessing:{" "} - - http://{typeof window !== "undefined" ? window.location.host : "localhost:8008"}/api/health + + {getApiUrl("/api/health")}

diff --git a/AppImage/components/system-logs.tsx b/AppImage/components/system-logs.tsx index 144e862..853a9eb 100644 --- a/AppImage/components/system-logs.tsx +++ b/AppImage/components/system-logs.tsx @@ -125,7 +125,14 @@ export function SystemLogs() { const getApiUrl = (endpoint: string) => { if (typeof window !== "undefined") { - return `${window.location.protocol}//${window.location.hostname}:8008${endpoint}` + const { protocol, hostname, port } = window.location + const isStandardPort = port === "" || port === "80" || port === "443" + + if (isStandardPort) { + return endpoint + } else { + return `${protocol}//${hostname}:8008${endpoint}` + } } return `http://localhost:8008${endpoint}` } diff --git a/AppImage/components/system-overview.tsx b/AppImage/components/system-overview.tsx index 468799f..850e1ac 100644 --- a/AppImage/components/system-overview.tsx +++ b/AppImage/components/system-overview.tsx @@ -8,6 +8,7 @@ import { Cpu, MemoryStick, Thermometer, Server, Zap, AlertCircle, HardDrive, Net import { NodeMetricsCharts } from "./node-metrics-charts" import { NetworkTrafficChart } from "./network-traffic-chart" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select" +import { getApiUrl } from "../lib/api-config" interface SystemData { cpu_usage: number @@ -97,8 +98,7 @@ interface ProxmoxStorageData { const fetchSystemData = async (): Promise => { try { - const baseUrl = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : "" - const apiUrl = `${baseUrl}/api/system` + const apiUrl = getApiUrl("/api/system") const response = await fetch(apiUrl, { method: "GET", @@ -122,8 +122,7 @@ const fetchSystemData = async (): Promise => { const fetchVMData = async (): Promise => { try { - const baseUrl = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : "" - const apiUrl = `${baseUrl}/api/vms` + const apiUrl = getApiUrl("/api/vms") const response = await fetch(apiUrl, { method: "GET", @@ -147,8 +146,7 @@ const fetchVMData = async (): Promise => { const fetchStorageData = async (): Promise => { try { - const baseUrl = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : "" - const apiUrl = `${baseUrl}/api/storage/summary` + const apiUrl = getApiUrl("/api/storage/summary") const response = await fetch(apiUrl, { method: "GET", @@ -173,8 +171,7 @@ const fetchStorageData = async (): Promise => { const fetchNetworkData = async (): Promise => { try { - const baseUrl = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : "" - const apiUrl = `${baseUrl}/api/network/summary` + const apiUrl = getApiUrl("/api/network/summary") const response = await fetch(apiUrl, { method: "GET", @@ -199,8 +196,7 @@ const fetchNetworkData = async (): Promise => { const fetchProxmoxStorageData = async (): Promise => { try { - const baseUrl = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:8008` : "" - const apiUrl = `${baseUrl}/api/proxmox-storage` + const apiUrl = getApiUrl("/api/proxmox-storage") const response = await fetch(apiUrl, { method: "GET", diff --git a/AppImage/lib/api-config.ts b/AppImage/lib/api-config.ts new file mode 100644 index 0000000..de2bcc0 --- /dev/null +++ b/AppImage/lib/api-config.ts @@ -0,0 +1,71 @@ +/** + * API Configuration for ProxMenux Monitor + * Handles API URL generation with automatic proxy detection + */ + +/** + * Gets the base URL for API calls + * Automatically detects if running behind a proxy by checking if we're on a standard port + * + * @returns Base URL for API endpoints + */ +export function getApiBaseUrl(): string { + if (typeof window === "undefined") { + return "" + } + + const { protocol, hostname, port } = window.location + + // If accessing via standard ports (80/443) or no port, assume we're behind a proxy + // In this case, use relative URLs so the proxy handles routing + const isStandardPort = port === "" || port === "80" || port === "443" + + if (isStandardPort) { + // Behind a proxy - use relative URL + return "" + } else { + // Direct access - use explicit port 8008 + return `${protocol}//${hostname}:8008` + } +} + +/** + * Constructs a full API URL + * + * @param endpoint - API endpoint path (e.g., '/api/system') + * @returns Full API URL + */ +export function getApiUrl(endpoint: string): string { + const baseUrl = getApiBaseUrl() + + // Ensure endpoint starts with / + const normalizedEndpoint = endpoint.startsWith("/") ? endpoint : `/${endpoint}` + + return `${baseUrl}${normalizedEndpoint}` +} + +/** + * Fetches data from an API endpoint with error handling + * + * @param endpoint - API endpoint path + * @param options - Fetch options + * @returns Promise with the response data + */ +export async function fetchApi(endpoint: string, options?: RequestInit): Promise { + const url = getApiUrl(endpoint) + + const response = await fetch(url, { + ...options, + headers: { + "Content-Type": "application/json", + ...options?.headers, + }, + cache: "no-store", + }) + + if (!response.ok) { + throw new Error(`API request failed: ${response.status} ${response.statusText}`) + } + + return response.json() +}