Enhance Servers component by adding a "No host server" option in the server selection dropdown, updating state management to handle monitoring settings based on selected host server, and introducing a new "Hardware Information" section for better organization of server details.

This commit is contained in:
headlessdev 2025-04-20 23:34:57 +02:00
parent 456f40dab2
commit fdbac4ebff

View File

@ -586,12 +586,19 @@ export default function Dashboard() {
<Label>Host Server</Label> <Label>Host Server</Label>
<Select <Select
value={hostServer?.toString()} value={hostServer?.toString()}
onValueChange={(value) => setHostServer(Number(value))} onValueChange={(value) => {
const newHostServer = Number(value);
setHostServer(newHostServer);
if (newHostServer !== 0) {
setMonitoring(false);
}
}}
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select a host server" /> <SelectValue placeholder="Select a host server" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="0">No host server</SelectItem>
{hostServers.map((server) => ( {hostServers.map((server) => (
<SelectItem key={server.id} value={server.id.toString()}> <SelectItem key={server.id} value={server.id.toString()}>
{server.name} {server.name}
@ -714,6 +721,10 @@ export default function Dashboard() {
<Separator /> <Separator />
</div> </div>
<div className="col-span-full mb-2">
<h4 className="text-sm font-semibold">Hardware Information</h4>
</div>
<div className="flex items-center gap-2 text-foreground/80"> <div className="flex items-center gap-2 text-foreground/80">
<Cpu className="h-4 w-4 text-muted-foreground" /> <Cpu className="h-4 w-4 text-muted-foreground" />
<span> <span>
@ -839,7 +850,7 @@ export default function Dashboard() {
<TabsTrigger value="general">General</TabsTrigger> <TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="hardware">Hardware</TabsTrigger> <TabsTrigger value="hardware">Hardware</TabsTrigger>
<TabsTrigger value="virtualization">Virtualization</TabsTrigger> <TabsTrigger value="virtualization">Virtualization</TabsTrigger>
<TabsTrigger value="monitoring">Monitoring</TabsTrigger> {(!editHostServer || editHostServer === 0) && <TabsTrigger value="monitoring">Monitoring</TabsTrigger>}
</TabsList> </TabsList>
<TabsContent value="general"> <TabsContent value="general">
<div className="space-y-4 pt-4"> <div className="space-y-4 pt-4">
@ -1028,12 +1039,19 @@ export default function Dashboard() {
<Label>Host Server</Label> <Label>Host Server</Label>
<Select <Select
value={editHostServer?.toString()} value={editHostServer?.toString()}
onValueChange={(value) => setEditHostServer(Number(value))} onValueChange={(value) => {
const newHostServer = Number(value);
setEditHostServer(newHostServer);
if (newHostServer !== 0) {
setEditMonitoring(false);
}
}}
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select a host server" /> <SelectValue placeholder="Select a host server" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="0">No host server</SelectItem>
{hostServers {hostServers
.filter((server) => server.id !== editId) .filter((server) => server.id !== editId)
.map((server) => ( .map((server) => (
@ -1377,23 +1395,25 @@ export default function Dashboard() {
<Label>Host Server</Label> <Label>Host Server</Label>
<Select <Select
value={editHostServer?.toString()} value={editHostServer?.toString()}
onValueChange={(value) => onValueChange={(value) => {
setEditHostServer(Number(value)) const newHostServer = Number(value);
} setEditHostServer(newHostServer);
if (newHostServer !== 0) {
setEditMonitoring(false);
}
}}
> >
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Select a host server" /> <SelectValue placeholder="Select a host server" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="0">No host server</SelectItem>
{hostServers {hostServers
.filter( .filter(
(server) => server.id !== editId, (server) => server.id !== editId,
) )
.map((server) => ( .map((server) => (
<SelectItem <SelectItem key={server.id} value={server.id.toString()}>
key={server.id}
value={server.id.toString()}
>
{server.name} {server.name}
</SelectItem> </SelectItem>
))} ))}
@ -1434,6 +1454,10 @@ export default function Dashboard() {
</div> </div>
</div> </div>
<div className="col-span-full mb-2">
<h4 className="text-sm font-semibold">Hardware Information</h4>
</div>
<div className="flex items-center gap-2 text-foreground/80"> <div className="flex items-center gap-2 text-foreground/80">
<Cpu className="h-4 w-4 text-muted-foreground" /> <Cpu className="h-4 w-4 text-muted-foreground" />
<span> <span>