Commit 43786358 authored by StreatCodes's avatar StreatCodes
Browse files

Add ability to create check lines

parent b9ad3ddc
......@@ -7,6 +7,7 @@ import { routeParam, removeParam, TagEditor } from './util';
import { CheckCard, CheckCardOptions } from './elements/card';
import { CheckSVG, CheckSVGOptions, CheckSVGDefaults } from './elements/svg';
import { CheckImage, CheckImageOptions } from './elements/image';
import { CheckLine, CheckLineOptions } from './elements/line';
import { StaticText, StaticTextOptions, StaticTextDefaults } from './statics/text';
import { StaticSVG, StaticSVGOptions, StaticSVGDefaults } from './statics/svg';
import { StaticImage, StaticImageOptions } from './statics/image';
......@@ -179,9 +180,9 @@ function TransformableElement({rect, updateRect, rotation, updateRotation, child
let maxHeight = dashboardNode.clientHeight - elementNode.offsetTop;
//limit minimun resize
width = width < 100 ? 100 : width;
width = width < 40 ? 40 : width;
width = width < maxWidth ? width : maxWidth;
height = height < 50 ? 50 : height;
height = height < 40 ? 40 : height;
height = height < maxHeight ? height : maxHeight;
//convert dimensions to relative (px -> percentage based)
......@@ -275,6 +276,7 @@ function DashboardElements({dashboardDispatch, selectedElementId, elements, high
if(element.type === 'check-card') { ele = <CheckCard options={element.options} /> }
if(element.type === 'check-svg') { ele = <CheckSVG options={element.options}/> }
if(element.type === 'check-image') { ele = <CheckImage options={element.options}/> }
if(element.type === 'check-line') { ele = <CheckLine options={element.options} /> }
if(element.type === 'static-text') { ele = <StaticText options={element.options}/> }
if(element.type === 'static-svg') { ele = <StaticSVG options={element.options}/> }
if(element.type === 'static-image') { ele = <StaticImage options={element.options}/> }
......@@ -434,6 +436,7 @@ export function ElementSettings({selectedElement, updateElement}) {
if(selectedElement.type === 'check-card') { ElementOptions = <CheckCardOptions updateOptions={updateElementOptions} options={selectedElement.options} /> }
if(selectedElement.type === 'check-svg') { ElementOptions = <CheckSVGOptions updateOptions={updateElementOptions} options={selectedElement.options}/> }
if(selectedElement.type === 'check-image') { ElementOptions = <CheckImageOptions updateOptions={updateElementOptions} options={selectedElement.options}/> }
if(selectedElement.type === 'check-line') { ElementOptions = <CheckLineOptions updateOptions={updateElementOptions} options={selectedElement.options}/> }
if(selectedElement.type === 'static-text') { ElementOptions = <StaticTextOptions updateOptions={updateElementOptions} options={selectedElement.options} /> }
if(selectedElement.type === 'static-svg') { ElementOptions = <StaticSVGOptions updateOptions={updateElementOptions} options={selectedElement.options}/> }
if(selectedElement.type === 'static-image') { ElementOptions = <StaticImageOptions updateOptions={updateElementOptions} options={selectedElement.options}/> }
......@@ -456,6 +459,7 @@ export function ElementSettings({selectedElement, updateElement}) {
<option value="check-card">Icinga Card</option>
<option value="check-svg">Icinga SVG</option>
<option value="check-image">Icinga Image</option>
<option value="check-line">Icinga Line</option>
<option value="static-text">Static Text</option>
<option value="static-svg">Static SVG</option>
<option value="static-image">Static Image</option>
......
import { h, Fragment, options } from 'preact';
import { useState, useEffect, useRef } from 'preact/hooks';
import * as meerkat from '../meerkat';
import { icingaResultCodeToCheckState, icingaCheckTypeFromId, IcingaCheckList } from '../util'
export function CheckLineOptions({options, updateOptions}) {
return <div class="card-options">
<label>Icinga Host or Service</label>
<IcingaCheckList checkId={options.checkId}
updateCheckId={checkId => updateOptions({checkId: checkId})} />
<label for="stroke-width">Stroke width</label>
<input id="stroke-width" name="stroke-width" type="number" min="0" step="any" value={options.strokeWidth}
onInput={e => updateOptions({strokeWidth: Number(e.currentTarget.value)})}/>
<label>Render Arrows</label>
<div class="left spacer">
<input id="left-arrow" type="checkbox" checked={options.leftArrow}
onClick={e => updateOptions({leftArrow: e.currentTarget.checked})}/>
<label for="left-arrow" class="no-margin" style="font-weight: normal">Left</label>
</div>
<div class="left spacer">
<input id="right-arrow" type="checkbox" checked={options.rightArrow}
onClick={e => updateOptions({rightArrow: e.currentTarget.checked})}/>
<label for="right-arrow" class="no-margin" style="font-weight: normal">Right</label>
</div>
</div>
}
//The rendered view (in the actual dashboard) of the Check SVG
export function CheckLine({options}) {
const svgRef = useRef({clientWidth: 100, clientHeight: 40});
const [checkState, setCheckState] = useState(null);
//Handle state update
const updateState = async () => {
const checkType = icingaCheckTypeFromId(options.checkId);
const res = await meerkat.getIcingaCheckState(options.checkId, checkType);
const state = icingaResultCodeToCheckState(checkType, res.state);
setCheckState(state);
}
//Setup check refresher
useEffect(() => {
if(options.checkId !== null) {
updateState();
const intervalID = window.setInterval(updateState, 30*1000)
return () => window.clearInterval(intervalID);
}
}, [options.checkId]);
//SVG stroke color and icons to the correct version based
//on the current check state
let strokeColor = '';
if(checkState === 'ok' || checkState === 'up') {
strokeColor = `var(--color-icinga-green)`
}
if(checkState === 'warning') {
strokeColor = `var(--color-icinga-yellow)`
}
if(checkState === 'unknown') {
strokeColor = `var(--color-icinga-purple)`
}
if(checkState === 'critical' || checkState === 'down') {
strokeColor = `var(--color-icinga-red)`
}
return <div class="check-content svg" ref={svgRef}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox={`0 0 ${svgRef.current.clientWidth} ${svgRef.current.clientHeight}`} fill="none"
stroke={strokeColor} stroke-width={options.strokeWidth} stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1={svgRef.current.clientHeight / 2} x2={svgRef.current.clientWidth - 5} y2={svgRef.current.clientHeight / 2}></line>
{ options.leftArrow ? <polyline points={`30 5 5 ${svgRef.current.clientHeight / 2} 30 ${svgRef.current.clientHeight - 5}`}></polyline> : null }
{ options.rightArrow ? <polyline points={`${svgRef.current.clientWidth - 30} 5 ${svgRef.current.clientWidth - 5} ${svgRef.current.clientHeight / 2} ${svgRef.current.clientWidth - 30} ${svgRef.current.clientHeight - 5}`}></polyline> : null }
</svg>
</div>
}
export const CheckSVGDefaults = {
strokeWidth: 4,
leftArrow: false,
rightArrow: true
}
\ No newline at end of file
......@@ -6,6 +6,7 @@ import * as meerkat from './meerkat';
import { CheckCard } from './elements/card';
import { CheckImage } from './elements/image';
import { CheckSVG } from './elements/svg';
import { CheckLine } from './elements/line';
import { StaticText } from './statics/text';
import { StaticSVG } from './statics/svg';
......@@ -35,6 +36,7 @@ export function Viewer({slug}) {
if(element.type === 'check-card') { ele = <CheckCard options={element.options}/> }
if(element.type === 'check-svg') { ele = <CheckSVG options={element.options}/> }
if(element.type === 'check-image') { ele = <CheckImage options={element.options}/> }
if(element.type === 'check-line') { ele = <CheckLine options={element.options} /> }
if(element.type === 'static-text') { ele = <StaticText options={element.options}/> }
if(element.type === 'static-svg') { ele = <StaticSVG options={element.options}/> }
if(element.type === 'static-image') { ele = <StaticImage options={element.options}/> }
......
......@@ -276,6 +276,12 @@ input[type="color"] {
margin-right: 5px;
}
input[type="checkbox"], input[type="radio"] {
cursor: pointer;
width: unset;
margin: 0 5px 0 0;
}
input::placeholder {
color: #cccccc;
opacity: 1;
......
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