Update maintenance logic and overrides

layeredy · Sep 18, 2024 · 5f2b7db · 5f2b7db
1 parent bafa084
commit 5f2b7db
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 55 deletions.
diff --git a/data.json b/data.json
@@ -1,18 +1,19 @@
 {
-  "announcement": {
-    "text": "This is not supported as of 2.4.5, kept in for backwards compatibility"
-  },
+  "Whitelabel": false,
+  "RandomOperationalMessage": true,
+  "OverallStatus": "NoOverride",
   "maintenanceAlerts": [
     {
-      "date": "2021-01-16T12:00:00Z",
-      "message": "",
-      "title": "Upgrades to US 1 on July 31st"
+      "start": "2024-09-17T12:00:00Z",
+      "end": "2024-09-18T12:00:00Z",
+      "message": "Demo maintenance (hide by disabling maintenanceAlerts in data.json!)",
+      "title": "Demo"
     }
   ],
   "sections": {
-    "announcementBar": false,
     "maintenanceAlerts": true,
-    "statusUpdates": true
+    "statusUpdates": true,
+    "announcementBar": false
   },
   "services": {
     "Example 1": {
@@ -27,7 +28,7 @@
     },
     "Example 3": {
       "Again another example service 1": "Operational",
-      "Again another example service 2": "Degraded"
+      "Again another example service 2": "Operational"
     }
   },
   "statusUpdates": [
@@ -38,4 +39,4 @@
       "title": "This is a demo site!"
     }
   ]
-}
+}
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
-<!-- Status page developed by UptimeMatrix, a venture by Layeredy LLC (Version 2.4.6). | github.com/layeredy/uptimematrix-statuspage -->
- <!DOCTYPE html>
+<!-- Status page developed by UptimeMatrix, a venture by Layeredy LLC (Version 2.4.7). | github.com/layeredy/uptimematrix-statuspage -->
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -27,10 +27,10 @@ <h1><a href="https://uptimematrix.com"><img src="https://cdn.layeredy.com/uptime
             </button>
         </div>
         <div class="copyright">
-            Status page by <a href="https://uptimematrix.com" target="_blank"><strong>UptimeMatrix</strong> <!-- <<-- You may remove this but please don't! Support open source projects!-->
+            Status page by <a href="https://uptimematrix.com" target="_blank"><strong>UptimeMatrix</strong> <!-- You can disable this in data.json (but please don't! Support open source projects!) -->
         </div>
     </div>
     <script src="script.js"></script>
 </body>
 </html>
-<!-- Status page developed by UptimeMatrix, a venture by Layeredy LLC (Version 2.4.6). | github.com/layeredy/uptimematrix-statuspage  -->
+<!-- Status page developed by UptimeMatrix, a venture by Layeredy LLC (Version 2.4.7). | github.com/layeredy/uptimematrix-statuspage  -->
diff --git a/script.js b/script.js
@@ -28,11 +28,13 @@ document.addEventListener('DOMContentLoaded', () => {
             return response.json();
         })
         .then(data => {
-            if (data.sections.announcementBar) updateAnnouncementBar(data.announcement);
-            updateOverallStatus(data.services);
+            if (data.sections && data.sections.announcementBar) updateAnnouncementBar(data.announcement);
+            updateOverallStatus(data.services, data);
             updateServices(data.services);
-            if (data.sections.maintenanceAlerts) updateMaintenanceAlerts(data.maintenanceAlerts);
-            if (data.sections.statusUpdates) updateStatusUpdates(data.statusUpdates);
+            if (data.sections && data.sections.maintenanceAlerts) updateMaintenanceAlerts(data.maintenanceAlerts);
+            if (data.sections && data.sections.statusUpdates) updateStatusUpdates(data.statusUpdates);
+
+            handleWhitelabel(data.Whitelabel);
         })
         .catch(error => {
             console.error('UptimeMatrix error:', error.message);
@@ -65,7 +67,6 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
-    // Initialize the correct icon on page load
     updateThemeIcon();
 });
 
@@ -90,25 +91,58 @@ function updateAnnouncementBar(announcement) {
     }
 }
 
