mirror of https://github.com/grafana/grafana
Peter Holmberg
7 years ago
commit
c2b1f504a0
@ -0,0 +1,215 @@ |
||||
package notifiers |
||||
|
||||
import ( |
||||
"encoding/json" |
||||
"fmt" |
||||
"time" |
||||
|
||||
"github.com/grafana/grafana/pkg/bus" |
||||
"github.com/grafana/grafana/pkg/log" |
||||
m "github.com/grafana/grafana/pkg/models" |
||||
"github.com/grafana/grafana/pkg/services/alerting" |
||||
"github.com/grafana/grafana/pkg/setting" |
||||
) |
||||
|
||||
func init() { |
||||
alerting.RegisterNotifier(&alerting.NotifierPlugin{ |
||||
Type: "googlechat", |
||||
Name: "Google Hangouts Chat", |
||||
Description: "Sends notifications to Google Hangouts Chat via webhooks based on the official JSON message " + |
||||
"format (https://developers.google.com/hangouts/chat/reference/message-formats/).", |
||||
Factory: NewGoogleChatNotifier, |
||||
OptionsTemplate: ` |
||||
<h3 class="page-heading">Google Hangouts Chat settings</h3> |
||||
<div class="gf-form max-width-30"> |
||||
<span class="gf-form-label width-6">Url</span> |
||||
<input type="text" required class="gf-form-input max-width-30" ng-model="ctrl.model.settings.url" placeholder="Google Hangouts Chat incoming webhook url"></input> |
||||
</div> |
||||
`, |
||||
}) |
||||
} |
||||
|
||||
func NewGoogleChatNotifier(model *m.AlertNotification) (alerting.Notifier, error) { |
||||
url := model.Settings.Get("url").MustString() |
||||
if url == "" { |
||||
return nil, alerting.ValidationError{Reason: "Could not find url property in settings"} |
||||
} |
||||
|
||||
return &GoogleChatNotifier{ |
||||
NotifierBase: NewNotifierBase(model), |
||||
Url: url, |
||||
log: log.New("alerting.notifier.googlechat"), |
||||
}, nil |
||||
} |
||||
|
||||
type GoogleChatNotifier struct { |
||||
NotifierBase |
||||
Url string |
||||
log log.Logger |
||||
} |
||||
|
||||
/** |
||||
Structs used to build a custom Google Hangouts Chat message card. |
||||
See: https://developers.google.com/hangouts/chat/reference/message-formats/cards
|
||||
*/ |
||||
type outerStruct struct { |
||||
Cards []card `json:"cards"` |
||||
} |
||||
|
||||
type card struct { |
||||
Header header `json:"header"` |
||||
Sections []section `json:"sections"` |
||||
} |
||||
|
||||
type header struct { |
||||
Title string `json:"title"` |
||||
} |
||||
|
||||
type section struct { |
||||
Widgets []widget `json:"widgets"` |
||||
} |
||||
|
||||
// "generic" widget used to add different types of widgets (buttonWidget, textParagraphWidget, imageWidget)
|
||||
type widget interface { |
||||
} |
||||
|
||||
type buttonWidget struct { |
||||
Buttons []button `json:"buttons"` |
||||
} |
||||
|
||||
type textParagraphWidget struct { |
||||
Text text `json:"textParagraph"` |
||||
} |
||||
|
||||
type text struct { |
||||
Text string `json:"text"` |
||||
} |
||||
|
||||
type imageWidget struct { |
||||
Image image `json:"image"` |
||||
} |
||||
|
||||
type image struct { |
||||
ImageUrl string `json:"imageUrl"` |
||||
} |
||||
|
||||
type button struct { |
||||
TextButton textButton `json:"textButton"` |
||||
} |
||||
|
||||
type textButton struct { |
||||
Text string `json:"text"` |
||||
OnClick onClick `json:"onClick"` |
||||
} |
||||
|
||||
type onClick struct { |
||||
OpenLink openLink `json:"openLink"` |
||||
} |
||||
|
||||
type openLink struct { |
||||
Url string `json:"url"` |
||||
} |
||||
|
||||
func (this *GoogleChatNotifier) Notify(evalContext *alerting.EvalContext) error { |
||||
this.log.Info("Executing Google Chat notification") |
||||
|
||||
headers := map[string]string{ |
||||
"Content-Type": "application/json; charset=UTF-8", |
||||
} |
||||
|
||||
ruleUrl, err := evalContext.GetRuleUrl() |
||||
if err != nil { |
||||
this.log.Error("evalContext returned an invalid rule URL") |
||||
} |
||||
|
||||
// add a text paragraph widget for the message
|
||||
widgets := []widget{ |
||||
textParagraphWidget{ |
||||
Text: text{ |
||||
Text: evalContext.Rule.Message, |
||||
}, |
||||
}, |
||||
} |
||||
|
||||
// add a text paragraph widget for the fields
|
||||
var fields []textParagraphWidget |
||||
fieldLimitCount := 4 |
||||
for index, evt := range evalContext.EvalMatches { |
||||
fields = append(fields, |
||||
textParagraphWidget{ |
||||
Text: text{ |
||||
Text: "<i>" + evt.Metric + ": " + fmt.Sprint(evt.Value) + "</i>", |
||||
}, |
||||
}, |
||||
) |
||||
if index > fieldLimitCount { |
||||
break |
||||
} |
||||
} |
||||
widgets = append(widgets, fields) |
||||
|
||||
// if an image exists, add it as an image widget
|
||||
if evalContext.ImagePublicUrl != "" { |
||||
widgets = append(widgets, imageWidget{ |
||||
Image: image{ |
||||
ImageUrl: evalContext.ImagePublicUrl, |
||||
}, |
||||
}) |
||||
} else { |
||||
this.log.Info("Could not retrieve a public image URL.") |
||||
} |
||||
|
||||
// add a button widget (link to Grafana)
|
||||
widgets = append(widgets, buttonWidget{ |
||||
Buttons: []button{ |
||||
{ |
||||
TextButton: textButton{ |
||||
Text: "OPEN IN GRAFANA", |
||||
OnClick: onClick{ |
||||
OpenLink: openLink{ |
||||
Url: ruleUrl, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
}) |
||||
|
||||
// add text paragraph widget for the build version and timestamp
|
||||
widgets = append(widgets, textParagraphWidget{ |
||||
Text: text{ |
||||
Text: "Grafana v" + setting.BuildVersion + " | " + (time.Now()).Format(time.RFC822), |
||||
}, |
||||
}) |
||||
|
||||
// nest the required structs
|
||||
res1D := &outerStruct{ |
||||
Cards: []card{ |
||||
{ |
||||
Header: header{ |
||||
Title: evalContext.GetNotificationTitle(), |
||||
}, |
||||
Sections: []section{ |
||||
{ |
||||
Widgets: widgets, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
} |
||||
body, _ := json.Marshal(res1D) |
||||
|
||||
cmd := &m.SendWebhookSync{ |
||||
Url: this.Url, |
||||
HttpMethod: "POST", |
||||
HttpHeader: headers, |
||||
Body: string(body), |
||||
} |
||||
|
||||
if err := bus.DispatchCtx(evalContext.Ctx, cmd); err != nil { |
||||
this.log.Error("Failed to send Google Hangouts Chat alert", "error", err, "webhook", this.Name) |
||||
return err |
||||
} |
||||
|
||||
return nil |
||||
} |
||||
@ -0,0 +1,53 @@ |
||||
package notifiers |
||||
|
||||
import ( |
||||
"testing" |
||||
|
||||
"github.com/grafana/grafana/pkg/components/simplejson" |
||||
m "github.com/grafana/grafana/pkg/models" |
||||
. "github.com/smartystreets/goconvey/convey" |
||||
) |
||||
|
||||
func TestGoogleChatNotifier(t *testing.T) { |
||||
Convey("Google Hangouts Chat notifier tests", t, func() { |
||||
|
||||
Convey("Parsing alert notification from settings", func() { |
||||
Convey("empty settings should return error", func() { |
||||
json := `{ }` |
||||
|
||||
settingsJSON, _ := simplejson.NewJson([]byte(json)) |
||||
model := &m.AlertNotification{ |
||||
Name: "ops", |
||||
Type: "googlechat", |
||||
Settings: settingsJSON, |
||||
} |
||||
|
||||
_, err := NewGoogleChatNotifier(model) |
||||
So(err, ShouldNotBeNil) |
||||
}) |
||||
|
||||
Convey("from settings", func() { |
||||
json := ` |
||||
{ |
||||
"url": "http://google.com" |
||||
}` |
||||
|
||||
settingsJSON, _ := simplejson.NewJson([]byte(json)) |
||||
model := &m.AlertNotification{ |
||||
Name: "ops", |
||||
Type: "googlechat", |
||||
Settings: settingsJSON, |
||||
} |
||||
|
||||
not, err := NewGoogleChatNotifier(model) |
||||
webhookNotifier := not.(*GoogleChatNotifier) |
||||
|
||||
So(err, ShouldBeNil) |
||||
So(webhookNotifier.Name, ShouldEqual, "ops") |
||||
So(webhookNotifier.Type, ShouldEqual, "googlechat") |
||||
So(webhookNotifier.Url, ShouldEqual, "http://google.com") |
||||
}) |
||||
|
||||
}) |
||||
}) |
||||
} |
||||
@ -1,97 +1,124 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import classNames from 'classnames'; |
||||
import _ from 'lodash'; |
||||
|
||||
import withKeyboardNavigation from './withKeyboardNavigation'; |
||||
import { DataSourceSelectItem } from 'app/types'; |
||||
|
||||
interface Props { |
||||
export interface Props { |
||||
onChangeDataSource: (ds: any) => void; |
||||
datasources: DataSourceSelectItem[]; |
||||
selected?: number; |
||||
onKeyDown?: (evt: any, maxSelectedIndex: number, onEnterAction: () => void) => void; |
||||
onMouseEnter?: (select: number) => void; |
||||
} |
||||
|
||||
interface State { |
||||
searchQuery: string; |
||||
} |
||||
|
||||
export class DataSourcePicker extends PureComponent<Props, State> { |
||||
searchInput: HTMLElement; |
||||
export const DataSourcePicker = withKeyboardNavigation( |
||||
class DataSourcePicker extends PureComponent<Props, State> { |
||||
searchInput: HTMLElement; |
||||
|
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
searchQuery: '', |
||||
}; |
||||
} |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
searchQuery: '', |
||||
}; |
||||
} |
||||
|
||||
getDataSources() { |
||||
const { searchQuery } = this.state; |
||||
const regex = new RegExp(searchQuery, 'i'); |
||||
const { datasources } = this.props; |
||||
getDataSources() { |
||||
const { searchQuery } = this.state; |
||||
const regex = new RegExp(searchQuery, 'i'); |
||||
const { datasources } = this.props; |
||||
|
||||
const filtered = datasources.filter(item => { |
||||
return regex.test(item.name) || regex.test(item.meta.name); |
||||
}); |
||||
const filtered = datasources.filter(item => { |
||||
return regex.test(item.name) || regex.test(item.meta.name); |
||||
}); |
||||
|
||||
return filtered; |
||||
} |
||||
return filtered; |
||||
} |
||||
|
||||
get maxSelectedIndex() { |
||||
const filtered = this.getDataSources(); |
||||
return filtered.length - 1; |
||||
} |
||||
|
||||
renderDataSource = (ds: DataSourceSelectItem, index: number) => { |
||||
const { onChangeDataSource } = this.props; |
||||
const onClick = () => onChangeDataSource(ds); |
||||
const cssClass = classNames({ |
||||
'ds-picker-list__item': true, |
||||
}); |
||||
renderDataSource = (ds: DataSourceSelectItem, index: number) => { |
||||
const { onChangeDataSource, selected, onMouseEnter } = this.props; |
||||
const onClick = () => onChangeDataSource(ds); |
||||
const isSelected = selected === index; |
||||
const cssClass = classNames({ |
||||
'ds-picker-list__item': true, |
||||
'ds-picker-list__item--selected': isSelected, |
||||
}); |
||||
return ( |
||||
<div |
||||
key={index} |
||||
className={cssClass} |
||||
title={ds.name} |
||||
onClick={onClick} |
||||
onMouseEnter={() => onMouseEnter(index)} |
||||
> |
||||
<img className="ds-picker-list__img" src={ds.meta.info.logos.small} /> |
||||
<div className="ds-picker-list__name">{ds.name}</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
return ( |
||||
<div key={index} className={cssClass} title={ds.name} onClick={onClick}> |
||||
<img className="ds-picker-list__img" src={ds.meta.info.logos.small} /> |
||||
<div className="ds-picker-list__name">{ds.name}</div> |
||||
</div> |
||||
); |
||||
}; |
||||
componentDidMount() { |
||||
setTimeout(() => { |
||||
this.searchInput.focus(); |
||||
}, 300); |
||||
} |
||||
|
||||
componentDidMount() { |
||||
setTimeout(() => { |
||||
this.searchInput.focus(); |
||||
}, 300); |
||||
} |
||||
onSearchQueryChange = evt => { |
||||
const value = evt.target.value; |
||||
this.setState(prevState => ({ |
||||
...prevState, |
||||
searchQuery: value, |
||||
})); |
||||
}; |
||||
|
||||
onSearchQueryChange = evt => { |
||||
const value = evt.target.value; |
||||
this.setState(prevState => ({ |
||||
...prevState, |
||||
searchQuery: value, |
||||
})); |
||||
}; |
||||
renderFilters() { |
||||
const { searchQuery } = this.state; |
||||
const { onKeyDown } = this.props; |
||||
return ( |
||||
<> |
||||
<label className="gf-form--has-input-icon"> |
||||
<input |
||||
type="text" |
||||
className="gf-form-input width-13" |
||||
placeholder="" |
||||
ref={elem => (this.searchInput = elem)} |
||||
onChange={this.onSearchQueryChange} |
||||
value={searchQuery} |
||||
onKeyDown={evt => { |
||||
onKeyDown(evt, this.maxSelectedIndex, () => { |
||||
const { onChangeDataSource, selected } = this.props; |
||||
const ds = this.getDataSources()[selected]; |
||||
onChangeDataSource(ds); |
||||
}); |
||||
}} |
||||
/> |
||||
<i className="gf-form-input-icon fa fa-search" /> |
||||
</label> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
renderFilters() { |
||||
const { searchQuery } = this.state; |
||||
return ( |
||||
<> |
||||
<label className="gf-form--has-input-icon"> |
||||
<input |
||||
type="text" |
||||
className="gf-form-input width-13" |
||||
placeholder="" |
||||
ref={elem => (this.searchInput = elem)} |
||||
onChange={this.onSearchQueryChange} |
||||
value={searchQuery} |
||||
/> |
||||
<i className="gf-form-input-icon fa fa-search" /> |
||||
</label> |
||||
</> |
||||
); |
||||
render() { |
||||
return ( |
||||
<> |
||||
<div className="cta-form__bar"> |
||||
{this.renderFilters()} |
||||
<div className="gf-form--grow" /> |
||||
</div> |
||||
<div className="ds-picker-list">{this.getDataSources().map(this.renderDataSource)}</div> |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
); |
||||
|
||||
render() { |
||||
return ( |
||||
<> |
||||
<div className="cta-form__bar"> |
||||
{this.renderFilters()} |
||||
<div className="gf-form--grow" /> |
||||
</div> |
||||
<div className="ds-picker-list">{this.getDataSources().map(this.renderDataSource)}</div> |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
export default DataSourcePicker; |
||||
|
||||
@ -0,0 +1,2 @@ |
||||
<graph-threshold-form panel-ctrl="ctrl"></graph-threshold-form> |
||||
<graph-time-region-form panel-ctrl="ctrl"></graph-time-region-form> |
||||
Loading…
Reference in new issue