Skip to content

N
nexpie-grafana-theme
Commit 2eeba9da by Torkel Ödegaard
Options

Updated alert tab layout & markup

parent 168b8c38
Showing with 32 additions and 18 deletions
public/app/features/alerting/AlertTabCtrl.ts
...@@ -115,7 +115,7 @@ export class AlertTabCtrl { ...@@ -115,7 +115,7 @@ export class AlertTabCtrl {
} }
getNotifications() { getNotifications() {
return Promise.resolve( return this.$q.when(
this.notifications.map(item => { this.notifications.map(item => {
return this.uiSegmentSrv.newSegment(item.name); return this.uiSegmentSrv.newSegment(item.name);
}) })
...@@ -148,6 +148,7 @@ export class AlertTabCtrl { ...@@ -148,6 +148,7 @@ export class AlertTabCtrl {
// reset plus button // reset plus button
this.addNotificationSegment.value = this.uiSegmentSrv.newPlusButton().value; this.addNotificationSegment.value = this.uiSegmentSrv.newPlusButton().value;
this.addNotificationSegment.html = this.uiSegmentSrv.newPlusButton().html; this.addNotificationSegment.html = this.uiSegmentSrv.newPlusButton().html;
this.addNotificationSegment.fake = true;
} }
removeNotification(index) { removeNotification(index) {
......
public/app/features/alerting/partials/alert_tab.html
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
</div> </div>
<div class="panel-option-section"> <div class="panel-option-section">
<div class="panel-option-section__body"> <div class="panel-option-section__body">
<div class="section"> <div class="gf-form-group">
<div class="gf-form"> <h4 class="section-heading">Rule</h4>
<div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-6">Name</span> <span class="gf-form-label width-6">Name</span>
<input type="text" class="gf-form-input width-20" ng-model="ctrl.alert.name"> <input type="text" class="gf-form-input width-20" ng-model="ctrl.alert.name">
</div> </div>
<div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-9">Evaluate every</span> <span class="gf-form-label width-9">Evaluate every</span>
<input class="gf-form-input max-width-6" type="text" ng-model="ctrl.alert.frequency"> <input class="gf-form-input max-width-6" type="text" ng-model="ctrl.alert.frequency">
...@@ -32,12 +32,9 @@ ...@@ -32,12 +32,9 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> <div class="gf-form-group">
</div> <h4 class="section-heading">Conditions</h4>
<div class="panel-option-section">
<div class="panel-option-section__header">Conditions</div>
<div class="panel-option-section__body">
<div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels"> <div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
<div class="gf-form"> <div class="gf-form">
<metric-segment-model css-class="query-keyword width-5" ng-if="$index" <metric-segment-model css-class="query-keyword width-5" ng-if="$index"
...@@ -80,6 +77,7 @@ ...@@ -80,6 +77,7 @@
</label> </label>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label dropdown"> <label class="gf-form-label dropdown">
<a class="pointer dropdown-toggle" data-toggle="dropdown"> <a class="pointer dropdown-toggle" data-toggle="dropdown">
...@@ -92,9 +90,15 @@ ...@@ -92,9 +90,15 @@
</ul> </ul>
</label> </label>
</div> </div>
</div>
<div class="gf-form-group"> <div class="gf-form-group">
<h4 class="section-heading">No Data & Error Handling</h4>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-15">If no data or all values are null</span>
</div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-18">If no data or all values are null</span>
<span class="gf-form-label query-keyword">SET STATE TO</span> <span class="gf-form-label query-keyword">SET STATE TO</span>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.alert.noDataState" <select class="gf-form-input" ng-model="ctrl.alert.noDataState"
...@@ -102,9 +106,13 @@ ...@@ -102,9 +106,13 @@
</select> </select>
</div> </div>
</div> </div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-15">If execution error or timeout</span>
</div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-18">If execution error or timeout</span>
<span class="gf-form-label query-keyword">SET STATE TO</span> <span class="gf-form-label query-keyword">SET STATE TO</span>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.alert.executionErrorState" <select class="gf-form-input" ng-model="ctrl.alert.executionErrorState"
...@@ -112,6 +120,7 @@ ...@@ -112,6 +120,7 @@
</select> </select>
</div> </div>
</div> </div>
</div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.test()"> <button class="btn btn-inverse" ng-click="ctrl.test()">
...@@ -129,19 +138,23 @@ ...@@ -129,19 +138,23 @@
</div> </div>
</div> </div>
</div> </div>
<div class="panel-option-section"> <div class="panel-option-section">
<div class="panel-option-section__header">Notifications</div> <div class="panel-option-section__header">Notifications</div>
<div class="panel-option-section__body"> <div class="panel-option-section__body">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form max-width-30"> <div class="gf-form">
<span class="gf-form-label width-8">Send to</span> <span class="gf-form-label width-8">Send to</span>
<span class="gf-form-label" ng-repeat="nc in ctrl.alertNotifications" </div>
ng-style="{'background-color': nc.bgColor }"> <div class="gf-form" ng-repeat="nc in ctrl.alertNotifications">
<span class="gf-form-label" ng-style="{'background-color': nc.bgColor }">
<i class="{{nc.iconClass}}"></i>&nbsp;{{nc.name}}&nbsp; <i class="{{nc.iconClass}}"></i>&nbsp;{{nc.name}}&nbsp;
<i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification($index)" <i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification($index)" ng-if="nc.isDefault === false"></i>
ng-if="nc.isDefault === false"></i>
</span> </span>
<metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()" </div>
<div class="gf-form">
<metric-segment segment="ctrl.addNotificationSegment"
get-options="ctrl.getNotifications()"
on-change="ctrl.notificationAdded()"></metric-segment> on-change="ctrl.notificationAdded()"></metric-segment>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment