Matthias Hinrichs
207 lines
11 KiB
HTML
207 lines
11 KiB
HTML
<html>
|
|
<head>
|
|
<title>Server Management</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-gray-100 text-gray-800">
|
|
|
|
<div class="container mx-auto p-8">
|
|
<h1 class="text-4xl font-bold mb-8">Server Management</h1>
|
|
|
|
<div id="server-table-container" class="bg-white shadow-md rounded-lg overflow-hidden">
|
|
<table class="min-w-full leading-normal">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Name</th>
|
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">IP</th>
|
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">MAC</th>
|
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th>
|
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="server-table-body">
|
|
<!-- Server rows will be inserted here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="no-servers-message" class="hidden bg-white shadow-md rounded-lg p-8 text-center">
|
|
<p class="text-gray-600">No servers found. Please check your configuration.</p>
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
<button id="add-server-button" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
|
|
Add New Server
|
|
</button>
|
|
</div>
|
|
|
|
<div id="add-server-form-container" class="hidden mt-8 bg-white shadow-md rounded-lg p-8">
|
|
<h2 class="text-2xl font-bold mb-4">Add New Server</h2>
|
|
<form id="add-server-form">
|
|
<div class="mb-4">
|
|
<label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name</label>
|
|
<input type="text" id="name" name="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="ip" class="block text-gray-700 text-sm font-bold mb-2">IP Address</label>
|
|
<input type="text" id="ip" name="ip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="mac" class="block text-gray-700 text-sm font-bold mb-2">MAC Address</label>
|
|
<input type="text" id="mac" name="mac" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="ssh_user" class="block text-gray-700 text-sm font-bold mb-2">SSH User</label>
|
|
<input type="text" id="ssh_user" name="ssh_user" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="ssh_pass" class="block text-gray-700 text-sm font-bold mb-2">SSH Password</label>
|
|
<input type="password" id="ssh_pass" name="ssh_pass" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
|
|
Save Server
|
|
</button>
|
|
<button type="button" id="cancel-add-server" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
fetchServers();
|
|
|
|
const addServerButton = document.getElementById("add-server-button");
|
|
const addServerFormContainer = document.getElementById("add-server-form-container");
|
|
const cancelAddServerButton = document.getElementById("cancel-add-server");
|
|
const addServerForm = document.getElementById("add-server-form");
|
|
|
|
addServerButton.addEventListener("click", () => {
|
|
addServerFormContainer.classList.remove("hidden");
|
|
addServerButton.classList.add("hidden");
|
|
});
|
|
|
|
cancelAddServerButton.addEventListener("click", () => {
|
|
addServerFormContainer.classList.add("hidden");
|
|
addServerButton.classList.remove("hidden");
|
|
addServerForm.reset();
|
|
});
|
|
|
|
addServerForm.addEventListener("submit", function(event) {
|
|
event.preventDefault();
|
|
const formData = new FormData(addServerForm);
|
|
const serverData = Object.fromEntries(formData.entries());
|
|
|
|
fetch("/servers", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(serverData),
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
fetchServers();
|
|
addServerFormContainer.classList.add("hidden");
|
|
addServerButton.classList.remove("hidden");
|
|
addServerForm.reset();
|
|
} else {
|
|
alert("Failed to add server.");
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
function fetchServers() {
|
|
fetch("/servers")
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const tableContainer = document.getElementById("server-table-container");
|
|
const noServersMessage = document.getElementById("no-servers-message");
|
|
const tableBody = document.getElementById("server-table-body");
|
|
|
|
tableBody.innerHTML = ""; // Clear existing rows
|
|
|
|
if (data && data.length > 0) {
|
|
tableContainer.classList.remove("hidden");
|
|
noServersMessage.classList.add("hidden");
|
|
|
|
data.forEach(server => {
|
|
const row = document.createElement("tr");
|
|
row.innerHTML = `
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">${server.name}</td>
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">${server.ip}</td>
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">${server.mac}</td>
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" id="status-${server.name}">Checking...</td>
|
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
|
<button onclick="wakeServer('${server.name}')" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Wake</button>
|
|
<button onclick="shutdownServer('${server.name}')" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Shutdown</button>
|
|
<button onclick="rebootServer('${server.name}')" class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded">Reboot</button>
|
|
<button onclick="deleteServer('${server.name}')" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">Delete</button>
|
|
</td>
|
|
`;
|
|
tableBody.appendChild(row);
|
|
checkServerStatus(server.name);
|
|
});
|
|
} else {
|
|
tableContainer.classList.add("hidden");
|
|
noServersMessage.classList.remove("hidden");
|
|
}
|
|
});
|
|
}
|
|
|
|
function checkServerStatus(serverName) {
|
|
fetch(`/status?name=${serverName}`)
|
|
.then(response => response.text())
|
|
.then(status => {
|
|
const statusCell = document.getElementById(`status-${serverName}`);
|
|
statusCell.textContent = status;
|
|
if (status === "Online") {
|
|
statusCell.classList.add("text-green-500", "font-bold");
|
|
statusCell.classList.remove("text-red-500");
|
|
} else {
|
|
statusCell.classList.add("text-red-500", "font-bold");
|
|
statusCell.classList.remove("text-green-500");
|
|
}
|
|
});
|
|
}
|
|
|
|
function wakeServer(serverName) {
|
|
fetch(`/wake?name=${serverName}`).then(() => alert(`${serverName} wake signal sent.`));
|
|
}
|
|
|
|
function shutdownServer(serverName) {
|
|
if (confirm(`Are you sure you want to shutdown ${serverName}?`)) {
|
|
fetch(`/shutdown?name=${serverName}`).then(() => alert(`${serverName} is shutting down.`));
|
|
}
|
|
}
|
|
|
|
function rebootServer(serverName) {
|
|
if (confirm(`Are you sure you want to reboot ${serverName}?`)) {
|
|
fetch(`/reboot?name=${serverName}`).then(() => alert(`${serverName} is rebooting.`));
|
|
}
|
|
}
|
|
|
|
function deleteServer(serverName) {
|
|
if (confirm(`Are you sure you want to delete ${serverName}? This action cannot be undone.`)) {
|
|
fetch(`/servers?name=${serverName}`, {
|
|
method: 'DELETE',
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
fetchServers(); // Refresh the server list
|
|
} else {
|
|
alert(`Failed to delete ${serverName}.`);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Refresh server status every 30 seconds
|
|
setInterval(fetchServers, 30000);
|
|
</script>
|
|
|
|
</body>
|
|
</html> |