Show firing duration

ui/app/css/main.css

@@ -131,24 +131,12 @@ header #logo {
 	font-style: italic;
 }
 
-
-.route {
-	border-left: 1px dotted #c0c0c0;
-	background: #fff;
-}
-.route .route {
-	margin: 0 0 0 1.5em;
-}
-
-.route-header {
-	border-bottom: 1px solid #fff;
-	padding: .5em .6em;
-	background: rgba(47, 119, 209, .4);
+.silence-alert {
+	background: #f0f0f0;
 }
 
 .alert-group-header {
 	border-bottom: 1px solid #fff;
-	background: rgba(47, 119, 209, .4);
 	background: #f0f0f0;
 	padding: .5em .6em;
 }

ui/app/js/app.js

@@ -25,7 +25,7 @@ angular.module('am.directives').directive('alert',
       restrict: 'E',
       scope: {
         alert: '=',
-        hiddenLabels: '='
+        group: '='
       },
       templateUrl: '/app/partials/alert.html'
     };

ui/app/partials/alert.html

@@ -2,13 +2,14 @@
 	<div class="overview group">
 		<div class="labels left" ng-click="toggleDetails()">
 			<span ng-repeat="(name, value) in alert.labels | orderBy:name">
-				<span ng-hide="hiddenLabels.indexOf(name) >= 0" class="lbl {{ name == 'alertname' ? 'lbl-highlight' : '' }}" outline>
+				<span ng-hide="group[name]" class="lbl {{ name == 'alertname' ? 'lbl-highlight' : '' }}">
 					{{ name }} = '{{ value }}'
 				</span>
 			</span>
 		</div>
 
 		<div class="right">
+			<button type="black" disabled small>Since {{ alert.startsAt | amCalendar }}</button>
 			<button class="silence-button" type="secondary" ng-click="toggleSilenceForm()" small upper>Silence</button>
 		</div>
 	</div>
@@ -49,26 +50,4 @@
 			</tbody>
 		</table>
 	</div>
-
-	<!-- <div class="container-right group">
-		<div class="right">
-			<button type="secondary" ng-click="toggleSilenceForm()" small>Silence</button>
-		</div>
-		
-		<div class="left">
-			<silence-form ng-show="showSilenceForm" silence="silence"></silence-form>
-
-			Details: <input class="collapse" ng-class="{open:collapse}" type="checkbox" ng-model="collapse"></input>
-			<div class="left" ng-show="collapse">
-				<table class="table-flat">
-					<tbody>
-						<tr ng-repeat="(name, val) in a.annotations | orderBy:name">
-							<td style="padding-right: 3em"><em>{{ name }}</em></td>
-							<td style="white-space: pre-line;">{{ val }}</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div> -->
 </div>

ui/app/partials/alerts.html

@@ -7,7 +7,7 @@
 <div id="alert-groups" ng-controller="AlertsCtrl">
 	<div ng-repeat="group in groups">
 		<div class="alert-group-header group">
-			<span ng-repeat="(ln, lv) in group.labels" class="lbl lbl-outline">
+			<span ng-repeat="(ln, lv) in group.labels" class="lbl {{ ln == 'alertname' ? 'lbl-highlight' : 'lbl-outline' }}">
 				{{ ln }} = '{{ lv }}'
 			</span>
 		</div>	
@@ -15,7 +15,7 @@
 		<div ng-repeat="g in group.groups">
 			<div ng-show="destinations.indexOf(g.routeOpts.sendTo) >= 0" class="alert-group" ng-show"g.alerts">
 				<div ng-repeat="a in g.alerts">
-					<alert class="list-item" alert="a" hiddenLabels="Object.keys(group.labels)"></alert>
+					<alert class="list-item" alert="a" group="group.labels"></alert>
 				</div>
 			</div>
 		</div>

ui/app/partials/route.html

@@ -1,8 +1,5 @@
 <div class="route">
 	<div class="route-header group">
-		<!-- <div class="grouping-labels right">
-			<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 lbl-outline">
 				{{ m.name }} =<span ng-show="m.isRegex">~</span> '{{ m.value }}'