Commit b213f50a authored by StreatCodes's avatar StreatCodes
Browse files

Add ability to view and clear images

parent 4b5a0805
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -101,6 +101,7 @@ a {
color: var(--color-blue);
cursor: pointer;
font-weight: normal;
text-decoration: none;
}
a:hover, a:focus {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment