250 lines
16 KiB
JavaScript
250 lines
16 KiB
JavaScript
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
import { appClient } from "@/api/appClient";
|
|
import PageHeader from "@/components/shared/PageHeader";
|
|
import EmptyState from "@/components/shared/EmptyState";
|
|
import StatusBadge from "@/components/shared/StatusBadge";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
|
|
const splitMultiValue = (input) =>
|
|
input
|
|
.split(/[\n,]/)
|
|
.map((item) => item.trim())
|
|
.filter(Boolean);
|
|
|
|
export default function NetworkIpam() {
|
|
const { toast } = useToast();
|
|
const [loading, setLoading] = useState(true);
|
|
const [ipData, setIpData] = useState([]);
|
|
const [assignments, setAssignments] = useState([]);
|
|
const [vms, setVms] = useState([]);
|
|
const [tenants, setTenants] = useState([]);
|
|
const [utilization, setUtilization] = useState({ subnets: [], assignment_summary: { total: 0, ipv4: 0, ipv6: 0 } });
|
|
const [quotas, setQuotas] = useState([]);
|
|
const [ranges, setRanges] = useState([]);
|
|
const [policies, setPolicies] = useState([]);
|
|
|
|
const [importForm, setImportForm] = useState({ addresses: "", cidr_blocks: "", scope: "PUBLIC" });
|
|
const [assignForm, setAssignForm] = useState({ vm_id: "", address: "", scope: "PUBLIC", version: "IPV4", assignment_type: "ADDITIONAL" });
|
|
const [quotaForm, setQuotaForm] = useState({ tenant_id: "", ipv4_limit: "", ipv6_limit: "" });
|
|
const [rangeForm, setRangeForm] = useState({ name: "", cidr: "", scope: "PUBLIC", tenant_id: "" });
|
|
const [policyForm, setPolicyForm] = useState({ name: "", tenant_id: "", allocation_strategy: "BEST_FIT", priority: "100" });
|
|
|
|
const activeAssignments = useMemo(() => assignments.filter((x) => x.is_active), [assignments]);
|
|
|
|
const loadData = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [ips, asn, vmList, tenantList, dash, quotaList, rangeList, policyList] = await Promise.all([
|
|
appClient.network.listIpAddresses({ limit: 300 }),
|
|
appClient.network.listIpAssignments({ active_only: true }),
|
|
appClient.entities.VirtualMachine.list("-created_at", 200),
|
|
appClient.entities.Tenant.list("-created_at", 200),
|
|
appClient.network.subnetUtilization(),
|
|
appClient.network.listTenantQuotas(),
|
|
appClient.network.listReservedRanges(),
|
|
appClient.network.listPolicies()
|
|
]);
|
|
setIpData(ips?.data ?? []);
|
|
setAssignments(asn?.data ?? []);
|
|
setVms(vmList ?? []);
|
|
setTenants(tenantList ?? []);
|
|
setUtilization(dash ?? { subnets: [], assignment_summary: { total: 0, ipv4: 0, ipv6: 0 } });
|
|
setQuotas(quotaList?.data ?? []);
|
|
setRanges(rangeList?.data ?? []);
|
|
setPolicies(policyList?.data ?? []);
|
|
} catch (error) {
|
|
toast({ title: "Load Failed", description: error?.message ?? "Could not load network data", variant: "destructive" });
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [toast]);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [loadData]);
|
|
|
|
const runAction = async (fn, success) => {
|
|
try {
|
|
await fn();
|
|
toast({ title: success });
|
|
await loadData();
|
|
} catch (error) {
|
|
toast({ title: "Action Failed", description: error?.message ?? "Request failed", variant: "destructive" });
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <div className="flex items-center justify-center h-64"><div className="w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin" /></div>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader title="Network & IPAM" description="Phase 4 Step 2: utilization dashboard + quota/reserved/best-fit policy controls" />
|
|
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div className="surface-card p-4"><p className="text-xs text-muted-foreground">Assigned</p><p className="text-2xl">{utilization.assignment_summary?.total ?? 0}</p></div>
|
|
<div className="surface-card p-4"><p className="text-xs text-muted-foreground">IPv4</p><p className="text-2xl">{utilization.assignment_summary?.ipv4 ?? 0}</p></div>
|
|
<div className="surface-card p-4"><p className="text-xs text-muted-foreground">IPv6</p><p className="text-2xl">{utilization.assignment_summary?.ipv6 ?? 0}</p></div>
|
|
<div className="surface-card p-4"><p className="text-xs text-muted-foreground">Subnets</p><p className="text-2xl">{utilization.subnets?.length ?? 0}</p></div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
|
|
<div className="surface-card p-4 space-y-2">
|
|
<h2 className="text-sm font-semibold">Import IPs</h2>
|
|
<textarea className="w-full min-h-[70px] rounded-md border bg-muted px-3 py-2 text-sm" placeholder="Addresses (comma/new line)" value={importForm.addresses} onChange={(e) => setImportForm((p) => ({ ...p, addresses: e.target.value }))} />
|
|
<textarea className="w-full min-h-[70px] rounded-md border bg-muted px-3 py-2 text-sm" placeholder="CIDR blocks (comma/new line)" value={importForm.cidr_blocks} onChange={(e) => setImportForm((p) => ({ ...p, cidr_blocks: e.target.value }))} />
|
|
<Select value={importForm.scope} onValueChange={(value) => setImportForm((p) => ({ ...p, scope: value }))}>
|
|
<SelectTrigger className="bg-muted"><SelectValue /></SelectTrigger>
|
|
<SelectContent><SelectItem value="PUBLIC">PUBLIC</SelectItem><SelectItem value="PRIVATE">PRIVATE</SelectItem></SelectContent>
|
|
</Select>
|
|
<Button onClick={() => runAction(() => appClient.network.importIpAddresses({ scope: importForm.scope, addresses: splitMultiValue(importForm.addresses), cidr_blocks: splitMultiValue(importForm.cidr_blocks) }), "IP import completed")}>Import</Button>
|
|
</div>
|
|
|
|
<div className="surface-card p-4 space-y-2">
|
|
<h2 className="text-sm font-semibold">Assign IP (Best-Fit Policy)</h2>
|
|
<Select value={assignForm.vm_id} onValueChange={(value) => setAssignForm((p) => ({ ...p, vm_id: value }))}>
|
|
<SelectTrigger className="bg-muted"><SelectValue placeholder="Select VM" /></SelectTrigger>
|
|
<SelectContent>{vms.map((vm) => <SelectItem key={vm.id} value={vm.id}>{vm.name}</SelectItem>)}</SelectContent>
|
|
</Select>
|
|
<Input className="bg-muted" placeholder="Specific IP (optional)" value={assignForm.address} onChange={(e) => setAssignForm((p) => ({ ...p, address: e.target.value }))} />
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<Select value={assignForm.scope} onValueChange={(value) => setAssignForm((p) => ({ ...p, scope: value }))}>
|
|
<SelectTrigger className="bg-muted"><SelectValue /></SelectTrigger>
|
|
<SelectContent><SelectItem value="PUBLIC">PUBLIC</SelectItem><SelectItem value="PRIVATE">PRIVATE</SelectItem></SelectContent>
|
|
</Select>
|
|
<Select value={assignForm.version} onValueChange={(value) => setAssignForm((p) => ({ ...p, version: value }))}>
|
|
<SelectTrigger className="bg-muted"><SelectValue /></SelectTrigger>
|
|
<SelectContent><SelectItem value="IPV4">IPV4</SelectItem><SelectItem value="IPV6">IPV6</SelectItem></SelectContent>
|
|
</Select>
|
|
<Select value={assignForm.assignment_type} onValueChange={(value) => setAssignForm((p) => ({ ...p, assignment_type: value }))}>
|
|
<SelectTrigger className="bg-muted"><SelectValue /></SelectTrigger>
|
|
<SelectContent><SelectItem value="PRIMARY">PRIMARY</SelectItem><SelectItem value="ADDITIONAL">ADDITIONAL</SelectItem><SelectItem value="FLOATING">FLOATING</SelectItem></SelectContent>
|
|
</Select>
|
|
</div>
|
|
<Button disabled={!assignForm.vm_id} onClick={() => runAction(() => appClient.network.assignIpAddress(assignForm), "IP assigned")}>Assign</Button>
|
|
<div className="space-y-1 pt-2 border-t">
|
|
{activeAssignments.slice(0, 6).map((item) => (
|
|
<div key={item.id} className="flex items-center justify-between rounded-md bg-muted/40 px-2 py-1.5 text-xs">
|
|
<span className="font-mono">{item.ip_address?.address}/{item.ip_address?.cidr}</span>
|
|
<Button size="sm" variant="outline" onClick={() => runAction(() => appClient.network.returnIpAddress({ assignment_id: item.id }), "IP returned")}>Return</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
|
|
<div className="surface-card p-4 space-y-2">
|
|
<h2 className="text-sm font-semibold">Tenant Quota</h2>
|
|
<Select value={quotaForm.tenant_id} onValueChange={(value) => setQuotaForm((p) => ({ ...p, tenant_id: value }))}>
|
|
<SelectTrigger className="bg-muted"><SelectValue placeholder="Tenant" /></SelectTrigger>
|
|
<SelectContent>{tenants.map((tenant) => <SelectItem key={tenant.id} value={tenant.id}>{tenant.name}</SelectItem>)}</SelectContent>
|
|
</Select>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<Input className="bg-muted" placeholder="IPv4 limit" value={quotaForm.ipv4_limit} onChange={(e) => setQuotaForm((p) => ({ ...p, ipv4_limit: e.target.value }))} />
|
|
<Input className="bg-muted" placeholder="IPv6 limit" value={quotaForm.ipv6_limit} onChange={(e) => setQuotaForm((p) => ({ ...p, ipv6_limit: e.target.value }))} />
|
|
</div>
|
|
<Button disabled={!quotaForm.tenant_id} onClick={() => runAction(() => appClient.network.upsertTenantQuota({ tenant_id: quotaForm.tenant_id, ipv4_limit: quotaForm.ipv4_limit ? Number(quotaForm.ipv4_limit) : null, ipv6_limit: quotaForm.ipv6_limit ? Number(quotaForm.ipv6_limit) : null }), "Quota saved")}>Save Quota</Button>
|
|
<p className="text-xs text-muted-foreground">Configured quotas: {quotas.length}</p>
|
|
</div>
|
|
|
|
<div className="surface-card p-4 space-y-2">
|
|
<h2 className="text-sm font-semibold">Reserved Range</h2>
|
|
<Input className="bg-muted" placeholder="Name" value={rangeForm.name} onChange={(e) => setRangeForm((p) => ({ ...p, name: e.target.value }))} />
|
|
<Input className="bg-muted" placeholder="CIDR (10.0.10.0/24)" value={rangeForm.cidr} onChange={(e) => setRangeForm((p) => ({ ...p, cidr: e.target.value }))} />
|
|
<Select value={rangeForm.scope} onValueChange={(value) => setRangeForm((p) => ({ ...p, scope: value }))}>
|
|
<SelectTrigger className="bg-muted"><SelectValue /></SelectTrigger>
|
|
<SelectContent><SelectItem value="PUBLIC">PUBLIC</SelectItem><SelectItem value="PRIVATE">PRIVATE</SelectItem></SelectContent>
|
|
</Select>
|
|
<Select value={rangeForm.tenant_id || "__GLOBAL__"} onValueChange={(value) => setRangeForm((p) => ({ ...p, tenant_id: value === "__GLOBAL__" ? "" : value }))}>
|
|
<SelectTrigger className="bg-muted"><SelectValue placeholder="Tenant (optional)" /></SelectTrigger>
|
|
<SelectContent><SelectItem value="__GLOBAL__">Global</SelectItem>{tenants.map((tenant) => <SelectItem key={tenant.id} value={tenant.id}>{tenant.name}</SelectItem>)}</SelectContent>
|
|
</Select>
|
|
<Button onClick={() => runAction(() => appClient.network.createReservedRange({ ...rangeForm, tenant_id: rangeForm.tenant_id || undefined }), "Reserved range created")}>Create Range</Button>
|
|
<p className="text-xs text-muted-foreground">Reserved ranges: {ranges.length}</p>
|
|
</div>
|
|
|
|
<div className="surface-card p-4 space-y-2">
|
|
<h2 className="text-sm font-semibold">IP Pool Policy</h2>
|
|
<Input className="bg-muted" placeholder="Policy name" value={policyForm.name} onChange={(e) => setPolicyForm((p) => ({ ...p, name: e.target.value }))} />
|
|
<Select value={policyForm.tenant_id || "__GLOBAL__"} onValueChange={(value) => setPolicyForm((p) => ({ ...p, tenant_id: value === "__GLOBAL__" ? "" : value }))}>
|
|
<SelectTrigger className="bg-muted"><SelectValue placeholder="Tenant (optional)" /></SelectTrigger>
|
|
<SelectContent><SelectItem value="__GLOBAL__">Global</SelectItem>{tenants.map((tenant) => <SelectItem key={tenant.id} value={tenant.id}>{tenant.name}</SelectItem>)}</SelectContent>
|
|
</Select>
|
|
<Select value={policyForm.allocation_strategy} onValueChange={(value) => setPolicyForm((p) => ({ ...p, allocation_strategy: value }))}>
|
|
<SelectTrigger className="bg-muted"><SelectValue /></SelectTrigger>
|
|
<SelectContent><SelectItem value="BEST_FIT">BEST_FIT</SelectItem><SelectItem value="FIRST_AVAILABLE">FIRST_AVAILABLE</SelectItem></SelectContent>
|
|
</Select>
|
|
<Input className="bg-muted" placeholder="Priority" value={policyForm.priority} onChange={(e) => setPolicyForm((p) => ({ ...p, priority: e.target.value }))} />
|
|
<Button onClick={() => runAction(() => appClient.network.createPolicy({ name: policyForm.name, tenant_id: policyForm.tenant_id || undefined, allocation_strategy: policyForm.allocation_strategy, priority: Number(policyForm.priority || 100) }), "Policy created")}>Create Policy</Button>
|
|
<p className="text-xs text-muted-foreground">Policies: {policies.length}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="surface-card p-4">
|
|
<h2 className="text-sm font-semibold mb-3">Subnet Utilization</h2>
|
|
{utilization.subnets?.length === 0 ? (
|
|
<EmptyState title="No Subnets Yet" description="Import IP blocks to populate utilization." />
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b bg-muted/30 text-xs uppercase text-muted-foreground">
|
|
<th className="text-left px-3 py-2">Subnet</th>
|
|
<th className="text-left px-3 py-2">Scope</th>
|
|
<th className="text-left px-3 py-2">Assigned</th>
|
|
<th className="text-left px-3 py-2">Available</th>
|
|
<th className="text-left px-3 py-2">Utilization</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{utilization.subnets.slice(0, 30).map((item) => (
|
|
<tr key={`${item.scope}-${item.subnet}`}>
|
|
<td className="px-3 py-2 font-mono text-xs">{item.subnet}</td>
|
|
<td className="px-3 py-2">{item.scope}</td>
|
|
<td className="px-3 py-2">{item.assigned}</td>
|
|
<td className="px-3 py-2">{item.available}</td>
|
|
<td className="px-3 py-2">{item.utilization_pct}%</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="surface-card p-4">
|
|
<h2 className="text-sm font-semibold mb-3">IP Pool</h2>
|
|
{ipData.length === 0 ? (
|
|
<EmptyState title="No IP Addresses In Pool" description="Import addresses or CIDR blocks to initialize IPAM." />
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b bg-muted/30 text-xs uppercase text-muted-foreground">
|
|
<th className="text-left px-3 py-2">Address</th>
|
|
<th className="text-left px-3 py-2">Scope</th>
|
|
<th className="text-left px-3 py-2">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{ipData.slice(0, 100).map((item) => (
|
|
<tr key={item.id}>
|
|
<td className="px-3 py-2 font-mono text-xs">{item.address}/{item.cidr}</td>
|
|
<td className="px-3 py-2">{item.scope}</td>
|
|
<td className="px-3 py-2"><StatusBadge status={item.status?.toLowerCase()} /></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|