compsci-industry
/
TechEmpower.FrameworkBenchmarks
mirror of https://github.com/TechEmpower/FrameworkBenchmarks.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
							<html>
<head>
<title>Performance Monitoring</title>
<link type="text/css" rel="stylesheet" href="../css/basicadmin.css" />
<link rel="shortcut icon" href="../images/monitor-graph.png" />
<style>

body, td {
  font-family: calibri, tahoma, verdana, arial, helvetica;
  font-size: 10px;
  margin: 0px 0px 0px 0px;
}

#countdown {
  position: fixed;
  right: 0px;
  height: 100%;
  width: 5px;
  background-color: rgb(100,100,110);
  background: -moz-linear-gradient(top, rgb(90,90,100), rgb(200,200,210));
  -moz-box-shadow: 0px 0px 10px rgba(100,100,110,0.75);
}

#countdown.error {
  background-color: rgb(190,10,10);
  background: -moz-linear-gradient(top, rgb(160,0,0), rgb(230,20,20));
  -moz-box-shadow: 0px 0px 10px rgba(190,10,10,0.75);
}

#lastupdate {
  margin: 4px 4px 4px 30px;
}

#health {
  height: 175px;
  margin: 4px 4px 4px 0px;
}

#datatable {
  margin: 4px 4px 4px 30px;
}

#uptime {
  padding: 4px 4px 4px 30px;
}

#controls {
  margin: 10px 4px 10px 30px;
}

#controls .enabled {
  border: 2px solid rgb(100,100,110);
  padding: 2px 4px 2px 4px;
  margin-right: 6px;
  -moz-box-shadow: 0px 0px 10px rgba(100,100,110,0.5);
}

#controls a {
  border: 1px solid rgb(180,180,240);
  padding: 3px 5px 3px 5px;
  -moz-box-shadow: 0px 0px 10px rgba(100,100,190,0.25);
  text-decoration: none;
  margin-right: 6px;
  color: rgb(40,40,130);
}

#controls a:hover {
  border: 2px solid rgb(180,240,180);
  padding: 2px 4px 2px 4px;
  -moz-box-shadow: 0px 0px 10px rgba(100,190,100,0.5);
  background-color: rgb(200,255,200);
  color: black;
}

</style>
<script type="text/javascript" src="../js/basicadmin.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.flot.js"></script>
</head>

<body>

<div id='countdown'>&nbsp;</div>

<div id="uptime">[Uptime]</div>

<div id="health">[Health]</div>

<table id='datatable' border="0" cellpadding="0" cellspacing="0">
<tbody id='header'>
</tbody>
<tbody id='cmds'>
</tbody>
</table>

<div id="controls"></div>

<div id="lastupdate">[Last update]</div>
<div id="message"></div>

</body>

<script>

var mode = 0,
     svUrl = '../',
    detail = '',
    exc = 5,
    commands,
    content = "",
    concurrencyHighlight = 10,
    titles = ["Performance Monitoring", "Error - Cannot fetch performance data"],
    refreshInterval = 5,
    nextRefresh = refreshInterval,
    seconds = nextRefresh,
    maximumRefresh = 60,
    lastUpdate = 0;

if (!Date.now) {
  Date.now = function now() {
    return +new Date();
  };
}

