Add ability to view and clear images

frontend/src/editor.jsx

@@ -280,6 +280,24 @@ function SidePanelSettings({dashboardDispatch, dashboard}) {
 		});
 	}
 
+	const clearBackground = e => {
+		e.preventDefault();
+		dashboardDispatch({
+			type: 'setBackground',
+			background: null
+		});
+	}
+
+	const imgControls = src => {
+		if(src) {
+			return <Fragment>
+				<a onClick={clearBackground}>clear</a>&nbsp;
+				<a target="_blank" href={src}>view</a>
+			</Fragment>
+		}
+		return null;
+	}
+
 	return <Fragment>
 		<label for="title">Title</label>
 		<input type="text" id="title" placeholder="Network Overview" value={dashboard.title}
@@ -287,7 +305,7 @@ function SidePanelSettings({dashboardDispatch, dashboard}) {
 
 		<TagEditor tags={dashboard.tags} updateTags={tags => updateTags(tags)} />
 	
-		<label for="background-image">Background Image</label>
+		<label for="background-image">Background Image {imgControls(dashboard.background)}</label>
 		<input id="background-image" type="file" placeholder="Upload a background image"
 			accept="image/*" onChange={handleBackgroundImg}/>
 	</Fragment>

frontend/src/elements/image.jsx

@@ -12,24 +12,41 @@ export function CheckImageOptions({options, updateOptions}) {
 		updateOptions(opts);
 	}
 
+	const clearField = (e, field) => {
+		e.preventDefault();
+		let opts = {};
+		opts[field] = null;
+		updateOptions(opts);
+	}
+
+	const imgControls = (field) => {
+		if(options[field]) {
+			return <Fragment>
+				<a onClick={e => clearField(e, field)}>clear</a>&nbsp;
+				<a target="_blank" href={options[field]}>view</a>
+			</Fragment>
+		}
+		return null;
+	}
+
 	return <Fragment>
 		<label>Icinga Host or Service</label>
 		<IcingaCheckList checkId={options.checkId}
 			updateCheckId={checkId => updateOptions({checkId: checkId})} />
 
-		<label for="ok-image">OK State Image</label>
+		<label for="ok-image">OK State Image {imgControls('okImage')}</label>
 		<input id="ok-image" name="ok-image" type="file"
 			accept="image/*" onInput={e => handleImageUpload('okImage', e.target.files)}/>
 
-		<label for="warning-image">Warning State Image</label>
+		<label for="warning-image">Warning State Image {imgControls('warningImage')}</label>
 		<input id="warning-image" name="warning-image" type="file"
 			accept="image/*" onInput={e => handleImageUpload('warningImage', e.target.files)}/>
 
-		<label for="unknown-image">Unknown State Image</label>
+		<label for="unknown-image">Unknown State Image {imgControls('unknownImage')}</label>
 		<input id="unknown-image" name="unknown-image" type="file"
 			accept="image/*" onInput={e => handleImageUpload('unknownImage', e.target.files)}/>
 
-		<label for="critical-image">Critical State Image</label>
+		<label for="critical-image">Critical State Image {imgControls('criticalImage')}</label>
 		<input id="critical-image" name="critical-image" type="file"
 			accept="image/*" onInput={e => handleImageUpload('criticalImage', e.target.files)}/>
 	</Fragment>

frontend/src/statics/image.jsx

@@ -15,8 +15,25 @@ export function StaticImageOptions({options, updateOptions}) {
 		}
 	}
 
+	const clearField = (e, field) => {
+		e.preventDefault();
+		let opts = {};
+		opts[field] = null;
+		updateOptions(opts);
+	}
+
+	const imgControls = (field) => {
+		if(options[field]) {
+			return <Fragment>
+				<a onClick={e => clearField(e, field)}>clear</a>&nbsp;
+				<a target="_blank" href={options[field]}>view</a>
+			</Fragment>
+		}
+		return null;
+	}
+
 	return <Fragment>
-		<label for="image">Image</label>
+		<label for="image">Image {imgControls('image')}</label>
 		<input id="image" name="image" type="file"
 			accept="image/*" onInput={handleImageUpload}/>
 	</Fragment>

frontend/style.css

@@ -101,6 +101,7 @@ a {
 	color: var(--color-blue);
 	cursor: pointer;
 	font-weight: normal;
+	text-decoration: none;
 }
 
 a:hover, a:focus {