feat(proxmox): implement notes system, resource search, and administration panel (phases 12-13)
- NotesPage: load/display/edit cluster notes with draft/save/cancel flow - SearchPage: cross-cluster resource search grouped by type with icon decorators - AdminPage: tabbed node admin (status, apt updates, repositories, syslog, tasks) with cluster/node selector; imports ClusterInfo from domain.ts
This commit is contained in:
Shaun Arman
parent
87e21e243e
commit
84ddf75afe
355
src/pages/Proxmox/AdminPage.tsx
Normal file
355
src/pages/Proxmox/AdminPage.tsx
Normal file
@ -0,0 +1,355 @@
|
|||||||
|
import React, { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/index';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
|
||||||
|
import { Button } from '@/components/ui/index';
|
||||||
|
import { Input } from '@/components/ui/index';
|
||||||
|
import { RefreshCw, Power, RotateCcw } from 'lucide-react';
|
||||||
|
import {
|
||||||
|
listProxmoxClusters,
|
||||||
|
getNodeStatus,
|
||||||
|
listAptUpdates,
|
||||||
|
listAptRepositories,
|
||||||
|
getSyslog,
|
||||||
|
listClusterTasks,
|
||||||
|
} from '@/lib/proxmoxClient';
|
||||||
|
import type {
|
||||||
|
NodeStatus,
|
||||||
|
AptPackage,
|
||||||
|
AptRepository,
|
||||||
|
SyslogEntry,
|
||||||
|
ClusterTask,
|
||||||
|
} from '@/lib/proxmoxClient';
|
||||||
|
import type { ClusterInfo } from '@/lib/domain';
|
||||||
|
|
||||||
|
export function ProxmoxAdminPage() {
|
||||||
|
const [clusters, setClusters] = useState<ClusterInfo[]>([]);
|
||||||
|
const [clusterId, setClusterId] = useState('');
|
||||||
|
const [nodeId, setNodeId] = useState('localhost');
|
||||||
|
const [nodeInputValue, setNodeInputValue] = useState('localhost');
|
||||||
|
const [nodeStatus, setNodeStatus] = useState<NodeStatus | null>(null);
|
||||||
|
const [aptUpdates, setAptUpdates] = useState<AptPackage[]>([]);
|
||||||
|
const [aptRepos, setAptRepos] = useState<AptRepository[]>([]);
|
||||||
|
const [syslog, setSyslog] = useState<SyslogEntry[]>([]);
|
||||||
|
const [tasks, setTasks] = useState<ClusterTask[]>([]);
|
||||||
|
const [activeTab, setActiveTab] = useState('status');
|
||||||
|
const [tabError, setTabError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
listProxmoxClusters()
|
||||||
|
.then((cls) => {
|
||||||
|
setClusters(cls);
|
||||||
|
if (cls.length > 0) setClusterId(cls[0].id);
|
||||||
|
})
|
||||||
|
.catch((err: unknown) => console.error('Failed to load clusters:', err));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadTabData = useCallback(
|
||||||
|
async (tab: string, cId: string, nId: string) => {
|
||||||
|
if (!cId) return;
|
||||||
|
setTabError(null);
|
||||||
|
try {
|
||||||
|
switch (tab) {
|
||||||
|
case 'status':
|
||||||
|
setNodeStatus(await getNodeStatus(cId, nId));
|
||||||
|
break;
|
||||||
|
case 'updates':
|
||||||
|
setAptUpdates(await listAptUpdates(cId, nId));
|
||||||
|
break;
|
||||||
|
case 'repositories':
|
||||||
|
setAptRepos(await listAptRepositories(cId, nId));
|
||||||
|
break;
|
||||||
|
case 'syslog':
|
||||||
|
setSyslog(await getSyslog(cId, nId));
|
||||||
|
break;
|
||||||
|
case 'tasks':
|
||||||
|
setTasks(await listClusterTasks(cId));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setTabError(String(e));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void loadTabData(activeTab, clusterId, nodeId);
|
||||||
|
}, [activeTab, clusterId, nodeId, loadTabData]);
|
||||||
|
|
||||||
|
const applyNodeId = () => {
|
||||||
|
setNodeId(nodeInputValue.trim() || 'localhost');
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatBytes = (bytes: number) =>
|
||||||
|
bytes >= 1073741824
|
||||||
|
? `${(bytes / 1073741824).toFixed(1)} GB`
|
||||||
|
: `${Math.round(bytes / 1048576)} MB`;
|
||||||
|
|
||||||
|
const formatUptime = (seconds: number) => {
|
||||||
|
const d = Math.floor(seconds / 86400);
|
||||||
|
const h = Math.floor((seconds % 86400) / 3600);
|
||||||
|
const m = Math.floor((seconds % 3600) / 60);
|
||||||
|
return d > 0 ? `${d}d ${h}h ${m}m` : `${h}h ${m}m`;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold">Administration</h1>
|
||||||
|
<p className="text-muted-foreground">Node management, updates, and system monitoring</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cluster / Node selector bar */}
|
||||||
|
<div className="flex items-center gap-3 flex-wrap">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-muted-foreground">Cluster:</span>
|
||||||
|
<select
|
||||||
|
className="text-sm border rounded px-2 py-1 bg-background"
|
||||||
|
value={clusterId}
|
||||||
|
onChange={(e) => setClusterId(e.target.value)}
|
||||||
|
>
|
||||||
|
{clusters.length === 0 && <option value="">No clusters</option>}
|
||||||
|
{clusters.map((c) => (
|
||||||
|
<option key={c.id} value={c.id}>
|
||||||
|
{c.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-muted-foreground">Node:</span>
|
||||||
|
<Input
|
||||||
|
className="w-36 h-8 text-sm"
|
||||||
|
value={nodeInputValue}
|
||||||
|
onChange={(e) => setNodeInputValue(e.target.value)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') applyNodeId();
|
||||||
|
}}
|
||||||
|
placeholder="localhost"
|
||||||
|
/>
|
||||||
|
<Button variant="outline" size="sm" onClick={applyNodeId}>
|
||||||
|
Apply
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => void loadTabData(activeTab, clusterId, nodeId)}
|
||||||
|
>
|
||||||
|
<RefreshCw className="mr-2 h-4 w-4" />
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{tabError && <div className="text-destructive text-sm">{tabError}</div>}
|
||||||
|
|
||||||
|
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="status">Node Status</TabsTrigger>
|
||||||
|
<TabsTrigger value="updates">Updates</TabsTrigger>
|
||||||
|
<TabsTrigger value="repositories">Repositories</TabsTrigger>
|
||||||
|
<TabsTrigger value="syslog">System Log</TabsTrigger>
|
||||||
|
<TabsTrigger value="tasks">Tasks</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* ── Node Status ─────────────────────────────────────────────────── */}
|
||||||
|
<TabsContent value="status">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between">
|
||||||
|
<CardTitle>Node Status</CardTitle>
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
<RotateCcw className="mr-2 h-4 w-4" />
|
||||||
|
Reboot
|
||||||
|
</Button>
|
||||||
|
<Button variant="destructive" size="sm">
|
||||||
|
<Power className="mr-2 h-4 w-4" />
|
||||||
|
Shutdown
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{nodeStatus ? (
|
||||||
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<span className="text-muted-foreground">CPU:</span>{' '}
|
||||||
|
{(nodeStatus.cpu * 100).toFixed(1)}%
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-muted-foreground">Memory:</span>{' '}
|
||||||
|
{formatBytes(nodeStatus.memory.used)} / {formatBytes(nodeStatus.memory.total)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-muted-foreground">Swap:</span>{' '}
|
||||||
|
{formatBytes(nodeStatus.swap.used)} / {formatBytes(nodeStatus.swap.total)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-muted-foreground">Disk:</span>{' '}
|
||||||
|
{formatBytes(nodeStatus.disk.used)} / {formatBytes(nodeStatus.disk.total)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-muted-foreground">Uptime:</span>{' '}
|
||||||
|
{formatUptime(nodeStatus.uptime)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-muted-foreground">Version:</span>{' '}
|
||||||
|
{nodeStatus.version}
|
||||||
|
</div>
|
||||||
|
{nodeStatus.loadAvg.length > 0 && (
|
||||||
|
<div className="col-span-2">
|
||||||
|
<span className="text-muted-foreground">Load Avg:</span>{' '}
|
||||||
|
{nodeStatus.loadAvg.map((v) => v.toFixed(2)).join(' / ')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-muted-foreground text-sm">Loading node status...</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* ── APT Updates ─────────────────────────────────────────────────── */}
|
||||||
|
<TabsContent value="updates">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Available Updates ({aptUpdates.length})</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{aptUpdates.length === 0 ? (
|
||||||
|
<div className="text-muted-foreground text-sm">No updates available</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-1">
|
||||||
|
{aptUpdates.map((pkg, i) => (
|
||||||
|
<div
|
||||||
|
key={`${pkg.package}-${i}`}
|
||||||
|
className="flex items-center justify-between p-2 border rounded text-sm"
|
||||||
|
>
|
||||||
|
<span className="font-mono">{pkg.package}</span>
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{pkg.version}
|
||||||
|
{pkg.newVersion ? ` → ${pkg.newVersion}` : ''}
|
||||||
|
</span>
|
||||||
|
{pkg.description && (
|
||||||
|
<span className="text-xs text-muted-foreground truncate max-w-xs ml-2">
|
||||||
|
{pkg.description}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* ── APT Repositories ────────────────────────────────────────────── */}
|
||||||
|
<TabsContent value="repositories">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>APT Repositories</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{aptRepos.length === 0 ? (
|
||||||
|
<div className="text-muted-foreground text-sm">No repositories found</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{aptRepos.map((repo, i) => (
|
||||||
|
<div key={i} className="p-3 border rounded text-sm">
|
||||||
|
<div className="font-mono text-xs">
|
||||||
|
{repo.types.join(' ')} {repo.uris.join(' ')} {repo.suites.join(' ')}{' '}
|
||||||
|
{repo.components.join(' ')}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 mt-1">
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
repo.enabled
|
||||||
|
? 'text-xs text-green-600'
|
||||||
|
: 'text-xs text-muted-foreground'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{repo.enabled ? 'Enabled' : 'Disabled'}
|
||||||
|
</span>
|
||||||
|
{repo.comment && (
|
||||||
|
<span className="text-xs text-muted-foreground">{repo.comment}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* ── Syslog ──────────────────────────────────────────────────────── */}
|
||||||
|
<TabsContent value="syslog">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between">
|
||||||
|
<CardTitle>System Log</CardTitle>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => void loadTabData('syslog', clusterId, nodeId)}
|
||||||
|
>
|
||||||
|
<RefreshCw className="mr-2 h-4 w-4" />
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="font-mono text-xs space-y-0.5 max-h-96 overflow-y-auto">
|
||||||
|
{syslog.length === 0 ? (
|
||||||
|
<div className="text-muted-foreground">No log entries</div>
|
||||||
|
) : (
|
||||||
|
syslog.map((entry) => (
|
||||||
|
<div key={entry.n} className="text-muted-foreground">
|
||||||
|
{entry.t} {entry.msg}
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* ── Tasks ───────────────────────────────────────────────────────── */}
|
||||||
|
<TabsContent value="tasks">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Recent Tasks</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{tasks.length === 0 ? (
|
||||||
|
<div className="text-muted-foreground text-sm">No tasks found</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-1">
|
||||||
|
{tasks.map((t) => (
|
||||||
|
<div
|
||||||
|
key={t.upid}
|
||||||
|
className="flex items-center gap-2 p-2 border rounded text-sm"
|
||||||
|
>
|
||||||
|
<span className="font-mono text-xs text-muted-foreground truncate max-w-xs">
|
||||||
|
{t.upid}
|
||||||
|
</span>
|
||||||
|
<span>{t.type}</span>
|
||||||
|
<span className="text-muted-foreground">{t.node}</span>
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
t.exitstatus === 'OK' ? 'text-green-600' : 'text-destructive'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{t.exitstatus ?? 'running'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
105
src/pages/Proxmox/NotesPage.tsx
Normal file
105
src/pages/Proxmox/NotesPage.tsx
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/index';
|
||||||
|
import { Button } from '@/components/ui/index';
|
||||||
|
import { Textarea } from '@/components/ui/index';
|
||||||
|
import { Edit, Save, X } from 'lucide-react';
|
||||||
|
import { getClusterNotes, updateClusterNotes, listProxmoxClusters } from '@/lib/proxmoxClient';
|
||||||
|
|
||||||
|
export function ProxmoxNotesPage() {
|
||||||
|
const [notes, setNotes] = useState('');
|
||||||
|
const [editMode, setEditMode] = useState(false);
|
||||||
|
const [draft, setDraft] = useState('');
|
||||||
|
const [clusterId, setClusterId] = useState('');
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const init = async () => {
|
||||||
|
try {
|
||||||
|
const clusters = await listProxmoxClusters();
|
||||||
|
if (clusters.length > 0) {
|
||||||
|
setClusterId(clusters[0].id);
|
||||||
|
const n = await getClusterNotes(clusters[0].id);
|
||||||
|
setNotes(n);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setError(String(e));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
void init();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleEdit = () => {
|
||||||
|
setDraft(notes);
|
||||||
|
setEditMode(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => setEditMode(false);
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
await updateClusterNotes(clusterId, draft);
|
||||||
|
setNotes(draft);
|
||||||
|
setEditMode(false);
|
||||||
|
} catch (e) {
|
||||||
|
setError(String(e));
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold">Notes</h1>
|
||||||
|
<p className="text-muted-foreground">Cluster notes and documentation</p>
|
||||||
|
</div>
|
||||||
|
{!editMode ? (
|
||||||
|
<Button variant="outline" onClick={handleEdit}>
|
||||||
|
<Edit className="mr-2 h-4 w-4" />
|
||||||
|
Edit
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<Button variant="outline" onClick={handleCancel}>
|
||||||
|
<X className="mr-2 h-4 w-4" />
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => void handleSave()} disabled={saving}>
|
||||||
|
<Save className="mr-2 h-4 w-4" />
|
||||||
|
{saving ? 'Saving...' : 'Save'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && <div className="text-destructive text-sm">{error}</div>}
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Cluster Notes</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{!editMode ? (
|
||||||
|
<pre className="whitespace-pre-wrap text-sm font-mono min-h-[200px]">
|
||||||
|
{notes || (
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
No notes yet. Click Edit to add notes.
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</pre>
|
||||||
|
) : (
|
||||||
|
<Textarea
|
||||||
|
value={draft}
|
||||||
|
onChange={(e) => setDraft(e.target.value)}
|
||||||
|
className="min-h-[300px] font-mono text-sm"
|
||||||
|
placeholder="Enter cluster notes here..."
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
127
src/pages/Proxmox/SearchPage.tsx
Normal file
127
src/pages/Proxmox/SearchPage.tsx
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Card, CardContent } from '@/components/ui/index';
|
||||||
|
import { Button } from '@/components/ui/index';
|
||||||
|
import { Input } from '@/components/ui/index';
|
||||||
|
import { Badge } from '@/components/ui/index';
|
||||||
|
import { Search, Server, HardDrive, Cpu, Database } from 'lucide-react';
|
||||||
|
import { searchResources, listProxmoxClusters } from '@/lib/proxmoxClient';
|
||||||
|
import type { SearchResult } from '@/lib/proxmoxClient';
|
||||||
|
|
||||||
|
const TYPE_ICONS: Record<string, React.ElementType> = {
|
||||||
|
vm: Cpu,
|
||||||
|
container: HardDrive,
|
||||||
|
node: Server,
|
||||||
|
storage: Database,
|
||||||
|
pool: Server,
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ProxmoxSearchPage() {
|
||||||
|
const [query, setQuery] = useState('');
|
||||||
|
const [results, setResults] = useState<SearchResult[]>([]);
|
||||||
|
const [searching, setSearching] = useState(false);
|
||||||
|
const [searched, setSearched] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const handleSearch = async () => {
|
||||||
|
if (!query.trim()) return;
|
||||||
|
setSearching(true);
|
||||||
|
setError(null);
|
||||||
|
setSearched(false);
|
||||||
|
try {
|
||||||
|
const clusters = await listProxmoxClusters();
|
||||||
|
const allResults: SearchResult[] = [];
|
||||||
|
await Promise.all(
|
||||||
|
clusters.map(async (c) => {
|
||||||
|
try {
|
||||||
|
const r = await searchResources(c.id, query);
|
||||||
|
allResults.push(...r);
|
||||||
|
} catch {
|
||||||
|
// skip clusters that fail individually
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
setResults(allResults);
|
||||||
|
setSearched(true);
|
||||||
|
} catch (e) {
|
||||||
|
setError(String(e));
|
||||||
|
} finally {
|
||||||
|
setSearching(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Group results by type
|
||||||
|
const grouped = results.reduce<Record<string, SearchResult[]>>((acc, r) => {
|
||||||
|
const bucket = acc[r.type] ?? [];
|
||||||
|
bucket.push(r);
|
||||||
|
acc[r.type] = bucket;
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold">Search</h1>
|
||||||
|
<p className="text-muted-foreground">Search across all Proxmox resources</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<Input
|
||||||
|
placeholder="Search VMs, containers, nodes, storage..."
|
||||||
|
value={query}
|
||||||
|
onChange={(e) => setQuery(e.target.value)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') void handleSearch();
|
||||||
|
}}
|
||||||
|
className="max-w-lg"
|
||||||
|
/>
|
||||||
|
<Button onClick={() => void handleSearch()} disabled={searching}>
|
||||||
|
<Search className="mr-2 h-4 w-4" />
|
||||||
|
{searching ? 'Searching...' : 'Search'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && <div className="text-destructive text-sm">{error}</div>}
|
||||||
|
|
||||||
|
{Object.entries(grouped).map(([type, items]) => {
|
||||||
|
const Icon = TYPE_ICONS[type] ?? Server;
|
||||||
|
return (
|
||||||
|
<Card key={type}>
|
||||||
|
<CardContent className="pt-4">
|
||||||
|
<div className="flex items-center gap-2 text-sm font-semibold capitalize mb-2">
|
||||||
|
<Icon className="h-4 w-4" />
|
||||||
|
{type}s ({items.length})
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
{items.map((r) => (
|
||||||
|
<div
|
||||||
|
key={`${r.type}-${r.id}`}
|
||||||
|
className="flex items-center gap-2 p-2 rounded hover:bg-accent"
|
||||||
|
>
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
{r.type}
|
||||||
|
</Badge>
|
||||||
|
<span className="text-sm font-medium">{r.name}</span>
|
||||||
|
{r.node && (
|
||||||
|
<span className="text-xs text-muted-foreground">on {r.node}</span>
|
||||||
|
)}
|
||||||
|
{r.description && (
|
||||||
|
<span className="text-xs text-muted-foreground truncate max-w-xs">
|
||||||
|
— {r.description}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{searched && results.length === 0 && (
|
||||||
|
<div className="text-muted-foreground text-sm">
|
||||||
|
No results found for “{query}”
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user