Jolokia: creare un client javascript

Uno dei punti di forza di Jolokia è sicuramente il fatto che esponga oggetti complessi come  i MBean di JMX in un protocollo semplice come l’HTML e in formato JSON.

Lo stesso team di sviluppo fornisce delle librerie javascript che permettono a chiunque abbia un minimo di conoscenze di JQuery di collegarsi all’agent remoto e recuperare i dati desiderati.

Creeremo ora un semplice Proof of Concept di un simile client. Lo scopo non è tanto coprire tutte le funzionalità possibili (si tratta di una pagina veramente basilare) quanto di illustrare l’utilizzo dello strumento per ottenere le informazioni necessarie sui MBean che vogliamo analizzare.

Client javascript e Dipendenze

Il client javascript è scaricabile direttamente dal sito di Jolokia sia in versione standard che “minified” per ottimizzare la pagina.

La libreria richiede alcune dipendenze aggiuntive come Jquery (va benissimo l’ultima versione) e la libreria di serializzazione di oggetti json-2

il risultato finale delle nostre inclusioni di librerie dovrebbe essere qualcosa di simile:

<script type=”text/javascript” src=”js/jquery/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”js/json/json2.js”></script>
<script type=”text/javascript” src=”js/jolokia/jolokia-min.js”></script>
<script type=”text/javascript” src=”js/jolokia/jolokia-simple-min.js”></script>

Scheletro della pagina

Creiamo una pagina veramente basilare, con una combo per la scelta degli Mbean, un pulsante per attivare la richiesta e un paio di div per lo stato di ritorno della chiamata e i dati veri e propri:

<body onload=”initSel()”>
<table>
<tr>
<td><button onclick=”doRequest(this)”>Get</button></td>
<td><select id=”sel”></select></td>
<td><div id=”result”></div></td>
</tr>
</table>
<pre id=”resp”></pre>
</body>

Client jolokia e chiamate

Passiamo quindi a creare un istanza del client vero e proprio, facendolo puntare al nostro server da analizzare.
Attiviamo da subito la modalità JSONP per evitare problemi di chiamate Cross-Origin

var server=http://123.456.78.90:8080/jolokia
var j4p = new Jolokia({url: server,”jsonp”:true});

prepariamoci un elenco di MBean che vogliamo analizzare e una piccola funzione DOM che ci popoli la select html per velocizzare il tutto.

var mbeans = [
“java.lang:type=Threading”,
“java.lang:type=Memory”,
“java.lang:type=OperatingSystem”,
“java.lang:type=Runtime”
];

sel = document.getElementById(“sel”);
for (var i = 0; i < mbeans.length; i++) {
op = document.createElement(“option”);
op.value = mbeans[i];
op.text = mbeans[i]
sel.appendChild(op);
}

Infine, effettuiamo la chiamata vera e propria, in puro stile jquery,  tramite il client e inseriamo il risultato nel div prescelto.
Aggiungiamo giusto un minimo di error-handling per essere sicuri che vada tutto a buon fine

function doRequest(){
var value = sel.options[sel.selectedIndex].value

j4p.request(
{
type: “read”,
mbean: value
},
{
success: function(response) {
r = document.getElementById(“result”);
r.innerHTML = “<p>OK</p>”;
pre = document.getElementById(“resp”);
pre.innerHTML = JSON.stringify(response, undefined, 2);

},
error: function(response) {
r = document.getElementById(“result”);
r.innerHTML = “<p>ERROR:”+response.error+”</p>”;
pre = document.getElementById(“resp”);
pre.innerHTML = “”;
}
});
}

Apriamo la nostra pagina nel browser ed eseguiamo la chiamata relativa alla memoria, il risultato dovrebbe essere qualcosa di simile:

jolokia js memoria

Ultimi ritocchi

Molto bene, abbiamo quasi finito, aggiungiamo solo una piccola modifica, facciamo in modo che l’elenco dei MBean non sia un array cablato nel codice, ma l’elenco intero fornito dal server tramite jolokia stesso.

Trovate il codice dell’intera pagina (onde evitare omissioni anche nella parte precedente) qui sotto.

Una piccola aggiunta necessaria per far funzionare il 100% dei bean ritornati dovrebbe essere il corretto escaping dei caratteri speciali in modo che l’agent remoto li interpreti correttamente, (trovate i dettagli del problema sul tutorial sul sito di jolokia)
Per il momento ci limiteremo a skippare i casi particolari, visto che vogliamo fermarci ad un semplice draft e non ad un tool dalle funzionalità complete, se volete estendere il client… mandatemi le vostre modifiche 😉

<html>
<head>
<title></title>
<head>
<script type=”text/javascript” src=”js/jquery/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”js/json/json2.js”></script>
<script type=”text/javascript” src=”js/jolokia/jolokia-min.js”></script>
<script type=”text/javascript” src=”js/jolokia/jolokia-simple-min.js”></script>
<script>

var server=http://123.456.78.90:8080/jolokia
// Create a new jolokia client accessing the agent on the same
// Host which serves this document:
var j4p = new Jolokia({url: server,”jsonp”:true});
var sel;

var mbeans = [
“java.lang:type=Threading”,
“java.lang:type=Memory”,
“java.lang:type=OperatingSystem”,
“java.lang:type=Runtime”
];

function initSel(){

j4p.list({},{success:function(response){ console.log(util.inspect(response, true, 10));}});
var url = server + “/search/*:*”;
$.ajax({
url: url,
success: function(data) {
console.log(data);
mbeans = data.value;
mbeans.sort();
sel = document.getElementById(“sel”);
for (var i = 0; i < mbeans.length; i++) {

//temporary skipp complex path untill managed
if(mbeans[i].indexOf(“/”)!=-1) continue;

op = document.createElement(“option”);
op.value = mbeans[i];
op.text = mbeans[i]
sel.appendChild(op);
}
},
dataType: “json”
});
}
// Request the information asynchronously and print them
function doRequest(){
var value = sel.options[sel.selectedIndex].value
//value= value.replace(/\//g,’!/’);
console.log(value);
j4p.request(
{
type: “read”,
mbean: value
},
{
success: function(response) {
r = document.getElementById(“result”);
r.innerHTML = “<p>OK</p>”;
pre = document.getElementById(“resp”);
pre.innerHTML = JSON.stringify(response, undefined, 2);

},
error: function(response) {
r = document.getElementById(“result”);
r.innerHTML = “<p>ERROR:”+response.error+”</p>”;
pre = document.getElementById(“resp”);
pre.innerHTML = “”;
}
});
}

</script>
<style type=”text/css”>
body{
font-size:x-small;
}
</style>
</head>
<body onload=”initSel()”>
<table>
<tr>
<td><button onclick=”doRequest(this)”>Get</button></td>
<td><select id=”sel”></select></td>
<td><div id=”result”></div></td>
</tr>
</table>

<pre id=”resp”></pre>
</body>
</html>

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

w

Connessione a %s...