dashboard.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. type = ['','info','success','warning','danger'];
  2. dashboard = {
  3. initPickColor: function(){
  4. $('.pick-class-label').click(function(){
  5. var new_class = $(this).attr('new-class');
  6. var old_class = $('#display-buttons').attr('data-class');
  7. var display_div = $('#display-buttons');
  8. if(display_div.length) {
  9. var display_buttons = display_div.find('.btn');
  10. display_buttons.removeClass(old_class);
  11. display_buttons.addClass(new_class);
  12. display_div.attr('data-class', new_class);
  13. }
  14. });
  15. },
  16. initChartist: function(){
  17. var getData = $.get('/1/app/usage/trend');
  18. var appStatus = $.get('/1/app/status?node=apps@seeker-hacker&app=terminal');
  19. console.log('appstatus...', appStatus)
  20. console.log('getData...', getData);
  21. getData.done(function(results) {
  22. var data = JSON.parse(results)
  23. console.log('data...', data)
  24. var app = data['Chrome'];
  25. console.log('app...', app)
  26. console.log('cpu', app.cpu)
  27. console.log('memory', app.memory_used)
  28. function getCpuUsage (app){
  29. cpu_usage = []
  30. for (var i in app){
  31. cpu_usage.push(app[i].cpu_usage)
  32. }
  33. return cpu_usage
  34. }
  35. function getMemoryUsage (app){
  36. memory_usage = []
  37. for (var i in app){
  38. memory_usage.push(app[i].memory_usage)
  39. }
  40. return memory_usage
  41. }
  42. function getStatus (app){
  43. statusList = []
  44. for (var i in app){
  45. statusList.push(app[i].status)
  46. }
  47. return statusList
  48. }
  49. monitorStatus = function(idle, crash, running){ // TODO: make this async with g.summary at bottom
  50. return idle, crash, running
  51. }
  52. // monitoring apps chart
  53. var dataChart = {
  54. labels: ['9:00AM', '12:00AM', '3:00PM', '6:00PM', '9:00PM', '12:00PM', '3:00AM', '6:00AM'],
  55. series: [app.cpu, app.memory_used, [0.1, 2, 4, 0.8], ] // Add memory available?
  56. //[287, 385, 490, 562, 594, 626, 698, 895, 952],
  57. //[67, 152, 193, 240, 387, 435, 535, 642, 744],
  58. //[23, 113, 67, 108, 190, 239, 307, 410, 410],
  59. //]
  60. };
  61. var optionsChart = {
  62. lineSmooth: false,
  63. low: 0,
  64. high: 100,
  65. showArea: true,
  66. height: "245px",
  67. axisX: {
  68. showGrid: false,
  69. },
  70. lineSmooth: Chartist.Interpolation.simple({
  71. divisor: 1
  72. }),
  73. showLine: true,
  74. showPoint: false,
  75. };
  76. var responsiveChart = [
  77. ['screen and (max-width: 640px)', {
  78. axisX: {
  79. labelInterpolationFnc: function (value) {
  80. return value[0];
  81. }
  82. }
  83. }]
  84. ];
  85. Chartist.Line('#chartHours', dataChart, optionsChart, responsiveChart);
  86. // cpu and memory --------------------------
  87. cpu_usage = getCpuUsage(app)
  88. memory_usage = getMemoryUsage(app)
  89. var data = {
  90. labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  91. series: [app.cpu, app.memory_used
  92. //cpu_usage,memory_usage
  93. // [542, 543, 520, 680, 653, 753, 326, 434, 568, 610, 756, 895],
  94. // [230, 293, 380, 480, 503, 553, 600, 664, 698, 710, 736, 795]
  95. ]
  96. };
  97. var options = {
  98. seriesBarDistance: 10,
  99. axisX: {
  100. showGrid: false
  101. },
  102. height: "245px"
  103. };
  104. var responsiveOptions = [
  105. ['screen and (max-width: 640px)', {
  106. seriesBarDistance: 5,
  107. axisX: {
  108. labelInterpolationFnc: function (value) {
  109. return value[0];
  110. }
  111. }
  112. }]
  113. ];
  114. Chartist.Line('#chartActivity', data, options, responsiveOptions);
  115. var dataPreferences = {
  116. series: [
  117. [25, 30, 20, 25]
  118. ]
  119. };
  120. var optionsPreferences = {
  121. donut: true,
  122. donutWidth: 40,
  123. startAngle: 0,
  124. total: 100,
  125. showLabel: false,
  126. axisX: {
  127. showGrid: false
  128. }
  129. };
  130. Chartist.Pie('#chartPreferences', dataPreferences, optionsPreferences);
  131. //summary Run|Idle|Crash pie chart
  132. status = getStatus(app)
  133. statusList = status.split(',');
  134. statusByNum = getStatusByType(statusList)
  135. function getStatusByType(statusList){
  136. running = 0;
  137. idle = 0;
  138. crash = 0;
  139. for (var n in statusList){
  140. if (statusList[n] == 'running'){
  141. running += 1;
  142. };
  143. if (statusList[n] == 'idle'){
  144. idle += 1;
  145. };
  146. if (statusList[n] == 'crash'){
  147. crash += 1;
  148. };
  149. }
  150. statusList = [running, idle, crash];
  151. return statusList
  152. }
  153. percentage = getStatusPercent(statusByNum);
  154. function getStatusPercent(statusByNum){
  155. let total = 0
  156. for (var i in statusByNum){
  157. total += statusByNum[i];
  158. }
  159. percent = []
  160. for (var i in statusByNum){
  161. percent.push(total / statusByNum[i])
  162. }
  163. total = 100
  164. let percentage = []
  165. for (var i in percent){
  166. percentage.push(total/percent[i])
  167. }
  168. for (var i in percentage){
  169. if (percentage[i] == 0){
  170. percentage.pop(percentage[i]);
  171. }
  172. }
  173. return percentage
  174. }
  175. for (i in percentage){
  176. percentage[i] = percentage[i].toString()+'%';
  177. }
  178. console.log("running", running)
  179. Chartist.Pie('#chartPreferences', {
  180. labels: percentage,
  181. series: [1,2,3]
  182. });
  183. })
  184. },
  185. // End chartist function
  186. initGoogleMaps: function(){
  187. var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
  188. var mapOptions = {
  189. zoom: 13,
  190. center: myLatlng,
  191. scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
  192. 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"}]}]
  193. }
  194. var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  195. var marker = new google.maps.Marker({
  196. position: myLatlng,
  197. title:"Hello World!"
  198. });
  199. // To add the marker to the map, call setMap();
  200. marker.setMap(map);
  201. },
  202. showNotification: function(from, align){
  203. color = Math.floor((Math.random() * 4) + 1);
  204. $.notify({
  205. icon: "ti-comment",
  206. message: "Message."
  207. },{
  208. type: type[color],
  209. timer: 4000,
  210. placement: {
  211. from: from,
  212. align: align
  213. }
  214. });
  215. },
  216. }
  217. /**
  218. * Global information about the dashboard
  219. * @TODO: Add socket handling ... it would make non-blocking updating information
  220. */
  221. var g = {}
  222. g.summary = {}
  223. /**
  224. * Initializing the top section of the dashboard (apps and folders)
  225. */
  226. g.summary.factory = function (url,pointer) {
  227. var object = {}
  228. object.url = url
  229. var observer = null
  230. var TIME_ELLAPSED = 2000 ;
  231. object.callback = function (r) {
  232. r = JSON.parse(r.responseText)
  233. pointer(r)
  234. console.log(r)
  235. monitorStatus(r.idle, r.crash, r.running)
  236. //observer.notify()
  237. }
  238. object.init = function (observer) {
  239. observer = observer
  240. var httpclient = HttpClient.instance()
  241. //httpclient.setAsync(false)
  242. httpclient.get(this.url, this.callback)
  243. setTimeout(function(){
  244. observer.notify()
  245. },TIME_ELLAPSED) ;
  246. //observer.notify()
  247. }
  248. return object
  249. }