Merge pull request #266 from cardosogabriel/master

HAWKULAR-377 Legend for availability, legends alignment

ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/app-details/detail-jvm.html

@@ -57,7 +57,7 @@ <h3 class="pull-left">Metrics</h3>
 
   <div class="panel panel-default hk-graph">
     <h2>JVM Heap Usage</h2>
-    <div class="hk-legend pull-left">
+    <div class="hk-legend text-left">
       <span><i class="fa fa-circle hk-primary"></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>

ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/availability.html

@@ -71,7 +71,11 @@ <h2>Availability</h2>
               data="{{vm.availabilityDataPoints}}"
               chart-type="availability">
       </availability-chart>
-
+      <div class="hk-legend text-left hk-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>Not Available</span>
+      </div>
     </div>
 
 

ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/response-time.html

@@ -64,10 +64,6 @@ <h3 class="pull-left">Metrics</h3>
 
     <div class="panel panel-default hk-graph" ng-if="vm.average >= 0">
       <h2>Response Time</h2>
-      <div class="hk-legend text-left" ng-show="vm.chartData.dataPoints.length > 0">
-        <span><i class="fa fa-circle hk-chart-line-blue"></i>Response Time</span>
-        <span><i class="fa fa-circle hk-alert-lightred"></i>Response Time (above the threshold)</span>
-      </div>
 
       <p class="label label-info waiting-label" ng-hide="vm.chartData.dataPoints.length > 0" >We are
         collecting your initial data. Please be patient(could be up to a minute)...</p>
@@ -83,6 +79,12 @@ <h2>Response Time</h2>
           chart-height="250">
         </hawkular-chart>
       </div>
+
+      <div class="hk-legend text-left hk-response-time" ng-show="vm.chartData.dataPoints.length > 0">
+        <span><i class="fa fa-circle hk-blue"></i>Response Time</span>
+        <span><span class="hk-legend-square hk-red-light"></span>Response Time (above the threshold)</span>
+      </div>      
+
     </div>
 
     <div class="panel panel-default hk-graph" ng-if="vm.average < 0">

ui/console/src/main/scripts/plugins/metrics/plugins/metrics/less/metrics-main.less

