From 3b69c8f687c1e1fbf8a2c39f931d9b0d2d6143d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 31 Jul 2016 09:31:32 +0200 Subject: [PATCH] feat(alerting): new design for alert tab with sidemenu --- pkg/api/login_oauth.go | 7 +- pkg/services/alerting/notifier.go | 9 +- .../alerting}/alert_tab_ctrl.ts | 8 +- .../features/alerting/partials/alert_tab.html | 124 ++++++++++++++++ public/app/plugins/panel/graph/module.ts | 5 +- .../panel/graph/partials/tab_alerting.html | 140 ------------------ public/app/plugins/sdk.ts | 2 + public/sass/_grafana.scss | 1 + public/sass/components/_tabbed_view.scss | 4 +- public/sass/components/edit_sidemenu.scss | 45 ++++++ 10 files changed, 192 insertions(+), 153 deletions(-) rename public/app/{plugins/panel/graph => features/alerting}/alert_tab_ctrl.ts (96%) create mode 100644 public/app/features/alerting/partials/alert_tab.html delete mode 100644 public/app/plugins/panel/graph/partials/tab_alerting.html create mode 100644 public/sass/components/edit_sidemenu.scss diff --git a/pkg/api/login_oauth.go b/pkg/api/login_oauth.go index 4244feef664..6512a827341 100644 --- a/pkg/api/login_oauth.go +++ b/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 } diff --git a/pkg/services/alerting/notifier.go b/pkg/services/alerting/notifier.go index 787543f3473..28a3a331dd0 100644 --- a/pkg/services/alerting/notifier.go +++ b/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 } diff --git a/public/app/plugins/panel/graph/alert_tab_ctrl.ts b/public/app/features/alerting/alert_tab_ctrl.ts similarity index 96% rename from public/app/plugins/panel/graph/alert_tab_ctrl.ts rename to public/app/features/alerting/alert_tab_ctrl.ts index a8cac86a6ad..9f9b7f2b70e 100644 --- a/public/app/plugins/panel/graph/alert_tab_ctrl.ts +++ b/public/app/features/alerting/alert_tab_ctrl.ts @@ -1,4 +1,4 @@ - /// + /// 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, }; } diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html new file mode 100644 index 00000000000..870eb220811 --- /dev/null +++ b/public/app/features/alerting/partials/alert_tab.html @@ -0,0 +1,124 @@ +
+ + +
+
+
Alert Rule
+
+ Name + +
+
+
+ Evaluate every + +
+
+ Severity +
+ +
+
+
+
+ +
+
Conditions
+
+
+ AND + WHEN +
+
+ + +
+
+ Reducer + + +
+
+ Value + + +
+
+ +
+
+ +
+ +
+ +
+ + + +
+
+ +
+
Notifications
+
+
+ + {{nc.name}} + + + +
+
+
+
+ +
+ Evaluating rule +
+ +
+ +
+
+ +
+
+ +
+
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 6e00bef084a..bed6ef9302c 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/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 = { diff --git a/public/app/plugins/panel/graph/partials/tab_alerting.html b/public/app/plugins/panel/graph/partials/tab_alerting.html deleted file mode 100644 index 463e2cb4154..00000000000 --- a/public/app/plugins/panel/graph/partials/tab_alerting.html +++ /dev/null @@ -1,140 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
Alert Rule
-
-
- Name - -
-
- Evaluate every - -
-
- Severity -
- -
-
-
-
- -
-
Conditions
-
-
- AND - WHEN -
-
- - -
-
- Reducer - - -
-
- Value - - -
-
- -
-
- -
- -
-
- -
-
Notifications
-
-
- - {{nc.name}} - - - -
-
-
- -
-
- - - -
-
- -
- -
- Evaluating rule -
- -
- -
- -
-
- -
-
diff --git a/public/app/plugins/sdk.ts b/public/app/plugins/sdk.ts index 854b8777766..468b6baa4a0 100644 --- a/public/app/plugins/sdk.ts +++ b/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, } diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 77a88efcf7a..936ce0af4d6 100644 --- a/public/sass/_grafana.scss +++ b/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"; diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index 6c8a42a8059..f1b59fa2363 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/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; } diff --git a/public/sass/components/edit_sidemenu.scss b/public/sass/components/edit_sidemenu.scss new file mode 100644 index 00000000000..de3e92ee5e2 --- /dev/null +++ b/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; + } + } +}