feat: hash linking to individual incidents

components/MaintenanceAlert.tsx

@@ -5,14 +5,34 @@ import { MaintenanceConfig, MonitorTarget } from '@/types/config'
 export default function MaintenanceAlert({
   maintenance,
   style,
+  hash,
 }: {
   maintenance: Omit<MaintenanceConfig, 'monitors'> & { monitors?: MonitorTarget[] }
   style?: React.CSSProperties
+  hash?: string
 }) {
+  const titleStyle: React.CSSProperties = {}
+  if (hash) {
+    titleStyle['textDecoration'] = 'underline'
+    titleStyle['cursor'] = 'pointer'
+  }
+
+  function updateHash() {
+    if (!hash) return
+    window.location.hash = hash
+  }
+
   return (
+    <div id={hash}>
       <Alert
         icon={<IconAlertTriangle />}
-      title={maintenance.title || 'Scheduled Maintenance'}
+        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 }}
@@ -49,5 +69,6 @@ export default function MaintenanceAlert({
           </>
         )}
       </Alert>
+    </div>
   )
 }

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>