dashboard.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
  1. var monitor = {}
  2. monitor.processes = {}
  3. monitor.processes.fetch = function(){
  4. var httpclient = HttpClient.instance()
  5. httpclient.get('/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. jx.dom.get.children('menu')[0].click()
  35. setTimeout(monitor.sandbox.init,3000)
  36. }
  37. /**
  38. * This function renders the grid of processes being monitored,
  39. * @param label label the list of processes belongs to
  40. * @param data dataset of a selected set of processes (works a bit like top)
  41. */
  42. monitor.processes.render = function(label,data) {
  43. data = jx.utils.patterns.visitor(data,function(row){
  44. 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>'}
  45. if (!row.status.match(/class/)) {
  46. row.status_id = row.status
  47. row.status = status[row.status]
  48. }
  49. return row
  50. })
  51. jx.dom.set.value('latest_processes','') ;
  52. jx.dom.set.value('latest_processes_label',label)
  53. var options = {
  54. width: $('#latest_processes').width(), height:'auto'
  55. }
  56. options.paging = true
  57. options.pageSize = 4
  58. options.pageIndex = 1
  59. options.pageButtonCount = 4
  60. options.pagerContainer = '#latest_process_pager'
  61. options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}"
  62. options.pagePrevText= '<i class="fa fa-chevron-left"></i>'
  63. options.pageNextText= "<i class='fa fa-chevron-right small' title='Next'> </i>"
  64. options.data = data
  65. options.rowClass = function (item, index,evt) {
  66. return 'small'
  67. }
  68. options.rowClick = function(args){
  69. var item = args.item
  70. var id = jx.dom.get.value('latest_processes_label')
  71. var app = item.label
  72. monitor.processes.trend.init(id, app)
  73. if (item.anomaly == true) {
  74. jx.dom.show('has_anomaly')
  75. } else {
  76. jx.dom.hide('has_anomaly')
  77. }
  78. }
  79. options.autoload = true
  80. options.fields = [
  81. { name: 'label', type: 'text', title: "Process", headercss: "small bold", css: "small"},
  82. { name: "cpu_usage", type: "number", title: "CPU", headercss: "small bold" , width:'64px'},
  83. { name: "memory_usage", type: "text", title: "Mem. Used", type: "number", headercss: "small bold" },
  84. { name: "proc_count", type: "number", title: "Proc Count", headercss: "small bold" },
  85. {name:"status",type:"text",title:"Status",headercss:"small bold",align:"center", width:'64px'}
  86. ]
  87. var grid = $('#latest_processes').jsGrid(options) ;
  88. //
  89. // We need to auto click the first row
  90. $('#latest_processes').find('.jsgrid-row')[0].click()
  91. }
  92. monitor.processes.trend = {}
  93. monitor.processes.trend.init = function (label,app) {
  94. var httpclient = HttpClient.instance()
  95. var uri = '/trends?id='+label+'&app='+encodeURIComponent(app)
  96. httpclient.get(uri, function (x) {
  97. var logs = JSON.parse(x.responseText)
  98. var dom = jx.dom.get.instance('trend_info');
  99. dom.logs = logs
  100. jx.dom.set.value('trend_info',app)
  101. // jx.dom.set.attribute(label,'logs',logs)
  102. monitor.processes.trend.render(logs,null,app)
  103. })
  104. }
  105. monitor.processes.trend.render = function (logs, key,label) {
  106. // if (key == null) {
  107. // key = 'memory_usage'
  108. // }
  109. // if (logs == null || label == null){
  110. // logs = jx.dom.get.instance('trend_info').logs
  111. // label= jx.dom.get.value('trend_info') ;
  112. // }
  113. var frame = $('#trends_chart')
  114. jx.dom.set.value('trends_chart','')
  115. var context = jx.dom.get.instance('CANVAS')
  116. context.width = $(frame).width()
  117. context.height= $(frame).height()
  118. var conf = { type: 'line',responsive:true }
  119. conf.data = {}
  120. conf.options = { legend: { position: 'bottom' } }
  121. conf.options.scales = {}
  122. conf.options.scales.yAxes = [
  123. {id:'0',scaleLabel:{display:true,labelString:'CPU & MEMORY USAGE'},ticks:{min:0,beginAtZero:true},gridLines: {display:false}},
  124. {id:'1',position:'right',scaleLabel:{display:true,labelString:'PROCESS COUNT'},ticks:{min:0,stepSize:1,beginAtZero:true},gridLines: {display:false}}
  125. ]
  126. conf.options.scales.xAxes = [
  127. {
  128. type: 'time',
  129. gridLines: {display:false},
  130. unitStepSize:25,
  131. time: {
  132. format:'DD-MMM HH:mm'
  133. }
  134. }
  135. ]
  136. conf.data.datasets = [ ]
  137. var x_axis = []
  138. var _x = {}
  139. // var _y = {}
  140. var cpu = {yAxisID:'0', label: 'CPU Usage (%)', data: [] ,backgroundColor:'transparent',borderColor:COLORS[187],fill:false,borderWidth:1}
  141. var mem = {yAxisID:'0',label : 'Memory Usage(%)',data:[],backgroundColor:'transparent',borderColor:COLORS[32],fill:false,borderWidth:1}
  142. var proc= {yAxisID:'1',label : 'Proc Count',data:[],backgroundColor:'transparent',borderColor:COLORS[542],fill:false,borderWidth:1}
  143. jx.utils.patterns.visitor(logs,function(item){
  144. x = new Date(item.year,item.month-1,item.day,item.hour,item.minute)
  145. y = item[key]
  146. if (_x[x] == null ){//||(_x[x] == null && _y[y] == null)) {
  147. _x[x] = 1
  148. // _y[y] = 1
  149. x_axis.push(x)
  150. cpu.data.push({ x: x, y: item.cpu_usage })
  151. mem.data.push({x:x,y:item.memory_usage})
  152. proc.data.push({x:x,y:item.proc_count})
  153. // return {x:x,y:y}
  154. }
  155. })
  156. conf.data.datasets = [cpu,mem,proc]
  157. x_axis = jx.utils.unique(x_axis)
  158. conf.data.labels = x_axis
  159. // console.log(conf)
  160. jx.dom.append('trends_chart',context)
  161. var chart = new Chart(context,conf)
  162. }
  163. monitor.processes.summary = {}
  164. monitor.processes.summary.init = function(logs){
  165. var xr = 0, xc = 0, xi = 0
  166. var series = {}
  167. //var colors = [COLORS[11], COLORS[1], COLORS[2]]
  168. colors = [COLORS[11], COLORS[2], COLORS[100]]
  169. RUNNING_COLOR = COLORS[26]
  170. IDLE_COLOR = COLORS[100]
  171. CRASH_COLOR=COLORS[2]
  172. var i = 0;
  173. for( label in logs ){
  174. var rows = logs[label]
  175. series[label] = {data:[0,0,0],label:label}
  176. jx.utils.patterns.visitor(rows,function(item){
  177. if (item.status == 'running'){
  178. xr += 1
  179. }else if(item.status == 'idle'){
  180. xi += 1
  181. }else{
  182. xc += 1
  183. }
  184. })
  185. }
  186. var data = {labels:['Running','Crash','Idle'],datasets:[{data:[xr,xc,xi],backgroundColor:[RUNNING_COLOR,CRASH_COLOR,IDLE_COLOR/**COLORS[11],COLORS[2],COLORS[100]*/]}]}
  187. var context = jx.dom.get.instance('CANVAS')
  188. jx.dom.set.value('summary_chart','')
  189. jx.dom.append('summary_chart',context)
  190. var conf = {width:50,height:50}
  191. conf.type = 'doughnut'
  192. conf.data = data
  193. conf.options = {legend:{ position:'right'},repsonsive:true}
  194. var chart = new Chart(context,conf)
  195. jx.dom.set.value('summary_ranking','')
  196. context = jx.dom.get.instance('CANVAS')
  197. jx.dom.append('summary_ranking',context)
  198. conf = { type: 'bar', responsive: true }
  199. conf.options={scales:{xAxes:[{gridLines: {display:false}}],yAxes:[{gridLines: {display:false},scaleLabel:{display:true,labelString:'PROCESS COUNTS'} }] }}
  200. conf.options.legend ={position:'right'}
  201. /*
  202. conf.data = {labels:['Running','Idle','Crash']}
  203. var labels = jx.utils.keys(series)
  204. var i = 0
  205. conf.data.datasets = jx.utils.patterns.visitor(labels,function(id){
  206. series[id].backgroundColor = COLORS[i++]
  207. return series[id]})
  208. chart = new Chart(context,conf);
  209. */
  210. var labels = jx.utils.keys(logs)
  211. conf.data = { labels: labels, backgroundColor:colors }
  212. var xr = [], xi = [], xc = [],xr_bg = [],xc_bg = [],xi_bg = []
  213. jx.utils.patterns.visitor(labels, function (id) {
  214. var rows = logs[id]
  215. var index = xr.length
  216. xr_bg[index] = RUNNING_COLOR
  217. xi_bg[index] = IDLE_COLOR
  218. xc_bg[index] = CRASH_COLOR
  219. if (xr[index] == null) {
  220. xr[index] = 0
  221. xc[index] = 0
  222. xi[index] = 0
  223. }
  224. jx.utils.patterns.visitor(logs[id], function (row) {
  225. if (row.status.match(/running/i)) {
  226. xr[index] += 1
  227. } else if (row.status.match(/idle/i)) {
  228. xi[index] += 1
  229. } else {
  230. xc[index] += 1
  231. }
  232. })
  233. })
  234. conf.data.datasets = [{ label: 'Running', data:xr,backgroundColor:xr_bg},{label:'Crash',data:xc,backgroundColor:xc_bg},{label:'Idle',data:xi,backgroundColor:xi_bg} ]
  235. chart = new Chart(context, conf)
  236. }
  237. monitor.sandbox = {}
  238. monitor.sandbox.init = function () {
  239. jx.dom.hide('inspect_sandbox')
  240. var httpclient = HttpClient.instance()
  241. httpclient.get('/sandbox', function (x) {
  242. var r = JSON.parse(x.responseText)
  243. if (r.length > 0){
  244. monitor.sandbox.render(r);
  245. }
  246. })
  247. }
  248. monitor.sandbox.render = function (logs) {
  249. 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' }
  250. var d = ([logs[0].day, '-', months[logs[0].month], '-', logs[0].year, ' ', logs[0].hour, ':', logs[0].minute]).join('')
  251. jx.dom.set.value('sandbox_date', d)
  252. var options = { width: $('#sandbox_status').width(), height: 'auto' }
  253. options.data = jx.utils.patterns.visitor(logs, function (item) {
  254. if (item.value == 100) {
  255. item.status = '<i class="fa fa-check" style="color:green"></i>'
  256. } else {
  257. item.status = '<i class="fa fa-download" style="color:black"></i>'
  258. }
  259. return item
  260. })
  261. options.paging = true
  262. options.pageSize = 4
  263. options.pageIndex = 1
  264. options.pageButtonCount = 4
  265. options.pagerContainer = '#folders_pager'
  266. options.pagerFormat = "{prev} Page {pageIndex} of {pageCount} {next}"
  267. options.pagePrevText = '<i class="fa fa-chevron-left"></i>'
  268. options.pageNextText = "<i class='fa fa-chevron-right small' title='Next'> </i>";
  269. options.rowClass = function (item) {
  270. if (item.value < 70) {
  271. return 'bad'
  272. } else if (item.value < 100) {
  273. return 'warning'
  274. } else {
  275. return 'good'
  276. }
  277. }
  278. options.rowClick = function (args) {
  279. var item = args.item;
  280. if (item.missing.length > 0) {
  281. var form = jx.dom.get.instance('FORM')
  282. var dom = jx.dom.get.instance('INPUT')
  283. dom.type = 'hidden'
  284. dom.name = 'missing'
  285. dom.value = JSON.stringify(item.missing)
  286. form.action = '/download'
  287. form.method = 'POST'
  288. form.appendChild(dom)
  289. form.submit()
  290. }
  291. }
  292. options.fields = [
  293. {name:"status",title:"",width:20},
  294. { name: 'label',title:'Virtual Environment Label',type:'text',css:'small',headercss:'small bold' },
  295. { name: 'value', title:'Completeness %',type: 'number', css: 'small', headercss: 'small bold' }
  296. ]
  297. var grid = $('#sandbox_status').jsGrid(options)
  298. jx.dom.show('inspect_sandbox')
  299. }
  300. monitor.folders = {}
  301. monitor.folders.init = function () {
  302. var httpclient = HttpClient.instance()
  303. httpclient.get('/folders', function (x) {
  304. var r = JSON.parse(x.responseText)
  305. r = jx.utils.patterns.visitor(r, function (row) {
  306. return row[0]
  307. })
  308. monitor.folders.render.init(r)
  309. })
  310. }
  311. monitor.folders.render = {}
  312. monitor.folders.render.init = function (data) {
  313. monitor.folders.render.summary(data)
  314. }
  315. monitor.folders.render.details = function (data) {
  316. var context = jx.dom.get.instance('CANVAS')
  317. var frame = $('#chartfolder')
  318. jx.dom.set.value('chartfolder', '')
  319. context.width = $(frame).width()
  320. context.height= $(frame).height()
  321. var conf = { type: 'line',responsive:true }
  322. conf.data = {}
  323. conf.options = { legend: { position: 'bottom' } }
  324. conf.options.scales = {}
  325. conf.options.scales.yAxes = [
  326. {id:'0',scaleLabel:{display:true,labelString:'Age In Days'},ticks:{min:0,beginAtZero:true},gridLines: {display:false}},
  327. {id:'1',scaleLabel:{display:true,labelString:'Size in MB'},ticks:{min:0,beginAtZero:true},gridLines: {display:false}}
  328. ]
  329. conf.options.scales.xAxes = [{gridLines: {display:false}}]
  330. var age = {yAxisID:'0', label: 'File Age (Days)', data:data.age ,borderColor:COLORS[187],fill:true,borderWidth:1}
  331. var size = {yAxisID:'1',label : 'File Size (MB)',data:data.size,borderColor:COLORS[32],fill:true,borderWidth:1}
  332. // age.data = [{ x: 10, y: 30 }, {x:20,y:60}]
  333. // size.data= data.size
  334. age.data = data.age
  335. x_ = jx.utils.vector('x', age.data)
  336. z_ = jx.utils.vector('x',size.data)
  337. conf.data.labels = jx.utils.unique(jx.math.sets.union(x_,z_))
  338. conf.data.datasets = [age,size]
  339. console.log(conf)
  340. jx.dom.append('chartfolder',context)
  341. var chart = new Chart(context,conf)
  342. }
  343. monitor.folders.render.summary = function (data) {
  344. jx.dom.set.value('gridfolders', '')
  345. var options = {
  346. width: $('#gridfolders').width(), height:'auto'
  347. }
  348. options.paging = true
  349. options.pageSize = 4
  350. options.pageIndex = 1
  351. options.pageButtonCount = 4
  352. options.pagerContainer = '#latest_process_pager'
  353. options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}"
  354. options.pagePrevText= '<i class="fa fa-chevron-left"></i>'
  355. options.pageNextText= "<i class='fa fa-chevron-right small' title='Next'> </i>"
  356. options.data = data
  357. options.rowClass = function (item, index,evt) {
  358. return 'small'
  359. }
  360. options.rowClick = function(args){
  361. var item = args.item
  362. var yu = jx.math.mean(jx.utils.vector('0', item.details.age))
  363. var yr = jx.math.sd(jx.utils.vector('0', item.details.age))
  364. age = jx.utils.patterns.visitor(item.details.age, function (row) {
  365. return {y:row[0],x:row[1]}
  366. })
  367. size = jx.utils.patterns.visitor(item.details.size, function (row) {
  368. return {y:row[0],x:row[1]}
  369. })
  370. monitor.folders.render.details({age:age,size:size})
  371. }
  372. options.autoload = true
  373. options.fields = [
  374. { name: 'label', type: 'text', title: "Folder Name", headercss: "small bold", css: "small"},
  375. { name: "summary.age", type: "number", title: "Age (Days)", headercss: "small bold" , width:'64px'},
  376. { name: "summary.size", type: "number", title: "Size (MB)", type: "number", headercss: "small bold" },
  377. { name: "summary.count", type: "number", title: "File Count", type: "number", headercss: "small bold" }
  378. ]
  379. var grid = $('#gridfolders').jsGrid(options) ;
  380. }
  381. /**
  382. * Socket handler, check for learning status
  383. */