Quellcode durchsuchen

Begin cleanup from new GUI

Michael Mead vor 8 Jahren
Ursprung
Commit
244e9b2c6f
50 geänderte Dateien mit 1649 neuen und 1588 gelöschten Zeilen
  1. 0 0
      old/colors.js
  2. 202 0
      old/dashboard.html
  3. 618 0
      old/dashboard.js
  4. 0 0
      old/dashboard/changelog.txt
  5. 0 0
      old/dashboard/documentation/css/documentation.css
  6. 0 0
      old/dashboard/documentation/documentation.html
  7. 2 2
      src/api/static/css/default.css
  8. 2 2
      src/api/static/index.html
  9. 1 11
      src/api/index.py
  10. 0 16
      src/api/static/css/dash.css
  11. 0 26
      src/api/static/css/reflect.css
  12. 402 611
      src/api/static/js/dashboard.js
  13. 0 17
      src/api/static/js/dash.js
  14. 0 315
      src/api/static/js/demo.js
  15. BIN
      src/api/templates/assets/img/background.jpg
  16. BIN
      src/api/templates/assets/img/faces/face-0.jpg
  17. BIN
      src/api/templates/assets/img/faces/face-1.jpg
  18. BIN
      src/api/templates/assets/img/faces/face-2.jpg
  19. BIN
      src/api/templates/assets/img/faces/face-3.jpg
  20. 6 7
      src/api/templates/assets/sass/paper/_alerts.scss
  21. 0 405
      src/api/templates/dash.html
  22. 352 176
      src/api/templates/dashboard.html
  23. 0 0
      src/sass/paper-dashboard.scss
  24. 64 0
      src/sass/paper/_alerts.scss
  25. 0 0
      src/sass/paper/_buttons.scss
  26. 0 0
      src/sass/paper/_cards.scss
  27. 0 0
      src/sass/paper/_chartist.scss
  28. 0 0
      src/sass/paper/_checkbox-radio.scss
  29. 0 0
      src/sass/paper/_dropdown.scss
  30. 0 0
      src/sass/paper/_footers.scss
  31. 0 0
      src/sass/paper/_inputs.scss
  32. 0 0
      src/sass/paper/_misc.scss
  33. 0 0
      src/sass/paper/_mixins.scss
  34. 0 0
      src/sass/paper/_navbars.scss
  35. 0 0
      src/sass/paper/_responsive.scss
  36. 0 0
      src/sass/paper/_sidebar-and-main-panel.scss
  37. 0 0
      src/sass/paper/_tables.scss
  38. 0 0
      src/sass/paper/_typography.scss
  39. 0 0
      src/sass/paper/_variables.scss
  40. 0 0
      src/sass/paper/mixins/_buttons.scss
  41. 0 0
      src/sass/paper/mixins/_cards.scss
  42. 0 0
      src/sass/paper/mixins/_chartist.scss
  43. 0 0
      src/sass/paper/mixins/_icons.scss
  44. 0 0
      src/sass/paper/mixins/_inputs.scss
  45. 0 0
      src/sass/paper/mixins/_labels.scss
  46. 0 0
      src/sass/paper/mixins/_navbars.scss
  47. 0 0
      src/sass/paper/mixins/_sidebar.scss
  48. 0 0
      src/sass/paper/mixins/_tabs.scss
  49. 0 0
      src/sass/paper/mixins/_transparency.scss
  50. 0 0
      src/sass/paper/mixins/_vendor-prefixes.scss

src/api/static/js/colors.js → old/colors.js


+ 202 - 0
old/dashboard.html

@@ -0,0 +1,202 @@
+<!-- <meta charset="UTF-8">
+<meta http-equiv="cache-control" content="no-cache">
+<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
+<link type="text/css" rel="stylesheet" href="{{ context }}/static/js/jsgrid/jsgrid.min.css" >
+<link type="text/css" rel="stylesheet" href="{{ context }}/static/js/jsgrid/jsgrid-theme.min.css" >
+<link href="{{context}}/static/css/default.css" rel="stylesheet" type="text/css">
+<link href="{{context}}/static/css/reflect.css" rel="stylesheet" type="text/css">
+<link href="{{context}}/static/css/fa/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+<link rel="icon" href="data:;base64,iVBORw0KGgo=">
+<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+
+
+<script src="{{ context }}/static/js/jquery/jquery.min.js"></script>
+<script src="{{context}}/static/js/chart.js/chart.bundle.js"></script>
+
+<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>{{title}}</title>
+<script>
+	var HTTP_CONTEXT="{{context}}"
+	$(document).ready(function(){
+		monitor.folders.init()
+		monitor.processes.fetch()
+
+	})
+</script>
+<body class="">
+	<div class="border-bottom caption" style="height:42px">
+		<div class="">{{title}}</div>
+		<div class="small" style="margin:4px">The Phi Technology LLC</div>
+	</div>
+    <div class="sidebar">
+        <i class="fa fa-reorder default left action" onclick="monitor.menu.event.toggle()"></i>
+        <div id="menuframe" class="left small" style="width:10%;">
+            <div id="menu" class="menu"></div>
+        </div>
+    </div>
+
+        <div class="block">
+    		<div style="margin:4px; margin-top:2%">
+    			<div class="" style="height:28px; ">
+    				<div class=" bold">Monitoring
+    					<span id="latest_processes_label" class="default bold"></span>
+    				</div>
+    				<div class="small">Last Lookup <span id="node_last_lookup"></span></div>
+    			</div>
+    			<div class = "" style="height:170px, width:100%;">
+    				<div id="latest_processes" class="grid" ></div>
+    			</div>
+    			<div style="height:22px; padding:2px" class="small">
+    				<div id="latest_process_pager" align="center"></div>
+    			</div>
+    		</div>
+        </div>
+
+        <div class="block">
+    		<div id="process_summary" class="  grid " style="margin:4px; margin-top:2%">
+    			<div style="margin:4px; padding:2px; margin-bottom:4px; height:28px">
+    				<div class="bold" style="color:#4682B4">Application Summary By Status</div>
+    				<div  class="small">Latest Lookup <span id="app-summary-date"></span></div>
+    			</div>
+
+    			<div class=""  style="padding:2px; height:250px; margin:4px; margin-top:10px">
+    				<div class=" " style="height:100%">
+    					<div class="small left" style="margin-left:2%; margin-top:1%">
+    						<div class="bold">Total Applications that have:</div>
+    						<br>
+    							<div style="margin:0px; margin-left:20px; padding:4px; height:12px"><div class="left width-half"><i class="fa fa-check"></i> Running</div> <span id="total-running" class="right"></span></div>
+    							<div style="margin:0px; margin-left:20px; padding:4px; height:12px"><div class="left width-half"><i class="fa fa-times"></i> Crash</div> <span id="total-crash" class="right"></span></div>
+    							<div style="margin:0px; margin-left:20px; padding:4px; height:12px"><div class="left width-half"><i class="fa fa-ellipsis-h"></i> Idle</div> <span id="total-idle" class="right"></span></div>
+
+
+    					</div>
+    					<div id="summary_chart" class="right width-half"></div>
+    				</div>
+
+    			</div>
+    			<div id="summary_details" class="right"></div>
+    		</div>
+        </div>
+
+        <div class="block">
+    		<div class="grid " style="margin:4px; margin-top:10px;">
+    			<div style="height:28px">
+    				<div class="bold" style="margin:4px; padding:4px; color:#4682B4;">Application Summary By Groups</div>
+    			</div>
+    			<div class="width" id="summary_ranking" style=" margin:4px; padding:2px; text-transform:capitalize"></div>
+    		</div>
+        </div>
+
+	<div class="">
+        <div class="block">
+    		<div class="" style="padding:20px; margin-top:5%; margin-bottom:1rem;">
+    			<div class="" style="height:28px">
+    				<div class="small bold">CPU & Memory Usage Trend for <i class="fa fa-quote-left"></i> <span id="trend_info" class="default bold"></span> <i class="fa fa-quote-right"></i></div>
+    				<div class="small">Last Lookup <span id="trend_last_lookup"></span> <i id="has_anomaly" class="fa fa-warning right" ></i></div>
+
+
+    			</div>
+
+    			<!-- <div  style="height:270px; margin-top:10px"> -->
+    				<div id="trends_chart" class="small grid" style="height:250px; margin:2rem;"></div>
+    			<!-- </div> -->
+    		</div>
+        </div>
+        <div class="block">
+    		<div id="sandbox" class="border-top" style="padding:4px; margin-top:10px">
+    			<div style="height:28px">
+    				<div id="inspect_sandbox" class="right button border" style="display:none" onclick="monitor.sandbox.init()">Inspect</div>
+    				<div class="bold">Python Virtual Environment Analysis</div>
+
+    				<div class="small">Last Lookup <span id="sandbox_date"></span></div>
+    			</div>
+
+    			<div class=" " style="margin-top:10px; height:135px">
+    				<div id="sandbox_status" class="">
+    				</div>
+    				<div id="sandbox_pager"></div>
+    			</div>
+    		</div>
+        </div>
+
+		<div style="margin-top:5%">
+            <div class="block">
+                <div id="folder_summary" class="">
+    				<div style="height:28px">
+
+    					<div class="bold">Folder Analysis/Monitoring</div>
+    					<div class="small">Powered By Machine Learning</div>
+    				</div>
+    				<div class="">
+    					<div class=" border-top" style="margin-top:4px; padding:2px; height:34px">
+    						<i class="fa fa-search left" style="margin:4px; padding:4px; ; color:gray;"></i>
+    						<input id="folder_search" type="text" class="small left" placeholder="hostname" style="width:87%; padding-left:4px;" onkeyup="monitor.folders.search.init()"/>
+    						<i class="fa fa-trash right action right" style="margin:4px; padding:4px; color:maroon" onclick="monitor.folders.search.reset()"></i>
+    					</div>
+    					<div id="gfolderframe" style="margin-top:10px; height:170px; width:100%">
+    						<div style="height:130px">
+    							<div id="gridfolders" style=""></div>
+    						</div>
+    						<div id="folderspager" class="small" style="height:22px; margin:4px;"></div>
+    					</div>
+    				</div>
+    			</div>
+            </div>
+
+            <div class="block">
+    			<div id="folder_plan" style="display:none">
+    				<div class="border-bottom" style="height:32px">
+    					<div class="bold">Deletion/Archiving Plan
+    						<i class="fa fa-quote-left"></i> <span id="folder_name"></span> <i class="fa fa-quote-right"></i>
+    						<i class="fa fa-angle-up action right bold" style="font-size:16px; margin:4px;" onclick="monitor.folders.show.grid()"></i>
+    					</div>
+    					<div class="small left">Powered By Machine Learning</div>
+
+    				</div>
+
+    				<div id="delete_age" class="left width-half " style="margin:2px; padding:2px;">
+    					<div class="small" align="left">By Age</div>
+    					<div class="number" style="height:42px">
+
+    						<div id="age_count"  align="right" class="left width-75" style="margin-right:4px">00</div>
+    						<div class="small" class="left" style="height:100%; padding-top:15px">Files</div>
+
+
+    					</div>
+    					<div class="small border-top" align="center" style="padding-top:4px">
+    						Approximately <span id="age_value">00</span> <span id="age_units"></span>
+    					</div>
+
+    				</div>
+    				<div id="delete_size" class="right width-half" class="number" style="margin:2px; padding:2px">
+    					<div class="small" align="left">By Size</div>
+
+    					<div  class=" number" style="height:42px">
+
+    						<div id="size_count" align="right" class="left width-75" style="margin-right:4px">00</div>
+    						<div class="small" class="left" style="height:100%; padding-top:15px">Files</div>
+    					</div>
+    					<div class="small border-top"align="center" style="padding-top:4px">
+    						Approximately <span id="size_value">00</span> <span id="size_units"></span>
+    					</div>
+
+
+    				</div>
+                </div>
+			</div>
+			<div id="chartfolder" ></div>
+		</div>
+
+
+
+
+	</div>
+
+
+</body> -->

