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 @@ + +
+ There are unsaved changes. + +
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
+
+
    +
  • + Alert Title +
  • +
  • + +
  • +
  • + Alerting Backend +
  • +
  • + +
  • +
  • + + + +
  • +
+
+
+
+
+
+
Choose your query:
+

Select an exising query to alert on:

+
+
+
    +
  • +
  • None
  • +
+
+
+
+
+
+
+
    +
  • +
  • A
  • +
  • apps
  • +
  • +
  • fakesite
  • +
  • counters
  • +
  • requests
  • +
  • count
  • +
  • scaleToSeconds(1)
  • +
  • aliasByNode(2)
  • +
  • +
+
+
+
+
+
+
    +
  • +
  • B
  • +
  • Metric: us-west-2 AWS/EC2 CPUUtilization Stats: Minimum Maximum Dimensions InstanceIS = i-b0e8a447 Alias {{stat}} Period 60
  • +
  • +
+
+
+
+
+
+
    +
  • +
  • C
  • +
  • Query: avg(counters_logins) by(server) Legend Format: {{app}} - {{server}} Step: 1s Resolution: 1/2
  • +
  • +
+
+
+
+
+
+
    +
  • +
  • D
  • +
  • SELECT mean(value) FROM logins.count WHERE hostname = /$Hostname$/ GROUP BY time($internal) hostname
  • +
  • +
+
+
+
+
+
+
    +
  • +
  • E
  • +
  • Metric: apps.backend.backend_01.counters.requests.count Alias: Bristow Aggregator: Sum Downsample: 1m Aggregator Sum Tags host = test
  • +
  • +
+
+
+
+
+
+

Or write a new custom alerting query:

+
+
+
    +
  • +
  • + + + +
  • +
  • + select metric +
  • +
  • + +
  • +
+
+
+
+
+
+
+
Define Your States
+
+
    +
  • + by +
  • +
  • + +
  • +
  • + the values in the query over the last +
  • +
  • + +
  • +
+
+
+
+
+
+
+
+
    +
  • + Warn +
  • +
  • + +
  • +
  • + +
  • +
  • + .notify +
  • +
  • + +
  • +
  • + + + +
  • +
+
+
+
+
    +
  • + Critical +
  • +
  • + +
  • +
  • + +
  • +
  • + .notify +
  • +
  • + +
  • +
  • + + + +
  • +
+
+
+
+
+
+
+
What to Say Variables | Preview
+
+
    +
  • + Summary +
  • +
  • + +
  • +
+
+
+
+
    +
  • + Description +
  • +
  • + +
  • +
+
+
+
+
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;