diff --git a/public/app/core/routes/all.js b/public/app/core/routes/all.js index a7e36a0e228..7a912621ba5 100644 --- a/public/app/core/routes/all.js +++ b/public/app/core/routes/all.js @@ -131,6 +131,9 @@ define([ templateUrl: 'app/partials/reset_password.html', controller : 'ResetPasswordCtrl', }) + .when('/global-alerts', { + templateUrl: 'app/features/dashboard/partials/globalAlerts.html', + }) .otherwise({ templateUrl: 'app/partials/error.html', controller: 'ErrorCtrl' diff --git a/public/app/features/admin/partials/orgs.html b/public/app/features/admin/partials/orgs.html index 573c0799c68..01d2483c7a7 100644 --- a/public/app/features/admin/partials/orgs.html +++ b/public/app/features/admin/partials/orgs.html @@ -4,33 +4,35 @@ -
-
+
+

Organizations

- - - - - - - - - - - - +
IdName
{{org.id}}{{org.name}} - - - Edit - -    - - - -
+ + + + + + + + + + + + + +
IdName
{{org.id}}{{org.name}} + + + Edit + +    + + + +
-
diff --git a/public/app/features/admin/partials/users.html b/public/app/features/admin/partials/users.html index 6f8365e75dd..c7839b755e0 100644 --- a/public/app/features/admin/partials/users.html +++ b/public/app/features/admin/partials/users.html @@ -5,38 +5,42 @@ -
-
+
+

Users

- - - - - - - - - - - - - - - - - +
IdNameLoginEmailGrafana Admin
{{user.id}}{{user.name}}{{user.login}}{{user.email}}{{user.isAdmin}} - - - Edit - -    - - - -
+ + + + + + + + + + + + + + + + + + + +
IdNameLoginEmailGrafana Admin
{{user.id}}{{user.name}}{{user.login}}{{user.email}}{{user.isAdmin}} + + + Edit + +    + + + +
diff --git a/public/app/features/dashboard/partials/globalAlerts.html b/public/app/features/dashboard/partials/globalAlerts.html new file mode 100644 index 00000000000..a849f50ffdd --- /dev/null +++ b/public/app/features/dashboard/partials/globalAlerts.html @@ -0,0 +1,282 @@ + + + + +
+
+

Global alerts

+ +
+
+
    +
  • Filters:
    • +
  • Alert State
    • +
    • +
  • Dashboards
    • +
    • +
  • + + + +
    • +
+
+
+
+
    +
  • +
    + + +
    +
    • +
  • +
    + + +
    +
    • +
  • + +
    • +
  • + 2 selected, showing 6 of 6 total +
    • +
+
    +
  • + +
    +
    Alert query configure alerting
    +
    +
      +
    • A
      • +
    • apps
      • +
      • +
    • fakesite
      • +
    • counters
      • +
    • requests
      • +
    • count
      • +
    • scaleToSeconds(1)
      • +
    • aliasByNode(2)
      • +
    +
    +
    +
    +
    • +
  • + +
    +
    Alert query configure alerting
    +
    +
      +
    • A
      • +
    • apps
      • +
      • +
    • fakesite
      • +
    • counters
      • +
    • requests
      • +
    • count
      • +
    • scaleToSeconds(1)
      • +
    • aliasByNode(2)
      • +
    +
    +
    +
    +
    • +
  • + +
    +
    Alert query configure alerting
    +
    +
      +
    • A
      • +
    • apps
      • +
      • +
    • fakesite
      • +
    • counters
      • +
    • requests
      • +
    • count
      • +
    • scaleToSeconds(1)
      • +
    • aliasByNode(2)
      • +
    +
    +
    +
    +
    • +
  • + +
    +
    Alert query configure alerting
    +
    +
      +
    • A
      • +
    • apps
      • +
      • +
    • fakesite
      • +
    • counters
      • +
    • requests
      • +
    • count
      • +
    • scaleToSeconds(1)
      • +
    • aliasByNode(2)
      • +
    +
    +
    +
    +
    • +
  • + +
    +
    Alert query configure alerting
    +
    +
      +
    • A
      • +
    • apps
      • +
      • +
    • fakesite
      • +
    • counters
      • +
    • requests
      • +
    • count
      • +
    • scaleToSeconds(1)
      • +
    • aliasByNode(2)
      • +
    +
    +
    +
    +
    • +
+
+
diff --git a/public/app/features/org/partials/datasources.html b/public/app/features/org/partials/datasources.html index a2e62673e70..4a857845a0a 100644 --- a/public/app/features/org/partials/datasources.html +++ b/public/app/features/org/partials/datasources.html @@ -5,47 +5,97 @@ -
-
+
+

Data sources

+ +
No datasources defined
- - - - - - - - - - - - - - - +
NameUrl
-   - {{ds.name}} - - {{ds.url}} - - - default - - - - - Edit - - - - - -
+ + + + + + + + + + + + + + + + + +
NameUrl
+   {{ds.name}} + + {{ds.url}} + + + default + + + + + Edit + + + + + +
diff --git a/public/app/features/org/partials/orgApiKeys.html b/public/app/features/org/partials/orgApiKeys.html index 9db700ab437..cf1bedd7877 100644 --- a/public/app/features/org/partials/orgApiKeys.html +++ b/public/app/features/org/partials/orgApiKeys.html @@ -4,9 +4,8 @@ -
-
- +
+

API Keys

@@ -32,21 +31,25 @@ - - - - - - - - - - - +
NameRole
{{t.name}}{{t.role}} - - - -
+ + + + + + + + + + + + + +
NameRole
{{t.name}}{{t.role}} + + + +
diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index b54f8875f87..ea193694e19 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -4,8 +4,8 @@ -
-
+
+

Organization users

@@ -18,21 +18,23 @@ - - - - - - - +
LoginEmailRole
+ + + + + + + + - + -
LoginEmailRole
{{user.login}}{{user.email}}{{user.email}} + @@ -41,36 +43,49 @@
-
- {{invite.email}} - {{invite.name}} - - -   - - - - - -
- {{invite.url}}
- -   - - - Invited: {{invite.createdOn | date: 'shortDate'}} by {{invite.invitedBy}} - -
-
+ + + + + + + + + + + + + + + + + + + +
EmailName
{{invite.email}}{{invite.name}} + +   + + + + +
+ {{invite.url}}

+ +   + + + Invited: {{invite.createdOn | date: 'shortDate'}} by {{invite.invitedBy}} + +
-
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/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index d246b4d3914..63506b58bd0 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -5,8 +5,8 @@ -
-
+
+

Profile

@@ -62,19 +62,28 @@

Organizations

- - - - - - +
Name: {{org.name}}Role: {{org.role}} - - Current - - - Select - -
+ + + + + + + + + + + + + +
NameRole
{{org.name}}{{org.role}} + + Current + + + Select + +
diff --git a/public/app/panels/graph/alerting.html b/public/app/panels/graph/alerting.html new file mode 100644 index 00000000000..9e08fc4f6cb --- /dev/null +++ b/public/app/panels/graph/alerting.html @@ -0,0 +1,220 @@ +
+ 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 ff9633d0576..ec84a15fd1d 100644 --- a/public/app/panels/graph/module.js +++ b/public/app/panels/graph/module.js @@ -33,6 +33,7 @@ function (angular, _, moment, kbn, 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/filter-controls.less b/public/less/filter-controls.less new file mode 100644 index 00000000000..287bebe3757 --- /dev/null +++ b/public/less/filter-controls.less @@ -0,0 +1,37 @@ +// ========================================================================== +// FILTER CONTROLS +// ========================================================================== + + + +// Filters +// -------------------------------------------------------------------------- + +.filter-controls-filters { + display: inline-block; + margin-bottom: 40px; +} + +.tab-pane > .filter-controls-filters { + margin-top: 20px; +} + + + +// Actions +// -------------------------------------------------------------------------- + +.filter-controls-actions { + margin: 0 0 10px; + padding: 0; + list-style: none; +} + +.filter-controls-actions > li { + display: inline-block; + margin-right: 10px; +} + +.filter-controls-actions-selected { + text-transform: uppercase; +} diff --git a/public/less/filter-list.less b/public/less/filter-list.less new file mode 100644 index 00000000000..181aedf4d3c --- /dev/null +++ b/public/less/filter-list.less @@ -0,0 +1,136 @@ +// ========================================================================== +// FILTER LIST +// ========================================================================== + + + +// List +// -------------------------------------------------------------------------- + +.filter-list { + margin: 0; + padding: 0; + list-style: none; +} + +.filter-list > li { + padding: 10px; + margin-bottom: 2px; + background: @grafanaPanelBackground; + + &:last-child { + margin: 0; + } +} + + + +// Card +// -------------------------------------------------------------------------- + +.filter-list-card { + display: table; + width: 100%; + margin: 0; + padding: 0; + list-style: none; +} + +.filter-list-card > li { + display: table-cell; + vertical-align: top; +} + +.filter-list-card-select { + width: 23px; + padding-right: 5px; +} + +.filter-list-card-title { + display: block; + font-size: 16px; + font-weight: normal; +} + +.filter-list-card-status { + color: #777; + font-size: 12px; +} + +.filter-list-card-state { + display: inline-block; + padding: 5px 0 0 28px; + background: 0 bottom no-repeat; + background-size: 24px auto; + font-size: 14px; + text-transform: uppercase; + + &.online { + background-image: url('/img/online.svg'); + color: @online; + } + + &.warn { + background-image: url('/img/warn-tiny.svg'); + color: @warn; + } + + &.critical { + background-image: url('/img/critical.svg'); + color: @critical; + } +} + +.filter-list-card-controls { + float: right; +} + +.filter-list-card-links, +.filter-list-card-config, +.filter-list-card-expand { + display: inline-block; + vertical-align: middle; +} + +.filter-list-card-link { + display: block; + color: #777; + text-align: right; + + > a { + color: #777; + } +} + +.filter-list-card-config { + padding: 8px 8px 8px 16px; + color: #777; + font-size: 25px; + + > a { + color: #777; + } +} + +.filter-list-card-expand { + width: 20px; + padding: 8px 0 8px 8px; + color: #aaa; + font-size: 30px; + text-align: center; + cursor: pointer; +} + +.filter-list-card-details { + padding: 20px 0 0 30px; +} + +.filter-list-card-details-heading { + font-weight: normal; + + > a { + float: right; + color: @blue; + font-size: 12px; + } +} diff --git a/public/less/filter-table.less b/public/less/filter-table.less new file mode 100644 index 00000000000..6729b425e51 --- /dev/null +++ b/public/less/filter-table.less @@ -0,0 +1,57 @@ +// ========================================================================== +// FILTER TABLE +// ========================================================================== + + + +// Table +// -------------------------------------------------------------------------- + +.filter-table * { + box-sizing: border-box; +} + +.filter-table { + width: 100%; + border-collapse: collapse; + // table-layout: fixed; +} + +.filter-table tr { + background: @grafanaPanelBackground; + border-bottom: 2px solid @bodyBackground; +} + +.filter-table th { + width: auto; + padding: 10px 15px 10px 0; + text-align: left; + + &:first-child { + padding-left: 15px; + } +} + +.filter-table td { + padding: 15px 15px 15px 0; + + &:first-child { + padding-left: 15px; + } +} + +.filter-table .ellipsis { + display: block; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.filter-table .expanded { + border-color: @grafanaPanelBackground; +} + +.filter-table .expanded > td { + padding-bottom: 0; +} diff --git a/public/less/gfbox.less b/public/less/gfbox.less index eb386f740d7..46967d143c5 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; @@ -73,6 +80,10 @@ max-width: 653px; } +.page-wide { + max-width: 1000px; +} + .admin-page { max-width: 800px; margin-left: 10px; diff --git a/public/less/grafana.less b/public/less/grafana.less index 041c0112481..dcd6b4b734d 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -20,6 +20,10 @@ @import "fonts.less"; @import "tabs.less"; @import "timepicker.less"; +@import "alerting.less"; +@import "filter-controls.less"; +@import "filter-list.less"; +@import "filter-table.less"; .row-control-inner { padding:0px; diff --git a/public/less/overrides.less b/public/less/overrides.less index e08e7ab30a2..291a9a765f4 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 757ef2b973c..b46456e74c2 100644 --- a/public/less/tightform.less +++ b/public/less/tightform.less @@ -161,6 +161,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; diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 783304cd32a..f2b4cba1706 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -25,6 +25,12 @@ @purple: #9933CC; @variable: #32D1DF; +// Status colors +// ------------------------- +@online: #10a345; +@warn: #ffc03c; +@critical: #ed2e18; + // grafana Variables // ------------------------- @grafanaPanelBackground: @grayDarker; diff --git a/public/less/variables.light.less b/public/less/variables.light.less index 827e2c90b3c..d4c0cd18998 100644 --- a/public/less/variables.light.less +++ b/public/less/variables.light.less @@ -31,6 +31,12 @@ @purple: #9954BB; @variable: #2AB2E4; +// Status colors +// ------------------------- +@online: #10a345; +@warn: #ffc03c; +@critical: #ed2e18; + // grafana Variables // ------------------------- @grafanaPanelBackground: @grayLighter;