ui for folder monitoring

src/api/index.py

@@ -58,7 +58,7 @@ def procs(id):
 			learn[label] = row
 		r = {}
 		for label in data :
-			if label not in ['learn'] :
+			if label not in ['learn','folders'] :
 				index = len(data[label]) - 1
 				row = data[label][index]
 				r[label] = row
@@ -112,8 +112,11 @@ def sandbox():
 		conf	= p['config']
 		
 		for id in conf:
-			handler.init(conf[id])
+			try:
-			r.append (dict(handler.composite(),**{"label":id}))
+				handler.init(conf[id])
+				r.append (dict(handler.composite(),**{"label":id}))
+			except Exception,e:
+				pass
 	else:
 		
 		r = []
@@ -241,6 +244,19 @@ def anomalies_status():
 		id = request.args['id']
 		r = info
 	return json.dumps(r)
+@app.route('/folders')
+def get_folders():
+	global CONFIG
+	p = CONFIG['store']['args']
+	class_read = CONFIG['store']['class']['read']	
+	gReader = factory.instance(type=class_read,args=p)
+	d =  gReader.read()
+	if 'folders' in d:
+		d = d['folders']
+	else:
+		d = []
+	
+	return json.dumps(d)
 	
 if __name__== '__main__':
 	

src/api/static/css/default.css

