import Head from 'flareact/head' import MonitorHistogram from '../src/components/monitorHistogram' import { getLastUpdate, getMonitors, getMonitorsHistory, useKeyPress, } from '../src/functions/helpers' import config from '../config.yaml' import MonitorStatusLabel from '../src/components/monitorStatusLabel' import MonitorStatusHeader from '../src/components/monitorStatusHeader' import MonitorFilter from '../src/components/monitorFilter' import { Store } from 'laco' import { useStore } from 'laco-react' const MonitorStore = new Store( { monitors: config.monitors, visible: config.monitors, activeFilter: false } ) const filterByTerm = (term) => MonitorStore.set( state => ({ visible: state.monitors.filter((monitor) => monitor.name.toLowerCase().includes(term)) }) ) export async function getEdgeProps() { // get KV data const kvMonitors = await getMonitors() const kvMonitorsFailedDays = await getMonitorsHistory() const kvLastUpdate = await getLastUpdate() // prepare data maps for components let monitorsOperational = true let kvMonitorsMap = {} kvMonitors.forEach(x => { kvMonitorsMap[x.metadata.id] = x.metadata if (x.metadata.operational === false) monitorsOperational = false }) // transform KV list to array of failed days const kvMonitorsFailedDaysArray = kvMonitorsFailedDays.map(x => { return x.name }) return { props: { config, kvMonitorsMap, kvMonitorsFailedDaysArray, monitorsOperational, kvLastUpdate, }, // Revalidate these props once every x seconds revalidate: 5, } } export default function Index({ config, kvMonitorsMap, kvMonitorsFailedDaysArray, monitorsOperational, kvLastUpdate, }) { const state = useStore(MonitorStore) const slash = useKeyPress('/') return (
{config.settings.title}

{config.settings.title}

{state.visible.map((monitor, key) => { return (
{monitor.description && ( )}
{monitor.name}
{config.settings.daysInHistogram} days ago
Today
) })}
) }