[thirdparty/systemd.git] / src / journal / browse.html

<!DOCTYPE html>
<html>
<head>
        <title>Journal</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
                div#divlogs {
                        font-family: monospace;
                        font-size: 8pt;
                        background-color: #ffffff;
                        padding: 1em;
                        margin: 2em 0em;
                        border-radius: 10px 10px 10px 10px;
                        border: 1px solid threedshadow;
                        white-space: nowrap;
                        overflow-x: scroll;
                }
                body {
                        background-color: #ededed;
                        color: #313739;
                        font: message-box;
                        margin: 5em;
                }
                td.timestamp {
                        text-align: right;
                        border-right: 1px dotted lightgrey;
                        padding-right: 5px;
                }
                td.process {
                        border-right: 1px dotted lightgrey;
                        padding-left: 5px;
                        padding-right: 5px;
                }
                td.message {
                        padding-left: 5px;
                }
                td.message-error {
                        padding-left: 5px;
                        color: red;
                        font-weight: bold;
                }
                td.message-highlight {
                        padding-left: 5px;
                        font-weight: bold;
                }
                table#tablelogs {
                        border-collapse:collapse;
                }
        </style>
</head>

<body>
        <!-- TODO:

                - show red lines for reboots
                - show contents of entries -->

        <h1 id="title"></h1>

        <div id="os"></div>
        <div id="virtualization"></div>
        <div id="cutoff"></div>
        <div id="machine"></div>
        <div id="usage"></div>
        <div id="showing"></div>

        <div id="divlogs"><table id="tablelogs"></table></div>

        <form>
                <input id="head" type="button" value="|&lt;" onclick="entriesLoadHead();"/>
                <input id="previous" type="button" value="&lt;&lt;" onclick="entriesLoadPrevious();"/>
                <input id="next" type="button" value="&gt;&gt;" onclick="entriesLoadNext();"/>
                <input id="tail" type="button" value="&gt;|" onclick="entriesLoadTail();"/>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input id="more" type="button" value="More" onclick="entriesMore();"/>
                <input id="less" type="button" value="Less" onclick="entriesLess();"/>
        </form>

        <script type="text/javascript">
                var first_cursor = null;
                var last_cursor = null;

                function setCookie(name, value, msec) {
                        var d = new Date();
                        d.setMilliseconds(d.getMilliseconds() + msec);
                        var v = escape(value) + "; expires=" + d.toUTCString();
                        document.cookie = name + "=" + value;
                }

                function getCookie(name) {
                        var i, l;
                        l = document.cookie.split(";");
                        for (i in l) {
                                var x, y, j;
                                j = l[i].indexOf("=");
                                x = l[i].substr(0, j);
                                y = l[i].substr(j+1);
                                if (x == name)
                                        return unescape(y);
                        }
                        return null;
                }

                function getNEntries() {
                        var n;
                        n = getCookie("n_entries");
                        if (n == null)
                                return 50;
                        return parseInt(n);
                }

                function showNEntries(n) {
                        var showing = document.getElementById("showing");
                        showing.innerHTML = "Showing <b>" + n.toString() + "</b> entries.";
                }

                function setNEntries(n) {
                        if (n < 10)
                                n = 10;
                        else if (n > 1000)
                                n = 1000;

                        setCookie("n_entries", n.toString(), 30*24*60*60*1000);
                        showNEntries(n);
                }

                function machineLoad() {
                        var request = new XMLHttpRequest();
                        request.open("GET", "/machine");
                        request.onreadystatechange = machineOnResult;
                        request.setRequestHeader("Accept", "application/json");
                        request.send(null);
                }

                function formatBytes(u) {
                        if (u >= 1024*1024*1024*1024)
                                return (u/1024/1024/1024/1024).toFixed(1) + " TiB";
                        else if (u >= 1024*1024*1024)
                                return (u/1024/1024/1024).toFixed(1) + " GiB";
                        else if (u >= 1024*1024)
                                return (u/1024/1024).toFixed(1) + " MiB";
                        else if (u >= 1024)
                                return (u/1024).toFixed(1) + " KiB";
                        else
                                return u.toString() + " B";
                }

                function machineOnResult(event) {
                        if ((event.currentTarget.readyState != 4) ||
                                (event.currentTarget.status != 200 && event.currentTarget.status != 0))
                                return;

                        var d = JSON.parse(event.currentTarget.responseText);

                        var title = document.getElementById("title");
                        title.innerHTML = 'Journal of ' + d.hostname;
                        document.title = 'Journal of ' + d.hostname;

                        var machine = document.getElementById("machine");
                        machine.innerHTML = 'Machine ID is <b>' + d.machine_id + '</b>, current boot ID is <b>' + d.boot_id + '</b>.';

                        var cutoff = document.getElementById("cutoff");
                        var from = new Date(parseInt(d.cutoff_from_realtime) / 1000);
                        var to = new Date(parseInt(d.cutoff_to_realtime) / 1000);
                        cutoff.innerHTML = 'Journal begins at <b>' + from.toLocaleString() + '</b> and ends at <b>' + to.toLocaleString() + '</b>.';

                        var usage = document.getElementById("usage");
                        usage.innerHTML = 'Disk usage is <b>' + formatBytes(parseInt(d.usage)) + '</b>.';

                        var os = document.getElementById("os");
                        os.innerHTML = 'Operating system is <b>' + d.os_pretty_name + '</b>.';

                        var virtualization = document.getElementById("virtualization");
                        virtualization.innerHTML = d.virtualization == "bare" ? "Running on <b>bare metal</b>." : "Running on virtualization <b>" + d.virtualization + "</b>.";
                }

                function entriesLoad(range) {
                        var request = new XMLHttpRequest();
                        request.open("GET", "/entries");
                        request.onreadystatechange = entriesOnResult;
                        request.setRequestHeader("Accept", "application/json");
                        request.setRequestHeader("Range", "entries=" + range + ":" + getNEntries().toString());
                        request.send(null);
                }

                function entriesLoadNext() {
                        if (last_cursor == null)
                                entriesLoad("");
                        else
                                entriesLoad(last_cursor + ":1");
                }

                function entriesLoadPrevious() {
                        if (first_cursor == null)
                                entriesLoad("");
                        else
                                entriesLoad(first_cursor + ":-" + getNEntries().toString());
                }

                function entriesLoadHead() {
                        entriesLoad("");
                }

                function entriesLoadTail() {
                        entriesLoad(":-" + getNEntries().toString());
                }

                function entriesOnResult(event) {

                        if ((event.currentTarget.readyState != 4) ||
                                (event.currentTarget.status != 200 && event.currentTarget.status != 0))
                                return;

                        var logs = document.getElementById("tablelogs");

                        var lc = null;
                        var fc = null;

                        var i;
                        var l = event.currentTarget.responseText.split('\n');

                        if (l.length <= 1) {
                                logs.innerHTML = '<tbody><tr><td colspan="3"><i>No further entries...</i></td></tr></tbody>';
                                return;
                        }

                        var buf = '';

                        for (i in l) {

                                if (l[i] == '')
                                        continue;

                                var d = JSON.parse(l[i]);
                                if (d.MESSAGE == undefined || d.__CURSOR == undefined)
                                        continue;

                                if (fc == null)
                                        fc = d.__CURSOR;
                                lc = d.__CURSOR;

                                var priority;
                                if (d.PRIORITY != undefined)
                                        priority = parseInt(d.PRIORITY);
                                else
                                        priority = 6;

                                if (priority <= 3)
                                        clazz = "message-error";
                                else if (priority <= 5)
                                        clazz = "message-highlight";
                                else
                                        clazz = "message";

                                buf += '<tr><td class="timestamp">';

                                if (d.__REALTIME_TIMESTAMP != undefined) {
                                        var timestamp = new Date(parseInt(d.__REALTIME_TIMESTAMP) / 1000);
                                        buf += timestamp.toLocaleString();
                                }

                                buf += '</td><td class="process">';

                                if (d.SYSLOG_IDENTIFIER != undefined)
                                        buf += d.SYSLOG_IDENTIFIER;
                                else if (d._COMM != undefined)
                                        buf += d._COMM;

                                if (d._PID != undefined)
                                        buf += "[" + d._PID + "]";
                                else if (d.SYSLOG_PID != undefined)
                                        buf += "[" + d.SYSLOG_PID + "]";

                                buf += '</td><td class="' + clazz + '">';

                                if (d.MESSAGE == null)
                                        buf += "[blob data]";
                                else if (d.MESSAGE instanceof Array)
                                        buf += "[" + formatBytes(d.MESSAGE.length) + " blob data]";
                                else
                                        buf += d.MESSAGE;

                                buf += '</td></tr>';
                        }

                        logs.innerHTML = buf + '</tbody>';

                        if (fc != null)
                                first_cursor = fc;
                        if (lc != null)
                                last_cursor = lc;
                }

                function entriesMore() {
                        setNEntries(getNEntries() + 10);
                        entriesLoad("");
                }

                function entriesLess() {
                        setNEntries(getNEntries() - 10);
                        entriesLoad("");
                }

                machineLoad();
                entriesLoad("");
                showNEntries(getNEntries());
        </script>