@@ -98,3 +98,6 @@ input[type=text]:focus{
 .good{ color:green}
 .fa-warning, .warning{color:orange}
 .number {font-size:42px; font-weight:lighter; padding:2px; margin:2px;}
+
+.action {cursor:pointer; padding:2px; margin:2px; border:1px solid transparent}
+.action:hover { border-bottom-color:#4682B4}

src/api/static/js/dashboard.js

@@ -259,6 +259,7 @@ monitor.processes.summary.init = function(logs){
 		}
 		
 		jx.utils.patterns.visitor(logs[id], function (row) {
+			
 			if (row.status.match(/running/i)) {
 				xr[index] += 1
 				
@@ -284,6 +285,7 @@ monitor.sandbox.init = function () {
 	httpclient.get('/sandbox', function (x) {
 		
 		var r = JSON.parse(x.responseText)
+		
 		if (r.length > 0){
 			monitor.sandbox.render(r);
 		}
@@ -307,7 +309,7 @@ monitor.sandbox.render = function (logs) {
 	options.pageSize = 4
 	options.pageIndex = 1
 	options.pageButtonCount = 4
-	options.pagerContainer = '#sandbox_pager'
+	options.pagerContainer = '#folders_pager'
 	options.pagerFormat = "{prev} Page {pageIndex} of {pageCount} {next}"
 	options.pagePrevText = '<i class="fa fa-chevron-left"></i>'
 	options.pageNextText = "<i class='fa fa-chevron-right small' title='Next'> </i>";
@@ -348,6 +350,100 @@ monitor.sandbox.render = function (logs) {
 	
 }
 
+
+
+monitor.folders = {}
+monitor.folders.init = function () {
+	var httpclient = HttpClient.instance()
+	httpclient.get('/folders', function (x) {
+		var r = JSON.parse(x.responseText)
+		r = jx.utils.patterns.visitor(r, function (row) {
+			return row[0]
+		})
+		monitor.folders.render.init(r)
+	})
+}
+monitor.folders.render = {}
+monitor.folders.render.init = function (data) {
+	monitor.folders.render.summary(data)
+}
+monitor.folders.render.details = function (data) {
+	var context = jx.dom.get.instance('CANVAS')
+	var frame = $('#chartfolder')
+	jx.dom.set.value('chartfolder', '')
+	context.width = $(frame).width()
+	context.height= $(frame).height()
+
+	var conf = { type: 'line',responsive:true }
+	conf.data = {}
+	conf.options = { legend: { position: 'bottom' } }
+	conf.options.scales = {}
+	conf.options.scales.yAxes = [  
+		{id:'0',scaleLabel:{display:true,labelString:'Age In Days'},ticks:{min:0,beginAtZero:true},gridLines: {display:false}},
+		{id:'1',position:'right',scaleLabel:{display:true,labelString:'Size in MB'},ticks:{min:0,stepSize:1,beginAtZero:true},gridLines: {display:false}}
+	]
+	conf.options.scales.xAxes = [{gridLines: {display:false}}]
+	
+	var age = {yAxisID:'0', label: 'File Age (Days)', data:data.age ,borderColor:COLORS[187],fill:true,borderWidth:1}
+	var size = {yAxisID:'1',label : 'File Size (MB)',data:data.size,borderColor:COLORS[32],fill:true,borderWidth:1}
+	// age.data = [{ x: 10, y: 30 }, {x:20,y:60}]
+	// size.data= data.size
+	age.data = data.age
+	x_ = jx.utils.vector('x', age.data)
+	z_ = jx.utils.vector('x',size.data)
+	conf.data.labels = jx.utils.unique(jx.math.sets.union(x_,z_))
+	conf.data.datasets = [age,size]
+	
+	
+	console.log(conf)
+	jx.dom.append('chartfolder',context)
+	var chart = new Chart(context,conf)
+	
+	
+	
+}
+monitor.folders.render.summary = function (data) {
+	jx.dom.set.value('gridfolders', '')
+	var options = {
+		width: $('#gridfolders').width(), height:'auto'
+	}
+	options.paging = true
+	options.pageSize = 4
+	options.pageIndex = 1
+	options.pageButtonCount = 4
+	options.pagerContainer = '#latest_process_pager'
+    	options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}"
+    	options.pagePrevText= '<i class="fa fa-chevron-left"></i>'
+    	options.pageNextText= "<i class='fa fa-chevron-right small' title='Next'> </i>"
+	
+	options.data = data
+	options.rowClass = function (item, index,evt) {
+		
+		return 'small'
+	}
+	options.rowClick = function(args){
+		var item = args.item
+		age = jx.utils.patterns.visitor(item.details.age, function (row) {
+			return {y:row[0],x:row[1]}
+		})
+		size = jx.utils.patterns.visitor(item.details.size, function (row) {
+			return {y:row[0],x:row[1]}
+		})
+
+		monitor.folders.render.details({age:age,size:size})
+	}
+	
+	options.autoload  = true
+	options.fields = [
+		{ name: 'label', type: 'text', title: "Folder Name", headercss: "small bold", css: "small"},
+		{ name: "summary.age", type: "number", title: "Oldest File (Days)", headercss: "small bold" , width:'64px'},
+		{ name: "summary.size", type: "number", title: "Size (MB)", type: "number", headercss: "small bold" },
+		{ name: "summary.count", type: "number", title: "File Count", type: "number", headercss: "small bold" }
+	]
+	var grid = $('#gridfolders').jsGrid(options) ;
+	
+}
+
 /**
  * Socket handler, check for learning status
  */

src/api/templates/dashboard.html

@@ -12,13 +12,15 @@
 <script src="{{context}}/static/js/jx/rpc.js"></script>
 <script src="{{context}}/static/js/jx/dom.js"></script>
 <script src="{{context}}/static/js/jx/utils.js"></script>
+<script src="{{context}}/static/js/jx/ext/math.js"></script>
 <script src="{{ context }}/static/js/jsgrid/jsgrid.js"></script>
 <script src="{{context}}/static/js/colors.js"></script>
 <script src="{{context}}/static/js/dashboard.js"></script>
 <title>iMonitor</title>
 <script>
 	$(document).ready(function(){
-		monitor.processes.fetch()
+		// monitor.processes.fetch()
+		monitor.folders.init()
 	})
 </script>
 <body>
@@ -71,15 +73,24 @@
 				<div class="small">Last Lookup <span id="sandbox_date"></span></div>
 			</div>
 						
-			<div class="" style="margin-top:10px">
+			<div class="" style="margin-top:10px; height:105px">
 				<div id="sandbox_status" class="grid">
 				</div>
 				<div id="sandbox_pager"></div>
 			</div>
 			<div>
-				<div class="bold">Java Management eXtension Container</div>
+				<div class="small">
-				<div class="small">This applies to Tomcat, Tomee and derived products</div>
+					<div class="bold">Smart Folder Analysis/Monitoring</div>
+					<div>Powered By Machine Learning</div>
+
+				</div>
+				<div style="margin-top:10px; height:150px">
+					<div id="gridfolders"></div>
+					<div id="folderspager"></div>
+				</div>
+				<div id="chartfolder" ></div>
 			</div>
+			
 		</div>