From 33f2e313933685afe0207f8877c07f864f1510a7 Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Thu, 14 Dec 2017 14:30:13 +0100
Subject: [PATCH] replaced old table with filter-table, removed edit button,
 made whole rows to links

---
 .../app/features/admin/partials/edit_org.html |  2 +-
 public/app/features/admin/partials/orgs.html  | 57 +++++++--------
 public/app/features/admin/partials/users.html | 69 ++++++++++---------
 .../alerting/partials/notifications_list.html | 63 ++++++++---------
 .../app/features/org/partials/select_org.html |  2 +-
 public/app/features/org/partials/teams.html   | 15 ++--
 .../features/playlist/partials/playlist.html  |  6 +-
 public/sass/components/_filter-table.scss     | 17 +++++
 8 files changed, 128 insertions(+), 103 deletions(-)

diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html
index 123e65ac919..975d663e9b0 100644
--- a/public/app/features/admin/partials/edit_org.html
+++ b/public/app/features/admin/partials/edit_org.html
@@ -16,7 +16,7 @@
 
 	<h3 class="page-heading">Organization Users</h3>
 
-	<table class="grafana-options-table">
+	<table class="filter-table">
 		<tr>
 			<th>Username</th>
 			<th>Email</th>
diff --git a/public/app/features/admin/partials/orgs.html b/public/app/features/admin/partials/orgs.html
index a3b0f04d39d..d28cf4dc967 100644
--- a/public/app/features/admin/partials/orgs.html
+++ b/public/app/features/admin/partials/orgs.html
@@ -1,37 +1,40 @@
 <page-header model="navModel"></page-header>
 
 <div class="page-container page-body">
-	<div class="page-action-bar">
+  <div class="page-action-bar">
     <div class="page-action-bar__spacer"></div>
     <a class="page-header__cta btn btn-success" href="org/new">
       <i class="fa fa-plus"></i>
       New Org
     </a>
-	</div>
+  </div>
 
-	<table class="filter-table form-inline">
-		<thead>
-			<tr>
-				<th>Id</th>
-				<th>Name</th>
-				<th></th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr ng-repeat="org in orgs">
-				<td>{{org.id}}</td>
-				<td>{{org.name}}</td>
-				<td class="text-right">
-					<a href="admin/orgs/edit/{{org.id}}" class="btn btn-inverse btn-small">
-						<i class="fa fa-edit"></i>
-						Edit
-					</a>
-					&nbsp;&nbsp;
-					<a ng-click="deleteOrg(org)" class="btn btn-danger btn-small">
-						<i class="fa fa-remove"></i>
-					</a>
-				</td>
-			</tr>
-		</tbody>
-	</table>
+  <table class="filter-table form-inline filter-table--hover">
+    <thead>
+      <tr>
+        <th>Id</th>
+        <th>Name</th>
+        <th style="width:1%"></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr ng-repeat="org in orgs">
+        <td class="link-td">
+          <a href="admin/orgs/edit/{{org.id}}">
+            {{org.id}}
+          </a>
+        </td>
+        <td class="link-td">
+          <a href="admin/orgs/edit/{{org.id}}">
+            {{org.name}}
+          </a>
+        </td>
+        <td class="text-right">
+          <a ng-click="deleteOrg(org)" class="btn btn-danger btn-small">
+            <i class="fa fa-remove"></i>
+          </a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/public/app/features/admin/partials/users.html b/public/app/features/admin/partials/users.html
index e98299eac64..66ab649e2cc 100644
--- a/public/app/features/admin/partials/users.html
+++ b/public/app/features/admin/partials/users.html
@@ -1,12 +1,13 @@
 <page-header model="ctrl.navModel"></page-header>
 
 <div class="page-container page-body">
-	<div class="page-action-bar">
-		<div class="gf-form">
-			<label class="gf-form-label">Search</label>
-			<input class="gf-form-input width-15" type="text" placeholder="Find user by name/login/email" tabindex="1" give-focus="true" ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.getUsers()" />
-		</div>
-		<div class="page-action-bar__spacer"></div>
+  <div class="page-action-bar">
+    <div class="gf-form">
+      <label class="gf-form-label">Search</label>
+      <input class="gf-form-input width-15" type="text" placeholder="Find user by name/login/email" tabindex="1" give-focus="true"
+        ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.getUsers()" />
+    </div>
+    <div class="page-action-bar__spacer"></div>
     <a class="btn btn-success" href="admin/users/create">
       <i class="fa fa-plus"></i>
       Add new user
@@ -14,39 +15,48 @@
   </div>
 
   <div class="admin-list-table">
-    <table class="filter-table form-inline">
+    <table class="filter-table form-inline filter-table--hover">
       <thead>
         <tr>
           <th></th>
           <th>Login</th>
           <th>Email</th>
           <th>
