ZabbxAPIとJavaScriptで独自UI作ってみた２

Zabbix

ZabbixにCactiみたいなビューが欲しいなーと思ったので、
前作ったやつの改良版を作ってみました。

見た目はこんな感じです

左のツリービューでホストを選択すると全てのグラフが右側に表示されます。
Cactiそのままですねー


しかしそろそろ普通にPHPで書いたほうがいいんじゃないかという気がしてきました。
JSでAPI叩くとそのユーザでZabbix自体にログインしちゃうみたいだし（＝＝

ソースコードたち

ものすごくやっつけなのでそのまま使うとか考えないでください＞＜
（そもそもFirefoxしか動作確認してません）
ツリービューのところはjQuery plugin: Treeviewを使っています。

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 View</title>
<link rel="stylesheet" href="js/jquery.treeview.css" />
<link rel="stylesheet" href="css/zbx_treeview.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.treeview.js"></script>
<script type="text/javascript" src="js/zabbix_api.js"></script>
<script type="text/javascript" src="js/zbx_treeview.js"></script>
</head>
<body>

<div id=navi>
<ul id="treeview"></ul>
</div>
<div id="graphview"></div>

</body>
</html>

JSその１

var zbx_hostgroups = {};
var zbx_hosts = {};


function initHostgroups(){
  getAPIResponse(
    'hostgroup.get',
    {output:"extend", select_hosts:"refer", sortfield:"name"},
    false,
    function(hostgroups){
      $.each(hostgroups, function(idx, hg){
        var hostids = $.map(hg.hosts, function(h){return h.hostid;});
        zbx_hostgroups[hg.groupid] = {name:hg.name, hostids:hostids};
      });
    }
  );

};

function initHosts(){
  getAPIResponse(
    'host.get',
    {output:"extend", select_graphs:"refer", sortfield:"host"},
    false,
    function(hosts){
      $.each(hosts, function(idx, h){
        var graphids = $.map(h.graphs, function(g){return g.graphid});
        zbx_hosts[h.hostid] = {name:h.host, graphids:graphids};
      });

    }
  );

}

function updateTreeView(){
  $.each(zbx_hostgroups, function(idx, hg){
    var li = $('<li></li>').text(hg.name);
    $.each(hg.hostids, function(idx, hid){
      li.append($('<ul></ul>').text(zbx_hosts[hid].name).attr('hostid', hid).click(updateGraph));
    });
    $('#treeview').append(li);
  });
}

function updateGraph(){
  var hostid = $(this).attr('hostid');
  $('#graphview').empty();
  $.each(zbx_hosts[hostid].graphids, function(idx, graphid){
    var url = zabbixTop + "/chart2.php?width=500&height=150&period=86400&graphid=" + graphid;
    $('#graphview').append($('<img/>').attr('src', url));
    $('#graphview').append($('<br/>'));
  });
}

$(document).ready(function(){
  authAPI();
  initHostgroups();
  initHosts();
  updateTreeView();
  $("#treeview").treeview({collapsed : true});
});
JSその２
var authid;
var zabbixTop = 'http://<Zabbixサーバ>/zabbix';
var user     = '<API用ユーザ>';
var password = '<API用パスワード>';

function callAPI(method, params, async, success, error) {
  var url  = zabbixTop + '/api_jsonrpc.php';

  var sendData = {
    jsonrpc: '2.0',
    id:      1,
    auth:    authid,
    method:  method,
    params:  params,
  }

  $.ajax({
    url:          url,
    contentType: 'application/json-rpc',
    dataType:    'json',
    type:        'POST',
    processData: false,
    data:        JSON.stringify(sendData),
    async:       async,
    success:     success,
    error:       error,
  });
};

function getAPIResponse(method, params, async, callback){
  callAPI(method, params, async,
    function(response){
      if(response['error']){
        alert("API Error:" + JSON.stringify(response));
      }else{
        callback(response['result']);
      }
    },
    function(response){
      alert("Connect Error:" + JSON.stringify(response));
    }
  );
}

function authAPI() {
  authid = null;
  getAPIResponse(
    'user.authenticate',
    {"user":user, "password":password},
    false,
    function(result){
        authid = result;
    }
  );
}
CSS
#navi{
    width: 200px;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    float: left;
}
#graphview{
    width: 600px;
    margin-left: 50px
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    float: left;
}