popup global red indicator when meerkat frontend isn't getting updates

frontend/src/elements/card.jsx

@@ -101,12 +101,16 @@ export function CheckCard({options, slug, dashboard}) {
 			}
 
 			if (options.objectType !== null && options.filter !== null) {
+				try {
 					const res = await meerkat.getIcingaObjectState(options.objectType, options.filter, dashboard);
 					const state = icingaResultCodeToCheckState(options.objectType, res.MaxState);
 					res.Acknowledged ? setAcknowledged('ack') : setAcknowledged("");
 					setCheckState(state);
 					muteAlerts();
 					alertSound(state);
+				} catch (error) {
+					window.flash(`This dashboard isn't updating: ${error}`, 'error')
+				}
 			}
 		});
 	}

frontend/src/elements/image.jsx

@@ -246,12 +246,16 @@ export function CheckImage({options, dashboard, slug}) {
 				}
 			}
 			if (options.objectType !== null && options.filter !== null) {
+				try {
 					const res = await meerkat.getIcingaObjectState(options.objectType, options.filter, dashboard);
 					const state = icingaResultCodeToCheckState(options.objectType, res.MaxState);
 					res.Acknowledged ? setAcknowledged('ack') : setAcknowledged("");
 					setCheckState(state);
 					muteAlerts();
 					alertSound(state);
+				} catch (error) {
+					window.flash("This dashboard isn't updating", 'error')
+				}
 			}
 		});
 	}

frontend/src/elements/line.jsx

@@ -205,12 +205,16 @@ export function CheckLine({options, dashboard, slug}) {
 			}
 
 			if (options.objectType !== null && options.filter !== null) {
+				try {
 					const res = await meerkat.getIcingaObjectState(options.objectType, options.filter, dashboard);
 					const state = icingaResultCodeToCheckState(options.objectType, res.MaxState);
-				res.Acknowledged ? setAcknowledged("ack") : setAcknowledged("");
+					res.Acknowledged ? setAcknowledged('ack') : setAcknowledged("");
 					setCheckState(state);
 					muteAlerts();
 					alertSound(state);
+				} catch (error) {
+					window.flash("This dashboard isn't updating", 'error')
+				}
 			}
 		});
 	}

frontend/src/elements/svg.jsx

@@ -178,12 +178,16 @@ export function CheckSVG({options, dashboard, slug}) {
 				}
 			}
 			if (options.objectType !== null && options.filter !== null) {
+				try {
 					const res = await meerkat.getIcingaObjectState(options.objectType, options.filter, dashboard);
 					const state = icingaResultCodeToCheckState(options.objectType, res.MaxState);
-				res.Acknowledged ? setAcknowledged("ack") : setAcknowledged("");
+					res.Acknowledged ? setAcknowledged('ack') : setAcknowledged("");
 					setCheckState(state);
 					muteAlerts();
 					alertSound(state);
+				} catch (error) {
+					window.flash("This dashboard isn't updating", 'error')
+				}
 			}
 		});
 	}

frontend/src/flash.js

+import { h, Fragment } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import bus from '../utils/bus';
+
+export const Flash = () => {
+    let [visibility, setVisibility] = useState(false);
+    let [message, setMessage] = useState('');
+    let [type, setType] = useState('');
+
+    useEffect(() => {
+        bus.addListener('flash', ({message, type}) => {
+            setVisibility(true);
+            setMessage(message);
+            setType(type);
+            setTimeout(() => {
+                setVisibility(false);
+            }, 4000);
+        });
+    }, []);
+
+    const alert = {
+        color: 'white',
+        background: '#ff4a4a',
+        borderRadius: '5px',
+        position: 'absolute',
+        top: '40px',
+        right: '30px',
+        paddingTop: '38px',
+        paddingBottom: '25px',
+        paddingTop: '38px',
+        paddingLeft: '40px',
+        paddingRight: '40px',
+        display: 'flex',
+        alignItems: 'center',
+        marginTop: '20px',
+        zIndex: 2,
+        margin: 0,
+        fontSize: '20px',
+    }
+
+    const close = {
+        color: 'white',
+        cursor: 'pointer',
+        marginLeft: '30px',
+        marginRight: '5px',
+        marginBottom: '14px',
+    }
+
+    // const error = {
+    //     background: 'red',
+    // }
+
+    // const success = {
+    //     background: 'lightgreen',
+    // }
+
+    useEffect(() => {
+        if(document.getElementById('close') !== null) {
+            document.getElementById('close').addEventListener('click', () => setVisibility(false));
+        }
+    })
+
+    return (
+        visibility && <div style={alert}>
+                <p>{message}</p>
+                <span style={close} id="close"><strong>X</strong></span>
+            </div>
+    )
+}
\ No newline at end of file

frontend/src/index.jsx

@@ -4,9 +4,12 @@ import { Router } from 'preact-router';
 import { Home } from './home';
 import { Editor } from './editor';
 import { Viewer } from './viewer';
+import { Flash } from './flash';
+import bus from '../utils/bus';
 
 function Main() {
 	return <Fragment>
+		<Flash />
 		<Router>
 			<Home path="/" />
 			<Editor path="/edit/:slug" />
@@ -17,6 +20,8 @@ function Main() {
 	</Fragment>
 }
 
+window.flash = (message, type="success") => bus.emit('flash', ({message, type}));
+
 function NotFound() {
 	return <div>404</div>
 }

frontend/utils/bus.js

+import EventEmitter from 'events';
+export default new EventEmitter();
\ No newline at end of file