bosun.org@v0.0.0-20210513094433-e25bc3e69a1f/cmd/bosun/web/static/partials/alertstate.html

<div class="panel-heading" ng-class="panelClass(currentStatus)+'-box'" ng-click="toggle()">
	<h4 class="panel-title">
		<a href>
			<span title="This exclamation icon represents that the alert is in an active (non-normal) state." class="fa" ng-class="{'fa-exclamation-circle': state.last.Status && state.last.Status != 'normal'}"></span>
			<span title="This mute icon represents that the alert has been silenced." class="fa" ng-class="{'fa-volume-off': child.Silenced}"></span>
			<span title="This question mark icon represents that the alert is in an unevaluated state. Alerts are unevaluated when a dependency is active." class="fa" ng-class="{'fa-question-circle': state.Unevaluated}"></span>
			<span title="This clock icons represents that the alert is in a delayed close. The alert will be closed if it goes to normal before the deadline, and forced close if the alert is still active by the end of the dealine." class="fa" ng-class="{'fa-clock-o': state.IsPendingClose()}"></span>
			<a ng-href="errorHistory?alert={{encode(state.Alert)}}">
				<span title="This fire icon represents that the alert has an underlying error. Errors come from things like a time series database issue or a malformed query." class="fa" ng-class="{'fa-fire': child.IsError}"></span>
			</a>
			<span ng-show="state.Id">#{{state.Id}}:</span>
			<span ng-bind="child.Subject || child.AlertKey"></span>
			
			<span class="pull-right" ng-show="child.Ago" ts-since="child.Ago"></span>
		</a>
	</h4>
</div>
<div class="panel-body" ng-if="show">
	<div class="row">
		<div class="col-sm-6">
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Alert Key:</strong></p>
				</div>
				<div class="col-sm-9">
					<span ng-bind="zws(name)" />
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p><strong>State:</strong></p>
				</div>
				<div class="col-sm-9">
					<span ng-bind="state.last.Status" /> since <span ts-time="state.last.Time"/>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Views:</strong></p>
				</div>
				<div class="col-sm-9">
					<a ng-href="/history?key={{encode(name)}}">Full History</a>,
					<a ng-href="{{state.RuleUrl}}">Rule Editor</a>,
					<a ng-href="/expr?expr={{btoa(state.Expr)}}">Expression</a>,
					<a ng-href="/incident?id={{state.Id}}">Incident (#<span ng-bind="state.Id"/>)</a>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Previous Incidents ({{ state.PreviousIds ? state.PreviousIds.length : 0 }}):</strong></p>
				</div>
				<div class="col-sm-9">
					<a ng-repeat="id in state.PreviousIds | limitTo:5" ng-href="/incident?id={{encode(id)}}">#{{id}} </a>
					<p ng-hide="state.PreviousIds">None</p>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Silence:</strong></p>
				</div>
				<div class="col-sm-9">
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=1h&alert={{state.Alert}}&tags={{encode(state.Tags)}}">1 hour</a>
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=2h&alert={{state.Alert}}&tags={{encode(state.Tags)}}">2 hours</a>
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=6h&alert={{state.Alert}}&tags={{encode(state.Tags)}}">6 hours</a>
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=12h&alert={{state.Alert}}&tags={{encode(state.Tags)}}">12 hours</a>
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=24h&alert={{state.Alert}}&tags={{encode(state.Tags)}}">24 hours</a>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Actions:</strong></p>
				</div>
				<div class="col-sm-9">
					<ts-note></ts-note>
					<ts-ack></ts-ack>
					<ts-close></ts-close>
					<ts-force-close></ts-force-close>
					<ts-cancel-close ng-if="state.IsPendingClose()"></ts-cancel-close>
					<ts-forget ng-if="group.Status == 'unknown'"></ts-forget>
					<ts-purge></ts-purge>
				</div>
			</div>
			<div class="row" ng-show="state.LastAction">
				<div class="col-sm-3">
					<p><strong>Last Action:</strong></p>
				</div>
				<div class="col-sm-9">
					{{state.LastAction.Type}}
					<span ng-show="state.LastAction.User">by {{state.LastAction.User}}</span>
					at <span ts-time="state.LastAction.Time"></span>
					<span ng-show="state.LastAction.Message">: {{state.LastAction.Message}}</span>
				</div>
			</div>
		</div>
	</div>
	<div class="row" ng-if="state.Body">
		<div class="col-sm-12">
			<hr/>
		</div>
		<div class="col-sm-12" ng-bind-html="state.Body"></div>
	</div>
</div>