双六工場日誌

平凡な日常を淡々と綴ります。

jQuery を使って JavaScript から Zabbix API を使ってみる。

あけましておめでとうございます。こんな適当なブログですが、今年もよろしくお願いします。

さて、全く新年らしいネタではないのですが、正月休みに jQuery を勉強してみたので、その中で書いた Zabbix API を叩くスクリプトを晒してみます。
hbstudy#15 では Zabbix API の使用例として寺島さんが jQuery を使ったものを紹介してくれたのですが、僕は jQuery を使ったことがなかったので、そのときはさっぱりわからず。なので、それの復習を兼ねてつくってみました。
動作確認用程度のものですが、休みも今日で終わってしまうのでとりあえず。

今回 jQuery は 1.3.2 を使っています。ファイルは http://jquery.com/ からダウンロードして下さい。
jquery-1.3.2.min.js と以下の2つのファイルを Zabbix サーバ上の Web サーバから見られるディレクトリ（/var/www/html など）に配置してHTMLファイルを読み込んでください。

読み込むとテキストボックスとボタンが出てくるはずなので、テキストボックスに Zabbix API のメソッド（host.get, template.get など）を入力して、ボタンを押すとその結果をその下に表示します。
実行結果は、こんな感じです。↓

本当はいろいろネタを仕込みたかったのですが、ネタはまた今度に^^

zabbix-api-demo.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zabbix API Demo</title>
<script src="jquery-1.3.2.min.js" type="text/javascript">
</script>
<script src="zabbix-api.js" type="text/javascript">
</script>
</head>
<body>
<form name="method_form" onSubmit="return false;">
    <input type="text" name="method_text" value="host.get">
    <input type="button" onClick="main(method_text.value)">
</form>
<div id="datatable"></div>
</body>
</html>

zabbix-api.js

// main
function main(method){
    var auth = getAuth("Admin", "zabbix");
    var rpcid = auth.id + 1;
    var filter = new Object(); // 未使用。
    var params = new Object();
        params.output = "extend";
        params.limit = 100;
        params.filter = filter;	
    
    getZabbixData(rpcid, auth.result, method, params);
}

//API Access Authentication
function getAuth(user, password) {
    var params = {"user":user, "password":password};
    var authRequest = new Object();
        authRequest.params = params;
        authRequest.auth = null;
        authRequest.jsonrpc = '2.0';
        authRequest.id = 0;
        authRequest.method = 'user.authenticate';
    var authJsonRequest = JSON.stringify(authRequest);
    var authResult = new Object();
    $.ajax({
        url: '/zabbix/api_jsonrpc.php',
        contentType: 'application/json-rpc',
        dataType: 'json',
        type: 'POST',
        processData: false,
        async: false, // 認証が終わらないと次の処理ができないので、ここは同期通信に。
        data: authJsonRequest,
        success: function(response){
            authResult = response;
        },
        error: function(){ alert("failed"); },
    });
    return(authResult); // 認証結果をObjectとして返して"auth.id", "auth.result"で取り出す。
}

// Access Zabbix API and Get Data
function getZabbixData(rpcid, authid, method, params) { // "params"はJSON形式の文字列リテラルかJSONに変換可能なオブジェクト
    var dataRequest = new Object();
        dataRequest.params = params;
        dataRequest.auth = authid;
        dataRequest.jsonrpc = '2.0';
        dataRequest.id = rpcid;
        dataRequest.method = method;
    var dataJsonRequest = JSON.stringify(dataRequest);
    $.ajax({
        type: 'POST',
        url: '/zabbix/api_jsonrpc.php',
        contentType: 'application/json-rpc',
        dataType: 'json',
        processData: false,
        data: dataJsonRequest,
        success: function(response){
            showResult(response);
        },
        error: function(response){ alert("failed"); },
    });
    //return dataResult;
}

// 取り出したデータをテーブルとして出力
function showResult(response){
    var strTable = "";
    strTable += "<table>";
    for(var index in response.result) {
        strTable += "<tr><th>";
        strTable += "host"; // "host"欄をテーブルのタイトル行に。
        strTable += "</th><th>";
        strTable += response.result[index].host;
        strTable += "</th></tr>";
        for ( var itemname in response.result[index]){
            if (itemname == "host") { continue };
            strTable += "<tr><td>";
            strTable += itemname;
            strTable += "</td><td>";
            if (typeof(response.result[index][itemname]) == "object"){
                strTable += JSON.stringify(response.result[index][itemname]);
            } else {
                strTable += response.result[index][itemname];
            }
            strTable += "</td></tr>";
        }
    }
    strTable += "</table><br>";
    document.getElementById("datatable").innerHTML = strTable;
}