feat(alerting): new design for alert tab with sidemenu

pkg/api/login_oauth.go

@@ -8,7 +8,6 @@ import (
 	"golang.org/x/oauth2"
 
 	"github.com/grafana/grafana/pkg/bus"
-	"github.com/grafana/grafana/pkg/log"
 	"github.com/grafana/grafana/pkg/metrics"
 	"github.com/grafana/grafana/pkg/middleware"
 	m "github.com/grafana/grafana/pkg/models"
@@ -42,7 +41,7 @@ func OAuthLogin(ctx *middleware.Context) {
 		return
 	}
 
-	log.Trace("login.OAuthLogin(Got token)")
+	ctx.Logger.Debug("OAuthLogin Got token")
 
 	userInfo, err := connect.UserInfo(token)
 	if err != nil {
@@ -56,11 +55,11 @@ func OAuthLogin(ctx *middleware.Context) {
 		return
 	}
 
-	log.Trace("login.OAuthLogin(social login): %s", userInfo)
+	ctx.Logger.Debug("OAuthLogin got user info", "userInfo", userInfo)
 
 	// validate that the email is allowed to login to grafana
 	if !connect.IsEmailAllowed(userInfo.Email) {
-		log.Info("OAuth login attempt with unallowed email, %s", userInfo.Email)
+		ctx.Logger.Info("OAuth login attempt with unallowed email", "email", userInfo.Email)
 		ctx.Redirect(setting.AppSubUrl + "/login?failedMsg=" + url.QueryEscape("Required email domain not fulfilled"))
 		return
 	}

pkg/services/alerting/notifier.go

@@ -38,6 +38,10 @@ func (n *RootNotifier) Notify(context *EvalContext) {
 		return
 	}
 
+	if len(notifiers) == 0 {
+		return
+	}
+
 	err = n.uploadImage(context)
 	if err != nil {
 		n.log.Error("Failed to upload alert panel image", "error", err)
@@ -84,8 +88,11 @@ func (n *RootNotifier) uploadImage(context *EvalContext) error {
 }
 
 func (n *RootNotifier) getNotifiers(orgId int64, notificationIds []int64) ([]Notifier, error) {
-	query := &m.GetAlertNotificationsQuery{OrgId: orgId, Ids: notificationIds}
+	if len(notificationIds) == 0 {
+		return []Notifier{}, nil
+	}
 
+	query := &m.GetAlertNotificationsQuery{OrgId: orgId, Ids: notificationIds}
 	if err := bus.Dispatch(query); err != nil {
 		return nil, err
 	}

public/app/plugins/panel/graph/alert_tab_ctrl.ts → public/app/features/alerting/alert_tab_ctrl.ts

@@ -1,4 +1,4 @@
- ///<reference path="../../../headers/common.d.ts" />
+ ///<reference path="../../headers/common.d.ts" />
 
 import _ from 'lodash';
 
@@ -28,6 +28,7 @@ export class AlertTabCtrl {
   panelCtrl: any;
   testing: boolean;
   testResult: any;
+  subTabIndex: number;
 
   handlers = [{text: 'Grafana', value: 1}, {text: 'External', value: 0}];
   conditionTypes = [
@@ -55,6 +56,7 @@ export class AlertTabCtrl {
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
     this.$scope.ctrl = this;
+    this.subTabIndex = 0;
   }
 
   $onInit() {
@@ -237,12 +239,12 @@ export class AlertTabCtrl {
 }
 
 /** @ngInject */
-export function graphAlertEditor() {
+export function alertTab() {
   'use strict';
   return {
     restrict: 'E',
     scope: true,
-    templateUrl: 'public/app/plugins/panel/graph/partials/tab_alerting.html',
+    templateUrl: 'public/app/features/alerting/partials/alert_tab.html',
     controller: AlertTabCtrl,
   };
 }

public/app/features/alerting/partials/alert_tab.html

@@ -0,0 +1,124 @@
+<div class="edit-tab-with-sidemenu" ng-if="ctrl.alert.enabled">
+	<aside class="edit-sidemenu-aside">
+		<ul class="edit-sidemenu">
+			<li ng-class="{active: ctrl.subTabIndex === 0}">
+				<a ng-click="ctrl.subTabIndex = 0">Alert Config</a>
+			</li>
+			<li ng-class="{active: ctrl.subTabIndex === 1}">
+				<a ng-click="ctrl.subTabIndex = 1">
+					Notifications <span class="muted">({{ctrl.alert.notifications.length}})</span>
+				</a>
+			</li>
+			<li ng-class="{active: ctrl.subTabIndex === 2}">
+				<a ng-click="ctrl.subTabIndex = 2">Alert History</a>
+			</li>
+		</ul>
+	</aside>
+
+	<div class="edit-tab-content">
+			<div class="gf-form-group" ng-if="ctrl.subTabIndex === 0">
+			<h5 class="section-heading">Alert Rule</h5>
+			<div class="gf-form">
+				<span class="gf-form-label width-8">Name</span>
+				<input type="text" class="gf-form-input width-25" ng-model="ctrl.alert.name">
+			</div>
+			<div class="gf-form-inline">
+				<div class="gf-form">
+					<span class="gf-form-label width-8">Evaluate every</span>
+					<input class="gf-form-input max-width-7" type="text" ng-model="ctrl.alert.frequency"></input>
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label">Severity</span>
+					<div class="gf-form-select-wrapper width-13">
+						<select class="gf-form-input" ng-model="ctrl.alert.severity" ng-options="f.value as f.text for f in ctrl.severityLevels">
+						</select>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="gf-form-group" ng-if="ctrl.subTabIndex === 0">
+			<h5 class="section-heading">Conditions</h5>
+			<div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
+				<div class="gf-form">
+					<span class="gf-form-label query-keyword width-5" ng-if="$index">AND</span>
+					<span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span>
+				</div>
+				<div class="gf-form">
+					<query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart" part-updated="ctrl.queryPartUpdated(conditionModel)">
+					</query-part-editor>
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label">Reducer</span>
+					<query-part-editor class="gf-form-label query-part" part="conditionModel.reducerPart" part-updated="ctrl.reducerPartUpdated(conditionModel)">
+					</query-part-editor>
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label">Value</span>
+					<metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-segment-operator" on-change="ctrl.thresholdUpdated()"></metric-segment-model>
+					<input class="gf-form-input max-width-7" type="number" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.thresholdUpdated()"></input>
+				</div>
+				<div class="gf-form">
+					<label class="gf-form-label">
+						<a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
+							<i class="fa fa-trash"></i>
+						</a>
+					</label>
+				</div>
+			</div>
+
+			<div class="gf-form">
+				<label class="gf-form-label dropdown">
+					<a class="pointer dropdown-toggle" data-toggle="dropdown">
+						<i class="fa fa-plus"></i>
+					</a>
+					<ul class="dropdown-menu" role="menu">
+						<li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
+							<a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a>
+						</li>
+					</ul>
+				</label>
+			</div>
+
+			<div class="gf-form-button-row">
+				<button class="btn btn-inverse" ng-click="ctrl.test()">
+					Test Rule
+				</button>
+
+				<button class="btn btn-inverse" ng-click="ctrl.delete()">
+					Delete Alert
+				</button>
+			</div>
+		</div>
+
+		<div class="gf-form-group" ng-if="ctrl.subTabIndex === 1">
+			<h5 class="section-heading">Notifications</h5>
+			<div class="gf-form-inline">
+				<div class="gf-form max-width-30">
+					<span class="gf-form-label" ng-repeat="nc in ctrl.alertNotifications">
+						{{nc.name}}
+						<i class="fa fa-remove pointer" ng-click="ctrl.removeNotification($index)"></i>
+					</span>
+					<metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()" on-change="ctrl.notificationAdded()"></metric-segment>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="gf-form-group" ng-if="ctrl.testing">
+		Evaluating rule <i class="fa fa-spinner fa-spin"></i>
+	</div>
+
+	<div class="gf-form-group" ng-if="ctrl.testResult">
+		<json-tree root-name="result" object="ctrl.testResult" start-expanded="true"></json-tree>
+	</div>
+</div>
+
+<div class="gf-form-group" ng-if="!ctrl.alert.enabled">
+	<div class="gf-form-button-row">
+		<button class="btn btn-inverse" ng-click="ctrl.enable()">
+			<i class="icon-gf icon-gf-alert"></i>
+			Create Alert
+		</button>
+	</div>
+</div>

public/app/plugins/panel/graph/module.ts

@@ -12,8 +12,7 @@ import _ from 'lodash';
 import TimeSeries from 'app/core/time_series2';
 import config from 'app/core/config';
 import * as fileExport from 'app/core/utils/file_export';
-import {MetricsPanelCtrl} from 'app/plugins/sdk';
-import {graphAlertEditor} from './alert_tab_ctrl';
+import {MetricsPanelCtrl, alertTab} from 'app/plugins/sdk';
 
 class GraphCtrl extends MetricsPanelCtrl {
   static template = template;
@@ -133,7 +132,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html', 4);
 
     if (config.alertingEnabled) {
-      this.addEditorTab('Alert', graphAlertEditor, 5);
+      this.addEditorTab('Alert', alertTab, 5);
     }
 
     this.logScales = {

public/app/plugins/panel/graph/partials/tab_alerting.html

@@ -1,140 +0,0 @@
-
-<!-- <div ng&#45;if="!ctrl.alert.enabled"> -->
-<!--   <div class="gf&#45;form&#45;group"> -->
-<!--     <h5 class="section&#45;heading">Visual Thresholds</h5> -->
-<!--     <div class="gf&#45;form&#45;inline"> -->
-<!--       <div class="gf&#45;form"> -->
-<!--         <span class="gf&#45;form&#45;label"> -->
-<!--           <i class="icon&#45;gf icon&#45;gf&#45;warn alert&#45;icon&#45;critical"></i> -->
-<!--           Critcal if -->
-<!--         </span> -->
-<!--         <metric&#45;segment&#45;model property="ctrl.alert.crit.op" options="ctrl.operatorList" custom="false" css&#45;class="query&#45;segment&#45;operator" on&#45;change="ctrl.thresholdsUpdated()"></metric&#45;segment&#45;model> -->
-<!--         <input class="gf&#45;form&#45;input max&#45;width&#45;7" type="number" ng&#45;model="ctrl.alert.crit.value" ng&#45;change="ctrl.thresholdsUpdated()"></input> -->
-<!--       </div> -->
-<!--       <div class="gf&#45;form"> -->
-<!--         <span class="gf&#45;form&#45;label"> -->
-<!--           <i class="icon&#45;gf icon&#45;gf&#45;warn alert&#45;icon&#45;warn"></i> -->
-<!--           Warn if -->
-<!--         </span> -->
-<!--         <metric&#45;segment&#45;model property="ctrl.alert.warn.op" options="ctrl.operatorList" custom="false" css&#45;class="query&#45;segment&#45;operator" on&#45;change="ctrl.thresholdsUpdated()"></metric&#45;segment&#45;model> -->
-<!--         <input class="gf&#45;form&#45;input max&#45;width&#45;7" type="number" ng&#45;model="ctrl.alert.warn.value" ng&#45;change="ctrl.thresholdsUpdated()"></input> -->
-<!--       </div> -->
-<!--     </div> -->
-<!--   </div> -->
-<!-- </div> -->
-
-<div ng-if="ctrl.alert.enabled">
-	<div class="gf-form-group">
-		<h5 class="section-heading">Alert Rule</h5>
-		<div class="gf-form-inline">
-			<div class="gf-form">
-				<span class="gf-form-label">Name</span>
-				<input type="text" class="gf-form-input width-22" ng-model="ctrl.alert.name">
-			</div>
-			<div class="gf-form">
-				<span class="gf-form-label">Evaluate every</span>
-				<input class="gf-form-input max-width-7" type="text" ng-model="ctrl.alert.frequency"></input>
-			</div>
-			<div class="gf-form">
-				<span class="gf-form-label">Severity</span>
-				<div class="gf-form-select-wrapper">
-					<select class="gf-form-input" ng-model="ctrl.alert.severity" ng-options="f.value as f.text for f in ctrl.severityLevels">
-					</select>
-				</div>
-			</div>
-		</div>
-	</div>
-
-  <div class="gf-form-group">
-    <h5 class="section-heading">Conditions</h5>
-    <div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
-      <div class="gf-form">
-				<span class="gf-form-label query-keyword width-5" ng-if="$index">AND</span>
-				<span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span>
-      </div>
-      <div class="gf-form">
-        <query-part-editor
-           class="gf-form-label query-part"
-           part="conditionModel.queryPart"
-           part-updated="ctrl.queryPartUpdated(conditionModel)">
-        </query-part-editor>
-      </div>
-      <div class="gf-form">
-        <span class="gf-form-label">Reducer</span>
-        <query-part-editor
-              class="gf-form-label query-part"
-              part="conditionModel.reducerPart"
-              part-updated="ctrl.reducerPartUpdated(conditionModel)">
-        </query-part-editor>
-      </div>
-      <div class="gf-form">
-        <span class="gf-form-label">Value</span>
-        <metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-segment-operator" on-change="ctrl.thresholdUpdated()"></metric-segment-model>
-        <input class="gf-form-input max-width-7" type="number" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.thresholdUpdated()"></input>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label">
-          <a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
-            <i class="fa fa-trash"></i>
-          </a>
-        </label>
-			</div>
-    </div>
-
-		<div class="gf-form">
-			<label class="gf-form-label dropdown">
-				<a class="pointer dropdown-toggle" data-toggle="dropdown">
-					<i class="fa fa-plus"></i>
-				</a>
-				<ul class="dropdown-menu" role="menu">
-					<li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
-						<a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a>
-					</li>
-				</ul>
-			</label>
-		</div>
-	</div>
-
-	<div class="gf-form-group">
-		<h5 class="section-heading">Notifications</h5>
-		<div class="gf-form-inline">
-			<div class="gf-form max-width-30">
-				<span class="gf-form-label" ng-repeat="nc in ctrl.alertNotifications">
-					{{nc.name}}
-					<i class="fa fa-remove pointer" ng-click="ctrl.removeNotification($index)"></i>
-				</span>
-				<metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()" on-change="ctrl.notificationAdded()"></metric-segment>
-			</div>
-		</div>
-	</div>
-
-	<div class="gf-form-group">
-		<div class="gf-form-button-row">
-			<button class="btn btn-inverse" ng-click="ctrl.test()">
-				Test Rule
-			</button>
-
-			<button class="btn btn-inverse" ng-click="ctrl.delete()">
-				Delete Alert
-			</button>
-		</div>
-	</div>
-
-</div>
-
-<div class="gf-form-group" ng-if="ctrl.testing">
-	Evaluating rule <i class="fa fa-spinner fa-spin"></i>
-</div>
-
-<div class="gf-form-group" ng-if="ctrl.testResult">
-	<json-tree root-name="result" object="ctrl.testResult" start-expanded="true"></json-tree>
-</div>
-
-<div class="gf-form-group" ng-if="!ctrl.alert.enabled">
-	<div class="gf-form-button-row">
-		<button class="btn btn-inverse" ng-click="ctrl.enable()">
-			<i class="icon-gf icon-gf-alert"></i>
-			Create Alert
-		</button>
-	</div>
-</div>

public/app/plugins/sdk.ts

@@ -1,6 +1,7 @@
 import {PanelCtrl} from 'app/features/panel/panel_ctrl';
 import {MetricsPanelCtrl} from 'app/features/panel/metrics_panel_ctrl';
 import {QueryCtrl} from 'app/features/panel/query_ctrl';
+import {alertTab} from 'app/features/alerting/alert_tab_ctrl';
 
 import config from 'app/core/config';
 
@@ -16,4 +17,5 @@ export {
   PanelCtrl,
   MetricsPanelCtrl,
   QueryCtrl,
+  alertTab,
 }

public/sass/_grafana.scss

@@ -72,6 +72,7 @@
 @import "components/tabbed_view";
 @import "components/query_part";
 @import "components/jsontree";
+@import "components/edit_sidemenu.scss";
 
 // PAGES
 @import "pages/login";

public/sass/components/_tabbed_view.scss

@@ -28,7 +28,7 @@
   float: left;
   font-style: italic;
   padding-top: 0.5rem;
-  margin: 0 $spacer*3 0 $spacer*1.5;
+  margin: 0 $spacer*3 0 $spacer*1;
 }
 
 .tabbed-view-close-btn {
@@ -48,7 +48,7 @@
 }
 
 .tabbed-view-body {
-  padding: $spacer*1.5;
+  padding: $spacer*2;
   min-height: 250px;
 }
 

public/sass/components/edit_sidemenu.scss

@@ -0,0 +1,45 @@
+
+.edit-tab-with-sidemenu {
+  display: flex;
+  flex-direction: row;
+}
+
+.edit-sidemenu-aside {
+  width: 14rem;
+}
+
+.edit-sidemenu {
+  width: 100%;
+  list-style: none;
+
+  li.active {
+    @include left-brand-border-gradient();
+  }
+
+  a {
+    display: block;
+    color: $text-color;
+    margin: 0 0 1.5rem 1rem;
+  }
+}
+
+
+@include media-breakpoint-down(sm) {
+  .edit-tab-with-sidemenu {
+    flex-direction: column;
+  }
+
+  .edit-sidemenu-aside {
+    width: 100%;
+    margin-bottom: 2rem;
+  }
+
+  .edit-sidemenu {
+    li {
+      float: left;
+    }
+    a {
+      margin: 0.3rem 1rem;
+    }
+  }
+}