fun/Thamrin-Monitoring-Summary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
I-Fun
2026-03-27 14:46:28 +07:00
commit 50f7445c1c
7 changed files with 1469 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
index.php Normal file
View File

@@ -0,0 +1,204 @@
<?php
// Configuration
$metricsUrl = 'http://192.168.88.111:5002/metrics';
$apiToken = 'uk3_ehosMbWkvQvG_182svHdnSLb5kQG6HdeA166j9_p';
// Set your Grafana URL and API key here
$grafanaUrl = 'https://corvus.thamrin.net.id'; // TODO: change to your actual Grafana URL
$grafanaApiKey = 'glsa_VXhpKUk4bOqJSgfLPzqNgO76LkPjfJBx_9cce4338'; // Or set your API key if needed
$taskApiUrl = 'http://#TODO_INSERT_TASK_API_URL#/tasks'; // TODO: Change to your TASK-API URL
$useMockTaskApi = true; // Set to true to use mock data for tasks
$mockTaskFile = __DIR__ . '/src/mock_tasks.json';
// Create HTTP context with Authorization header
$options = [
'http' => [
'header' => "Authorization: Basic " . base64_encode("user:$apiToken") . "\r\n",
'method' => 'GET',
'timeout' => 5
]
];
$context = stream_context_create($options);
// Require the new functions.php for PHP logic.
require_once __DIR__ . '/src/functions.php';
// Handle AJAX request
if (isset($_GET['fetch']) && $_GET['fetch'] === 'metrics') {
header('Content-Type: application/json');
echo json_encode(fetchMetrics($metricsUrl, $context));
exit;
}
// --- AJAX handler for alerts ---
if (isset($_GET['fetch']) && $_GET['fetch'] === 'alerts') {
header('Content-Type: application/json');
echo json_encode(fetchGrafanaAlerts($grafanaUrl, $grafanaApiKey));
exit;
}
// --- AJAX handler for holiday info ---
if (isset($_GET['fetch']) && $_GET['fetch'] === 'holiday') {
header('Content-Type: application/json');
$date = isset($_GET['date']) ? $_GET['date'] : date('Y-m-d');
$holiday = getIndonesianHoliday($date);
echo json_encode(['holiday' => $holiday]);
exit;
}
// --- AJAX handler for tasks ---
if (isset($_GET['fetch']) && $_GET['fetch'] === 'tasks') {
header('Content-Type: application/json');
echo json_encode(fetchTasks($taskApiUrl, $useMockTaskApi, $mockTaskFile));
exit;
}
// Initial data load
$todayHoliday = getIndonesianHoliday(date('Y-m-d'));
$data = fetchMetrics($metricsUrl, $context);
if ($data['error']) {
http_response_code(500);
die($data['message']);
}
// Extract data
$up = $data['up'];
$down = $data['down'];
$pending = $data['pending'];
$maintenance = $data['maintenance'];
$downMonitors = $data['downMonitors'];
$mtMonitors = $data['mtMonitors'];
$expiringCerts = $data['expiringCerts']; // <-- Add this line to make $expiringCerts available for the template
$lastRefresh = $data['lastRefresh'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Services Monitoring</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css?v=<?= time() ?>">
</head>
<body>
<div id="time-container">
<div class="date-holiday-row">
<div id="digital-date"></div>
<div id="holiday-info" <?= $todayHoliday ? '' : 'style="display:none;"' ?>>
<?= $todayHoliday ? htmlspecialchars('(' . $todayHoliday . ')') : '' ?>
</div>
</div>
<div id="digital-clock"></div>
</div>
<h1 class="desktop-title">Thamrin Net - Monitoring Summary</h1>
<h1 class="mobile-title">Monitoring Summary</h1>
<button class="refresh-button" id="refresh-button" title="Refresh Now">
🔄
</button>
<div class="dashboard">
<div class="box up">
<h2>Online</h2>
<span id="up-count"><?= $up ?></span>
</div>
<div class="box down">
<h2>Offline</h2>
<span id="down-count"><?= $down ?></span>
</div>
<div class="box maintenance">
<h2>Maintenance</h2>
<span id="maintenance-count"><?= $maintenance ?></span>
</div>
<div class="box alert-box">
<h2>Alert</h2>
<span id="alert-count">-</span>
</div>
<div class="box task-box">
<h2>Pending Task</h2>
<span id="task-count">-</span>
</div>
</div>
<div class="main-content-grid">
<div class="unified-lists-container">
<div class="filter-buttons">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="offline">Offline Services</button>
<button class="filter-btn" data-filter="alerts">Active Alerts</button>
<button class="filter-btn" data-filter="maintenance">Maintenance</button>
<button class="filter-btn" data-filter="ssl">Upcoming SSL Expiry</button>
</div>
<div id="all-good-container" <?= $down > 0 ? 'style="display:none;"' : '' ?>>
<div class="all-good" id="all-good-message">✅ All is good — No services are down.</div>
</div>
<div id="down-list-container" <?= $down === 0 ? 'style="display:none;"' : '' ?>>
<h3 style="color: #dc3545;">Offline Services</h3>
<ul id="down-monitors-list">
<?php foreach (array_slice($downMonitors, 0, 5) as $name): ?>
<li><?= htmlspecialchars($name) ?></li>
<?php endforeach; ?>
</ul>
</div>
<div id="alert-list-container" style="display:none;">
<h3 style="color: #dc3545;">Active Alerts</h3>
<ul id="alert-list"></ul>
</div>
<div id="mt-list-container" <?= empty($mtMonitors) ? 'style="display:none;"' : '' ?>>
<h3 style="color: #17A2B8;">Under Maintenance</h3>
<ul id="mt-monitors-list">
<?php foreach (array_slice($mtMonitors, 0, 5) as $name): ?>
<li><?= htmlspecialchars($name) ?></li>
<?php endforeach; ?>
</ul>
</div>
<div id="cert-warning-container" <?= empty($expiringCerts) ? 'style="display:none;"' : '' ?>>
<h3 style="color: #FF7F55;">Upcoming SSL Expiry</h3>
<ul id="expiring-cert-list">
<?php foreach (array_slice($expiringCerts, 0, 5) as $cert): ?>
<li><?= htmlspecialchars($cert['name']) ?> - <?= $cert['days'] ?> days remaining</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<div class="task-container">
<div class="filter-buttons task-filter-buttons">
<button class="filter-btn active" data-task-filter="all">All</button>
<button class="filter-btn" data-task-filter="pending">Pending</button>
<button class="filter-btn" data-task-filter="in-progress">In Progress</button>
<button class="filter-btn" data-task-filter="overdue">Overdue</button>
</div>
<h3>Tasks</h3>
<div id="task-list">
<div class="loading"></div>
</div>
</div>
</div>
<div class="refresh-info" id="refresh-info">
Last updated: <?= $lastRefresh ?> (refresh every 10 Seconds)
</div>
<br />
<!-- Popup for status changes -->
<div id="status-popup"></div>
<script src="src/main.js?v=<?= time() ?>"></script>
</body>
</html>