util.jsx 3.12 KB
Newer Older
StreatCodes's avatar
StreatCodes committed
1
import { h, Fragment, createRef } from 'preact';
2
import { useState, useEffect } from 'preact/hooks';
3
import { route } from 'preact-router';
4
import { Combobox } from 'react-widgets';
5

6
7
import * as meerkat from './meerkat';

8
9
//Set the a URL paramater, this will keep the current URL and parameters intact,
//and update the one given. Useful to add search filters etc.
StreatCodes's avatar
StreatCodes committed
10
export function routeParam(name, value) {
11
12
13
14
	const params = new URLSearchParams(window.location.search);
	params.set(name, value);

	route(`${window.location.pathname}?${params}`);
15
16
17
18
19
20
21
22
23
24
25
26
}

export function removeParam(name) {
	const params = new URLSearchParams(window.location.search);
	params.delete(name);

	if(params.keys.length < 1) {
		//Don't include the '?' if there are no params
		route(window.location.pathname);
	} else {
		route(`${window.location.pathname}?${params}`);
	}
StreatCodes's avatar
StreatCodes committed
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
}

export function icingaCheckTypeFromId(checkId) {
	if(checkId.includes('!')) {
		return 'service';
	} else {
		return 'host';
	}
}

export function icingaResultCodeToCheckState(checkType, resultCode) {
	if(checkType === 'service') {
		switch(resultCode){
			case 0: return 'ok';
			case 1: return 'warning';
			case 2: return 'critical';
			case 3: return 'unknown';
		}
	} else if(checkType === 'host') {
		switch(resultCode){
			case 0: return 'up';
			case 1: return 'up';
			case 2: return 'down';
			case 3: return 'down';
		}
	}

	return 'invalid'
55
56
57
58
}


function sortHost(a, b) {
59
	return a.hostName.toLowerCase() > b.hostName.toLowerCase() ? 1 : 0;
60
61
62
}

function sortService(a, b) {
63
	return a.displayName.toLowerCase() > b.displayName.toLowerCase() ? 1 : 0;
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
}

export function IcingaCheckList({checkId, updateCheckId}) {
	const [hosts, setHosts] = useState(null);
	const [services, setServices] = useState(null);
	
	useEffect(() => {
		meerkat.getIcingaHosts().then(h => {
			h.sort(sortHost);
			setHosts(h);
		});

		meerkat.getIcingaServices().then(s => {
			s.sort(sortService);
			setServices(s)
		});
	}, [])

	if(hosts === null || services === null) {
		return <div class="loading small">Loading hosts and services</div>
	}

	const options = [];
	for(const host of hosts) {
88
		options.push(host.id)
89
90
91
	}

	for(const service of services) {
92
		options.push(service.id)
93
94
	}

95
	return <Combobox filter='contains' value={checkId} data={options} onSelect={e => updateCheckId(e)} />
StreatCodes's avatar
StreatCodes committed
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
}

export function TagEditor({tags, updateTags}) {
	const inputRef = createRef();
	const addTag = e => {
		e.preventDefault();
		updateTags(tags.concat(e.currentTarget['add-tag'].value));
		inputRef.current.value = '';
	}

	const removeTag = index => {
		tags.splice(index, 1);
		updateTags(tags);
	}

	const tagElements = tags.map((tag, i) => {
Max Reeves's avatar
reskin    
Max Reeves committed
112
		return <div class="pill tag btn-dark">
StreatCodes's avatar
StreatCodes committed
113
			<span>{tag}</span>
Max Reeves's avatar
reskin    
Max Reeves committed
114
			<span class="close-icon" onClick={e => removeTag(i)}>x</span>
StreatCodes's avatar
StreatCodes committed
115
116
117
118
119
120
121
		</div>
	})

	return <Fragment>
		<form onSubmit={addTag}>
			<label for="add-tag">Tags <span class="subtle tiny">Enter to submit</span></label>
			{tagElements}
Max Reeves's avatar
reskin    
Max Reeves committed
122
			<input class="form-control" type="text" id="add-tag" name="add-tag" ref={inputRef} placeholder="Enter a new tag"
StreatCodes's avatar
StreatCodes committed
123
124
125
				pattern="[a-z\d\-_]+" title="only lower case letters, numbers, '-' and '_' are allowed"/>
		</form>
	</Fragment>
126
}