-						Seen
-						<tip>Time since user was seen using Grafana</tip>
-					</th>
-          <th></th>
+            Seen
+            <tip>Time since user was seen using Grafana</tip>
+          </th>
           <th></th>
+          <th style="width: 1%"></th>
         </tr>
       </thead>
       <tbody>
         <tr ng-repeat="user in ctrl.users">
-					<td class="width-4 text-center">
-						<img class="filter-table__avatar" ng-src="{{user.avatarUrl}}"></img>
-					</td>
-          <td>{{user.login}}</td>
-          <td>{{user.email}}</td>
-          <td>
-						{{user.lastSeenAtAge}}
-					</td>
-          <td>
-						<i class="fa fa-shield" ng-show="user.isAdmin" bs-tooltip="'Grafana Admin'"></i>
-					</td>
-          <td class="text-right">
-            <a href="admin/users/edit/{{user.id}}" class="btn btn-inverse btn-small">
-              <i class="fa fa-edit"></i>
-              Edit
+          <td class="width-4 text-center link-td">
+            <a href="admin/users/edit/{{user.id}}">
+              <img class="filter-table__avatar" ng-src="{{user.avatarUrl}}"></img>
             </a>
-            &nbsp;&nbsp;
+          </td>
+          <td class="link-td">
+            <a href="admin/users/edit/{{user.id}}">
+              {{user.login}}
+            </a>
+          </td>
+          <td class="link-td">
+            <a href="admin/users/edit/{{user.id}}">
+              {{user.email}}
+            </a>
+          </td>
+          <td class="link-td">
+            <a href="admin/users/edit/{{user.id}}">
+              {{user.lastSeenAtAge}}
+            </a>
+          </td>
+          <td class="link-td">
+            <a href="admin/users/edit/{{user.id}}">
+              <i class="fa fa-shield" ng-show="user.isAdmin" bs-tooltip="'Grafana Admin'"></i>
+            </a>
+          </td>
+          <td class="text-right">
             <a ng-click="ctrl.deleteUser(user)" class="btn btn-danger btn-small">
               <i class="fa fa-remove"></i>
             </a>
@@ -60,10 +70,7 @@
   <div class="admin-list-paging" ng-if="ctrl.showPaging">
     <ol>
       <li ng-repeat="page in ctrl.pages">
-        <button
-          class="btn btn-small"
-          ng-class="{'btn-secondary': page.current, 'btn-inverse': !page.current}"
-          ng-click="ctrl.navigateToPage(page)">{{page.page}}</button>
+        <button class="btn btn-small" ng-class="{'btn-secondary': page.current, 'btn-inverse': !page.current}" ng-click="ctrl.navigateToPage(page)">{{page.page}}</button>
       </li>
     </ol>
   </div>
diff --git a/public/app/features/alerting/partials/notifications_list.html b/public/app/features/alerting/partials/notifications_list.html
index a2f6f723696..1afd50dd12e 100644
--- a/public/app/features/alerting/partials/notifications_list.html
+++ b/public/app/features/alerting/partials/notifications_list.html
@@ -1,7 +1,7 @@
 <page-header model="ctrl.navModel"></page-header>
 
 <div class="page-container page-body">
-	<div class="page-action-bar">
+  <div class="page-action-bar">
     <div class="page-action-bar__spacer">
     </div>
 
@@ -11,34 +11,35 @@
     </a>
   </div>
 
-	<table class="grafana-options-table">
-		<thead>
-			<th style="min-width: 200px"><strong>Name</strong></th>
-			<th style="min-width: 100px">Type</th>
-			<th style="width: 1%"></th>
-		</thead>
-		<tr ng-repeat="notification in ctrl.notifications">
-			<td>
-				<a href="alerting/notification/{{notification.id}}/edit">
-					{{notification.name}}
-				</a>
-			</td>
-			<td>
-				{{notification.type}}
-			</td>
-			<td class="text-right">
-				<span class="btn btn-secondary btn-small" ng-show="notification.isDefault == true">
-					default
-				</span>
-				<a href="alerting/notification/{{notification.id}}/edit" class="btn btn-inverse btn-small">
-					<i class="fa fa-edit"></i>
-					edit
-				</a>
-				<a ng-click="ctrl.deleteNotification(notification.id)" class="btn btn-danger btn-small">
-          <i class="fa fa-remove"></i>
-        </a>
-			</td>
-		</tr>
-	</table>
-
+  <table class="filter-table filter-table--hover">
+    <thead>
+      <th style="min-width: 200px">
+        <strong>Name</strong>
+      </th>
+      <th style="min-width: 100px">Type</th>
+      <th style="width: 1%"></th>
+    </thead>
+    <tbody>
+      <tr ng-repeat="notification in ctrl.notifications">
+        <td class="link-td">
+          <a href="alerting/notification/{{notification.id}}/edit">
+            {{notification.name}}
+          </a>
+        </td>
+        <td class="link-td">
+          <a href="alerting/notification/{{notification.id}}/edit">
+            {{notification.type}}
+          </a>
+        </td>
+        <td class="text-right">
+          <span class="btn btn-secondary btn-small" ng-show="notification.isDefault == true">
+            default
+          </span>
+          <a ng-click="ctrl.deleteNotification(notification.id)" class="btn btn-danger btn-small">
+            <i class="fa fa-remove"></i>
+          </a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/public/app/features/org/partials/select_org.html b/public/app/features/org/partials/select_org.html
index 43fc555bf42..c8e143c80c1 100644
--- a/public/app/features/org/partials/select_org.html
+++ b/public/app/features/org/partials/select_org.html
@@ -25,7 +25,7 @@
 			</div>
 
 			<div style="display: inline-block; width: 400px; margin: 30px 0">
