konnosDashboard
IncidentAdmonition.tsx102 lines · main
1import { AnimatePresence, motion } from 'framer-motion'
2import { ExternalLink } from 'lucide-react'
3import Link from 'next/link'
4import { Button } from 'ui'
5import { Admonition } from 'ui-patterns/admonition'
6
7import { useIncidentStatusQuery } from '@/data/platform/incident-status-query'
8import { processIncidentData } from '@/data/platform/incident-status-utils'
9
10interface IncidentAdmonitionProps {
11 isActive: boolean
12 className?: string
13}
14
15const STATUS_DESCRIPTION_SIGN_OFF = 'Follow the status page for updates.'
16
17const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
18
19const getStatusDescription = (
20 status: string,
21 hasMultipleIncidents: boolean,
22 allSameStatus: boolean
23): string => {
24 const isPlural = hasMultipleIncidents
25 const issueTerm = isPlural ? 'these issues' : 'this issue'
26
27 switch (status) {
28 case 'investigating':
29 if (hasMultipleIncidents && !allSameStatus) {
30 return `We are aware of multiple ongoing issues and are investigating. ${STATUS_DESCRIPTION_SIGN_OFF}`
31 }
32 return `We are investigating ${issueTerm}. ${STATUS_DESCRIPTION_SIGN_OFF}`
33
34 case 'identified':
35 if (hasMultipleIncidents && !allSameStatus) {
36 return `We have identified the cause of some of ${issueTerm} and are working on fixes. ${STATUS_DESCRIPTION_SIGN_OFF}`
37 }
38 return `We have identified the cause of ${issueTerm} and are working on a fix. ${STATUS_DESCRIPTION_SIGN_OFF}`
39
40 case 'monitoring':
41 if (hasMultipleIncidents && !allSameStatus) {
42 return `Fixes have been deployed for some of ${issueTerm} and we are monitoring the results. ${STATUS_DESCRIPTION_SIGN_OFF}`
43 }
44 return `A fix has been deployed and we are monitoring the results. ${STATUS_DESCRIPTION_SIGN_OFF}`
45
46 case 'resolved':
47 if (hasMultipleIncidents && !allSameStatus) {
48 return `Some of ${issueTerm} have been resolved, but others may still be ongoing. ${STATUS_DESCRIPTION_SIGN_OFF}`
49 }
50 return `${capitalizeFirstLetter(issueTerm)} ${isPlural ? 'have' : 'has'} been resolved but may take some time to fully recover. ${STATUS_DESCRIPTION_SIGN_OFF}`
51
52 default:
53 return `We are investigating ${issueTerm}. ${STATUS_DESCRIPTION_SIGN_OFF}`
54 }
55}
56
57export function IncidentAdmonition({ isActive, className }: IncidentAdmonitionProps) {
58 const { data: allStatusPageEvents, isLoading, isError } = useIncidentStatusQuery()
59 const { incidents = [] } = allStatusPageEvents ?? {}
60
61 // Don't render anything while loading, on error, or if no incidents
62 if (isLoading || isError || !incidents || incidents.length === 0) {
63 return null
64 }
65
66 const { hasMultipleIncidents, mostCriticalIncident, overallStatus, allSameStatus } =
67 processIncidentData(incidents)
68
69 // Show most recent incident name + count if multiple incidents
70 const statusTitle =
71 (mostCriticalIncident?.name ?? '') +
72 (hasMultipleIncidents
73 ? ` and ${incidents.length - 1} other issue${incidents.length > 2 ? 's' : ''}`
74 : '')
75
76 return (
77 <AnimatePresence>
78 {isActive && (
79 <motion.aside
80 initial={{ height: 0, opacity: 0 }}
81 animate={{ height: 'auto', opacity: 1 }}
82 exit={{ height: 0, opacity: 0 }}
83 >
84 <Admonition
85 type="warning"
86 layout="horizontal"
87 className={className}
88 title={statusTitle}
89 description={getStatusDescription(overallStatus, hasMultipleIncidents, allSameStatus)}
90 actions={
91 <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
92 <Link href="https://status.supabase.com/" target="_blank" rel="noreferrer">
93 Status page
94 </Link>
95 </Button>
96 }
97 />
98 </motion.aside>
99 )}
100 </AnimatePresence>
101 )
102}