Merge branch 'master' of https://github.com/grafana/grafana into select-form-updates

public/app/core/utils/kbn.js

@@ -593,12 +593,12 @@ function($, _) {
           {text: 'packets/sec', value: 'pps'},
           {text: 'bits/sec',    value: 'bps'},
           {text: 'bytes/sec',   value: 'Bps'},
-          {text: 'kilobites/sec', value: 'Kbits'},
+          {text: 'kilobits/sec', value: 'Kbits'},
           {text: 'kilobytes/sec',    value: 'KBs'},
-          {text: 'megabites/sec', value: 'Mbits'},
+          {text: 'megabits/sec', value: 'Mbits'},
           {text: 'megabytes/sec',    value: 'MBs'},
           {text: 'gigabytes/sec',   value: 'GBs'},
-          {text: 'gigabites/sec',   value: 'Gbits'},
+          {text: 'gigabits/sec',   value: 'Gbits'},
         ]
       },
       {

public/app/features/admin/partials/admin_home.html

@@ -1,4 +1,4 @@
-<navbar icon="fa fa-fw fa-cogs" title="Admin">
+<navbar icon="fa fa-fw fa-cogs" title="Admin" title-url="admin">
 </navbar>
 
 <div class="page-container">

public/app/features/admin/partials/edit_org.html

@@ -4,55 +4,41 @@
 
 <div class="page-container">
 	<div class="page-header">
-		<h1>
-			Edit Organization
-		</h1>
+		<h1>Edit Organization</h1>
 	</div>
 
-		<form name="orgDetailsForm">
-			<div>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 100px">
-							Name
-						</li>
-						<li>
-							<input type="text" required ng-model="org.name" class="input-xxlarge tight-form-input last" >
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-			</div>
+	<form name="orgDetailsForm" class="gf-form-group">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Name</span>
+			<input type="text" required ng-model="org.name" class="gf-form-input max-width-14" >
+		</div>
 
-			<br>
-			<button type="submit" class="pull-right btn btn-success" ng-click="update()" ng-show="!createMode">Update</button>
-		</form>
+		<div class="gf-form-button-row">
+			<button type="submit" class="btn btn-success" ng-click="update()" ng-show="!createMode">Update</button>
+		</div>
+	</form>
 
-		<h3>
-			Organization Users
-		</h3>
+	<h3 class="page-heading">Organization Users</h3>
 
-		<table class="grafana-options-table form-inline">
-			<tr>
-				<th>Username</th>
-				<th>Email</th>
-				<th>Role</th>
-				<th></th>
-			</tr>
-			<tr ng-repeat="orgUser in orgUsers">
-				<td>{{orgUser.login}}</td>
-				<td>{{orgUser.email}}</td>
-				<td>
-					<select type="text" ng-model="orgUser.role" class="input-small" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(orgUser)">
-					</select>
-				</td>
-				<td style="width: 1%">
-					<a ng-click="removeOrgUser(orgUser)" class="btn btn-danger btn-mini">
-						<i class="fa fa-remove"></i>
-					</a>
-				</td>
-			</tr>
-		</table>
-
-	</div>
+	<table class="grafana-options-table">
+		<tr>
+			<th>Username</th>
+			<th>Email</th>
+			<th>Role</th>
+			<th></th>
+		</tr>
+		<tr ng-repeat="orgUser in orgUsers">
+			<td>{{orgUser.login}}</td>
+			<td>{{orgUser.email}}</td>
+			<td>
+				<select type="text" ng-model="orgUser.role" class="gf-form-input max-width-8" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(orgUser)">
+				</select>
+			</td>
+			<td style="width: 1%">
+				<a ng-click="removeOrgUser(orgUser)" class="btn btn-danger btn-mini">
+					<i class="fa fa-remove"></i>
+				</a>
+			</td>
+		</tr>
+	</table>
 </div>

public/app/features/admin/partials/edit_user.html

@@ -4,126 +4,72 @@
 
 <div class="page-container">
 	<div class="page-header">
-		<h1>
-			Edit User
-		</h1>
+		<h1>Edit User</h1>
 	</div>
 
-	<form name="userForm">
-		<div>
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 100px">
-						Name
-					</li>
-					<li>
-						<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
-					</li>
-				</ul>
-				<div class="clearfix"></div>
+	<form name="userForm" class="gf-form-group">
+			<div class="gf-form">
+				<span class="gf-form-label width-10">Name</span>
+				<input type="text" required ng-model="user.name" class="gf-form-input max-width-25" >
 			</div>
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 100px">
-						Email
-					</li>
-					<li>
-						<input type="email" ng-model="user.email" class="input-xxlarge tight-form-input last" >
-					</li>
-				</ul>
-				<div class="clearfix"></div>
+			<div class="gf-form">
+				<span class="gf-form-label width-10">Email</span>
+				<input type="email" ng-model="user.email" class="gf-form-input max-width-25" >
 			</div>
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 100px">
-						Username
-					</li>
-					<li>
-						<input type="text" ng-model="user.login" class="input-xxlarge tight-form-input last" >
-					</li>
-				</ul>
-				<div class="clearfix"></div>
+			<div class="gf-form">
+				<span class="gf-form-label width-10">Username</span>
+				<input type="text" ng-model="user.login" class="gf-form-input max-width-25" >
 			</div>
-		</div>
 
-		<br>
-		<button type="submit" class="pull-right btn btn-success" ng-click="update()" ng-show="!createMode">Update</button>
+			<div class="gf-form-button-row">
+				<button type="submit" class="btn btn-success" ng-click="update()" ng-show="!createMode">Update</button>
+			</div>
 	</form>
 
-	<h3>
-		Change password
-	</h3>
+	<h3 class="page-heading">Change password</h3>
 
-	<form name="passwordForm">
-		<div>
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 100px">
-						New password
-					</li>
-					<li>
-						<input type="password" required ng-minlength="4" ng-model="password" class="input-xxlarge tight-form-input last">
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+	<form name="passwordForm" class="gf-form-group">
+		<div class="gf-form">
+				<span class="gf-form-label width-10">New password</span>
+				<input type="password" required ng-minlength="4" ng-model="password" class="gf-form-input max-width-25">
 		</div>
 
-		<br>
-		<button type="submit" class="pull-right btn btn-success" ng-click="setPassword()">Update</button>
+		<div class="gf-form-button-row">
+			<button type="submit" class="btn btn-success" ng-click="setPassword()">Update</button>
+		</div>
 	</form>
 
-	<h3>
-		Permissions
-	</h3>
+	<h3 class="page-heading">Permissions</h3>
 
-	<div>
-		<div class="tight-form last">
-			<ul class="tight-form-list">
-				<li class="tight-form-item last">
-					Grafana Admin&nbsp;
-					<input class="cr1" id="permissions.isGrafanaAdmin" type="checkbox"
-					ng-model="permissions.isGrafanaAdmin" ng-checked="permissions.isGrafanaAdmin">
-					<label for="permissions.isGrafanaAdmin" class="cr1"></label>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+	<form name="passwordForm" class="gf-form-group">
+		<div class="gf-form" >
+			<editor-checkbox text="Grafana Admin" model="permissions.isGrafanaAdmin" style="line-height: 1.5rem;"></editor-checkbox>
 		</div>
-		<br>
-		<button type="submit" class="pull-right btn btn-success" ng-click="updatePermissions()">Update</button>
-		<br>
-	</div>
 
-	<h3>
-		Organizations
-	</h3>
+		<div class="gf-form-button-row">
+			<button type="submit" class="btn btn-success" ng-click="updatePermissions()">Update</button>
+		</div>
+	</form>
+
+	<h3 class="page-heading">Organizations</h3>
 
-	<form name="addOrgForm">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 160px">
-					Add organization
-				</li>
-				<li>
-					<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"
-					required class="input-xlarge tight-form-input" placeholder="organization name">
-				</li>
-				<li class="tight-form-item">
-					Role
-				</li>
-				<li>
-					<select type="text" ng-model="newOrg.role" class="input-small tight-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
-					</select>
-				</li>
-				<li>
-					<button class="btn btn-success tight-form-btn" ng-click="addOrgUser()">Add</button>
-				</li>
-				<div class="clearfix"></div>
-			</ul>
+	<form name="addOrgForm" class="gf-form-group">
+		<div class="gf-form-inline">
+			<div class="gf-form">
+				<span class="gf-form-label width-12">Add organization</span>
+				<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"	required class="gf-form-input max-width-20" placeholder="organization name">
+			</div>
+			<div class="gf-form">
+				<span class="gf-form-label">Role</span>
+				<select type="text" ng-model="newOrg.role" class="gf-form-input width-10" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']"></select>
+			</div>
+			<div class="gf-form">
+				<button class="btn btn-success gf-form-btn" ng-click="addOrgUser()">Add</button>
+			</div>
 		</div>
 	</form>
 
-	<table class="grafana-options-table form-inline">
+	<table class="grafana-options-table">
 		<tr>
 			<th>Name</th>
 			<th>Role</th>
@@ -134,7 +80,7 @@
 				{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId">Current</span>
 			</td>
 			<td>
-				<select type="text" ng-model="org.role" class="input-small" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(org)">
+				<select type="text" ng-model="org.role" class="gf-form-input max-width-12" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(org)">
 				</select>
 			</td>
 			<td style="width: 1%">

public/app/features/admin/partials/new_user.html

@@ -4,60 +4,29 @@
 
 <div class="page-container">
 	<div class="page-header">
-		<h1>
-			Add new user
-		</h1>
+		<h1>Add new user</h1>
 	</div>
 
-	<form name="userForm">
-		<div>
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 100px">
-						<strong>Name</strong>
-					</li>
-					<li>
-						<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 100px">
-						<strong>Email</strong>
-					</li>
-					<li>
-						<input type="email" ng-model="user.email" class="input-xxlarge tight-form-input last" >
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 100px">
-						<strong>Username</strong>
-					</li>
-					<li>
-						<input type="text" ng-model="user.login" class="input-xxlarge tight-form-input last" >
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 100px">
-						<strong>Password</strong>
-					</li>
-					<li>
-						<input type="password" required ng-model="user.password" class="input-xxlarge tight-form-input last" >
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+	<form name="userForm" class="gf-form-group">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Name</span>
+			<input type="text" required ng-model="user.name" class="gf-form-input max-width-20" >
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Email</span>
+			<input type="email" ng-model="user.email" class="gf-form-input max-width-20" >
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Username</span>
+			<input type="text" ng-model="user.login" class="gf-form-input max-width-20" >
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Password</span>
+			<input type="password" required ng-model="user.password" class="gf-form-input max-width-20" >
 		</div>
 
-		<br>
-		<button type="submit" class="pull-right btn btn-success" ng-click="create()">Create</button>
+		<div class="gf-form-button-row">
+			<button type="submit" class="btn btn-success" ng-click="create()">Create</button>
+		</div>
 	</form>
 </div>

public/app/features/admin/partials/orgs.html

@@ -4,9 +4,7 @@
 
 <div class="page-container">
 	<div class="page-header">
-		<h1>
-			Organizations
-		</h1>
+		<h1>Organizations</h1>
 	</div>
 
 	<table class="filter-table form-inline">

public/app/features/admin/partials/settings.html

@@ -3,9 +3,7 @@
 
 <div class="page-container">
 	<div class="page-header">
-		<h1>
-			Server settings
-		</h1>
+		<h1>Server settings</h1>
 	</div>
 
 		<div class="grafana-info-box span8" style="margin: 20px 0 25px 0">

public/app/features/admin/partials/stats.html

@@ -3,9 +3,7 @@
 
 <div class="page-container">
 	<div class="page-header">
-		<h1>
-			Stats
-		</h1>
+		<h1>Stats</h1>
 	</div>
 
 	<table class="filter-table form-inline">

public/app/features/apps/partials/list.html

@@ -1,4 +1,4 @@
-<navbar title="Plugins" icon="icon-gf icon-gf-apps">
+<navbar title="Plugins" icon="icon-gf icon-gf-apps" title-url="apps">
 </navbar>
 
 <div class="page-container">

public/app/features/playlist/partials/playlist.html

@@ -26,7 +26,6 @@
 
 	<div class="row">
 		<div class="col-md-6">
-
 			<div class="playlist-search-containerwrapper">
 				<div class="max-width-32">
 					<h5 class="page-headering playlist-column-header">Available</h5>
@@ -40,7 +39,9 @@
 				<table class="grafana-options-table playlist-available-list">
 					<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
 						<td>
-							<i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
+							<i class="icon-gf icon-gf-dashboard"></i>
+							&nbsp;&nbsp;{{playlistItem.title}}
+							<i class="fa fa-star" ng-show="playlistItem.isStarred"></i>
 						</td>
 						<td class="add-dashboard">
 							<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
@@ -52,14 +53,23 @@
 				</table>
 			</div>
 			<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0;">
-					<div ng-repeat="tag in ctrl.filteredTags" class="pointer tag-result-container"
-						ng-click="ctrl.addTagPlaylistItem(tag, $event)">
-						<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
-							<i class="fa fa-tag"></i>
-							<span>{{tag.term}} &nbsp;({{tag.count}})</span>
-						</a>
-					</div>
-				</div>
+				<table class="grafana-options-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">
+								<i class="fa fa-tag"></i>
+								<span>{{tag.term}} &nbsp;({{tag.count}})</span>
+							</a>
+						</td>
+						<td class="add-dashboard">
+							<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
+								<i class="fa fa-plus"></i>
+								Add to playlist
+							</button>
+						</td>
+					</tr>
+				</table>
+			</div>
 		</div>
 
 		<div class="col-md-6">

public/app/features/playlist/partials/playlists.html

@@ -1,4 +1,4 @@
-<navbar icon="fa fa-fw fa-list" title="Playlists">
+<navbar icon="fa fa-fw fa-list" title="Playlists" title-url="playlists">
 </navbar>
 
 <div class="page-container">

public/app/features/profile/partials/profile.html

@@ -1,4 +1,4 @@
-<navbar icon="icon-gf icon-gf-users" title="Profile">
+<navbar icon="icon-gf icon-gf-users" title="Profile" title-url="profile">
 </navbar>
 
 <div class="page-container">

public/app/features/snapshot/partials/snapshots.html

@@ -1,4 +1,4 @@
-<navbar icon="icon-gf icon-gf-snapshot" title="Snapshots">
+<navbar icon="icon-gf icon-gf-snapshot" title="Snapshots" title-url="dashboard/snapshots">
 </navbar>
 
 <div class="page-container">

public/sass/pages/_playlist.scss

@@ -27,6 +27,7 @@
   margin-bottom: 15px;
 }
 
+
 .playlist-search-field-wrapper {
   input {
     width: 100%;
@@ -109,6 +110,10 @@
   .add-dashboard {
     text-align: center;
   }
+
+  .fa-star {
+    color: $orange;
+  }
 }
 
 .playlist-column-header {
@@ -120,8 +125,3 @@
 .selected-playlistitem-settings {
   text-align: right;
 }
-
-.tag-result-container {
-  width: 160px;
-  float: left;
-}