Implements live graphs page

app/classes/agent.php

@@ -494,6 +494,77 @@ class Agent {
         return null;
     }
 
+    /**
+     * Gets historical data for a specific metric from agent checks
+     *
+     * @param int $platform_id The platform ID
+     * @param string $agent_type The type of agent (e.g., 'jvb', 'jicofo')
+     * @param string $metric_type The type of metric to retrieve
+     * @param string $from_time Start time in Y-m-d format
+     * @param string $until_time End time in Y-m-d format
+     * @return array Array with the dataset from agent checks
+     */
+    public function getHistoricalData($platform_id, $agent_type, $metric_type, $from_time, $until_time) {
+        // Get data from agent checks
+        $sql = 'SELECT
+                    DATE(jac.timestamp) as date,
+                    jac.response_content,
+                    COUNT(*) as checks_count
+                FROM
+                    jilo_agent_checks jac
+                JOIN
+                    jilo_agents ja ON jac.agent_id = ja.id
+                JOIN
+                    jilo_agent_types jat ON ja.agent_type_id = jat.id
+                WHERE
+                    ja.platform_id = :platform_id
+                    AND jat.description = :agent_type
+                    AND jac.status_code = 200
+                    AND DATE(jac.timestamp) BETWEEN :from_time AND :until_time
+                GROUP BY
+                    DATE(jac.timestamp)
+                ORDER BY
+                    DATE(jac.timestamp)';
+
+        $query = $this->db->prepare($sql);
+        $query->execute([
+            ':platform_id' => $platform_id,
+            ':agent_type' => $agent_type,
+            ':from_time' => $from_time,
+            ':until_time' => $until_time
+        ]);
+
+        $results = $query->fetchAll(PDO::FETCH_ASSOC);
+
+        $data = [];
+        foreach ($results as $row) {
+            $json_data = json_decode($row['response_content'], true);
+            if (json_last_error() === JSON_ERROR_NONE) {
+                $api_data = [];
+                if ($agent_type === 'jvb') {
+                    $api_data = $json_data['jvb_api_data'] ?? [];
+                } elseif ($agent_type === 'jicofo') {
+                    $api_data = $json_data['jicofo_api_data'] ?? [];
+                } elseif ($agent_type === 'jigasi') {
+                    $api_data = $json_data['jigasi_api_data'] ?? [];
+                } elseif ($agent_type === 'prosody') {
+                    $api_data = $json_data['prosody_api_data'] ?? [];
+                } elseif ($agent_type === 'nginx') {
+                    $api_data = $json_data['nginx_api_data'] ?? [];
+                }
+
+                $value = $this->getNestedValue($api_data, $metric_type);
+                if ($value !== null) {
+                    $data[] = [
+                        'date' => $row['date'],
+                        'value' => $value
+                    ];
+                }
+            }
+        }
+
+        return $data;
+    }
 }
 
 ?>

app/helpers/graph.php

@@ -5,40 +5,30 @@
 
 <script>
 var ctx = document.getElementById('graph_<?= $data['graph_name'] ?>').getContext('2d');
-var chartData0 = <?php echo json_encode($data['data0']); ?>;
-var chartData1 = <?php echo json_encode($data['data1']); ?>;
 var timeRangeName = '';
 
