Thamrin-Monitoring-Summary/index.php

<?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>