Toggle details by click to reduce noise

ui/app/css/main.css

@@ -44,6 +44,10 @@ header #logo {
 	min-width: 400px;
 }
 
+.silence .labels, .alert-item .labels {
+	cursor: pointer;
+}
+
 .silence .delete-button, .alert-item .silence-button {
 	opacity: 0.2;
 }
@@ -51,17 +55,13 @@ header #logo {
 	opacity: 1.0;
 }
 
-.silence .labels, .alert-item .labels {
+.silence .overview, .alert-item .overview {
 	background: #bfbfbf;
 	padding: .8em;
 }
 .silence .detail, .alert-item .detail {
 	background: #fff;
 	padding: .8em;
-	display: none;
-}
-.silence:hover .detail, .alert-item:hover .detail {
-	display: block;
 }
 
 .silence-matchers {
@@ -107,6 +107,11 @@ header #logo {
 .lbl-highlight {
 	background: #e6522c;
 }
+.lbl-outline {
+	color: #555 !important;
+	background: rgba(255, 255, 255, 0.5) !important;
+	border: 1px solid #555 !important;
+}
 
 .list-item .container-right {
 	border-left: 650px solid #777;
@@ -130,12 +135,13 @@ header #logo {
 .route-header {
 	border-bottom: 1px solid #fff;
 	padding: .5em .6em;
-	background: #f0f0f0;
+	background: rgba(47, 119, 209, .4);
 }
 
 .alert-group-header {
 	border-bottom: 1px solid #fff;
 	background: rgba(47, 119, 209, .4);
+	background: #f0f0f0;
 	padding: .5em .6em;
 }
 

ui/app/js/app.js

@@ -190,6 +190,12 @@ angular.module('am.controllers').controller('NavCtrl',
 
 angular.module('am.controllers').controller('AlertCtrl',
   function($scope) {
+    $scope.showDetails = false;
+
+    $scope.toggleDetails = function() {
+      $scope.showDetails = !$scope.showDetails
+    }
+
     $scope.showSilenceForm = false;
 
     $scope.toggleSilenceForm = function() {
@@ -236,6 +242,12 @@ angular.module('am.controllers').controller('AlertsCtrl',
 angular.module('am.controllers').controller('SilenceCtrl',
   function($scope, Silence) {
 
+    $scope.showDetails = false;
+
+    $scope.toggleDetails = function() {
+      $scope.showDetails = !$scope.showDetails
+    }
+
     $scope.delete = function(sil) {
       Silence.delete({id: sil.id},
         function(data) {

ui/app/partials/alert.html

@@ -1,10 +1,12 @@
 <div class="alert-item" ng-controller="AlertCtrl">
-	<div class="labels">
-		<span ng-repeat="(name, value) in a.labels | orderBy:name">
-			<span class="lbl {{ name == 'alertname' ? 'lbl-highlight' : '' }}" outline>
-				{{ name }} = '{{ value }}'
+	<div class="overview group">
+		<div class="labels left" ng-click="toggleDetails()">
+			<span ng-repeat="(name, value) in a.labels | orderBy:name">
+				<span class="lbl {{ name == 'alertname' ? 'lbl-highlight' : '' }}" outline>
+					{{ name }} = '{{ value }}'
+				</span>
 			</span>
-		</span>
+		</div>
 
 		<div class="right">
 			<button class="silence-button" type="secondary" ng-click="toggleSilenceForm()" small upper>Silence</button>
@@ -15,7 +17,7 @@
 		<silence-form silence="silence"></silence-form>
 	</div>
 
-	<div class="detail group">
+	<div class="detail group" ng-show="showDetails">
 		<table class="table-flat">
 			<tbody>
 				<tr>

ui/app/partials/route.html

@@ -4,7 +4,7 @@
 			<span ng-repeat="l in route.routeOpts.groupBy" class="lbl">{{ l }}</span>
 		</div> -->
 		<div class="route-matchers left">
-			<span ng-repeat="m in route.matchers" class="lbl">
+			<span ng-repeat="m in route.matchers" class="lbl lbl-outline">
 				{{ m.name }} =<span ng-show="m.isRegex">~</span> '{{ m.value }}'
 			</span>
 		</div>
@@ -12,7 +12,7 @@
 	<div class="alert-groups">
 		<div class="alert-group" ng-repeat="group in route.groups">
 			<div class="alert-group-header group">
-				<span ng-repeat="(ln, lv) in group.labels" class="lbl">
+				<span ng-repeat="(ln, lv) in group.labels" class="lbl lbl-outline">
 					{{ ln }} = '{{ lv }}'
 				</span>
 			</div>

ui/app/partials/silence.html

@@ -1,10 +1,12 @@
 <div class="silence" ng-controller="SilenceCtrl">
-	<div class="labels">
-		<span ng-repeat="m in sil.matchers | orderBy:name">
-			<span class="lbl {{ m.name == 'alertname' ? 'lbl-highlight' : '' }}">
-				{{ m.name }} =<span ng-show="m.isRegex">~</span> '{{ m.value }}'
+	<div class="overview group">
+		<div class="labels left" ng-click="toggleDetails()">
+			<span ng-repeat="m in sil.matchers | orderBy:name">
+				<span class="lbl {{ m.name == 'alertname' ? 'lbl-highlight' : '' }}">
+					{{ m.name }} =<span ng-show="m.isRegex">~</span> '{{ m.value }}'
+				</span>
 			</span>
-		</span>
+		</div>
 
 		<div class="right">
 			<button type="black" disabled small>Until {{ sil.endsAt | amCalendar }}</button>
@@ -12,7 +14,7 @@
 		</div>
 	</div>
 
-	<div class="detail group">
+	<div class="detail group" ng-show="showDetails">
 		<table class="table-flat">
 			<tbody>
 				<tr ng-show="sil.createdBy">