summaryrefslogtreecommitdiffstats
path: root/usecaseui-monitor/src/main/webapp/html/data-visualization.html
diff options
context:
space:
mode:
authorshentao <shentao@chinamobile.com>2017-09-01 11:57:47 +0800
committershentao <shentao@chinamobile.com>2017-09-01 11:57:58 +0800
commit57dbba269d19bc59fad89160200bb2dbcccb9003 (patch)
treed466041ceffa2161124ca79a48b3e077777c74b8 /usecaseui-monitor/src/main/webapp/html/data-visualization.html
parent4ff32341a0af1972b44a7410e76e9b231131e7ab (diff)
Upload Monitor function code
Change-Id: I33ad76221b4cb771a298ff240245fc24be664efb Issue-Id: USECASEUI-6 Signed-off-by: shentao <shentao@chinamobile.com>
Diffstat (limited to 'usecaseui-monitor/src/main/webapp/html/data-visualization.html')
-rw-r--r--usecaseui-monitor/src/main/webapp/html/data-visualization.html354
1 files changed, 354 insertions, 0 deletions
diff --git a/usecaseui-monitor/src/main/webapp/html/data-visualization.html b/usecaseui-monitor/src/main/webapp/html/data-visualization.html
new file mode 100644
index 00000000..57299a6a
--- /dev/null
+++ b/usecaseui-monitor/src/main/webapp/html/data-visualization.html
@@ -0,0 +1,354 @@
+<!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">&times;</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