67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import { Alert, List, Text } from '@mantine/core'
|
|
import { IconAlertTriangle } from '@tabler/icons-react'
|
|
import { Maintenances, Monitor } from '@/types/config'
|
|
import { pageConfig } from '@/uptime.config'
|
|
|
|
export default function MaintenanceAlert({
|
|
maintenance,
|
|
groupedMonitor,
|
|
}: {
|
|
maintenance: Omit<Maintenances, 'monitors'> & { monitors: Monitor[] | undefined }
|
|
groupedMonitor: boolean
|
|
}) {
|
|
return (
|
|
<Alert
|
|
icon={<IconAlertTriangle />}
|
|
title={maintenance.title}
|
|
color={maintenance.color || 'primary'}
|
|
mt="md"
|
|
ml="md"
|
|
mr="md"
|
|
withCloseButton={false}
|
|
style={{ maxWidth: groupedMonitor ? '897px' : '865px', position: 'relative' }}
|
|
>
|
|
{/* Date range in top right */}
|
|
{(maintenance.start || maintenance.end) && (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: 10,
|
|
right: 10,
|
|
fontSize: '0.85rem',
|
|
textAlign: 'right',
|
|
padding: '2px 8px',
|
|
borderRadius: 6,
|
|
}}
|
|
>
|
|
{maintenance.start && (
|
|
<>
|
|
<b>From:</b> {maintenance.start.toLocaleString()}
|
|
<br />
|
|
</>
|
|
)}
|
|
{maintenance.end && (
|
|
<>
|
|
<b>To:</b> {maintenance.end.toLocaleString()}
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{maintenance.body && <Text mt="xs">{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>
|
|
)
|
|
}
|