library
/
smart-top
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some style changes

Browse Source
community
Michael Mead 8 years ago
parent 462ee74b1b
commit 76acbb7bd6
5 changed files with 521 additions and 279 deletions
Show Stats Download Patch File Download Diff File

3
src/api/index.py
Unescape View File

@ -162,6 +162,7 @@ def dashboard():
This function is designed to trigger learning for anomaly detection This function is designed to trigger learning for anomaly detection
@TODO: forward this to a socket i.e non-blocking socket @TODO: forward this to a socket i.e non-blocking socket
""" """
@app.route('/anomalies/get') @app.route('/anomalies/get')
def learn(): def learn():
global CONFIG global CONFIG
@ -291,5 +292,3 @@ if __name__== '__main__':
SYS_ARGS.PARAMS['port'] = 8484 SYS_ARGS.PARAMS['port'] = 8484
PORT = int(SYS_ARGS.PARAMS['port']) PORT = int(SYS_ARGS.PARAMS['port'])
app.run(host='0.0.0.0' ,port=PORT,debug=True,threaded=True) app.run(host='0.0.0.0' ,port=PORT,debug=True,threaded=True)

213
src/api/static/css/default.css
Unescape View File

@ -78,7 +78,7 @@ body, .default {
.grid .fa-times {color:maroon; } .grid .fa-times {color:maroon; }
.menu { .menu {
margin:4px; margin:5px;
padding:4px; padding:4px;
} }
.menu .fa-chevron-right {color:transparent; margin:4px; } .menu .fa-chevron-right {color:transparent; margin:4px; }
@ -121,7 +121,7 @@ input[type=text]:focus{
.fa-warning, .warning{color:orange} .fa-warning, .warning{color:orange}
.number {font-size:42px; font-weight:lighter; padding:2px; margin:2px;} .number {font-size:42px; font-weight:lighter; padding:2px; margin:2px;}
.action {cursor:pointer; padding:2px; margin:2px; border:1px solid transparent} .action {cursor:pointer; padding:1px; margin:1px; border:1px solid transparent}
.action:hover { border-bottom-color:#4682B4} .action:hover { border-bottom-color:#4682B4}
.shadow{box-shadow: 7px 7px 5px #888888;} .shadow{box-shadow: 7px 7px 5px #888888;}
.gradient { .gradient {
@ -144,3 +144,212 @@ background-image: -webkit-linear-gradient(top, #CAD5E0 0%, #F3F3F3 40%);
background-image: linear-gradient(to bottom, #CAD5E0 0%, #F3F3F3 40%); background-image: linear-gradient(to bottom, #CAD5E0 0%, #F3F3F3 40%);
} }
/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.block {display: inline-block;}
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape ////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}

14
src/api/static/css/reflect.css
Unescape View File

@ -0,0 +1,14 @@
.block {
border: 2px solid black;
display: inline-block;
}
.jsgrid-cell { overflow:hidden; }
/* ----------- working media query (laptop) ----------- */
@media screen
and (max-device-width: 900px) {
}

6
src/api/static/js/dashboard.js
Unescape View File

@ -85,7 +85,7 @@ monitor.processes.render = function(label,data) {
jx.dom.set.value('latest_processes_label', label) jx.dom.set.value('latest_processes_label', label)
var options = { var options = {
width: $('#latest_processes').width(), height:'auto' width: "90%", height:'auto', autoload:true
} }
options.paging = true options.paging = true
options.pageSize = 4 options.pageSize = 4
@ -600,8 +600,8 @@ monitor.menu.event.toggle = function () {
var value = dom.style.marginLeft.trim() var value = dom.style.marginLeft.trim()
if (value==0 || value == "0px" || value == "") { if (value==0 || value == "0px" || value == "") {
var width = -$(dom).width() - 10 var width = -$(dom).width() - 20
$('#menuframe').animate({marginLeft:"-12%"}) $('#menuframe').animate({marginLeft:"-20%"})
} else { } else {
$('#menuframe').animate({marginLeft:"0"}) $('#menuframe').animate({marginLeft:"0"})
} }

48
src/api/templates/dashboard.html
Unescape View File

@ -4,8 +4,11 @@
<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.min.css" >
<link type="text/css" rel="stylesheet" href="{{ context }}/static/js/jsgrid/jsgrid-theme.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/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 href="{{context}}/static/css/fa/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="icon" href="data:;base64,iVBORw0KGgo="> <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/jquery/jquery.min.js"></script>
<script src="{{context}}/static/js/chart.js/chart.bundle.js"></script> <script src="{{context}}/static/js/chart.js/chart.bundle.js"></script>
@ -31,29 +34,32 @@
<div class="">{{title}}</div> <div class="">{{title}}</div>
<div class="small" style="margin:4px">The Phi Technology LLC</div> <div class="small" style="margin:4px">The Phi Technology LLC</div>
</div> </div>
<i class="fa fa-reorder default left action" onclick="monitor.menu.event.toggle()"></i>
<div id="menuframe" class="left small " style="width:10%; height:90%"> <i class="fa fa-reorder default left action" onclick="monitor.menu.event.toggle()"></i> <!-- TODO: MOVE MORE LEFT -->
<div id="menuframe" class="left small" style="width:10%; height:100%">
<div id="menu" class="menu"></div> <div id="menu" class="menu"></div>
</div> </div>
<div class="left info "> <div class="left info">
<div class=" border-right" style="margin:4px; margin-top:2%"> <div class="block">
<div style="margin:4px; margin-top:2%">
<div class="" style="height:28px; "> <div class="" style="height:28px; ">
<div class=" bold">Monitoring <div class=" bold">Monitoring
<span id="latest_processes_label" class="default bold"></span> <span id="latest_processes_label" class="default bold"></span>
</div> </div>
<div class="small">Last Lookup <span id="node_last_lookup"></span></div> <div class="small">Last Lookup <span id="node_last_lookup"></span></div>
</div> </div>
<div class = "" style="height:170px, width:100%;">
<div class = "" style="padding:2px; margin:4px; height:170px">
<div id="latest_processes" class="grid" ></div> <div id="latest_processes" class="grid" ></div>
</div> </div>
<div style="height:22px; padding:2px" class="small"> <div style="height:22px; padding:2px" class="small">
<div id="latest_process_pager" align="center"></div> <div id="latest_process_pager" align="center"></div>
</div> </div>
</div> </div>
<div id="process_summary" class=" grid border-right" style="margin:4px; margin-top:2%"> </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 style="margin:4px; padding:2px; margin-bottom:4px; height:28px">
<div class="bold" style="color:#4682B4">Application Summary By Status</div> <div class="bold" style="color:#4682B4">Application Summary By Status</div>
<div class="small">Latest Lookup <span id="app-summary-date"></span></div> <div class="small">Latest Lookup <span id="app-summary-date"></span></div>
@ -76,16 +82,22 @@
</div> </div>
<div id="summary_details" class="right"></div> <div id="summary_details" class="right"></div>
</div> </div>
</div>
<div class=" grid border-right" style="margin:4px; margin-top:10px;"> <div class="block">
<div class="grid " style="margin:4px; margin-top:10px;">
<div style="height:28px"> <div style="height:28px">
<div class="bold" style="margin:4px; padding:4px; color:#4682B4;">Application Summary By Groups</div> <div class="bold" style="margin:4px; padding:4px; color:#4682B4;">Application Summary By Groups</div>
</div> </div>
<div class="width" id="summary_ranking" style=" margin:4px; padding:2px; text-transform:capitalize"></div> <div class="width" id="summary_ranking" style=" margin:4px; padding:2px; text-transform:capitalize"></div>
</div> </div>
</div> </div>
</div>
<div class="left info"> <div class="left info">
<div class="" style="padding:4px; margin-top:2%"> <div class="block">
<div class="" style="padding:20px; margin-top:5%; margin-bottom:1rem;">
<div class="" style="height:28px"> <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 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="small">Last Lookup <span id="trend_last_lookup"></span> <i id="has_anomaly" class="fa fa-warning right" ></i></div>
@ -93,10 +105,12 @@
</div> </div>
<div style="height:270px; margin-top:4px"> <!-- <div style="height:270px; margin-top:10px"> -->
<div id="trends_chart" class="small grid" style="height:250px"></div> <div id="trends_chart" class="small grid" style="height:250px; margin:2rem;"></div>
<!-- </div> -->
</div> </div>
</div> </div>
<div class="block">
<div id="sandbox" class="border-top" style="padding:4px; margin-top:10px"> <div id="sandbox" class="border-top" style="padding:4px; margin-top:10px">
<div style="height:28px"> <div style="height:28px">
<div id="inspect_sandbox" class="right button border" style="display:none" onclick="monitor.sandbox.init()">Inspect</div> <div id="inspect_sandbox" class="right button border" style="display:none" onclick="monitor.sandbox.init()">Inspect</div>
@ -111,7 +125,10 @@
<div id="sandbox_pager"></div> <div id="sandbox_pager"></div>
</div> </div>
</div> </div>
<div style="margin-top:2%"> </div>
<div style="margin-top:5%">
<div class="block">
<div id="folder_summary" class=""> <div id="folder_summary" class="">
<div style="height:28px"> <div style="height:28px">
@ -132,7 +149,9 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="block">
<div id="folder_plan" style="display:none"> <div id="folder_plan" style="display:none">
<div class="border-bottom" style="height:32px"> <div class="border-bottom" style="height:32px">
<div class="bold">Deletion/Archiving Plan <div class="bold">Deletion/Archiving Plan
@ -143,7 +162,7 @@
</div> </div>
<div id="delete_age" class="left width-half border-right" style="margin:2px; padding:2px;"> <div id="delete_age" class="left width-half " style="margin:2px; padding:2px;">
<div class="small" align="left">By Age</div> <div class="small" align="left">By Age</div>
<div class="number" style="height:42px"> <div class="number" style="height:42px">
@ -171,6 +190,7 @@
</div> </div>
</div>
</div> </div>
<div id="chartfolder" ></div> <div id="chartfolder" ></div>
</div> </div>

Write Preview
Loading…
Cancel
Save