-function updateOverallStatus(services) {
+function updateOverallStatus(services, data) {
     const overallStatusElement = document.getElementById('overall-status');
-    const allStatuses = Object.values(services).flatMap(group => Object.values(group));
-    let overallStatus = 'Operational';
 
-    if (allStatuses.some(status => status === 'Issue')) {
-        overallStatus = 'Issue';
-    } else if (allStatuses.some(status => status === 'Degraded')) {
-        overallStatus = 'Degraded';
+    let isMaintenanceOngoing = false;
+    if (data.maintenanceAlerts && data.maintenanceAlerts.length > 0) {
+        const now = new Date();
+        data.maintenanceAlerts.forEach(alert => {
+            if (alert.start && alert.end) {
+                const startTime = new Date(alert.start);
+                const endTime = new Date(alert.end);
+                if (now >= startTime && now <= endTime) {
+                    isMaintenanceOngoing = true;
+                }
+            }
+        });
+    }
+
+    if (isMaintenanceOngoing) {
+        overallStatusElement.innerHTML = `
+            <div class="status-icon">//</div>
+            Undergoing maintenance
+        `;
+        overallStatusElement.className = 'status-maintenance';
+        return;
+    }
+
+    let overallStatus = 'Operational';
+    if (data.OverallStatus && data.OverallStatus !== 'NoOverride') {
+        overallStatus = data.OverallStatus;
+    } else {
+        const allStatuses = Object.values(services).flatMap(group => Object.values(group));
+        if (allStatuses.some(status => status === 'Issue')) {
+            overallStatus = 'Issue';
+        } else if (allStatuses.some(status => status === 'Degraded')) {
+            overallStatus = 'Degraded';
+        }
     }
 
     let statusText = 'All systems operational';
-    let statusIcon = '✓'; // Checkmark for operational status
+    let statusIcon = '✓';
     if (overallStatus === 'Degraded') {
         statusText = 'Some systems may be experiencing issues';
-        statusIcon = '!'; // Exclamation mark for degraded status
+        statusIcon = '!';
     } else if (overallStatus === 'Issue') {
         statusText = 'Major outage detected';
         statusIcon = '✕'; // Cross mark for issue status
+    } else if (overallStatus === 'Operational') {
+        statusText = 'All systems operational';
+        statusIcon = '✓';
+    } else {
+        statusText = overallStatus;
+        statusIcon = '?'; 
     }
 
     overallStatusElement.innerHTML = `
@@ -210,10 +244,19 @@ function createAlertElement(item, className) {
     title.textContent = item.title;
     element.appendChild(title);
 
-    const date = document.createElement('p');
-    date.className = 'date';
-    date.textContent = new Date(item.date).toLocaleString();
-    element.appendChild(date);
+    if (item.start && item.end) {
+        const date = document.createElement('p');
+        date.className = 'date';
+        const startTime = new Date(item.start).toLocaleString();
+        const endTime = new Date(item.end).toLocaleString();
+        date.textContent = `From ${startTime} to ${endTime}`;
+        element.appendChild(date);
+    } else if (item.date) {
+        const date = document.createElement('p');
+        date.className = 'date';
+        date.textContent = new Date(item.date).toLocaleString();
+        element.appendChild(date);
+    }
 
     const message = document.createElement('p');
     message.textContent = item.message;
@@ -232,3 +275,10 @@ function calculateGroupStatus(serviceGroup) {
         return 'Degraded';
     }
 }
+
+function handleWhitelabel(isWhitelabel) {
+    const copyrightDiv = document.querySelector('.copyright');
+    if (copyrightDiv) {
+        copyrightDiv.style.display = isWhitelabel ? 'none' : 'block';
+    }
+}
diff --git a/styles.css b/styles.css
@@ -63,11 +63,14 @@ h1 {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-#maintenance-alerts, #status-updates, #services {
+#maintenance-alerts,
+#status-updates,
+#services {
   margin-bottom: var(--spacing-md);
 }
 
-.alert, .update {
+.alert,
+.update {
   background-color: var(--card-bg);
   border-radius: var(--border-radius);
   padding: var(--spacing-md);
@@ -76,7 +79,8 @@ h1 {
   transition: var(--transition);
 }
 
-.alert:hover, .update:hover {
+.alert:hover,
+.update:hover {
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
   transform: translateY(-2px);
 }
@@ -89,7 +93,8 @@ h1 {
   border-left: 4px solid var(--status-update-color, var(--success-color));
 }
 
-.alert h3, .update h3 {
+.alert h3,
+.update h3 {
   margin-top: 0;
   font-size: 1.2em;
 }
@@ -225,28 +230,28 @@ h1 {
 }
 
 #theme-toggle-container {
-    display: flex;
-    justify-content: center;
-    margin-bottom: var(--spacing-md);
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--spacing-md);
 }
 
 #theme-toggle {
-    background-color: rgba(255, 255, 255, 0.1);
-    color: var(--text-color);
-    border: none;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    font-size: 18px;
-    cursor: pointer;
-    transition: var(--transition);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  background-color: rgba(255, 255, 255, 0.1);
+  color: var(--text-color);
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: var(--transition);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 #theme-toggle:hover {
-    background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 .copyright {
@@ -284,6 +289,8 @@ body.light-mode {
   --dropdown-bg: #ffffff;
   --card-bg: #ffffff;
   --separator-color: rgba(0, 0, 0, 0.1);
+  --overall-status-bg: var(--card-bg);
+  --overall-status-text: var(--text-color);
 }
 
 body.light-mode #overall-status {
@@ -313,11 +320,11 @@ body.light-mode .date {
 }
 
 body.light-mode #theme-toggle {
-    background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 body.light-mode #theme-toggle:hover {
-    background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
 @media (max-width: 600px) {
@@ -342,4 +349,4 @@ body.light-mode #theme-toggle:hover {
     height: 36px;
     font-size: 16px;
   }
-}
+}