From 1804e19a98c2f3a66f3ee5ffd36eb1a7ec5149af Mon Sep 17 00:00:00 2001
From: Bennet Gallein <me@bennetgallein.de>
Date: Sat, 14 Jun 2025 11:10:09 +0200
Subject: [PATCH] feat: hash linking to individual incidents

---
 components/MaintenanceAlert.tsx | 99 ++++++++++++++++++++-------------
 pages/incidents.tsx             | 22 +++++++-
 2 files changed, 80 insertions(+), 41 deletions(-)

diff --git a/components/MaintenanceAlert.tsx b/components/MaintenanceAlert.tsx
index 40f9d20..14c7b5d 100644
--- a/components/MaintenanceAlert.tsx
+++ b/components/MaintenanceAlert.tsx
@@ -5,49 +5,70 @@ import { MaintenanceConfig, MonitorTarget } from '@/types/config'
 export default function MaintenanceAlert({
   maintenance,
   style,
+  hash,
 }: {
   maintenance: Omit<MaintenanceConfig, 'monitors'> & { monitors?: MonitorTarget[] }
   style?: React.CSSProperties
+  hash?: string
 }) {
-  return (
-    <Alert
-      icon={<IconAlertTriangle />}
-      title={maintenance.title || 'Scheduled Maintenance'}
-      color={maintenance.color || 'yellow'}
-      withCloseButton={false}
-      style={{ position: 'relative', margin: '16px auto 0 auto', ...style }}
-    >
-      {/* Date range in top right */}
-      <div
-        style={{
-          position: 'absolute',
-          top: 10,
-          right: 10,
-          fontSize: '0.85rem',
-          textAlign: 'right',
-          padding: '2px 8px',
-          borderRadius: 6,
-        }}
-      >
-        <b>From:</b> {new Date(maintenance.start).toLocaleString()}
-        <br />
-        <b>To:</b>{' '}
-        {maintenance.end ? new Date(maintenance.end).toLocaleString() : 'Until further notice'}
-      </div>
+  const titleStyle: React.CSSProperties = {}
+  if (hash) {
+    titleStyle['textDecoration'] = 'underline'
+    titleStyle['cursor'] = 'pointer'
+  }
 
-      <Text>{maintenance.body}</Text>
-      {maintenance.monitors && maintenance.monitors.length > 0 && (
-        <>
-          <Text mt="xs">
-            <b>Affected components:</b>
-          </Text>
-          <List size="sm" withPadding>
-            {maintenance.monitors.map((comp, compIdx) => (
-              <List.Item key={compIdx}>{comp.name}</List.Item>
-            ))}
-          </List>
-        </>
-      )}
-    </Alert>
+  function updateHash() {
+    if (!hash) return
+    window.location.hash = hash
+  }
+
+  return (
+    <div id={hash}>
+      <Alert
+        icon={<IconAlertTriangle />}
+        title={
+          (
+            <span style={titleStyle} onClick={updateHash}>
+              {maintenance.title}
+            </span>
+          ) || 'Scheduled Maintenance'
+        }
+        color={maintenance.color || 'yellow'}
+        withCloseButton={false}
+        style={{ position: 'relative', margin: '16px auto 0 auto', ...style }}
+      >
+        {/* Date range in top right */}
+        <div
+          style={{
+            position: 'absolute',
+            top: 10,
+            right: 10,
+            fontSize: '0.85rem',
+            textAlign: 'right',
+            padding: '2px 8px',
+            borderRadius: 6,
+          }}
+        >
+          <b>From:</b> {new Date(maintenance.start).toLocaleString()}
+          <br />
+          <b>To:</b>{' '}
+          {maintenance.end ? new Date(maintenance.end).toLocaleString() : 'Until further notice'}
+        </div>
+
+        <Text>{maintenance.body}</Text>
+        {maintenance.monitors && maintenance.monitors.length > 0 && (
+          <>
+            <Text mt="xs">
+              <b>Affected components:</b>
+            </Text>
+            <List size="sm" withPadding>
+              {maintenance.monitors.map((comp, compIdx) => (
+                <List.Item key={compIdx}>{comp.name}</List.Item>
+              ))}
+            </List>
+          </>
+        )}
+      </Alert>
+    </div>
   )
 }
diff --git a/pages/incidents.tsx b/pages/incidents.tsx
index 51904c4..4b0ec0f 100644
--- a/pages/incidents.tsx
+++ b/pages/incidents.tsx
@@ -23,7 +23,17 @@ function getSelectedMonth() {
     const now = new Date()
     return now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0')
   }
-  return hash
+  return hash.split('-').splice(0, 2).join('-')
+}
+
+function getIncidentHash() {
+  const hash = window.location.hash.replace('#', '')
+  const splitted = hash?.split('-')
+  if (hash && splitted.length >= 3) {
+    return splitted[2]
+  }
+
+  return null
 }
 
 function filterIncidentsByMonth(
@@ -107,7 +117,15 @@ export default function IncidentsPage() {
                 <NoIncidentsAlert />
               ) : (
                 monitorFilteredIncidents.map((incident, i) => (
-                  <MaintenanceAlert key={i} maintenance={incident} />
+                  <MaintenanceAlert
+                    key={i}
+                    hash={[
+                      new Date(incident.start).getFullYear(),
+                      String(new Date(incident.start).getMonth() + 1).padStart(2, '0'),
+                      monitorFilteredIncidents.length - i,
+                    ].join('-')}
+                    maintenance={incident}
+                  />
                 ))
               )}
             </Box>