Kanagaraj M has uploaded a new change for review. Change subject: gluster-nagios-monitoring: refactored trends-tab layout ......................................................................
gluster-nagios-monitoring: refactored trends-tab layout Refactored the layout of the search panel of Trends tab. Change-Id: I1064546318c7d65219461964dde174844ab41a55 Signed-off-by: Kanagaraj M <[email protected]> --- M gluster-nagios-monitoring/src/css/dashboard.css M gluster-nagios-monitoring/src/trendsTab.html 2 files changed, 79 insertions(+), 55 deletions(-) git pull ssh://gerrit.ovirt.org:29418/samples-uiplugins refs/changes/37/27437/1 diff --git a/gluster-nagios-monitoring/src/css/dashboard.css b/gluster-nagios-monitoring/src/css/dashboard.css index 67747f5..c7117c8 100644 --- a/gluster-nagios-monitoring/src/css/dashboard.css +++ b/gluster-nagios-monitoring/src/css/dashboard.css @@ -4,4 +4,45 @@ .nav, .pagination, .carousel, .panel-title a { cursor: pointer; +} + +.trends-panel { + width: 100%; + height: 100px; + background-color: #E6E6FA; +} + +.trends-search-panel { + width: 900px; + margin: 0 auto; +} + +.datetime-panel { + padding-left: 10px; + width: 370px; + float: left; +} + +.range-label { + padding-top: 40px; + padding-right: 10px; + float: left; +} + +.date-panel { + padding-top: 35px; + width: 150px; + float: left; +} + +.time-panel { + padding-left: 10px; + width: 150px; + float: left; +} + +.action-panel { + padding-top: 35px; + width: 120px; + float: left; } \ No newline at end of file diff --git a/gluster-nagios-monitoring/src/trendsTab.html b/gluster-nagios-monitoring/src/trendsTab.html index 123c0a3..754651d 100644 --- a/gluster-nagios-monitoring/src/trendsTab.html +++ b/gluster-nagios-monitoring/src/trendsTab.html @@ -1,7 +1,9 @@ -<!doctype html> +<!DOCTYPE html> <html ng-app="plugin.trendsTab"> <head> <meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<link href="css/dashboard.css" rel="stylesheet"/> <script src="lib/angular/js/angular.js"></script> <script src="lib/ui-bootstrap-tpls-0.10.0.js"></script> <script src="js/trends.js"></script> @@ -24,72 +26,53 @@ </style> </head> <body ng-controller="tabController"> -<div class="noPrint"> -<div id="header" style = "width: 100%;height: 90%;background-color: #E6E6FA ;text-align:center;"> - <div id="padding-left" style="width: 12%; float: left;visibility: hidden;">''</div> - <div style="float: left; width:30%;"> - <div style="overflow: visible;text-align: center;"> - <label style="padding-top: 3%">Trends Start</label> - <div id="startDateAndTime" ng-controller="startDateTimeController" > - <div style="width: 54%; padding-top: 9.5%; float: left;"> - <div> - <p class="input-group"> + <div class="trends-panel"> + <div class="trends-search-panel"> + + <div id="startDateAndTime" class="datetime-panel" ng-controller="startDateTimeController" > + <div class="range-label">From</div> + <div class="date-panel"> + <p class="input-group"> <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="startdt" is-open="opened" max="max-date" datepicker-options="dateOptions" ng-required="true" close-text="Close"/> - <span class="input-group-btn"> - <button class="btn btn-default" ng-click="open($event)"> + <span class="input-group-btn"> + <button class="btn btn-default" ng-click="open($event)"> <i class="glyphicon glyphicon-calendar"></i> - </button> - </span> - </p> - </div> + </button> + </span> + </p> </div> - <div id="startDateTimePadding" style="width: 2%;float: left;visibility: hidden;"> ''</div> - <div ng-model="mytime" ng-change="changed()" style="display: inline-block; float: left;width: 44%;"> - <timepicker hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker> + <div class="time-panel"> + <timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker> </div> </div> - </div> - </div> - <div id="datesPadding" style="width:2.5%;float: left;visibility: hidden;">''</div> - <div style="float: left; width:30%;"> - <div style="overflow: visible;text-align: center;"> - <label style="padding-top: 3%">Trends End</label> - <div id="stopDateAndTime" ng-controller="stopDateTimeController"> - <div style="width: 54%; padding-top: 9.5%; float: left;"> - <div> - <p class="input-group"> - <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="stopdt" is-open="opened" max="max-date" min = "min-date" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> - <span class="input-group-btn"> - <button class="btn btn-default" ng-click="open($event)"> - <i class="glyphicon glyphicon-calendar"></i> - </button> - </span> - </p> - </div> + + <div id="stopDateAndTime" class="datetime-panel" ng-controller="stopDateTimeController"> + <div class="range-label">To</div> + <div class="date-panel"> + <p class="input-group"> + <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="stopdt" is-open="opened" max="max-date" min = "min-date" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> + <span class="input-group-btn"> + <button class="btn btn-default" ng-click="open($event)"> + <i class="glyphicon glyphicon-calendar"></i> + </button> + </span> + </p> </div> - <div id="stopDateTimePadding" style="width: 2%;float: left;visibility: hidden;"> ''</div> - <div ng-model="mytime" ng-change="changed()" style="display: inline-block; float: left;width: 44%;"> - <timepicker hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker> + <div class="time-panel"> + <timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker> </div> </div> + + <div class="action-panel"> + <button class="btn btn-default" ng-click="getCustomGraphs()">Submit</button> + <img src="images/refresh.png" style="height: 18px;" ng-click="refresh()"/> + <img src="images/print.png" style=" height: 22px;" ng-click="exportToPdf()"/> + <div> </div> - </div> - <div id="dateActionPadding" style="width: 5%;"></div> - <div style="padding-top: 6.5%; float: left; width:6%;"> - <button style="height: 37%;" ng-click="getCustomGraphs()">Submit</button> - </div> - <!-- <div style="width:2%;"></div>--> - <div id="graphActions" style="float: left; padding-top: 6.5%;width:10%;"> - <div> - <img src="images/refresh.png" style="height: 18px;" ng-click="refresh()"/> - <img src="images/print.png" style=" height: 22px;" ng-click="exportToPdf()"/> - </div> - </div> - </div> </div> <div class = "printButDontShow">Time Range : {{start}} to {{stop}}</div> <div align="center"> - <img style="padding-top: 9px; padding-left: 10px" ng-repeat="graph in graphs" ng-src="{{graph}}" /> + <img style="padding-top: 9px; padding-left: 10px" ng-repeat="graph in graphs" ng-src="{{graph}}"/> </div> </body> </html> -- To view, visit http://gerrit.ovirt.org/27437 To unsubscribe, visit http://gerrit.ovirt.org/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I1064546318c7d65219461964dde174844ab41a55 Gerrit-PatchSet: 1 Gerrit-Project: samples-uiplugins Gerrit-Branch: master Gerrit-Owner: Kanagaraj M <[email protected]> _______________________________________________ Engine-patches mailing list [email protected] http://lists.ovirt.org/mailman/listinfo/engine-patches
