diff --git a/pages/index.js b/pages/index.js
index 2c2337e..14cc389 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -9,6 +9,7 @@ import {
import config from '../config.yaml'
import MonitorStatusLabel from '../src/components/monitorStatusLabel'
+import MonitorStatusHeader from '../src/components/monitorStatusHeader'
export async function getEdgeProps() {
// get KV data
@@ -68,24 +69,10 @@ export default function Index({
/>
{config.settings.title}
-
-
-
- {monitorsOperational
- ? config.settings.allmonitorsOperational
- : config.settings.notAllmonitorsOperational}
-
- {kvLastUpdate.metadata && typeof window !== 'undefined' && (
-
- checked {Math.round((Date.now() - kvLastUpdate.value) / 1000)} sec ago (from {kvLastUpdate.metadata.loc})
-
- )}
-
-
+
{config.monitors.map((monitor, key) => {
return (
diff --git a/src/components/monitorStatusHeader.js b/src/components/monitorStatusHeader.js
new file mode 100644
index 0000000..b3b98d3
--- /dev/null
+++ b/src/components/monitorStatusHeader.js
@@ -0,0 +1,31 @@
+import config from '../../config.yaml'
+
+export default function MonitorStatusHeader({ operational, lastUpdate }) {
+ let backgroundColor = 'green'
+ let headerText = config.settings.allmonitorsOperational
+ let textColor = 'black'
+
+ if (!operational) {
+ backgroundColor = 'yellow'
+ headerText = config.settings.notAllmonitorsOperational
+ }
+
+ const lastCheckAgo = Math.round((Date.now() - lastUpdate.value) / 1000)
+
+ return (
+
+
+
+ {headerText}
+
+ {
+ lastUpdate.metadata && typeof window !== 'undefined' && (
+
+ checked {lastCheckAgo} sec ago (from {lastUpdate.metadata.loc})
+
+ )
+ }
+
+
+ )
+}