</body>
</html>
Commit	Line	Data
bf5542f8 LP	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<title>Journal</title>
	5	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	6	<style type="text/css">
1dac8b79	7	div#divlogs {
bf5542f8 LP	8	font-family: monospace;
	9	font-size: 8pt;
	10	background-color: #ffffff;
	11	padding: 1em;
	12	margin: 2em 0em;
	13	border-radius: 10px 10px 10px 10px;
	14	border: 1px solid threedshadow;
	15	white-space: nowrap;
	16	overflow-x: scroll;
	17	}
	18	body {
	19	background-color: #ededed;
	20	color: #313739;
	21	font: message-box;
	22	margin: 5em;
	23	}
1dac8b79 LP	24	td.timestamp {
	25	text-align: right;
	26	border-right: 1px dotted lightgrey;
	27	padding-right: 5px;
	28	}
	29	td.process {
	30	border-right: 1px dotted lightgrey;
	31	padding-left: 5px;
	32	padding-right: 5px;
	33	}
	34	td.message {
	35	padding-left: 5px;
	36	}
	37	td.message-error {
	38	padding-left: 5px;
bf5542f8 LP	39	color: red;
	40	font-weight: bold;
	41	}
1dac8b79 LP	42	td.message-highlight {
1dac8b79 LP	43	padding-left: 5px;
bf5542f8 LP	44	font-weight: bold;
bf5542f8 LP	45	}
1dac8b79 LP	46	table#tablelogs {
	47	border-collapse:collapse;
	48	}
