alertmanager/ui/app/partials/alerts.html

<div id="alert-query" class="forms">
	<row>
		<column cols="5">
			<input type="search" placeholder="search" ng-model="query">
		</column>
		<column cols="2">
			<select class="select" ng-model="order">
				<option value="startsAt">start</option>
				<option value="endsAt">end</option>
			</select>
		</column>
	</row>
</div>

<div ng-show="alerts.length == 0">No alerts found</div>

<div ng-hide="alerts.length == 0" id="alerts-list">

	<div class="list-item group" ng-repeat="a in alerts | filter:query | orderBy:order">
		<div class="container-left">
			<div class="active-interval">
				<span class="date">{{ a.startsAt | date:'yyyy-MM-dd' }},</span> <span class="time">{{ a.startsAt | date:'HH:mm' }}</span>
				– 
				<span ng-hide="a.endsAt.getTime() == 0">
					<span class="date">{{ a.endsAt | date:'yyyy-MM-dd' }},</span> <span class="time">{{ a.endsAt | date:'HH:mm' }}</span>
				</span>
				<span ng-show="a.endsAt.getTime() == 0">
					<span class="time">now</span>
				</span>
			</div>
			<span class="label-matcher label label-white" outline ng-repeat="(name, value) in a.labels | orderBy:name">
				{{ name }} = '{{ value }}'
			</span>
		</div>
		<div class="container-right group">
			<div class="left">
				<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="whitespace: pre-wrap;">{{ val }}</td>
						</tr>
					</tbody>
				</table>
			</div>

			<div class="right">
				<button type="secondary" ng-click="silence(a)" small>Silence</button>
			</div>
		</div>
	</div>

</div>