Aligning charts to the center of the containers

hawkular · Jul 31, 2015 · 40d999f · 40d999f
1 parent da9a713
commit 40d999f
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 47 deletions.
diff --git a/console/src/main/scripts/plugins/metrics/html/app-details/detail-datasources.html b/console/src/main/scripts/plugins/metrics/html/app-details/detail-datasources.html
@@ -58,16 +58,16 @@ <h3 class="pull-left">Metrics</h3>
 
       <div class="panel panel-default hk-graph" ng-if="vm.chartAvailData[ds.id][2]">
         <h2>Availability</h2>
-        <div class="metrics-chart">
+        <div class="hk-graph-container hk-graph-metrics">
           <hawkular-chart
               multi-data="{{vm.chartAvailData[ds.id]}}"
               chart-type="multiline"
               y-axis-units="Availability (#)"
               chart-height="250">
           </hawkular-chart>
         </div>
-        <div class="row hk-legend hk-legend-inline text-left">
-          <div class="col-md-7 col-lg-6">
+        <div class="row hk-legend hk-legend-inline text-left hk-legend-metrics">
+          <div class="col-md-12">
             <h4>Connection Availability</h4>
             <div class="hk-graphselector hk-blue">
               <input type="checkbox" checked="checked" disabled>
@@ -87,16 +87,16 @@ <h4>Connection Availability</h4>
 
       <div class="panel panel-default hk-graph" ng-if="vm.chartRespData[ds.id][1]">
         <h2>Responsiveness</h2>
-        <div class="metrics-chart">
+        <div class="hk-graph-container hk-graph-metrics">
           <hawkular-chart
               multi-data="{{vm.chartRespData[ds.id]}}"
               chart-type="multiline"
               y-axis-units="Responsiveness (ms)"
               chart-height="250">
           </hawkular-chart>
         </div>
-        <div class="row hk-legend hk-legend-inline text-left">
-          <div class="col-md-7 col-lg-6">
+        <div class="row hk-legend hk-legend-inline text-left hk-legend-metrics">
+          <div class="col-md-12">
             <h4>Responsiveness</h4>
             <div class="hk-graphselector hk-yellow">
               <input type="checkbox" checked="checked" disabled>

diff --git a/console/src/main/scripts/plugins/metrics/html/app-details/detail-jvm.html b/console/src/main/scripts/plugins/metrics/html/app-details/detail-jvm.html
@@ -59,7 +59,7 @@ <h3 class="pull-left">Metrics</h3>
 
   <div class="panel panel-default hk-graph" ng-if="vm.chartHeapData[0]">
     <h2>JVM Heap Usage</h2>
-    <div class="metrics-chart">
+    <div class="hk-graph-container hk-graph-metrics">
       <!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
       <hawkular-chart
           multi-data="{{vm.chartHeapData}}"
@@ -68,7 +68,7 @@ <h2>JVM Heap Usage</h2>
           chart-height="250">
       </hawkular-chart>
     </div>
-    <div class="hk-legend text-left">
+    <div class="hk-legend text-left hk-legend-metrics">
       <span><i class="fa fa-circle hk-blue"></i>Used</span>
       <span><i class="fa fa-circle hk-orange"></i>Maximum</span>
       <span><i class="fa fa-circle hk-gray"></i>Commited</span>
@@ -77,7 +77,7 @@ <h2>JVM Heap Usage</h2>
 
   <div class="panel panel-default hk-graph" ng-if="vm.chartNonHeapData[0]">
     <h2>Non Heap Usage</h2>
-    <div class="metrics-chart">
+    <div class="hk-graph-container hk-graph-metrics">
       <!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
       <hawkular-chart
           multi-data="{{vm.chartNonHeapData}}"
@@ -86,15 +86,15 @@ <h2>Non Heap Usage</h2>
           chart-height="250">
       </hawkular-chart>
     </div>
-    <div class="hk-legend text-left">
+    <div class="hk-legend text-left hk-legend-metrics">
       <span><i class="fa fa-circle hk-blue"></i>Used</span>
       <span><i class="fa fa-circle hk-gray"></i>Commited</span>
     </div>
   </div>
 
   <div class="panel panel-default hk-graph" ng-if="vm.chartNonHeapData[0]">
     <h2>Accumulated GC Duration</h2>
-    <div class="metrics-chart">
+    <div class="hk-graph-container hk-graph-metrics">
       <!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
       <hawkular-chart
         data="{{vm.chartGCDurationData}}"
