You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
2.0 KiB
62 lines
2.0 KiB
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useNotification } from '../../context/NotificationContext';
|
|
|
|
export default function LeasesPage() {
|
|
const [leases, setLeases] = useState([]);
|
|
const { showNotification } = useNotification();
|
|
|
|
const fetchLeases = async () => {
|
|
try {
|
|
const response = await fetch('/api/dhcp/leases'); // Replace with your actual API endpoint for leases
|
|
const data = await response.json();
|
|
if (response.ok) {
|
|
setLeases(data.leases);
|
|
showNotification('Leases refreshed successfully.', 'success');
|
|
} else {
|
|
showNotification(data.error, 'error');
|
|
}
|
|
} catch (error) {
|
|
showNotification('Failed to fetch leases.', 'error');
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchLeases();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="container mt-5">
|
|
<h1 className="mb-4">Current DHCP Leases</h1>
|
|
<button className="btn btn-secondary mb-3" onClick={fetchLeases}>
|
|
Refresh Leases
|
|
</button>
|
|
<table className="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">IP Address</th>
|
|
<th scope="col">Start Time</th>
|
|
<th scope="col">End Time</th>
|
|
<th scope="col">MAC Address</th>
|
|
<th scope="col">Hostname</th>
|
|
<th scope="col">State</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{leases.map((lease, index) => (
|
|
<tr key={index}>
|
|
<td>{lease.ip}</td>
|
|
<td>{lease.start}</td>
|
|
<td>{lease.end}</td>
|
|
<td>{lease.mac}</td>
|
|
<td>{lease.hostname}</td>
|
|
<td>{lease.state}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|