function renderHeader() {
  var content = '';

  // Performance monitoring mode.
  if (mode == 0) {
    content =
        '<tr class="admheader">'
      + '<td rowspan="2" valign="bottom">Command</td>'
      + '<td rowspan="2" valign="bottom"><abbr title="Current load">CL</abbr></td>'
      + '<td rowspan="2" valign="bottom"><abbr title="Count since application start">Count</abbr></td>'
      + '<td rowspan="2" valign="bottom"><abbr title="Count in last hour">LH</abbr></td>'
      + '<td class="separator">&nbsp;</td>'
      + '<td colspan="6" align="center">Average in last hour</td>'
      + '<td class="separator">&nbsp;</td>'
      + '<td colspan="5" align="center">Worst in last hour</td>'
      + '</tr>'
      + '<tr class="admheader">'
      + '<td class="separator">&nbsp;</td>'
      + '<td align="right"><abbr title="Queries">Qs</abbr></td>'
      + '<td align="right"><abbr title="Query Time">QT</abbr></td>'
      + '<td align="right"><abbr title="Logic Time">LT</abbr></td>'
      + '<td align="right"><abbr title="Render Time">RT</abbr></td>'
      + '<td align="right"><abbr title="CPU Time">CT</abbr></td>'
      + '<td align="right">Total</td>'
      + '<td class="separator">&nbsp;</td>'
      + '<td align="right"><abbr title="Queries">Qs</abbr></td>'
      + '<td align="right"><abbr title="Query Time">QT</abbr></td>'
      + '<td align="right"><abbr title="Logic Time">LT</abbr></td>'
      + '<td align="right"><abbr title="Render Time">RT</abbr></td>'
      + '<td align="right"><abbr title="CPU Time">CT</abbr></td>'
      + '<td class="separator">&nbsp;</td>'
      + '</tr>';
  }
  // Current requests mode.
  else if (mode == 1) {
    content =
        '<tr class="admheader">'
      + '<td>Command</td>'
      + '<td><abbr title="Request Number">Req</abbr></td>'
      + '<td><abbr title="Thread ID">TID</abbr></td>'
      + '<td><abbr title="Request start time">Time</abbr></td>'
      + '<td class="separator">&nbsp;</td>'
      + '<td align="right"><abbr title="Dispatches">Ds</abbr></td>'
      + '<td align="right"><abbr title="Queries">Qs</abbr></td>'
      + '<td align="right"><abbr title="Query Exceptions">QEs</abbr></td>'
      + '<td align="right"><abbr title="Query Time">QT</abbr></td>'
      + '<td align="right"><abbr title="Logic Time">LT</abbr></td>'
      + '<td align="right"><abbr title="Render Time">RT</abbr></td>'
      + '<td align="right"><abbr title="CPU Time">CT</abbr></td>'
      + '<td align="right"><abbr title="Total time">Total</abbr></td>'
      + '</tr>';
  }
  $("tbody#header").html(content);
}

function render(commands, uptime) {
  if (mode == 0) {
    $("tbody#cmds").html(gba.renderPerformanceMonitorList(commands, detail, exc, 2, concurrencyHighlight));
  }
  else if (mode == 1) {
    $("tbody#cmds").html(gba.renderCurrentRequestList(commands, detail, 2));
  }
  lastUpdate = Date.now();
  if (uptime != null) {
    $("div#uptime").html("Application last reported " + uptime + ".");
  }
};

function refresh() {
  var urlSuffix = '?cmd=admin-monitor-list&mode=1'
  if (mode == 1) {
    urlSuffix = '?cmd=admin-monitor-current&mode=1';
  }

  $.ajax({
    url: svUrl + urlSuffix,
    dataType: 'json',
    type: 'get',
    data: {},
    timeout: 4000,
    success: function(data) {
        if (data != null) {
          document.title = titles[0];
          $("div#countdown").removeClass("error");
          nextRefresh = refreshInterval;
          if (seconds > nextRefresh)
            seconds = nextRefresh;
          if (mode == 0)
            render(data.commands, data.uptime);
          else
            render(data.requests, data.uptime);
          gba.renderHealthMonitorFlot(data.health, data.tzshift, data.interval, "div#health");
        }
        else {
          refreshError();
        }
      },
    error: refreshError
    });
}

function refreshError() {
  document.title = titles[1];

  $("div#countdown").addClass("error");

  // Back off a bit.
  var newRefresh = nextRefresh + refreshInterval;
  if (newRefresh > maximumRefresh)
    newRefresh = maximumRefresh;
  seconds += (newRefresh - nextRefresh);
  nextRefresh = newRefresh;
}

function countdown() {
  seconds--;
  if (seconds == 0) {
    refresh();
    seconds = nextRefresh;
  }
  if (seconds == nextRefresh) {
    $("div#countdown").height("100%");
  }
  else {
    $("div#countdown").height(seconds * (100 / nextRefresh) + "%");
  }
  refreshLastUpdate();
}

function refreshLastUpdate() {
  if (lastUpdate > 0) {
    var sec = Math.floor((Date.now() - lastUpdate) / 1000);
    var content = "Last update at " + new Date(lastUpdate) + " (" + sec + " second" + (sec == 1 ? "" : "s") + " ago).";
    $("div#lastupdate").html(content);
  }
}

function renderControls() {
  var content = '';

  function item(label, index) {
    if (mode != index)
      return ' <a href="javascript:switchMode(' + index + ');">' + label + '</a>';
    else
      return ' <span class="enabled">' + label + '</span>';
  }

  content += item("Overall Performance", 0);
  content += item("Current Requests", 1);

  $("div#controls").html(content);
}

function switchMode(newMode) {
  mode = newMode;
  renderControls();
  renderHeader();
  refresh();
}

renderControls();
renderHeader();
refresh();
window.setInterval(countdown, 1000);

</script>
</html>