-				<table class="grafana-options-table">
+				<table class="filter-table">
 					<tr ng-repeat="org in orgs">
 						<td class="nobg max-width-btns">
 							<a ng-click="setUsingOrg(org)" class="btn btn-inverse">
diff --git a/public/app/features/org/partials/teams.html b/public/app/features/org/partials/teams.html
index 67d24b1f94b..daa76301de6 100644
--- a/public/app/features/org/partials/teams.html
+++ b/public/app/features/org/partials/teams.html
@@ -18,26 +18,23 @@
   </div>
 
   <div class="admin-list-table">
-    <table class="filter-table form-inline" ng-show="ctrl.teams.length > 0">
+    <table class="filter-table filter-table--hover form-inline" ng-show="ctrl.teams.length > 0">
       <thead>
         <tr>
           <th>Name</th>
           <th>Members</th>
-          <th></th>
+          <th style="width: 1%"></th>
         </tr>
       </thead>
       <tbody>
         <tr ng-repeat="team in ctrl.teams">
-          <td>
+          <td class="link-td">
             <a href="org/teams/edit/{{team.id}}">{{team.name}}</a>
           </td>
-          <td>#Count</td>
+          <td class="link-td">
+            <a href="org/teams/edit/{{team.id}}">#Count</a>
+          </td>
           <td class="text-right">
-            <a href="org/teams/edit/{{team.id}}" class="btn btn-inverse btn-small">
-              <i class="fa fa-edit"></i>
-              Edit
-            </a>
-            &nbsp;&nbsp;
             <a ng-click="ctrl.deleteTeam(team)" class="btn btn-danger btn-small">
               <i class="fa fa-remove"></i>
             </a>
diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html
index c07fce48d02..0c35563a282 100644
--- a/public/app/features/playlist/partials/playlist.html
+++ b/public/app/features/playlist/partials/playlist.html
@@ -34,7 +34,7 @@
 			</div>
 
 			<div ng-if="ctrl.filteredDashboards.length > 0">
-				<table class="grafana-options-table playlist-available-list">
+				<table class="filter-table playlist-available-list">
 					<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
 						<td>
 							<i class="icon-gf icon-gf-dashboard"></i>
@@ -51,7 +51,7 @@
 				</table>
 			</div>
 			<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0;">
-				<table class="grafana-options-table playlist-available-list">
+				<table class="filter-table playlist-available-list">
 					<tr ng-repeat="tag in ctrl.filteredTags">
 						<td>
 							<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
@@ -72,7 +72,7 @@
 
 		<div class="col-lg-6">
 			<h5 class="page headering playlist-column-header">Selected</h5>
-			<table class="grafana-options-table playlist-available-list">
+			<table class="filter-table playlist-available-list">
 				<tr ng-repeat="playlistItem in ctrl.playlistItems">
 					<td ng-if="playlistItem.type === 'dashboard_by_id'">
 						<i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
diff --git a/public/sass/components/_filter-table.scss b/public/sass/components/_filter-table.scss
index 074286fad80..3c636a6a27d 100644
--- a/public/sass/components/_filter-table.scss
+++ b/public/sass/components/_filter-table.scss
@@ -42,6 +42,23 @@
     }
   }
 
+  .link-td {
+    padding: 0;
+    line-height: 30px;
+    height: 30px;
+    white-space: nowrap;
+
+    &.filter-table__switch-cell {
+      padding: 0;
+      border-right: 3px solid $page-bg;
+    }
+
+    a {
+      display: block;
+      padding: $table-cell-padding;
+    }
+  }
+
   .ellipsis {
     display: block;
     width: 100%;