+ 618 - 0
old/dashboard.js

@@ -0,0 +1,618 @@
+var 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' }
+var monitor = {}
+monitor.utils = {}
+monitor.utils.get = {}
+monitor.utils.get.time = function (item) {
+	// date = ([item.day + '-' + MONTHS[item.month] + '-' + item.year, hour + ':' + item.minute]).join(' ')
+	var hour = item.hour > 9 ? item.hour : ('0' + item.hour)
+	if (hour > 12) {
+		var units = 'PM'
+	} else {
+		var units = 'AM'
+	}
+	return ([hour+':'+item.minute,units]).join(' ')
+}
+monitor.utils.get.dateTime = function (item) {
+	var time = monitor.utils.get.time(item)
+	return ([item.day+'-'+MONTHS[item.month]+'-'+item.year,time]).join(' ')
+}
+monitor.processes = {}
+monitor.processes.fetch = function(){
+	var httpclient = HttpClient.instance()
+	httpclient.get(HTTP_CONTEXT+'/get/processes',monitor.processes.init);
+    
+}
+
+monitor.processes.init = function (x) {
+
+	var r = JSON.parse(x.responseText)
+	monitor.processes.summary.init(r)
+	var keys = jx.utils.keys(r)
+	jx.dom.set.value('menu','')
+	jx.utils.patterns.visitor(keys,function(label){
+		var div = jx.dom.get.instance('DIV')
+		var frame= jx.dom.get.instance('DIV')
+		var i	= jx.dom.get.instance('I')
+		i.className = 'fa fa-chevron-right left'
+
+		div.innerHTML	= label
+		frame.data	= r[label]
+		frame.label	= label
+		frame.appendChild(i)
+		frame.appendChild(div)
+		frame.className = 'menu-item'
+		frame.onclick = function () {
+			monitor.processes.render(this.label, this.data);
+			jx.dom.set.value('trends_chart','')
+			//monitor.processes.trend.init(this.label)
+		}
+		jx.dom.append('menu',frame)
+	})
+	//
+	// Auto start the first item in the menu
+	// This is designed not to let the user wander or wonder what is going on
+	//
+	var nodes = jx.dom.get.children('menu')
+	if (nodes.length > 0) {
+		nodes[0].click()
+	} else {
+		//
+		// We should hide the panes for this
+		//
+		jx.dom.hide('apps')
+	}
+	monitor.sandbox.init()
+	// setTimeout(monitor.sandbox.init,1000)
+}
+
+/**
+* This function renders the grid of processes being monitored,
+* @param label	label the list of processes belongs to
+* @param data	dataset of a selected set of processes (works a bit like top)
+*/
+monitor.processes.render = function(label,data) {
+
+	data = jx.utils.patterns.visitor(data,function(row){
+		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>'}
+
+        if (!row.status.match(/class/)) {
+			row.status_id = row.status
+			row.status = status[row.status]
+
+		}
+		return row
+	})
+	jx.dom.set.value('latest_processes','') ;
+	jx.dom.set.value('latest_processes_label', label)
+
+	var options = {
+		width: "90%", height:'auto', autoload:true
+	}
+	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
+		var id 	= jx.dom.get.value('latest_processes_label')
+		var app = item.label
+		monitor.processes.trend.init(id, app)
+
+		if (item.anomaly == true) {
+			jx.dom.show('has_anomaly')
+		} else {
+			jx.dom.hide('has_anomaly')
+		}
+		// var hour = item.hour < 10? ('0'+item.hour): item.hour
+		// date = ([item.day + '-' + MONTHS[item.month] + '-' + item.year, hour + ':' + item.minute]).join(' ')
+
+		jx.dom.set.value('node_last_lookup',monitor.utils.get.dateTime(item))
+
+	}
+
+	options.autoload  = true
+	options.fields = [
+		{ name: 'label', type: 'text', title: "Process", headercss: "small bold", css: "small"},
+		{ name: "cpu_usage", type: "number", title: "CPU", headercss: "small bold" , width:'64px'},
+		{ name: "memory_usage", type: "text", title: "Mem. Used", type: "number", headercss: "small bold" },
+		{ name: "proc_count", type: "number", title: "Proc Count", headercss: "small bold" },
+		{name:"status",type:"text",title:"Status",headercss:"small bold",align:"center", width:'64px'}
+	]
+	var grid = $('#latest_processes').jsGrid(options) ;
+	//
+	// We need to auto click the first row
+	$('#latest_processes').find('.jsgrid-row')[0].click()
+
+}
+
+monitor.processes.trend = {}
+monitor.processes.trend.init = function (label,app) {
+	var httpclient = HttpClient.instance()
+	var uri = HTTP_CONTEXT+'/trends?id='+label+'&app='+encodeURIComponent(app)
+	httpclient.get(uri, function (x) {
+		var logs = JSON.parse(x.responseText)
+		var dom = jx.dom.get.instance('trend_info');
+		dom.logs = logs
+		jx.dom.set.value('trend_info',app.trim())
+		// jx.dom.set.attribute(label,'logs',logs)
+		monitor.processes.trend.render(logs,null,app)
+	})
+}
+monitor.processes.trend.render = function (logs, key,label) {
+	// if (key == null) {
+	// 	key = 'memory_usage'
+	// }
+	// if (logs == null || label == null){
+
+	// 	logs = jx.dom.get.instance('trend_info').logs
+	// 	label= jx.dom.get.value('trend_info') ;
+	// }
+	var frame = $('#trends_chart')
+	jx.dom.set.value('trends_chart','')
+	var context = jx.dom.get.instance('CANVAS')
+	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:'CPU & MEMORY %'},ticks:{min:0,max:100,beginAtZero:true},gridLines: {display:false}}
+		// {id:'1',position:'right',scaleLabel:{display:true,labelString:'PROCESS COUNT'},ticks:{min:0,stepSize:1,beginAtZero:true},gridLines: {display:false}}
+	]
+	conf.options.scales.xAxes = [
+		{
+
+			gridLines: {display:false},
+
+			time: {
+				format:'HH:mm'
+			}
+
+		}
+
+	]
+	conf.data.datasets = [	]
+	var x_axis = []
+	var _x = {}
+	// var _y = {}
+	var cpu = {label: 'CPU Usage (%)', data: [] ,backgroundColor:'transparent',borderColor:COLORS[187],fill:false,borderWidth:1}
+	var mem = {label : 'Memory Usage(%)',data:[],backgroundColor:'transparent',borderColor:COLORS[32],fill:false,borderWidth:1}
+	// var proc= {yAxisID:'1',label : 'Proc Count',data:[],backgroundColor:'transparent',borderColor:COLORS[542],fill:false,borderWidth:1}
+	// var 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"}
+	jx.utils.patterns.visitor(logs,function(item){
+		//x = new Date(item.year,item.month-1,item.day,item.hour,item.minute)
+		// day = item.day.length > 1? (['0',item.day]).join(''): item.day
+		// month = months[item.month]
+		// x = ([month, day, item.hour + ':' + item.minute]).join(' ')
+		x = monitor.utils.get.time(item).replace(/AM|PM/g,'')
+		y = item[key]
+		if (_x[x] == null ){//||(_x[x] == null && _y[y] == null)) {
+			_x[x] = 1
+			// _y[y] = 1
+			x_axis.push(x)
+			cpu.data.push({ x: x, y: item.cpu_usage })
+			mem.data.push({x:x,y:item.memory_usage})
+            console.log(item.cpu_usage)
+            console.log(item.memory_usage)
+			// proc.data.push({x:x,y:item.proc_count})
+			// return {x:x,y:y}
+
+		}
+
+	})
+
+	var item = logs[logs.length - 1]
+	jx.dom.set.value('trend_last_lookup',monitor.utils.get.dateTime(item))
+
+	conf.data.datasets = [cpu,mem]
+	x_axis = jx.utils.unique(x_axis)
+	conf.data.labels = x_axis
+	// console.log(conf)
+	jx.dom.append('trends_chart',context)
+	var chart = new Chart(context,conf)
+
+}
+
+monitor.processes.summary = {}
+monitor.processes.summary.init = function(logs){
+	var xr = 0, xc = 0, xi = 0
+	var series = {}
+	//var colors = [COLORS[11], COLORS[1], COLORS[2]]
+    COLORS = ["#00BFFF", "#b2beb5", "#ffa812"]
+	colors = [COLORS[0], COLORS[2], COLORS[1]]
+	RUNNING_COLOR = COLORS[0]
+    // RUNNING_COLOR = #0072BB
+	IDLE_COLOR = COLORS[1]
+	CRASH_COLOR=COLORS[2]
+
+	var i = 0;
+	var date = null;
+	for( label in logs ){
+		var rows = logs[label]
+		series[label] = {data:[0,0,0],label:label}
+
+		jx.utils.patterns.visitor(rows,function(item){
+			if (date == null) {
+
+				// date = new Date(item.year,item.month-1,item.day,item.hour,item.minute)
+				// date = ([item.day + '-' + MONTHS[item.month] + '-' + item.year, item.hour + ':' + item.minute]).join(' ')
+				date = monitor.utils.get.dateTime(item)
+			}
+			if (item.status == 'running'){
+				xr += 1
+			}else if(item.status == 'idle'){
+				xi += 1
+			}else{
+				xc += 1
+			}
+		})
+
+	}
+	var data = {labels:['Running','Crash','Idle'],datasets:[{data:[xr,xc,xi],backgroundColor:[RUNNING_COLOR,CRASH_COLOR,IDLE_COLOR/**COLORS[11],COLORS[2],COLORS[100]*/]}]}
+	var context = jx.dom.get.instance('CANVAS')
+	context.id = 'doughnut'
+	jx.dom.set.value('total-running', xr)
+	jx.dom.set.value('total-crash', xc)
+	jx.dom.set.value('total-idle', xi)
+	// jx.dom.set.value('total-apps', xr + xi + xc)
+
+
+	jx.dom.set.value('app-summary-date', date)
+	jx.dom.set.value('summary_chart','')
+	jx.dom.append('summary_chart', context)
+	$("#doughnut").attr('width', 50)
+	$("#doughnut").attr('height', 50)
+
+	var conf = {}//width:100,height:100}//width:'auto',height:$('#process_summary').height}
+
+	conf.type = 'doughnut'
+	conf.responsive = true
+	conf.data = data
+	conf.options = { legend: { position: 'right' }, repsonsive: true }
+	var _chart = new Chart(context,conf)
+
+	$('#summary_chart').click(function (evt) {
+		console.log(_chart)
+		console.log($(_chart))
+		var activePoints = $(_chart).getSegmentsAtEvent(evt);
+		console.log(activePoints)
+	})
+	jx.dom.set.value('summary_ranking','')
+	context = jx.dom.get.instance('CANVAS')
+	jx.dom.append('summary_ranking',context)
+
+	conf = { type: 'bar', responsive: true }
+
+	conf.options={scales:{xAxes:[{gridLines: {display:false}}],yAxes:[{gridLines: {display:false},scaleLabel:{display:true,labelString:'PROCESS COUNTS'} }] }}
+	conf.options.legend ={position:'right'}
+	/*
+	conf.data = {labels:['Running','Idle','Crash']}
+	var labels = jx.utils.keys(series)
+
+	var i = 0
+	conf.data.datasets = jx.utils.patterns.visitor(labels,function(id){
+		series[id].backgroundColor = COLORS[i++]
+		return series[id]})
+	chart = new Chart(context,conf);
+	*/
+	var labels = jx.utils.keys(logs)
+	conf.data = { labels: labels, backgroundColor:colors }
+	var xr = [], xi = [], xc = [],xr_bg = [],xc_bg = [],xi_bg = []
+	jx.utils.patterns.visitor(labels, function (id) {
+
+		var rows = logs[id]
+		var index = xr.length
+		xr_bg[index] = RUNNING_COLOR
+		xi_bg[index] = IDLE_COLOR
+		xc_bg[index] = CRASH_COLOR
+		if (xr[index] == null) {
+			xr[index] = 0
+			xc[index] = 0
+			xi[index] = 0
+		}
+
+		jx.utils.patterns.visitor(logs[id], function (row) {
+
+			if (row.status.match(/running/i)) {
+				xr[index] += 1
+
+			} else if (row.status.match(/idle/i)) {
+				xi[index] += 1
+
+			} else {
+				xc[index] += 1
+
+			}
+		})
+	})
+
+	conf.data.datasets = [{ label: 'Running', data:xr,backgroundColor:xr_bg},{label:'Crash',data:xc,backgroundColor:xc_bg},{label:'Idle',data:xi,backgroundColor:xi_bg} ]
+	chart = new Chart(context, conf)
+
+}
+
+monitor.sandbox = {}
+monitor.sandbox.init = function () {
+	jx.dom.hide('inspect_sandbox')
+	var httpclient = HttpClient.instance()
+	httpclient.get(HTTP_CONTEXT+'/sandbox', function (x) {
+
+		var r = JSON.parse(x.responseText)
+
+		if (r.length > 0) {
+			jx.dom.show('sandbox')
+			monitor.sandbox.render(r);
+		} else {
+			jx.dom.hide('sandbox')
+		}
+	})
+}
+monitor.sandbox.render = function (logs) {
+	// 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' }
+
+	// var d = ([logs[0].day, '-', MONTHS[logs[0].month], '-', logs[0].year, ' ', logs[0].hour, ':', logs[0].minute]).join('')
+	var item = logs[logs.length -1]
+	jx.dom.set.value('sandbox_date', monitor.utils.get.dateTime(item))
+
+	var options = { width: $('#sandbox_status').width()-8, height: 'auto' }
+	options.data = jx.utils.patterns.visitor(logs, function (item) {
+		if (item.value == 100) {
+			item.status = '<i class="fa fa-check" style="color:green"></i>'
+		} else {
+			item.status = '<i class="fa fa-download" style="color:black"></i>'
+		}
+		return item
+	})
+	options.paging = true
+	options.pageSize = 4
+	options.pageIndex = 1
+	options.pageButtonCount = 4
+	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>";
+	options.rowClass = function (item) {
+
+		if (item.value < 70) {
+			return 'bad'
+		} else if (item.value < 100) {
+			return 'warning'
+		} else {
+			return 'good'
+		}
+	}
+	options.rowClick = function (args) {
+		var item = args.item;
+		if (item.missing.length > 0) {
+			var form = jx.dom.get.instance('FORM')
+			var dom = jx.dom.get.instance('INPUT')
+			dom.type = 'hidden'
+			dom.name = 'missing'
+			dom.value = JSON.stringify(item.missing)
+
+			form.action 	= HTTP_CONTEXT+'/download'
+			form.method = 'POST'
+			form.appendChild(dom)
+			form.submit()
+
+		}
+	}
+	options.fields = [
+		{name:"status",title:"",width:20},
+		{ name: 'label',title:'Virtual Environment Label',type:'text',css:'small',headercss:'small bold' },
+		{ name: 'value', title:'Completeness %',type: 'number', css: 'small', headercss: 'small bold' }
+
+	]
+	var grid = $('#sandbox_status').jsGrid(options)
+	jx.dom.show('inspect_sandbox')
+
+}
+
+
+
+monitor.folders = {}
+monitor.folders.init = function () {
+	var httpclient = HttpClient.instance()
+	httpclient.get(HTTP_CONTEXT+'/folders', function (x) {
+		var r = JSON.parse(x.responseText)
+		var data = []
+		for (var id in r) {
+			var item = r[id]
+			// item.id = id
+			data = data.concat(item)
+		}
+
+		monitor.folders.render.init(data)
+	})
+}
+monitor.folders.search = {}
+monitor.folders.search.reset = function () {
+	jx.dom.set.value('folder_search', '')
+	var data = jx.dom.get.attribute('folder_search', 'data')
+	monitor.folders.render.summary(data)
+
+}
+monitor.folders.search.init = function(){
+	var term = jx.dom.get.value('folder_search')
+	var data = jx.dom.get.attribute('folder_search', 'data')
+
+	term = term.replace(/ /g,'')
+	if (term.length == 0) {
+		monitor.folders.render.summary(data)
+	} else if (term.length > 0) {
+
+		data = jx.utils.patterns.visitor(data, function (row) {
+			pattern = "(.*" + term + ".*)"
+
+			if (row.id.match(pattern)) {
+				return row
+			}
+		})
+		monitor.folders.render.summary(data)
+	}
+}
+monitor.folders.render = {}
+monitor.folders.render.init = function (data) {
+	jx.dom.set.attribute('folder_search','data',data)
+	monitor.folders.render.summary(data)
+}
+monitor.folders.show = {}
+monitor.folders.show.plan = function () {
+		$('#folder_summary').slideUp(function () {
+		$('#folder_plan').slideDown()
+	})
+
+}
+monitor.folders.show.grid = function () {
+		$('#folder_plan').slideUp(function () {
+			$('#folder_summary').slideDown()
+		})
+
+}
+/***
+ * This function is designed to establish a folder clean up strategy i.e  :
+ * 	- We will look for anomalies given age,file size
+ * 	- We will also look for where most of the data is distributed (mode)
+ */
+monitor.folders.render.details = function (folder,data) {
+	//
+	// We need to normalize the data at this point so as to be able to show it all in the same chart
+	// jx.math.scale x: counts, y: measure ment
+	//
+	var r = [data.age, data.size]
+	var plans = []
+	for (var i in r) {
+		var xy = r[i]
+		var mode = jx.math.mode(jx.utils.vector('x', xy))
+		var yvalues = jx.utils.patterns.visitor(xy, function (row) {
+			if (row.x == mode) {
+				return row.y
+			}
+		})
+		var sd = jx.math.sd(yvalues)
+		if (i == 0) {
+			prefix = 'age'
+			var mean = jx.math.mean(yvalues)
+			var max = (mean + (1.5 * sd))
+			if (mean > 30 && mean < 365) {
+				divide_by = 30
+				units = 'MONTHS'
+			} else if (mean > 365) {
+				divide_by=365
+				units = 'YEARS'
+			} else {
+				divide_by = 1
+				units = 'DAYS'
+			}
+		} else {
+			prefix = 'size'
+			var mean = jx.math.sum(yvalues)
+			var max = 0// (mean + (1.5 * sd))
+			if (mean > 1000) {
+				divide_by = 1000
+				units = 'GB'
+			} else {
+				divide_by = 1
+				units = 'MB'
+			}
+
+		}
+		if (isNaN(mean)) {
+			mean = 0
+		}
+		//
+		// We need to assess the outliars i.e too old, too large
+		//
+		y = jx.utils.vector('y', xy)
+		var _mean = jx.math.mean(y)
+		var _sd = jx.math.sd(y)
+		var outlier = _mean < mean || max > (_mean + (1.5 * _sd))
+
+		plans.push({ 'label': prefix, 'max': max, 'sd': sd, 'mean': mean, 'count': yvalues.length, 'outlier': outlier })
+		jx.dom.set.value(prefix + '_count', yvalues.length)
+		jx.dom.set.value(prefix + '_value', (mean/divide_by).toFixed(2))
+		jx.dom.set.value(prefix+'_units',units)
+		monitor.folders.show.plan()
+
+	}
+
+	jx.dom.set.value('folder_name', folder)
+
+
+
+
+}
+monitor.folders.render.summary = function (data) {
+
+	jx.dom.set.value('gridfolders', '')
+	var options = {
+		width: $('#gfolderframe').width()-8, height:'auto'
+	}
+	options.paging = true
+	options.pageSize = 4
+	options.pageIndex = 1
+	options.pageButtonCount = 4
+	options.pagerContainer = '#folderspager'
+    	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(item.name,{age:age,size:size})
+	}
+	//
+	// @TODO Add the units in days just in case
+	options.autoload  = true
+	options.fields = [
+		{ name: 'id', type: 'text', title: "Host", headercss: "small bold", css: "small"},
+		{ name: 'name', type: 'text', title: "Folder Name", headercss: "small bold", css: "small"},
+
+		{ name: "size", type: "number", title: "Folder Size", type: "number", headercss: "small bold" },
+		{ name: "count", type: "number", title: "File Count", type: "number", headercss: "small bold" }
+	]
+	var grid = $('#gridfolders').jsGrid(options) ;
+
+}
+monitor.menu = {}
+monitor.menu.event = {}
+monitor.menu.event.toggle = function () {
+	var dom = jx.dom.get.instance('menuframe')
+	var value = dom.style.marginLeft.trim()
+
+	if (value==0 || value == "0px" || value == "") {
+		var width = -$(dom).width() - 20
+		$('#menuframe').animate({marginLeft:"-20%"})
+	} else {
+		$('#menuframe').animate({marginLeft:"0"})
+	}
+
+}
+/**
+ * Socket handler, check for learning status
+ */

