mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2026-09-14 18:56:52 +00:00
New version 1.2.5
Stable release consolidating the v1.2.4 beta cycle (1.2.4.1-beta and 1.2.4.2-beta) into 1.2.5. Highlights: - Apps dashboard: single launcher for every LXC-registered app and user-defined Custom Web Link, with category badges, search, sort and one-click deep-links back to the guest modal. - LXC Apps & Updates end-to-end: App tab inside every guest modal, upstream version tracking, and Easy Updates that cover OS packages, registered apps, Docker Engine and per-image updates on the same 24-hour cycle. - Application detection catalog with 380+ tracked workloads generated live from community-scripts across seven detector methods. - Monitor now speaks 8 languages: English, Spanish, German, French, Italian, Portuguese, Slovak and Swedish (i18n scaffolding by @vaso73). - NVIDIA multi-GPU passthrough by exact BDF so one card can be assigned to a VM while another stays operational on the host or LXC. - Navigation reorder, Memory & Swap real memory-pressure signal, native Pushover channel, Actions API, plus wide-reaching improvements across health, hardware, network, backup and post-install. Full release notes: see CHANGELOG.md and https://github.com/MacRimi/ProxMenux/releases
This commit is contained in:
MacRimi
@@ -0,0 +1,727 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react"
|
||||
import useSWR from "swr"
|
||||
import { ArrowUpCircle, Check, ExternalLink, Pencil, Plus, Search } from "lucide-react"
|
||||
import { fetchApi } from "../lib/api-config"
|
||||
import { useT } from "../lib/i18n/provider"
|
||||
import { ThemeAwareLogo } from "./lxc-app-panel"
|
||||
import { CustomLinkEditor, type CustomLink, type GuestOption } from "./custom-link-editor"
|
||||
import { Button } from "./ui/button"
|
||||
import { categoryChipStyle, useIsLightTheme } from "../lib/category-color"
|
||||
|
||||
// ─── Local subset of /api/vms shape ─────────────────────────────
|
||||
// Kept narrow on purpose — this component only needs what feeds a
|
||||
// launcher card. Full VMData / LxcAppWatch types live in
|
||||
// virtual-machines.tsx.
|
||||
|
||||
interface AppPort {
|
||||
port: number
|
||||
description?: string
|
||||
scheme?: "http" | "https"
|
||||
web_path?: string
|
||||
logo_url?: string | null
|
||||
category?: string
|
||||
custom_url?: string
|
||||
}
|
||||
|
||||
interface AppWatch {
|
||||
id: string
|
||||
name: string | null
|
||||
logo_url?: string | null
|
||||
ports?: AppPort[]
|
||||
installed_version: string | null
|
||||
latest_version: string | null
|
||||
update_available: boolean | null
|
||||
managed_oci_app_id?: string | null
|
||||
helper_slug?: string
|
||||
}
|
||||
|
||||
interface DockerImageUpdate {
|
||||
reference: string
|
||||
display_name?: string | null
|
||||
used_by?: string[]
|
||||
update_available: boolean | null
|
||||
}
|
||||
|
||||
// Locate the docker_inventory image whose lifecycle matches a given
|
||||
// Web Link. The port's `description` is a user-typed label (e.g.
|
||||
// "Paperless") so exact match on `used_by` (real container names
|
||||
// like "paperless-webserver-1") almost never hits. Fall back through:
|
||||
// 1. exact match in `used_by`
|
||||
// 2. case-insensitive substring either way in `used_by`
|
||||
// 3. substring in `display_name`
|
||||
// 4. substring in `reference` (the full image path)
|
||||
// Returns undefined when nothing matches — the caller treats that as
|
||||
// "no upstream update signal for this port".
|
||||
function findDockerImageForPort(
|
||||
port: AppPort,
|
||||
images: DockerImageUpdate[],
|
||||
): DockerImageUpdate | undefined {
|
||||
const desc = (port.description || "").trim().toLowerCase()
|
||||
if (!desc || !images.length) return undefined
|
||||
const exact = images.find((i) =>
|
||||
(i.used_by || []).some((c) => c.toLowerCase() === desc),
|
||||
)
|
||||
if (exact) return exact
|
||||
const inclUsedBy = images.find((i) =>
|
||||
(i.used_by || []).some((c) => {
|
||||
const cl = c.toLowerCase()
|
||||
return cl.includes(desc) || desc.includes(cl)
|
||||
}),
|
||||
)
|
||||
if (inclUsedBy) return inclUsedBy
|
||||
const byDisplay = images.find((i) => {
|
||||
const d = (i.display_name || "").toLowerCase()
|
||||
return !!d && (d.includes(desc) || desc.includes(d))
|
||||
})
|
||||
if (byDisplay) return byDisplay
|
||||
return images.find((i) => (i.reference || "").toLowerCase().includes(desc))
|
||||
}
|
||||
|
||||
interface VM {
|
||||
vmid: number
|
||||
name: string
|
||||
ip?: string
|
||||
type: string
|
||||
app_watches?: AppWatch[]
|
||||
docker_inventory?: { images?: DockerImageUpdate[] }
|
||||
}
|
||||
|
||||
interface LaunchLink {
|
||||
key: string
|
||||
// Present for LXC-registered apps and for custom links with a
|
||||
// guest binding. Absent when the link is an unbound custom entry
|
||||
// (e.g. an external service).
|
||||
vmid: number | null
|
||||
guestType: "lxc" | "qemu" | null
|
||||
ctName: string
|
||||
appName: string
|
||||
logoUrl: string | null
|
||||
weblink: string
|
||||
category: string
|
||||
updateAvailable: boolean
|
||||
// Set for user-defined custom links so the card can offer edit
|
||||
// and delete actions in edit mode.
|
||||
isCustom: boolean
|
||||
customId?: string
|
||||
}
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────────────────
|
||||
|
||||
// Same URL construction as the Web Link row in the App tab.
|
||||
// Duplicated (small) on purpose — buildWebUrl in lxc-app-panel.tsx
|
||||
// is scoped to that module, and copying keeps this component free of
|
||||
// hidden cross-file dependencies. A per-port `custom_url` overrides
|
||||
// the ip:port composition entirely — used for apps served behind a
|
||||
// reverse-proxy domain.
|
||||
function buildWebUrl(ip: string | undefined, port: AppPort): string | null {
|
||||
const custom = (port.custom_url || "").trim()
|
||||
if (custom) return custom
|
||||
const raw = (ip || "").trim().split("/")[0]
|
||||
if (!raw || raw === "DHCP" || !port?.port) return null
|
||||
const host = raw.includes(":") && !raw.startsWith("[") ? `[${raw}]` : raw
|
||||
const scheme = port.scheme || ([443, 8443, 9443].includes(port.port) ? "https" : "http")
|
||||
const path = port.web_path ? `/${port.web_path.replace(/^\/+/, "")}` : ""
|
||||
return `${scheme}://${host}:${port.port}${path}`
|
||||
}
|
||||
|
||||
type SortMode = "name" | "ct" | "category"
|
||||
const SORT_STORAGE_KEY = "proxmenux-apps-sort"
|
||||
const ALL_CATEGORIES = "__all__"
|
||||
|
||||
const fetcher = async (url: string) => fetchApi(url)
|
||||
|
||||
// ─── Component ───────────────────────────────────────────────────
|
||||
|
||||
export function AppsDashboard() {
|
||||
const t = useT()
|
||||
const { data: vms } = useSWR<VM[]>("/api/vms", fetcher, { refreshInterval: 5000, revalidateOnFocus: false })
|
||||
// Custom links persisted in /etc/proxmenux/custom_links.json. Small
|
||||
// and rarely changes, so we don't poll on an interval — mutate() is
|
||||
// called explicitly after create / update / delete.
|
||||
const { data: customLinks, mutate: mutateCustomLinks } = useSWR<CustomLink[]>(
|
||||
"/api/apps/custom-links", fetcher, { revalidateOnFocus: false },
|
||||
)
|
||||
// Category presets for the "+ Add link" modal.
|
||||
const { data: categoryPresets } = useSWR<string[]>(
|
||||
"/api/apps/categories", fetcher, { revalidateOnFocus: false },
|
||||
)
|
||||
|
||||
const isLightTheme = useIsLightTheme()
|
||||
|
||||
// Flatten VMs → LaunchLinks. One card per (app × port with weblink)
|
||||
// for LXC-registered apps, plus one card per user-defined custom
|
||||
// link. A custom link with a binding resolves its ctName from the
|
||||
// matching guest in `vms` so renames stay in sync automatically.
|
||||
const links = useMemo<LaunchLink[]>(() => {
|
||||
const out: LaunchLink[] = []
|
||||
const vmsList = Array.isArray(vms) ? vms : []
|
||||
for (const vm of vmsList) {
|
||||
const apps = vm.app_watches || []
|
||||
if (!apps.length) continue
|
||||
for (const app of apps) {
|
||||
// Skip the synthetic entry ProxMenux inserts for managed
|
||||
// OCI apps (Secure Gateway) — it has no user-assigned
|
||||
// Web Link and doesn't belong in a launcher.
|
||||
if (app.managed_oci_app_id) continue
|
||||
// `app.update_available` refers to the app itself. For a
|
||||
// Docker registration that app is the Docker engine, and its
|
||||
// ports are containers running INSIDE Docker (Portainer,
|
||||
// Frigate…) — each with an independent image update
|
||||
// lifecycle in `vm.docker_inventory.images[]`. Propagating
|
||||
// the engine-level flag to every container card would falsely
|
||||
// mark Portainer/Frigate as updatable when only the engine
|
||||
// needs bumping; missing the per-image flag would hide real
|
||||
// Portainer/Frigate updates that ARE tracked in the App tab
|
||||
// and fire notifications. Resolution: for each Docker port,
|
||||
// find the image entry whose `used_by` includes the port's
|
||||
// container name (== `port.description`) and use THAT image's
|
||||
// update_available. Engine update stays out of the port cards
|
||||
// — it belongs in the Updates tab.
|
||||
const isDockerApp = app.helper_slug === "docker"
|
||||
const dockerImages = vm.docker_inventory?.images || []
|
||||
for (const port of app.ports || []) {
|
||||
const url = buildWebUrl(vm.ip, port)
|
||||
if (!url) continue
|
||||
let updateAvailable = false
|
||||
if (isDockerApp) {
|
||||
const img = findDockerImageForPort(port, dockerImages)
|
||||
updateAvailable = img?.update_available === true
|
||||
} else {
|
||||
updateAvailable = app.update_available === true
|
||||
}
|
||||
out.push({
|
||||
key: `lxc-${vm.vmid}-${app.id}-${port.port}`,
|
||||
vmid: vm.vmid,
|
||||
guestType: "lxc",
|
||||
ctName: vm.name,
|
||||
appName: (port.description || app.name || vm.name || "").trim(),
|
||||
logoUrl: port.logo_url || app.logo_url || null,
|
||||
weblink: url,
|
||||
category: (port.category || "").trim(),
|
||||
updateAvailable,
|
||||
isCustom: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
// Merge user-defined custom links. Their `binding` decides how the
|
||||
// CT/VM reference renders and where clicking it navigates.
|
||||
const guestByVmid = new Map<number, { name: string; type: string }>()
|
||||
for (const vm of vmsList) guestByVmid.set(vm.vmid, { name: vm.name, type: vm.type })
|
||||
for (const link of customLinks || []) {
|
||||
let ctName = ""
|
||||
let vmid: number | null = null
|
||||
let guestType: "lxc" | "qemu" | null = null
|
||||
if (link.binding) {
|
||||
const guest = guestByVmid.get(link.binding.vmid)
|
||||
vmid = link.binding.vmid
|
||||
guestType = link.binding.guest_type
|
||||
ctName = guest?.name || ""
|
||||
}
|
||||
out.push({
|
||||
key: `custom-${link.id}`,
|
||||
vmid,
|
||||
guestType,
|
||||
ctName,
|
||||
appName: link.name,
|
||||
logoUrl: link.logo_url || null,
|
||||
weblink: link.url,
|
||||
category: (link.category || "").trim(),
|
||||
updateAvailable: false,
|
||||
isCustom: true,
|
||||
customId: link.id,
|
||||
})
|
||||
}
|
||||
return out
|
||||
}, [vms, customLinks])
|
||||
|
||||
// Category list for the filter dropdown — built from the data so
|
||||
// it always reflects reality (presets and custom-entered names).
|
||||
const categoryCounts = useMemo(() => {
|
||||
const map = new Map<string, number>()
|
||||
for (const l of links) {
|
||||
const key = l.category || t("apps.uncategorized")
|
||||
map.set(key, (map.get(key) || 0) + 1)
|
||||
}
|
||||
return map
|
||||
}, [links, t])
|
||||
const sortedCategoryEntries = useMemo(
|
||||
() => Array.from(categoryCounts.entries()).sort((a, b) => a[0].localeCompare(b[0])),
|
||||
[categoryCounts],
|
||||
)
|
||||
|
||||
// ─── Controls state ────────────────────────────────────────────
|
||||
|
||||
const [query, setQuery] = useState("")
|
||||
const [currentCat, setCurrentCat] = useState<string>(ALL_CATEGORIES)
|
||||
const [sortMode, setSortMode] = useState<SortMode>("name")
|
||||
const [searchExpanded, setSearchExpanded] = useState(false)
|
||||
const searchInputRef = useRef<HTMLInputElement | null>(null)
|
||||
|
||||
// Restore sort from localStorage on mount.
|
||||
useEffect(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem(SORT_STORAGE_KEY)
|
||||
if (saved === "name" || saved === "ct" || saved === "category") {
|
||||
setSortMode(saved)
|
||||
}
|
||||
} catch (_) { /* private mode / storage disabled — silent */ }
|
||||
}, [])
|
||||
|
||||
// Persist sort choice — only this one preference survives reload;
|
||||
// category filter and search reset each visit so the dashboard
|
||||
// always opens showing every app.
|
||||
useEffect(() => {
|
||||
try { localStorage.setItem(SORT_STORAGE_KEY, sortMode) } catch (_) {}
|
||||
}, [sortMode])
|
||||
|
||||
// Filter category resets if the user removes/renames the currently
|
||||
// selected one and it disappears from the list.
|
||||
useEffect(() => {
|
||||
if (currentCat === ALL_CATEGORIES) return
|
||||
if (!categoryCounts.has(currentCat)) setCurrentCat(ALL_CATEGORIES)
|
||||
}, [currentCat, categoryCounts])
|
||||
|
||||
// ─── Custom link editor state ──────────────────────────────────
|
||||
|
||||
const [editorOpen, setEditorOpen] = useState(false)
|
||||
const [editingLink, setEditingLink] = useState<CustomLink | null>(null)
|
||||
const [editMode, setEditMode] = useState(false)
|
||||
|
||||
// Guest list feeds the binding dropdown in the editor modal.
|
||||
const guestOptions = useMemo<GuestOption[]>(() => {
|
||||
if (!Array.isArray(vms)) return []
|
||||
return vms
|
||||
.filter((v) => v.type === "lxc" || v.type === "qemu")
|
||||
.map((v) => ({
|
||||
vmid: v.vmid,
|
||||
name: v.name,
|
||||
type: v.type as "lxc" | "qemu",
|
||||
}))
|
||||
}, [vms])
|
||||
|
||||
const openNewLink = () => {
|
||||
setEditingLink(null)
|
||||
setEditorOpen(true)
|
||||
}
|
||||
const openEditForLink = (customId: string) => {
|
||||
const found = (customLinks || []).find((l) => l.id === customId)
|
||||
if (!found) return
|
||||
setEditingLink(found)
|
||||
setEditorOpen(true)
|
||||
}
|
||||
|
||||
// ─── Filter + sort ─────────────────────────────────────────────
|
||||
|
||||
const shown = useMemo(() => {
|
||||
const q = query.trim().toLowerCase()
|
||||
const uncatKey = t("apps.uncategorized")
|
||||
let filtered = links
|
||||
if (currentCat !== ALL_CATEGORIES) {
|
||||
filtered = filtered.filter((l) => (l.category || uncatKey) === currentCat)
|
||||
}
|
||||
if (q) {
|
||||
filtered = filtered.filter((l) =>
|
||||
l.appName.toLowerCase().includes(q) ||
|
||||
(l.ctName || "").toLowerCase().includes(q) ||
|
||||
(l.vmid != null && String(l.vmid).includes(q)) ||
|
||||
(l.category || "").toLowerCase().includes(q)
|
||||
)
|
||||
}
|
||||
const sorted = [...filtered]
|
||||
sorted.sort((a, b) => {
|
||||
if (sortMode === "name") return a.appName.localeCompare(b.appName)
|
||||
if (sortMode === "ct") {
|
||||
// Unbound custom links have no vmid; sort them after every
|
||||
// bound entry, ordered alphabetically by app name.
|
||||
if (a.vmid == null && b.vmid == null) return a.appName.localeCompare(b.appName)
|
||||
if (a.vmid == null) return 1
|
||||
if (b.vmid == null) return -1
|
||||
return (a.vmid - b.vmid) || a.appName.localeCompare(b.appName)
|
||||
}
|
||||
// category — grouped alphabetically, then by app name inside
|
||||
const catA = a.category || uncatKey
|
||||
const catB = b.category || uncatKey
|
||||
const c = catA.localeCompare(catB)
|
||||
return c !== 0 ? c : a.appName.localeCompare(b.appName)
|
||||
})
|
||||
return sorted
|
||||
}, [links, query, currentCat, sortMode, t])
|
||||
|
||||
// ─── Empty state ───────────────────────────────────────────────
|
||||
|
||||
const hasAnyData = links.length > 0 || (customLinks && customLinks.length > 0)
|
||||
if (vms && !hasAnyData) {
|
||||
return (
|
||||
<>
|
||||
<div className="text-center text-muted-foreground py-16">
|
||||
<div className="text-sm">{t("apps.emptyTitle")}</div>
|
||||
<div className="text-xs mt-1 opacity-80">{t("apps.emptyHint")}</div>
|
||||
<Button
|
||||
onClick={openNewLink}
|
||||
variant="outline"
|
||||
className="mt-4"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-1.5" />
|
||||
{t("apps.customLinkAdd")}
|
||||
</Button>
|
||||
</div>
|
||||
<CustomLinkEditor
|
||||
open={editorOpen}
|
||||
onOpenChange={setEditorOpen}
|
||||
editing={editingLink}
|
||||
guests={guestOptions}
|
||||
categoryPresets={categoryPresets || []}
|
||||
onSaved={() => mutateCustomLinks()}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Render ────────────────────────────────────────────────────
|
||||
|
||||
const countLabel = shown.length === 1
|
||||
? t("apps.countOne")
|
||||
: t("apps.countMany", { n: shown.length })
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Toolbar */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{/* Search — icon-only until tapped on narrow screens */}
|
||||
<div className={`relative ${searchExpanded ? "flex-1 min-w-full sm:min-w-0 sm:flex-none sm:w-72" : "sm:flex-1 sm:min-w-40 sm:max-w-xs"}`}>
|
||||
{!searchExpanded && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSearchExpanded(true)
|
||||
requestAnimationFrame(() => searchInputRef.current?.focus())
|
||||
}}
|
||||
className="sm:hidden inline-flex items-center justify-center w-9 h-9 rounded-md border border-border bg-card text-muted-foreground hover:text-foreground hover:border-border/80 transition-colors"
|
||||
aria-label={t("apps.searchAriaLabel")}
|
||||
>
|
||||
<Search className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
<div className={`relative ${searchExpanded ? "block" : "hidden sm:block"}`}>
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onBlur={() => { if (!query.trim()) setSearchExpanded(false) }}
|
||||
placeholder={t("apps.searchPlaceholder")}
|
||||
aria-label={t("apps.searchAriaLabel")}
|
||||
className="w-full h-9 pl-8 pr-3 text-sm bg-card border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:border-border/80 focus:outline-none focus:ring-1 focus:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category filter */}
|
||||
<select
|
||||
value={currentCat}
|
||||
onChange={(e) => setCurrentCat(e.target.value)}
|
||||
aria-label={t("apps.filterAriaLabel")}
|
||||
className="h-9 pl-3 pr-8 text-sm bg-card border border-border rounded-md text-foreground appearance-none cursor-pointer max-w-[9.5rem] sm:max-w-none truncate focus:border-border/80 focus:outline-none focus:ring-1 focus:ring-ring bg-no-repeat bg-[right_0.6rem_center]"
|
||||
style={{
|
||||
backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>\")",
|
||||
}}
|
||||
>
|
||||
<option value={ALL_CATEGORIES}>{t("apps.filterAll")}</option>
|
||||
{sortedCategoryEntries.map(([cat, n]) => (
|
||||
<option key={cat} value={cat}>{`${cat} · ${n}`}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Sort */}
|
||||
<select
|
||||
value={sortMode}
|
||||
onChange={(e) => setSortMode(e.target.value as SortMode)}
|
||||
aria-label={t("apps.sortAriaLabel")}
|
||||
className="h-9 pl-3 pr-8 text-sm bg-card border border-border rounded-md text-foreground appearance-none cursor-pointer max-w-[8rem] sm:max-w-none truncate focus:border-border/80 focus:outline-none focus:ring-1 focus:ring-ring bg-no-repeat bg-[right_0.6rem_center]"
|
||||
style={{
|
||||
backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>\")",
|
||||
}}
|
||||
>
|
||||
<option value="name">{t("apps.sortName")}</option>
|
||||
<option value="ct">{t("apps.sortId")}</option>
|
||||
<option value="category">{t("apps.sortCategory")}</option>
|
||||
</select>
|
||||
|
||||
{/* Count — desktop only. Mobile gives the horizontal room to
|
||||
the + button instead so everything stays on one line. */}
|
||||
<span className="ml-auto hidden sm:inline-flex items-center h-9 px-3 text-xs text-muted-foreground rounded-md bg-card border border-border font-mono tabular-nums">
|
||||
{countLabel}
|
||||
</span>
|
||||
|
||||
{/* + Add custom link. Icon-only on mobile (mirrors the search
|
||||
icon-toggle pattern) so the toolbar fits in one line even
|
||||
in the narrowest viewport. On desktop shows label + icon. */}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={openNewLink}
|
||||
className="sm:ml-2 ml-auto h-9 px-2.5 sm:px-3 flex-shrink-0"
|
||||
aria-label={t("apps.customLinkAdd")}
|
||||
>
|
||||
<Plus className="h-4 w-4 sm:mr-1.5" />
|
||||
<span className="hidden sm:inline">{t("apps.customLinkAdd")}</span>
|
||||
</Button>
|
||||
|
||||
{/* Edit mode toggle — only shown when at least one custom link
|
||||
exists, since it's the only card type that carries per-card
|
||||
edit/delete actions. LXC-registered apps are edited in the
|
||||
LXC App tab of their guest modal. */}
|
||||
{(customLinks && customLinks.length > 0) && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setEditMode((v) => !v)}
|
||||
className={`h-9 px-2.5 sm:px-3 flex-shrink-0 ${editMode ? "border-blue-500/60 text-blue-400" : ""}`}
|
||||
aria-pressed={editMode}
|
||||
aria-label={t("apps.editModeToggle")}
|
||||
>
|
||||
{editMode ? <Check className="h-4 w-4 sm:mr-1.5" /> : <Pencil className="h-4 w-4 sm:mr-1.5" />}
|
||||
<span className="hidden sm:inline">{editMode ? t("apps.editModeDone") : t("apps.editModeToggle")}</span>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Grid — grouped headers when sorted by category */}
|
||||
<CardsGrid
|
||||
links={shown}
|
||||
grouped={sortMode === "category"}
|
||||
uncategorizedLabel={t("apps.uncategorized")}
|
||||
openLabel={t("apps.openAriaLabel")}
|
||||
isLightTheme={isLightTheme}
|
||||
editMode={editMode}
|
||||
onEditCustom={openEditForLink}
|
||||
/>
|
||||
|
||||
<CustomLinkEditor
|
||||
open={editorOpen}
|
||||
onOpenChange={setEditorOpen}
|
||||
editing={editingLink}
|
||||
guests={guestOptions}
|
||||
categoryPresets={categoryPresets || []}
|
||||
onSaved={() => mutateCustomLinks()}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Cards grid + card ───────────────────────────────────────────
|
||||
|
||||
function CardsGrid({
|
||||
links,
|
||||
grouped,
|
||||
uncategorizedLabel,
|
||||
openLabel,
|
||||
isLightTheme,
|
||||
editMode,
|
||||
onEditCustom,
|
||||
}: {
|
||||
links: LaunchLink[]
|
||||
grouped: boolean
|
||||
uncategorizedLabel: string
|
||||
openLabel: string
|
||||
isLightTheme: boolean
|
||||
editMode: boolean
|
||||
onEditCustom: (customId: string) => void
|
||||
}) {
|
||||
if (!links.length) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3">
|
||||
<div className="col-span-full text-center text-muted-foreground text-sm py-8">
|
||||
{/* No results after filter/search */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!grouped) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3">
|
||||
{links.map((link) => (
|
||||
<AppCard key={link.key} link={link} openLabel={openLabel} isLightTheme={isLightTheme} editMode={editMode} onEditCustom={onEditCustom} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Group by category, insert header rows spanning the full grid width.
|
||||
const groups: Array<[string, LaunchLink[]]> = []
|
||||
let currentCat: string | null = null
|
||||
let bucket: LaunchLink[] = []
|
||||
for (const link of links) {
|
||||
const cat = link.category || uncategorizedLabel
|
||||
if (cat !== currentCat) {
|
||||
if (bucket.length) groups.push([currentCat!, bucket])
|
||||
currentCat = cat
|
||||
bucket = []
|
||||
}
|
||||
bucket.push(link)
|
||||
}
|
||||
if (bucket.length) groups.push([currentCat!, bucket])
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3">
|
||||
{groups.map(([cat, items]) => (
|
||||
<div key={`grp-${cat}`} className="contents">
|
||||
<h3 className="col-span-full uppercase text-xs tracking-wider text-muted-foreground font-semibold pt-3 pb-1.5 border-b border-border/60 flex items-center gap-2">
|
||||
<span>{cat}</span>
|
||||
<span className="font-mono tabular-nums text-[10px] px-1.5 py-0.5 rounded bg-card border border-border/60 font-normal">{items.length}</span>
|
||||
</h3>
|
||||
{items.map((link) => (
|
||||
<AppCard key={link.key} link={link} openLabel={openLabel} isLightTheme={isLightTheme} editMode={editMode} onEditCustom={onEditCustom} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// hueForCategory / categoryChipStyle / readIsLightTheme moved to
|
||||
// lib/category-color.ts so the LXC App tab can render the same chip.
|
||||
|
||||
// Dispatch the pair of events that jumps from the Apps dashboard to
|
||||
// the VMs modal on the App tab for a given CT. Two events by design:
|
||||
// `changeTab` switches the outer tab (dashboard-level) and
|
||||
// `openLxcAppModal` tells VirtualMachines which guest to open and on
|
||||
// which inner tab to land. Both fire in the same tick.
|
||||
function openLxcModalOnAppTab(vmid: number) {
|
||||
window.dispatchEvent(new CustomEvent("changeTab", { detail: { tab: "vms" } }))
|
||||
window.dispatchEvent(new CustomEvent("openLxcAppModal", { detail: { vmid } }))
|
||||
}
|
||||
|
||||
// Same pattern for a QEMU guest: land on the modal's Status tab
|
||||
// (QEMU guests don't have the App tab). Used by custom links whose
|
||||
// binding is a VM instead of an LXC.
|
||||
function openVmModalOnStatusTab(vmid: number) {
|
||||
window.dispatchEvent(new CustomEvent("changeTab", { detail: { tab: "vms" } }))
|
||||
window.dispatchEvent(new CustomEvent("openVmStatusModal", { detail: { vmid } }))
|
||||
}
|
||||
|
||||
function AppCard({
|
||||
link,
|
||||
openLabel,
|
||||
isLightTheme,
|
||||
editMode,
|
||||
onEditCustom,
|
||||
}: {
|
||||
link: LaunchLink
|
||||
openLabel: string
|
||||
isLightTheme: boolean
|
||||
editMode: boolean
|
||||
onEditCustom: (customId: string) => void
|
||||
}) {
|
||||
const t = useT()
|
||||
// Navigate to the bound guest's modal on the appropriate inner tab:
|
||||
// LXC → App tab (where the weblink was registered), VM → Status tab
|
||||
// (VMs don't have an App tab). Unbound custom links have no CT ref
|
||||
// to click, so this handler is only wired when `link.vmid` exists.
|
||||
const goToBoundGuest = (e: React.MouseEvent | React.KeyboardEvent) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
if (link.vmid == null) return
|
||||
if (link.guestType === "qemu") {
|
||||
openVmModalOnStatusTab(link.vmid)
|
||||
} else {
|
||||
openLxcModalOnAppTab(link.vmid)
|
||||
}
|
||||
}
|
||||
|
||||
const goToEditor = (e: React.MouseEvent | React.KeyboardEvent) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
if (link.customId) onEditCustom(link.customId)
|
||||
}
|
||||
|
||||
const guestPrefix = link.guestType === "qemu" ? "VM" : "CT"
|
||||
const hasBinding = link.vmid != null
|
||||
|
||||
return (
|
||||
<a
|
||||
href={link.weblink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={openLabel.replace("{name}", link.appName)}
|
||||
className="group relative flex flex-col gap-2 p-3.5 bg-card border border-border rounded-xl no-underline text-foreground hover:bg-white/5 hover:border-border/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:translate-y-px"
|
||||
>
|
||||
{/* Head: logo + name (+ update icon) */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-14 h-14 rounded-md bg-muted/40 grid place-items-center flex-shrink-0 overflow-hidden">
|
||||
{link.logoUrl ? (
|
||||
<ThemeAwareLogo src={link.logoUrl} className="w-9 h-9 object-contain" />
|
||||
) : (
|
||||
<span className="text-[10px] font-mono text-muted-foreground uppercase">{link.appName.slice(0, 2)}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-base font-semibold text-foreground truncate leading-tight">{link.appName}</div>
|
||||
</div>
|
||||
{/* Edit mode on a custom card takes over the update-icon slot
|
||||
with a proper edit button — custom links never carry the
|
||||
update signal, so nothing is displaced. Falls back to the
|
||||
update icon in every other case. */}
|
||||
{editMode && link.isCustom ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={goToEditor}
|
||||
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") goToEditor(e) }}
|
||||
className="h-8 w-8 rounded-md border border-border bg-background hover:bg-muted flex items-center justify-center flex-shrink-0 self-start text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
aria-label={t("apps.customLinkEditAria", { name: link.appName })}
|
||||
title={t("actions.edit")}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</button>
|
||||
) : link.updateAvailable && (
|
||||
<ArrowUpCircle className="h-5 w-5 text-purple-400 flex-shrink-0 self-start mt-0.5" aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Foot: weblink + CT ref + category chip */}
|
||||
<div className="flex flex-col gap-1.5 mt-auto pt-2 border-t border-dashed border-border/60">
|
||||
<div className="flex items-center gap-1.5 text-blue-400 text-sm font-mono truncate">
|
||||
<ExternalLink className="h-3.5 w-3.5 flex-shrink-0 opacity-80" />
|
||||
<span className="truncate">{link.weblink}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-[11px] text-muted-foreground">
|
||||
{/* Guest ref → click opens that guest's modal (LXC → App
|
||||
tab, VM → Status tab). stopPropagation keeps the outer
|
||||
anchor from firing at the same time. Unbound custom
|
||||
links: in edit mode show the edit button here, otherwise
|
||||
show nothing. */}
|
||||
{hasBinding && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={goToBoundGuest}
|
||||
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") goToBoundGuest(e) }}
|
||||
className="inline-flex items-center gap-1.5 min-w-0 rounded hover:text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer"
|
||||
aria-label={t("apps.openGuestAriaLabel", {
|
||||
name: link.ctName || String(link.vmid),
|
||||
type: guestPrefix,
|
||||
id: link.vmid!,
|
||||
})}
|
||||
>
|
||||
<span className="font-mono px-1.5 py-0.5 rounded bg-muted/40 text-muted-foreground/90 flex-shrink-0">{link.vmid}</span>
|
||||
<span className="truncate min-w-0">{link.ctName || `${guestPrefix} ${link.vmid}`}</span>
|
||||
</button>
|
||||
)}
|
||||
{link.category && (
|
||||
<span
|
||||
style={categoryChipStyle(link.category, isLightTheme)}
|
||||
className="ml-auto px-1.5 py-0.5 border rounded text-[10px] font-medium flex-shrink-0 truncate max-w-[45%]"
|
||||
title={link.category}
|
||||
>
|
||||
{link.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,306 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { Trash2 } from "lucide-react"
|
||||
import { fetchApi } from "../lib/api-config"
|
||||
import { useT } from "../lib/i18n/provider"
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "./ui/dialog"
|
||||
import { Button } from "./ui/button"
|
||||
import { Input } from "./ui/input"
|
||||
import { Label } from "./ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
|
||||
|
||||
// Minimal shape we need from the /api/vms poll. Kept narrow so this
|
||||
// component stays independent of the fuller VMData type used in
|
||||
// virtual-machines.tsx.
|
||||
export interface GuestOption {
|
||||
vmid: number
|
||||
name: string
|
||||
type: "lxc" | "qemu"
|
||||
}
|
||||
|
||||
export interface CustomLink {
|
||||
id: string
|
||||
name: string
|
||||
url: string
|
||||
logo_url: string
|
||||
category: string
|
||||
binding: { vmid: number; guest_type: "lxc" | "qemu" } | null
|
||||
created_at?: number
|
||||
updated_at?: number
|
||||
}
|
||||
|
||||
export interface DraftCustomLink {
|
||||
name: string
|
||||
url: string
|
||||
logo_url: string
|
||||
category: string
|
||||
bindingKey: string
|
||||
}
|
||||
|
||||
const UNBOUND_KEY = "__none__"
|
||||
|
||||
function buildKey(binding: CustomLink["binding"]): string {
|
||||
if (!binding) return UNBOUND_KEY
|
||||
return `${binding.guest_type}:${binding.vmid}`
|
||||
}
|
||||
|
||||
function parseKey(key: string): CustomLink["binding"] {
|
||||
if (!key || key === UNBOUND_KEY) return null
|
||||
const [type, vmid] = key.split(":")
|
||||
if (type !== "lxc" && type !== "qemu") return null
|
||||
const n = Number(vmid)
|
||||
if (!Number.isFinite(n)) return null
|
||||
return { guest_type: type, vmid: n }
|
||||
}
|
||||
|
||||
export function CustomLinkEditor({
|
||||
open,
|
||||
onOpenChange,
|
||||
editing,
|
||||
guests,
|
||||
categoryPresets,
|
||||
onSaved,
|
||||
}: {
|
||||
open: boolean
|
||||
onOpenChange: (v: boolean) => void
|
||||
/** null = create; existing link = edit */
|
||||
editing: CustomLink | null
|
||||
/** VMs + LXCs from /api/vms so the user can bind a link to a guest */
|
||||
guests: GuestOption[]
|
||||
/** Populated from /api/apps/categories */
|
||||
categoryPresets: string[]
|
||||
/** Called on successful save/delete so the parent can refresh */
|
||||
onSaved: () => void
|
||||
}) {
|
||||
const t = useT()
|
||||
const [draft, setDraft] = useState<DraftCustomLink>({
|
||||
name: "", url: "", logo_url: "", category: "", bindingKey: UNBOUND_KEY,
|
||||
})
|
||||
const [customCategoryMode, setCustomCategoryMode] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [deleting, setDeleting] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Reset the draft whenever the modal opens with a new target.
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
setError(null)
|
||||
if (editing) {
|
||||
setDraft({
|
||||
name: editing.name,
|
||||
url: editing.url,
|
||||
logo_url: editing.logo_url || "",
|
||||
category: editing.category || "",
|
||||
bindingKey: buildKey(editing.binding),
|
||||
})
|
||||
setCustomCategoryMode(
|
||||
!!editing.category && !categoryPresets.includes(editing.category),
|
||||
)
|
||||
} else {
|
||||
setDraft({ name: "", url: "", logo_url: "", category: "", bindingKey: UNBOUND_KEY })
|
||||
setCustomCategoryMode(false)
|
||||
}
|
||||
}, [open, editing, categoryPresets])
|
||||
|
||||
const canSave = draft.name.trim() && draft.url.trim() && !saving
|
||||
|
||||
const handleSave = async () => {
|
||||
setError(null)
|
||||
setSaving(true)
|
||||
try {
|
||||
const payload = {
|
||||
name: draft.name.trim(),
|
||||
url: draft.url.trim(),
|
||||
logo_url: draft.logo_url.trim(),
|
||||
category: draft.category.trim(),
|
||||
binding: parseKey(draft.bindingKey),
|
||||
}
|
||||
if (editing) {
|
||||
await fetchApi(`/api/apps/custom-links/${editing.id}`, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(payload),
|
||||
headers: { "Content-Type": "application/json" },
|
||||
})
|
||||
} else {
|
||||
await fetchApi("/api/apps/custom-links", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(payload),
|
||||
headers: { "Content-Type": "application/json" },
|
||||
})
|
||||
}
|
||||
onSaved()
|
||||
onOpenChange(false)
|
||||
} catch (e: any) {
|
||||
setError((e && e.message) || t("apps.customLinkSaveError"))
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!editing) return
|
||||
setError(null)
|
||||
setDeleting(true)
|
||||
try {
|
||||
await fetchApi(`/api/apps/custom-links/${editing.id}`, { method: "DELETE" })
|
||||
onSaved()
|
||||
onOpenChange(false)
|
||||
} catch (e: any) {
|
||||
setError((e && e.message) || t("apps.customLinkDeleteError"))
|
||||
} finally {
|
||||
setDeleting(false)
|
||||
}
|
||||
}
|
||||
|
||||
// Sort guests by vmid so the dropdown is easy to scan
|
||||
const sortedGuests = [...guests].sort((a, b) => a.vmid - b.vmid)
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[520px] bg-accent [&_input]:bg-background [&_[role=combobox]]:bg-background">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{editing ? t("apps.customLinkEditTitle") : t("apps.customLinkNewTitle")}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-3 py-2">
|
||||
<div className="grid gap-1.5">
|
||||
<Label htmlFor="cl-name" className="text-xs uppercase tracking-wider text-muted-foreground">{t("apps.customLinkName")}</Label>
|
||||
<Input
|
||||
id="cl-name"
|
||||
autoFocus
|
||||
value={draft.name}
|
||||
onChange={(e) => setDraft((d) => ({ ...d, name: e.target.value }))}
|
||||
placeholder={t("apps.customLinkNamePlaceholder")}
|
||||
maxLength={80}
|
||||
className="text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-1.5">
|
||||
<Label htmlFor="cl-url" className="text-xs uppercase tracking-wider text-muted-foreground">{t("apps.customLinkUrl")}</Label>
|
||||
<Input
|
||||
id="cl-url"
|
||||
type="url"
|
||||
value={draft.url}
|
||||
onChange={(e) => setDraft((d) => ({ ...d, url: e.target.value }))}
|
||||
placeholder="https://example.com"
|
||||
maxLength={512}
|
||||
className="text-sm font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-1.5">
|
||||
<Label htmlFor="cl-logo" className="text-xs uppercase tracking-wider text-muted-foreground">{t("apps.customLinkLogo")}</Label>
|
||||
<Input
|
||||
id="cl-logo"
|
||||
type="url"
|
||||
value={draft.logo_url}
|
||||
onChange={(e) => setDraft((d) => ({ ...d, logo_url: e.target.value }))}
|
||||
placeholder={t("apps.customLinkLogoPlaceholder")}
|
||||
maxLength={512}
|
||||
className="text-sm font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-1.5">
|
||||
<Label className="text-xs uppercase tracking-wider text-muted-foreground">{t("apps.customLinkCategory")}</Label>
|
||||
{customCategoryMode ? (
|
||||
<Input
|
||||
autoFocus
|
||||
value={draft.category}
|
||||
onChange={(e) => setDraft((d) => ({ ...d, category: e.target.value }))}
|
||||
placeholder={t("vmLxc.appEditor.portCategoryCustomPlaceholder")}
|
||||
maxLength={60}
|
||||
className="text-sm"
|
||||
onBlur={() => { if (!draft.category.trim()) setCustomCategoryMode(false) }}
|
||||
/>
|
||||
) : (
|
||||
<Select
|
||||
value={draft.category || "__none__"}
|
||||
onValueChange={(v) => {
|
||||
if (v === "__add__") {
|
||||
setCustomCategoryMode(true)
|
||||
setDraft((d) => ({ ...d, category: "" }))
|
||||
} else if (v === "__none__") {
|
||||
setDraft((d) => ({ ...d, category: "" }))
|
||||
} else {
|
||||
setDraft((d) => ({ ...d, category: v }))
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="text-sm h-9">
|
||||
<SelectValue placeholder={t("vmLxc.appEditor.portCategoryPlaceholder")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__none__">{t("vmLxc.appEditor.portCategoryNone")}</SelectItem>
|
||||
{categoryPresets.map((c) => (
|
||||
<SelectItem key={c} value={c}>{c}</SelectItem>
|
||||
))}
|
||||
<SelectItem value="__add__">{t("vmLxc.appEditor.portCategoryAddNew")}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-1.5">
|
||||
<Label className="text-xs uppercase tracking-wider text-muted-foreground">{t("apps.customLinkBinding")}</Label>
|
||||
<Select
|
||||
value={draft.bindingKey}
|
||||
onValueChange={(v) => setDraft((d) => ({ ...d, bindingKey: v }))}
|
||||
>
|
||||
<SelectTrigger className="text-sm h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={UNBOUND_KEY}>{t("apps.customLinkBindingNone")}</SelectItem>
|
||||
{sortedGuests.map((g) => (
|
||||
<SelectItem key={`${g.type}:${g.vmid}`} value={`${g.type}:${g.vmid}`}>
|
||||
{g.type === "qemu" ? "VM" : "CT"} {g.vmid} · {g.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-[11px] text-muted-foreground leading-relaxed">
|
||||
{t("apps.customLinkBindingHelp")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-xs text-red-400 bg-red-500/10 border border-red-500/30 rounded px-3 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:justify-between">
|
||||
{editing ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleDelete}
|
||||
disabled={deleting || saving}
|
||||
className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-1.5" />
|
||||
{t("apps.customLinkDelete")}
|
||||
</Button>
|
||||
) : <div />}
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" onClick={() => onOpenChange(false)} disabled={saving}>
|
||||
{t("apps.customLinkCancel")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={!canSave}
|
||||
className="bg-blue-500 hover:bg-blue-600 !text-white"
|
||||
>
|
||||
{editing ? t("apps.customLinkSave") : t("apps.customLinkCreate")}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -81,7 +81,7 @@ interface ThresholdLeaf {
|
||||
|
||||
interface ThresholdsTree {
|
||||
cpu: { warning: ThresholdLeaf; critical: ThresholdLeaf }
|
||||
memory: { warning: ThresholdLeaf; critical: ThresholdLeaf; swap_critical: ThresholdLeaf }
|
||||
memory: { warning: ThresholdLeaf; critical: ThresholdLeaf; swap_high: ThresholdLeaf; available_min: ThresholdLeaf }
|
||||
host_storage: { warning: ThresholdLeaf; critical: ThresholdLeaf }
|
||||
lxc_rootfs: { warning: ThresholdLeaf; critical: ThresholdLeaf }
|
||||
cpu_temperature: { warning: ThresholdLeaf; critical: ThresholdLeaf }
|
||||
@@ -150,7 +150,8 @@ const SECTIONS: SectionDef[] = [
|
||||
fields: [
|
||||
{ path: ["memory", "warning"], label: "Memory warning" },
|
||||
{ path: ["memory", "critical"], label: "Memory critical" },
|
||||
{ path: ["memory", "swap_critical"], label: "Swap critical" },
|
||||
{ path: ["memory", "swap_high"], label: "Swap high" },
|
||||
{ path: ["memory", "available_min"], label: "Memory available minimum" },
|
||||
],
|
||||
},
|
||||
// ── Heat ────────────────────────────────────────────────────────
|
||||
@@ -812,20 +813,36 @@ export function HealthThresholds() {
|
||||
))
|
||||
) : section.id === "memory" ? (
|
||||
// Memory & Swap is special: warn/crit pair for
|
||||
// RAM, plus a single Swap threshold that has no
|
||||
// companion (it's a "critical only" metric).
|
||||
// Both use sliders so the section reads as one
|
||||
// visual language end to end.
|
||||
// RAM, plus the swap-pressure pair. Swap
|
||||
// CRITICAL fires only when both conditions hold
|
||||
// — swap file above `swap_high` AND available
|
||||
// RAM below `available_min`. Rendering the two
|
||||
// sliders one under the other under a shared
|
||||
// header reads as "the two knobs of one signal".
|
||||
<>
|
||||
<div className="text-[11px] uppercase tracking-wider text-muted-foreground px-1">
|
||||
{t("settings.healthThresholds.ram")}
|
||||
</div>
|
||||
{renderThresholdRange(["memory"])}
|
||||
<div className="border-t border-border/40">
|
||||
<div className="text-[11px] uppercase tracking-wider text-muted-foreground px-1 pt-1.5">
|
||||
{t("settings.healthThresholds.swapCriticalOnly")}
|
||||
<div className="border-t border-border/40 pt-1.5 mt-1.5">
|
||||
<div className="text-[11px] uppercase tracking-wider text-muted-foreground px-1">
|
||||
{t("settings.healthThresholds.swapPressure")}
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground px-1 pt-1 pb-1 leading-snug">
|
||||
{t("settings.healthThresholds.swapPressureHint")}
|
||||
</p>
|
||||
<div>
|
||||
<div className="text-[10px] uppercase tracking-wider text-muted-foreground/80 px-1 pt-1">
|
||||
{t("settings.healthThresholds.swapHighLabel")}
|
||||
</div>
|
||||
{renderSingleThresholdSlider(["memory", "swap_high"], "critical")}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] uppercase tracking-wider text-muted-foreground/80 px-1">
|
||||
{t("settings.healthThresholds.availableMinLabel")}
|
||||
</div>
|
||||
{renderSingleThresholdSlider(["memory", "available_min"], "warning")}
|
||||
</div>
|
||||
{renderSingleThresholdSlider(["memory", "swap_critical"], "critical")}
|
||||
</div>
|
||||
</>
|
||||
) : section.fields.length === 2 &&
|
||||
|
||||
@@ -34,6 +34,7 @@ import { Badge } from "./ui/badge"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
|
||||
import { fetchApi } from "../lib/api-config"
|
||||
import { fetchLxcApps, getLxcAppsCached, setLxcAppsCached } from "../lib/lxc-apps-cache"
|
||||
import { categoryChipStyle, useIsLightTheme } from "../lib/category-color"
|
||||
import { useT } from "@/lib/i18n/provider"
|
||||
|
||||
// installed_via is optional now — an empty value means "register only,
|
||||
@@ -50,6 +51,14 @@ interface PortEntry {
|
||||
scheme?: "http" | "https"
|
||||
web_path?: string
|
||||
logo_url?: string
|
||||
// Free-text label picked from the presets sourced by
|
||||
// /api/apps/categories (built from helpers_cache.category_names) or
|
||||
// typed manually. Powers the Apps dashboard filter/group.
|
||||
category?: string
|
||||
// Overrides ip:port composition when present — used for apps that
|
||||
// sit behind a reverse-proxy domain. The Apps dashboard opens this
|
||||
// URL as-is instead of `${scheme}://${ip}:${port}${path}`.
|
||||
custom_url?: string
|
||||
}
|
||||
|
||||
interface AppConfig {
|
||||
@@ -102,6 +111,9 @@ interface DetectedApp {
|
||||
name: string
|
||||
logo_url?: string | null
|
||||
default_ports?: number[]
|
||||
// Categoría preset from helpers_cache.category_names[0] — used to
|
||||
// auto-fill the Web Link editor when the user clicks "Register".
|
||||
category?: string | null
|
||||
tracking_suggestion?: TrackingSuggestion | null
|
||||
}
|
||||
|
||||
@@ -206,6 +218,7 @@ interface Suggestions {
|
||||
tracking_suggestion?: TrackingSuggestion | null
|
||||
default_ports?: number[]
|
||||
logo_url?: string | null
|
||||
category?: string | null
|
||||
extras?: DetectedApp[]
|
||||
docker_web_links?: DockerWebLinkSuggestion[]
|
||||
}
|
||||
@@ -230,6 +243,9 @@ interface CatalogDetail {
|
||||
logo_url: string | null
|
||||
website: string
|
||||
default_ports: number[]
|
||||
// First helpers_cache.category_names value for this slug — auto-fills
|
||||
// the Categoría field on each port when seeded.
|
||||
category?: string | null
|
||||
tracking_suggestion?: TrackingSuggestion | null
|
||||
}
|
||||
|
||||
@@ -319,7 +335,9 @@ const HTTPS_HINT_PORTS = new Set([443, 4443, 8443, 9443])
|
||||
const defaultSchemeFor = (port: number | ""): "http" | "https" =>
|
||||
HTTPS_HINT_PORTS.has(Number(port)) ? "https" : "http"
|
||||
|
||||
function buildWebUrl(ip: string | undefined | null, port: number | "", scheme?: "http" | "https") {
|
||||
function buildWebUrl(ip: string | undefined | null, port: number | "", scheme?: "http" | "https", customUrl?: string) {
|
||||
const custom = (customUrl || "").trim()
|
||||
if (custom) return custom
|
||||
if (!ip || ip === "DHCP" || !port) return null
|
||||
return `${scheme || defaultSchemeFor(port)}://${ip}:${port}`
|
||||
}
|
||||
@@ -339,6 +357,7 @@ function suggestPackageName(name: string) {
|
||||
|
||||
export function LxcAppPanel({ vmid, ctIp, onChange, managed, initialData }: Props) {
|
||||
const t = useT()
|
||||
const isLightTheme = useIsLightTheme()
|
||||
// Seed from `initialData` first, then fall back to the shared cache
|
||||
// module. Together those two sources cover every reopen scenario
|
||||
// without flashing a spinner — see lxc-apps-cache.ts for the dedup
|
||||
@@ -370,6 +389,16 @@ export function LxcAppPanel({ vmid, ctIp, onChange, managed, initialData }: Prop
|
||||
// endpoter to seed name / logo / ports / tracking_suggestion at once.
|
||||
const [catalog, setCatalog] = useState<CatalogEntry[]>([])
|
||||
const [pickerOpen, setPickerOpen] = useState(false)
|
||||
// Preset categories exposed by /api/apps/categories (built from
|
||||
// helpers_cache.category_names). Feeds the Categoría <Select> in
|
||||
// the Web Link editor. Cached client-side for the session — the
|
||||
// endpoint is static per app version so no revalidation needed.
|
||||
const [categoryPresets, setCategoryPresets] = useState<string[]>([])
|
||||
// Ports where the user picked "+ Add new" and is typing a custom
|
||||
// category. Tracked by port index; cleared once they blur the
|
||||
// input or come back to a preset. Also auto-inferred when the
|
||||
// stored category isn't in the presets (freshly-loaded sidecar).
|
||||
const [customCategoryPorts, setCustomCategoryPorts] = useState<Set<number>>(new Set())
|
||||
|
||||
// "Register a different app" browse panel: when the user has hidden
|
||||
// some detections we surface them here with a Restore button before
|
||||
@@ -489,6 +518,17 @@ export function LxcAppPanel({ vmid, ctIp, onChange, managed, initialData }: Prop
|
||||
return () => { cancelled = true }
|
||||
}, [editorOpen, catalog.length])
|
||||
|
||||
useEffect(() => {
|
||||
if (!editorOpen || categoryPresets.length > 0) return
|
||||
let cancelled = false
|
||||
fetchApi<string[]>("/api/apps/categories")
|
||||
.then((data: string[]) => {
|
||||
if (!cancelled && Array.isArray(data)) setCategoryPresets(data)
|
||||
})
|
||||
.catch(() => { /* non-fatal — datalist stays empty, user still types freely */ })
|
||||
return () => { cancelled = true }
|
||||
}, [editorOpen, categoryPresets.length])
|
||||
|
||||
// Derived state — computed here BEFORE any conditional early
|
||||
// return so React sees the same hook order on every render.
|
||||
// Rules of Hooks: `useMemo` after an `if (loading) return …`
|
||||
@@ -508,6 +548,7 @@ export function LxcAppPanel({ vmid, ctIp, onChange, managed, initialData }: Prop
|
||||
name: suggestions.name_suggestion,
|
||||
logo_url: suggestions.logo_url,
|
||||
default_ports: suggestions.default_ports,
|
||||
category: suggestions.category,
|
||||
tracking_suggestion: suggestions.tracking_suggestion,
|
||||
})
|
||||
}
|
||||
@@ -659,6 +700,10 @@ export function LxcAppPanel({ vmid, ctIp, onChange, managed, initialData }: Prop
|
||||
port,
|
||||
scheme: defaultSchemeFor(port),
|
||||
web_path: s?.web_path_hint || "",
|
||||
// Auto-fill Categoría from helpers_cache.category_names[0]
|
||||
// when the catalog entry carries one. User can still change
|
||||
// it in the editor before saving.
|
||||
...(p.category ? { category: p.category } : {}),
|
||||
}))
|
||||
}
|
||||
if (opts.withTracking && p.tracking_suggestion) {
|
||||
@@ -1081,12 +1126,28 @@ export function LxcAppPanel({ vmid, ctIp, onChange, managed, initialData }: Prop
|
||||
logo_url: link.logo_url || "",
|
||||
}
|
||||
const last = draft.ports[draft.ports.length - 1]
|
||||
if (last && last.port === "" && !last.description) {
|
||||
const ports = [...draft.ports]
|
||||
ports[ports.length - 1] = entry
|
||||
setField({ ports })
|
||||
} else {
|
||||
const indexAfterAdd = (last && last.port === "" && !last.description)
|
||||
? draft.ports.length - 1
|
||||
: draft.ports.length
|
||||
if (indexAfterAdd === draft.ports.length) {
|
||||
setField({ ports: [...draft.ports, entry] })
|
||||
} else {
|
||||
const ports = [...draft.ports]
|
||||
ports[indexAfterAdd] = entry
|
||||
setField({ ports })
|
||||
}
|
||||
// Ask the backend whether this service_name has a known catalog
|
||||
// category and, if so, patch the just-inserted port so the user
|
||||
// finds it pre-selected instead of having to open the dropdown.
|
||||
// Non-blocking — the port is already visible either way.
|
||||
const q = (link.service_name || "").trim()
|
||||
if (q) {
|
||||
fetchApi<{ category: string | null }>(`/api/apps/suggest_category?name=${encodeURIComponent(q)}`)
|
||||
.then((r) => {
|
||||
if (!r?.category) return
|
||||
setPort(indexAfterAdd, { category: r.category })
|
||||
})
|
||||
.catch(() => { /* non-fatal — user can pick manually */ })
|
||||
}
|
||||
}
|
||||
const removePort = (i: number) =>
|
||||
@@ -1323,6 +1384,7 @@ export function LxcAppPanel({ vmid, ctIp, onChange, managed, initialData }: Prop
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
<div className="space-y-3">
|
||||
{draft.ports.map((entry, i) => (
|
||||
<div
|
||||
@@ -1373,9 +1435,79 @@ export function LxcAppPanel({ vmid, ctIp, onChange, managed, initialData }: Prop
|
||||
onChange={(e) => setPort(i, { logo_url: e.target.value })}
|
||||
placeholder={t("vmLxc.appEditor.portLogoLabel")}
|
||||
maxLength={512}
|
||||
className="col-start-1 col-end-4 text-xs font-mono h-8 opacity-70 focus:opacity-100"
|
||||
className="col-start-1 col-end-4 text-xs font-mono h-8"
|
||||
type="url"
|
||||
/>
|
||||
{/* Category + custom URL — stacked on mobile so
|
||||
each field gets full width; side-by-side on
|
||||
tablet+ (≥sm) to save vertical space. Both
|
||||
span cols 1-3 via the outer wrapper. */}
|
||||
<div className="col-start-1 col-end-4 flex flex-col sm:flex-row gap-2">
|
||||
{/* Per-link category — <Select> for presets +
|
||||
"+ Add new" option that flips to a text
|
||||
input. Matches the "Installed via" Select
|
||||
look elsewhere in this editor. */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{(customCategoryPorts.has(i) ||
|
||||
(entry.category && !categoryPresets.includes(entry.category))) ? (
|
||||
<Input
|
||||
autoFocus={customCategoryPorts.has(i)}
|
||||
value={entry.category || ""}
|
||||
onChange={(e) => setPort(i, { category: e.target.value })}
|
||||
onBlur={() => {
|
||||
if (!(entry.category || "").trim()) {
|
||||
setCustomCategoryPorts((s) => { const n = new Set(s); n.delete(i); return n })
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape") {
|
||||
setPort(i, { category: "" })
|
||||
setCustomCategoryPorts((s) => { const n = new Set(s); n.delete(i); return n })
|
||||
}
|
||||
}}
|
||||
placeholder={t("vmLxc.appEditor.portCategoryCustomPlaceholder")}
|
||||
maxLength={60}
|
||||
className="text-xs h-8"
|
||||
/>
|
||||
) : (
|
||||
<Select
|
||||
value={entry.category || "__none__"}
|
||||
onValueChange={(v) => {
|
||||
if (v === "__add__") {
|
||||
setCustomCategoryPorts((s) => new Set(s).add(i))
|
||||
setPort(i, { category: "" })
|
||||
} else if (v === "__none__") {
|
||||
setPort(i, { category: "" })
|
||||
} else {
|
||||
setPort(i, { category: v })
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="text-xs h-8">
|
||||
<SelectValue placeholder={t("vmLxc.appEditor.portCategoryPlaceholder")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__none__">{t("vmLxc.appEditor.portCategoryNone")}</SelectItem>
|
||||
{categoryPresets.map((c) => (
|
||||
<SelectItem key={c} value={c}>{c}</SelectItem>
|
||||
))}
|
||||
<SelectItem value="__add__">{t("vmLxc.appEditor.portCategoryAddNew")}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
</div>
|
||||
{/* Per-link custom URL — takes precedence over
|
||||
ip:port when the app lives behind a reverse
|
||||
proxy on a public domain. */}
|
||||
<Input
|
||||
value={entry.custom_url || ""}
|
||||
onChange={(e) => setPort(i, { custom_url: e.target.value })}
|
||||
placeholder={t("vmLxc.appEditor.portCustomUrlPlaceholder")}
|
||||
maxLength={512}
|
||||
className="flex-1 min-w-0 text-xs font-mono h-8"
|
||||
type="url"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -1434,7 +1566,7 @@ export function LxcAppPanel({ vmid, ctIp, onChange, managed, initialData }: Prop
|
||||
<SelectItem value="binary">{t("vmLxc.appEditor.binaryVersionHint")}</SelectItem>
|
||||
<SelectItem value="file">{t("vmLxc.appEditor.methodFile")}</SelectItem>
|
||||
<SelectItem value="python_dist">{t("vmLxc.appEditor.methodPython")}</SelectItem>
|
||||
<SelectItem value="docker_label">{t("vmLxc.appEditor.methodDockerLabel")}</SelectItem>
|
||||
<SelectItem value="docker_label" disabled>{t("vmLxc.appEditor.methodDockerLabel")}</SelectItem>
|
||||
<SelectItem value="docker_exec">{t("vmLxc.appEditor.methodDockerExec")}</SelectItem>
|
||||
<SelectItem value="command">{t("vmLxc.appEditor.methodCommand")}</SelectItem>
|
||||
<SelectItem value="manual">{t("vmLxc.appEditor.methodManual")}</SelectItem>
|
||||
@@ -2281,7 +2413,7 @@ export function LxcAppPanel({ vmid, ctIp, onChange, managed, initialData }: Prop
|
||||
{app.ports && app.ports.length > 0 && (
|
||||
<div className="mb-3 space-y-4">
|
||||
{app.ports.map((p) => {
|
||||
const url = buildWebUrl(ctIp, p.port, p.scheme)
|
||||
const url = buildWebUrl(ctIp, p.port, p.scheme, p.custom_url)
|
||||
if (!url) return null
|
||||
const label = p.description || app.name
|
||||
return (
|
||||
@@ -2292,18 +2424,34 @@ export function LxcAppPanel({ vmid, ctIp, onChange, managed, initialData }: Prop
|
||||
className="h-14 w-14 flex-shrink-0 rounded-md object-contain"
|
||||
/>
|
||||
)}
|
||||
<div className="min-w-0 flex flex-col">
|
||||
<div className="min-w-0 flex flex-col gap-1 flex-1">
|
||||
<span className="text-sm font-medium text-foreground truncate">{label}</span>
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-400 hover:text-blue-300 inline-flex items-center gap-1.5 min-w-0"
|
||||
title={url}
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
<span className="font-mono text-sm truncate">{url}</span>
|
||||
</a>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-400 hover:text-blue-300 inline-flex items-center gap-1.5 min-w-0 flex-1"
|
||||
title={url}
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
<span className="font-mono text-sm truncate">{url}</span>
|
||||
</a>
|
||||
{/* Category chip — same OKLCH deterministic
|
||||
colour as the Apps dashboard. Anchored
|
||||
right end of the weblink row so the URL
|
||||
gets `flex-1` (truncates when long)
|
||||
while the chip keeps its full width. */}
|
||||
{p.category && (
|
||||
<span
|
||||
style={categoryChipStyle(p.category, isLightTheme)}
|
||||
className="flex-shrink-0 px-1.5 py-0.5 border rounded text-[10px] font-medium truncate max-w-[40%]"
|
||||
title={p.category}
|
||||
>
|
||||
{p.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -2402,40 +2550,55 @@ export function LxcAppPanel({ vmid, ctIp, onChange, managed, initialData }: Prop
|
||||
detections, so the user gets one-click Restore before hand-
|
||||
typing a custom app. */}
|
||||
{apps.length > 0 && (
|
||||
<div className="flex flex-col items-stretch gap-2 max-w-xs mx-auto sm:flex-row sm:flex-wrap sm:justify-end sm:items-center sm:max-w-none sm:mx-0">
|
||||
// Mobile: three buttons in one row, aligned right. Order is
|
||||
// Search → Register → Edit (Edit rightmost, matches desktop).
|
||||
// All three share the same width — a min-w that fits the
|
||||
// widest translated label of the Edit button ("Bearbeiten" in
|
||||
// DE, 10 chars) so the icon-only Search and Register buttons
|
||||
// line up as neat equal squares next to the labelled Edit.
|
||||
// Desktop: no min-width — each button auto-sizes to its text.
|
||||
<div className="flex flex-row flex-wrap justify-end items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={searchInstalledApplications}
|
||||
disabled={searchingApplications || editMode}
|
||||
className="w-full sm:w-auto order-2 sm:order-1"
|
||||
>
|
||||
{searchingApplications
|
||||
? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
|
||||
: <Search className="h-4 w-4 mr-1.5" />}
|
||||
{searchingApplications
|
||||
className="min-w-[7rem] sm:min-w-0 px-2.5 sm:px-3"
|
||||
aria-label={searchingApplications
|
||||
? t("vmLxc.appEditor.searchingApplications")
|
||||
: t("vmLxc.appEditor.searchApplications")}
|
||||
>
|
||||
{searchingApplications
|
||||
? <Loader2 className="h-4 w-4 sm:mr-1.5 animate-spin" />
|
||||
: <Search className="h-4 w-4 sm:mr-1.5" />}
|
||||
<span className="hidden sm:inline">
|
||||
{searchingApplications
|
||||
? t("vmLxc.appEditor.searchingApplications")
|
||||
: t("vmLxc.appEditor.searchApplications")}
|
||||
</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={openBrowseOrEditor}
|
||||
disabled={editMode}
|
||||
className="w-full sm:w-auto order-3 sm:order-2"
|
||||
className="min-w-[7rem] sm:min-w-0 px-2.5 sm:px-3"
|
||||
aria-label={t("vmLxc.appEditor.addAnotherApplication")}
|
||||
>
|
||||
<PlusCircle className="h-4 w-4 mr-1.5" />
|
||||
{t("vmLxc.appEditor.addAnotherApplication")}
|
||||
{hiddenDetections.length > 0 && (
|
||||
<span className="ml-2 text-[10px] opacity-70">
|
||||
· {t("vmLxc.appEditor.hiddenSuffix", { count: hiddenDetections.length })}
|
||||
</span>
|
||||
)}
|
||||
<PlusCircle className="h-4 w-4 sm:mr-1.5" />
|
||||
<span className="hidden sm:inline">
|
||||
{t("vmLxc.appEditor.addAnotherApplication")}
|
||||
{hiddenDetections.length > 0 && (
|
||||
<span className="ml-2 text-[10px] opacity-70">
|
||||
· {t("vmLxc.appEditor.hiddenSuffix", { count: hiddenDetections.length })}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditMode((v) => !v)}
|
||||
className="h-9 px-3 text-sm rounded-md border border-border bg-background hover:bg-muted transition-colors inline-flex items-center justify-center gap-1.5 w-full sm:w-auto order-1 sm:order-3"
|
||||
className="h-9 px-3 text-sm rounded-md border border-border bg-background hover:bg-muted transition-colors inline-flex items-center justify-center gap-1.5 min-w-[7rem] sm:min-w-0"
|
||||
>
|
||||
{editMode ? (
|
||||
<>
|
||||
|
||||
@@ -0,0 +1,373 @@
|
||||
"use client"
|
||||
|
||||
import React, { useState, useRef, useEffect } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
|
||||
import {
|
||||
Boxes,
|
||||
Check,
|
||||
ChevronDown,
|
||||
DatabaseBackup,
|
||||
GripVertical,
|
||||
Grid3x3,
|
||||
LayoutDashboard,
|
||||
Layers,
|
||||
RotateCcw,
|
||||
Server,
|
||||
Settings2,
|
||||
Terminal,
|
||||
} from "lucide-react"
|
||||
import { useT } from "../lib/i18n/provider"
|
||||
import {
|
||||
DEFAULT_TAB_ORDER,
|
||||
useTabOrder,
|
||||
type TabId,
|
||||
} from "../lib/tab-order"
|
||||
|
||||
// Long-press activation on touch — matches the delay platform UIs
|
||||
// use so the user can still scroll a page that happens to start on a
|
||||
// tab handle.
|
||||
const TOUCH_ACTIVATION_MS = 250
|
||||
const TOUCH_TOLERANCE_PX = 5
|
||||
|
||||
type TabMeta = {
|
||||
id: TabId
|
||||
Icon: React.ComponentType<{ className?: string }>
|
||||
labelKey: string
|
||||
hasDropdown: boolean
|
||||
}
|
||||
|
||||
const META: Record<TabId, TabMeta> = {
|
||||
overview: { id: "overview", Icon: LayoutDashboard, labelKey: "navigation.overview", hasDropdown: false },
|
||||
apps: { id: "apps", Icon: Grid3x3, labelKey: "navigation.apps", hasDropdown: false },
|
||||
vms: { id: "vms", Icon: Boxes, labelKey: "navigation.virtualMachines", hasDropdown: false },
|
||||
node: { id: "node", Icon: Server, labelKey: "navigation.node", hasDropdown: true },
|
||||
backup: { id: "backup", Icon: DatabaseBackup, labelKey: "navigation.backup", hasDropdown: false },
|
||||
terminal: { id: "terminal", Icon: Terminal, labelKey: "navigation.terminal", hasDropdown: false },
|
||||
admin: { id: "admin", Icon: Settings2, labelKey: "navigation.admin", hasDropdown: true },
|
||||
}
|
||||
|
||||
// Sortable list built on Pointer Events. Mouse activates on move
|
||||
// (2px threshold to survive accidental clicks); touch activates on
|
||||
// long-press after 250ms unless the finger moves past 5px, which is
|
||||
// treated as a scroll intent and the drag is cancelled.
|
||||
export function NavTabOrderCard() {
|
||||
const t = useT()
|
||||
const { order: savedOrder, setOrder, reset, isCustom } = useTabOrder()
|
||||
const [editMode, setEditMode] = useState(false)
|
||||
const [draft, setDraft] = useState<TabId[]>(savedOrder)
|
||||
const [saved, setSaved] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!editMode) setDraft(savedOrder)
|
||||
}, [savedOrder, editMode])
|
||||
|
||||
const handleCancel = () => {
|
||||
setDraft(savedOrder)
|
||||
setEditMode(false)
|
||||
}
|
||||
const handleSave = () => {
|
||||
setOrder(draft)
|
||||
setEditMode(false)
|
||||
setSaved(true)
|
||||
window.setTimeout(() => setSaved(false), 2000)
|
||||
}
|
||||
const handleReset = () => {
|
||||
setDraft([...DEFAULT_TAB_ORDER])
|
||||
}
|
||||
|
||||
const draftIsChanged =
|
||||
draft.length !== savedOrder.length ||
|
||||
draft.some((id, i) => id !== savedOrder[i])
|
||||
const draftIsCustom =
|
||||
draft.length !== DEFAULT_TAB_ORDER.length ||
|
||||
draft.some((id, i) => id !== DEFAULT_TAB_ORDER[i])
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Layers className="h-5 w-5 text-blue-500" />
|
||||
<CardTitle>{t("settings.navOrder.title")}</CardTitle>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{saved && (
|
||||
<span className="flex items-center gap-1 text-xs text-green-500">
|
||||
<Check className="h-3.5 w-3.5" />
|
||||
{t("status.saved")}
|
||||
</span>
|
||||
)}
|
||||
{editMode ? (
|
||||
<>
|
||||
<button
|
||||
className="h-7 px-3 text-xs rounded-md border border-border bg-background hover:bg-muted transition-colors text-muted-foreground"
|
||||
onClick={handleCancel}
|
||||
>
|
||||
{t("actions.cancel")}
|
||||
</button>
|
||||
<button
|
||||
className="h-7 px-3 text-xs rounded-md bg-blue-600 hover:bg-blue-700 text-white transition-colors disabled:opacity-50 flex items-center gap-1.5"
|
||||
onClick={handleSave}
|
||||
disabled={!draftIsChanged}
|
||||
>
|
||||
<Check className="h-3 w-3" />
|
||||
{t("actions.save")}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
className="h-7 px-3 text-xs rounded-md border border-border bg-background hover:bg-muted transition-colors flex items-center gap-1.5"
|
||||
onClick={() => setEditMode(true)}
|
||||
>
|
||||
<Settings2 className="h-3 w-3" />
|
||||
{t("actions.edit")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<CardDescription>{t("settings.navOrder.description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent
|
||||
className={
|
||||
editMode
|
||||
? "bg-accent"
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<SortableList
|
||||
items={editMode ? draft : savedOrder}
|
||||
onReorder={setDraft}
|
||||
editable={editMode}
|
||||
t={t}
|
||||
/>
|
||||
{editMode && (
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<button
|
||||
className="h-7 px-3 text-xs rounded-md border border-border bg-background hover:bg-muted transition-colors flex items-center gap-1.5 text-muted-foreground disabled:opacity-50 disabled:pointer-events-none"
|
||||
onClick={handleReset}
|
||||
disabled={!draftIsCustom}
|
||||
>
|
||||
<RotateCcw className="h-3 w-3" />
|
||||
{t("settings.navOrder.reset")}
|
||||
</button>
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
{t("settings.navOrder.hint")}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{!editMode && isCustom && (
|
||||
<div className="mt-3 text-[11px] text-muted-foreground">
|
||||
{t("settings.navOrder.customActive")}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------
|
||||
// SortableList
|
||||
// -----------------------------------------------------------------
|
||||
|
||||
type DragState = {
|
||||
fromIdx: number
|
||||
pointerY: number
|
||||
offsetY: number
|
||||
itemHeight: number
|
||||
} | null
|
||||
|
||||
function SortableList({
|
||||
items,
|
||||
onReorder,
|
||||
editable,
|
||||
t,
|
||||
}: {
|
||||
items: TabId[]
|
||||
onReorder: (next: TabId[]) => void
|
||||
editable: boolean
|
||||
t: (k: string) => string
|
||||
}) {
|
||||
const [drag, setDrag] = useState<DragState>(null)
|
||||
const [hoverIdx, setHoverIdx] = useState<number | null>(null)
|
||||
const listRef = useRef<HTMLUListElement | null>(null)
|
||||
|
||||
const commit = (from: number, to: number) => {
|
||||
if (from === to || to < 0 || to >= items.length) return
|
||||
const next = items.slice()
|
||||
const [moved] = next.splice(from, 1)
|
||||
next.splice(to, 0, moved)
|
||||
onReorder(next)
|
||||
}
|
||||
|
||||
const handleDragMove = (clientY: number) => {
|
||||
if (!drag || !listRef.current) return
|
||||
const rows = Array.from(listRef.current.querySelectorAll<HTMLLIElement>("li[data-row]"))
|
||||
let target = drag.fromIdx
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
const rect = rows[i].getBoundingClientRect()
|
||||
const mid = rect.top + rect.height / 2
|
||||
if (clientY < mid) { target = i; break }
|
||||
target = i
|
||||
}
|
||||
setHoverIdx(target)
|
||||
setDrag((d) => (d ? { ...d, pointerY: clientY } : d))
|
||||
}
|
||||
|
||||
const handleDragEnd = () => {
|
||||
if (drag && hoverIdx !== null) commit(drag.fromIdx, hoverIdx)
|
||||
setDrag(null)
|
||||
setHoverIdx(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<ul
|
||||
ref={listRef}
|
||||
className="flex flex-col gap-1.5 select-none"
|
||||
onPointerMove={(e) => { if (drag) handleDragMove(e.clientY) }}
|
||||
onPointerUp={handleDragEnd}
|
||||
onPointerCancel={handleDragEnd}
|
||||
>
|
||||
{items.map((id, idx) => {
|
||||
const isDragging = drag?.fromIdx === idx
|
||||
const meta = META[id]
|
||||
return (
|
||||
<SortableRow
|
||||
key={id}
|
||||
id={id}
|
||||
idx={idx}
|
||||
meta={meta}
|
||||
label={t(meta.labelKey)}
|
||||
editable={editable}
|
||||
isDragging={!!isDragging}
|
||||
hoverIdx={hoverIdx}
|
||||
drag={drag}
|
||||
onDragStart={(fromIdx, pointerY, offsetY, itemHeight) => {
|
||||
setDrag({ fromIdx, pointerY, offsetY, itemHeight })
|
||||
setHoverIdx(fromIdx)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
function SortableRow({
|
||||
id,
|
||||
idx,
|
||||
meta,
|
||||
label,
|
||||
editable,
|
||||
isDragging,
|
||||
hoverIdx,
|
||||
drag,
|
||||
onDragStart,
|
||||
}: {
|
||||
id: TabId
|
||||
idx: number
|
||||
meta: TabMeta
|
||||
label: string
|
||||
editable: boolean
|
||||
isDragging: boolean
|
||||
hoverIdx: number | null
|
||||
drag: DragState
|
||||
onDragStart: (fromIdx: number, pointerY: number, offsetY: number, itemHeight: number) => void
|
||||
}) {
|
||||
const rowRef = useRef<HTMLLIElement | null>(null)
|
||||
const longPressTimer = useRef<number | null>(null)
|
||||
const pointerStart = useRef<{ x: number; y: number } | null>(null)
|
||||
const activatedRef = useRef(false)
|
||||
|
||||
const cancelLongPress = () => {
|
||||
if (longPressTimer.current !== null) {
|
||||
window.clearTimeout(longPressTimer.current)
|
||||
longPressTimer.current = null
|
||||
}
|
||||
}
|
||||
|
||||
const beginDrag = (clientY: number) => {
|
||||
if (!rowRef.current) return
|
||||
const rect = rowRef.current.getBoundingClientRect()
|
||||
activatedRef.current = true
|
||||
onDragStart(idx, clientY, clientY - rect.top, rect.height)
|
||||
}
|
||||
|
||||
const handlePointerDown = (e: React.PointerEvent<HTMLLIElement>) => {
|
||||
if (!editable) return
|
||||
if (e.button !== undefined && e.button !== 0) return
|
||||
pointerStart.current = { x: e.clientX, y: e.clientY }
|
||||
activatedRef.current = false
|
||||
if (e.pointerType === "touch") {
|
||||
longPressTimer.current = window.setTimeout(() => {
|
||||
longPressTimer.current = null
|
||||
beginDrag(e.clientY)
|
||||
}, TOUCH_ACTIVATION_MS)
|
||||
} else {
|
||||
// Mouse/pen: activate immediately on press.
|
||||
beginDrag(e.clientY)
|
||||
}
|
||||
;(e.currentTarget as HTMLLIElement).setPointerCapture(e.pointerId)
|
||||
}
|
||||
|
||||
const handlePointerMove = (e: React.PointerEvent<HTMLLIElement>) => {
|
||||
if (!editable) return
|
||||
if (!activatedRef.current && pointerStart.current) {
|
||||
const dx = e.clientX - pointerStart.current.x
|
||||
const dy = e.clientY - pointerStart.current.y
|
||||
if (Math.hypot(dx, dy) > TOUCH_TOLERANCE_PX) {
|
||||
// Movement before activation → scroll intent on touch. Cancel
|
||||
// the pending long-press so the page can scroll normally.
|
||||
cancelLongPress()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handlePointerUp = () => {
|
||||
cancelLongPress()
|
||||
pointerStart.current = null
|
||||
}
|
||||
|
||||
// Simple drag visual: ghost the row being dragged, show a blue
|
||||
// drop-line above or below the row the pointer is currently over.
|
||||
// No item swap animation — commit on release.
|
||||
const isTarget = drag && hoverIdx === idx && drag.fromIdx !== idx
|
||||
const dropAbove = isTarget && drag!.fromIdx > idx
|
||||
const dropBelow = isTarget && drag!.fromIdx < idx
|
||||
const RowIcon = meta.Icon
|
||||
|
||||
return (
|
||||
<li
|
||||
ref={rowRef}
|
||||
data-row
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={handlePointerUp}
|
||||
onPointerCancel={handlePointerUp}
|
||||
className={[
|
||||
"relative rounded-md border transition-colors",
|
||||
editable
|
||||
? "bg-background border-border cursor-grab active:cursor-grabbing touch-none"
|
||||
: "bg-card border-border/60",
|
||||
isDragging ? "opacity-40" : "",
|
||||
].join(" ")}
|
||||
>
|
||||
{dropAbove && <div className="absolute -top-[3px] left-2 right-2 h-[2px] bg-blue-500 rounded-full pointer-events-none" />}
|
||||
{dropBelow && <div className="absolute -bottom-[3px] left-2 right-2 h-[2px] bg-blue-500 rounded-full pointer-events-none" />}
|
||||
<div className="flex items-center gap-3 p-2.5">
|
||||
<GripVertical
|
||||
className={
|
||||
"h-4 w-4 flex-shrink-0 " +
|
||||
(editable ? "text-muted-foreground" : "text-muted-foreground/40")
|
||||
}
|
||||
/>
|
||||
<RowIcon className="h-4 w-4 flex-shrink-0 text-blue-500" />
|
||||
<div className="flex-1 min-w-0 flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-foreground">{label}</span>
|
||||
{meta.hasDropdown && (
|
||||
<ChevronDown className="h-3 w-3 text-muted-foreground/70" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect, useMemo, useCallback } from "react"
|
||||
import React, { useState, useEffect, useMemo, useCallback } from "react"
|
||||
import useSWR from "swr"
|
||||
import { Badge } from "./ui/badge"
|
||||
import { Button } from "./ui/button"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs"
|
||||
@@ -8,6 +9,7 @@ import { SystemOverview } from "./system-overview"
|
||||
import { StorageOverview } from "./storage-overview"
|
||||
import { NetworkMetrics } from "./network-metrics"
|
||||
import { VirtualMachines } from "./virtual-machines"
|
||||
import { AppsDashboard } from "./apps-dashboard"
|
||||
import Hardware from "./hardware"
|
||||
import { SystemLogs } from "./system-logs"
|
||||
import { Settings } from "./settings"
|
||||
@@ -32,6 +34,7 @@ import {
|
||||
HardDrive,
|
||||
NetworkIcon,
|
||||
Boxes,
|
||||
Grid3x3,
|
||||
Cpu,
|
||||
ScrollText,
|
||||
SettingsIcon,
|
||||
@@ -53,6 +56,7 @@ import {
|
||||
} from "./ui/dropdown-menu"
|
||||
import { useT } from "../lib/i18n/provider"
|
||||
import { APP_VERSION } from "../lib/version"
|
||||
import { useTabOrder, firstActualTab, type TabId } from "../lib/tab-order"
|
||||
|
||||
interface SystemStatus {
|
||||
status: "healthy" | "warning" | "critical"
|
||||
@@ -81,8 +85,19 @@ interface FlaskSystemInfo {
|
||||
}
|
||||
}
|
||||
|
||||
// Prefetch on dashboard mount: SWR caches by key across all
|
||||
// `useSWR` calls, so firing these here means the Apps tab finds the
|
||||
// data already resolved when it opens. Without this, the tab pays a
|
||||
// visible roundtrip on first render because VirtualMachines has been
|
||||
// warming /api/vms since page load but nobody was warming the custom
|
||||
// links endpoint.
|
||||
const _dashboardPrefetchFetcher = (url: string) => fetchApi(url)
|
||||
|
||||
export function ProxmoxDashboard() {
|
||||
const t = useT()
|
||||
useSWR("/api/apps/custom-links", _dashboardPrefetchFetcher, { revalidateOnFocus: false })
|
||||
useSWR("/api/apps/categories", _dashboardPrefetchFetcher, { revalidateOnFocus: false })
|
||||
const { order: tabOrder } = useTabOrder()
|
||||
const [systemStatus, setSystemStatus] = useState<SystemStatus>({
|
||||
status: "healthy",
|
||||
uptime: "Loading...",
|
||||
@@ -95,6 +110,13 @@ export function ProxmoxDashboard() {
|
||||
const [componentKey, setComponentKey] = useState(0)
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState("overview")
|
||||
// On first mount, land on whatever the user's custom order says is
|
||||
// the leading tab. localStorage isn't available during SSR so this
|
||||
// runs post-hydration; the tiny flash is acceptable and matches the
|
||||
// pattern next-themes uses for the same reason.
|
||||
useEffect(() => {
|
||||
setActiveTab(firstActualTab())
|
||||
}, [])
|
||||
const [infoCount, setInfoCount] = useState(0)
|
||||
const [updateAvailable, setUpdateAvailable] = useState(false)
|
||||
const [showNavigation, setShowNavigation] = useState(true)
|
||||
@@ -368,6 +390,7 @@ export function ProxmoxDashboard() {
|
||||
const getActiveTabLabel = () => {
|
||||
switch (activeTab) {
|
||||
case "overview": return t("navigation.overview")
|
||||
case "apps": return t("navigation.apps")
|
||||
case "vms": return t("navigation.virtualMachines")
|
||||
case "storage": return t("navigation.storage")
|
||||
case "network": return t("navigation.network")
|
||||
@@ -621,75 +644,62 @@ export function ProxmoxDashboard() {
|
||||
: "text-muted-foreground hover:text-foreground rounded-sm"
|
||||
}`
|
||||
|
||||
// Data-driven TabsList: iterate over the user's saved
|
||||
// top-level order. Each slot is either a direct tab or a
|
||||
// dropdown group (Node/Admin). The internal items of a
|
||||
// dropdown are never reordered by the user — a grouped
|
||||
// slot moves as a unit.
|
||||
const renderDirect = (
|
||||
value: string,
|
||||
Icon: React.ComponentType<{ className?: string }>,
|
||||
label: string,
|
||||
) => (
|
||||
<TabsTrigger key={value} value={value} className={triggerActiveClass}>
|
||||
<Icon className="mr-2 h-4 w-4" />
|
||||
{label}
|
||||
</TabsTrigger>
|
||||
)
|
||||
const renderDropdown = (
|
||||
key: string,
|
||||
items: { value: string; label: string; Icon: React.ComponentType<{ className?: string }> }[],
|
||||
active: boolean,
|
||||
TriggerIcon: React.ComponentType<{ className?: string }>,
|
||||
triggerLabel: string,
|
||||
) => (
|
||||
<DropdownMenu key={key}>
|
||||
<DropdownMenuTrigger className={dropdownBtnClass(active)}>
|
||||
<TriggerIcon className="mr-2 h-4 w-4" />
|
||||
{triggerLabel}
|
||||
<ChevronDown className="ml-1.5 h-3 w-3 opacity-70" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="center" className="min-w-[180px]">
|
||||
{items.map(({ value, label, Icon }) => (
|
||||
<DropdownMenuItem
|
||||
key={value}
|
||||
onClick={() => setActiveTab(value)}
|
||||
className={activeTab === value ? "bg-blue-500/10 text-blue-500" : ""}
|
||||
>
|
||||
<Icon className="mr-2 h-4 w-4" />
|
||||
{label}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
const renderTop = (id: TabId) => {
|
||||
switch (id) {
|
||||
case "overview": return renderDirect("overview", LayoutDashboard, t("navigation.overview"))
|
||||
case "apps": return renderDirect("apps", Grid3x3, t("navigation.apps"))
|
||||
case "vms": return renderDirect("vms", Boxes, t("navigation.virtualMachines"))
|
||||
case "backup": return renderDirect("backup", DatabaseBackup, t("navigation.backup"))
|
||||
case "terminal": return renderDirect("terminal", Terminal, t("navigation.terminal"))
|
||||
case "node": return renderDropdown("node", NODE_ITEMS, isNodeActive, NodeTriggerIcon, NodeTriggerLabel)
|
||||
case "admin": return renderDropdown("admin", ADMIN_ITEMS, isAdminActive, AdminTriggerIcon, AdminTriggerLabel)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<TabsList className="hidden lg:grid w-full grid-cols-6 bg-card border border-border">
|
||||
{/* Direct: Overview */}
|
||||
<TabsTrigger value="overview" className={triggerActiveClass}>
|
||||
<LayoutDashboard className="mr-2 h-4 w-4" />
|
||||
{t("navigation.overview")}
|
||||
</TabsTrigger>
|
||||
|
||||
{/* Direct: VMs & LXCs — first-class because Proxmox IS
|
||||
a hypervisor; workloads belong at top level. */}
|
||||
<TabsTrigger value="vms" className={triggerActiveClass}>
|
||||
<Boxes className="mr-2 h-4 w-4" />
|
||||
{t("navigation.virtualMachines")}
|
||||
</TabsTrigger>
|
||||
|
||||
{/* Dropdown: Node (Storage / Network / Hardware) */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className={dropdownBtnClass(isNodeActive)}>
|
||||
<NodeTriggerIcon className="mr-2 h-4 w-4" />
|
||||
{NodeTriggerLabel}
|
||||
<ChevronDown className="ml-1.5 h-3 w-3 opacity-70" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="center" className="min-w-[180px]">
|
||||
{NODE_ITEMS.map(({ value, label, Icon }) => (
|
||||
<DropdownMenuItem
|
||||
key={value}
|
||||
onClick={() => setActiveTab(value)}
|
||||
className={activeTab === value ? "bg-blue-500/10 text-blue-500" : ""}
|
||||
>
|
||||
<Icon className="mr-2 h-4 w-4" />
|
||||
{label}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Direct: Backup (today: Host Backup only). When VM/LXC
|
||||
backup ships this becomes a dropdown. */}
|
||||
<TabsTrigger value="backup" className={triggerActiveClass}>
|
||||
<DatabaseBackup className="mr-2 h-4 w-4" />
|
||||
{t("navigation.backup")}
|
||||
</TabsTrigger>
|
||||
|
||||
{/* Direct: Terminal */}
|
||||
<TabsTrigger value="terminal" className={triggerActiveClass}>
|
||||
<Terminal className="mr-2 h-4 w-4" />
|
||||
{t("navigation.terminal")}
|
||||
</TabsTrigger>
|
||||
|
||||
{/* Dropdown: Admin (System Logs / Security / Settings / About) */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className={dropdownBtnClass(isAdminActive)}>
|
||||
<AdminTriggerIcon className="mr-2 h-4 w-4" />
|
||||
{AdminTriggerLabel}
|
||||
<ChevronDown className="ml-1.5 h-3 w-3 opacity-70" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="center" className="min-w-[180px]">
|
||||
{ADMIN_ITEMS.map(({ value, label, Icon }) => (
|
||||
<DropdownMenuItem
|
||||
key={value}
|
||||
onClick={() => setActiveTab(value)}
|
||||
className={activeTab === value ? "bg-blue-500/10 text-blue-500" : ""}
|
||||
>
|
||||
<Icon className="mr-2 h-4 w-4" />
|
||||
{label}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<TabsList className="hidden lg:grid w-full grid-cols-7 bg-card border border-border">
|
||||
{tabOrder.map(renderTop)}
|
||||
</TabsList>
|
||||
)
|
||||
})()}
|
||||
@@ -724,56 +734,52 @@ export function ProxmoxDashboard() {
|
||||
? "bg-blue-500/10 text-blue-500 border-l-4 border-blue-500 rounded-l-none"
|
||||
: ""
|
||||
}`
|
||||
// Mobile sheet is a flat list (no section headers).
|
||||
// The desktop layout uses dropdowns to express the
|
||||
// Node/Admin grouping; here we just enumerate items
|
||||
// in the same visual order.
|
||||
// Mobile sheet honours the same user-defined
|
||||
// top-level order as the desktop TabsList. Grouped
|
||||
// slots (Node/Admin) expand their child items
|
||||
// inline right after their position — the group
|
||||
// still moves as a unit, but children stay grouped.
|
||||
const btn = (
|
||||
value: string,
|
||||
Icon: React.ComponentType<{ className?: string }>,
|
||||
label: string,
|
||||
) => (
|
||||
<Button
|
||||
key={value}
|
||||
variant="ghost"
|
||||
onClick={() => select(value)}
|
||||
className={itemClass(activeTab === value)}
|
||||
>
|
||||
<Icon className="h-5 w-5" />
|
||||
<span>{label}</span>
|
||||
</Button>
|
||||
)
|
||||
return (
|
||||
<div className="flex flex-col gap-1 mt-4">
|
||||
<Button variant="ghost" onClick={() => select("overview")} className={itemClass(activeTab === "overview")}>
|
||||
<LayoutDashboard className="h-5 w-5" />
|
||||
<span>{t("navigation.overview")}</span>
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => select("vms")} className={itemClass(activeTab === "vms")}>
|
||||
<Boxes className="h-5 w-5" />
|
||||
<span>{t("navigation.virtualMachines")}</span>
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => select("storage")} className={itemClass(activeTab === "storage")}>
|
||||
<HardDrive className="h-5 w-5" />
|
||||
<span>{t("navigation.storage")}</span>
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => select("network")} className={itemClass(activeTab === "network")}>
|
||||
<NetworkIcon className="h-5 w-5" />
|
||||
<span>{t("navigation.network")}</span>
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => select("hardware")} className={itemClass(activeTab === "hardware")}>
|
||||
<Cpu className="h-5 w-5" />
|
||||
<span>{t("navigation.hardware")}</span>
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => select("backup")} className={itemClass(activeTab === "backup")}>
|
||||
<DatabaseBackup className="h-5 w-5" />
|
||||
<span>{t("navigation.backup")}</span>
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => select("terminal")} className={itemClass(activeTab === "terminal")}>
|
||||
<Terminal className="h-5 w-5" />
|
||||
<span>{t("navigation.terminal")}</span>
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => select("logs")} className={itemClass(activeTab === "logs")}>
|
||||
<ScrollText className="h-5 w-5" />
|
||||
<span>{t("navigation.systemLogs")}</span>
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => select("security")} className={itemClass(activeTab === "security")}>
|
||||
<ShieldCheck className="h-5 w-5" />
|
||||
<span>{t("navigation.security")}</span>
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => select("settings")} className={itemClass(activeTab === "settings")}>
|
||||
<SettingsIcon className="h-5 w-5" />
|
||||
<span>{t("navigation.settings")}</span>
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => select("about")} className={itemClass(activeTab === "about")}>
|
||||
<Info className="h-5 w-5" />
|
||||
<span>{t("navigation.about")}</span>
|
||||
</Button>
|
||||
{tabOrder.map((id): React.ReactNode => {
|
||||
switch (id) {
|
||||
case "overview": return btn("overview", LayoutDashboard, t("navigation.overview"))
|
||||
case "apps": return btn("apps", Grid3x3, t("navigation.apps"))
|
||||
case "vms": return btn("vms", Boxes, t("navigation.virtualMachines"))
|
||||
case "backup": return btn("backup", DatabaseBackup, t("navigation.backup"))
|
||||
case "terminal": return btn("terminal", Terminal, t("navigation.terminal"))
|
||||
case "node": return (
|
||||
<React.Fragment key="node">
|
||||
{btn("storage", HardDrive, t("navigation.storage"))}
|
||||
{btn("network", NetworkIcon, t("navigation.network"))}
|
||||
{btn("hardware", Cpu, t("navigation.hardware"))}
|
||||
</React.Fragment>
|
||||
)
|
||||
case "admin": return (
|
||||
<React.Fragment key="admin">
|
||||
{btn("logs", ScrollText, t("navigation.systemLogs"))}
|
||||
{btn("security", ShieldCheck, t("navigation.security"))}
|
||||
{btn("settings", SettingsIcon, t("navigation.settings"))}
|
||||
{btn("about", Info, t("navigation.about"))}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
@@ -784,7 +790,14 @@ export function ProxmoxDashboard() {
|
||||
</div>
|
||||
|
||||
<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">
|
||||
{/* No `space-y-*` here: only one TabsContent is visible at a
|
||||
time, but Overview stays force-mounted (hidden) as the
|
||||
first child, so every OTHER active tab used to inherit an
|
||||
extra top margin from the space-y utility — pushing the
|
||||
page content further from the nav than on Overview.
|
||||
Vertical spacing INSIDE each tab lives on its own
|
||||
TabsContent's `space-y-*`. */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-0">
|
||||
{/* forceMount so SystemOverview mounts at dashboard load and
|
||||
never gets torn down when the user visits another tab.
|
||||
Without this, every return to Overview re-fires ~7 fetches
|
||||
@@ -797,6 +810,10 @@ export function ProxmoxDashboard() {
|
||||
<SystemOverview key={`overview-${componentKey}`} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="apps" className="space-y-4 md:space-y-6 mt-0">
|
||||
<AppsDashboard key={`apps-${componentKey}`} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="storage" className="space-y-4 md:space-y-6 mt-0">
|
||||
<StorageOverview key={`storage-${componentKey}`} />
|
||||
</TabsContent>
|
||||
|
||||
@@ -18,6 +18,41 @@ interface ReleaseNote {
|
||||
}
|
||||
|
||||
export const CHANGELOG: Record<string, ReleaseNote> = {
|
||||
"1.2.5": {
|
||||
date: "September 1, 2026",
|
||||
changes: {
|
||||
added: [
|
||||
"New top-level Apps dashboard — a single launcher for every Web Link across the node. LXC-registered apps and user-defined Custom Web Links share the same grid with category badges, search, sort by name/id/category, and one-click deep-links back to the guest modal (LXC cards land on App, VM cards on Status).",
|
||||
"Application detection catalog with over 380 tracked workloads, generated live from the community-scripts source across seven detector methods (file, binary, dpkg, apk, Python, Docker exec, Docker label). Primary and fallback detectors cover both new and historical LXC layouts.",
|
||||
"App tab inside every VM & LXC modal — register the apps installed in a container, capture their weblinks, and get notifications when a new upstream version ships. Cold-start Docker detection now correctly promotes Docker as the parent workload before the daemon finishes booting.",
|
||||
"Reworked LXC Updates tab — apply OS packages and registered-app updates from a single button, schedule a recurring auto-update job, and cover Docker end to end (Engine + per-image on the same 24-hour rolling cycle as OS packages, with a 'Check now' action for on-demand digest comparison).",
|
||||
"The Monitor now speaks 8 languages: English, Spanish, German, French, Italian, Portuguese, Swedish and Slovak. Thanks to @vaso73 for building the i18n scaffolding.",
|
||||
"Navigation order — a new Settings card lets each user reorder the seven top-level tabs by drag and drop. Grouped slots (Node, Admin) move as a single unit; the first slot in the saved order becomes the tab the Monitor opens on. Mouse and touch supported.",
|
||||
"Custom Web Links — persistent sidecar at /etc/proxmenux/custom_links.json for URLs that don't live inside a registered LXC app. Editor takes name, URL, optional logo, category and optional binding to a specific VM or LXC.",
|
||||
"NVIDIA — multi-GPU passthrough by exact BDF ownership so a multi-GPU host can pass one card to a VM and keep the other operational on the host or in LXCs. Kernel + branch + GPU-aware version picker (#298).",
|
||||
"Pushover joins Telegram, Gotify, Discord, Email and Apprise as a native notification channel — user/API key, device and sound selectors, priority 0 for regular messages, optional priority 1 for CRITICAL events. Suggested by @benginx (#308).",
|
||||
"Host backup/restore continuity — ProxMenux configuration and independent backups survive a full Proxmox restore (#317, reported by @tropicaljoe).",
|
||||
"Hardware temperature sensor identity — storage temperatures now identify the physical drive (NVMe namespace, model, serial) instead of the generic hwmon label. HDD/SSD classification follows the block device rotational flag (#315, suggested by @Dark-Witcher).",
|
||||
"Post-install — precise rollback for every registered flow and Debian 13 readiness.",
|
||||
"First-time visitors on Android and iOS Safari now see an in-app install prompt for adding the Monitor to their home screen as a PWA.",
|
||||
],
|
||||
changed: [
|
||||
"Memory & Swap health check now signals real memory pressure — CRITICAL fires only when swap file is nearly full AND available RAM is genuinely tight (both editable in Settings → Health thresholds). The old swap-only signal was noisy on hosts where Linux proactively swaps out inactive pages.",
|
||||
"Faster page loads and smoother navigation across the dashboard. Overview opens instantly and the VMs & LXCs page never flashes 'Loading…' between guest modals again.",
|
||||
"Long backup jobs no longer time out. VM and LXC backups launched from the Monitor now run in the background until they naturally finish, so a 30-minute PBS backup completes the same as a 10-second local one.",
|
||||
"VMs running the QEMU Guest Agent now report real used / total disk figures on the dashboard, instead of the '0 GB' that PVE returns for guest-managed filesystems.",
|
||||
"App tab cache stays warm across every action. Successful add / edit / check / dismiss / delete operations write the returned sidecar directly into both backend and shared frontend caches; post-update scans revalidate in the background while the last valid content stays visible.",
|
||||
"Docker cards on the Apps dashboard resolve their update state per image, not per Docker Engine. The purple update arrow only lights up when that specific image has an upstream update.",
|
||||
"ZFS ARC sizing under memory pressure and OOM diagnostics reworked (credit: LeidenSpain).",
|
||||
],
|
||||
fixed: [
|
||||
"Fix #309 — Proxmox storage availability: false critical alerts for iSCSI storages with maxdisk=0.",
|
||||
"HID USB device class no longer reads as 'escondido' (past tense of 'to hide') in Spanish, German, French, Italian and Portuguese — the acronym is now preserved.",
|
||||
"The Memory & Swap health card is dismissable like every other category (RAM usage and Swap usage sub-checks carry the dismissable flag).",
|
||||
"Regenerated Proxmox VE Helper-Scripts updaters remain available after an app update (both historical wrappers and the current generated entrypoint are recognised).",
|
||||
],
|
||||
},
|
||||
},
|
||||
"1.2.4.1-beta": {
|
||||
date: "August 17, 2026",
|
||||
changes: {
|
||||
@@ -254,23 +289,28 @@ export const CHANGELOG: Record<string, ReleaseNote> = {
|
||||
const CURRENT_VERSION_FEATURES = [
|
||||
{
|
||||
icon: <Sparkles className="h-5 w-5" />,
|
||||
key: "releaseNotes.currentFeatures.appDetection",
|
||||
text: "Smarter app detection in the App tab: Docker is correctly promoted as the parent workload during cold start (Portainer/SearXNG no longer briefly show up as native apps), unregistered suggestions live in the startup cache, and 'Find applications' runs a fresh catalog-backed scan on demand.",
|
||||
key: "releaseNotes.currentFeatures.appsDashboard",
|
||||
text: "New top-level Apps dashboard — a single launcher for every Web Link across the node. LXC-registered apps and user-defined Custom Web Links share the same grid with category badges, search, and one-click deep-links back to the guest modal.",
|
||||
},
|
||||
{
|
||||
icon: <RefreshCw className="h-5 w-5" />,
|
||||
key: "releaseNotes.currentFeatures.dockerUpdates",
|
||||
text: "The Updates tab now covers Docker end-to-end: Docker Engine and per-image update tracking follow the same 24-hour rolling cycle as OS packages, with a 'Check now' action for on-demand digest comparison — no more waiting for the daily collector.",
|
||||
icon: <Cpu className="h-5 w-5" />,
|
||||
key: "releaseNotes.currentFeatures.lxcAppsUpdates",
|
||||
text: "App tab inside every LXC modal registers installed apps, captures weblinks and tracks upstream versions. Reworked Updates tab applies OS packages and app updates from a single button; Docker Engine and per-image tracking follow the same 24-hour cycle, with a 'Check now' action on demand.",
|
||||
},
|
||||
{
|
||||
icon: <Zap className="h-5 w-5" />,
|
||||
key: "releaseNotes.currentFeatures.appCatalog",
|
||||
text: "New application detection catalog with over 380 tracked workloads, built from the live community-scripts source with independent script evidence. Primary and fallback detectors (file, binary, dpkg, apk, Python, Docker exec, Docker label) cover both new and historical LXC layouts.",
|
||||
text: "New application detection catalog with over 380 tracked workloads, generated live from community-scripts across seven detector methods (file, binary, dpkg, apk, Python, Docker exec, Docker label). Primary and fallback detectors cover both new and historical LXC layouts.",
|
||||
},
|
||||
{
|
||||
icon: <Bell className="h-5 w-5" />,
|
||||
key: "releaseNotes.currentFeatures.pushover",
|
||||
text: "Pushover joins Telegram, Gotify, Discord, Email and Apprise as a native notification channel — user/API key, device and sound selectors, priority 0 for regular messages, optional priority 1 for CRITICAL events. Suggested by @benginx (#308).",
|
||||
icon: <Languages className="h-5 w-5" />,
|
||||
key: "releaseNotes.currentFeatures.multilingual",
|
||||
text: "The Monitor now speaks 8 languages: English, Spanish, German, French, Italian, Portuguese, Swedish and Slovak. Huge thanks to @vaso73 for building the i18n scaffolding that made this possible.",
|
||||
},
|
||||
{
|
||||
icon: <Server className="h-5 w-5" />,
|
||||
key: "releaseNotes.currentFeatures.nvidiaMultiGpu",
|
||||
text: "NVIDIA driver lifecycle moves to per-BDF ownership so a multi-GPU host can pass one card to a VM and keep the other operational on the host or in LXCs, plus a kernel + branch + GPU-aware version picker (#298).",
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
@@ -16,6 +16,7 @@ import { getNetworkUnit } from "../lib/format-network"
|
||||
import { fetchApi } from "../lib/api-config"
|
||||
import { SUPPORTED_LANGUAGES, useI18n } from "../lib/i18n/provider"
|
||||
import type { LanguageCode } from "../lib/i18n/languages"
|
||||
import { NavTabOrderCard } from "./nav-tab-order-card"
|
||||
|
||||
// GitHub Dark color palette for bash syntax highlighting
|
||||
const BASH_KEYWORDS = new Set([
|
||||
@@ -1052,6 +1053,9 @@ export function Settings() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Navigation Tab Order — user-orderable top-level tabs */}
|
||||
<NavTabOrderCard />
|
||||
|
||||
{/* Network Units Settings */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
||||
@@ -79,6 +79,12 @@ interface LxcAppPort {
|
||||
scheme?: "http" | "https"
|
||||
web_path?: string
|
||||
logo_url?: string | null
|
||||
// Free-text category shown in the Apps dashboard. Present on every
|
||||
// Web Link the user assigned one to; absent otherwise.
|
||||
category?: string
|
||||
// Overrides ip:port composition — used for apps served behind a
|
||||
// reverse-proxy domain (e.g. https://vault.example.com).
|
||||
custom_url?: string
|
||||
}
|
||||
interface LxcAppWatch {
|
||||
id: string
|
||||
@@ -208,6 +214,8 @@ interface VMData {
|
||||
}
|
||||
|
||||
function buildRegisteredAppUrl(vm: VMData, port?: LxcAppPort): string | null {
|
||||
const custom = (port?.custom_url || "").trim()
|
||||
if (custom) return custom
|
||||
const rawIp = (vm.ip || "").trim().split("/")[0]
|
||||
if (!rawIp || rawIp === "DHCP" || !port?.port) return null
|
||||
const host = rawIp.includes(":") && !rawIp.startsWith("[") ? `[${rawIp}]` : rawIp
|
||||
@@ -847,6 +855,8 @@ export function VirtualMachines() {
|
||||
const [updatesRefreshing, setUpdatesRefreshing] = useState(false)
|
||||
const [updatesResult, setUpdatesResult] = useState<{ pendingAfter: number; appliedCount: number } | null>(null)
|
||||
const [updatesBaselineCount, setUpdatesBaselineCount] = useState<number | null>(null)
|
||||
const selectedVMRef = useRef<VMData | null>(null)
|
||||
const updatesBaselineCountRef = useRef<number | null>(null)
|
||||
const [terminalOpen, setTerminalOpen] = useState(false)
|
||||
const [terminalVmid, setTerminalVmid] = useState<number | null>(null)
|
||||
const [terminalVmName, setTerminalVmName] = useState<string>("")
|
||||
@@ -1007,6 +1017,44 @@ export function VirtualMachines() {
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Deep-link from the Apps dashboard: when the user clicks the CT
|
||||
// ref inside a launcher card, that component dispatches
|
||||
// `openLxcAppModal` with the target vmid. We resolve it against the
|
||||
// current /api/vms cache and open the modal on the "App" tab so the
|
||||
// user lands exactly where the weblink was registered.
|
||||
useEffect(() => {
|
||||
const handler = (ev: Event) => {
|
||||
const detail = (ev as CustomEvent).detail || {}
|
||||
const targetVmid = Number(detail.vmid)
|
||||
if (!Number.isFinite(targetVmid)) return
|
||||
const vm = (vmData || []).find((v) => v.vmid === targetVmid)
|
||||
if (!vm) return
|
||||
handleVMClick(vm)
|
||||
// handleVMClick resets the inner tab to "status"; override to
|
||||
// "app" in the same render tick — React batches these and the
|
||||
// last setActiveModalTab wins.
|
||||
setActiveModalTab("app")
|
||||
}
|
||||
window.addEventListener("openLxcAppModal", handler as EventListener)
|
||||
return () => window.removeEventListener("openLxcAppModal", handler as EventListener)
|
||||
}, [vmData])
|
||||
|
||||
// Same deep-link but for QEMU guests. VMs don't have the App tab,
|
||||
// so we land on Status (which is what handleVMClick already
|
||||
// defaults to — no override needed).
|
||||
useEffect(() => {
|
||||
const handler = (ev: Event) => {
|
||||
const detail = (ev as CustomEvent).detail || {}
|
||||
const targetVmid = Number(detail.vmid)
|
||||
if (!Number.isFinite(targetVmid)) return
|
||||
const vm = (vmData || []).find((v) => v.vmid === targetVmid)
|
||||
if (!vm) return
|
||||
handleVMClick(vm)
|
||||
}
|
||||
window.addEventListener("openVmStatusModal", handler as EventListener)
|
||||
return () => window.removeEventListener("openVmStatusModal", handler as EventListener)
|
||||
}, [vmData])
|
||||
|
||||
// Keep the open modal's VM in sync with the /api/vms poll so CPU/RAM/I-O values
|
||||
// don't stay frozen at click-time. Single data source (/cluster/resources) shared
|
||||
// with the list — no source mismatch, no flicker.
|
||||
@@ -1048,39 +1096,50 @@ export function VirtualMachines() {
|
||||
}
|
||||
}, [vmData])
|
||||
|
||||
useEffect(() => {
|
||||
selectedVMRef.current = selectedVM
|
||||
}, [selectedVM])
|
||||
|
||||
useEffect(() => {
|
||||
updatesBaselineCountRef.current = updatesBaselineCount
|
||||
}, [updatesBaselineCount])
|
||||
|
||||
// Settle the Updates-tab "Comprobando resultado…" state as soon as
|
||||
// the /api/vms poll delivers a post-apply count that differs from
|
||||
// the baseline captured when the terminal closed. Also drops the
|
||||
// spinner after 15 s of no observed change (backend hook already
|
||||
// force-refreshed managed_installs, so a still-equal count at that
|
||||
// point means either everything was a no-op or the scan hasn't
|
||||
// finished — either way the user shouldn't keep staring at a
|
||||
// loader). Sets `updatesResult` for the transient banner: green if
|
||||
// count is now 0, amber if some packages remain.
|
||||
// the baseline captured when the terminal closed. Sets
|
||||
// `updatesResult` for the transient banner: green if count is now
|
||||
// 0, amber if some packages remain.
|
||||
useEffect(() => {
|
||||
if (!updatesRefreshing) return
|
||||
if (!selectedVM) return
|
||||
const currentCount = selectedVM.update_check?.count ?? 0
|
||||
// A change from baseline (or landing at 0) means the fresh
|
||||
// post-apply snapshot is in.
|
||||
if (updatesBaselineCount !== null && currentCount !== updatesBaselineCount) {
|
||||
const applied = Math.max(0, updatesBaselineCount - currentCount)
|
||||
setUpdatesResult({ pendingAfter: currentCount, appliedCount: applied })
|
||||
setUpdatesRefreshing(false)
|
||||
setUpdatesBaselineCount(null)
|
||||
return
|
||||
}
|
||||
// Safety timeout — never leave the spinner spinning forever.
|
||||
}, [selectedVM, updatesRefreshing, updatesBaselineCount])
|
||||
|
||||
// Safety timeout — never leave the spinner spinning forever. Armed
|
||||
// once when `updatesRefreshing` flips to true; a still-equal count
|
||||
// 15 s later means either everything was a no-op or the scan hasn't
|
||||
// caught up. Dependency stays scoped to `updatesRefreshing` so the
|
||||
// 2.5 s SWR poll on `selectedVM` cannot keep resetting the timer.
|
||||
useEffect(() => {
|
||||
if (!updatesRefreshing) return
|
||||
const safety = setTimeout(() => {
|
||||
const currentCount = selectedVMRef.current?.update_check?.count ?? 0
|
||||
const baseline = updatesBaselineCountRef.current
|
||||
setUpdatesResult({
|
||||
pendingAfter: currentCount,
|
||||
appliedCount: Math.max(0, (updatesBaselineCount ?? 0) - currentCount),
|
||||
appliedCount: Math.max(0, (baseline ?? 0) - currentCount),
|
||||
})
|
||||
setUpdatesRefreshing(false)
|
||||
setUpdatesBaselineCount(null)
|
||||
}, 15000)
|
||||
return () => clearTimeout(safety)
|
||||
}, [selectedVM, updatesRefreshing, updatesBaselineCount])
|
||||
}, [updatesRefreshing])
|
||||
|
||||
// Auto-dismiss the post-apply banner after 6 s so it doesn't
|
||||
// clutter the tab forever.
|
||||
@@ -4824,7 +4883,8 @@ const handleDownloadLogs = async (vmid: number, vmName: string) => {
|
||||
{!selectedVM.update_check?.managed_oci_app &&
|
||||
!selectedVM.update_check?.is_oci_lxc && (() => {
|
||||
const uc = selectedVM.update_check
|
||||
const hasOsUpdates = !!uc?.available
|
||||
const osUpdateStatusKnown = !!uc && !uc.error
|
||||
const hasOsUpdates = osUpdateStatusKnown && !!uc.available
|
||||
const dockerAppWatch = (selectedVM.app_watches || []).find((a) => a.helper_slug === "docker")
|
||||
const dockerRegistered = !!dockerAppWatch
|
||||
const dockerEngineInstalledVersion = selectedVM.docker_inventory?.engine_version
|
||||
@@ -5081,7 +5141,15 @@ const handleDownloadLogs = async (vmid: number, vmName: string) => {
|
||||
<> · {t("vmLxc.updates.familyLabel")} <code className="text-foreground/80">{uc.os_family}</code></>
|
||||
)}
|
||||
</div>
|
||||
{hasOsUpdates ? (() => {
|
||||
{!osUpdateStatusKnown ? (
|
||||
<div
|
||||
className="text-sm text-muted-foreground flex items-center gap-2"
|
||||
title={uc?.error || undefined}
|
||||
>
|
||||
<AlertTriangle className="h-4 w-4 text-amber-400 flex-shrink-0" />
|
||||
{t("vmLxc.updates.osStatusUnavailable")}
|
||||
</div>
|
||||
) : hasOsUpdates ? (() => {
|
||||
const stored = uc!.packages?.length || 0
|
||||
const total = uc!.count || 0
|
||||
const sec = uc!.security_count || 0
|
||||
@@ -5131,10 +5199,17 @@ const handleDownloadLogs = async (vmid: number, vmName: string) => {
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => openApplyTerminal(selectedVM.vmid, "os")}
|
||||
className={hasOsUpdates ? pendingBtnCls : upToDateBtnCls}
|
||||
className={hasOsUpdates
|
||||
? pendingBtnCls
|
||||
: osUpdateStatusKnown
|
||||
? upToDateBtnCls
|
||||
: neutralBtnCls}
|
||||
>
|
||||
{hasOsUpdates && <ArrowUpCircle className="h-4 w-4 mr-1.5" />}
|
||||
{hasOsUpdates ? t("vmLxc.updates.applyOsUpdate") : t("vmLxc.updates.osUpToDate")}
|
||||
{!hasOsUpdates && !osUpdateStatusKnown && <RefreshCw className="h-4 w-4 mr-1.5" />}
|
||||
{hasOsUpdates || !osUpdateStatusKnown
|
||||
? t("vmLxc.updates.applyOsUpdate")
|
||||
: t("vmLxc.updates.osUpToDate")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user