IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-07-31 09:31:32 +02:00
parent 2b276d5cd1
commit 3b69c8f687
10 changed files with 192 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pkg/api/login_oauth.go
View File

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

9
pkg/services/alerting/notifier.go
View File

@ -38,6 +38,10 @@ func (n *RootNotifier) Notify(context *EvalContext) {
return return
} }
if len(notifiers) == 0 {
return
}
err = n.uploadImage(context) err = n.uploadImage(context)
if err != nil { if err != nil {
n.log.Error("Failed to upload alert panel image", "error", err) 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) { 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 { if err := bus.Dispatch(query); err != nil {
return nil, err return nil, err
} }

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

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

124
public/app/features/alerting/partials/alert_tab.html Normal file
View File

@ -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>

5
public/app/plugins/panel/graph/module.ts
View File

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

140
public/app/plugins/panel/graph/partials/tab_alerting.html
View File

@ -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>

2
public/app/plugins/sdk.ts
View File

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

1
public/sass/_grafana.scss
View File

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

4
public/sass/components/_tabbed_view.scss
View File

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

45
public/sass/components/edit_sidemenu.scss Normal file
View File

@ -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;
}
}
}