type = ['','info','success','warning','danger']; dashboard = { initPickColor: function(){ $('.pick-class-label').click(function(){ var new_class = $(this).attr('new-class'); var old_class = $('#display-buttons').attr('data-class'); var display_div = $('#display-buttons'); if(display_div.length) { var display_buttons = display_div.find('.btn'); display_buttons.removeClass(old_class); display_buttons.addClass(new_class); display_div.attr('data-class', new_class); } }); }, initChartist: function(){ var getData = $.get('/get/1'); getData.done(function(results) { var data = JSON.parse(results) var app = data['apps@lab']; function getCpuUsage (app){ cpu_usage = [] for (var i in app){ cpu_usage.push(app[i].cpu_usage) } return cpu_usage } function getMemoryUsage (app){ memory_usage = [] for (var i in app){ memory_usage.push(app[i].memory_usage) } return memory_usage } function getStatus (app){ statusList = [] for (var i in app){ statusList.push(app[i].status) } return statusList } // monitoring apps chart var dataChart = { labels: ['9:00AM', '12:00AM', '3:00PM', '6:00PM', '9:00PM', '12:00PM', '3:00AM', '6:00AM'], series: [ [287, 385, 490, 562, 594, 626, 698, 895, 952], [67, 152, 193, 240, 387, 435, 535, 642, 744], [23, 113, 67, 108, 190, 239, 307, 410, 410], ] }; var optionsChart = { lineSmooth: false, low: 0, high: 1000, showArea: true, height: "245px", axisX: { showGrid: false, }, lineSmooth: Chartist.Interpolation.simple({ divisor: 3 }), showLine: true, showPoint: false, }; var responsiveChart = [ ['screen and (max-width: 640px)', { axisX: { labelInterpolationFnc: function (value) { return value[0]; } } }] ]; Chartist.Line('#chartHours', dataChart, optionsChart, responsiveChart); // cpu and memory -------------------------- cpu_usage = getCpuUsage(app) memory_usage = getMemoryUsage(app) var data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], series: [ cpu_usage,memory_usage // [542, 543, 520, 680, 653, 753, 326, 434, 568, 610, 756, 895], // [230, 293, 380, 480, 503, 553, 600, 664, 698, 710, 736, 795] ] }; var options = { seriesBarDistance: 10, axisX: { showGrid: false }, height: "245px" }; var responsiveOptions = [ ['screen and (max-width: 640px)', { seriesBarDistance: 5, axisX: { labelInterpolationFnc: function (value) { return value[0]; } } }] ]; Chartist.Line('#chartActivity', data, options, responsiveOptions); var dataPreferences = { series: [ [25, 30, 20, 25] ] }; var optionsPreferences = { donut: true, donutWidth: 40, startAngle: 0, total: 100, showLabel: false, axisX: { showGrid: false } }; Chartist.Pie('#chartPreferences', dataPreferences, optionsPreferences); //summary Run|Idle|Crash pie chart status = getStatus(app) statusList = status.split(','); statusByNum = getStatusByType(statusList) function getStatusByType(statusList){ running = 0; idle = 0; crash = 0; for (var n in statusList){ if (statusList[n] == 'running'){ running += 1; }; if (statusList[n] == 'idle'){ idle += 1; }; if (statusList[n] == 'crash'){ crash += 1; }; } statusList = [running, idle, crash]; return statusList } percentage = getStatusPercent(statusByNum); function getStatusPercent(statusByNum){ let total = 0 for (var i in statusByNum){ total += statusByNum[i]; } percent = [] for (var i in statusByNum){ percent.push(total / statusByNum[i]) } total = 100 let percentage = [] for (var i in percent){ percentage.push(total/percent[i]) } for (var i in percentage){ if (percentage[i] == 0){ percentage.pop(percentage[i]); } } return percentage } for (i in percentage){ percentage[i] = percentage[i].toString()+'%'; } Chartist.Pie('#chartPreferences', { labels: percentage, series: statusByNum }); }) }, // End chartist function initGoogleMaps: function(){ var myLatlng = new google.maps.LatLng(40.748817, -73.985428); var mapOptions = { zoom: 13, center: myLatlng, 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({ position: myLatlng, title:"Hello World!" }); // To add the marker to the map, call setMap(); marker.setMap(map); }, showNotification: function(from, align){ color = Math.floor((Math.random() * 4) + 1); $.notify({ icon: "ti-comment", message: "Message." },{ type: type[color], timer: 4000, placement: { from: from, align: align } }); }, } /** * Global information about the dashboard * @TODO: Add socket handling ... it would make non-blocking updating information */ var g = {} 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 TIME_ELLAPSED = 2000 ; object.callback = function (r) { r = JSON.parse(r.responseText) pointer(r) console.log(r) //observer.notify() } object.init = function (observer) { observer = observer var httpclient = HttpClient.instance() //httpclient.setAsync(false) httpclient.get(this.url, this.callback) setTimeout(function(){ observer.notify() },TIME_ELLAPSED) ; //observer.notify() } return object }