Michal
/
UptimeFlare
mirror of https://github.com/lyc8503/UptimeFlare.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add back a different collapse for upcoming events

pull/142/head
lyc8503 2025-09-23 00:00:38 +08:00
parent ebd665cf46
commit 697bda487e
2 changed files with 41 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/MaintenanceAlert.tsx
View File

@ -26,12 +26,12 @@ export default function MaintenanceAlert({
fontWeight: 700,
}}
>
{upcoming
? `Upcoming Maintenance: ${maintenance.title || 'Scheduled Maintenance'}`
: maintenance.title || 'Scheduled Maintenance'}
{(upcoming ? '[Upcoming] ' : '') + (maintenance.title || 'Scheduled Maintenance')}
</span>
}
color={upcoming ? (pageConfig.maintenances?.upcomingColor ?? 'gray') : maintenance.color || 'yellow'}
color={
upcoming ? pageConfig.maintenances?.upcomingColor ?? 'gray' : maintenance.color || 'yellow'
}
withCloseButton={false}
style={{ margin: '16px auto', ...style }}
>
@ -56,9 +56,7 @@ export default function MaintenanceAlert({
<b>{upcoming ? 'Scheduled for' : 'From'}:</b> {new Date(maintenance.start).toLocaleString()}
<br />
<b>{upcoming ? 'Expected end' : 'To'}:</b>{' '}
{maintenance.end
? new Date(maintenance.end).toLocaleString()
: 'Until further notice'}
{maintenance.end ? new Date(maintenance.end).toLocaleString() : 'Until further notice'}
</div>
<Text style={{ paddingTop: '3px', whiteSpace: 'pre-line' }}>{maintenance.body}</Text>

43
components/OverallStatus.tsx
View File

@ -45,6 +45,7 @@ export default function OverallStatus({
const [openTime] = useState(Math.round(Date.now() / 1000))
const [currentTime, setCurrentTime] = useState(Math.round(Date.now() / 1000))
const isWindowVisible = useWindowVisibility()
const [expandUpcoming, setExpandUpcoming] = useState(false)
useEffect(() => {
const interval = setInterval(() => {
@ -59,7 +60,9 @@ export default function OverallStatus({
const now = new Date()
const activeMaintenances: (Omit<MaintenanceConfig, 'monitors'> & { monitors?: MonitorTarget[] })[] = maintenances
const activeMaintenances: (Omit<MaintenanceConfig, 'monitors'> & {
monitors?: MonitorTarget[]
})[] = maintenances
.filter((m) => now >= new Date(m.start) && (!m.end || now <= new Date(m.end)))
.map((maintenance) => ({
...maintenance,
@ -68,7 +71,9 @@ export default function OverallStatus({
),
}))
const upcomingMaintenances: (Omit<MaintenanceConfig, 'monitors'> & { monitors?: MonitorTarget[] })[] = maintenances
const upcomingMaintenances: (Omit<MaintenanceConfig, 'monitors'> & {
monitors?: MonitorTarget[]
})[] = maintenances
.filter((m) => now < new Date(m.start))
.map((maintenance) => ({
...maintenance,
@ -90,22 +95,20 @@ export default function OverallStatus({
} sec ago)`}
</Title>
{/* Active Maintenance */}
{activeMaintenances.length > 0 && (
<>
{activeMaintenances.map((maintenance, idx) => (
<MaintenanceAlert
key={`active-${idx}`}
maintenance={maintenance}
style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
/>
))}
</>
)}
{/* Upcoming Maintenance */}
{upcomingMaintenances.length > 0 && (
<>
<Title mt="4px" style={{ textAlign: 'center', color: '#70778c' }} order={5}>
{`${upcomingMaintenances.length} upcoming maintenances`}{' '}
<span
style={{ textDecoration: 'underline' }}
onClick={() => setExpandUpcoming(!expandUpcoming)}
>
{expandUpcoming ? '[HIDE]' : '[SHOW]'}
</span>
</Title>
<Collapse in={expandUpcoming}>
{upcomingMaintenances.map((maintenance, idx) => (
<MaintenanceAlert
key={`upcoming-${idx}`}
@ -114,8 +117,18 @@ export default function OverallStatus({
upcoming
/>
))}
</Collapse>
</>
)}
{/* Active Maintenance */}
{activeMaintenances.map((maintenance, idx) => (
<MaintenanceAlert
key={`active-${idx}`}
maintenance={maintenance}
style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
/>
))}
</Container>
)
}