src/api/dashboard/changelog.txt → old/dashboard/changelog.txt


src/api/dashboard/documentation/css/documentation.css → old/dashboard/documentation/css/documentation.css


src/api/dashboard/documentation/documentation.html → old/dashboard/documentation/documentation.html


+ 2 - 2
src/api/static/css/default.css

@@ -1,4 +1,4 @@
-body, .default {
+/*body, .default {
 	font-size:14px;
 	font-family:sans-serif;
 	font-weight:lighter;
@@ -352,4 +352,4 @@ background-image: linear-gradient(to bottom, #CAD5E0 0%, #F3F3F3 40%);
   and (-webkit-min-device-pixel-ratio: 3)
   and (orientation: landscape) {
 
-}
+}*/

+ 2 - 2
src/api/static/index.html

@@ -1,4 +1,4 @@
-<link type="text/css" rel="stylesheet" href="{{ context }}/js/jsgrid/jsgrid.min.css" />
+<!-- <link type="text/css" rel="stylesheet" href="{{ context }}/js/jsgrid/jsgrid.min.css" />
 <link type="text/css" rel="stylesheet" href="{{ context }}/js/jsgrid/jsgrid-theme.min.css" />
 <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
 <script src="{{ context }}/static/js/jsgrid.js"></script>
@@ -9,4 +9,4 @@
 <div class="caption">
 <div class="left">Process Monitoring</div>
 </div>
-</body>
+</body> -->

+ 1 - 11
src/api/index.py

@@ -149,14 +149,6 @@ def requirements():
 	stream = "\n".join(json.loads(stream))
 	headers = {"content-disposition":"attachment; filename=requirements.txt"}
 	return Response(stream,mimetype='text/plain',headers=headers)
-@app.route('/old')
-def old():
-	context = PARAMS['context']
-	if 'title' in PARAMS :
-		title = PARAMS['title']
-	else:
-		title = 'Zulu OverWatch'
-	return render_template('dashboard.html',context=context,title=title)
 
 @app.route('/dashboard')
 def dashboard():
@@ -165,9 +157,7 @@ def dashboard():
 		title = PARAMS['title']
 	else:
 		title = 'Dashboard'
-	return render_template('dash.html',context=context,title=title)
-
-
+	return render_template('dashboard.html',context=context,title=title)
 
 """
 	This function is designed to trigger learning for anomaly detection

+ 0 - 16
src/api/static/css/dash.css

@@ -1,19 +1,3 @@
-/*!
-    
- =========================================================
- * Paper Dashboard - v1.1.2
- =========================================================
- 
- * Product Page: http://www.creative-tim.com/product/paper-dashboard
- * Copyright 2017 Creative Tim (http://www.creative-tim.com)
- * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE.md)
- 
- =========================================================
- 
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- 
- */
-/*      light colors - used for select dropdown         */
 .ct-blue {
   stroke: #7A9E9F !important; }
 

+ 0 - 26
src/api/static/css/reflect.css

@@ -1,26 +0,0 @@
-.block {
-    border: 1px solid black;
-    display: block;
-    min-width: 450px;
-    min-height: 250px;
-}
-
-.jsgrid-cell { overflow:scroll; }
-
-.sidebar {
-    display: block;
-}
-
-#doughnut {
-    max-height: 310px;
-    max-width: 310px;
-}
-
-/* ----------- working media query (laptop) ----------- */
-
-@media screen
-    and (max-device-width: 1900px) {
-        .block {
-            display: block;
-        }
-    }

Datei-Diff unterdrückt, da er zu groß ist
+ 402 - 611
src/api/static/js/dashboard.js


+ 0 - 17
src/api/static/js/dash.js

@@ -1,20 +1,3 @@
-/*!
-    
- =========================================================
- * Paper Dashboard - v1.1.2
- =========================================================
- 
- * Product Page: http://www.creative-tim.com/product/paper-dashboard
- * Copyright 2017 Creative Tim (http://www.creative-tim.com)
- * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE.md)
- 
- =========================================================
- 
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- 
- */
-
-
 var fixedTop = false;
 var transparent = true;
 var navbar_initialized = false;

Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 315
src/api/static/js/demo.js


BIN
src/api/templates/assets/img/background.jpg


BIN
src/api/templates/assets/img/faces/face-0.jpg


BIN
src/api/templates/assets/img/faces/face-1.jpg


BIN
src/api/templates/assets/img/faces/face-2.jpg


BIN
src/api/templates/assets/img/faces/face-3.jpg


+ 6 - 7
src/api/templates/assets/sass/paper/_alerts.scss

@@ -4,10 +4,10 @@
     color: #FFFFFF;
     padding: 10px 15px;
     font-size: 14px;
-    
+
     .container &{
         border-radius: 4px;
-    
+
     }
     .navbar &{
         border-radius: 0;
@@ -21,7 +21,7 @@
     .navbar:not(.navbar-transparent) &{
         top: 70px;
     }
-    
+
     span[data-notify="icon"]{
         font-size: 30px;
         display: block;
@@ -30,17 +30,17 @@
         top: 50%;
         margin-top: -20px;
     }
-    
+
     .close ~ span{
         display: block;
         max-width: 89%;
     }
-    
+
     &[data-notify="container"]{
         padding: 10px 10px 10px 20px;
         border-radius: $border-radius-base;
     }
-    
+
     &.alert-with-icon{
         padding-left: 65px;
     }
@@ -61,4 +61,3 @@
     background-color: $bg-danger;
     color: $danger-states-color;
 }
-

+ 0 - 405
src/api/templates/dash.html

@@ -1,405 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-	<meta charset="utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-
-	<title>Monitor</title>
-
-	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
-    <meta name="viewport" content="width=device-width" />
-
-
-    <!-- Bootstrap core CSS     -->
-    <link href="{{context}}/static/css/bootstrap.min.css" rel="stylesheet" />
-
-    <!-- Animation library for notifications   -->
-    <link href="{{context}}/static/css/animate.min.css" rel="stylesheet"/>
-
-    <!--  Paper Dashboard core CSS    -->
-    <link href="{{context}}/static/css/dash.css" rel="stylesheet"/>
-
-
-    <!--  CSS for Demo Purpose, don't include it in your project     -->
-    <link href="{{context}}/static/css/demo.css" rel="stylesheet" />
-
-
-    <!--  Fonts and icons     -->
-    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
-    <link href="{{context}}/static/css/themify-icons.css" rel="stylesheet">
-
-</head>
-<body>
-
-<div class="wrapper">
-    <div class="sidebar" data-background-color="white" data-active-color="danger">
-
-    <!--
-		Tip 1: you can change the color of the sidebar's background using: data-background-color="white | black"
-		Tip 2: you can change the color of the active button using the data-active-color="primary | info | success | warning | danger"
-	-->
-
-    	<div class="sidebar-wrapper">
-            <div class="logo">
-                <a href="#" class="simple-text">
-                    Monitor
-                </a>
-            </div>
-
-            <ul class="nav">
-                <li class="active">
-                    <a href="dash.html">
-                        <i class="ti-panel"></i>
-                        <p>Dashboard</p>
-                    </a>
-                </li>
-                <li>
-                    <a href="user.html">
-                        <i class="ti-user"></i>
-                        <p>User Profile</p>
-                    </a>
-                </li>
-                <li>
-                    <a href="table.html">
-                        <i class="ti-view-list-alt"></i>
-                        <p>Table List</p>
-                    </a>
-                </li>
-                <li>
-                    <a href="typography.html">
-                        <i class="ti-text"></i>
-                        <p>Typography</p>
-                    </a>
-                </li>
-                <li>
-                    <a href="icons.html">
-                        <i class="ti-pencil-alt2"></i>
-                        <p>Icons</p>
-                    </a>
-                </li>
-                <li>
-                    <a href="maps.html">
-                        <i class="ti-map"></i>
-                        <p>Maps</p>
-                    </a>
-                </li>
-                <li>
-                    <a href="notifications.html">
-                        <i class="ti-bell"></i>
-                        <p>Notifications</p>
-                    </a>
-                </li>
-				<li class="active-pro">
-                    <a href="upgrade.html">
-                        <i class="ti-export"></i>
-                        <p>Upgrade to PRO</p>
-                    </a>
-                </li>
-            </ul>
-    	</div>
-    </div>
-    <!-- End Side Bar   -->
-    <div class="main-panel">
-        <nav class="navbar navbar-default">
-            <div class="container-fluid">
-                <div class="navbar-header">
-                    <button type="button" class="navbar-toggle">
-                        <span class="sr-only">Toggle navigation</span>
-                        <span class="icon-bar bar1"></span>
-                        <span class="icon-bar bar2"></span>
-                        <span class="icon-bar bar3"></span>
-                    </button>
-                    <a class="navbar-brand" href="#">Dashboard</a>
-                </div>
-                <div class="collapse navbar-collapse">
-                    <ul class="nav navbar-nav navbar-right">
-                        <li>
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                <i class="ti-panel"></i>
-								<p>Stats</p>
-                            </a>
-                        </li>
-                        <li class="dropdown">
-                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                    <i class="ti-bell"></i>
-                                    <p class="notification">5</p>
-									<p>Notifications</p>
-									<b class="caret"></b>
-                              </a>
-                              <ul class="dropdown-menu">
-                                <li><a href="#">Notification 1</a></li>
-                                <li><a href="#">Notification 2</a></li>
-                                <li><a href="#">Notification 3</a></li>
-                                <li><a href="#">Notification 4</a></li>
-                                <li><a href="#">Another notification</a></li>
-                              </ul>
-                        </li>
-						<li>
-                            <a href="#">
-								<i class="ti-settings"></i>
-								<p>Settings</p>
-                            </a>
-                        </li>
-                    </ul>
-
-                </div>
-            </div>
-        </nav>
-        <!-- End Menu Bar -->
-
-        <div class="content">
-            <div class="container-fluid">
-                <div class="row">
-                    <div class="col-lg-3 col-sm-6">
-                        <div class="card">
-                            <div class="content">
-                                <div class="row">
-                                    <div class="col-xs-5">
-                                        <div class="icon-big icon-warning text-center">
-                                            <i class="ti-server"></i>
-                                        </div>
-                                    </div>
-                                    <div class="col-xs-7">
-                                        <div class="numbers">
-                                            <p>Capacity</p>
-                                            105GB
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="footer">
-                                    <hr />
-                                    <div class="stats">
-                                        <i class="ti-reload"></i> Updated now
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-lg-3 col-sm-6">
-                        <div class="card">
-                            <div class="content">
-                                <div class="row">
-                                    <div class="col-xs-5">
-                                        <div class="icon-big icon-success text-center">
-                                            <i class="ti-wallet"></i>
-                                        </div>
-                                    </div>
-                                    <div class="col-xs-7">
-                                        <div class="numbers">
-                                            <p>Revenue</p>
-                                            $1,345
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="footer">
-                                    <hr />
-                                    <div class="stats">
-                                        <i class="ti-calendar"></i> Last day
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-lg-3 col-sm-6">
-                        <div class="card">
-                            <div class="content">
-                                <div class="row">
-                                    <div class="col-xs-5">
-                                        <div class="icon-big icon-danger text-center">
-                                            <i class="ti-pulse"></i>
-                                        </div>
-                                    </div>
-                                    <div class="col-xs-7">
-                                        <div class="numbers">
-                                            <p>Errors</p>
-                                            23
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="footer">
-                                    <hr />
-                                    <div class="stats">
-                                        <i class="ti-timer"></i> In the last hour
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-lg-3 col-sm-6">
-                        <div class="card">
-                            <div class="content">
-                                <div class="row">
-                                    <div class="col-xs-5">
-                                        <div class="icon-big icon-info text-center">
-                                            <i class="ti-twitter-alt"></i>
-                                        </div>
-                                    </div>
-                                    <div class="col-xs-7">
-                                        <div class="numbers">
-                                            <p>Followers</p>
-                                            +45
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="footer">
-                                    <hr />
-                                    <div class="stats">
-                                        <i class="ti-reload"></i> Updated now
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="row">
-
-                    <div class="col-md-12">
-                        <div class="card">
-                            <div class="header">
-                                <h4 class="title">Users Behavior</h4>
-                                <p class="category">24 Hours performance</p>
-                            </div>
-                            <div class="content">
-                                <div id="chartHours" class="ct-chart"></div>
-                                <div class="footer">
-                                    <div class="chart-legend">
-                                        <i class="fa fa-circle text-info"></i> Open
-                                        <i class="fa fa-circle text-danger"></i> Click
-                                        <i class="fa fa-circle text-warning"></i> Click Second Time
-                                    </div>
-                                    <hr>
-                                    <div class="stats">
-                                        <i class="ti-reload"></i> Updated 3 minutes ago
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-md-6">
-                        <div class="card">
-                            <div class="header">
-                                <h4 class="title">Email Statistics</h4>
-                                <p class="category">Last Campaign Performance</p>
-                            </div>
-                            <div class="content">
-                                <div id="chartPreferences" class="ct-chart ct-perfect-fourth"></div>
-
-                                <div class="footer">
-                                    <div class="chart-legend">
-                                        <i class="fa fa-circle text-info"></i> Open
-                                        <i class="fa fa-circle text-danger"></i> Bounce
-                                        <i class="fa fa-circle text-warning"></i> Unsubscribe
-                                    </div>
-                                    <hr>
-                                    <div class="stats">
-                                        <i class="ti-timer"></i> Campaign sent 2 days ago
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="card ">
-                            <div class="header">
-                                <h4 class="title">2015 Sales</h4>
-                                <p class="category">All products including Taxes</p>
-                            </div>
-                            <div class="content">
-                                <div id="chartActivity" class="ct-chart"></div>
-
-                                <div class="footer">
-                                    <div class="chart-legend">
-                                        <i class="fa fa-circle text-info"></i> Tesla Model S
-                                        <i class="fa fa-circle text-warning"></i> BMW 5 Series
-                                    </div>
-                                    <hr>
-                                    <div class="stats">
-                                        <i class="ti-check"></i> Data information certified
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-
-        <footer class="footer">
-            <div class="container-fluid">
-                <nav class="pull-left">
-                    <ul>
-
-                        <li>
-                            <a href="http://www.creative-tim.com">
-                                Creative Tim
-                            </a>
-                        </li>
-                        <li>
-                            <a href="http://blog.creative-tim.com">
-                               Blog
-                            </a>
-                        </li>
-                        <li>
-                            <a href="http://www.creative-tim.com/license">
-                                Licenses
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
-                <div class="copyright pull-right">
-                    &copy; <script>document.write(new Date().getFullYear())</script>, made with <i class="fa fa-heart heart"></i> by <a href="http://www.creative-tim.com">Creative Tim</a>
-                </div>
-            </div>
-        </footer>
-
-    </div>
-</div>
-
-
-</body>
-
-    <!--   Core JS Files   -->
-    <script src="{{context}}/static/js/jquery-1.10.2.js" type="text/javascript"></script>
-	<script src="{{context}}/static/js/bootstrap.min.js" type="text/javascript"></script>
-
-	<!--  Checkbox, Radio & Switch Plugins -->
-	<script src="{{context}}/static/js/bootstrap-checkbox-radio.js"></script>
-
-	<!--  Charts Plugin -->
-	<script src="{{context}}/static/js/chartist.min.js"></script>
-
-    <!--  Notifications Plugin    -->
-    <script src="{{context}}/static/js/bootstrap-notify.js"></script>
-
-    <!--  Google Maps Plugin    -->
-    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
-
-    <!-- Paper Dashboard Core javascript and methods for Demo purpose -->
-    <script src="{{context}}/static/js/dash.js"></script>
-	<script src="{{context}}/static/js/dashboard.js"></script>
-
-	<!-- Paper Dashboard DEMO methods, don't include it in your project! -->
-	<script src="{{context}}/static/js/demo.js"></script>
-
-	<script type="text/javascript">
-    	$(document).ready(function(){
-
-        	demo.initChartist();
-
-        	$.notify({
-            	icon: 'ti-gift',
-            	message: "Welcome to <b>Paper Dashboard</b> - a beautiful Bootstrap freebie for your next project."
-
-            },{
-                type: 'success',
-                timer: 4000
-            });
-
-    	});
-	</script>
-
-</html>

+ 352 - 176
src/api/templates/dashboard.html

@@ -1,202 +1,378 @@
-<meta charset="UTF-8">
-<meta http-equiv="cache-control" content="no-cache">
-<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
-<link type="text/css" rel="stylesheet" href="{{ context }}/static/js/jsgrid/jsgrid.min.css" >
-<link type="text/css" rel="stylesheet" href="{{ context }}/static/js/jsgrid/jsgrid-theme.min.css" >
-<link href="{{context}}/static/css/default.css" rel="stylesheet" type="text/css">
-<link href="{{context}}/static/css/reflect.css" rel="stylesheet" type="text/css">
-<link href="{{context}}/static/css/fa/css/font-awesome.min.css" rel="stylesheet" type="text/css">
-<link rel="icon" href="data:;base64,iVBORw0KGgo=">
-<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
-
-
-<script src="{{ context }}/static/js/jquery/jquery.min.js"></script>
-<script src="{{context}}/static/js/chart.js/chart.bundle.js"></script>
-
-<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>{{title}}</title>
-<script>
-	var HTTP_CONTEXT="{{context}}"
-	$(document).ready(function(){
-		monitor.folders.init()
-		monitor.processes.fetch()
-
-	})
-</script>
-<body class="">
-	<div class="border-bottom caption" style="height:42px">
-		<div class="">{{title}}</div>
-		<div class="small" style="margin:4px">The Phi Technology LLC</div>
-	</div>
-    <div class="sidebar">
-        <i class="fa fa-reorder default left action" onclick="monitor.menu.event.toggle()"></i>
-        <div id="menuframe" class="left small" style="width:10%;">
-            <div id="menu" class="menu"></div>
-        </div>
-    </div>
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
-        <div class="block">
-    		<div style="margin:4px; margin-top:2%">
-    			<div class="" style="height:28px; ">
-    				<div class=" bold">Monitoring
-    					<span id="latest_processes_label" class="default bold"></span>
-    				</div>
-    				<div class="small">Last Lookup <span id="node_last_lookup"></span></div>
-    			</div>
-    			<div class = "" style="height:170px, width:100%;">
-    				<div id="latest_processes" class="grid" ></div>
-    			</div>
-    			<div style="height:22px; padding:2px" class="small">
-    				<div id="latest_process_pager" align="center"></div>
-    			</div>
-    		</div>
-        </div>
+	<title>Monitor</title>
 
-        <div class="block">
-    		<div id="process_summary" class="  grid " style="margin:4px; margin-top:2%">
-    			<div style="margin:4px; padding:2px; margin-bottom:4px; height:28px">
-    				<div class="bold" style="color:#4682B4">Application Summary By Status</div>
-    				<div  class="small">Latest Lookup <span id="app-summary-date"></span></div>
-    			</div>
-
-    			<div class=""  style="padding:2px; height:250px; margin:4px; margin-top:10px">
-    				<div class=" " style="height:100%">
-    					<div class="small left" style="margin-left:2%; margin-top:1%">
-    						<div class="bold">Total Applications that have:</div>
-    						<br>
-    							<div style="margin:0px; margin-left:20px; padding:4px; height:12px"><div class="left width-half"><i class="fa fa-check"></i> Running</div> <span id="total-running" class="right"></span></div>
-    							<div style="margin:0px; margin-left:20px; padding:4px; height:12px"><div class="left width-half"><i class="fa fa-times"></i> Crash</div> <span id="total-crash" class="right"></span></div>
-    							<div style="margin:0px; margin-left:20px; padding:4px; height:12px"><div class="left width-half"><i class="fa fa-ellipsis-h"></i> Idle</div> <span id="total-idle" class="right"></span></div>
-
-
-    					</div>
-    					<div id="summary_chart" class="right width-half"></div>
-    				</div>
-
-    			</div>
-    			<div id="summary_details" class="right"></div>
-    		</div>
-        </div>
+	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
+    <meta name="viewport" content="width=device-width" />
 
-        <div class="block">
-    		<div class="grid " style="margin:4px; margin-top:10px;">
-    			<div style="height:28px">
-    				<div class="bold" style="margin:4px; padding:4px; color:#4682B4;">Application Summary By Groups</div>
-    			</div>
-    			<div class="width" id="summary_ranking" style=" margin:4px; padding:2px; text-transform:capitalize"></div>
-    		</div>
-        </div>
 
-	<div class="">
-        <div class="block">
-    		<div class="" style="padding:20px; margin-top:5%; margin-bottom:1rem;">
-    			<div class="" style="height:28px">
-    				<div class="small bold">CPU & Memory Usage Trend for <i class="fa fa-quote-left"></i> <span id="trend_info" class="default bold"></span> <i class="fa fa-quote-right"></i></div>
-    				<div class="small">Last Lookup <span id="trend_last_lookup"></span> <i id="has_anomaly" class="fa fa-warning right" ></i></div>
+    <!-- Bootstrap core CSS   -->
+    <link href="{{context}}/static/css/bootstrap.min.css" rel="stylesheet" />
 
+    <!-- Animation library for notifications   -->
+    <link href="{{context}}/static/css/animate.min.css" rel="stylesheet"/>
 
-    			</div>
+    <!--  Paper Dashboard core CSS    -->
+    <link href="{{context}}/static/css/dashboard.css" rel="stylesheet"/>
 
-    			<!-- <div  style="height:270px; margin-top:10px"> -->
-    				<div id="trends_chart" class="small grid" style="height:250px; margin:2rem;"></div>
-    			<!-- </div> -->
-    		</div>
-        </div>
-        <div class="block">
-    		<div id="sandbox" class="border-top" style="padding:4px; margin-top:10px">
-    			<div style="height:28px">
-    				<div id="inspect_sandbox" class="right button border" style="display:none" onclick="monitor.sandbox.init()">Inspect</div>
-    				<div class="bold">Python Virtual Environment Analysis</div>
-
-    				<div class="small">Last Lookup <span id="sandbox_date"></span></div>
-    			</div>
-
-    			<div class=" " style="margin-top:10px; height:135px">
-    				<div id="sandbox_status" class="">
-    				</div>
-    				<div id="sandbox_pager"></div>
-    			</div>
-    		</div>
-        </div>
 
-		<div style="margin-top:5%">
-            <div class="block">
-                <div id="folder_summary" class="">
-    				<div style="height:28px">
-
-    					<div class="bold">Folder Analysis/Monitoring</div>
-    					<div class="small">Powered By Machine Learning</div>
-    				</div>
-    				<div class="">
-    					<div class=" border-top" style="margin-top:4px; padding:2px; height:34px">
-    						<i class="fa fa-search left" style="margin:4px; padding:4px; ; color:gray;"></i>
-    						<input id="folder_search" type="text" class="small left" placeholder="hostname" style="width:87%; padding-left:4px;" onkeyup="monitor.folders.search.init()"/>
-    						<i class="fa fa-trash right action right" style="margin:4px; padding:4px; color:maroon" onclick="monitor.folders.search.reset()"></i>
-    					</div>
-    					<div id="gfolderframe" style="margin-top:10px; height:170px; width:100%">
-    						<div style="height:130px">
-    							<div id="gridfolders" style=""></div>
-    						</div>
-    						<div id="folderspager" class="small" style="height:22px; margin:4px;"></div>
-    					</div>
-    				</div>
-    			</div>
+    <!--  CSS for Demo Purpose, don't include it in your project     -->
+    <link href="{{context}}/static/css/demo.css" rel="stylesheet" />
+
+
+    <!--  Fonts and icons     -->
+    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+    <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
+    <link href="{{context}}/static/css/themify-icons.css" rel="stylesheet">
+
+</head>
+<body>
+
+<div class="wrapper">
+    <div class="sidebar" data-background-color="white" data-active-color="danger">
+
+    <!--
+		Tip 1: you can change the color of the sidebar's background using: data-background-color="white | black"
+		Tip 2: you can change the color of the active button using the data-active-color="primary | info | success | warning | danger"
+	-->
+
+    	<div class="sidebar-wrapper">
+            <div class="logo">
+                <a href="#" class="simple-text">
+                    Monitor
+                </a>
             </div>
 
-            <div class="block">
-    			<div id="folder_plan" style="display:none">
-    				<div class="border-bottom" style="height:32px">
-    					<div class="bold">Deletion/Archiving Plan
-    						<i class="fa fa-quote-left"></i> <span id="folder_name"></span> <i class="fa fa-quote-right"></i>
-    						<i class="fa fa-angle-up action right bold" style="font-size:16px; margin:4px;" onclick="monitor.folders.show.grid()"></i>
-    					</div>
-    					<div class="small left">Powered By Machine Learning</div>
+            <ul class="nav">
+                <li class="active">
+                    <a href="dash.html">
+                        <i class="ti-panel"></i>
+                        <p>Dashboard</p>
+                    </a>
+                </li>
+                <li>
+                    <a href="user.html">
+                        <i class="ti-user"></i>
+                        <p>User Profile</p>
+                    </a>
+                </li>
+                <li>
+                    <a href="table.html">
+                        <i class="ti-view-list-alt"></i>
+                        <p>Table List</p>
+                    </a>
+                </li>
+                <li>
+                    <a href="maps.html">
+                        <i class="ti-map"></i>
+                        <p>Maps</p>
+                    </a>
+                </li>
+                <li>
+                    <a href="notifications.html">
+                        <i class="ti-bell"></i>
+                        <p>Notifications</p>
+                    </a>
+                </li>
+				<li class="active-pro">
+                    <a href="upgrade.html">
+                        <i class="ti-export"></i>
+                        <p>Upgrade to PRO</p>
+                    </a>
+                </li>
+            </ul>
+    	</div>
+    </div>
+    <!-- End Side Bar   -->
+    <div class="main-panel">
+        <nav class="navbar navbar-default">
+            <div class="container-fluid">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar bar1"></span>
+                        <span class="icon-bar bar2"></span>
+                        <span class="icon-bar bar3"></span>
+                    </button>
+                    <a class="navbar-brand" href="#">Dashboard</a>
+                </div>
+                <div class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav navbar-right">
+                        <li>
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                                <i class="ti-panel"></i>
+								<p>Stats</p>
+                            </a>
+                        </li>
+                        <li class="dropdown">
+                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                                    <i class="ti-server"></i>
+                                    <!-- <p class="notification">5</p> -->
+									<p>Servers</p>
+									<b class="caret"></b>
+                              </a>
+                              <ul class="dropdown-menu">
+                                <li><a href="#">apps@osx</a></li>
+                                <li><a href="#">server 2</a></li>
+                                <li><a href="#">server 3</a></li>
+                                <li><a href="#">server 4</a></li>
+                                <li><a href="#">server 5</a></li>
+                              </ul>
+                        </li>
+						<li>
+                            <a href="#">
+								<i class="ti-settings"></i>
+								<p>Settings</p>
+                            </a>
+                        </li>
+                    </ul>
+
+                </div>
+            </div>
+        </nav>
+        <!-- End Menu Bar -->
+
+        <div class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-lg-3 col-sm-6">
+                        <div class="card">
+                            <div class="content">
+                                <div class="row">
+                                    <div class="col-xs-5">
+                                        <div class="icon-big icon-warning text-center">
+                                            <i class="ti-dashboard"></i>
+                                        </div>
+                                    </div>
+                                    <div class="col-xs-7">
+                                        <div class="numbers">
+                                            <p>Total CPU</p>
+
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="footer">
+                                    <hr />
+                                    <div class="stats">
+                                        <i class="ti-reload"></i> Updated now
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-3 col-sm-6">
+                        <div class="card">
+                            <div class="content">
+                                <div class="row">
+                                    <div class="col-xs-5">
+                                        <div class="icon-big icon-success text-center">
+                                            <i class="ti-harddrive"></i>
+                                        </div>
+                                    </div>
+                                    <div class="col-xs-7">
+                                        <div class="numbers">
+                                            <p>Total memory used %</p>
+
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="footer">
+                                    <hr />
+                                    <div class="stats">
+                                        <i class="ti-calendar"></i> Last day
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-3 col-sm-6">
+                        <div class="card">
+                            <div class="content">
+                                <div class="row">
+                                    <div class="col-xs-5">
+                                        <div class="icon-big icon-danger text-center">
+                                            <i class="ti-pulse"></i>
+                                        </div>
+                                    </div>
+                                    <div class="col-xs-7">
+                                        <div class="numbers">
+                                            <p>Errors</p>
+                                            <!-- show errors API. Crashed? -->
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="footer">
+                                    <hr />
+                                    <div class="stats">
+                                        <i class="ti-timer"></i> In the last hour
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-3 col-sm-6">
+                        <div class="card">
+                            <div class="content">
+                                <div class="row">
+                                    <div class="col-xs-5">
+                                        <div class="icon-big icon-info text-center">
+                                            <i class="ti-folder"></i>
+                                        </div>
+                                    </div>
+                                    <div class="col-xs-7">
+                                        <div class="numbers">
+                                            <p>Folder Analysis</p>
+                                            <!-- Folder Analysis API here. -->
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="footer">
+                                    <hr />
+                                    <div class="stats">
+                                        <i class="ti-reload"></i> Updated now
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+
+                    <div class="col-md-12">
+                        <div class="card">
+                            <div class="header">
+                                <h4 class="title">Monitoring Apps</h4>
+                                <p class="category">performance</p>
+                            </div>
+                            <div class="content">
+                                <div id="chartHours" class="ct-chart"></div>
+
+                                <div class="footer">
+                                    <div class="chart-legend">
+                                        <!-- confirm these three are right with new API. -->
+                                        <i class="fa fa-circle text-info"></i> cpu usage
+                                        <i class="fa fa-circle text-danger"></i> memory usage
+                                        <i class="fa fa-circle text-warning"></i> memory available
+                                    </div>
+                                    <hr>
+                                    <div class="stats">
+                                        <i class="ti-reload"></i> Updated 3 minutes ago
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="card">
+                            <div class="header">
+                                <h4 class="title">Summary</h4>
+                                <p class="category">Running|Idle|Crash</p>
+                            </div>
+                            <div class="content">
+                                <div id="chartPreferences" class="ct-chart ct-perfect-fourth"></div>
+
+                                <div class="footer">
+                                    <div class="chart-legend">
+                                        <i class="fa fa-circle text-info"></i> Running
+                                        <i class="fa fa-circle text-danger"></i> Crashed
+                                        <i class="fa fa-circle text-warning"></i> Idle
+                                    </div>
+                                    <hr>
+                                    <div class="stats">
+                                        <i class="ti-timer"></i> Some footer
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="card ">
+                            <div class="header">
+                                <h4 class="title">CPU and Memory</h4>
+                                <p class="category">Usage Trends</p>
+                            </div>
+                            <div class="content">
+                                <div id="chartActivity" class="ct-chart"></div>
+
+                                <div class="footer">
+                                    <div class="chart-legend">
+                                        <i class="fa fa-circle text-info"></i> CPU
+                                        <i class="fa fa-circle text-warning"></i> Memory
+                                    </div>
+                                    <hr>
+                                    <div class="stats">
+                                        <i class="ti-check"></i> Data information certified
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-    				</div>
 
-    				<div id="delete_age" class="left width-half " style="margin:2px; padding:2px;">
-    					<div class="small" align="left">By Age</div>
-    					<div class="number" style="height:42px">
+        <footer class="footer">
+            <div class="container-fluid">
+                <nav class="pull-left">
+                    <ul>
+
+                        <li>
+                            <a href="#">
+                                Monitor
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                               Invy
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </footer>
 
-    						<div id="age_count"  align="right" class="left width-75" style="margin-right:4px">00</div>
-    						<div class="small" class="left" style="height:100%; padding-top:15px">Files</div>
+    </div>
+</div>
 
 
-    					</div>
-    					<div class="small border-top" align="center" style="padding-top:4px">
-    						Approximately <span id="age_value">00</span> <span id="age_units"></span>
-    					</div>
+</body>
 
-    				</div>
-    				<div id="delete_size" class="right width-half" class="number" style="margin:2px; padding:2px">
-    					<div class="small" align="left">By Size</div>
+    <!--   Core JS Files   -->
+    <script src="{{context}}/static/js/jquery-1.10.2.js" type="text/javascript"></script>
+	<script src="{{context}}/static/js/bootstrap.min.js" type="text/javascript"></script>
 
-    					<div  class=" number" style="height:42px">
+	<!--  Checkbox, Radio & Switch Plugins -->
+	<script src="{{context}}/static/js/bootstrap-checkbox-radio.js"></script>
 
-    						<div id="size_count" align="right" class="left width-75" style="margin-right:4px">00</div>
-    						<div class="small" class="left" style="height:100%; padding-top:15px">Files</div>
-    					</div>
-    					<div class="small border-top"align="center" style="padding-top:4px">
-    						Approximately <span id="size_value">00</span> <span id="size_units"></span>
-    					</div>
+	<!--  Charts Plugin -->
+	<script src="{{context}}/static/js/chartist.min.js"></script>
 
+    <!--  Notifications Plugin    -->
+    <script src="{{context}}/static/js/bootstrap-notify.js"></script>
 
-    				</div>
-                </div>
-			</div>
-			<div id="chartfolder" ></div>
-		</div>
+    <!--  Google Maps Plugin    -->
+    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
 
+    <!-- Paper Dashboard Core javascript and methods for Demo purpose -->
+    <!-- <script src="{{context}}/static/js/dash.js"></script> -->
+	<script src="{{context}}/static/js/default.js"></script>
 
+	<!-- Paper Dashboard DEMO methods, don't include it in your project! -->
+	<script src="{{context}}/static/js/dashboard.js"></script>
 
+	<script type="text/javascript">
+    	$(document).ready(function(){
 
-	</div>
+        	dashboard.initChartist();
 
+    	});
+	</script>
 
-</body>
+</html>

src/api/templates/assets/sass/paper-dashboard.scss → src/sass/paper-dashboard.scss


+ 64 - 0
src/sass/paper/_alerts.scss

@@ -0,0 +1,64 @@
+.alert{
+    border: 0;
+    border-radius: 0;
+    color: #FFFFFF;
+    padding: 10px 15px;
+    font-size: 14px;
+    
+    .container &{
+        border-radius: 4px;
+    
+    }
+    .navbar &{
+        border-radius: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 85px;
+        width: 100%;
+        z-index: 3;
+    }
+    .navbar:not(.navbar-transparent) &{
+        top: 70px;
+    }
+    
+    span[data-notify="icon"]{
+        font-size: 30px;
+        display: block;
+        left: 15px;
+        position: absolute;
+        top: 50%;
+        margin-top: -20px;
+    }
+    
+    .close ~ span{
+        display: block;
+        max-width: 89%;
+    }
+    
+    &[data-notify="container"]{
+        padding: 10px 10px 10px 20px;
+        border-radius: $border-radius-base;
+    }
+    
+    &.alert-with-icon{
+        padding-left: 65px;
+    }
+}
+.alert-info{
+    background-color: $bg-info;
+    color: $info-states-color;
+}
+.alert-success {
+    background-color: $bg-success;
+    color: $success-states-color;
+}
+.alert-warning {
+    background-color: $bg-warning;
+    color: $warning-states-color;
+}
+.alert-danger {
+    background-color: $bg-danger;
+    color: $danger-states-color;
+}
+

src/api/templates/assets/sass/paper/_buttons.scss → src/sass/paper/_buttons.scss


src/api/templates/assets/sass/paper/_cards.scss → src/sass/paper/_cards.scss


src/api/templates/assets/sass/paper/_chartist.scss → src/sass/paper/_chartist.scss


src/api/templates/assets/sass/paper/_checkbox-radio.scss → src/sass/paper/_checkbox-radio.scss


src/api/templates/assets/sass/paper/_dropdown.scss → src/sass/paper/_dropdown.scss


src/api/templates/assets/sass/paper/_footers.scss → src/sass/paper/_footers.scss


src/api/templates/assets/sass/paper/_inputs.scss → src/sass/paper/_inputs.scss


src/api/templates/assets/sass/paper/_misc.scss → src/sass/paper/_misc.scss


src/api/templates/assets/sass/paper/_mixins.scss → src/sass/paper/_mixins.scss


src/api/templates/assets/sass/paper/_navbars.scss → src/sass/paper/_navbars.scss


src/api/templates/assets/sass/paper/_responsive.scss → src/sass/paper/_responsive.scss


src/api/templates/assets/sass/paper/_sidebar-and-main-panel.scss → src/sass/paper/_sidebar-and-main-panel.scss


src/api/templates/assets/sass/paper/_tables.scss → src/sass/paper/_tables.scss


src/api/templates/assets/sass/paper/_typography.scss → src/sass/paper/_typography.scss


src/api/templates/assets/sass/paper/_variables.scss → src/sass/paper/_variables.scss


src/api/templates/assets/sass/paper/mixins/_buttons.scss → src/sass/paper/mixins/_buttons.scss


src/api/templates/assets/sass/paper/mixins/_cards.scss → src/sass/paper/mixins/_cards.scss


src/api/templates/assets/sass/paper/mixins/_chartist.scss → src/sass/paper/mixins/_chartist.scss


src/api/templates/assets/sass/paper/mixins/_icons.scss → src/sass/paper/mixins/_icons.scss


src/api/templates/assets/sass/paper/mixins/_inputs.scss → src/sass/paper/mixins/_inputs.scss


src/api/templates/assets/sass/paper/mixins/_labels.scss → src/sass/paper/mixins/_labels.scss


src/api/templates/assets/sass/paper/mixins/_navbars.scss → src/sass/paper/mixins/_navbars.scss


src/api/templates/assets/sass/paper/mixins/_sidebar.scss → src/sass/paper/mixins/_sidebar.scss


src/api/templates/assets/sass/paper/mixins/_tabs.scss → src/sass/paper/mixins/_tabs.scss


src/api/templates/assets/sass/paper/mixins/_transparency.scss → src/sass/paper/mixins/_transparency.scss


src/api/templates/assets/sass/paper/mixins/_vendor-prefixes.scss → src/sass/paper/mixins/_vendor-prefixes.scss