dashboard.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570
  1. var monitor = {}
  2. monitor.processes = {}
  3. monitor.processes.fetch = function(){
  4. var httpclient = HttpClient.instance()
  5. httpclient.get(HTTP_CONTEXT+'/get/processes',monitor.processes.init);
  6. }
  7. monitor.processes.init = function (x) {
  8. var r = JSON.parse(x.responseText)
  9. monitor.processes.summary.init(r)
  10. var keys = jx.utils.keys(r)
  11. jx.dom.set.value('menu','')
  12. jx.utils.patterns.visitor(keys,function(label){
  13. var div = jx.dom.get.instance('DIV')
  14. var frame= jx.dom.get.instance('DIV')
  15. var i = jx.dom.get.instance('I')
  16. i.className = 'fa fa-chevron-right left'
  17. div.innerHTML = label
  18. frame.data = r[label]
  19. frame.label = label
  20. frame.appendChild(i)
  21. frame.appendChild(div)
  22. frame.className = 'menu-item'
  23. frame.onclick = function () {
  24. monitor.processes.render(this.label, this.data);
  25. jx.dom.set.value('trends_chart','')
  26. //monitor.processes.trend.init(this.label)
  27. }
  28. jx.dom.append('menu',frame)
  29. })
  30. //
  31. // Auto start the first item in the menu
  32. // This is designed not to let the user wander or wonder what is going on
  33. //
  34. var nodes = jx.dom.get.children('menu')
  35. if (nodes.length > 0) {
  36. nodes[0].click()
  37. } else {
  38. //
  39. // We should hide the panes for this
  40. //
  41. jx.dom.hide('apps')
  42. }
  43. setTimeout(monitor.sandbox.init,3000)
  44. }
  45. /**
  46. * This function renders the grid of processes being monitored,
  47. * @param label label the list of processes belongs to
  48. * @param data dataset of a selected set of processes (works a bit like top)
  49. */
  50. monitor.processes.render = function(label,data) {
  51. data = jx.utils.patterns.visitor(data,function(row){
  52. var status = {"idle":'<i class="fa fa-ellipsis-h" title="IDLE"></i>',"running":'<i class="fa fa-check" title="RUNNING"></i>',"crash":'<i class="fa fa-times" title="CRASHED"></i>'}
  53. if (!row.status.match(/class/)) {
  54. row.status_id = row.status
  55. row.status = status[row.status]
  56. }
  57. return row
  58. })
  59. jx.dom.set.value('latest_processes','') ;
  60. jx.dom.set.value('latest_processes_label',label)
  61. var options = {
  62. width: $('#latest_processes').width(), height:'auto'
  63. }
  64. options.paging = true
  65. options.pageSize = 4
  66. options.pageIndex = 1
  67. options.pageButtonCount = 4
  68. options.pagerContainer = '#latest_process_pager'
  69. options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}"
  70. options.pagePrevText= '<i class="fa fa-chevron-left"></i>'
  71. options.pageNextText= "<i class='fa fa-chevron-right small' title='Next'> </i>"
  72. options.data = data
  73. options.rowClass = function (item, index,evt) {
  74. return 'small'
  75. }
  76. options.rowClick = function(args){
  77. var item = args.item
  78. var id = jx.dom.get.value('latest_processes_label')
  79. var app = item.label
  80. monitor.processes.trend.init(id, app)
  81. if (item.anomaly == true) {
  82. jx.dom.show('has_anomaly')
  83. } else {
  84. jx.dom.hide('has_anomaly')
  85. }
  86. }
  87. options.autoload = true
  88. options.fields = [
  89. { name: 'label', type: 'text', title: "Process", headercss: "small bold", css: "small"},
  90. { name: "cpu_usage", type: "number", title: "CPU", headercss: "small bold" , width:'64px'},
  91. { name: "memory_usage", type: "text", title: "Mem. Used", type: "number", headercss: "small bold" },
  92. { name: "proc_count", type: "number", title: "Proc Count", headercss: "small bold" },
  93. {name:"status",type:"text",title:"Status",headercss:"small bold",align:"center", width:'64px'}
  94. ]
  95. var grid = $('#latest_processes').jsGrid(options) ;
  96. //
  97. // We need to auto click the first row
  98. $('#latest_processes').find('.jsgrid-row')[0].click()
  99. }
  100. monitor.processes.trend = {}
  101. monitor.processes.trend.init = function (label,app) {
  102. var httpclient = HttpClient.instance()
  103. var uri = HTTP_CONTEXT+'/trends?id='+label+'&app='+encodeURIComponent(app)
  104. httpclient.get(uri, function (x) {
  105. var logs = JSON.parse(x.responseText)
  106. var dom = jx.dom.get.instance('trend_info');
  107. dom.logs = logs
  108. jx.dom.set.value('trend_info',app)
  109. // jx.dom.set.attribute(label,'logs',logs)
  110. monitor.processes.trend.render(logs,null,app)
  111. })
  112. }
  113. monitor.processes.trend.render = function (logs, key,label) {
  114. // if (key == null) {
  115. // key = 'memory_usage'
  116. // }
  117. // if (logs == null || label == null){
  118. // logs = jx.dom.get.instance('trend_info').logs
  119. // label= jx.dom.get.value('trend_info') ;
  120. // }
  121. var frame = $('#trends_chart')
  122. jx.dom.set.value('trends_chart','')
  123. var context = jx.dom.get.instance('CANVAS')
  124. context.width = $(frame).width()
  125. context.height= $(frame).height()
  126. var conf = { type: 'line',responsive:true }
  127. conf.data = {}
  128. conf.options = { legend: { position: 'bottom' } }
  129. conf.options.scales = {}
  130. conf.options.scales.yAxes = [
  131. {id:'0',scaleLabel:{display:true,labelString:'CPU & MEMORY USAGE'},ticks:{min:0,beginAtZero:true},gridLines: {display:false}},
  132. {id:'1',position:'right',scaleLabel:{display:true,labelString:'PROCESS COUNT'},ticks:{min:0,stepSize:1,beginAtZero:true},gridLines: {display:false}}
  133. ]
  134. conf.options.scales.xAxes = [
  135. {
  136. type: 'timeline',
  137. unit:'hour',
  138. gridLines: {display:false},
  139. time: {
  140. format:'DD-MMM HH:mm'
  141. }
  142. }
  143. ]
  144. conf.data.datasets = [ ]
  145. var x_axis = []
  146. var _x = {}
  147. // var _y = {}
  148. var cpu = {yAxisID:'0', label: 'CPU Usage (%)', data: [] ,backgroundColor:'transparent',borderColor:COLORS[187],fill:false,borderWidth:1}
  149. var mem = {yAxisID:'0',label : 'Memory Usage(%)',data:[],backgroundColor:'transparent',borderColor:COLORS[32],fill:false,borderWidth:1}
  150. var proc= {yAxisID:'1',label : 'Proc Count',data:[],backgroundColor:'transparent',borderColor:COLORS[542],fill:false,borderWidth:1}
  151. jx.utils.patterns.visitor(logs,function(item){
  152. x = new Date(item.year,item.month-1,item.day,item.hour,item.minute)
  153. y = item[key]
  154. if (_x[x] == null ){//||(_x[x] == null && _y[y] == null)) {
  155. _x[x] = 1
  156. // _y[y] = 1
  157. x_axis.push(x)
  158. cpu.data.push({ x: x, y: item.cpu_usage })
  159. mem.data.push({x:x,y:item.memory_usage})
  160. proc.data.push({x:x,y:item.proc_count})
  161. // return {x:x,y:y}
  162. }
  163. })
  164. conf.data.datasets = [cpu,mem,proc]
  165. x_axis = jx.utils.unique(x_axis)
  166. conf.data.labels = x_axis
  167. // console.log(conf)
  168. jx.dom.append('trends_chart',context)
  169. var chart = new Chart(context,conf)
  170. }
  171. monitor.processes.summary = {}
  172. monitor.processes.summary.init = function(logs){
  173. var xr = 0, xc = 0, xi = 0
  174. var series = {}
  175. //var colors = [COLORS[11], COLORS[1], COLORS[2]]
  176. colors = [COLORS[11], COLORS[2], COLORS[100]]
  177. RUNNING_COLOR = COLORS[26]
  178. IDLE_COLOR = COLORS[100]
  179. CRASH_COLOR=COLORS[2]
  180. var i = 0;
  181. var date = null;
  182. for( label in logs ){
  183. var rows = logs[label]
  184. series[label] = {data:[0,0,0],label:label}
  185. jx.utils.patterns.visitor(rows,function(item){
  186. if (date == null) {
  187. date = new Date(item.year,item.month,item.day)
  188. //date = [item.day,item.month,item.year]
  189. }
  190. if (item.status == 'running'){
  191. xr += 1
  192. }else if(item.status == 'idle'){
  193. xi += 1
  194. }else{
  195. xc += 1
  196. }
  197. })
  198. }
  199. var data = {labels:['Running','Crash','Idle'],datasets:[{data:[xr,xc,xi],backgroundColor:[RUNNING_COLOR,CRASH_COLOR,IDLE_COLOR/**COLORS[11],COLORS[2],COLORS[100]*/]}]}
  200. var context = jx.dom.get.instance('CANVAS')
  201. jx.dom.set.value('total-running', xr)
  202. jx.dom.set.value('total-crash', xc)
  203. jx.dom.set.value('total-idle', xi)
  204. jx.dom.set.value('total-apps', xr + xi + xc)
  205. jx.dom.set.value('app-summary-date', date)
  206. jx.dom.set.value('summary_chart','')
  207. jx.dom.append('summary_chart',context)
  208. var conf = {width:50,height:50}
  209. conf.type = 'doughnut'
  210. conf.data = data
  211. conf.options = {legend:{ position:'right'},repsonsive:true}
  212. var chart = new Chart(context,conf)
  213. jx.dom.set.value('summary_ranking','')
  214. context = jx.dom.get.instance('CANVAS')
  215. jx.dom.append('summary_ranking',context)
  216. conf = { type: 'bar', responsive: true }
  217. conf.options={scales:{xAxes:[{gridLines: {display:false}}],yAxes:[{gridLines: {display:false},scaleLabel:{display:true,labelString:'PROCESS COUNTS'} }] }}
  218. conf.options.legend ={position:'right'}
  219. /*
  220. conf.data = {labels:['Running','Idle','Crash']}
  221. var labels = jx.utils.keys(series)
  222. var i = 0
  223. conf.data.datasets = jx.utils.patterns.visitor(labels,function(id){
  224. series[id].backgroundColor = COLORS[i++]
  225. return series[id]})
  226. chart = new Chart(context,conf);
  227. */
  228. var labels = jx.utils.keys(logs)
  229. conf.data = { labels: labels, backgroundColor:colors }
  230. var xr = [], xi = [], xc = [],xr_bg = [],xc_bg = [],xi_bg = []
  231. jx.utils.patterns.visitor(labels, function (id) {
  232. var rows = logs[id]
  233. var index = xr.length
  234. xr_bg[index] = RUNNING_COLOR
  235. xi_bg[index] = IDLE_COLOR
  236. xc_bg[index] = CRASH_COLOR
  237. if (xr[index] == null) {
  238. xr[index] = 0
  239. xc[index] = 0
  240. xi[index] = 0
  241. }
  242. jx.utils.patterns.visitor(logs[id], function (row) {
  243. if (row.status.match(/running/i)) {
  244. xr[index] += 1
  245. } else if (row.status.match(/idle/i)) {
  246. xi[index] += 1
  247. } else {
  248. xc[index] += 1
  249. }
  250. })
  251. })
  252. conf.data.datasets = [{ label: 'Running', data:xr,backgroundColor:xr_bg},{label:'Crash',data:xc,backgroundColor:xc_bg},{label:'Idle',data:xi,backgroundColor:xi_bg} ]
  253. chart = new Chart(context, conf)
  254. }
  255. monitor.sandbox = {}
  256. monitor.sandbox.init = function () {
  257. jx.dom.hide('inspect_sandbox')
  258. var httpclient = HttpClient.instance()
  259. httpclient.get(HTTP_CONTEXT+'/sandbox', function (x) {
  260. var r = JSON.parse(x.responseText)
  261. if (r.length > 0) {
  262. jx.dom.show('sandbox')
  263. monitor.sandbox.render(r);
  264. } else {
  265. jx.dom.hide('sandbox')
  266. }
  267. })
  268. }
  269. monitor.sandbox.render = function (logs) {
  270. months = { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec' }
  271. var d = ([logs[0].day, '-', months[logs[0].month], '-', logs[0].year, ' ', logs[0].hour, ':', logs[0].minute]).join('')
  272. jx.dom.set.value('sandbox_date', d)
  273. var options = { width: $('#sandbox_status').width(), height: 'auto' }
  274. options.data = jx.utils.patterns.visitor(logs, function (item) {
  275. if (item.value == 100) {
  276. item.status = '<i class="fa fa-check" style="color:green"></i>'
  277. } else {
  278. item.status = '<i class="fa fa-download" style="color:black"></i>'
  279. }
  280. return item
  281. })
  282. options.paging = true
  283. options.pageSize = 4
  284. options.pageIndex = 1
  285. options.pageButtonCount = 4
  286. options.pagerContainer = '#folders_pager'
  287. options.pagerFormat = "{prev} Page {pageIndex} of {pageCount} {next}"
  288. options.pagePrevText = '<i class="fa fa-chevron-left"></i>'
  289. options.pageNextText = "<i class='fa fa-chevron-right small' title='Next'> </i>";
  290. options.rowClass = function (item) {
  291. if (item.value < 70) {
  292. return 'bad'
  293. } else if (item.value < 100) {
  294. return 'warning'
  295. } else {
  296. return 'good'
  297. }
  298. }
  299. options.rowClick = function (args) {
  300. var item = args.item;
  301. if (item.missing.length > 0) {
  302. var form = jx.dom.get.instance('FORM')
  303. var dom = jx.dom.get.instance('INPUT')
  304. dom.type = 'hidden'
  305. dom.name = 'missing'
  306. dom.value = JSON.stringify(item.missing)
  307. form.action = HTTP_CONTEXT+'/download'
  308. form.method = 'POST'
  309. form.appendChild(dom)
  310. form.submit()
  311. }
  312. }
  313. options.fields = [
  314. {name:"status",title:"",width:20},
  315. { name: 'label',title:'Virtual Environment Label',type:'text',css:'small',headercss:'small bold' },
  316. { name: 'value', title:'Completeness %',type: 'number', css: 'small', headercss: 'small bold' }
  317. ]
  318. var grid = $('#sandbox_status').jsGrid(options)
  319. jx.dom.show('inspect_sandbox')
  320. }
  321. monitor.folders = {}
  322. monitor.folders.init = function () {
  323. var httpclient = HttpClient.instance()
  324. httpclient.get(HTTP_CONTEXT+'/folders', function (x) {
  325. var r = JSON.parse(x.responseText)
  326. var data = []
  327. for (var id in r) {
  328. var item = r[id]
  329. // item.id = id
  330. data = data.concat(item)
  331. }
  332. monitor.folders.render.init(data)
  333. })
  334. }
  335. monitor.folders.search = {}
  336. monitor.folders.search.reset = function () {
  337. jx.dom.set.value('folder_search', '')
  338. var data = jx.dom.get.attribute('folder_search', 'data')
  339. monitor.folders.render.summary(data)
  340. }
  341. monitor.folders.search.init = function(){
  342. var term = jx.dom.get.value('folder_search')
  343. var data = jx.dom.get.attribute('folder_search', 'data')
  344. term = term.replace(/\x32/g,'')
  345. if (term.length == 0) {
  346. monitor.folders.render.summary(data)
  347. } else if (term.length > 3) {
  348. data = jx.utils.patterns.visitor(data, function (row) {
  349. if (row.id.match(term)) {
  350. return row
  351. }
  352. })
  353. monitor.folders.render.summary(data)
  354. }
  355. }
  356. monitor.folders.render = {}
  357. monitor.folders.render.init = function (data) {
  358. jx.dom.set.attribute('folder_search','data',data)
  359. monitor.folders.render.summary(data)
  360. }
  361. monitor.folders.show = {}
  362. monitor.folders.show.plan = function () {
  363. $('#folder_summary').slideUp(function () {
  364. $('#folder_plan').slideDown()
  365. })
  366. }
  367. monitor.folders.show.grid = function () {
  368. $('#folder_plan').slideUp(function () {
  369. $('#folder_summary').slideDown()
  370. })
  371. }
  372. /***
  373. * This function is designed to establish a folder clean up strategy i.e :
  374. * - We will look for anomalies given age,file size
  375. * - We will also look for where most of the data is distributed (mode)
  376. */
  377. monitor.folders.render.details = function (folder,data) {
  378. //
  379. // We need to normalize the data at this point so as to be able to show it all in the same chart
  380. // jx.math.scale x: counts, y: measure ment
  381. //
  382. var r = [data.age, data.size]
  383. var plans = []
  384. for (var i in r) {
  385. var xy = r[i]
  386. var mode = jx.math.mode(jx.utils.vector('x', xy))
  387. var yvalues = jx.utils.patterns.visitor(xy, function (row) {
  388. if (row.x == mode) {
  389. return row.y
  390. }
  391. })
  392. var sd = jx.math.sd(yvalues)
  393. if (i == 0) {
  394. prefix = 'age'
  395. var mean = jx.math.mean(yvalues)
  396. var max = (mean + (1.5 * sd))
  397. if (mean > 30 && mean < 365) {
  398. divide_by = 30
  399. units = 'MONTHS'
  400. } else if (mean > 365) {
  401. divide_by=365
  402. units = 'YEARS'
  403. } else {
  404. divide_by = 1
  405. units = 'DAYS'
  406. }
  407. } else {
  408. prefix = 'size'
  409. var mean = jx.math.sum(yvalues)
  410. var max = 0// (mean + (1.5 * sd))
  411. if (mean > 1000) {
  412. divide_by = 1000
  413. units = 'GB'
  414. } else {
  415. divide_by = 1
  416. units = 'MB'
  417. }
  418. }
  419. if (isNaN(mean)) {
  420. mean = 0
  421. }
  422. //
  423. // We need to assess the outliars i.e too old, too large
  424. //
  425. y = jx.utils.vector('y', xy)
  426. var _mean = jx.math.mean(y)
  427. var _sd = jx.math.sd(y)
  428. var outlier = _mean < mean || max > (_mean + (1.5 * _sd))
  429. plans.push({ 'label': prefix, 'max': max, 'sd': sd, 'mean': mean, 'count': yvalues.length, 'outlier': outlier })
  430. jx.dom.set.value(prefix + '_count', yvalues.length)
  431. jx.dom.set.value(prefix + '_value', (mean/divide_by).toFixed(2))
  432. jx.dom.set.value(prefix+'_units',units)
  433. monitor.folders.show.plan()
  434. }
  435. jx.dom.set.value('folder_name', folder)
  436. }
  437. monitor.folders.render.summary = function (data) {
  438. jx.dom.set.value('gridfolders', '')
  439. var options = {
  440. width: $('#gridfolders').width(), height:'auto'
  441. }
  442. options.paging = true
  443. options.pageSize = 4
  444. options.pageIndex = 1
  445. options.pageButtonCount = 4
  446. options.pagerContainer = '#latest_process_pager'
  447. options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}"
  448. options.pagePrevText= '<i class="fa fa-chevron-left"></i>'
  449. options.pageNextText= "<i class='fa fa-chevron-right small' title='Next'> </i>"
  450. options.data = data
  451. options.rowClass = function (item, index,evt) {
  452. return 'small'
  453. }
  454. options.rowClick = function(args){
  455. // var item = args.item
  456. // age = jx.utils.patterns.visitor(item.details.age, function (row) {
  457. // return {y:row[0],x:row[1]}
  458. // })
  459. // size = jx.utils.patterns.visitor(item.details.size, function (row) {
  460. // return {y:row[0],x:row[1]}
  461. // })
  462. // monitor.folders.render.details(item.name,{age:age,size:size})
  463. }
  464. //
  465. // @TODO Add the units in days just in case
  466. options.autoload = true
  467. options.fields = [
  468. { name: 'id', type: 'text', title: "Host", headercss: "small bold", css: "small"},
  469. { name: 'label', type: 'text', title: "Folder Name", headercss: "small bold", css: "small"},
  470. { name: "size", type: "number", title: "Folder Size", type: "number", headercss: "small bold" },
  471. { name: "count", type: "number", title: "File Count", type: "number", headercss: "small bold" }
  472. ]
  473. var grid = $('#gridfolders').jsGrid(options) ;
  474. }
  475. monitor.menu = {}
  476. monitor.menu.event = {}
  477. monitor.menu.event.toggle = function () {
  478. var dom = jx.dom.get.instance('menuframe')
  479. var value = dom.style.marginLeft.trim()
  480. if (value==0 || value == "0px" || value == "") {
  481. var width = -$(dom).width() - 10
  482. $('#menuframe').animate({marginLeft:"-12%"})
  483. } else {
  484. $('#menuframe').animate({marginLeft:"0"})
  485. }
  486. }
  487. /**
  488. * Socket handler, check for learning status
  489. */