added global alerts list stub and styles

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'

public/app/panels/graph/alerting.html

@@ -31,7 +31,6 @@
 <div class="editor-row" style="margin-bottom: 20px;">
   <h5>Choose your query:</h5>
   <p>Select an exising query to alert on:</p>
-  <div class="section">
   <div class="tight-form">
     <ul class="tight-form-list">
       <li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li>
@@ -39,9 +38,6 @@
     </ul>
     <div class="clearfix"></div>
   </div>
-  </div>
-  <div class="clearfix"></div>
-  <div class="section">
   <div class="tight-form">
     <ul class="tight-form-list">
       <li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li>
@@ -58,8 +54,6 @@
     </ul>
     <div class="clearfix"></div>
   </div>
-  </div>
-  <div class="section">
   <div class="tight-form">
     <ul class="tight-form-list">
       <li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li>
@@ -69,8 +63,6 @@
     </ul>
     <div class="clearfix"></div>
   </div>
-  </div>
-  <div class="section">
   <div class="tight-form">
     <ul class="tight-form-list">
       <li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li>
@@ -80,8 +72,6 @@
     </ul>
     <div class="clearfix"></div>
   </div>
-  </div>
-  <div class="section">
   <div class="tight-form">
     <ul class="tight-form-list">
       <li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" /></li>
@@ -91,8 +81,6 @@
     </ul>
     <div class="clearfix"></div>
   </div>
-  </div>
-  <div class="section">
   <div class="tight-form last">
     <ul class="tight-form-list">
       <li class="tight-form-item"><input type="radio" class="radio input-small" name="query" style="margin: 0 4px 4px;" checked /></li>
@@ -102,7 +90,6 @@
     </ul>
     <div class="clearfix"></div>
   </div>
-  </div>
 </div>
 <div class="editor-row" style="margin-bottom: 20px;">
   <p>Or write a new custom alerting query:</p>

public/less/filter-list.less

+// ==========================================================================
+// 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;
+}

public/less/gfbox.less

@@ -80,6 +80,10 @@
   max-width: 653px;
 }
 
+.page-wide {
+  max-width: none;
+}
+
 .admin-page {
   max-width: 800px;
   margin-left: 10px;

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;

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;

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;