Source

node-iostat / iostat.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Disk Utilization</title>
    <link href="/static/layout.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="/static/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="/static/jquery.flot.js"></script>
 </head>
    <body>
    <h1>Disk Utilization</h1>

    <div id="placeholder" style="width:800px;height:300px;"></div>

    <label for="id_display_mode">Display:</label>
    <select name="display_mode" id="id_display_mode"></select>

<script type="text/javascript">
var options = {
  clickable: true,
  hoverable: true,
  lines: { show: true },
  //points: { show: true },
  xaxis: {
    mode: 'time',
    minTickSize: [1, 'second'],
    tickSize: [20, 'second'],
    //timeformat: '%H:%M:%S'
  }
};
var columns = null
var data = [];
var last_stamp = null;
var max_size = 120;

$(function () {
  setInterval(fetchData, 1000);

  display_mode = $('#id_display_mode');
  $.ajax({
    url: "/data/column_names",
    method: 'GET',
    dataType: 'json',
    success: function (result) {
      columns = result;
      for (var i = 0; i < columns.length; i++) {
        col = columns[i];
        sel = col == 'util' ? ' selected="selected"' : '';
        display_mode.append('<option' + sel +'>' + columns[i] + '</option>');
      }
    }
  });
  display_mode.change(function () { data = []; last_stamp = null; });
});

function updateDataSet(new_data) {
  var match_found = false;
  for (s in data) {
    series = data[s];
    if (series.label == new_data.label) {
      match_found = true;
      data[s].data = series.data.concat(new_data.data);

      // make sure we only have a certain amount of data
      data[s].data = data[s].data.filter(function (point) {
        return point[0] >= (+new Date() - (max_size * 1000));
      });
      return;
    }
  }

  if (!match_found) data.push(new_data);
}

function fetchData() {
  function onDataReceived(series) {
    // we get all the data in one go, if we only got partial
    // data, we could merge it with what we already got
    series.map(updateDataSet);

    last_stamp = +new Date();
    $.plot($("#placeholder"), data, options);
  }

  params = {};
  if (last_stamp !== null)  params = {since: last_stamp};

  $.ajax({
    // usually, we'll just call the same URL, a script
    // connected to a database, but in this case we only
    // have static example files so we need to modify the
    // URL
    url: "/data/" + $('#id_display_mode').val(),
    data: params,
    method: 'GET',
    dataType: 'json',
    success: onDataReceived
  });
}
</script>

 </body>
</html>