diff options
Diffstat (limited to 'usecaseui-monitor/src/main/webapp/html/data-visualization.html')
| -rw-r--r-- | usecaseui-monitor/src/main/webapp/html/data-visualization.html | 354 |
1 files changed, 0 insertions, 354 deletions
diff --git a/usecaseui-monitor/src/main/webapp/html/data-visualization.html b/usecaseui-monitor/src/main/webapp/html/data-visualization.html deleted file mode 100644 index 57299a6a..00000000 --- a/usecaseui-monitor/src/main/webapp/html/data-visualization.html +++ /dev/null @@ -1,354 +0,0 @@ -<!DOCTYPE html> -<head> - <meta charset="utf-8"> - <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]--> - <title></title> - <meta name="keywords" content="" /> - <meta name="description" content="" /> - <meta http-equiv="X-UA-Compatible" content="IE=edge" /> -<link href="css/nv.d3.css" rel="stylesheet" type="text/css"> - <meta name="viewport" content="width=device-width"> - <link rel="stylesheet" href="css/templatemo_main.css"> - <style> - body { - overflow-y:scroll; - } - text { - font: 12px sans-serif; - } - svg { - display: block; - } - #CPUchart,#Memorychart,#Diskchart,#Networkchart svg { - height: 200px; - width: 400px; - min-width: 100px; - min-height: 100px; - } - tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); } -.nodatadiv { - display: table-cell; - width: 600px; - height:300px; - text-align:center; - vertical-align: middle; -} -.nodatainner { - padding: 10px; -} - </style> -</head> -<body> - <div id="main-wrapper"> - <div class="navbar navbar-inverse" role="navigation"> - <div class="navbar-header"> - <div class="logo"><h1>UUI</h1></div> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - </div> - </div> - <div class="template-page-wrapper"> - <div class="navbar-collapse collapse templatemo-sidebar"> - <ul class="templatemo-sidebar-menu"> - <li> - <form class="navbar-form"> - <input type="text" class="form-control" id="templatemo_search_box" placeholder="Search..."> - <span class="btn btn-default">Go</span> - </form> - </li> - - <li><a href="tables.html"><i class="fa fa-users"></i><span class="badge pull-right">NEW</span>Alarm</a></li> - <li><a href="preferences.html"><i class="fa fa-cog"></i>Preferences</a></li> - <li class="active"><a href="#"><i class="fa fa-cubes"></i>About Preferences froms</a></li> - <li><a href="javascript:;" data-toggle="modal" data-target="#confirmModal"><i class="fa fa-sign-out"></i>Sign Out</a></li> - </ul> - </div> - <!--/.navbar-collapse --> - - <div class="templatemo-content-wrapper"> - <div class="templatemo-content"> - - <h1>Forms</h1> - - <div class="templatemo-charts"> - - <div class="row"> - <div class="col-md-5 col-sm-6"> - <div class="panel panel-success"> - <div class="panel-heading">CPU</div> - <div align="center"><H3></H3></div><div id="CPUchart"> <svg></svg> </div> - </div> - </div> - <div class="col-md-5 col-sm-6"> - <div class="panel panel-success"> - <div class="panel-heading">Memory</div> - <div align="center"><H3></H3></div><div id="Memorychart"> <svg></svg> </div> - </div> - </div> - </div> - <div class="row"> - <div class="col-md-5 col-sm-6"> - <div class="panel panel-success"> - <div class="panel-heading">Disk</div> - <div align="center"><H3></H3></div><div id="Diskchart"> <svg></svg> </div> - </div> - </div> - <div class="col-md-5 col-sm-6"> - <div class="panel panel-primary"> - <div class="panel-heading">Network</div> - <div align="center"><H3></H3></div><div id="Networkchart"> <svg></svg> </div> - </div> - </div> - </div> - </div> - <div class="row"> - <div class="col-md-6 col-sm-6"> - <!-- Nav tabs --> - <ul class="nav nav-tabs" role="tablist" id="templatemo-tabs"> - <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> - <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> - <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> - <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> - </ul> - - <!-- Tab panes --> - <div class="tab-content"> - <div class="tab-pane fade in active" id="home"> - <ul class="list-group"> - <li class="list-group-item"> cpu</li> - <li class="list-group-item"> ....</li> - <li class="list-group-item">....</li> - <li class="list-group-item">....</li> - <li class="list-group-item">....</li> - </ul> - </div> - <div class="tab-pane fade" id="profile"> - <ul class="list-group"> - <li class="list-group-item"> cpu</li> - <li class="list-group-item"> ....</li> - <li class="list-group-item">....</li> - <li class="list-group-item">....</li> - <li class="list-group-item">....</li> - </ul> - </ul> - </div> - <div class="tab-pane fade" id="messages"> - <div class="list-group"> - <ul class="list-group"> - <li class="list-group-item"> cpu</li> - <li class="list-group-item"> ....</li> - <li class="list-group-item">....</li> - <li class="list-group-item">....</li> - <li class="list-group-item">....</li> - </ul> - </div> - </div> - <div class="tab-pane fade" id="settings"> - <div class="list-group"> - <ul class="list-group"> - <li class="list-group-item"> cpu</li> - <li class="list-group-item"> ....</li> - <li class="list-group-item">....</li> - <li class="list-group-item">....</li> - <li class="list-group-item">....</li> - </ul> - </div> - </div> - </div> - </div> - - <!-- Modal --> - <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> - <div class="modal-dialog"> - <div class="modal-content"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> - <h4 class="modal-title" id="myModalLabel">Are you sure you want to sign out?</h4> - </div> - <div class="modal-footer"> - <a href="sign-in.html" class="btn btn-primary">Yes</a> - <button type="button" class="btn btn-default" data-dismiss="modal">No</button> - </div> - </div> - </div> - </div> - - - </div> - -</div> - - <script src="js/jquery.min.js"></script> - <script src="js/bootstrap.min.js"></script> - <script src="js/templatemo_script.js"></script> - <script src="js/d3.v3.min.js"></script> -<script src="js/nv.d3.min.js"></script> -<script src="js/tooltip.js"></script> -<script src="js/utils.js"></script> -<script src="js/models/axis.min.js"></script> -<script src="js/models/multiChart.js"></script> -<script> -historicalBarChart = [ - { "type":"bar", "key": "memory", "yAxis": "1", "values": [{ "x":1388552400000 , "y":10}, - { "x":1391230800000 , "y":4}, { "x":1393650000000 , "y":4}, { "x":1396324800000 , "y":12}, - { "x":1398916800000 , "y":3.27}, { "x":1401595200000 , "y":6.07}, { "x":1404187200000 , "y":8.93}, - { "x":1406865600000 , "y":11.61}, { "x":1409544000000 , "y":18.66}, { "x":1412136000000 , "y":19.04}, - { "x":1414814400000 , "y":17.5}, { "x":1417410000000 , "y":15.73}, { "x":1420088400000 , "y":9.62333333333333}, - { "x":1422766800000 , "y":14.29}, { "x":1425186000000 , "y":16.1166666666667} ] } ]; -var chart1,chart2,chart3,chart4; -nv.addGraph(function() { - chart1 = nv.models.multiBarChart() - .margin({top: 30, right: 60, bottom: 50, left: 100}) - .showLegend(true) - .reduceXTicks(false) - .forceY([0, 34.0]) - .showControls(false) - .stacked(false) - .logScale(false) - .legendPos('top') - .color(d3.scale.category10().range()); - chart1.xAxis - .tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000]) - .staggerLabels(false) - .showMaxMin(false) - .rotateLabels(90) - .axisLabel('Timestamp') - .tickFormat(function(d) { - return d3.time.format('%b %y')(new Date(d)) }); - chart1.yAxis - .logScale(false) - .axisLabel('') - .tickFormat(d3.format(',.1f')); - d3.select('#CPUchart svg') - .datum(historicalBarChart) - .transition().duration(1000) - .call(chart1); - nv.utils.windowResize(chart1.update); - return chart1; -}); -nv.addGraph(function() { - chart2 = nv.models.multiBarChart() - .margin({top: 30, right: 60, bottom: 50, left: 100}) - .showLegend(true) - .reduceXTicks(false) - .forceY([0, 34.0]) - .showControls(false) - .stacked(false) - .logScale(false) - .legendPos('top') - .color(d3.scale.category20b().range()); - chart2.xAxis - .tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000]) - .staggerLabels(false) - .showMaxMin(false) - .rotateLabels(90) - .axisLabel('Timestamp') - .tickFormat(function(d) { - return d3.time.format('%b %y')(new Date(d)) }); - chart2.yAxis - .logScale(false) - .axisLabel('') - .tickFormat(d3.format(',.1f')); - d3.select('#Memorychart svg') - .datum(historicalBarChart) - .transition().duration(1000) - .call(chart2); - nv.utils.windowResize(chart2.update); - return chart2; -}); -nv.addGraph(function() { - chart3 = nv.models.multiBarChart() - .margin({top: 30, right: 60, bottom: 50, left: 100}) - .showLegend(true) - .reduceXTicks(false) - .forceY([0, 34.0]) - .showControls(false) - .stacked(false) - .logScale(false) - .legendPos('top') - .color(d3.scale.category20c().range()); - chart3.xAxis - .tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000]) - .staggerLabels(false) - .showMaxMin(false) - .rotateLabels(90) - .axisLabel('Timestamp') - .tickFormat(function(d) { - return d3.time.format('%b %y')(new Date(d)) }); - chart3.yAxis - .logScale(false) - .axisLabel('') - .tickFormat(d3.format(',.1f')); - d3.select('#Diskchart svg') - .datum(historicalBarChart) - .transition().duration(1000) - .call(chart3); - nv.utils.windowResize(chart3.update); - return chart3; -}); -nv.addGraph(function() { - chart4 = nv.models.multiBarChart() - .margin({top: 30, right: 60, bottom: 50, left: 100}) - .showLegend(true) - .reduceXTicks(false) - .forceY([0, 34.0]) - .showControls(false) - .stacked(false) - .logScale(false) - .legendPos('top') - .color(d3.scale.category50().range()); - chart4.xAxis - .tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000]) - .staggerLabels(false) - .showMaxMin(false) - .rotateLabels(90) - .axisLabel('Timestamp') - .tickFormat(function(d) { - return d3.time.format('%b %y')(new Date(d)) }); - chart4.yAxis - .logScale(false) - .axisLabel('') - .tickFormat(d3.format(',.1f')); - d3.select('#Networkchart svg') - .datum(historicalBarChart) - .transition().duration(1000) - .call(chart4); - nv.utils.windowResize(chart4.update); - return chart4; -}); -function redraw() { - d3.select('#CPUchart svg') - .datum(historicalBarChart) - .transition().duration(500) - .call(chart1); - d3.select('#Memorychart svg') - .datum(historicalBarChart) - .transition().duration(500) - .call(chart2); - d3.select('#Diskchart svg') - .datum(historicalBarChart) - .transition().duration(1000) - .call(chart3); - d3.select('#Networkchart svg') - .datum(historicalBarChart) - .transition().duration(1000) - .call(chart4); -} - - setInterval(function () { - redraw(); - }, 1500) -if(historicalBarChart.length <= 0 ) { - document.getElementById("CPUchart").innerHTML = "<div id='noData'><b>No Data Available</b></div>"; - document.getElementById("CPUchart").className="nodatadiv"; - document.getElementById("Memorychart").innerHTML = "<div id='noData'><b>No Data Available</b></div>"; - document.getElementById("Memorychart").className="nodatadiv"; - document.getElementById("nodata").className="nodatainner"; -} -</script> - </body> -</html>
\ No newline at end of file |