bf5542f8 LP	49	</style>
	50	</head>
	51
	52	<body>
	53	<!-- TODO:
	54
bf5542f8 LP	55	- show red lines for reboots
	56	- show contents of entries -->
	57
	58	<h1 id="title"></h1>
	59
	60	<div id="os"></div>
	61	<div id="virtualization"></div>
	62	<div id="cutoff"></div>
	63	<div id="machine"></div>
	64	<div id="usage"></div>
	65	<div id="showing"></div>
	66
1dac8b79	67	<div id="divlogs"><table id="tablelogs"></table></div>
bf5542f8 LP	68
	69	<form>
	70	<input id="head" type="button" value="\|<" onclick="entriesLoadHead();"/>
	71	<input id="previous" type="button" value="<<" onclick="entriesLoadPrevious();"/>
	72	<input id="next" type="button" value=">>" onclick="entriesLoadNext();"/>
	73	<input id="tail" type="button" value=">\|" onclick="entriesLoadTail();"/>
	74
	75	<input id="more" type="button" value="More" onclick="entriesMore();"/>
	76	<input id="less" type="button" value="Less" onclick="entriesLess();"/>
	77	</form>
	78
	79	<script type="text/javascript">
	80	var first_cursor = null;
	81	var last_cursor = null;
	82
	83	function setCookie(name, value, msec) {
	84	var d = new Date();
	85	d.setMilliseconds(d.getMilliseconds() + msec);
	86	var v = escape(value) + "; expires=" + d.toUTCString();
	87	document.cookie = name + "=" + value;
	88	}
	89
	90	function getCookie(name) {
	91	var i, l;
	92	l = document.cookie.split(";");
	93	for (i in l) {
	94	var x, y, j;
	95	j = l[i].indexOf("=");
	96	x = l[i].substr(0, j);
	97	y = l[i].substr(j+1);
	98	if (x == name)
	99	return unescape(y);
	100	}
	101	return null;
	102	}
	103
	104	function getNEntries() {
	105	var n;
	106	n = getCookie("n_entries");
	107	if (n == null)
	108	return 50;
	109	return parseInt(n);
	110	}
	111
	112	function showNEntries(n) {
	113	var showing = document.getElementById("showing");
	114	showing.innerHTML = "Showing <b>" + n.toString() + "</b> entries.";
	115	}
	116
	117	function setNEntries(n) {
	118	if (n < 10)
	119	n = 10;
	120	else if (n > 1000)
	121	n = 1000;
	122
	123	setCookie("n_entries", n.toString(), 302460601000);
	124	showNEntries(n);
	125	}
	126
	127	function machineLoad() {
	128	var request = new XMLHttpRequest();
	129	request.open("GET", "/machine");
	130	request.onreadystatechange = machineOnResult;
	131	request.setRequestHeader("Accept", "application/json");
132	request.send(null);
133	}
134
135	function formatBytes(u) {
136	if (u >= 102410241024*1024)
137	return (u/1024/1024/1024/1024).toFixed(1) + " TiB";
138	else if (u >= 102410241024)
139	return (u/1024/1024/1024).toFixed(1) + " GiB";
140	else if (u >= 1024*1024)
141	return (u/1024/1024).toFixed(1) + " MiB";
142	else if (u >= 1024)
143	return (u/1024).toFixed(1) + " KiB";
144	else
145	return u.toString() + " B";
146	}
147
148	function machineOnResult(event) {
149	if ((event.currentTarget.readyState != 4) \|\|
150	(event.currentTarget.status != 200 && event.currentTarget.status != 0))
151	return;
152
153	var d = JSON.parse(event.currentTarget.responseText);
154
155	var title = document.getElementById("title");
156	title.innerHTML = 'Journal of ' + d.hostname;
157	document.title = 'Journal of ' + d.hostname;
158
159	var machine = document.getElementById("machine");
160	machine.innerHTML = 'Machine ID is <b>' + d.machine_id + '</b>, current boot ID is <b>' + d.boot_id + '</b>.';
161
162	var cutoff = document.getElementById("cutoff");
163	var from = new Date(parseInt(d.cutoff_from_realtime) / 1000);
164	var to = new Date(parseInt(d.cutoff_to_realtime) / 1000);
165	cutoff.innerHTML = 'Journal begins at <b>' + from.toLocaleString() + '</b> and ends at <b>' + to.toLocaleString() + '</b>.';
166
167	var usage = document.getElementById("usage");
168	usage.innerHTML = 'Disk usage is <b>' + formatBytes(parseInt(d.usage)) + '</b>.';
169
170	var os = document.getElementById("os");
171	os.innerHTML = 'Operating system is <b>' + d.os_pretty_name + '</b>.';
172
173	var virtualization = document.getElementById("virtualization");
174	virtualization.innerHTML = d.virtualization == "bare" ? "Running on <b>bare metal</b>." : "Running on virtualization <b>" + d.virtualization + "</b>.";
175	}
176
177	function entriesLoad(range) {
178	var request = new XMLHttpRequest();
179	request.open("GET", "/entries");
180	request.onreadystatechange = entriesOnResult;
181	request.setRequestHeader("Accept", "application/json");
182	request.setRequestHeader("Range", "entries=" + range + ":" + getNEntries().toString());
183	request.send(null);
184	}
185
186	function entriesLoadNext() {
187	if (last_cursor == null)
188	entriesLoad("");
189	else
190	entriesLoad(last_cursor + ":1");
191	}
192
193	function entriesLoadPrevious() {
194	if (first_cursor == null)
195	entriesLoad("");
196	else
197	entriesLoad(first_cursor + ":-" + getNEntries().toString());
198	}
199
200	function entriesLoadHead() {
201	entriesLoad("");
202	}
203
204	function entriesLoadTail() {
205	entriesLoad(":-" + getNEntries().toString());
206	}
207
208	function entriesOnResult(event) {
209
210	if ((event.currentTarget.readyState != 4) \|\|
211	(event.currentTarget.status != 200 && event.currentTarget.status != 0))
212	return;
213
1dac8b79	214	var logs = document.getElementById("tablelogs");
bf5542f8 LP	215
	216	var lc = null;
	217	var fc = null;
	218
	219	var i;
	220	var l = event.currentTarget.responseText.split('\n');
	221
	222	if (l.length <= 1) {
1dac8b79	223	logs.innerHTML = '<tbody><tr><td colspan="3"><i>No further entries...</i></td></tr></tbody>';
bf5542f8 LP	224	return;
	225	}
	226
1dac8b79 LP	227	var buf = '';
1dac8b79 LP	228
bf5542f8 LP	229	for (i in l) {
	230
	231	if (l[i] == '')
	232	continue;
	233
	234	var d = JSON.parse(l[i]);
	235	if (d.MESSAGE == undefined \|\| d.__CURSOR == undefined)
	236	continue;
	237
	238	if (fc == null)
	239	fc = d.__CURSOR;
	240	lc = d.__CURSOR;
	241
	242	var priority;
	243	if (d.PRIORITY != undefined)
	244	priority = parseInt(d.PRIORITY);
	245	else
	246	priority = 6;
	247
	248	if (priority <= 3)
1dac8b79	249	clazz = "message-error";
bf5542f8	250	else if (priority <= 5)
1dac8b79	251	clazz = "message-highlight";
bf5542f8	252	else
1dac8b79 LP	253	clazz = "message";
	254
	255	buf += '<tr><td class="timestamp">';
	256
	257	if (d.__REALTIME_TIMESTAMP != undefined) {
	258	var timestamp = new Date(parseInt(d.__REALTIME_TIMESTAMP) / 1000);
	259	buf += timestamp.toLocaleString();
	260	}
bf5542f8	261
1dac8b79	262	buf += '</td><td class="process">';
bf5542f8 LP	263
bf5542f8 LP	264	if (d.SYSLOG_IDENTIFIER != undefined)
1dac8b79	265	buf += d.SYSLOG_IDENTIFIER;
bf5542f8	266	else if (d._COMM != undefined)
1dac8b79	267	buf += d._COMM;
bf5542f8 LP	268
bf5542f8 LP	269	if (d._PID != undefined)
1dac8b79	270	buf += "[" + d._PID + "]";
bf5542f8	271	else if (d.SYSLOG_PID != undefined)
1dac8b79 LP	272	buf += "[" + d.SYSLOG_PID + "]";
	273
	274	buf += '</td><td class="' + clazz + '">';
bf5542f8 LP	275
bf5542f8 LP	276	if (d.MESSAGE == null)
1dac8b79	277	buf += "[blob data]";
bf5542f8	278	else if (d.MESSAGE instanceof Array)
1dac8b79	279	buf += "[" + formatBytes(d.MESSAGE.length) + " blob data]";
bf5542f8	280	else
1dac8b79	281	buf += d.MESSAGE;
bf5542f8	282
1dac8b79	283	buf += '</td></tr>';
bf5542f8 LP	284	}
bf5542f8 LP	285
1dac8b79 LP	286	logs.innerHTML = buf + '</tbody>';
1dac8b79 LP	287
bf5542f8 LP	288	if (fc != null)
	289	first_cursor = fc;
	290	if (lc != null)
	291	last_cursor = lc;
	292	}
	293
	294	function entriesMore() {
	295	setNEntries(getNEntries() + 10);
	296	entriesLoad("");
	297	}
	298
	299	function entriesLess() {
	300	setNEntries(getNEntries() - 10);
	301	entriesLoad("");
	302	}
	303
	304	machineLoad();
	305	entriesLoad("");
	306	showNEntries(getNEntries());
	307	</script>
	308	</body>
	309	</html>