Code:
/*
* loadavg.js
*/
$(function() {
//$(".neo-box").hide();
});
define([
"ojs/ojcore",
"knockout",
"jquery",
"text!data/data.json",
"ojs/ojknockout",
"ojs/ojvalidation-number",
"ojs/ojgauge",
"ojs/ojchart"
], function(oj, ko, $, file) {
function UnixViewModel() {
var self = this;
var release = true;
// the following code is an quick and easy way to play around with the $.getJSON timers:
if (localStorage.getItem("loadTimer") !== null) {
if (localStorage.getItem("loadTimer") < 1000)
localStorage.setItem("loadTimer", "1000");
loadTimer = localStorage.getItem("loadTimer");
} else {
if (release == false) {
var loadTimer = 1000;
} else {
var loadTimer = 5000;
}
localStorage.setItem("loadTimer", loadTimer);
}
if (localStorage.getItem("wolTimer") !== null) {
if (localStorage.getItem("wolTimer") < 1000)
localStorage.setItem("wolTimer", "1000");
wolTimer = localStorage.getItem("wolTimer");
} else {
if (release == false) {
var wolTimer = 5000;
} else {
var wolTimer = 10000;
}
localStorage.setItem("wolTimer", wolTimer);
}
// TODO: setup vars should be moved to a JSON config file
var serverForum = "https://www.yourserver.com/forumvars.php";
var serverMain = "https://www.yourserver.com/ojetcallback.php";
// in no particular order
self.wolval = ko.observable(0);
self.load1 = ko.observable(0);
self.load5 = ko.observable(0);
self.load15 = ko.observable(0);
self.diskusage = ko.observable(0);
self.cachedmem = ko.observable(0);
self.all = ko.observable(0);
self.apache2 = ko.observable(0);
self.mysqld = ko.observable(0);
self.rsync = ko.observable(0);
self.apache2count = ko.observable(0);
self.alltheprocs = ko.observable(0);
self.activeprocs = ko.observable(0);
self.mysqldump = ko.observable(0);
self.gzip = ko.observable(0);
self.find = ko.observable(0);
self.lastpid = ko.observable(0);
self.freemem = ko.observable(0);
self.allprocs = ko.observable(0);
self.customMetricLabel = ko.observable({
rendered: "on",
textType: "percent",
style: { fontWeight: "bold", color: "black" }
});
self.lable1 = { text: "1min" };
self.lable5 = { text: "5min" };
self.lable15 = { text: "15min" };
self.percent = { text: "percent" };
self.kb = { text: "kB" };
self.cpu = { text: "cpu" };
self.processes = { text: "processes" };
self.users = { text: "users" };
self.diskname = { text: "/dev/md2" };
self.customSvgStyle = { fill: "url(" + document.URL + "#pattern)" };
// this code is used to get the specific number of online users from the forum
// and is specific to our forum application (PHP code not provided for the serverForum
// URL in the next few lines, but post back in this thread if you want me to post it.
setInterval(function() {
$.getJSON(serverForum, function(wol) {
$.each(wol, function(wolkey, wolval) {
self.wolval(parseFloat(wolval));
if (parseFloat(wolval) < 400) {
$("#wolval").attr({ color: "orange" });
} else if (parseFloat(wolval) > 3000) {
$("#wolval").attr({ color: "red" });
} else {
$("#wolval").attr({ color: "green" });
}
});
// console.log(JSON.stringify(wol));
});
}, wolTimer);
// here is the main part of the module that refreshes most of the indicators in the dash:
setInterval(function() {
$.getJSON(serverMain, function(json) {
// console.log(JSON.stringify(json));
$.each(json, function(key, val) {
switch (key) {
case "load0":
self.load1(parseFloat(val));
if (parseFloat(val) > 0.99) {
$("#load1").attr({ color: "red" });
} else {
$("#load1").attr({ color: "green" });
}
break;
case "load1":
self.load5(parseFloat(val));
if (parseFloat(val) > 0.75) {
$("#load5").attr({ color: "red" });
} else {
$("#load5").attr({ color: "green" });
}
break;
case "load2":
self.load15(parseFloat(val));
if (parseFloat(val) > 0.65) {
$("#load15").attr({ color: "red" });
} else {
$("#load15").attr({ color: "green" });
}
break;
case "load3":
var vals = val.split("/");
var active = Math.round(parseInt(vals[0]));
var all = Math.round(parseInt(vals[1]));
self.allprocs(val);
self.activeprocs(active);
self.alltheprocs(all);
if (active > 6) {
$("#activeprocs").attr({ color: "red" });
} else {
$("#activeprocs").attr({ color: "green" });
}
if (all > 400) {
$("#alltheprocs").attr({ color: "red" });
} else {
$("#alltheprocs").attr({ color: "green" });
}
break;
case "load4":
self.lastpid(parseInt(val));
break;
case "apache2count":
self.apache2count(parseInt(val));
if (val > 100) {
$("#apache2count").attr({ color: "red" });
} else {
$("#apache2count").attr({ color: "green" });
}
break;
case "mysqldump":
self.mysqldump(parseInt(val));
if (val == 0) $("#mysqldump").attr({ color: "green" });
else $("#mysqldump").attr({ color: "red" });
break;
case "gzip":
self.gzip(parseInt(val));
if (val == 0) $("#gzip").attr({ color: "green" });
else $("#gzip").attr({ color: "red" });
break;
case "find":
self.find(parseInt(val));
if (val == 0) $("#find").attr({ color: "green" });
else $("#find").attr({ color: "red" });
break;
case "md2":
self.diskusage(parseInt(val));
if (val > 60) {
$("#diskusage").attr({ color: "red" });
self.customMetricLabel = {
rendered: "on",
textType: "percent",
style: { fontWeight: "bold", color: "red" }
};
} else {
$("#diskusage").attr({ color: "green" });
}
break;
case "memfree":
self.freemem(parseInt(val));
if (parseInt(val) < 10000000) {
$("#freemem").attr({ color: "red" });
} else {
$("#freemem").attr({ color: "green" });
}
break;
case "cached":
self.cachedmem(parseFloat(val));
if (parseInt(val) > 50000000) {
$("#cachedmem").attr({ color: "red" });
} else {
$("#cachedmem").attr({ color: "green" });
}
break;
case "all":
self.all(parseFloat(val));
if (parseFloat(val) > 75) {
$("#allcpus").attr({ color: "red" });
} else {
$("#allcpus").attr({ color: "green" });
}
break;
case "apache2":
self.apache2(parseInt(val));
if (parseFloat(val) > 75) {
$("#apache2").attr({ color: "red" });
} else {
$("#apache2").attr({ color: "green" });
}
break;
case "mysqld":
self.mysqld(parseFloat(val));
if (parseFloat(val) > 75) {
$("#mysqld").attr({ color: "red" });
} else {
$("#mysqld").attr({ color: "green" });
}
break;
case "rsynccount":
self.rsync(parseInt(val));
if (val == 0) $("#rsync").attr({ color: "green" });
else $("#rsync").attr({ color: "red" });
break;
default:
}
$(".neo-netdown").css({ color: "black" });
// console.log("success items " + items.length + " " + val);
});
})
// self.datasource = ko.observableArray(items);
.done(function() {
//console.log("second success");
})
.fail(function() {
// this code simply turns the indicators all red when the network is down or there is some
// other connectivity or server issue which caused the call to the server to fail:
var netFail = true;
$(".neo-netdown").css({ color: "red" });
$(
"#load1,#load5,#load15, #activeprocs, #alltheprocs, #lastpid, #wolval,#allcpus, #apache2,#mysqld, #apache2count, #rsync, #diskusage, #cachedmem, #freemem"
).attr({
color: "red"
});
console.log("error");
})
.always(function() {
//console.log("complete");
});
}, loadTimer);
// Below are a set of the ViewModel methods invoked by the oj-module component.
// Please reference the oj-module jsDoc for additional information.
/**
* Optional ViewModel method invoked after the View is inserted into the
* document DOM. The application can put logic that requires the DOM being
* attached here.
* This method might be called multiple times - after the View is created
* and inserted into the DOM and after the View is reconnected
* after being disconnected.
*/
self.connected = function() {
// Implement if needed
};
/**
* Optional ViewModel method invoked after the View is disconnected from the DOM.
*/
self.disconnected = function() {
//console.log(" self.disconnected = function()");
// Implement if needed
};
/**
* Optional ViewModel method invoked after transition to the new View is complete.
* That includes any possible animation between the old and the new View.
*/
self.transitionCompleted = function() {
// Implement if needed
};
}
/*
* Returns a constructor for the ViewModel so that the ViewModel is constructed
* each time the view is displayed. Return an instance of the ViewModel if
* only one instance of the ViewModel is needed.
*/
return new UnixViewModel();
});