import Head from 'flareact/head' import MonitorHistogram from '../src/components/monitorHistogram' import { getMonitors, 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 {value: kvMonitors, metadata: kvMonitorsMetadata } = await getMonitors() return { props: { config, kvMonitors: kvMonitors || {}, kvMonitorsMetadata: kvMonitorsMetadata || {} }, // Revalidate these props once every x seconds revalidate: 5, } } export default function Index({ config, kvMonitors, kvMonitorsMetadata, }) { 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
) })}
) }