Adjustments on URLs list tiles

Hide badge if alerts= 0 Link to response time in gray
hawkular · Dec 30, 2015 · 493084f · 493084f
1 parent d1dc775
commit 493084f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/console/src/main/scripts/plugins/metrics/html/directives/url-list/item.html b/console/src/main/scripts/plugins/metrics/html/directives/url-list/item.html
@@ -3,8 +3,8 @@
     <div class="tile-content">
       <div class="text-right hk-tile-alert">
         <a href="{{vm.getAlertUrl(resource.id)}}">
-          <span ng-if="vm.alerts.length === 0" class="label label-default hk-label-small">0</span>
-          <span ng-if="vm.alerts.length > 0" class="label label-danger hk-label-small">{{vm.alerts.length}}</span>
+          <span ng-if="vm.alerts.length === 0" class="badge"></span>
+          <span ng-if="vm.alerts.length > 0" class="badge hk-bg-danger">{{vm.alerts.length}}</span>
         </a>
       </div>
       <div class="hk-tile-title">{{resource.properties.url}}</div>

diff --git a/console/src/main/scripts/plugins/metrics/less/metrics.less b/console/src/main/scripts/plugins/metrics/less/metrics.less
@@ -221,6 +221,10 @@ a:hover {
   color: @brand-success;
 }
 
+.hk-bg-danger {
+  background-color: @brand-danger;
+}
+
 
 // Alerts
 
@@ -1899,6 +1903,7 @@ td .fa-comment-o {
   }
 
   .tile {
+    height: 300px;
     margin: 10px 0;
     position: relative;
     width: 100%;
@@ -1977,6 +1982,14 @@ h2 + .tiles-view-pf {
 
 .hk-tile-info {
   font-size: ceil(@font-size-base + 1);
+
+  a:not(:hover) {
+    color: @gray;
+  }
+}
+
+.chart-pf-sparkline + .hk-tile-info {
+  margin-top: 5px;
 }
 
 .tile-content img {
@@ -2012,7 +2025,7 @@ h2 + .tiles-view-pf {
   border-radius: 1px;
 //   border: 1px solid #bdbdbd;
   border: none;
-  box-shadow: 0 0 5px rgba(0,0,0,0.3);
+  box-shadow: 0 0 10px rgba(0,0,0,0.3);
   color: #333333;
   opacity: 0.95;
   padding: 15px 20px 15px 71px;
@@ -2027,7 +2040,7 @@ h2 + .tiles-view-pf {
 }
 
 #toast-container > div:hover {
-  box-shadow: 0 0 5px rgba(0,0,0,0.5);
+  box-shadow: 0 0 10px rgba(0,0,0,0.5);
 }
 
 #toast-container > .toast-success {
@@ -2087,6 +2100,7 @@ h2 + .tiles-view-pf {
   }
 }
 
+
 // Wizard
 
 .hk-wizard {