-var labels = chartData0.map(function(item) {
+// Prepare datasets
-    return item.date;
+var datasets = [];
-});
+<?php foreach ($data['datasets'] as $dataset): ?>
-var values0 = chartData0.map(function(item) {
+    var chartData = <?php echo json_encode($dataset['data']); ?>;
-    return item.value;
+    datasets.push({
-});
+        label: '<?= $dataset['label'] ?>',
-var values1 = chartData1.map(function(item) {
+        data: chartData.map(function(item) {
-    return item.value;
+            return {
-});
+                x: item.date,
+                y: item.value
+            };
+        }),
+        borderColor: '<?= $dataset['color'] ?>',
+        borderWidth: 1,
+        fill: false
+    });
+<?php endforeach; ?>
 
 var graph_<?= $data['graph_name'] ?> = new Chart(ctx, {
     type: 'line',
     data: {
-        labels: labels,
+        datasets: datasets
-        datasets: [
-            {
-                label: '<?= $data['graph_data0_label'] ?? '' ?>',
-                data: values0,
-                borderColor: 'rgba(75, 192, 192, 1)',
-                borderWidth: 1,
-                fill: false
-            },
-            {
-                label: '<?= $data['graph_data1_label'] ?? '' ?>',
-                data: values1,
-                borderColor: 'rgba(255, 99, 132, 1)',
-                borderWidth: 1,
-                fill: false
-            }
-        ]
     },
     options: {
         layout: {
@@ -64,7 +54,6 @@ var graph_<?= $data['graph_name'] ?> = new Chart(ctx, {
                     mode: 'x'
                 },
                 zoom: {
-//                    enabled: true,
                     mode: 'x',
                     drag: {
                         enabled: true,  // Enable drag to select range
@@ -99,29 +88,25 @@ var graph_<?= $data['graph_name'] ?> = new Chart(ctx, {
     }
 });
 
-// Store the graphs in an array
+// Store graph instance and title for later reference
 graphs.push({
     graph: graph_<?= $data['graph_name'] ?>,
-    label: document.getElementById('current-period-<?= $data['graph_name'] ?>')
+    label: '<?= $data['graph_title'] ?>'
 });
 
-// Update the time range label
+// Function to update the period label
-function updatePeriodLabel(chart, labelElement) {
+function updatePeriodLabel(chart, label) {
-    var startDate = chart.scales.x.min;
+    var startDate = new Date(chart.scales.x.min);
-    var endDate = chart.scales.x.max;
+    var endDate = new Date(chart.scales.x.max);
-    if (timeRangeName == 'today') {
+    var periodLabel = document.getElementById('current-period-<?= $data['graph_name'] ?>');
-        labelElement.innerHTML = 'Currently displaying: ' + timeRangeName + ' (' + new Date(startDate).toLocaleDateString() + ')';
+
+    if (timeRangeName) {
+        periodLabel.textContent = label + ' (' + timeRangeName + ')';
     } else {
-        labelElement.innerHTML = 'Currently displaying: ' + timeRangeName + ' (' + new Date(startDate).toLocaleDateString() + ' - ' + new Date(endDate).toLocaleDateString() + ')';
+        periodLabel.textContent = label + ' (from ' + startDate.toLocaleDateString() + ' to ' + endDate.toLocaleDateString() + ')';
     }
 }
 
-// Attach the update function to the 'zoom' event
+// Initial label update
-graph_<?= $data['graph_name'] ?>.options.plugins.zoom.onZoom = function({ chart }) {
+updatePeriodLabel(graph_<?= $data['graph_name'] ?>, '<?= $data['graph_title'] ?>');
-    updatePeriodLabel(chart, document.getElementById('current-period-<?= $data['graph_name'] ?>'));
-};
-
-// Update the label initially when the chart is rendered
-updatePeriodLabel(graph_<?= $data['graph_name'] ?>, document.getElementById('current-period-<?= $data['graph_name'] ?>'));
-
 </script>

app/pages/data.php

@@ -9,56 +9,96 @@ $agent = $_REQUEST['agent'] ?? '';
 
 require '../app/classes/config.php';
 require '../app/classes/agent.php';
+require '../app/classes/conference.php';
 
 $configObject = new Config();
 $agentObject = new Agent($dbWeb);
 
-switch ($item) {
+// connect to Jilo database
+$response = connectDB($config, 'jilo', $platformDetails[0]['jilo_database'], $platform_id);
+
+// if DB connection has error, display it and stop here
+if ($response['db'] === null) {
+    $error = $response['error'];
+    include '../app/templates/block-message.php';
+
+// otherwise if DB connection is OK, go on
+} else {
+    $db = $response['db'];
+
+    $conferenceObject = new Conference($db);
+
+    switch ($item) {
 
         case 'graphs':
-        // FIXME example data
+            // Connect to Jilo database for log data
-        $one = date('Y-m-d',strtotime("-5 days"));
+            $jilo_response = connectDB($config, 'jilo', $platformDetails[0]['jilo_database'], $platform_id);
-        $two = date('Y-m-d',strtotime("-4 days"));
+            if ($jilo_response['db'] === null) {
-        $three = date('Y-m-d',strtotime("-2 days"));
+                $error = $jilo_response['error'];
-        $four = date('Y-m-d',strtotime("-1 days"));
+                include '../app/templates/block-message.php';
+                break;
+            }
+            $jilo_db = $jilo_response['db'];
 
-        $graph[0]['data0'] = [
+            // Get date range for the last 7 days
-            ['date' => $one, 'value' => 10],
+            $from_time = date('Y-m-d', strtotime('-7 days'));
-            ['date' => $two, 'value' => 20],
+            $until_time = date('Y-m-d');
-            ['date' => $three, 'value' => 15],
+
-            ['date' => $four, 'value' => 25],
+            // Define graphs to show
+            $graphs = [
+                [
+                    'graph_name' => 'conferences',
+                    'graph_title' => 'Conferences in "' . htmlspecialchars($platformDetails[0]['name']) . '" over time',
+                    'datasets' => []
+                ],
+                [
+                    'graph_name' => 'participants',
+                    'graph_title' => 'Participants in "' . htmlspecialchars($platformDetails[0]['name']) . '" over time',
+                    'datasets' => []
+                ]
             ];
 
-        $graph[0]['data1'] = [
+            // Get Jitsi API data
-            ['date' => $one, 'value' => 12],
+            $conferences_api = $agentObject->getHistoricalData(
-            ['date' => $two, 'value' => 23],
+                $platform_id, 
-            ['date' => $three, 'value' => 11],
+                'jicofo',
-            ['date' => $four, 'value' => 27],
+                'conferences',
+                $from_time,
+                $until_time
+            );
+            $graphs[0]['datasets'][] = [
+                'data' => $conferences_api,
+                'label' => 'Conferences from Jitsi API',
+                'color' => 'rgba(75, 192, 192, 1)'
             ];
 
-        $graph[0]['graph_name'] = 'conferences';
+            // Get conference data from logs
-        $graph[0]['graph_title'] = 'Conferences in "' . htmlspecialchars($platformDetails[0]['name']) . '" over time';
+            $conferences_logs = $conferenceObject->conferenceNumber(
-        $graph[0]['graph_data0_label'] = 'Conferences from Jitsi logs (Jilo)';
+                $from_time,
-        $graph[0]['graph_data1_label'] = 'Conferences from Jitsi API (Jilo Agents)';
+                $until_time
-
+            );
-        $graph[1]['data0'] = [
+            $graphs[0]['datasets'][] = [
-            ['date' => $one, 'value' => 20],
+                'data' => $conferences_logs,
-            ['date' => $two, 'value' => 30],
+                'label' => 'Conferences from Logs',
-            ['date' => $three, 'value' => 15],
+                'color' => 'rgba(255, 99, 132, 1)'
-            ['date' => $four, 'value' => 55],
             ];
 
-        $graph[1]['data1'] = [
+            // Get participants data
-            ['date' => $one, 'value' => 22],
+            $participants_api = $agentObject->getHistoricalData(
-            ['date' => $two, 'value' => 33],
+                $platform_id, 
-            ['date' => $three, 'value' => 11],
+                'jicofo',
-            ['date' => $four, 'value' => 57],
+                'participants',
+                $from_time,
+                $until_time
+            );
+            $graphs[1]['datasets'][] = [
+                'data' => $participants_api,
+                'label' => 'Participants from Jitsi API',
+                'color' => 'rgba(75, 192, 192, 1)'
             ];
 
-        $graph[1]['graph_name'] = 'participants';
+            // Prepare data for template
-        $graph[1]['graph_title'] = 'Participants in "' . htmlspecialchars($platformDetails[0]['name']) . '" over time';
+            $graph = $graphs;
-        $graph[1]['graph_data0_label'] = 'Participants from Jitsi logs (Jilo)';
-        $graph[1]['graph_data1_label'] = 'Participants from Jitsi API (Jilo Agents)';
 
             include '../app/templates/graphs-combined.php';
             break;
@@ -157,6 +197,8 @@ switch ($item) {
             break;
 
         default:
+    }
+
 }
 
 ?>