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/dashboard/partials/globalAlerts.html b/public/app/features/dashboard/partials/globalAlerts.html new file mode 100644 index 00000000000..d66c7e98d8c --- /dev/null +++ b/public/app/features/dashboard/partials/globalAlerts.html @@ -0,0 +1,282 @@ + + + + +
+
+

Global alerts

+ +
+
+
    +
  • Filters:
    • +
  • Alert State
    • +
    • +
  • Dashboards
    • +
    • +
  • + + + +
    • +
+
+
+
+ + +
+
diff --git a/public/app/panels/graph/alerting.html b/public/app/panels/graph/alerting.html index 7230c6ef488..9e08fc4f6cb 100644 --- a/public/app/panels/graph/alerting.html +++ b/public/app/panels/graph/alerting.html @@ -31,77 +31,64 @@
Choose your query:

Select an exising query to alert on:

-
-
-
    -
    • -
  • None
    • -
-
-
+
+
    +
    • +
  • None
    • +
+
-
-
-
-
    -
    • -
  • A
    • -
  • apps
    • -
    • -
  • fakesite
    • -
  • counters
    • -
  • requests
    • -
  • count
    • -
  • scaleToSeconds(1)
    • -
  • aliasByNode(2)
    • -
    • -
-
-
+
+
    +
    • +
  • 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
    • -
    • -
-
-
+
+
    +
    • +
  • 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
    • -
    • -
-
-
+
+
    +
    • +
  • 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
    • -
    • -
-
-
+
+
    +
    • +
  • 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
    • -
    • -
-
-
+
+
    +
    • +
  • E
    • +
  • Metric: apps.backend.backend_01.counters.requests.count Alias: Bristow Aggregator: Sum Downsample: 1m Aggregator Sum Tags host = test
    • +
    • +
+
diff --git a/public/less/filter-list.less b/public/less/filter-list.less new file mode 100644 index 00000000000..50da5864db0 --- /dev/null +++ b/public/less/filter-list.less @@ -0,0 +1,167 @@ +// ========================================================================== +// FILTER LIST +// ========================================================================== + + + +// List +// -------------------------------------------------------------------------- + +.filter-list { + max-width: 1000px; + 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; + } +} + + + +// Filters +// -------------------------------------------------------------------------- + +.filter-list-filters { + display: inline-block; + margin-bottom: 40px; +} + + + +// Actions +// -------------------------------------------------------------------------- + +.filter-list-actions { + margin: 0 0 10px; + padding: 0; + list-style: none; +} + +.filter-list-actions > li { + display: inline-block; + margin-right: 10px; +} + +.filter-list-actions-selected { + text-transform: uppercase; +} diff --git a/public/less/gfbox.less b/public/less/gfbox.less index 48d0b6a7ca8..d173ace1787 100644 --- a/public/less/gfbox.less +++ b/public/less/gfbox.less @@ -80,6 +80,10 @@ max-width: 653px; } +.page-wide { + max-width: none; +} + .admin-page { max-width: 800px; margin-left: 10px; diff --git a/public/less/grafana.less b/public/less/grafana.less index 0d4e5f44dc0..aa58f749b82 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -19,6 +19,7 @@ @import "tabs.less"; @import "timepicker.less"; @import "alerting.less"; +@import "filter-list.less"; .row-control-inner { padding:0px; diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 3324c3f4b86..af8f3cdec75 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 27dcf8575f4..67a8dfd7257 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;