updated-list-views: added filter controls, updated tables on API Keys and Data Sources

public/app/features/dashboard/partials/globalAlerts.html

@@ -8,7 +8,7 @@
   <div class="page-wide">
     <h2>Global alerts</h2>
 
-    <div class="filter-list-filters">
+    <div class="filter-controls-filters">
       <div class="tight-form last">
         <ul class="tight-form-list">
           <li class="tight-form-item">Filters:</li>
@@ -25,7 +25,7 @@
         <div class="clearfix"></div>
       </div>
     </div>
-    <ul class="filter-list-actions">
+    <ul class="filter-controls-actions">
       <li>
         <div class="dropdown">
           <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
@@ -53,7 +53,7 @@
         </button>
       </li>
       <li>
-        <span class="filter-list-actions-selected">2 selected, showing 6 of 6 total</span>
+        <span class="filter-controls-actions-selected">2 selected, showing 6 of 6 total</span>
       </li>
     </ul>
     <ul class="filter-list">

public/app/features/org/partials/datasources.html

@@ -9,6 +9,51 @@
 	<div class="page-wide">
 		<h2>Data sources</h2>
 
+		<div class="filter-controls-filters">
+      <div class="tight-form last">
+        <ul class="tight-form-list">
+          <li class="tight-form-item">Filters:</li>
+          <li class="tight-form-item">Name</li>
+          <li><!-- <value-select-dropdown></value-select-dropdown> --></li>
+          <li class="tight-form-item">URL</li>
+          <li><!-- <value-select-dropdown></value-select-dropdown> --></li>
+          <li class="tight-form-item">
+            <a class="pointer">
+              <i class="fa fa-pencil"></i>
+            </a>
+          </li>
+        </ul>
+        <div class="clearfix"></div>
+      </div>
+    </div>
+
+    <ul class="filter-controls-actions">
+      <li>
+        <div class="dropdown">
+          <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
+            <input class="cr1" id="state-enabled" type="checkbox">
+            <label for="state-enabled" class="cr1"></label> <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" role="menu">
+            <li><a>All</a></li>
+          </ul>
+        </div>
+      </li>
+      <li>
+        <div class="dropdown">
+          <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
+            Bulk Actions &nbsp; <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" role="menu">
+            <li><a>Update notifications</a></li>
+          </ul>
+        </div>
+      </li>
+      <li>
+        <span class="filter-controls-actions-selected">0 selected, showing 2 of 2 total</span>
+      </li>
+    </ul>
+
 		<div ng-if="datasources.length === 0">
 			<em>No datasources defined</em>
 		</div>
@@ -16,15 +61,20 @@
 		<table class="filter-table" ng-if="datasources.length > 0">
 			<thead>
 				<tr>
-					<th><strong>Name</strong></th>
-					<th><strong>Url</strong></th>
+					<th style="width: 48px;"></th>
+					<th style="width: auto;"><strong>Name</strong></th>
+					<th style="width: auto;"><strong>Url</strong></th>
 					<th style="width: 60px;"></th>
 					<th style="width: 65px;"></th>
-					<th style="width: 30px;"></th>
+					<th style="width: 34px;"></th>
 				</tr>
 			</thead>
 			<tbody>
 				<tr ng-repeat="ds in datasources">
+					<td>
+						<input class="cr1" id="alert1" type="checkbox">
+            <label for="alert1" class="cr1"></label>
+					</td>
 					<td>
 						<span class="ellipsis">
 							<i class="fa fa-database"></i> &nbsp;

public/app/features/org/partials/orgApiKeys.html

@@ -4,9 +4,8 @@
 	</ul>
 </topnav>
 
-<div class="page-container">
+<div class="page-container" style="background: transparent; border: 0;">
 	<div class="page">
-
 		<h2>
 			API Keys
 		</h2>
@@ -32,21 +31,75 @@
 			</ul>
 		</form>
 
-		<table class="grafana-options-table" style="width: 250px">
-			<tr>
-				<th style="text-align: left">Name</th>
-				<th style="text-align: left">Role</th>
-				<th></th>
-			</tr>
-			<tr ng-repeat="t in tokens">
-				<td>{{t.name}}</td>
-				<td>{{t.role}}</td>
-				<td style="width: 1%">
-					<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
-						<i class="fa fa-remove"></i>
-					</a>
-				</td>
-			</tr>
+		<div class="filter-controls-filters">
+      <div class="tight-form last">
+        <ul class="tight-form-list">
+          <li class="tight-form-item">Filters:</li>
+          <li class="tight-form-item">Name</li>
+          <li><!-- <value-select-dropdown></value-select-dropdown> --></li>
+          <li class="tight-form-item">Role</li>
+          <li><!-- <value-select-dropdown></value-select-dropdown> --></li>
+          <li class="tight-form-item">
+            <a class="pointer">
+              <i class="fa fa-pencil"></i>
+            </a>
+          </li>
+        </ul>
+        <div class="clearfix"></div>
+      </div>
+    </div>
+
+    <ul class="filter-controls-actions">
+      <li>
+        <div class="dropdown">
+          <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
+            <input class="cr1" id="state-enabled" type="checkbox">
+            <label for="state-enabled" class="cr1"></label> <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" role="menu">
+            <li><a>All</a></li>
+          </ul>
+        </div>
+      </li>
+      <li>
+        <div class="dropdown">
+          <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
+            Bulk Actions &nbsp; <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" role="menu">
+            <li><a>Update notifications</a></li>
+          </ul>
+        </div>
+      </li>
+      <li>
+        <span class="filter-controls-actions-selected">0 selected, showing 2 of 2 total</span>
+      </li>
+    </ul>
+
+		<table class="filter-table">
+			<thead>
+				<tr>
+					<th style="width: 48px;"></th>
+					<th>Name</th>
+					<th>Role</th>
+					<th style="width: 34px;"></th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr ng-repeat="t in tokens">
+					<td>
+						<input class="cr1" id="alert1" type="checkbox">
+            <label for="alert1" class="cr1"></label>
+					</td>
+					<td>{{t.name}}</td>
+					<td>{{t.role}}</td>
+					<td style="width: 1%">
+						<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
+							<i class="fa fa-remove"></i>
+						</a>
+					</td>
+				</tr>
+			</tbody>
 		</table>
 	</div>
 

public/less/filter-controls.less

@@ -0,0 +1,33 @@
+// ==========================================================================
+// FILTER CONTROLS
+// ==========================================================================
+
+
+
+// Filters
+// --------------------------------------------------------------------------
+
+.filter-controls-filters {
+  display: inline-block;
+  margin-bottom: 40px;
+}
+
+
+
+// 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;
+}

public/less/filter-list.less

@@ -8,7 +8,6 @@
 // --------------------------------------------------------------------------
 
 .filter-list {
-  max-width: 1000px;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -135,33 +134,3 @@
     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

@@ -81,7 +81,7 @@
 }
 
 .page-wide {
-  max-width: none;
+  max-width: 1000px;
 }
 
 .admin-page {

public/less/grafana.less

@@ -19,6 +19,7 @@
 @import "tabs.less";
 @import "timepicker.less";
 @import "alerting.less";
+@import "filter-controls.less";
 @import "filter-list.less";
 @import "filter-table.less";