apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/5890/head
Torkel Ödegaard 10 years ago
parent 2b276d5cd1
commit 3b69c8f687
10 changed files with 192 additions and 153 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      pkg/api/login_oauth.go
  2. 9
      pkg/services/alerting/notifier.go
  3. 8
      public/app/features/alerting/alert_tab_ctrl.ts
  4. 124
      public/app/features/alerting/partials/alert_tab.html
  5. 5
      public/app/plugins/panel/graph/module.ts
  6. 140
      public/app/plugins/panel/graph/partials/tab_alerting.html
  7. 2
      public/app/plugins/sdk.ts
  8. 1
      public/sass/_grafana.scss
  9. 4
      public/sass/components/_tabbed_view.scss
  10. 45
      public/sass/components/edit_sidemenu.scss

7
pkg/api/login_oauth.go
Unescape View File

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

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

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

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

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

124
public/app/features/alerting/partials/alert_tab.html
Unescape 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
Unescape View File

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

140
public/app/plugins/panel/graph/partials/tab_alerting.html
Unescape 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
Unescape View File

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

1
public/sass/_grafana.scss
Unescape View File

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

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

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

45
public/sass/components/edit_sidemenu.scss
Unescape 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;
}
}
}
Write Preview
Loading…
Cancel
Save