@@ -106,7 +106,7 @@ <h2>Accumulated GC Duration</h2>
         chart-height="250">
       </hawkular-chart>
     </div>
-    <div class="hk-legend text-left">
+    <div class="hk-legend text-left hk-legend-metrics">
     </div>
   </div>
 

diff --git a/console/src/main/scripts/plugins/metrics/html/app-details/detail-web.html b/console/src/main/scripts/plugins/metrics/html/app-details/detail-web.html
@@ -54,7 +54,7 @@ <h3 class="pull-left">Metrics</h3>
 
   <div class="panel panel-default hk-graph" >
     <h2>Web Sessions</h2>
-    <div class="metrics-chart">
+    <div class="hk-graph-container hk-graph-metrics">
       <!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
       <hawkular-chart
         multi-data="{{vm.chartWebSessionData}}"
@@ -63,7 +63,7 @@ <h2>Web Sessions</h2>
         chart-height="250">
       </hawkular-chart>
     </div>
-    <div class="hk-legend text-left">
+    <div class="hk-legend text-left hk-legend-metrics">
       <span><i class="fa fa-circle hk-green"></i>Active Sessions</span>
       <!--<span><i class="fa fa-circle hk-blue"></i>Max Active Sessions</span>-->
       <span><i class="fa fa-circle hk-orange"></i>Expired Sessions</span>

diff --git a/console/src/main/scripts/plugins/metrics/html/availability.html b/console/src/main/scripts/plugins/metrics/html/availability.html
@@ -56,7 +56,7 @@ <h3 class="pull-left" data-toggle="tooltip" data-placement="top" title="" data-o
         <button class="btn btn-link hk-trigger" ng-click="showAllAlerts = !showAllAlerts"><i class="fa"
                                                                                              ng-show="vm.alertList.length > 0"
                                                                                              ng-class="showAllAlerts ? 'fa-minus-square-o' : 'fa-plus-square-o'"></i>
-          Alerts <span ng-show="vm.alertList.length > 0">({{showAllAlerts ? vm.alertList.length : MetricsAvailabilityController.min(vm.alertList.length, 3)}} of {{vm.alertList.length}})</span>
+          Availability Alerts <span ng-show="vm.alertList.length > 0">({{showAllAlerts ? vm.alertList.length : MetricsAvailabilityController.min(vm.alertList.length, 3)}} of {{vm.alertList.length}})</span>
         </button>
       </h3>
       <span class="hk-settings pull-right"><a href="#" ng-controller="MetricsAlertController as mac"
@@ -87,12 +87,14 @@ <h3 class="pull-left">Metrics</h3>
 
     <div class="panel panel-default hk-graph">
       <h2>Availability</h2>
-      <availability-chart
-        start-timestamp="{{vm.startTimeStamp}}"
-        end-timestamp="{{vm.endTimeStamp}}"
-        data="{{vm.availabilityDataPoints}}" >
-      </availability-chart>
-      <div class="hk-legend text-left hk-availability">
+      <div class="hk-graph-container hk-graph-availability">
+        <availability-chart
+          start-timestamp="{{vm.startTimeStamp}}"
+          end-timestamp="{{vm.endTimeStamp}}"
+          data="{{vm.availabilityDataPoints}}" >
+        </availability-chart>
+      </div>
+      <div class="hk-legend text-left hk-legend-availability">
         <span><span class="hk-legend-square hk-green"></span>Available</span>
         <span><span class="hk-legend-square hk-red"></span>Down</span>
         <span><span class="hk-legend-square hk-gray-light"></span>Unknown</span>

diff --git a/console/src/main/scripts/plugins/metrics/html/response-time.html b/console/src/main/scripts/plugins/metrics/html/response-time.html
@@ -42,7 +42,7 @@ <h3 class="pull-left">Response Time Status</h3>
       <h3 class="pull-left" data-toggle="tooltip" data-placement="top" title="" data-original-title="Expand/collapse">
         <button class="btn btn-link hk-trigger" ng-click="showAllAlerts = !showAllAlerts">
           <i class="fa" ng-show="vm.alertList.length > 0" ng-class="showAllAlerts ? 'fa-minus-square-o' : 'fa-plus-square-o'"></i>
