Michael Mead
8 years ago
parent
94b9586263
commit
244e9b2c6f
@ -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> -->
|
||||
@ -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
|
||||
*/
|
||||
@ -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; }
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -1,315 +0,0 @@
|
||||
type = ['','info','success','warning','danger'];
|
||||
|
||||
|
||||
demo = {
|
||||
initPickColor: function(){
|
||||
$('.pick-class-label').click(function(){
|
||||
var new_class = $(this).attr('new-class');
|
||||
var old_class = $('#display-buttons').attr('data-class');
|
||||
var display_div = $('#display-buttons');
|
||||
if(display_div.length) {
|
||||
var display_buttons = display_div.find('.btn');
|
||||
display_buttons.removeClass(old_class);
|
||||
display_buttons.addClass(new_class);
|
||||
display_div.attr('data-class', new_class);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
initChartist: function(){
|
||||
|
||||
var dataSales = {
|
||||
labels: ['9:00AM', '12:00AM', '3:00PM', '6:00PM', '9:00PM', '12:00PM', '3:00AM', '6:00AM'],
|
||||
series: [
|
||||
[287, 385, 490, 562, 594, 626, 698, 895, 952],
|
||||
[67, 152, 193, 240, 387, 435, 535, 642, 744],
|
||||
[23, 113, 67, 108, 190, 239, 307, 410, 410]
|
||||
]
|
||||
};
|
||||
|
||||
var optionsSales = {
|
||||
lineSmooth: false,
|
||||
low: 0,
|
||||
high: 1000,
|
||||
showArea: true,
|
||||
height: "245px",
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
},
|
||||
lineSmooth: Chartist.Interpolation.simple({
|
||||
divisor: 3
|
||||
}),
|
||||
showLine: true,
|
||||
showPoint: false,
|
||||
};
|
||||
|
||||
var responsiveSales = [
|
||||
['screen and (max-width: 640px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value[0];
|
||||
}
|
||||
}
|
||||
}]
|
||||
];
|
||||
|
||||
Chartist.Line('#chartHours', dataSales, optionsSales, responsiveSales);
|
||||
|
||||
|
||||
var data = {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [
|
||||
[542, 543, 520, 680, 653, 753, 326, 434, 568, 610, 756, 895],
|
||||
[230, 293, 380, 480, 503, 553, 600, 664, 698, 710, 736, 795]
|
||||
]
|
||||
};
|
||||
|
||||
var options = {
|
||||
seriesBarDistance: 10,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
height: "245px"
|
||||
};
|
||||
|
||||
var responsiveOptions = [
|
||||
['screen and (max-width: 640px)', {
|
||||
seriesBarDistance: 5,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value[0];
|
||||
}
|
||||
}
|
||||
}]
|
||||
];
|
||||
|
||||
Chartist.Line('#chartActivity', data, options, responsiveOptions);
|
||||
|
||||
var dataPreferences = {
|
||||
series: [
|
||||
[25, 30, 20, 25]
|
||||
]
|
||||
};
|
||||
|
||||
var optionsPreferences = {
|
||||
donut: true,
|
||||
donutWidth: 40,
|
||||
startAngle: 0,
|
||||
total: 100,
|
||||
showLabel: false,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
}
|
||||
};
|
||||
|
||||
Chartist.Pie('#chartPreferences', dataPreferences, optionsPreferences);
|
||||
|
||||
Chartist.Pie('#chartPreferences', {
|
||||
labels: ['62%','32%','6%'],
|
||||
series: [62, 32, 6]
|
||||
});
|
||||
},
|
||||
|
||||
initGoogleMaps: function(){
|
||||
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
|
||||
var mapOptions = {
|
||||
zoom: 13,
|
||||
center: myLatlng,
|
||||
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
|
||||
styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
|
||||
|
||||
}
|
||||
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
position: myLatlng,
|
||||
title:"Hello World!"
|
||||
});
|
||||
|
||||
// To add the marker to the map, call setMap();
|
||||
marker.setMap(map);
|
||||
},
|
||||
|
||||
showNotification: function(from, align){
|
||||
color = Math.floor((Math.random() * 4) + 1);
|
||||
|
||||
$.notify({
|
||||
icon: "ti-gift",
|
||||
message: "Welcome to <b>Paper Dashboard</b> - a beautiful freebie for every web developer."
|
||||
|
||||
},{
|
||||
type: type[color],
|
||||
timer: 4000,
|
||||
placement: {
|
||||
from: from,
|
||||
align: align
|
||||
}
|
||||
});
|
||||
},
|
||||
initDocumentationCharts: function(){
|
||||
// init single simple line chart
|
||||
var dataPerformance = {
|
||||
labels: ['6pm','9pm','11pm', '2am', '4am', '8am', '2pm', '5pm', '8pm', '11pm', '4am'],
|
||||
series: [
|
||||
[1, 6, 8, 7, 4, 7, 8, 12, 16, 17, 14, 13]
|
||||
]
|
||||
};
|
||||
|
||||
var optionsPerformance = {
|
||||
showPoint: false,
|
||||
lineSmooth: true,
|
||||
height: "200px",
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
showLabel: true
|
||||
},
|
||||
axisY: {
|
||||
offset: 40,
|
||||
},
|
||||
low: 0,
|
||||
high: 16,
|
||||
height: "250px"
|
||||
};
|
||||
|
||||
Chartist.Line('#chartPerformance', dataPerformance, optionsPerformance);
|
||||
|
||||
// init single line with points chart
|
||||
var dataStock = {
|
||||
labels: ['\'07','\'08','\'09', '\'10', '\'11', '\'12', '\'13', '\'14', '\'15'],
|
||||
series: [
|
||||
[22.20, 34.90, 42.28, 51.93, 62.21, 80.23, 62.21, 82.12, 102.50, 107.23]
|
||||
]
|
||||
};
|
||||
|
||||
var optionsStock = {
|
||||
lineSmooth: false,
|
||||
height: "200px",
|
||||
axisY: {
|
||||
offset: 40,
|
||||
labelInterpolationFnc: function(value) {
|
||||
return '$' + value;
|
||||
}
|
||||
|
||||
},
|
||||
low: 10,
|
||||
height: "250px",
|
||||
high: 110,
|
||||
classNames: {
|
||||
point: 'ct-point ct-green',
|
||||
line: 'ct-line ct-green'
|
||||
}
|
||||
};
|
||||
|
||||
Chartist.Line('#chartStock', dataStock, optionsStock);
|
||||
|
||||
// init multiple lines chart
|
||||
var dataSales = {
|
||||
labels: ['9:00AM', '12:00AM', '3:00PM', '6:00PM', '9:00PM', '12:00PM', '3:00AM', '6:00AM'],
|
||||
series: [
|
||||
[287, 385, 490, 562, 594, 626, 698, 895, 952],
|
||||
[67, 152, 193, 240, 387, 435, 535, 642, 744],
|
||||
[23, 113, 67, 108, 190, 239, 307, 410, 410]
|
||||
]
|
||||
};
|
||||
|
||||
var optionsSales = {
|
||||
lineSmooth: false,
|
||||
low: 0,
|
||||
high: 1000,
|
||||
showArea: true,
|
||||
height: "245px",
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
},
|
||||
lineSmooth: Chartist.Interpolation.simple({
|
||||
divisor: 3
|
||||
}),
|
||||
showLine: true,
|
||||
showPoint: false,
|
||||
};
|
||||
|
||||
var responsiveSales = [
|
||||
['screen and (max-width: 640px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value[0];
|
||||
}
|
||||
}
|
||||
}]
|
||||
];
|
||||
|
||||
Chartist.Line('#chartHours', dataSales, optionsSales, responsiveSales);
|
||||
|
||||
// pie chart
|
||||
Chartist.Pie('#chartPreferences', {
|
||||
labels: ['62%','32%','6%'],
|
||||
series: [62, 32, 6]
|
||||
});
|
||||
|
||||
// bar chart
|
||||
var dataViews = {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [
|
||||
[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
|
||||
]
|
||||
};
|
||||
|
||||
var optionsViews = {
|
||||
seriesBarDistance: 10,
|
||||
classNames: {
|
||||
bar: 'ct-bar'
|
||||
},
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
|
||||
},
|
||||
height: "250px"
|
||||
|
||||
};
|
||||
|
||||
var responsiveOptionsViews = [
|
||||
['screen and (max-width: 640px)', {
|
||||
seriesBarDistance: 5,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value[0];
|
||||
}
|
||||
}
|
||||
}]
|
||||
];
|
||||
|
||||
Chartist.Bar('#chartViews', dataViews, optionsViews, responsiveOptionsViews);
|
||||
|
||||
// multiple bars chart
|
||||
var data = {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [
|
||||
[542, 543, 520, 680, 653, 753, 326, 434, 568, 610, 756, 895],
|
||||
[230, 293, 380, 480, 503, 553, 600, 664, 698, 710, 736, 795]
|
||||
]
|
||||
};
|
||||
|
||||
var options = {
|
||||
seriesBarDistance: 10,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
height: "245px"
|
||||
};
|
||||
|
||||
var responsiveOptions = [
|
||||
['screen and (max-width: 640px)', {
|
||||
seriesBarDistance: 5,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value[0];
|
||||
}
|
||||
}
|
||||
}]
|
||||
];
|
||||
|
||||
Chartist.Line('#chartActivity', data, options, responsiveOptions);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
Before Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 41 KiB |
@ -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">
|
||||
© <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>
|
||||
@ -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()
|
||||
<!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/dashboard.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="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>
|
||||
|
||||
})
|
||||
</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 class="footer">
|
||||
<hr />
|
||||
<div class="stats">
|
||||
<i class="ti-reload"></i> Updated now
|
||||
</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 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 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 class="col-xs-7">
|
||||
<div class="numbers">
|
||||
<p>Total memory used %</p>
|
||||
|
||||
</div>
|
||||
<div id="summary_chart" class="right width-half"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="summary_details" class="right"></div>
|
||||
<div class="footer">
|
||||
<hr />
|
||||
<div class="stats">
|
||||
<i class="ti-calendar"></i> Last day
|
||||
</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 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 style="height:270px; margin-top:10px"> -->
|
||||
<div id="trends_chart" class="small grid" style="height:250px; margin:2rem;"></div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="col-xs-7">
|
||||
<div class="numbers">
|
||||
<p>Errors</p>
|
||||
<!-- show errors API. Crashed? -->
|
||||
</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 class="footer">
|
||||
<hr />
|
||||
<div class="stats">
|
||||
<i class="ti-timer"></i> In the last hour
|
||||
</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 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 id="folderspager" class="small" style="height:22px; margin:4px;"></div>
|
||||
</div>
|
||||
<div class="col-xs-7">
|
||||
<div class="numbers">
|
||||
<p>Folder Analysis</p>
|
||||
<!-- Folder Analysis API here. -->
|
||||
</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 class="footer">
|
||||
<hr />
|
||||
<div class="stats">
|
||||
<i class="ti-reload"></i> Updated now
|
||||
</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>
|
||||
<div class="row">
|
||||
|
||||
<div class=" number" style="height:42px">
|
||||
<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 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 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 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 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 id="chartfolder" ></div>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
</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/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(){
|
||||
|
||||
dashboard.initChartist();
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue