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

59
components/OverallStatus.tsx
View File

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