diff --git a/public/app/features/panel/partials/panel.html b/public/app/features/panel/partials/panel.html
index a7fef0f5d67..65f482161f8 100644
--- a/public/app/features/panel/partials/panel.html
+++ b/public/app/features/panel/partials/panel.html
@@ -35,6 +35,11 @@
+
+
diff --git a/public/app/panels/graph/alerting.html b/public/app/panels/graph/alerting.html
new file mode 100644
index 00000000000..7230c6ef488
--- /dev/null
+++ b/public/app/panels/graph/alerting.html
@@ -0,0 +1,233 @@
+
+
Last updated by Grafana October 4, 2015 12:15:04 by $username
+
+
General Alerting Options
+
+
+
+
+
Choose your query:
+
Select an exising query to alert on:
+
+
+
+
+
+
+
+
+
+
Or write a new custom alerting query:
+
+
+
+
+
diff --git a/public/app/panels/graph/module.js b/public/app/panels/graph/module.js
index 5cdeab799de..a1e56f8c5eb 100644
--- a/public/app/panels/graph/module.js
+++ b/public/app/panels/graph/module.js
@@ -34,6 +34,7 @@ function (angular, $, _, kbn, moment, TimeSeries, PanelMeta) {
$scope.panelMeta.addEditorTab('Axes & Grid', 'app/panels/graph/axisEditor.html');
$scope.panelMeta.addEditorTab('Display Styles', 'app/panels/graph/styleEditor.html');
$scope.panelMeta.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html');
+ $scope.panelMeta.addEditorTab('Alerting', 'app/panels/graph/alerting.html');
$scope.panelMeta.addExtendedMenuItem('Export CSV', '', 'exportCsv()');
$scope.panelMeta.addExtendedMenuItem('Toggle legend', '', 'toggleLegend()');
diff --git a/public/img/CopyQuery.png b/public/img/CopyQuery.png
new file mode 100644
index 00000000000..b9829c23b2f
Binary files /dev/null and b/public/img/CopyQuery.png differ
diff --git a/public/img/critical.svg b/public/img/critical.svg
new file mode 100644
index 00000000000..4056b12563b
--- /dev/null
+++ b/public/img/critical.svg
@@ -0,0 +1,15 @@
+
+
+
diff --git a/public/img/envelope.png b/public/img/envelope.png
new file mode 100644
index 00000000000..59ef8a38aba
Binary files /dev/null and b/public/img/envelope.png differ
diff --git a/public/img/online.svg b/public/img/online.svg
new file mode 100644
index 00000000000..279fbec3a90
--- /dev/null
+++ b/public/img/online.svg
@@ -0,0 +1,12 @@
+
+
+
diff --git a/public/img/warn-tiny.svg b/public/img/warn-tiny.svg
new file mode 100644
index 00000000000..e8e91f4452c
--- /dev/null
+++ b/public/img/warn-tiny.svg
@@ -0,0 +1,16 @@
+
+
+
diff --git a/public/img/warn.svg b/public/img/warn.svg
new file mode 100644
index 00000000000..8caee82c3f5
--- /dev/null
+++ b/public/img/warn.svg
@@ -0,0 +1,22 @@
+
+
+
diff --git a/public/less/alerting.less b/public/less/alerting.less
new file mode 100644
index 00000000000..9054584e23e
--- /dev/null
+++ b/public/less/alerting.less
@@ -0,0 +1,42 @@
+.copy-query {
+ display: block;
+ width: 30px;
+ height: 36px;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: transparent url(/img/CopyQuery.png) 50% 50% no-repeat;
+ cursor: pointer;
+}
+
+.alert-state {
+ display: inline-block;
+ padding-left: 30px;
+ background: 0 50% no-repeat;
+ background-size: 20px auto;
+}
+
+.alert-state-online {
+ background-image: url('/img/online.svg');
+}
+
+.alert-state-warning {
+ background-image: url('/img/warn-tiny.svg');
+}
+
+.alert-state-critical {
+ background-image: url('/img/critical.svg');
+}
+
+.alert-notify-emails {
+ width: 400px;
+ border-right: 1px solid @black;
+}
+
+.alert-notify-emails .bootstrap-tagsinput {
+ width: 394px; // offset for 8px left padding and border width
+}
+
+.alert-notify-emails .bootstrap-tagsinput input {
+ border: 0;
+}
diff --git a/public/less/gfbox.less b/public/less/gfbox.less
index eb386f740d7..48d0b6a7ca8 100644
--- a/public/less/gfbox.less
+++ b/public/less/gfbox.less
@@ -25,6 +25,13 @@
}
}
+.gf-box-header-save-btn {
+ padding: 7px 0;
+ float: right;
+ color: @grayLight;
+ font-style: italic;
+}
+
.gf-box-body {
padding: 20px;
min-height: 150px;
diff --git a/public/less/grafana.less b/public/less/grafana.less
index 6e23faa214d..0d4e5f44dc0 100644
--- a/public/less/grafana.less
+++ b/public/less/grafana.less
@@ -18,6 +18,7 @@
@import "fonts.less";
@import "tabs.less";
@import "timepicker.less";
+@import "alerting.less";
.row-control-inner {
padding:0px;
diff --git a/public/less/overrides.less b/public/less/overrides.less
index fb6544cd99c..229627c0896 100644
--- a/public/less/overrides.less
+++ b/public/less/overrides.less
@@ -560,6 +560,15 @@ div.flot-text {
background-color: darken(@purple, 10%);
}
+.label-tag-email {
+ padding-left: 25px;
+ background: @black url(/img/envelope.png) 5px 50% no-repeat !important;
+ border-color: @black !important;
+ font-size: 12px;
+ font-weight: normal;
+ border-radius: 5px;
+}
+
// inspector
.inspector-request-table {
diff --git a/public/less/tightform.less b/public/less/tightform.less
index 494497653ed..f65a991613a 100644
--- a/public/less/tightform.less
+++ b/public/less/tightform.less
@@ -156,6 +156,12 @@ input[type=checkbox].tight-form-checkbox {
margin: 0;
}
+.tight-form-textarea {
+ height: 200px;
+ margin: 0;
+ box-sizing: border-box;
+}
+
select.tight-form-input {
border: none;
border-right: 1px solid @grafanaTargetSegmentBorder;