|
|
|
|
@ -1,12 +1,5 @@
|
|
|
|
|
type = ['','info','success','warning','danger'];
|
|
|
|
|
|
|
|
|
|
function getNode(name){
|
|
|
|
|
var nodeName = {}
|
|
|
|
|
nodeName.name = name
|
|
|
|
|
console.log('nodename...', nodeName.name)
|
|
|
|
|
dashboard.initChartist(nodeName)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
dashboard = {
|
|
|
|
|
initPickColor: function(){
|
|
|
|
|
$('.pick-class-label').click(function(){
|
|
|
|
|
@ -22,38 +15,39 @@ dashboard = {
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
initChartist: function(nodeName){
|
|
|
|
|
initChartist: function(){
|
|
|
|
|
|
|
|
|
|
function make_array() {
|
|
|
|
|
triple_array = [];
|
|
|
|
|
for (i=0;i<3;i++){
|
|
|
|
|
myarray = Array.from({length: 24}, () => Math.floor(Math.random() * 100))
|
|
|
|
|
triple_array.push(myarray)
|
|
|
|
|
}
|
|
|
|
|
return triple_array
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// monitoring apps chart
|
|
|
|
|
var getData = $.get('/1/app/usage/trend');
|
|
|
|
|
getData.done(function(results) {
|
|
|
|
|
var data = JSON.parse(results)
|
|
|
|
|
if (typeof nodeName === 'undefined'){
|
|
|
|
|
var node = data['apps@michaels-MBP'];
|
|
|
|
|
console.log("undefined nodename.........")
|
|
|
|
|
} else {
|
|
|
|
|
console.log('this is nodeName...', nodeName)
|
|
|
|
|
console.log('this is nodeName.name...', nodeName.name)
|
|
|
|
|
var node = data[nodeName.name]
|
|
|
|
|
console.log('data.name..', data[name])
|
|
|
|
|
var app_usage_trend = JSON.parse(results);
|
|
|
|
|
if ($.isEmptyObject(app_usage_trend)){
|
|
|
|
|
console.log('app_usage_trend is empty, setting testing values.');
|
|
|
|
|
app_usage_trend = [];
|
|
|
|
|
random_array = make_array();
|
|
|
|
|
app_usage_trend = random_array
|
|
|
|
|
}
|
|
|
|
|
var app = node['chrome'];
|
|
|
|
|
var cpu = app['cpu'];
|
|
|
|
|
var memory_used = app['memory_used'];
|
|
|
|
|
console.log('data...',data)
|
|
|
|
|
console.log('node...',node)
|
|
|
|
|
console.log('app...',app)
|
|
|
|
|
console.log('cpu...',cpu)
|
|
|
|
|
console.log('memory_used...', memory_used)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// monitoring apps chart
|
|
|
|
|
var dataChart = {
|
|
|
|
|
labels: ['24','23','22','21','20','19','18','17','16','15','14','13','12','11','10','9','8','7','6','5','4','3','2','1' ],
|
|
|
|
|
series: [cpu, memory_used, [0,0.1,0.3,0.2,0.4,0.6,0.2], ] // TODO: Check the order, the graph is by index not name.
|
|
|
|
|
series: app_usage_trend //TODO: Check the order, the graph is by index not name.
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
dataChartArray = dataChart.series
|
|
|
|
|
var maxlist = dataChartArray.map(dataChartArray => Math.max.apply(null, dataChartArray));
|
|
|
|
|
maxNum = Math.max.apply(null, maxlist)
|
|
|
|
|
dataChartArray = dataChart.series;
|
|
|
|
|
var maxlist = dataChartArray.map(function (dataChartArray) {
|
|
|
|
|
return Math.max.apply(null, dataChartArray);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
maxNum = Math.max.apply(null, maxlist);
|
|
|
|
|
|
|
|
|
|
var optionsChart = {
|
|
|
|
|
lineSmooth: false,
|
|
|
|
|
@ -62,13 +56,13 @@ dashboard = {
|
|
|
|
|
showArea: true,
|
|
|
|
|
height: "245px",
|
|
|
|
|
axisX: {
|
|
|
|
|
showGrid: false,
|
|
|
|
|
showGrid: false
|
|
|
|
|
},
|
|
|
|
|
lineSmooth: Chartist.Interpolation.simple({
|
|
|
|
|
divisor: 1
|
|
|
|
|
}),
|
|
|
|
|
showLine: true,
|
|
|
|
|
showPoint: false,
|
|
|
|
|
showPoint: false
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var responsiveChart = [
|
|
|
|
|
@ -83,10 +77,10 @@ dashboard = {
|
|
|
|
|
|
|
|
|
|
Chartist.Line('#chartHours', dataChart, optionsChart, responsiveChart);
|
|
|
|
|
|
|
|
|
|
// cpu and memory --------------------------
|
|
|
|
|
// cpu and memory usage--------------------------
|
|
|
|
|
var data = {
|
|
|
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
|
|
|
series: [cpu, memory_used]
|
|
|
|
|
series: make_array()
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
@ -111,16 +105,21 @@ dashboard = {
|
|
|
|
|
|
|
|
|
|
Chartist.Line('#chartActivity', data, options, responsiveOptions);
|
|
|
|
|
|
|
|
|
|
var getStatus = $.get('1/get/summary/app_status');
|
|
|
|
|
//app status pie chart, idle, running, crash
|
|
|
|
|
var getStatus = $.get('1/app/status');
|
|
|
|
|
getStatus.done(function(results) {
|
|
|
|
|
var data = JSON.parse(results)
|
|
|
|
|
let getStatusList = []
|
|
|
|
|
getStatusList.push(data.idle)
|
|
|
|
|
getStatusList.push(data.crash)
|
|
|
|
|
getStatusList.push(data.running)
|
|
|
|
|
var pie_chart = JSON.parse(results);
|
|
|
|
|
if ($.isEmptyObject(pie_chart)){
|
|
|
|
|
console.log('pie_chart is empty, setting testing values.');
|
|
|
|
|
app_status = [1,2,3]
|
|
|
|
|
}
|
|
|
|
|
// var app_status = [];
|
|
|
|
|
// app_status.push(pie_chart.idle);
|
|
|
|
|
// app_status.push(pie_chart.crash);
|
|
|
|
|
// app_status.push(pie_chart.running);
|
|
|
|
|
Chartist.Pie('#chartPreferences', {
|
|
|
|
|
labels: getStatusList,
|
|
|
|
|
series: getStatusList
|
|
|
|
|
labels: app_status,
|
|
|
|
|
series: app_status
|
|
|
|
|
},{donut:true});
|
|
|
|
|
}) /// end getStatus
|
|
|
|
|
})
|
|
|
|
|
@ -135,7 +134,7 @@ dashboard = {
|
|
|
|
|
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
|
|
|
|
|
styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
|
|
|
|
|
|
|
|
|
|
var marker = new google.maps.Marker({
|
|
|
|
|
@ -162,10 +161,10 @@ dashboard = {
|
|
|
|
|
align: align
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Global information about the dashboard
|
|
|
|
|
@ -178,29 +177,29 @@ g.summary = {}
|
|
|
|
|
* Initializing the top section of the dashboard (apps and folders)
|
|
|
|
|
*/
|
|
|
|
|
g.summary.factory = function (url,pointer) {
|
|
|
|
|
var object = {}
|
|
|
|
|
object.url = url
|
|
|
|
|
var observer = null
|
|
|
|
|
var object = {};
|
|
|
|
|
object.url = url;
|
|
|
|
|
var observer = null;
|
|
|
|
|
var TIME_ELLAPSED = 2000 ;
|
|
|
|
|
object.callback = function (r) {
|
|
|
|
|
r = JSON.parse(r.responseText)
|
|
|
|
|
r = JSON.parse(r.responseText);
|
|
|
|
|
pointer(r)
|
|
|
|
|
|
|
|
|
|
//observer.notify()
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
object.init = function (observer) {
|
|
|
|
|
observer = observer
|
|
|
|
|
|
|
|
|
|
var httpclient = HttpClient.instance()
|
|
|
|
|
var httpclient = HttpClient.instance();
|
|
|
|
|
//httpclient.setAsync(false)
|
|
|
|
|
httpclient.get(this.url, this.callback)
|
|
|
|
|
httpclient.get(this.url, this.callback);
|
|
|
|
|
setTimeout(function(){
|
|
|
|
|
observer.notify()
|
|
|
|
|
},TIME_ELLAPSED) ;
|
|
|
|
|
|
|
|
|
|
//observer.notify()
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
return object
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
Gogs