| Server IP : 3.111.61.48 / Your IP : 216.73.216.67 Web Server : Apache System : Linux ip-10-0-5-176 6.8.0-1057-aws #60~22.04.1-Ubuntu SMP Wed May 27 08:16:59 UTC 2026 x86_64 User : ubuntu ( 1000) PHP Version : 8.2.31 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /var/www/vhost/itmtrsrv.arukustech.com/public/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert History - Server Monitor</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #2563eb; /* Bright blue */
--bg: #f1f5f9;
--sidebar: #0f172a;
--header-bg: #1e293b;
--card: #ffffff;
--text-main: #1e293b;
--text-muted: #94a3b8;
--border: #e2e8f0;
--danger: #ef4444;
--success: #10b981;
--warning: #f59e0b;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background-color: var(--bg);
color: var(--text-main);
margin: 0;
display: flex;
min-height: 100vh;
overflow-x: hidden;
}
/* --- FIXED HEADER --- */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: var(--header-bg);
color: white;
padding: 0 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1100;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
header h2 { margin: 0; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
/* --- CATEGORIZED SIDEBAR --- */
.sidebar {
width: 260px;
height: 100vh;
background: linear-gradient(180deg,#111827,#1f2937);
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
z-index: 1000;
padding-top: 0;
transition: transform 0.3s ease;
box-shadow: 3px 5px 4px rgba(0,0,0,.2);
}
.nav-category {
padding: 24px 24px 8px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
font-weight: 700;
}
.nav-menu { flex-grow: 1; }
.nav-item {
padding: 12px 20px;
margin: 4px 16px;
display: flex;
align-items: center;
gap: 12px;
color: #94a3b8;
text-decoration: none;
border-radius: 8px;
transition: all 0.2s;
font-weight: 500;
font-size: 0.95rem;
}
.nav-item i { width: 20px; text-align: center; font-size: 1.1rem; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: white; }
.nav-item.active {
background: var(--primary);
color: white;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
/* --- MAIN CONTENT --- */
.main-wrapper {
margin-left: 260px;
margin-top: 60px;
flex-grow: 1;
padding: 40px;
padding-bottom: 80px;
width: calc(100% - 260px);
box-sizing: border-box;
}
/* --- FIXED FOOTER --- */
footer {
position: fixed;
bottom: 0;
left: 260px; /* for sidebar width */
right: 0;
height: 45px;
background: white;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: flex-end; /* ?? key change */
padding: 0 40px;
font-size: 0.8rem;
color: #64748b;
z-index: 1050;
}
/* --- ALERTS UI --- */
.info-card {
background: white;
padding: 7px;
border-radius: 14px;
border: 1px solid var(--border);
margin-bottom: 7px;
display: inline-flex;
align-items: center;
gap: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
margin-top: -21px;
}
.table-container {
background: rgba(255,255,255,0.9);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow:
0 10px 30px rgba(15,23,42,0.06),
0 2px 6px rgba(15,23,42,0.04);
border: 1px solid var(--border);
overflow: hidden;
width: 100%;
}
table { width: 100%; border-collapse: collapse; text-align: left; }
thead { background: #f8fafc; }
th {
padding: 16px 24px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
}
td {
padding: 18px 24px;
border-bottom: 1px solid #eef2f7;
font-size: 0.92rem;
vertical-align: middle;
transition: all 0.2s ease;
}
tbody tr {
transition: all 0.2s ease;
}
tbody tr:hover {
background: #f8fbff;
transform: scale(1.001);
box-shadow: inset 3px 0 0 #2563eb;
}
.status-pill {
padding: 6px 12px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
}
.pill-active { background: #fef2f2; color: var(--danger); }
.pill-resolved { background: #ecfdf5; color: var(--success); }
.type-badge {
background: #eef2ff;
color: #4f46e5;
padding: 4px 10px;
border-radius: 6px;
font-weight: 600;
font-size: 0.8rem;
}
.server-link {
font-weight: 600;
color: var(--text-main);
display: flex;
align-items: center;
gap: 10px;
}
.time-cell {
color: var(--text-muted);
font-size: 0.85rem;
font-weight: 500;
}
@media (max-width: 1024px) {
.sidebar { width: 70px; }
.sidebar span, .nav-category, footer { display: none; }
.nav-item { margin: 4px 10px; padding: 12px; justify-content: center; }
.main-wrapper { margin-left: 70px; width: calc(100% - 70px); }
}
@media (max-width: 768px) {
header {
padding: 0 12px;
height: 60px;
}
header h2 {
font-size: 1rem;
gap: 8px;
}
.sidebar {
width: 250px !important;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1200;
top: 0;
left: 0;
}
.sidebar.active {
transform: translateX(0);
}
.nav-item {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 12px 18px;
margin: 6px 12px;
height: auto;
}
.nav-item i {
font-size: 1rem;
width: 20px;
margin-right: 10px;
}
.nav-item span {
display: inline !important;
}
.nav-category {
display: block !important;
}
.main-wrapper {
margin-left: 0 !important;
width: 100% !important;
padding: 80px 15px 80px;
}
footer {
left: 0 !important;
justify-content: center;
padding: 0 10px;
font-size: 0.75rem;
}
.table-container {
overflow-x: auto;
}
table {
min-width: 850px;
}
}
.filter-container{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:20px;
padding:18px;
background:#fff;
border-radius:14px;
border:1px solid var(--border);
}
.filter-container input,
.filter-container select{
padding:10px 14px;
border:1px solid #dbe2ea;
border-radius:8px;
min-width:180px;
font-size:14px;
}
.filter-container button{
border:none;
padding:10px 18px;
border-radius:8px;
cursor:pointer;
font-weight:600;
}
.filter-container button:first-of-type{
background:#2563eb;
color:#fff;
}
.filter-container button:last-of-type{
background:#e2e8f0;
}
@media(max-width:768px){
.filter-container{
flex-direction:column;
}
.filter-container input,
.filter-container select,
.filter-container button{
width:100%;
}
}
</style>
</head>
<body>
<header>
<h2>
<i class="fas fa-bars menu-toggle" onclick="toggleSidebar()" style="cursor:pointer;"></i>
<i class="fas fa-microchip"></i>
Infrastructure History
</h2>
<div style="font-size: 0.85rem; color: #cbd5e1;"><i class="fas fa-history"></i> System Incident Logs</div>
</header>
<nav class="sidebar">
<!-- Top Section -->
<div>
<!-- Logo / Brand -->
<div style="padding:28px 24px;border-bottom:1px solid rgba(255,255,255,0.08);">
<h2 style="margin:0;font-size:24px;font-weight:700;color:#ffffff;letter-spacing:0.5px;">
<i class="fas fa-network-wired" style="color:#60a5fa;"></i>
InfraPanel
</h2>
<p style="margin:8px 0 0;color:#9ca3af;font-size:13px;">
Infrastructure Monitoring
</p>
</div>
<!-- Navigation -->
<div style="padding:20px 14px;">
<!-- Main -->
<div style="margin-bottom:10px;padding:0 12px;color:#6b7280;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;">
Main
</div>
<a href="index.html"
style="display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:8px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;text-decoration:none;font-weight:600;box-shadow:0 6px 18px rgba(37,99,235,0.35);">
<i class="fas fa-th-large" style="font-size:18px;"></i>
<span>Dashboard</span>
</a>
<!-- Operations -->
<div style="margin:22px 0 10px;padding:0 12px;color:#6b7280;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;">
Operations
</div>
<a href="admin.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;transition:0.3s;background:rgba(255,255,255,0.03);">
<i class="fas fa-server" style="font-size:17px;color:#60a5fa;"></i>
<span>Manage Servers</span>
</a>
<a href="user.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;transition:0.3s;background:rgba(255,255,255,0.03);">
<i class="fas fa-users-cog" style="font-size:17px;color:#34d399;"></i>
<span>User Management</span>
</a>
<!-- Reports -->
<div style="margin:22px 0 10px;padding:0 12px;color:#6b7280;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;">
Reports
</div>
<a href="alerts.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;background:rgba(255,255,255,0.03);">
<i class="fas fa-history" style="font-size:17px;color:#fbbf24;"></i>
<span>Alert History</span>
</a>
<a href="reports.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;background:rgba(255,255,255,0.03);">
<i class="fas fa-chart-line" style="font-size:17px;color:#c084fc;"></i>
<span>Reports</span>
</a>
</div>
</div>
<!-- Bottom Logout -->
<div style="padding:18px;border-top:1px solid rgba(255,255,255,0.08);">
<a href="#"
onclick="logout()"
style="display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(239,68,68,0.12);color:#f87171;text-decoration:none;font-weight:600;">
<i class="fas fa-sign-out-alt"></i>
<span>Logout</span>
</a>
</div>
</nav>
<div class="main-wrapper">
<div class="container">
<div style="
display:flex;
align-items:center;
gap:24px;
margin-bottom:22px;
flex-wrap:wrap;
">
<!-- Title -->
<div>
<h2 style="
margin:0;
font-size:30px;
font-weight:700;
color:#0f172a;
">
Incident Reports
</h2>
<p style="
margin-top:6px;
color:#64748b;
font-size:14px;
">
Historical alert notifications and infrastructure incidents
</p>
</div>
</div>
<div class="filter-container">
<input type="date" id="filterDate">
<select id="filterServer">
<option value="">All Servers</option>
</select>
<select id="filterIssue">
<option value="">All Issues</option>
</select>
<select id="filterStatus">
<option value="">All Status</option>
<option value="ACTIVE">Active</option>
<option value="RESOLVED">Resolved</option>
</select>
<button onclick="applyFilters()">
<i class="fas fa-filter"></i>
Filter
</button>
<button onclick="resetFilters()">
<i class="fas fa-undo"></i>
Reset
</button>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th style="width: 200px;">Time (IST)</th>
<th style="width: 220px;">Server Name</th>
<th style="width: 120px;">Issue Type</th>
<th>Alert Message</th>
<th>CPU</th>
<th>RAM</th>
<th>DISK</th>
<th style="text-align: right;">Status</th>
</tr>
</thead>
<tbody id="alertTable"></tbody>
</table>
</div>
</div>
</div>
<footer>
© 2026 | Designed by <strong>Company Pvt. Ltd.</strong>
</footer>
<script>
const token = localStorage.getItem("token");
let allAlerts = [];
if (!token) {
window.location.href = "login.html";
}
/* =====================================================
LOGOUT
===================================================== */
function logout() {
localStorage.removeItem("token");
window.location.href = "login.html";
}
/* =====================================================
FORMAT IST DATE
===================================================== */
function formatIST(dateStr) {
if (!dateStr) return "-";
const date = new Date(dateStr + "Z");
return date.toLocaleString('en-IN', {
timeZone: 'Asia/Kolkata',
day: '2-digit',
month: 'short',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
});
}
/* =====================================================
LOAD ALERTS
===================================================== */
async function loadAlerts() {
try {
const response = await fetch(
'/api/v1/admin/alerts',
{
headers: {
'Authorization': 'Bearer ' + token
}
}
);
if (response.status === 401) {
logout();
return;
}
allAlerts = await response.json();
populateIssueTypes();
populateServers();
renderAlerts(allAlerts);
return;
table.innerHTML = html;
/* ============================================
BUILD HTML ONCE (FAST)
============================================ */
let html = "";
alerts.forEach(a => {
const statusPill = a.is_active == 1
? `
<span style="
background:#fef2f2;
color:#dc2626;
padding:7px 14px;
border-radius:999px;
font-size:11px;
font-weight:700;
display:inline-flex;
align-items:center;
gap:6px;
">
<i class="fas fa-bell"></i>
ACTIVE
</span>
`
:
`
<span style="
background:#ecfdf5;
color:#059669;
padding:7px 14px;
border-radius:999px;
font-size:11px;
font-weight:700;
display:inline-flex;
align-items:center;
gap:6px;
">
<i class="fas fa-check-circle"></i>
RESOLVED
</span>
`;
html += `
<tr>
<td class="time-cell">
${formatIST(
a.last_notified_at || a.created_at
)}
</td>
<td>
<div class="server-link">
<i class="fas fa-server"
style="
color:#94a3b8;
font-size:.85rem;
"></i>
${a.server_name}
</div>
</td>
<td>
<span class="type-badge">
${a.alert_type}
</span>
</td>
<td style="
color:#475569;
font-size:.9rem;
">
${a.message}
</td>
<td>
<span style="
background:#eff6ff;
color:#2563eb;
padding:6px 10px;
border-radius:8px;
font-weight:600;
font-size:12px;
">
${a.cpu_usage ?? 0}%
</span>
</td>
<td>
<span style="
background:#f5f3ff;
color:#7c3aed;
padding:6px 10px;
border-radius:8px;
font-weight:600;
font-size:12px;
">
${a.ram_usage ?? 0}%
</span>
</td>
<td>
<span style="
background:#ecfdf5;
color:#059669;
padding:6px 10px;
border-radius:8px;
font-weight:600;
font-size:12px;
">
${a.disk_usage ?? 0}%
</span>
</td>
<td style="text-align:right">
${statusPill}
</td>
</tr>
`;
});
/* ============================================
SINGLE DOM UPDATE (FAST)
============================================ */
table.innerHTML = html;
}
catch (e) {
console.error(
"Failed to load alerts",
e
);
}
}
function populateIssueTypes(){
const select =
document.getElementById("filterIssue");
const issues =
[...new Set(
allAlerts.map(
a => a.alert_type
)
)];
select.innerHTML =
'<option value="">All Issues</option>';
issues.forEach(issue => {
select.innerHTML +=
`<option value="${issue}">
${issue}
</option>`;
});
}
function populateServers(){
const select =
document.getElementById("filterServer");
const servers =
[...new Set(
allAlerts.map(
a => a.server_name
)
)];
select.innerHTML =
'<option value="">All Servers</option>';
servers.sort();
servers.forEach(server => {
select.innerHTML +=
`<option value="${server}">
${server}
</option>`;
});
}
function renderAlerts(alerts){
const table =
document.getElementById("alertTable");
let html = "";
alerts.forEach(a => {
const statusPill =
a.is_active == 1
? `<span style="
background:#fef2f2;
color:#dc2626;
padding:7px 14px;
border-radius:999px;
font-size:11px;
font-weight:700;
display:inline-flex;
align-items:center;
gap:6px;">
<i class="fas fa-bell"></i>
ACTIVE
</span>`
:
`<span style="
background:#ecfdf5;
color:#059669;
padding:7px 14px;
border-radius:999px;
font-size:11px;
font-weight:700;
display:inline-flex;
align-items:center;
gap:6px;">
<i class="fas fa-check-circle"></i>
RESOLVED
</span>`;
html += `
<tr>
<td class="time-cell">
${formatIST(
a.last_notified_at ||
a.created_at
)}
</td>
<td>
<div class="server-link">
<i class="fas fa-server"
style="color:#94a3b8;font-size:.85rem;">
</i>
${a.server_name}
</div>
</td>
<td>
<span class="type-badge">
${a.alert_type}
</span>
</td>
<td style="color:#475569;font-size:.9rem;">
${a.message}
</td>
<td>
<span style="
background:#eff6ff;
color:#2563eb;
padding:6px 10px;
border-radius:8px;
font-weight:600;
font-size:12px;">
${a.cpu_usage ?? 0}%
</span>
</td>
<td>
<span style="
background:#f5f3ff;
color:#7c3aed;
padding:6px 10px;
border-radius:8px;
font-weight:600;
font-size:12px;">
${a.ram_usage ?? 0}%
</span>
</td>
<td>
<span style="
background:#ecfdf5;
color:#059669;
padding:6px 10px;
border-radius:8px;
font-weight:600;
font-size:12px;">
${a.disk_usage ?? 0}%
</span>
</td>
<td style="text-align:right">
${statusPill}
</td>
</tr>`;
});
table.innerHTML = html;
}
function applyFilters(){
const date =
document.getElementById("filterDate")
.value;
const server =
document.getElementById("filterServer")
.value;
const issue =
document.getElementById("filterIssue")
.value;
const status =
document.getElementById("filterStatus")
.value;
const filtered =
allAlerts.filter(a => {
let match = true;
if(server){
match =
match &&
a.server_name === server;
}
if(issue){
match =
match &&
a.alert_type === issue;
}
if(status){
const rowStatus =
a.is_active == 1
? "ACTIVE"
: "RESOLVED";
match =
match &&
rowStatus === status;
}
if(date){
const rowDate =
(
a.last_notified_at ||
a.created_at
)
.substring(0,10);
match =
match &&
rowDate === date;
}
return match;
});
renderAlerts(filtered);
}
function resetFilters(){
document.getElementById("filterDate").value = "";
document.getElementById("filterServer").value = "";
document.getElementById("filterIssue").value = "";
document.getElementById("filterStatus").value = "";
renderAlerts(allAlerts);
}
/* =====================================================
ROLE BASED UI
===================================================== */
document.addEventListener(
"DOMContentLoaded",
() => {
try {
const payload =
JSON.parse(
atob(token.split('.')[1])
);
if (payload.role !== "Admin") {
const adminLinks =
document.querySelectorAll(
".admin-only"
);
adminLinks.forEach(link =>
link.style.setProperty(
'display',
'none',
'important'
)
);
}
}
catch (e) {
console.error("Token error", e);
logout();
}
}
);
/* =====================================================
INITIAL LOAD
===================================================== */
loadAlerts();
/* =====================================================
AUTO REFRESH
===================================================== */
/* changed from 30 sec to 2 min */
setInterval(
loadAlerts,
120000
);
/* =====================================================
DISABLE INSPECT
===================================================== */
document.addEventListener(
'contextmenu',
event => event.preventDefault()
);
document.onkeydown = function(e) {
if (
e.keyCode == 123 ||
(
e.ctrlKey &&
e.shiftKey &&
(
e.keyCode == 'I'.charCodeAt(0) ||
e.keyCode == 'J'.charCodeAt(0)
)
) ||
(
e.ctrlKey &&
e.keyCode == 'U'.charCodeAt(0)
)
) {
return false;
}
};
/* =====================================================
MOBILE SIDEBAR
===================================================== */
function toggleSidebar() {
document.querySelector(".sidebar")
.classList.toggle("active");
}
</script>
</body>
</html>