-          Alerts <span ng-show="vm.alertList.length > 0">({{showAllAlerts ? vm.alertList.length : MetricsViewController.min(vm.alertList.length, 3)}} of {{vm.alertList.length}})</span></button>
+          Response Time Alerts <span ng-show="vm.alertList.length > 0">({{showAllAlerts ? vm.alertList.length : MetricsViewController.min(vm.alertList.length, 3)}} of {{vm.alertList.length}})</span></button>
       </h3>
       <span class="hk-settings pull-right"><a href="#" ng-controller="MetricsAlertController as mac" ng-click="mac.openSetup()"><i class="fa fa-cog"></i>Alert Settings</a></span>
     </div>
@@ -71,7 +71,7 @@ <h2>Response Time</h2>
         <div class="spinner spinner-lg"></div>
       </div>
 
-      <div class="metrics-chart">
+      <div class="hk-graph-container hk-graph-metrics">
         <!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
         <hawkular-chart
           data="{{vm.chartData.dataPoints}}"
@@ -83,7 +83,7 @@ <h2>Response Time</h2>
         </hawkular-chart>
       </div>
 
-      <div class="hk-legend text-left hk-response-time" ng-show="vm.chartData.dataPoints.length > 0">
+      <div class="hk-legend text-left hk-legend-metrics" ng-show="vm.chartData.dataPoints.length > 0">
         <span><i class="fa fa-circle hk-blue"></i>Response Time</span>
         <span><i class="fa fa-circle hk-red"></i>Threshold</span>
         <span><span class="hk-legend-square hk-red-light"></span>Interval above the threshold</span>

diff --git a/console/src/main/scripts/plugins/metrics/less/metrics.less b/console/src/main/scripts/plugins/metrics/less/metrics.less
@@ -660,7 +660,7 @@ a:hover .fa-spinner {
   margin-top: @grid-gutter-width/2;
 }
 
-// alert settings modal
+// alert settings modals
 
 .modal-body fieldset p {
   margin-top: -10px;
@@ -742,6 +742,11 @@ a:hover .fa-spinner {
   }
 }
 
+.modal-backdrop {
+  width: 100%!important;
+}
+
+
 // on off switch
 
 .onoffswitch {
@@ -846,22 +851,70 @@ a:hover .fa-spinner {
     margin-bottom: 5px;
   }
 
+  .hk-graph-container  {
+    margin: 0 auto;
+    width: 750px;
+
+    &.hk-graph-availability svg { /* top 40px, bottom 30px, align center */
+      margin-bottom: -18px;
+      margin-left: -24px;
+      margin-top: -3px;
+    }
+
+    &.hk-graph-metrics {
+      height: 262px;
+
+      svg {
+        margin-bottom: -13px;
+        margin-left: -5px;
+        margin-top: -14px;
+      }
+    }
+
+    &.hk-graph-jvm {
+      height: 262px;
+
+      svg {
+        margin-bottom: -13px;
+        margin-left: -5px;
+        margin-top: -14px;
+      }
+    }
+  }
+
   .hk-spinner-container {
     margin-bottom: @grid-gutter-width/4*5;
     margin-top: @grid-gutter-width*1.5;
   }
 
   .hk-legend {
     font-size: ceil(@font-size-base - 1);
+    margin-bottom: 10px;
     margin-left: 38px;
     margin-top: 15px;
 
-    &.hk-availability {
-      margin-left: 47px;
+    &.hk-legend-availability {
+      margin-left: 248px;
+
+      @media (max-width: @screen-md-max) {
+        margin-left: 148px;
+      }
+    }
+
+    &.hk-legend-metrics {
+      margin-left: 270px;
+
+      @media (max-width: @screen-md-max) {
+        margin-left: 170px;
+      }
     }
 
-    &.hk-response-time {
-      margin-left: 57px;
+    &.hk-legend-inline {
+      margin-top: 8px;
+
+      > div {
+        padding-left: 0;
+      }
     }
 
     span {
@@ -1177,25 +1230,8 @@ section {
 }
 
 
-// modal
-
-.modal-backdrop {
-  width: 100%!important;
-}
-
-
 // dev styles
 
-// metrics response
-
-#metric-chart-container {
-  width: 800px;
-}
-
-.metrics-chart {
-  height: 270px;
-}
-
 // bootstrap select quick&dirty workaround
 
 .hk-alerts {
@@ -1292,4 +1328,4 @@ section {
 #toast-container > .toast-error:after {
   content: "";
   color: #cc0000;
-}
+}