tormakris/cf-workers-status-page
1
0
Fork 0
mirror of https://github.com/tormachris/cf-workers-status-page.git synced 2025-07-05 11:32:48 +02:00
Code Releases Activity

feat: add monitor filter field

Browse Source
This commit is contained in:
Alex
2020-11-17 00:50:19 +01:00
parent 9e178fe386
commit e2c6a6a538
5 changed files with 116 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
pages/index.js
View File

@ -5,11 +5,28 @@ 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
@ -50,6 +67,9 @@ export default function Index({
monitorsOperational,
kvLastUpdate,
}) {
const state = useStore(MonitorStore)
const slash = useKeyPress('/')
return (
<div>
<Head>
@ -62,18 +82,24 @@ export default function Index({
<link rel="stylesheet" href="./main.css" />
</Head>
<div className="ui basic segment container">
<h1 className="ui huge title header">
<img
className="ui middle aligned tiny image"
src={config.settings.logo}
<div className="horizontal flex between">
<h1 className="ui huge marginless title header">
<img
className="ui middle aligned tiny image"
src={config.settings.logo}
/>
{config.settings.title}
</h1>
<MonitorFilter
active={slash}
callback={filterByTerm}
/>
{config.settings.title}
</h1>
</div>
<MonitorStatusHeader
operational={monitorsOperational}
lastUpdate={kvLastUpdate}
/>
{config.monitors.map((monitor, key) => {
{state.visible.map((monitor, key) => {
return (
<div key={key} className="ui segment">
<div