@@ -176,15 +176,15 @@ a:hover .fa-spinner {
 
 .table-striped > tbody > tr:nth-child(odd) > td {
   background-color: white;
-
+  
   &.success {
     background-color: #dff0d8;
   }
-
+  
   &.danger {
     background-color: #f2dede;
   }
-
+  
   &.warning {
     background-color: #fcf8e3;
   }
@@ -193,9 +193,9 @@ a:hover .fa-spinner {
 .table-checkbox > tbody > tr:hover > td {
   background-color: #d4edfa;
   cursor: pointer;
-
-  &.success,
-  &.danger,
+  
+  &.success, 
+  &.danger, 
   &.warning {
     background-color: #d4edfa;
   }
@@ -204,13 +204,13 @@ a:hover .fa-spinner {
 .table-striped > tbody > tr.selected > td {
   background-color: @brand-primary;
   color: white;
-
-  &.success,
-  &.danger,
+  
+  &.success, 
+  &.danger, 
   &.warning {
     background-color: @brand-primary;
   }
-
+  
   .fa {
     color: white;
   }
@@ -230,7 +230,7 @@ a:hover .fa-spinner {
       font-size: 20px;
       text-align: center;
       width: 21px;
-
+      
       &.fa-square {
         font-size: 18px;
       }
@@ -250,18 +250,18 @@ a:hover .fa-spinner {
       color: @gray-light;
     }
   }
-
+  
   td.state {
     min-width: 105px;
   }
-
+  
   td.actions {
-
+    
     min-width: 95px;
-
+    
     .dropdown {
       position: absolute;
-      margin-top: -2px;
+      margin-top: -2px; 
     }
   }
 }
@@ -283,12 +283,12 @@ a:hover .fa-spinner {
   top: 46px;
   z-index: 10;
   right: 5px;
-
-  .add,
+  
+  .add, 
   .dropdown {
     display:inline-block;
   }
-
+  
   .add {
     margin-right: 8px;
   }
@@ -310,11 +310,11 @@ a:hover .fa-spinner {
   &.hk-urls-empty {
     margin-top: @grid-gutter-width*4;
   }
-
+  
   &.hk-spinner-container {
     margin-top: @grid-gutter-width*5.5;
   }
-
+  
   .hk-spinner-legend-below {
     color: @gray-light;
     font-size: ceil(@font-size-base + 2);
@@ -530,8 +530,8 @@ a:hover .fa-spinner {
       margin-left: 2px;
       vertical-align: inherit;
     }
-
-    .spinner {
+    
+    &.spinner {
       margin-bottom: 7px;
       margin-top: 5px;
     }
@@ -614,7 +614,7 @@ a:hover .fa-spinner {
       margin-right: 20px;
       min-width: 120px;
     }
-
+    
     .alert-resolver {
       cursor: pointer;
       display: table-cell;
@@ -627,7 +627,7 @@ a:hover .fa-spinner {
       }
 
       .fa-check-square-o {
-
+  
         &:hover {
           color: @link-hover-color;
         }
@@ -829,7 +829,7 @@ a:hover .fa-spinner {
   clear: left;
   padding: @grid-gutter-width/2;
   text-align: center;
-
+  
   h2 {
     font-size: 13px;
     font-weight: 600;
@@ -838,15 +838,21 @@ a:hover .fa-spinner {
 
   .hk-legend {
     font-size: ceil(@font-size-base - 1);
+    margin-left: 38px;
+    margin-top: 15px;
+
+    &.hk-availability {
+      margin-left: 47px;
+    }
+
+    &.hk-response-time {
+      margin-left: 57px;
+    }
 
     span {
       margin-right: @grid-gutter-width/2;
     }
 
-    .fa {
-      font-size: ceil(@font-size-base * 0.75);
-    }
-
     .hk-blue {
       color: @brand-primary;
     }
@@ -874,6 +880,33 @@ a:hover .fa-spinner {
     .hk-yellow {
       color: #d5d026;
     }
+
+    .fa-circle {
+      font-size: ceil(@font-size-base * 0.75);
+    }
+
+    .hk-legend-square {
+      display: inline-block;
+      margin-right: 5px;
+      height: 10px;
+      width: 10px;  
+
+      &.hk-red {
+        background-color: @brand-danger;
+      }
+
+      &.hk-red-light {
+        background-color: #fce6dc;
+      }
+
+      &.hk-gray-light {
+        background-color: #b5b5b5;
+      }
+
+      &.hk-green {
+        background-color: #49a547;
+      }
+    }
 
     &.row {
 
@@ -885,7 +918,7 @@ a:hover .fa-spinner {
       h4 {
         font-size: @font-size-base - 1;
         font-weight: bold;
-
+        
         img {
           margin-left: 5px;
         }
@@ -900,13 +933,13 @@ a:hover .fa-spinner {
         padding-top: ceil(@font-size-base * 1.1);
       }
     }
-
+    
     &.hk-legend-inline {
-
+      
       > div > div {
         display: inline-block;
         margin-right: 30px;
-
+        
         label span {
           margin-right: 0;
         }
@@ -988,15 +1021,10 @@ a:hover .fa-spinner {
       }
     }
   }
-
+  
   > img {
     margin-top: @grid-gutter-width/4;
     width: 100%;
-
-    + .hk-legend {
-      margin-left: 38px;
-      margin-top: 10px;
-    }
   }
 }
 
@@ -1051,9 +1079,9 @@ section {
 }
 
 .hk-info-top {
-
+  
   position: relative;
-
+  
   .hk-settings {
     margin-top: @grid-gutter-width/4;
   }
@@ -1062,7 +1090,7 @@ section {
     margin-top: -7px;
     margin-right: -11px;
   }
-
+  
   + .dataTables_wrapper {
     margin-top: 0;
   }
@@ -1071,28 +1099,28 @@ section {
 // datasources tab
 
 .hk-panel-collapse-area {
-
+  
   border-bottom: 1px solid @table-border-color;
   margin-bottom: 15px;
   margin-top: -19px;
   text-align: center;
   padding: 2px 0 3px 0;
   -webkit-transition: background 0.3s ease;
-  -moz-transition: background 0.3s ease;
-  transition: background 0.3s ease;
-
+	-moz-transition: background 0.3s ease;
+	transition: background 0.3s ease;
+  
   a {
     color: @gray;
-
+    
     &:hover {
       color: @link-hover-color;
     }
-
+    
     .fa {
       margin-left: 5px;
     }
   }
-
+  
   &.hk-collapsed {
     background-color: white;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
@@ -1110,16 +1138,16 @@ section {
   max-height: 650px;
   overflow: hidden;
   -webkit-transition: max-height 0.3s ease;
-  -moz-transition: max-height 0.3s ease;
-  transition: max-height 0.3s ease;
-
+	-moz-transition: max-height 0.3s ease;
+	transition: max-height 0.3s ease;
+  
   &.hide {
     max-height: 0;
   }
 
   .hk-info-top {
     margin-top: -10px;
-
+    
     h3,
     .hk-trigger {
       font-weight: normal;