Skip to content

Instantly share code, notes, and snippets.

@joellobo

joellobo/General Purpose Monitor

Last active July 31, 2018 20:02
Show Gist options
  • Save joellobo/1eda3ddd5b4c53f68e5e814b6c8d0073 to your computer and use it in GitHub Desktop.
Save joellobo/1eda3ddd5b4c53f68e5e814b6c8d0073 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
General Purpose Monitor
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Monitor</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
display: block;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* ********************************** */
table {
width: 100%;
border-collapse: collapse;
}
th {
background: #ffffff;
color: black;
font-weight: bold;
padding: 1px;
border: 1px solid #ccc;
text-align: center;
height: 30px;
}
td {
padding: 0px;
border: 1px solid #ccc;
text-align: center;
vertical-align: bottom;
}
tr {
line-height: 15px;
}
tr:nth-of-type(odd) {
background: #eee;
}
a:visited {
color: black;
}
.table-resumo {
border: 1px solid black;
}
.url {
width: 30%;
}
.item {
background-color: #E8E8E8;
}
.resultado {
height: 280px;
background-color: #eee;
overflow-y: scroll;
}
</style>
</head>
<body>
<div>
<div id='divDados'>
<div>
<a href="http://10.32.146.60/">Monitor</a> <select id="url"
class="url" name="url">
<option selected value="">Select:</option>
<option
value="http://localhost:8080/integracao-batch/api/monitor/mensagem-thread-tarefa">Mensagem/Tarefa/Thread</option>
<option
value="http://localhost:8080/integracao-batch/api/monitor/solicitacaoajuizamento">Solicitação
Ajuizamento por Situação</option>
<option value="outra">Outra</option>
</select> <label for="url">Interval (in sec): <input type="text"
id="intervalo" name="intervalo" size="6" value="1">
</label> <input type="checkbox" id="scales" name="feature" value="scales"
checked onchange="exibirGrafico()" /> <label for="scales">Graphic</label>
<button onclick="start()">Start</button>
<button onclick="reStart()">ReStart</button>
<button onclick="stop()">Stop</button>
<button id="pause" onclick="pause()">Pause</button>
</div>
<div id="divGrafico" class="column">
<canvas id="line-chart" width="1800" height="450"></canvas>
</div>
</div>
<br>
<div>
<table>
<tr>
<td>Time:</td>
<td><label id="timer">-</label></td>
<td>Return:</td>
<td><label id="count">-</label></td>
</tr>
</table>
</div>
<br>
<div class="resultado">
<table id="res">
<thead>
<tr id="cabecalho">
<th class="item">Date/Time</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script>
"use strict";
var intervalo = 1;
var pause = 0;
var stoped = 0
var count = 0;
var labels = [];
var dados = [];
var grafico = chart(labels, dados);
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function getItem() {
return {
data : [],
label : "",
borderColor : "#3cba9f",
fill : false
};
}
function exibirGrafico() {
if (document.getElementById('scales').checked) {
document.getElementById('divGrafico').style.display = "block";
} else {
document.getElementById('divGrafico').style.display = "none";
}
}
function timer() {
refresh(document.getElementById('url').value);
document.getElementById("timer").innerHTML = intervalo * count
+ "s";
}
function start() {
intervalo = document.getElementById('intervalo').value;
limparDados();
window.pause = 0;
window.count = 0;
window.stoped = 0
window.counter = setInterval(timer, intervalo * 1000);
document.getElementById("pause").innerHTML = "Pause"
document.getElementById("timer").innerHTML = intervalo * count
+ "s";
}
function stop() {
clearInterval(counter);
//window.count=0;
window.pause = 0;
document.getElementById("pause").innerHTML = "Pause"
window.stoped = 1
document.getElementById("timer").innerHTML = intervalo * count
+ "s";
}
function reStart() {
refresh(document.getElementById('url').value);
if (counter) {
clearInterval(counter);
window.pause = 0;
window.count = 0;
window.stoped = 0
window.counter = setInterval(timer, intervalo * 1000);
count = count + 1;
document.getElementById("pause").innerHTML = "Pause"
document.getElementById("timer").innerHTML = intervalo
* count + "s";
}
}
function pause() {
if (stoped == 0) {
if (pause == 0) {
clearInterval(counter);
document.getElementById("pause").innerHTML = "Resume"
pause = 1;
return;
}
if (pause == 1) {
window.counter = setInterval(timer, intervalo * 1000);
document.getElementById("timer").innerHTML = intervalo
* count + "s";
document.getElementById("pause").innerHTML = "Pause"
pause = 0;
return;
}
}
return;
}
function getJSON(url, callback) {
count++;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.send();
}
function pad(num, size) {
var s = num + "";
while (s.length < size)
s = "0" + s;
return s;
}
function getDate() {
var date = new Date(), year = date.getFullYear(), month = (date
.getMonth() + 1).toString(), formatedMonth = (month.length === 1) ? ("0" + month)
: month, day = date.getDate().toString(), formatedDay = (day.length === 1) ? ("0" + day)
: day, hour = date.getHours().toString(), formatedHour = (hour.length === 1) ? ("0" + hour)
: hour, minute = date.getMinutes().toString(), formatedMinute = (minute.length === 1) ? ("0" + minute)
: minute, second = date.getSeconds().toString(), formatedSecond = (second.length === 1) ? ("0" + second)
: second;
//return formatedDay + "-" + formatedMonth + "-" + year + " " + formatedHour + ':' + formatedMinute + ':' + formatedSecond;
return formatedHour + ':' + formatedMinute + ':'
+ formatedSecond;
}
function refresh(url) {
getJSON(url, function(err, data) {
document.getElementById("count").innerHTML = count;
if (err !== null) {
var tableRef = document.getElementById('res')
.getElementsByTagName('tbody')[0];
var newRow = tableRef.insertRow(0);
newRow.style.backgroundColor = "red";
var newCell = newRow.insertCell(0);
var newText = document.createTextNode('ERROR!!!');
newCell.appendChild(newText);
} else {
if (count === 1) {
var object = data;
var linha = document.getElementById('cabecalho');
var countCell = 1;
for ( var key in object) {
var property = object[key];
var celula = linha.insertCell(countCell);
var texto = document.createTextNode(key);
celula.appendChild(texto);
var item = getItem();
item.borderColor = getRandomColor();
item.label = key;
dados.push(item);
countCell++;
}
}
var tableRef = document.getElementById('res')
.getElementsByTagName('tbody')[0];
var newRow = tableRef.insertRow(0);
var newCell1 = newRow.insertCell(0);
var newText1 = document.createTextNode(getDate());
newCell1.appendChild(newText1);
labels.push(count);
countCell = 1;
for ( var key in data) {
var newCell2 = newRow.insertCell(countCell);
var newText2 = document.createTextNode(data[key]);
newCell2.appendChild(newText2);
dados[countCell - 1].data
.push(parseInt(newText2.data));
countCell++;
}
chart(labels, dados);
}
});
}
function limparDados() {
labels = [];
dados = [];
}
function chart(labels, dados) {
if (grafico === undefined) {
grafico = new Chart(document.getElementById("line-chart"),
{
type : 'line',
data : {
labels : labels,
datasets : dados
}
});
} else {
grafico.data.datasets.labels = labels;
grafico.data.datasets = dados;
grafico.update();
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment