--[[
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
]]
--[[ mod_lua implementation of the server-status page ]]
local ssversion = "0.11" -- verion of this script
local redact_ips = true -- whether to replace the last two bits of every IP with 'x.x'
local warning_banner = [[
<div style="float: left; color: #222; margin-bottom: 8px; margin-top: 24px; text-align: center; width: 200px; font-size: 0.7rem; border: 1px dashed #333; background: #F8C940;">
<h3 style="margin: 4px; font-size: 1rem;">Don't be alarmed - this page is here for a reason!</h3>
<p style="font-weight: bolder; font-size: 0.8rem;">This is an example server status page for the Apache HTTP Server. Nothing on this server is secret, no URL tokens, no sensitive passwords. Everything served from here is static data.</p>
</div>
]]
local show_warning = true -- whether to display the above warning/notice on the page
local show_modules = false -- Whether to list loaded modules or not
local show_threads = true -- whether to list thread information or not
-- pre-declare some variables defined at the bottom of this script:
local status_js, status_css, quokka_js
-- quick and dirty JSON conversion
local function quickJSON(input)
if type(input) == "table" then
local t = 'array'
for k, v in pairs(input) do
if type(k) ~= "number" then
t = 'hash'
break
end
end
if t == 'hash' then
local out = ""
local tbl = {}
for k, v in pairs(input) do
local kv = ([["%s": %s]]):format(k, quickJSON(v))
table.insert(tbl, kv)
end
return "{" .. table.concat(tbl, ", ") .. "}"
else
local tbl = {}
for k, v in pairs(input) do
table.insert(tbl, quickJSON(v))
end
return "[" .. table.concat(tbl, ", ") .. "]"
end
elseif type(input) == "string" then
return ([["%s"]]):format(input:gsub('"', '\\"'):gsub("[\r\n\t]", " "))
elseif type(input) == "number" then
return tostring(input)
elseif type(input) == "boolean" then
return (input and "true" or "false")
else
return "null"
end
end
-- Module information callback
local function modInfo(r, modname)
if modname then
r:puts [[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
]]
r:puts (status_css)
r:puts [[
</style>
<title>Module information</title>
</head>
<body>
]]
r:puts( ("<h3>Details for module %s</h3>\n"):format(r:escape_html(modname)) )
-- Queries the server for information about a module
local mod = r.module_info(modname)
if mod then
for k, v in pairs(mod.commands) do
-- print out all directives accepted by this module
r:puts( ("<b>%s:</b> %s<br>\n"):format(r:escape_html(k), v))
end
end
-- HTML tail
r:puts[[
</body>
</html>
]]
end
end
-- Function for generating server stats
function getServerState(r, verbose)
local state = {}
state.mpm = {
type = "prefork", -- default to prefork until told otherwise
threadsPerChild = 1,
threaded = false,
maxServers = r.mpm_query(12),
activeServers = 0
}
if r.mpm_query(14) == 1 then
state.mpm.type = "event" -- this is event mpm
elseif r.mpm_query(3) >= 1 then
state.mpm.type = "worker" -- it's not event, but it's threaded, we'll assume worker mpm (could be motorz??)
elseif r.mpm_query(2) == 1 then
state.mpm.type = "winnt" -- it's threaded, but not worker nor event, so it's probably winnt
end
if state.mpm.type ~= "prefork" then
state.mpm.threaded = true -- it's threaded
state.mpm.threadsPerChild = r.mpm_query(6) -- get threads per child proc
end
state.processes = {} -- list of child procs
state.connections = { -- overall connection info
idle = 0,
active = 0
}
-- overall server stats
state.server = {
connections = 0,
bytes = 0,
built = r.server_built,
localtime = os.time(),
uptime = os.time() - r.started,
version = r.banner,
host = r.server_name,
modules = nil,
extended = show_threads, -- whether extended status is available or not
}
-- if show_modules is true, add list of modules to the JSON
if show_modules then
state.server.modules = {}
for k, module in pairs(r:loaded_modules()) do
table.insert(state.server.modules, module)
end
end
-- Fetch process/thread data
for i=0,state.mpm.maxServers-1,1 do
local server = r.scoreboard_process(r, i);
if server then
local s = {
active = false,
pid = nil,
bytes = 0,
stime = 0,
utime = 0,
connections = 0,
}
local tstates = {}
if server.pid then
state.connections.idle = state.connections.idle + (server.keepalive or 0)
s.connections = 0
if server.pid > 0 then
state.mpm.activeServers = state.mpm.activeServers + 1
s.active = true
s.pid = server.pid
end
for j = 0, state.mpm.threadsPerChild-1, 1 do
local worker = r.scoreboard_worker(r, i, j)
if worker then
s.stime = s.stime + (worker.stimes or 0);
s.utime = s.utime + (worker.utimes or 0);
if verbose and show_threads then
s.threads = s.threads or {}
table.insert(s.threads, {
bytes = worker.bytes_served,
thread = ("0x%x"):format(worker.tid),
client = redact_ips and (worker.client or "???"):gsub("[a-f0-9]+[.:]+[a-f0-9]+$", "x.x") or worker.client or "???",
cost = ((worker.utimes or 0) + (worker.stimes or 0)),
count = worker.access_count,
vhost = worker.vhost:gsub(":%d+", ""),
request = worker.request,
last_used = math.floor(worker.last_used/1000000)
})
end
state.server.connections = state.server.connections + worker.access_count
s.bytes = s.bytes + worker.bytes_served
s.connections = s.connections + worker.access_count
if server.pid > 0 then
tstates[worker.status] = (tstates[worker.status] or 0) + 1
end
end
end
end
s.workerStates = {
keepalive = (server.keepalive > 0) and server.keepalive or tstates[5] or 0,
closing = tstates[8] or 0,
idle = tstates[2] or 0,
writing = tstates[4] or 0,
reading = tstates[3] or 0,
graceful = tstates[9] or 0
}
table.insert(state.processes, s)
state.server.bytes = state.server.bytes + s.bytes
state.connections.active = state.connections.active + (tstates[8] or 0) + (tstates[4] or 0) + (tstates[3] or 0)
end
end
return state
end
-- Handler function
function handle(r)
-- Parse GET data, if any, and set content type
local GET = r:parseargs()
if GET['module'] then
modInfo(r, GET['module'])
return apache2.OK
end
-- If we only need the stats feed, compact it and hand it over
if GET['view'] and GET['view'] == "json" then
local state = getServerState(r, GET['extended'] == 'true')
r.content_type = "application/json"
r:puts(quickJSON(state))
return apache2.OK
end
if not GET['resource'] then
local state = getServerState(r, show_threads)
-- Print out the HTML for the front page
r.content_type = "text/html"
r:puts ( ([=[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Stylesheet -->
<link href="?resource=css" rel="stylesheet">
<!-- JavaScript-->
<script type="text/javascript" src="?resource=js"></script>
<title>Server status for %s</title>
</head>
<body onload="refreshCharts(false);">
<div class="wrapper" id="wrapper">
<div class="navbarLeft">
<img align='absmiddle' src='?resource=feather' width="15" height="30"/>
Apache HTTPd
</div>
<div class="navbarRight">Status for %s on %s</div>
<div style="clear: both;"></div>
<div class="serverinfo" id="leftpane">
<ul id="menubar">
<li>
<a class="btn active" id="dashboard_button" href="javascript:void(showPanel('dashboard'));">Dashboard</a>
</li>
<li>
<a class="btn" id="misc_button" href="javascript:void(showPanel('misc'));">Server Info</a>
</li>
<li>
<a class="btn" id="threads_button" style="display: none;" href="javascript:void(showPanel('threads'));">Show thread information</a>
</li>
<li>
<a class="btn" id="modules_button" style="display: none;" href="javascript:void(showPanel('modules'));">Show loaded modules</a>
</li>
</ul>
<!-- warning --> %s <!-- /warning -->
</div>
<!-- dashboard -->
<div class="charts" id="dashboard_panel">
<div class="infobox_wrapper" style="clear: both; width: 100%%;">
<div class="infobox_title">Quick Stats</div>
<div class="infobox" id="general_stats">
</div>
</div>
<div class="infobox_wrapper" style="width: 100%%;">
<div class="infobox_title">Charts</div>
<div class="infobox">
<!--Div that will hold the pie chart-->
<canvas id="actions_div" width="1400" height="400" class="canvas_wide"></canvas>
<canvas id="status_div" width=580" height="400" class="canvas_narrow"></canvas>
<canvas id="traffic_div" width="1400" height="400" class="canvas_wide"></canvas>
<canvas id="idle_div" width="580" height="400" class="canvas_narrow"></canvas>
<canvas id="connection_div" width="1400" height="400" class="canvas_wide"></canvas>
<canvas id="cpu_div" width="580" height="400" class="canvas_narrow"></canvas>
<div style="clear: both"></div>
</div>
</div>
</div>
<!-- misc server info -->
<div class="charts" id="misc_panel" style="display: none;">
<div class="infobox_wrapper" style="clear: both; width: 100%%;">
<div class="infobox_title">General server information</div>
<div class="infobox" style='padding: 16px; width: calc(100%% - 32px);' id="server_breakdown">
</div>
</div>
</div>
<!-- thread info -->
<div class="charts" id="threads_panel" style="display: none;">
<div class="infobox_wrapper" style="clear: both; width: 100%%;">
<div class="infobox_title">Thread breakdown</div>
<div class="infobox" style='padding: 16px; width: calc(100%% - 32px);' id="threads_breakdown">
</div>
</div>
</div>
<!-- module info -->
<div class="charts" id="modules_panel" style="display: none;">
<div class="infobox_wrapper" style="clear: both; width: 100%%;">
<div class="infobox_title">Modules loaded</div>
<div class="infobox" style='padding: 16px; width: calc(100%% - 32px);' id="modules_breakdown">
blabla
</div>
</div>
</div>
</div>
]=]):format(
r.server_name,
r.banner,
r.server_name,
show_warning and warning_banner or ""
) );
-- HTML tail
r:puts[[
</body>
</html>
]]
else
-- Resource documents (CSS, JS, PNG)
if GET['resource'] == 'js' then
r.content_type = "application/javascript"
r:puts(quokka_js)
r:puts(status_js)
elseif GET['resource'] == 'css' then
r.content_type = "text/css"
r:puts(status_css)
elseif GET['resource'] == 'feather' then
r.content_type = "image/png"
r:write(r:base64_decode('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'))
end
end
return apache2.OK;
end
------------------------------------
-- JavaScript and CSS definitions --
------------------------------------
-- Set up some JavaScripts:
status_js = [==[
Number.prototype.pad = function(size) {
var str = String(this);
while (str.length < size) {
str = "0" + str;
}
return str;
}
function getAsync(theUrl, xstate, callback) {
var xmlHttp = null;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("GET", theUrl, true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function(state) {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
if (callback) {
callback(JSON.parse(xmlHttp.responseText));
}
}
}
}
var actionCache = [];
var connectionCache = [];
var trafficCache = [];
var processes = {};
var lastBytes = 0;
var lastConnections = 0;
var negativeBytes = 0; // cache for proc reloads, which skews traffic
var updateSpeed = 5; // How fast do charts update?
var maxRecords = 24; // How many records to show per chart
var cpumax = 1000000; // random cpu max(?)
function refreshCharts(json, state) {
if (json && json.processes) {
// general server info box
var gs = document.getElementById('server_breakdown');
gs.innerHTML = "";
gs.innerHTML += "<b>Server version: </b>" + json.server.version + "<br/>";
gs.innerHTML += "<b>Server built: </b>" + json.server.built + "<br/>";
gs.innerHTML += "<b>Server MPM: </b>" + json.mpm.type + " <span id='mpminfo'></span><br/>";
// Get a timestamp
var now = new Date();
var ts = now.getHours().pad(2) + ":" + now.getMinutes().pad(2) + ":" + now.getSeconds().pad(2);
var utime = 0;
var stime = 0;
// Construct state based on proc details
var state = {
timestamp: ts,
closing: 0,
idle: 0,
writing: 0,
reading: 0,
keepalive: 0,
graceful: 0
}
for (var i in json.processes) {
var proc = json.processes[i];
if (proc.pid) {
state.closing += proc.workerStates.closing||0;
state.idle += proc.workerStates.idle||0;
state.writing += proc.workerStates.writing||0;
state.reading += proc.workerStates.reading||0;
state.keepalive += proc.workerStates.keepalive||0;
state.graceful += proc.workerStates.graceful||0;
utime += proc.utime;
stime += proc.stime;
}
}
// Push action state entry into action cache with timestamp
// Shift if more than 10 entries in cache
actionCache.push(state);
if (actionCache.length > maxRecords) {
actionCache.shift();
}
// construct array for QuokkaLines
var arr = [];
for (var i in actionCache) {
var el = actionCache[i];
if (json.mpm.type == 'event') {
arr.push([el.timestamp, el.closing, el.idle, el.writing, el.reading, el.graceful]);
} else {
arr.push([el.timestamp, el.keepalive, el.closing, el.idle, el.writing, el.reading, el.graceful]);
}
}
var states = ['Keepalive', 'Closing', 'Idle', 'Writing', 'Reading', 'Graceful']
if (json.mpm.type == 'event') {
states.shift();
if (document.getElementById('mpminfo')) {
document.getElementById('mpminfo').innerHTML = "(" + fn(parseInt(json.connections.idle)) + " connections in idle keepalive)";
}
}
// Draw action chart
quokkaLines("actions_div", states, arr, { lastsum: true, hires: true, nosum: true, stack: true, curve: true, title: "Thread states" } );
// Get traffic, figure out how much it was this time (0 if just started!)
var bytesThisTurn = 0;
var connectionsThisTurn = 0;
for (var i in json.processes) {
var proc = json.processes[i];
var pid = proc.pid
// if we haven't seen this proc before, ignore its bytes first time
if (!processes[pid]) {
processes[pid] = {
bytes: proc.bytes,
connections: proc.connections,
}
} else {
bytesThisTurn += proc.bytes - processes[pid].bytes;
if (pid) {
x = proc.connections - processes[pid].connections;
connectionsThisTurn += (x > 0) ? x : 0;
}
processes[pid].bytes = proc.bytes;
processes[pid].connections = proc.connections;
}
}
if (lastBytes == 0 ) {
bytesThisTurn = 0;
}
lastBytes = 1;
// Push a new element into cache, prune cache
var el = {
timestamp: ts,
bytes: bytesThisTurn/updateSpeed
};
trafficCache.push(el);
if (trafficCache.length > maxRecords) {
trafficCache.shift();
}
// construct array for QuokkaLines
arr = [];
for (var i in trafficCache) {
var el = trafficCache[i];
arr.push([el.timestamp, el.bytes]);
}
// Draw action chart
quokkaLines("traffic_div", ['Traffic'], arr, { traffic: true, hires: true, nosum: true, stack: true, curve: true, title: "Traffic per second" } );
// Get connections per second
// Push a new element into cache, prune cache
var el = {
timestamp: ts,
connections: (connectionsThisTurn+1)/updateSpeed
};
connectionCache.push(el);
if (connectionCache.length > maxRecords) {
connectionCache.shift();
}
// construct array for QuokkaLines
arr = [];
for (var i in connectionCache) {
var el = connectionCache[i];
arr.push([el.timestamp, el.connections]);
}
// Draw connection chart
quokkaLines("connection_div", ['Connections/sec'], arr, { traffic: false, hires: true, nosum: true, stack: true, curve: true, title: "Connections per second" } );
// Thread info
quokkaCircle("status_div", [
{ title: 'Active', value: (json.mpm.threadsPerChild*json.mpm.activeServers)},
{ title: 'Reserve', value: (json.mpm.threadsPerChild*(json.mpm.activeServers-json.mpm.maxServers))}
],
{ title: "Worker pool", hires: true});
// Idle vs active connections
var idlecons = json.connections.idle;
var activecons = json.connections.active;
quokkaCircle("idle_div", [
{ title: 'Idle', value: idlecons},
{ title: 'Active', value: activecons},
],
{ hires: true, title: "Idle vs active connections"});
// CPU info
while ( (stime+utime) > cpumax ) {
cpumax = cpumax * 2;
}
quokkaCircle("cpu_div", [
{ title: 'Idle', value: (cpumax - stime - utime) / (cpumax/100)},
{ title: 'System', value: stime/(cpumax/100)},
{ title: 'User', value: utime/(cpumax/100)}
],
{ hires: true, title: "CPU usage", pct: true});
// General stats infobox
var gstats = document.getElementById('general_stats');
gstats.innerHTML = ''; // wipe the box
// Days since restart
var u_f = Math.floor(json.server.uptime/8640.0) / 10;
var u_d = Math.floor(json.server.uptime/86400);
var u_h = Math.floor((json.server.uptime%86400)/3600);
var u_m = Math.floor((json.server.uptime%3600)/60);
var u_s = Math.floor(json.server.uptime %60);
var str = u_d + " day" + (u_d != 1 ? "s, " : ", ") + u_h + " hour" + (u_h != 1 ? "s, " : ", ") + u_m + " minute" + (u_m != 1 ? "s" : "");
var ubox = document.createElement('div');
ubox.setAttribute("class", "statsbox");
ubox.innerHTML = "<span style='font-size: 2rem;'>" + u_f + " days</span><br/><i>since last (re)start.</i><br/><small>" + str;
gstats.appendChild(ubox);
// Bytes transferred in total
var MB = fnmb(json.server.bytes);
var KB = (json.server.bytes > 0) ? fnmb(json.server.bytes/json.server.connections) : 0;
var KBs = fnmb(json.server.bytes/json.server.uptime);
var mbbox = document.createElement('div');
mbbox.setAttribute("class", "statsbox");
mbbox.innerHTML = "<span style='font-size: 2rem;'>" + MB + "</span><br/><i>transferred in total.</i><br/><small>" + KBs + "/sec, " + KB + "/request";
gstats.appendChild(mbbox);
// connections in total
var cons = fn(json.server.connections);
var cps = Math.floor(json.server.connections/json.server.uptime*100)/100;
var conbox = document.createElement('div');
conbox.setAttribute("class", "statsbox");
conbox.innerHTML = "<span style='font-size: 2rem;'>" + cons + " conns</span><br/><i>since server started.</i><br/><small>" + cps + " requests per second";
gstats.appendChild(conbox);
// threads working
var tpc = json.mpm.threadsPerChild;
var activeThreads = fn(json.mpm.activeServers * json.mpm.threadsPerChild);
var maxThreads = json.mpm.maxServers * json.mpm.threadsPerChild;
var tbox = document.createElement('div');
tbox.setAttribute("class", "statsbox");
tbox.innerHTML = "<span style='font-size: 2rem;'>" + activeThreads + " threads</span><br/><i>currently at work (" + json.mpm.activeServers + "x" + tpc+" threads).</i><br/><small>" + maxThreads + " (" + json.mpm.maxServers + "x"+tpc+") threads allowed.";
gstats.appendChild(tbox);
window.setTimeout(waitTwo, updateSpeed*1000);
// resize pane
document.getElementById('leftpane').style.height = document.getElementById('wrapper').getBoundingClientRect().height + "px";
// Do we have extended info and module lists??
if (json.server.extended) document.getElementById('threads_button').style.display = 'block';
if (json.server.modules && json.server.modules.length > 0) {
var panel = document.getElementById('modules_breakdown');
var list = "<ul>";
for (var i in json.server.modules) {
var mod = json.server.modules[i];
list += "<li>" + mod + "</li>";
}
list += "</ul>";
panel.innerHTML = list;
document.getElementById('modules_button').style.display = 'block';
}
} else if (json === false) {
waitTwo();
}
}
function refreshThreads(json, state) {
var box = document.getElementById('threads_breakdown');
box.innerHTML = "";
for (var i in json.processes) {
var proc = json.processes[i];
var phtml = '<div style="color: #DDF">';
if (!proc.active) phtml = '<div title="this process is inactive" style="color: #999;">';
phtml += "<h3>Process " + i + ":</h3>";
phtml += "<b>PID:</b> " + (proc.pid||"None (not active)") + "<br/>";
if (proc.threads && proc.active) {
phtml += "<table style='width: 800px; color: #000;'><tr><th>Thread ID</th><th>Access count</th><th>Bytes served</th><th>Last Used</th><th>Last client</th><th>Last request</th></tr>";
for (var j in proc.threads) {
var thread = proc.threads[j];
thread.request = (thread.request||"(Unknown)").replace(/[<>]+/g, "");
phtml += "<tr><td>"+thread.thread+"</td><td>"+thread.count+"</td><td>"+thread.bytes+"</td><td>"+thread.last_used+"</td><td>"+thread.client+"</td><td>"+thread.request+"</td></tr>";
}
phtml += "</table>";
} else {
phtml += "<p>No thread information avaialable</p>";
}
phtml += "</div>";
box.innerHTML += phtml;
}
}
function waitTwo() {
getAsync(location.href + "?view=json&rnd=" + Math.random(), null, refreshCharts)
}
function showPanel(what) {
var items = ['dashboard','misc','threads','modules'];
for (var i in items) {
var item = items[i];
var btn = document.getElementById(item+'_button');
var panel = document.getElementById(item+'_panel');
if (item == what) {
btn.setAttribute("class", "btn active");
panel.style.display = 'block';
} else {
btn.setAttribute("class", "btn");
panel.style.display = 'none';
}
}
// special constructors
if (what == 'threads') {
getAsync(location.href + "?view=json&extended=true&rnd=" + Math.random(), null, refreshThreads)
}
}
function fn(num) {
num = num + "";
num = num.replace(/(\d)(\d{9})$/, '$1,$2');
num = num.replace(/(\d)(\d{6})$/, '$1,$2');
num = num.replace(/(\d)(\d{3})$/, '$1,$2');
return num;
}
function fnmb(num) {
var add = "bytes";
var dec = "";
var mul = 1;
if (num > 1024) { add = "KB"; mul= 1024; }
if (num > (1024*1024)) { add = "MB"; mul= 1024*1024; }
if (num > (1024*1024*1024)) { add = "GB"; mul= 1024*1024*1024; }
if (num > (1024*1024*1024*1024)) { add = "TB"; mul= 1024*1024*1024*1024; }
num = num / mul;
if (add != "bytes") {
dec = "." + Math.floor( (num - Math.floor(num)) * 100 );
}
return ( fn(Math.floor(num)) + dec + " " + add );
}
function sort(a,b){
last_col = -1;
var sort_reverse = false;
var sortWay = a.getAttribute("sort_" + b);
if (sortWay && sortWay == "forward") {
a.setAttribute("sort_" + b, "reverse");
sort_reverse = true;
}
else {
a.setAttribute("sort_" + b, "forward");
}
var c,d,e,f,g,h,i;
c=a.rows.length;
if(c<1){ return; }
d=a.rows[1].cells.length;
e=1;
var j=new Array(c);
f=0;
for(h=e;h<c;h++){
var k=new Array(d);
for(i=0;i<d;i++){
cell_text="";
cell_text=a.rows[h].cells[i].textContent;
if(cell_text===undefined){cell_text=a.rows[h].cells[i].innerText;}
k[i]=cell_text;
}
j[f++]=k;
}
var l=false;
var m,n;
if(b!=lastcol) lastseq="A";
else{
if(lastseq=="A") lastseq="D";
lastseq="A";
}
g=c-1;
for(h=0;h<g;h++){
l=false;
for(i=0;i<g-1;i++){
m=j[i];
n=j[i+1];
if(lastseq=="A"){
var gt = (m[b]>n[b]) ? true : false;
var lt = (m[b]<n[b]) ? true : false;
if (n[b].match(/^(\d+)$/)) { gt = parseInt(m[b], 10) > parseInt(n[b], 10) ? true : false; lt = parseInt(m[b], 10) < parseInt(n[b], 10) ? true : false; }
if (sort_reverse) {gt = (!gt); lt = (!lt);}
if(gt){
j[i+1]=m;
j[i]=n;
l=true;
}
}
else{
if(lt){
j[i+1]=m;
j[i]=n;
l=true;
}
}
}
if(l===false){
break;
}
}
f=e;
for(h=0;h<g;h++){
m=j[h];
for(i=0;i<d;i++){
if(a.rows[f].cells[i].innerText!==undefined){
a.rows[f].cells[i].innerText=m[i];
}
else{
a.rows[f].cells[i].textContent=m[i];
}
}
f++;
}
lastcol=b;
}
var CPUmax = 1000000;
var showing = false;
function showDetails() {
for (i=1; i < 1000; i++) {
var obj = document.getElementById("srv_" + i);
if (obj) {
if (showing) { obj.style.display = "none"; }
else { obj.style.display = "block"; }
}
}
var link = document.getElementById("show_link");
showing = (!showing);
if (showing) { link.innerHTML = "Hide thread information"; }
else { link.innerHTML = "Show thread information"; }
}
var showing_modules = false;
function show_modules() {
var obj = document.getElementById("modules");
if (obj) {
if (showing_modules) { obj.style.display = "none"; }
else { obj.style.display = "block"; }
}
var link = document.getElementById("show_modules_link");
showing_modules = (!showing_modules);
if (showing_modules) { link.innerHTML = "Hide loaded modules"; }
else { link.innerHTML = "Show loaded modules"; }
}
]==]
quokka_js = [==[
/*
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
// Traffic shaper
function quokka_fnmb(num) {
var add = "b";
var dec = "";
var mul = 1;
if (num > 1024) { add = "KB"; mul= 1024; }
if (num > (1024*1024)) { add = "MB"; mul= 1024*1024; }
if (num > (1024*1024*1024)) { add = "GB"; mul= 1024*1024*1024; }
if (num > (1024*1024*1024*1024)) { add = "TB"; mul= 1024*1024*1024*1024; }
num = num / mul;
if (add != "b" && num < 10) {
dec = "." + Math.floor( (num - Math.floor(num)) * 100 );
}
return ( Math.floor(num) + dec + " " + add );
}
// Hue, Saturation and Lightness to Red, Green and Blue:
function quokka_internal_hsl2rgb (h,s,l)
{
var min, sv, switcher, fract, vsf;
h = h % 1;
if (s > 1) s = 1;
if (l > 1) l = 1;
var v = (l <= 0.5) ? (l * (1 + s)) : (l + s - l * s);
if (v === 0)
return { r: 0, g: 0, b: 0 };
min = 2 * l - v;
sv = (v - min) / v;
var sh = (6 * h) % 6;
switcher = Math.floor(sh);
fract = sh - switcher;
vsf = v * sv * fract;
switch (switcher)
{
case 0: return { r: v, g: min + vsf, b: min };
case 1: return { r: v - vsf, g: v, b: min };
case 2: return { r: min, g: v, b: min + vsf };
case 3: return { r: min, g: v - vsf, b: v };
case 4: return { r: min + vsf, g: min, b: v };
case 5: return { r: v, g: min, b: v - vsf };
}
return {r:0, g:0, b: 0};
}
// RGB to Hex conversion
function quokka_internal_rgb2hex(r, g, b) {
return "#" + ((1 << 24) + (Math.floor(r) << 16) + (Math.floor(g) << 8) + Math.floor(b)).toString(16).slice(1);
}
// Generate color list used for charts
var colors = [];
var rgbs = []
var numColorRows = 6;
var numColorColumns = 20;
for (var x=0;x<numColorRows;x++) {
for (var y=0;y<numColorColumns;y++) {
var rnd = [[148, 221, 119], [0, 203, 171], [51, 167, 215] , [35, 160, 253], [218, 54, 188], [16, 171, 246], [110, 68, 206], [21, 49, 248], [142, 104, 210]][y]
var color = quokka_internal_hsl2rgb(y > 8 ? (Math.random()) : (rnd[0]/255), y > 8 ? (0.75+(y*0.05)) : (rnd[1]/255), y > 8 ? (0.42 + (y*0.05*(x/numColorRows))) : (0.1 + rnd[2]/512));
// Light (primary) color:
var hex = quokka_internal_rgb2hex(color.r*255, color.g*255, color.b*255);
// Darker variant for gradients:
var dhex = quokka_internal_rgb2hex(color.r*131, color.g*131, color.b*131);
// Medium variant for legends:
var mhex = quokka_internal_rgb2hex(color.r*200, color.g*200, color.b*200);
colors.push([hex, dhex, color, mhex]);
}
}
/* Function for drawing pie diagrams
* Example usage:
* quokkaCircle("canvasName", [ { title: 'ups', value: 30}, { title: 'downs', value: 70} ] );
*/
function quokkaCircle(id, tags, opts) {
// Get Canvas object and context
var canvas = document.getElementById(id);
var ctx=canvas.getContext("2d");
// Calculate the total value of the pie
var total = 0;
var k;
for (k in tags) {
tags[k].value = Math.abs(tags[k].value);
total += tags[k].value;
}
// Draw the empty pie
var begin = 0;
var stop = 0;
var radius = (canvas.height*0.75)/2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.shadowBlur = 6;
ctx.shadowOffsetX = 6;
ctx.shadowOffsetY = 6;
ctx.shadowColor = "#555";
ctx.lineWidth = (opts && opts.hires) ? 6 : 2;
ctx.strokeStyle = "#222";
ctx.arc((canvas.width-140)/2,canvas.height/2,radius, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.shadowBlur = 0;
ctx.shadowOffsetY = 0;
ctx.shadowOffsetX = 0;
// Draw a title if set:
if (opts && opts.title) {
ctx.font= (opts && opts.hires) ? "28px Sans-Serif" : "15px Sans-Serif";
ctx.fillStyle = "#000000";
ctx.textAlign = "center";
ctx.fillText(opts.title,(canvas.width-140)/2, (opts && opts.hires) ? 30:15);
ctx.textAlign = "left";
}
ctx.beginPath();
var posY = 50;
var left = 120 + ((canvas.width-140)/2) + ((opts && opts.hires) ? 40 : 25)
for (k in tags) {
var val = tags[k].value;
stop = stop + (2 * Math.PI * (val / total));
// Make a pizza slice
ctx.beginPath();
ctx.lineCap = 'round';
ctx.arc((canvas.width-140)/2,canvas.height/2,radius,begin,stop);
ctx.lineTo((canvas.width-140)/2,canvas.height/2);
ctx.closePath();
ctx.lineWidth = 0;
ctx.stroke();
// Add color gradient
var grd=ctx.createLinearGradient(0,canvas.height*0.2,0,canvas.height);
grd.addColorStop(0,colors[k % colors.length][1]);
grd.addColorStop(1,colors[k % colors.length][0]);
ctx.fillStyle = grd;
ctx.fill();
begin = stop;
// Make color legend
ctx.fillRect(left, posY-((opts && opts.hires) ? 15 : 10), (opts && opts.hires) ? 14 : 7, (opts && opts.hires) ? 14 : 7);
// Add legend text
ctx.shadowColor = "rgba(0,0,0,0)"
ctx.font= (opts && opts.hires) ? "22px Sans-Serif" : "12px Sans-Serif";
ctx.fillStyle = "#000";
ctx.fillText(tags[k].title + " (" + Math.floor(val) + (opts && opts.pct ? "%" : "") + ")",left+20,posY);
posY += (opts && opts.hires) ? 28 : 14;
}
}
/* Function for drawing line charts
* Example usage:
* quokkaLines("myCanvas", ['Line a', 'Line b', 'Line c'], [ [x1,a1,b1,c1], [x2,a2,b2,c2], [x3,a3,b3,c3] ], { stacked: true, curve: false, title: "Some title" } );
*/
function quokkaLines(id, titles, values, options, sums) {
var canvas = document.getElementById(id);
var ctx=canvas.getContext("2d");
// clear the canvas first
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 0.25;
ctx.strokeStyle = "#000000";
var lwidth = 300;
var lheight = 75;
wspace = (options && options.hires) ? 110 : 55;
var rectwidth = canvas.width - lwidth - wspace;
var stack = options ? options.stack : false;
var curve = options ? options.curve : false;
var title = options ? options.title : null;
var spots = options ? options.points : false;
var noX = options ? options.nox : false;
var verts = options ? options.verts : true;
if (noX) {
lheight = 0;
}
// calc rectwidth if titles are large
var nlwidth = 0
for (var k in titles) {
ctx.font= (options && options.hires) ? "24px Sans-Serif" : "12px Sans-Serif";
ctx.fillStyle = "#00000";
var x = parseInt(k)
if (!noX) {
x = x + 1;
}
var sum = 0
for (var y in values) {
sum += values[y][x]
}
var t = titles[k] + (!options.nosum ? " (" + ((sums && sums[k]) ? sums[k] : sum.toFixed(0)) + ")" : "");
var w = ctx.measureText(t).width + 48;
if (w > lwidth && w > nlwidth) {
nlwidth = w
}
if (nlwidth > 0) {
rectwidth -= nlwidth - lwidth
lwidth = nlwidth
}
}
// Draw a border
ctx.lineWidth = 0.5;
ctx.strokeRect((wspace*0.75), 30, rectwidth, canvas.height - lheight - 40);
// Draw a title if set:
if (title != null) {
ctx.font= (options && options.hires) ? "24px Sans-Serif" : "15px Sans-Serif";
ctx.fillStyle = "#00000";
ctx.textAlign = "center";
ctx.fillText(title,rectwidth/2, 20);
}
// Draw legend
ctx.textAlign = "left";
var posY = 50;
for (var k in titles) {
var x = parseInt(k)
if (!noX) {
x = x + 1;
}
var sum = 0
for (var y in values) {
sum += values[y][x]
}
var title = titles[k] + (!options.nosum ? (" (" + ((sums && sums[k]) ? sums[k] : sum.toFixed(0)) + ")") : "");
if (options && options.lastsum) {
title = titles[k] + " (" + values[values.length-1][x].toFixed(0) + ")";
}
ctx.fillStyle = colors[k % colors.length][3];
ctx.fillRect(wspace + rectwidth + 75 , posY-((options && options.hires) ? 18:9), (options && options.hires) ? 20:10, (options && options.hires) ?20:10);
// Add legend text
ctx.font= (options && options.hires) ? "24px Sans-Serif" : "14px Sans-Serif";
ctx.fillStyle = "#00000";
ctx.fillText(title,canvas.width - lwidth + ((options && options.hires) ? 100:60), posY);
posY += (options && options.hires) ? 30:15;
}
// Find max and min
var max = null;
var min = 0;
var stacked = null;
for (x in values) {
var s = 0;
for (y in values[x]) {
if (y > 0 || noX) {
s += values[x][y];
if (max === null || max < values[x][y]) {
max = values[x][y];
}
if (min === null || min > values[x][y]) {
min = values[x][y];
}
}
}
if (stacked === null || stacked < s) {
stacked = s;
}
}
if (min == max) max++;
if (stack) {
min = 0;
max = stacked;
}
// Set number of lines to draw and each step
var numLines = 5;
var step = (max-min) / (numLines+1);
// Prettify the max value so steps aren't ugly numbers
if (step %1 != 0) {
step = (Math.round(step+0.5));
max = step * (numLines+1);
}
// Draw horizontal lines
for (x = -1; x <= numLines; x++) {
ctx.beginPath();
var y = 30 + (((canvas.height-40-lheight) / (numLines+1)) * (x+1));
ctx.moveTo(wspace*0.75, y);
ctx.lineTo(wspace*0.75 + rectwidth, y);
ctx.lineWidth = 0.25;
ctx.stroke();
// Add values
ctx.font= (options && options.hires) ? "20px Sans-Serif" : "12px Sans-Serif";
ctx.fillStyle = "#000000";
var val = Math.round( ((max-min) - (step*(x+1))) );
if (options && options.traffic) {
val = quokka_fnmb(val);
}
ctx.textAlign = "left";
ctx.fillText( val,canvas.width - lwidth - 20, y+8);
ctx.textAlign = "right";
ctx.fillText( val,wspace-32, y+8);
ctx.closePath();
}
// Draw vertical lines
var sx = 1
var numLines = values.length-1;
var step = (canvas.width - lwidth - wspace*0.75) / values.length;
while (step < 24) {
step *= 2
sx *= 2
}
if (verts) {
ctx.beginPath();
for (var x = 1; x < values.length; x++) {
if (x % sx == 0) {
var y = (wspace*0.75) + (step * (x/sx));
ctx.moveTo(y, 30);
ctx.lineTo(y, canvas.height - 10 - lheight);
ctx.lineWidth = 0.25;
ctx.stroke();
}
}
ctx.closePath();
}
// Some pre-calculations of steps
var step = (rectwidth) / (values.length > 1 ? values.length-1:1);
// Draw X values if noX isn't set:
if (noX != true) {
ctx.beginPath();
for (var i = 0; i < values.length; i++) {
zz = 1
var x = (wspace*0.75) + ((step) * i);
var y = canvas.height - lheight + 5;
if (i % sx == 0) {
ctx.translate(x, y);
ctx.moveTo(0,0);
ctx.lineTo(0,-15);
ctx.stroke();
ctx.rotate(45*Math.PI/180);
ctx.textAlign = "left";
var val = values[i][0];
if (val.constructor.toString().match("Date()")) {
val = val.toDateString();
}
ctx.fillText(val.toString(), 0, 0);
ctx.rotate(-45*Math.PI/180);
ctx.translate(-x,-y);
}
}
ctx.closePath();
}
// Draw each line
var stacks = [];
var pstacks = [];
for (k in values) { if (k > 0) { stacks[k] = 0; pstacks[k] = canvas.height - 40 - lheight; }}
for (k in titles) {
var maxY = 0, minY = 99999;
ctx.beginPath();
var color = colors[k % colors.length][0];
var f = parseInt(k) + 1;
if (noX) {
f = parseInt(k);
}
var value = values[0][f];
var step = rectwidth / numLines;
var x = (wspace*0.75);
var y = (canvas.height - 10 - lheight) - (((value-min) / (max-min)) * (canvas.height - 40 - lheight));
var py = y;
if (stack) {
stacks[0] = stacks[0] ? stacks[0] : 0
y -= stacks[0];
pstacks[0] = stacks[0];
stacks[0] += (((value-min) / (max-min)) * (canvas.height - 40 - lheight));
}
// Draw line
ctx.moveTo(x, y);
var pvalY = y;
var pvalX = x;
for (var i in values) {
if (i > 0) {
x = (wspace*0.75) + (step*i);
var f = parseInt(k) + 1;
if (noX == true) {
f = parseInt(k);
}
value = values[i][f];
y = (canvas.height - 10 - lheight) - (((value-min) / (max-min)) * (canvas.height - 40 - lheight));
if (stack) {
y -= stacks[i];
pstacks[i] = stacks[i];
stacks[i] += (((value-min) / (max-min)) * (canvas.height - 40- lheight));
}
if (y > maxY) maxY = y;
if (y < minY) minY = y;
// Draw curved lines??
/* We'll do: (x1,y1)-----(x1.5,y1)
* |
* (x1.5,y2)-----(x2,y2)
* with a quadratic beizer thingy
*/
if (curve) {
ctx.bezierCurveTo((pvalX + x) / 2, pvalY, (pvalX + x) / 2, y, x, y);
pvalX = x;
pvalY = y;
}
// Nope, just draw straight lines
else {
ctx.lineTo(x, y);
}
if (spots) {
ctx.fillStyle = color;
ctx.translate(x-2, y-2);
ctx.rotate(-45*Math.PI/180);
ctx.fillRect(-2,1,4,4);
ctx.rotate(45*Math.PI/180);
ctx.translate(-x+2, -y+2);
}
}
}
ctx.lineWidth = 4;
ctx.strokeStyle = color;
ctx.stroke();
if (minY == maxY) maxY++;
// Draw stack area
if (stack) {
ctx.globalAlpha = 0.65;
for (i in values) {
if (i > 0) {
var f = parseInt(k) + 1;
if (noX == true) {
f = parseInt(k);
}
x = (wspace*0.75) + (step*i);
value = values[i][f];
y = (canvas.height - 10 - lheight) - (((value-min) / (max-min)) * (canvas.height - 40 - lheight));
y -= stacks[i];
}
}
var pvalY = y;
var pvalX = x;
if (y > maxY) maxY = y;
if (y < minY) minY = y;
for (i in values) {
var l = values.length - i - 1;
x = (wspace*0.75) + (step*l);
y = canvas.height - 10 - lheight - pstacks[l];
if (y > maxY) maxY = y;
if (y < minY) minY = y;
if (curve) {
ctx.bezierCurveTo((pvalX + x) / 2, pvalY, (pvalX + x) / 2, y, x, y);
pvalX = x;
pvalY = y;
}
else {
ctx.lineTo(x, y);
}
}
ctx.lineTo((wspace*0.75), py - pstacks[0]);
ctx.lineWidth = 0;
var grad = ctx.createLinearGradient(0, minY, 0, maxY);
grad.addColorStop(0.25, colors[k % colors.length][0])
grad.addColorStop(1, colors[k % colors.length][1])
ctx.strokeStyle = colors[k % colors.length][0];
ctx.fillStyle = grad;
ctx.fill();
ctx.fillStyle = "#000"
ctx.strokeStyle = "#000"
ctx.globalAlpha = 1;
}
ctx.closePath();
}
// draw feather
base_image = new Image();
base_image.src = 'data:image/png;base64,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';
base_image.onload = function(){
ctx.globalAlpha = 0.15
ctx.drawImage(base_image, (canvas.width/2) - 64 - (lwidth/2), (canvas.height/2) - 128);
ctx.globalAlpha = 1
}
}
/* Function for drawing line charts
* Example usage:
* quokkaLines("myCanvas", ['Line a', 'Line b', 'Line c'], [ [x1,a1,b1,c1], [x2,a2,b2,c2], [x3,a3,b3,c3] ], { stacked: true, curve: false, title: "Some title" } );
*/
function quokkaBars(id, titles, values, options) {
var canvas = document.getElementById(id);
var ctx=canvas.getContext("2d");
// clear the canvas first
ctx.clearRect(0, 0, canvas.width, canvas.height);
var lwidth = 150;
var lheight = 75;
var stack = options ? options.stack : false;
var astack = options ? options.astack : false;
var curve = options ? options.curve : false;
var title = options ? options.title : null;
var noX = options ? options.nox : false;
var verts = options ? options.verts : true;
if (noX) {
lheight = 0;
}
// Draw a border
ctx.lineWidth = 0.5;
ctx.strokeRect(25, 30, canvas.width - lwidth - 40, canvas.height - lheight - 40);
// Draw a title if set:
if (title != null) {
ctx.font="15px Arial";
ctx.fillStyle = "#000";
ctx.textAlign = "center";
ctx.fillText(title,(canvas.width-lwidth)/2, 15);
}
// Draw legend
ctx.textAlign = "left";
var posY = 50;
for (var k in titles) {
var x = parseInt(k)
if (!noX) {
x = x + 1;
}
var title = titles[k];
if (title && title.length > 0) {
ctx.fillStyle = colors[k % colors.length][0];
ctx.fillRect(canvas.width - lwidth + 20, posY-10, 10, 10);
// Add legend text
ctx.font="12px Arial";
ctx.fillStyle = "#000";
ctx.fillText(title,canvas.width - lwidth + 40, posY);
posY += 15;
}
}
// Find max and min
var max = null;
var min = 0;
var stacked = null;
for (x in values) {
var s = 0;
for (y in values[x]) {
if (y > 0 || noX) {
s += values[x][y];
if (max == null || max < values[x][y]) {
max = values[x][y];
}
if (min == null || min > values[x][y]) {
min = values[x][y];
}
}
}
if (stacked == null || stacked < s) {
stacked = s;
}
}
if (min == max) {
max++;
}
if (stack) {
min = 0;
max = stacked;
}
// Set number of lines to draw and each step
var numLines = 5;
var step = (max-min) / (numLines+1);
// Prettify the max value so steps aren't ugly numbers
if (step %1 != 0) {
step = (Math.round(step+0.5));
max = step * (numLines+1);
}
// Draw horizontal lines
for (x = numLines; x >= 0; x--) {
var y = 30 + (((canvas.height-40-lheight) / (numLines+1)) * (x+1));
ctx.moveTo(25, y);
ctx.lineTo(canvas.width - lwidth - 15, y);
ctx.lineWidth = 0.25;
ctx.stroke();
// Add values
ctx.font="10px Arial";
ctx.fillStyle = "#000";
ctx.textAlign = "right";
ctx.fillText( Math.round( ((max-min) - (step*(x+1))) * 100 ) / 100,canvas.width - lwidth + 12, y-4);
ctx.fillText( Math.round( ((max-min) - (step*(x+1))) * 100 ) / 100,20, y-4);
}
// Draw vertical lines
var sx = 1
var numLines = values.length-1;
var step = (canvas.width - lwidth - 40) / values.length;
while (step < 24) {
step *= 2
sx *= 2
}
if (verts) {
ctx.beginPath();
for (var x = 1; x < values.length; x++) {
if (x % sx == 0) {
var y = 35 + (step * (x/sx));
ctx.moveTo(y, 30);
ctx.lineTo(y, canvas.height - 10 - lheight);
ctx.lineWidth = 0.25;
ctx.stroke();
}
}
}
// Some pre-calculations of steps
var step = (canvas.width - lwidth - 48) / values.length;
var smallstep = (step / titles.length) - 2;
// Draw X values if noX isn't set:
if (noX != true) {
ctx.beginPath();
for (var i = 0; i < values.length; i++) {
smallstep = (step / (values[i].length-1)) - 2;
zz = 1
var x = 35 + ((step) * i);
var y = canvas.height - lheight + 5;
if (i % sx == 0) {
ctx.translate(x, y);
ctx.moveTo(0,0);
ctx.lineTo(0,-15);
ctx.stroke();
ctx.rotate(45*Math.PI/180);
ctx.textAlign = "left";
var val = values[i][0];
if (val.constructor.toString().match("Date()")) {
val = val.toDateString();
}
ctx.fillText(val.toString(), 0, 0);
ctx.rotate(-45*Math.PI/180);
ctx.translate(-x,-y);
}
}
}
// Draw each line
var stacks = [];
var pstacks = [];
for (k in values) {
smallstep = (step / (values[k].length)) - 2;
stacks[k] = 0;
pstacks[k] = canvas.height - 40 - lheight;
var beginX = 0;
for (i in values[k]) {
if (i > 0 || noX) {
var z = parseInt(i);
var zz = z;
if (!noX) {
z = parseInt(i) + 1;
zz = z - 2;
if (z > values[k].length) {
break;
}
}
var value = values[k][i];
var title = titles[i];
var color = colors[zz % colors.length][1];
var fcolor = colors[zz % colors.length][2];
if (values[k][2] && values[k][2].toString().match(/^#.+$/)) {
color = values[k][2]
fcolor = values[k][2]
smallstep = (step / (values[k].length-2)) - 2;
}
var x = ((step) * k) + ((smallstep+2) * zz) + 5;
var y = canvas.height - 10 - lheight;
var mdiff = (max-min);
mdiff = (mdiff == 0) ? 1 : mdiff;
var height = ((canvas.height - 40 - lheight) / (mdiff)) * value * -1;
var width = smallstep - 2;
if (width <= 1) {
width = 1
}
if (stack) {
width = step - 10;
y -= stacks[k];
stacks[k] -= height;
x = (step * k) + 4;
if (astack) {
y = canvas.height - 10 - lheight;
}
}
// Draw bar
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = color;
ctx.strokeRect(27 + x, y, width, height);
var alpha = 0.75
if (fcolor.r) {
ctx.fillStyle = 'rgba('+ [parseInt(fcolor.r*255),parseInt(fcolor.g*255),parseInt(fcolor.b*255),alpha].join(",") + ')';
} else {
ctx.fillStyle = fcolor;
}
ctx.fillRect(27 + x, y, width, height);
}
}
}
}
]==]
status_css = [[
html {
font-size: 14px;
position: relative;
background: #272B30;
}
body {
background-color: #272B30;
color: #000;
margin: 0 auto;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
.navbarLeft {
background: linear-gradient(to bottom, #F8A900 0%,#D88900 100%);
width: 200px;
height: 30px;
padding-top: 2px;
font-size: 1.35rem;
color: #FFF;
border-bottom: 2px solid #000;
float: left;
text-align: center;
}
.navbarRight {
background: linear-gradient(to bottom, #EFEFEF 0%,#EEE 100%);
width: calc(100% - 240px);
height: 28px;
color: #333;
border-bottom: 2px solid #000;
float: left;
font-size: 1.3rem;
padding-top: 4px;
text-align: left;
padding-left: 40px;
}
.wrapper {
width: 100%;
float: left;
background: #33363F;
min-height: calc(100% - 80px);
position: relative;
}
.serverinfo {
float: left;
width: 200px;
height: calc(100% - 34px);
background: #293D4C;
}
.skey {
background: rgba(30,30,30,0.3);
color: #C6E7FF;
font-weight: bold;
padding: 2px;
}
.sval {
padding: 2px;
background: rgba(30,30,30,0.3);
color: #FFF;
font-size: 0.8rem;
border-bottom: 1px solid rgba(200,200,200,0.2);
}
.charts {
padding: 0px;
width: calc(100% - 220px);
max-width: 1000px;
min-height: 100%;
margin: 0px auto;
position: relative;
float: left;
margin-left: 20px;
}
pre, code {
font-family: "Courier New", Courier, monospace;
}
strong {
font-weight: bold;
}
q, em, var {
font-style: italic;
}
/* h1 */
/* ====================== */
h1 {
padding: 0.2em;
margin: 0;
border: 1px solid #405871;
background-color: inherit;
color: #036;
text-decoration: none;
font-size: 22px;
font-weight: bold;
}
/* h2 */
/* ====================== */
h2 {
padding: 0.2em 0 0.2em 0.7em;
margin: 0 0 0.5em 0;
text-decoration: none;
font-size: 18px;
font-weight: bold;
text-align: center;
}
#modules {
margin-top:20px;
display:none;
width:400px;
}
.servers {
width: 1244px;
background: #EEE;
}
tr:nth-child(odd) {
background: #F6F6F6;
}
tr:nth-child(even) {
background: #EBEBEB;
}
td {
padding: 2px;
}
table {
border: 1px solid #333;
padding: 0px;
margin: 5px;
min-width: 360px;
background: #999;
font-size: 0.8rem;
}
canvas {
background: #FFF;
margin: 3px;
text-align: center;
padding: 2px;
border-radius: 10px;
border: 1px solid #999;
}
.canvas_wide {
position: relative;
width: 65%;
}
.canvas_narrow {
position: relative;
width: 27%;
}
a {
color: #FFA;
}
.statsbox {
border-radius: 3px;
background: #3C3E47;
min-width: 150px;
height: 60px;
float: left;
margin: 15px;
padding: 10px;
}
.btn {
background: linear-gradient(to bottom, #72ca72 0%,#55bf55 100%);
border-radius: 5px;
color: #FFF;
text-decoration: none;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 3px;
padding-right: 3px;
font-weight: bold;
text-shadow: 1px 1px rgba(0,0,0,0.4);
margin: 12px;
float: left;
clear: none;
}
.infobox_wrapper {
float: left;
min-width: 200px;
margin: 10px;
}
.infobox_title {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: #FAB227;
color: #FFF;
border: 2px solid #FAB227;
border-bottom: none;
font-weight: bold;
text-align: center;
width: 100%;
}
.infobox {
background: #222222;
border: 2px solid #FAB227;
border-top: none;
color: #EFEFEF;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
float: left;
width: 100%;
}
.serverinfo ul {
margin: 0px;
padding: 0px;
margin-top: 20px;
list-style: none;
}
.serverinfo ul li .btn {
width: calc(100% - 8px);
margin: 0px;
border: 0px;
border-radius: 0px;
padding: 0px;
padding-top: 8px;
padding-left: 8px;
height: 24px;
background: rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(100,100,100,0.3);
}
.serverinfo ul li:nth-child(1) {
border-top: 1px solid rgba(100,100,100,0.3);
}
.serverinfo ul li .btn.active {
background: rgba(30,30,50,0.2);
border-left: 4px solid #27FAB2;
padding-left: 4px;
color: #FFE;
}
.serverinfo ul li .btn:hover {
background: rgba(50,50,50,0.15);
border-left: 4px solid #FAB227;
padding-left: 4px;
color: #FFE;
}
]]