update

2025-11-18 20:35:58 -03:00
parent 93eddfd665
commit 0af2fd8dec
2 changed files with 101 additions and 33 deletions
--- a/index.html
+++ b/index.html
@@ -3,8 +3,13 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Service Outage Tracker</title>
+    <title>CSV-Powered Service Outage Tracker</title>
    <style>
+        /*
+        * ----------------------------------------
+        * CSS STYLING (Same as before)
+        * ----------------------------------------
+        */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
@@ -68,47 +73,107 @@
        .time-display {
            font-size: 2em;
            font-weight: bold;
-            color: #28a745;
-        }
-
-        .service-card.outage .time-display {
-            color: #dc3545;
+            color: #28a745; /* Green for "good" status */
        }
    </style>
 </head>
 <body>

    <header>
-        <h1>⏰ Uptime Since Last Outage Tracker</h1>
-        <p>Tracking the time since the last recorded incident for "critical" services.</p>
+        <h1>⏰ Uptime Since Last Outage Tracker (CSV Powered)</h1>
+        <p>Data fetched dynamically from <code>outages.csv</code>.</p>
    </header>

    <main id="outage-tracker">
-        <p id="loading-message">Loading data and starting tracker...</p>
+        <p id="loading-message">Fetching data from outages.csv...</p>
+        <p id="error-message" style="color: red; display: none;"></p>
    </main>

    <script>
-        const services = [
-          {
-            name: "GitHub",
-            lastOutageTimestamp: Date.now() - (2 * 24 * 60 * 60 * 1000), 
-            status: "online"
-          },
-          {
-            name: "Cloudflare",
-            lastOutageTimestamp: Date.now() - (5 * 60 * 60 * 1000), 
-            status: "online"
-          },
-          {
-            name: "Google Cloud",
-            lastOutageTimestamp: Date.now() - (30 * 24 * 60 * 60 * 1000), 
-            status: "online"
-          },
-        ];
+        /*
+        * ----------------------------------------
+        * JAVASCRIPT LOGIC
+        * ----------------------------------------
+        */

+        const CSV_URL = './outages.csv'; // Relative path to your CSV file
+        let services = []; // This will hold the parsed service data
+
+        /**
+         * Simple CSV parser for the "service,time" format.
+         * Time is expected to be in milliseconds since epoch.
+         * @param {string} csvText - The raw content of the CSV file.
+         * @returns {Array} - Array of service objects.
+         */
+        function parseCSV(csvText) {
+            const lines = csvText.trim().split('\n');
+            // Skip the header line (service,time)
+            lines.shift(); 
+            
+            const parsedData = lines.map(line => {
+                // Use a simple split by comma
+                const [serviceName, timestampStr] = line.split(',');
+                
+                // Ensure the service name is cleaned up and a valid timestamp exists
+                if (serviceName && timestampStr && !isNaN(Number(timestampStr))) {
+                    return {
+                        name: serviceName.trim(),
+                        // Convert the string to a number (timestamp in milliseconds)
+                        lastOutageTimestamp: Number(timestampStr.trim()), 
+                        status: "online" // Default status
+                    };
+                }
+                return null;
+            }).filter(item => item !== null); // Remove any null (invalid) entries
+
+            return parsedData;
+        }
+
+
+        /**
+         * Fetches the CSV file, parses it, and populates the global 'services' array.
+         */
+        async function fetchAndParseData() {
+            const errorMessage = document.getElementById('error-message');
+            errorMessage.style.display = 'none';
+
+            try {
+                const response = await fetch(CSV_URL);
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                
+                const csvText = await response.text();
+                
+                services = parseCSV(csvText);
+                
+                if (services.length === 0) {
+                    throw new Error("CSV file loaded, but no valid service data was found.");
+                }
+                
+                // Start the tracker display once data is ready
+                runTracker(); 
+                
+                // Set the interval for updates
+                setInterval(runTracker, 1000); 
+
+            } catch (error) {
+                // Display the error to the user
+                const loading = document.getElementById('loading-message');
+                if (loading) loading.style.display = 'none';
+
+                errorMessage.textContent = `Error fetching or parsing data: ${error.message}. Check if ${CSV_URL} exists and is correctly formatted.`;
+                errorMessage.style.display = 'block';
+                console.error("Tracker initialization failed:", error);
+            }
+        }
+        
+        // --- Display Functions (Same as before) ---
+        
        function getTimeSinceOutage(timestamp) {
-            const now = new Date().getTime();
-            const difference = now - timestamp;
+            const now = new Date().getTime(); 
+            const difference = now - timestamp; 

            const totalSeconds = Math.floor(difference / 1000);

@@ -150,16 +215,15 @@
        }

        function runTracker() {
+            // Remove loading message after the first successful run
            const loading = document.getElementById('loading-message');
-            if (loading) {
-                loading.remove();
-            }
+            if (loading) loading.remove();

            services.forEach(updateServiceDisplay);
        }

-        runTracker();
-        setInterval(runTracker, 1000);
+        // Start the process: Fetch the data, then start the tracker
+        fetchAndParseData();

    </script>
 </body>
--- a/outages.csv
+++ b/outages.csv
@@ -0,0 +1,4 @@
+service,time
+GitHub,1731722400000
+Cloudflare,1731636000000
+AWS,1731550000000