diff --git a/package.json b/package.json
index d1970a2..9a06abd 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
},
"dependencies": {
"flareact": "^0.7.1",
+ "laco": "^1.2.1",
+ "laco-react": "^1.1.0",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
diff --git a/pages/index.js b/pages/index.js
index 14cc389..85e364d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -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 (
@@ -62,18 +82,24 @@ export default function Index({
-
-
+
+
+ {config.settings.title}
+
+
- {config.settings.title}
-
+
- {config.monitors.map((monitor, key) => {
+ {state.visible.map((monitor, key) => {
return (
{
+ // ignore focus trigger
+ if (event.target.value === '/') {
+ return
+ }
+ setInput(event.target.value)
+ callback(event.target.value)
+ }
+
+ const handleKeyDown = (event) => {
+ // blur input field on escape
+ if (event.keyCode === 27) {
+ event.target.blur()
+ }
+ }
+
+ return (
+
+
+ e && active && e.focus()
+ }
+ />
+
+
+
+ )
+}
diff --git a/src/functions/helpers.js b/src/functions/helpers.js
index c5a730c..3b5cab4 100644
--- a/src/functions/helpers.js
+++ b/src/functions/helpers.js
@@ -1,4 +1,5 @@
import config from '../../config.yaml'
+import {useEffect, useState} from 'react'
export async function getMonitors() {
const monitors = await listKV('s_')
@@ -115,3 +116,31 @@ export async function notifySlack(monitor, newMetadata) {
headers: { 'Content-Type': 'application/json' },
})
}
+
+export function useKeyPress(targetKey) {
+ const [keyPressed, setKeyPressed] = useState(false)
+
+ function downHandler({ key }) {
+ if (key === targetKey) {
+ setKeyPressed(true);
+ }
+ }
+
+ const upHandler = ({ key }) => {
+ if (key === targetKey) {
+ setKeyPressed(false);
+ }
+ }
+
+ useEffect(() => {
+ window.addEventListener('keydown', downHandler);
+ window.addEventListener('keyup', upHandler);
+
+ return () => {
+ window.removeEventListener('keydown', downHandler);
+ window.removeEventListener('keyup', upHandler);
+ };
+ }, [])
+
+ return keyPressed
+}
diff --git a/yarn.lock b/yarn.lock
index 2ea855b..ef8f18b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3902,6 +3902,16 @@ kind-of@^6.0.0, kind-of@^6.0.2:
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
+laco-react@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/laco-react/-/laco-react-1.1.0.tgz#8572117aabd245e9ff0000aab534c0f817da8238"
+ integrity sha512-RbN7dFUH7RsNpRMB46gWSjEMXo7WDhgkKl8HXpxn1o/bJItHj7FT0VsIWF963mrvORncIgI7bnZJ6KPcHV8fvA==
+
+laco@^1.2.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/laco/-/laco-1.2.1.tgz#4acf24ab4ea7b2983d10c2fd982208e96a315158"
+ integrity sha512-fw3vWTR1L/u/XTReyBQt3bnhylMLMqp+YoIFEr52bb9NqRnwPcvTQuFH0TRMyvg0Zucbx+eRViO4wxoij6xzDg==
+
last-call-webpack-plugin@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"