Add configuration, utilities, and update server with enhanced monitoring features
- Add config.py for environment configuration management - Add utils.py with utility functions - Add .env.example for environment variable reference - Add routes_example.py as route reference - Add login.html template for authentication - Update server.py with enhancements - Update all dashboard and log templates - Move documentation to 'explanations and old code' directory - Update database schema
This commit is contained in:
Developer
@@ -15,6 +15,102 @@
|
||||
text-align: center;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 56px; /* Height of navbar */
|
||||
width: 250px;
|
||||
height: calc(100vh - 56px);
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
z-index: 999;
|
||||
overflow-y: auto;
|
||||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sidebar-menu a,
|
||||
.sidebar-menu button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar-menu a:hover,
|
||||
.sidebar-menu button:hover {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.sidebar-menu i {
|
||||
margin-right: 10px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.toggle-sidebar {
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
top: 70px;
|
||||
z-index: 1000;
|
||||
background: #667eea;
|
||||
border: none;
|
||||
color: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.toggle-sidebar:hover {
|
||||
background: #764ba2;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
.main-content.sidebar-open {
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
@@ -23,27 +119,27 @@
|
||||
}
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
table-layout: fixed; /* Ensures consistent column widths */
|
||||
width: 100%; /* Makes the table take up the full container width */
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
.table th, .table td {
|
||||
text-align: center;
|
||||
word-wrap: break-word; /* Ensures long text wraps within the cell */
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.table th:nth-child(1), .table td:nth-child(1) {
|
||||
width: 20%; /* Hostname column */
|
||||
width: 20%;
|
||||
}
|
||||
.table th:nth-child(2), .table td:nth-child(2) {
|
||||
width: 20%; /* Device IP column */
|
||||
width: 20%;
|
||||
}
|
||||
.table th:nth-child(3), .table td:nth-child(3) {
|
||||
width: 20%; /* Nume Masa column */
|
||||
width: 20%;
|
||||
}
|
||||
.table th:nth-child(4), .table td:nth-child(4) {
|
||||
width: 20%; /* Timestamp column */
|
||||
width: 20%;
|
||||
}
|
||||
.table th:nth-child(5), .table td:nth-child(5) {
|
||||
width: 20%; /* Event Description column */
|
||||
width: 20%;
|
||||
}
|
||||
.refresh-timer {
|
||||
text-align: center;
|
||||
@@ -53,6 +149,31 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Sidebar toggle
|
||||
function toggleSidebar() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const mainContent = document.getElementById('main-content');
|
||||
const toggleBtn = document.getElementById('toggle-btn');
|
||||
|
||||
sidebar.classList.toggle('open');
|
||||
mainContent.classList.toggle('sidebar-open');
|
||||
|
||||
// Rotate arrow
|
||||
toggleBtn.style.transform = sidebar.classList.contains('open') ? 'rotate(180deg)' : 'rotate(0deg)';
|
||||
}
|
||||
|
||||
// Close sidebar when clicking on a link
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const sidebarLinks = document.querySelectorAll('.sidebar-menu a, .sidebar-menu button');
|
||||
sidebarLinks.forEach(link => {
|
||||
link.addEventListener('click', function() {
|
||||
document.getElementById('sidebar').classList.remove('open');
|
||||
document.getElementById('main-content').classList.remove('sidebar-open');
|
||||
document.getElementById('toggle-btn').style.transform = 'rotate(0deg)';
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Countdown timer for refresh
|
||||
let countdown = 30; // 30 seconds
|
||||
function updateTimer() {
|
||||
@@ -167,23 +288,53 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Device Logs Dashboard</h1>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="refresh-timer">
|
||||
Time until refresh: <span id="refresh-timer">30</span> seconds
|
||||
</div>
|
||||
<div>
|
||||
<a href="/unique_devices" class="btn btn-secondary">View Unique Devices</a>
|
||||
<a href="/device_management" class="btn btn-primary">Device Management</a>
|
||||
<a href="/server_logs" class="btn btn-info" title="View server operations and system logs">
|
||||
<i class="fas fa-server"></i> Server Logs
|
||||
</a>
|
||||
<button class="btn btn-danger" onclick="resetDatabase(event)" title="Clear all logs and reset database">
|
||||
<i class="fas fa-trash-alt"></i> Clear Database
|
||||
</button>
|
||||
<!-- User Header -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<span class="navbar-brand">🖥️ Server Monitoring</span>
|
||||
<div class="ms-auto d-flex align-items-center gap-3">
|
||||
<span class="text-white">Welcome, <strong>{{ current_user.username }}</strong></span>
|
||||
<a href="/logout" class="btn btn-sm btn-danger">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar Toggle Button -->
|
||||
<button class="toggle-sidebar" id="toggle-btn" onclick="toggleSidebar()" title="Toggle Menu">
|
||||
<i class="fas fa-chevron-right" style="font-size: 20px; transition: transform 0.3s;"></i>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar Menu -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
<div class="sidebar-title">
|
||||
<span>Quick Actions</span>
|
||||
<i class="fas fa-times" onclick="toggleSidebar()" style="cursor: pointer; font-size: 20px;"></i>
|
||||
</div>
|
||||
<div class="sidebar-menu">
|
||||
<a href="/unique_devices" class="btn btn-link">
|
||||
<i class="fas fa-microchip"></i> Unique Devices
|
||||
</a>
|
||||
<a href="/device_management" class="btn btn-link">
|
||||
<i class="fas fa-cogs"></i> Device Management
|
||||
</a>
|
||||
<a href="/server_logs" class="btn btn-link" title="View server operations and system logs">
|
||||
<i class="fas fa-server"></i> Server Logs
|
||||
</a>
|
||||
<button class="btn btn-link" onclick="resetDatabase(event)" title="Clear all logs and reset database">
|
||||
<i class="fas fa-trash-alt"></i> Clear Database
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content" id="main-content">
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Device Logs Dashboard</h1>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="refresh-timer">
|
||||
Time until refresh: <span id="refresh-timer">30</span> seconds
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead class="table-dark">
|
||||
|
||||
@@ -5,15 +5,91 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Logs for Device: {{ nume_masa }}</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<style>
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
}
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
height: calc(100vh - 56px);
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
left: -250px;
|
||||
transition: left 0.3s ease;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
.sidebar.active {
|
||||
left: 0;
|
||||
}
|
||||
.sidebar-header {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.sidebar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.sidebar-btn {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background-color 0.3s;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
.sidebar-btn:hover {
|
||||
background-color: rgba(255,255,255,0.4);
|
||||
color: white;
|
||||
}
|
||||
.toggle-btn {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
background-color: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
font-size: 18px;
|
||||
}
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
transition: margin-left 0.3s ease;
|
||||
padding-top: 60px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #343a40;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.table-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
@@ -48,11 +124,35 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Logs for Device: {{ nume_masa }}</h1>
|
||||
<div class="back-button">
|
||||
<a href="/dashboard" class="btn btn-primary">Back to Dashboard</a>
|
||||
<!-- User Header -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="position: fixed; top: 0; width: 100%; z-index: 999;">
|
||||
<div class="container-fluid">
|
||||
<button class="toggle-btn" onclick="toggleSidebar()"><i class="fas fa-chevron-right"></i></button>
|
||||
<span class="navbar-brand" style="margin-left: 40px;">🖥️ Server Monitoring</span>
|
||||
<div class="ms-auto d-flex align-items-center gap-3">
|
||||
<span class="text-white">Welcome, <strong>{{ current_user.username }}</strong></span>
|
||||
<a href="/logout" class="btn btn-sm btn-danger">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
Quick Actions
|
||||
<button onclick="toggleSidebar()" style="background: none; border: none; color: white; font-size: 20px; cursor: pointer;">×</button>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
<a href="/dashboard" class="sidebar-btn"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
|
||||
<a href="/unique_devices" class="sidebar-btn"><i class="fas fa-laptop"></i> Unique Devices</a>
|
||||
<a href="/device_management" class="sidebar-btn"><i class="fas fa-tools"></i> Device Management</a>
|
||||
<a href="/server_logs" class="sidebar-btn"><i class="fas fa-server"></i> Server Logs</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Logs for Device: {{ nume_masa }}</h1>
|
||||
<div class="table-container">
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead class="table-dark">
|
||||
@@ -81,9 +181,15 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p class="text-center mt-4">© 2023 Device Logs Dashboard. All rights reserved.</p>
|
||||
</footer>
|
||||
<script>
|
||||
function toggleSidebar() {
|
||||
document.getElementById('sidebar').classList.toggle('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -10,6 +10,81 @@
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
}
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
height: calc(100vh - 56px);
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
left: -250px;
|
||||
transition: left 0.3s ease;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
.sidebar.active {
|
||||
left: 0;
|
||||
}
|
||||
.sidebar-header {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.sidebar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.sidebar-btn {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background-color 0.3s;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
.sidebar-btn:hover {
|
||||
background-color: rgba(255,255,255,0.4);
|
||||
color: white;
|
||||
}
|
||||
.toggle-btn {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
background-color: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
font-size: 18px;
|
||||
}
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
transition: margin-left 0.3s ease;
|
||||
padding-top: 60px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
@@ -67,21 +142,40 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Device Management</h1>
|
||||
|
||||
<div class="back-button">
|
||||
<a href="/dashboard" class="btn btn-primary">Back to Dashboard</a>
|
||||
<a href="/unique_devices" class="btn btn-secondary">View Unique Devices</a>
|
||||
<a href="/server_logs" class="btn btn-info" title="View server operations and system logs">
|
||||
<i class="fas fa-server"></i> Server Logs
|
||||
</a>
|
||||
<!-- User Header -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="position: fixed; top: 0; width: 100%; z-index: 999;">
|
||||
<div class="container-fluid">
|
||||
<button class="toggle-btn" onclick="toggleSidebar()"><i class="fas fa-chevron-right"></i></button>
|
||||
<span class="navbar-brand" style="margin-left: 40px;">🖥️ Server Monitoring</span>
|
||||
<div class="ms-auto d-flex align-items-center gap-3">
|
||||
<span class="text-white">Welcome, <strong>{{ current_user.username }}</strong></span>
|
||||
<a href="/logout" class="btn btn-sm btn-danger">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Filter -->
|
||||
<div class="search-container">
|
||||
<div class="search-input">
|
||||
<input type="text" id="searchInput" class="form-control" placeholder="Search devices by hostname or IP...">
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
Quick Actions
|
||||
<button onclick="toggleSidebar()" style="background: none; border: none; color: white; font-size: 20px; cursor: pointer;">×</button>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
<a href="/dashboard" class="sidebar-btn"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
|
||||
<a href="/unique_devices" class="sidebar-btn"><i class="fas fa-laptop"></i> Unique Devices</a>
|
||||
<a href="/device_management" class="sidebar-btn"><i class="fas fa-tools"></i> Device Management</a>
|
||||
<a href="/server_logs" class="sidebar-btn"><i class="fas fa-server"></i> Server Logs</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Device Management</h1>
|
||||
|
||||
<!-- Search Filter -->
|
||||
<div class="search-container">
|
||||
<div class="search-input">
|
||||
<input type="text" id="searchInput" class="form-control" placeholder="Search devices by hostname or IP...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -501,5 +595,12 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function toggleSidebar() {
|
||||
document.getElementById('sidebar').classList.toggle('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,15 +5,91 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Logs for Hostname: {{ hostname }}</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<style>
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
}
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
height: calc(100vh - 56px);
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
left: -250px;
|
||||
transition: left 0.3s ease;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
.sidebar.active {
|
||||
left: 0;
|
||||
}
|
||||
.sidebar-header {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.sidebar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.sidebar-btn {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background-color 0.3s;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
.sidebar-btn:hover {
|
||||
background-color: rgba(255,255,255,0.4);
|
||||
color: white;
|
||||
}
|
||||
.toggle-btn {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
background-color: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
font-size: 18px;
|
||||
}
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
transition: margin-left 0.3s ease;
|
||||
padding-top: 60px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #343a40;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.table-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
@@ -48,11 +124,35 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Logs for Hostname: {{ hostname }}</h1>
|
||||
<div class="back-button">
|
||||
<a href="/dashboard" class="btn btn-primary">Back to Dashboard</a>
|
||||
<!-- User Header -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="position: fixed; top: 0; width: 100%; z-index: 999;">
|
||||
<div class="container-fluid">
|
||||
<button class="toggle-btn" onclick="toggleSidebar()"><i class="fas fa-chevron-right"></i></button>
|
||||
<span class="navbar-brand" style="margin-left: 40px;">🖥️ Server Monitoring</span>
|
||||
<div class="ms-auto d-flex align-items-center gap-3">
|
||||
<span class="text-white">Welcome, <strong>{{ current_user.username }}</strong></span>
|
||||
<a href="/logout" class="btn btn-sm btn-danger">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
Quick Actions
|
||||
<button onclick="toggleSidebar()" style="background: none; border: none; color: white; font-size: 20px; cursor: pointer;">×</button>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
<a href="/dashboard" class="sidebar-btn"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
|
||||
<a href="/unique_devices" class="sidebar-btn"><i class="fas fa-laptop"></i> Unique Devices</a>
|
||||
<a href="/device_management" class="sidebar-btn"><i class="fas fa-tools"></i> Device Management</a>
|
||||
<a href="/server_logs" class="sidebar-btn"><i class="fas fa-server"></i> Server Logs</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Logs for Hostname: {{ hostname }}</h1>
|
||||
<div class="table-container">
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead class="table-dark">
|
||||
@@ -81,9 +181,15 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p class="text-center mt-4">© 2023 Device Logs Dashboard. All rights reserved.</p>
|
||||
</footer>
|
||||
<script>
|
||||
function toggleSidebar() {
|
||||
document.getElementById('sidebar').classList.toggle('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
151
templates/login.html
Normal file
151
templates/login.html
Normal file
@@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - Server Monitoring</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.login-container h1 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #555;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.login-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #fee;
|
||||
color: #c33;
|
||||
padding: 12px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
border-left: 4px solid #c33;
|
||||
}
|
||||
|
||||
.info-message {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
padding: 12px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
border-left: 4px solid #1976d2;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<h1>🔐 Login</h1>
|
||||
|
||||
{% if error %}
|
||||
<div class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="info-message">
|
||||
<strong>Default Credentials:</strong><br>
|
||||
Username: <code>admin</code><br>
|
||||
Password: <code>admin123</code><br>
|
||||
(Please change after first login)
|
||||
</div>
|
||||
|
||||
<form method="POST">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
required
|
||||
autofocus
|
||||
placeholder="Enter your username"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
placeholder="Enter your password"
|
||||
>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="login-btn">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -10,11 +10,86 @@
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
}
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
height: calc(100vh - 56px);
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
left: -250px;
|
||||
transition: left 0.3s ease;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
.sidebar.active {
|
||||
left: 0;
|
||||
}
|
||||
.sidebar-header {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.sidebar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.sidebar-btn {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background-color 0.3s;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
.sidebar-btn:hover {
|
||||
background-color: rgba(255,255,255,0.4);
|
||||
color: white;
|
||||
}
|
||||
.toggle-btn {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
background-color: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
font-size: 18px;
|
||||
}
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
transition: margin-left 0.3s ease;
|
||||
padding-top: 60px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #343a40;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.table-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
@@ -120,6 +195,33 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- User Header -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="position: fixed; top: 0; width: 100%; z-index: 999;">
|
||||
<div class="container-fluid">
|
||||
<button class="toggle-btn" onclick="toggleSidebar()"><i class="fas fa-chevron-right"></i></button>
|
||||
<span class="navbar-brand" style="margin-left: 40px;">🖥️ Server Monitoring</span>
|
||||
<div class="ms-auto d-flex align-items-center gap-3">
|
||||
<span class="text-white">Welcome, <strong>{{ current_user.username }}</strong></span>
|
||||
<a href="/logout" class="btn btn-sm btn-danger">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
Quick Actions
|
||||
<button onclick="toggleSidebar()" style="background: none; border: none; color: white; font-size: 20px; cursor: pointer;">×</button>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
<a href="/dashboard" class="sidebar-btn"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
|
||||
<a href="/unique_devices" class="sidebar-btn"><i class="fas fa-laptop"></i> Unique Devices</a>
|
||||
<a href="/device_management" class="sidebar-btn"><i class="fas fa-tools"></i> Device Management</a>
|
||||
<a href="/server_logs" class="sidebar-btn"><i class="fas fa-server"></i> Server Logs</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="container mt-5">
|
||||
<div class="server-log-header text-center">
|
||||
<h1 class="mb-2">
|
||||
@@ -221,10 +323,16 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p class="text-center mt-4">© 2025 Server Operations Dashboard. All rights reserved.</p>
|
||||
</footer>
|
||||
<script>
|
||||
function toggleSidebar() {
|
||||
document.getElementById('sidebar').classList.toggle('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,15 +5,91 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Unique Devices</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<style>
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
}
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
height: calc(100vh - 56px);
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
left: -250px;
|
||||
transition: left 0.3s ease;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
.sidebar.active {
|
||||
left: 0;
|
||||
}
|
||||
.sidebar-header {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.sidebar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.sidebar-btn {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background-color 0.3s;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
.sidebar-btn:hover {
|
||||
background-color: rgba(255,255,255,0.4);
|
||||
color: white;
|
||||
}
|
||||
.toggle-btn {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
background-color: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
font-size: 18px;
|
||||
}
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
transition: margin-left 0.3s ease;
|
||||
padding-top: 60px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #343a40;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.table-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
@@ -62,11 +138,36 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Unique Devices</h1>
|
||||
<div class="back-button">
|
||||
<a href="/dashboard" class="btn btn-primary">Back to Dashboard</a>
|
||||
<!-- User Header -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="position: fixed; top: 0; width: 100%; z-index: 999;">
|
||||
<div class="container-fluid">
|
||||
<button class="toggle-btn" onclick="toggleSidebar()"><i class="fas fa-chevron-right"></i></button>
|
||||
<span class="navbar-brand" style="margin-left: 40px;">🖥️ Server Monitoring</span>
|
||||
<div class="ms-auto d-flex align-items-center gap-3">
|
||||
<span class="text-white">Welcome, <strong>{{ current_user.username }}</strong></span>
|
||||
<a href="/logout" class="btn btn-sm btn-danger">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
Quick Actions
|
||||
<button onclick="toggleSidebar()" style="background: none; border: none; color: white; font-size: 20px; cursor: pointer;">×</button>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
<a href="/dashboard" class="sidebar-btn"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
|
||||
<a href="/unique_devices" class="sidebar-btn"><i class="fas fa-laptop"></i> Unique Devices</a>
|
||||
<a href="/device_management" class="sidebar-btn"><i class="fas fa-tools"></i> Device Management</a>
|
||||
<a href="/server_logs" class="sidebar-btn"><i class="fas fa-server"></i> Server Logs</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Unique Devices</h1>
|
||||
|
||||
|
||||
<!-- Search Filter -->
|
||||
<div class="search-container">
|
||||
@@ -148,8 +249,13 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
function toggleSidebar() {
|
||||
document.getElementById('sidebar').classList.toggle('active');
|
||||
}
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p class="text-center mt-4">© 2023 Unique Devices Dashboard. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user