Merge branch 'master' of github.com:grafana/grafana

Conflicts:
	public/sass/_grafana.scss

public/app/core/components/popover/popover.ts

@@ -0,0 +1,55 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import _ from 'lodash';
+import $ from 'jquery';
+import coreModule from '../../core_module';
+import Drop from 'tether-drop';
+
+export function popoverDirective() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    link: function(scope, elem, attrs, ctrl, transclude) {
+      var inputElem = elem.prev();
+      if (inputElem.length === 0) {
+        console.log('Failed to find input element for popover');
+        return;
+      }
+
+      var offset = attrs.offset || '0 -10px';
+
+      transclude(function(clone, newScope) {
+        var content = document.createElement("div");
+        _.each(clone, (node) => {
+          content.appendChild(node);
+        });
+
+        var drop = new Drop({
+          target: inputElem[0],
+          content: content,
+          position: 'right middle',
+          classes: 'drop-help',
+          openOn: 'click',
+          tetherOptions: {
+            offset: offset
+          }
+        });
+
+      // inputElem.on('focus.popover', function() {
+      //   drop.open();
+      // });
+      //
+      // inputElem.on('blur.popover', function() {
+      //   close();
+      // });
+
+        scope.$on('$destroy', function() {
+          drop.destroy();
+        });
+
+      });
+    }
+  };
+}
+
+coreModule.directive('gfPopover', popoverDirective);

public/app/core/components/sidemenu/sidemenu.html

@@ -1,7 +1,7 @@
 <ul class="sidemenu">
 
 	<li class="sidemenu-org-section" ng-if="ctrl.isSignedIn" class="dropdown">
-		<div class="sidemenu-org">
+		<a class="sidemenu-org" href="profile">
 			<div class="sidemenu-org-avatar">
 				<img ng-if="ctrl.user.gravatarUrl" ng-src="{{ctrl.user.gravatarUrl}}">
 				<span class="sidemenu-org-avatar--missing">
@@ -12,7 +12,7 @@
 				<span class="sidemenu-org-user sidemenu-item-text">{{ctrl.user.name}}</span>
 				<span class="sidemenu-org-name sidemenu-item-text">{{ctrl.user.orgName}}</span>
 			</div>
-		</div>
+		</a>
 		<i class="fa fa-caret-right"></i>
 		<ul class="dropdown-menu" role="menu">
 			<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="menuItem.cssClass">

public/app/core/core.ts

@@ -24,6 +24,7 @@ import './partials';
 import {grafanaAppDirective} from './components/grafana_app';
 import {sideMenuDirective} from './components/sidemenu/sidemenu';
 import {searchDirective} from './components/search/search';
+import {popoverDirective} from './components/popover/popover';
 import {navbarDirective} from './components/navbar/navbar';
 import {arrayJoin} from './directives/array_join';
 import 'app/core/controllers/all';
@@ -32,4 +33,12 @@ import 'app/core/routes/routes';
 import './filters/filters';
 import coreModule from './core_module';
 
-export {arrayJoin, coreModule, grafanaAppDirective, sideMenuDirective, navbarDirective, searchDirective};
+export {
+  arrayJoin,
+  coreModule,
+  grafanaAppDirective,
+  sideMenuDirective,
+  navbarDirective,
+  searchDirective,
+  popoverDirective
+};

public/app/core/directives/misc.js

@@ -39,7 +39,7 @@ function (angular, coreModule, kbn) {
         var tip = attrs.tip ? (' <tip>' + attrs.tip + '</tip>') : '';
         var showIf = attrs.showIf ? (' ng-show="' + attrs.showIf + '" ') : '';
 
-        var template = '<div class="editor-option text-center"' + showIf + '>' +
+        var template = '<div class="editor-option gf-form-checkbox text-center"' + showIf + '>' +
           ' <label for="' + attrs.model + '" class="small">' +
           attrs.text + tip + '</label>' +
           '<input class="cr1" id="' + attrs.model + '" type="checkbox" ' +

public/app/features/annotations/partials/editor.html

@@ -34,8 +34,6 @@
 		</button>
 	</div>
 	<div class="gf-box-body">
-
-
 		<div class="editor-row row" ng-if="mode === 'list'">
 			<div class="span6">
 				<div ng-if="annotations.length === 0">
@@ -66,28 +64,34 @@
 			</div>
 		</div>
 
-		<div ng-if="mode === 'edit' || mode === 'new'">
-			<div class="editor-row">
-				<div class="editor-option">
-					<label class="small">Name</label>
-					<input type="text" class="input-medium" ng-model='currentAnnotation.name' placeholder="name"></input>
-				</div>
-				<div class="editor-option">
-					<label class="small">Datasource</label>
-					<select ng-model="currentAnnotation.datasource" ng-options="f.name as f.name for f in datasources" ng-change="datasourceChanged()"></select>
-				</div>
-				<div class="editor-option text-center">
-					<label class="small">Icon color</label>
-					<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
+		<div class="annotations-basic-settings" ng-if="mode === 'edit' || mode === 'new'">
+			<div class="gf-form-group">
+				<div class="gf-form-inline">
+					<div class="gf-form gf-size-max-xxl">
+						<span class="gf-form-label width-10">Name</span>
+						<input type="text" class="gf-form-input" ng-model='currentAnnotation.name' placeholder="name"></input>
+					</div>
+					<div class="gf-form">
+						<span class="gf-form-label max-width-10">Datasource</span>
+						<select class="gf-form-input gf-size-auto" ng-model="currentAnnotation.datasource" ng-options="f.name as f.name for f in datasources" ng-change="datasourceChanged()"></select>
+					</div>
 				</div>
-				<div class="editor-option">
-					<label class="small">Icon size</label>
-					<select class="input-mini" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
-				</div>
-				<editor-opt-bool text="Grid line" model="currentAnnotation.showLine"></editor-opt-bool>
-				<div class="editor-option text-center">
-					<label class="small">Line color</label>
-					<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
+				<div class="gf-form-inline last-row">
+					<div class="gf-form gf-size-max-xl">
+						<span class="gf-form-label width-10">Icon size</span>
+						<select class="gf-form-input gf-size-md" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
+					</div>
+					<div class="gf-form max-width-10">
+						<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
+						<span class="checkbox-label">Icon color</span>
+					</div>
+					<div class="gf-form max-width-10">
+						<editor-checkbox text="Grid line" model="currentAnnotation.showLine"></editor-checkbox>
+					</div>
+					<div class="gf-form max-width-10">
+						<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
+						<span class="checkbox-label">Line color</span>
+					</div>
 				</div>
 			</div>
 
@@ -96,11 +100,12 @@
 				</plugin-component>
 			</rebuild-on-change>
 
-			<br>
-			<button ng-show="mode === 'new'" type="button" class="btn btn-success" ng-click="add()">Add</button>
-			<button ng-show="mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
-			<br>
-			<br>
+			<div class="gf-form">
+				<div class="gf-form-button-row">
+					<button ng-show="mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="add()">Add</button>
+					<button ng-show="mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>

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

@@ -15,6 +15,13 @@
 			<div class="gf-form">
 				<span class="gf-form-label width-7">Name</span>
 				<input class="gf-form-input max-width-21" type="text" ng-model="current.name" placeholder="My data source name" required>
+
+				<gf-popover offset="0px -85px">
+					The name is used when you select the data source in panels.
+					The <code>Default</code> data source is preselected in new
+					new panels.
+				</gf-popover>
+
 				<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
 			</div>
 
@@ -24,6 +31,7 @@
 					<select class="gf-form-input gf-size-auto" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
 				</div>
 			</div>
+
 		</div>
 
 		<rebuild-on-change property="datasourceMeta.id">

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

@@ -6,6 +6,18 @@
 	<div class="gf-form">
 		<span class="gf-form-label width-7">Url</span>
 		<input class="gf-form-input max-width-21" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
+
+		<gf-popover>
+			<p>Specify a complete HTTP url (http://your_server:8080)</p>
+			<span ng-show="current.access === 'direct'">
+				Your access method is <code>Direct</code>, this means the url
+				needs to be accessable from the browser.
+			</span>
+			<span ng-show="current.access === 'proxy'">
+				Your access method is currently <code>Proxy</code>, this means the url
+				needs to be accessable from the grafana backend.
+			</span>
+		</gf-popover>
 	</div>
 
 	<div class="gf-form">

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

@@ -7,6 +7,8 @@
 		<h1 ng-show="!ctrl.isNew()">Edit Playlist</h1>
 	</div>
 
+	<p class="playlist-description">A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.</p>
+
 	<div class="gf-form-group">
 		<div class="gf-form">
 			<span class="gf-form-label width-7">Name</span>
@@ -19,24 +21,28 @@
 	</div>
 
 	<div class="gf-form-group">
-		<div class="max-width-28">
-			<h5 class="page-headering">Add dashboards</h5>
-			<div style="">
-				<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
-			</div>
-		</div>
+		<h3 class="page-headering">Dashboards</h3>
 	</div>
 
 	<div class="row">
 		<div class="col-md-6">
-			<h5>Search results ({{ctrl.filteredDashboards.length + ctrl.filteredTags.length}})</h5>
+
+			<div class="playlist-search-containerwrapper">
+				<div class="max-width-32">
+					<h5 class="page-headering playlist-column-header">Available</h5>
+					<div style="">
+						<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
+					</div>
+				</div>
+			</div>
+
 			<div ng-if="ctrl.filteredDashboards.length > 0">
-				<table class="grafana-options-table">
+				<table class="grafana-options-table playlist-available-list">
 					<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
-						<td style="white-space: nowrap;">
-							{{playlistItem.title}}
+						<td>
+							<i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
 						</td>
-						<td style="text-align: center">
+						<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
@@ -46,7 +52,7 @@
 				</table>
 			</div>
 			<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0;">
-					<div ng-repeat="tag in ctrl.filteredTags" class="pointer" style="width: 180px; float: left;"
+					<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>
@@ -57,20 +63,20 @@
 		</div>
 
 		<div class="col-md-6">
-			<h5>Added dashboards</h5>
-			<table class="grafana-options-table">
+			<h5 class="page headering playlist-column-header">Selected</h5>
+			<table class="grafana-options-table playlist-available-list">
 				<tr ng-repeat="playlistItem in ctrl.playlistItems">
-					<td style="white-space: nowrap;" ng-if="playlistItem.type === 'dashboard_by_id'">
-						{{playlistItem.title}}
+					<td ng-if="playlistItem.type === 'dashboard_by_id'">
+						<i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
 					</td>
-					<td style="white-space: nowrap;"  ng-if="playlistItem.type === 'dashboard_by_tag'">
+					<td ng-if="playlistItem.type === 'dashboard_by_tag'">
 						<a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title">
 							<i class="fa fa-tag"></i>
 							<span>{{playlistItem.title}}</span>
 						</a>
 					</td>
 
-					<td style="text-align: right">
+					<td class="selected-playlistitem-settings">
 						<button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
 							<i class="fa fa-arrow-up"></i>
 						</button>
@@ -89,7 +95,10 @@
 	<div class="clearfix"></div>
 
 	<div class="gf-form-button-row">
-		<a class="btn btn-success"
+		<a class="btn btn-success " ng-show="ctrl.isNew()"
+			ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
+			ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)"><i class="fa fa-plus"></i>&nbsp;Add</a>
+		<a class="btn btn-success" ng-show="!ctrl.isNew()"
 			ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
 			ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
 		<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>

public/app/features/playlist/playlist_edit_ctrl.ts

@@ -11,7 +11,7 @@ export class PlaylistEditCtrl {
   searchQuery: string = '';
   loading: boolean = false;
   playlist: any = {
-    interval: '10m',
+    interval: '5m',
   };
   playlistItems: any = [];
   dashboardresult: any = [];

public/app/headers/common.d.ts

@@ -39,4 +39,12 @@ declare module 'app/core/store' {
   export default store;
 }
 
+declare module 'tether' {
+  var config: any;
+  export default config;
+}
 
+declare module 'tether-drop' {
+  var config: any;
+  export default config;
+}

public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html

@@ -1,39 +1,36 @@
-<div class="editor-row">
-	<div class="section" ng-if="ctrl.annotation.index">
-		<h5>Index name</h5>
-		<div class="editor-option">
-			<input type="text" class="span4" ng-model='ctrl.annotation.index' placeholder="events-*"></input>
-		</div>
+<div class="gf-form-group">
+	<div class="gf-form" ng-if="ctrl.annotation.index">
+		<span class="gf-form-label width-14">Index name</span>
+		<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.index' placeholder="events-*"></input>
 	</div>
-	<div class="section">
-		<h5>Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></h5>
-		<div class="editor-option">
-			<input type="text" class="span6" ng-model='ctrl.annotation.query' placeholder="tags:deploy"></input>
-		</div>
+	<div class="gf-form">
+		<span class="gf-form-label width-14">Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></span>
+		<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.query' placeholder="tags:deploy"></input>
 	</div>
 </div>
 
-<div class="editor-row">
-  <div class="section">
-		<h5>Field mappings</h5>
-		<div class="editor-option">
-			<label class="small">Time</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.timeField' placeholder="@timestamp"></input>
+<div class="gf-form-group">
+	<h6>Field mappings</h6>
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Time</span>
+			<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.timeField' placeholder="@timestamp"></input>
 		</div>
 
-		<div class="editor-option">
-			<label class="small">Title</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.titleField' placeholder="desc"></input>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Title</span>
+			<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.titleField' placeholder="desc"></input>
 		</div>
-
-		<div class="editor-option">
-			<label class="small">Tags</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.tagsField' placeholder="tags"></input>
+	</div>
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Tags</span>
+			<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.tagsField' placeholder="tags"></input>
 		</div>
 
-		<div class="editor-option">
-			<label class="small">Text</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.textField' placeholder=""></input>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Text</span>
+			<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.textField' placeholder=""></input>
 		</div>
 	</div>
-</div>
+</div>

public/app/plugins/datasource/elasticsearch/partials/config.html

@@ -5,7 +5,7 @@
 
 <div class="gf-form-group">
 	<div class="gf-form-inline">
-		<div class="gf-form max-width-19">
+		<div class="gf-form max-width-25">
 			<span class="gf-form-label width-9">Index name</span>
 			<input class="gf-form-input" type="text" ng-model='ctrl.current.database' placeholder="" required></input>
 		</div>
@@ -16,7 +16,7 @@
 		</div>
 	</div>
 
-	<div class="gf-form max-width-28">
+	<div class="gf-form max-width-25">
 		<span class="gf-form-label width-9">Time field name</span>
 		<input class="gf-form-input" type="text"  ng-model='ctrl.current.jsonData.timeField' placeholder="" required ng-init=""></input>
 	</div>

public/app/plugins/datasource/graphite/partials/annotations.editor.html

@@ -1,15 +1,10 @@
-<div class="editor-row">
-	<div class="editor-option">
-		<label class="small">Graphite target expression</label>
-		<input type="text" class="span10" ng-model='ctrl.annotation.target' placeholder=""></input>
-	</div>
-</div>
-
-<div class="editor-row">
-	<div class="editor-option">
-		<label class="small">Graphite event tags</label>
-		<input type="text" ng-model='ctrl.annotation.tags' placeholder=""></input>
-	</div>
-</div>
-
-
+<div class="gf-form-group">
+  <div class="gf-form">
+    <span class="gf-form-label width-14">Graphite target expression</span>
+    <input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.target' placeholder=""></input>
+  </div>
+  <div class="gf-form">
+    <span class="gf-form-label width-14">Graphite event tags</span>
+    <input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.tags' placeholder=""></input>
+  </div>
+</div>

public/app/plugins/datasource/influxdb/partials/annotations.editor.html

@@ -1,29 +1,27 @@
-<div class="editor-row">
-	<div class="section">
-		<h5>InfluxDB Query <tip>Example: select text from events where $timeFilter</tip></h5>
-		<div class="editor-option">
-			<input type="text" class="span10" ng-model='ctrl.annotation.query' placeholder="select text from events where $timeFilter"></input>
+<div class="gf-form-group">
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-14">InfluxDB Query <tip>Example: select text from events where $timeFilter</tip></span class="gf-form-label">
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.query' placeholder="select text from events where $timeFilter"></input>
 		</div>
 	</div>
 </div>
-
-<div class="editor-row">
-  <div class="section">
-		<h5>Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h5>
-		<div class="editor-option">
-			<label class="small">Title</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.titleColumn' placeholder=""></input>
+<div class="gf-form-group">
+  <h6>Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h6>
+  <div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Title</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.titleColumn' placeholder=""></input>
 		</div>
 
-		<div class="editor-option">
-			<label class="small">Tags</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.tagsColumn' placeholder=""></input>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Tags</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.tagsColumn' placeholder=""></input>
 		</div>
 
-		<div class="editor-option">
-			<label class="small">Text</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.textColumn' placeholder=""></input>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Text</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.textColumn' placeholder=""></input>
 		</div>
 	</div>
 </div>
-

public/app/plugins/datasource/prometheus/partials/annotations.editor.html

@@ -1,28 +1,28 @@
-<div class="editor-row">
-	<div class="section">
-		<h5>Search expression</h5>
-		<div class="editor-option">
-			<input type="text" class="span6" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input>
+<div class="gf-form-group">
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Search expression</span>
+			<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input>
 		</div>
 	</div>
 </div>
-
-<div class="editor-row">
-  <div class="section">
-		<h5>Field formats</h5>
-		<div class="editor-option">
-			<label class="small">Title</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.titleFormat' placeholder="alertname"></input>
+<div class="gf-form-group">
+	<h6>Field formats</h6>
+  <div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Title</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.titleFormat' placeholder="alertname"></input>
 		</div>
 
-		<div class="editor-option">
-			<label class="small">Tags</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.tagKeys' placeholder="label1,label2"></input>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Tags</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.tagKeys' placeholder="label1,label2"></input>
 		</div>
-
-		<div class="editor-option">
-			<label class="small">Text</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.textFormat' placeholder="instance"></input>
+	</div>
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Text</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.textFormat' placeholder="instance"></input>
 		</div>
 	</div>
 </div>

public/app/system.conf.js

@@ -3,6 +3,7 @@ System.config({
   baseURL: 'public',
   paths: {
     'tether': 'vendor/npm/tether/dist/js/tether.js',
+    'tether-drop': 'vendor/npm/tether-drop/dist/js/drop.js',
     'moment': 'vendor/moment.js',
     "jquery": "vendor/jquery/dist/jquery.js",
     'lodash-src': 'vendor/lodash.js',

public/sass/_grafana.scss

@@ -7,6 +7,7 @@
 @import "mixins/grid-framework";
 @import "mixins/hover";
 @import "mixins/forms";
+@import "mixins/drop_element";
 
 // BASE
 @import "base/normalize";
@@ -63,6 +64,7 @@
 @import "components/footer";
 @import "components/infobox";
 @import "components/shortcuts";
+@import "components/drop";
 @import "components/query_editor";
 
 // PAGES
@@ -74,4 +76,5 @@
 @import "pages/signup";
 @import "pages/styleguide";
 
+
 @import "old_responsive";

public/sass/_variables.dark.scss

@@ -246,5 +246,9 @@ $popoverTitleBackground:  $popoverBackground;
 $popoverArrowOuterWidth:  $popoverArrowWidth + 1;
 $popoverArrowOuterColor:  rgba(0,0,0,.25);
 
+// popover
+$popover-help-bg:         $btn-secondary-bg;
+$popover-help-color:      $text-color;
+
 // images
 $checkboxImageUrl: '../img/checkbox.png';

public/sass/_variables.light.scss

@@ -174,7 +174,7 @@ $dropdownBorder:                $tight-form-border;
 $dropdownDividerTop:            $gray-6;
 $dropdownDividerBottom:         $white;
 $dropdownDivider:               $dropdownDividerTop;
-$dropdownTitle:                 $dark-5;
+$dropdownTitle:                 $gray-3;
 
 $dropdownLinkColor:             $dark-3;
 $dropdownLinkColorHover:        $link-color;
@@ -273,5 +273,9 @@ $popoverTitleBackground:  $white;
 $popoverArrowOuterWidth:  $popoverArrowWidth + 1;
 $popoverArrowOuterColor:  rgba(0,0,0,.25);
 
+// popover
+$popover-help-bg:         $blue-dark;
+$popover-help-color:      $gray-6;
+
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';

public/sass/components/_dashboard.scss

@@ -285,3 +285,9 @@ div.flot-text {
     padding: 1.2rem .5rem .4rem .5rem;
   }
 }
+
+.annotations-basic-settings {
+  .last-row {
+    margin-bottom: 20px;
+  }
+}

public/sass/components/_drop.scss

@@ -0,0 +1,28 @@
+$popover-arrow-size: 1rem;
+$color: inherit;
+$backgroundColor: $btn-secondary-bg;
+$color: $text-color;
+$useDropShadow: false;
+$attachmentOffset: $popover-arrow-size;
+$easing: cubic-bezier(0, 0, 0.265, 1.55);
+
+.drop-element {
+  position: absolute;
+  display: none;
+
+  &.drop-open {
+    display: block;
+  }
+
+  &.drop-open.drop-popover.drop-out-of-bounds,
+  &.drop-open-transitionend.drop-popover.drop-out-of-bounds {
+    display: none;
+  }
+}
+
+.drop-element, .drop-element * {
+  box-sizing: border-box;
+}
+
+@include drop-theme("help", $popover-help-bg, $popover-help-color);
+@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);

public/sass/components/_popovers.scss

@@ -124,5 +124,5 @@
       bottom: -$popoverArrowWidth;
     }
   }
-
 }
+

public/sass/mixins/_drop_element.scss

@@ -0,0 +1,272 @@
+
+@mixin drop-theme($themeName, $theme-bg, $theme-color) {
+  .drop-element.drop-#{$themeName} {
+    max-width: 100%;
+    max-height: 100%;
+
+    .drop-content {
+      border-radius: $border-radius-lg;
+      position: relative;
+      font-family: inherit;
+      background: $theme-bg;
+      color: $theme-color;
+      padding: 1em;
+      font-size: $font-size-sm;
+      max-width: 20rem;
+
+      &:before {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-width: $popover-arrow-size;
+        border-style: solid;
+        pointer-events: null;
+      }
+    }
+
+    // Centers and middles
+
+    &.drop-element-attached-bottom.drop-element-attached-center .drop-content {
+      margin-bottom: $popover-arrow-size;
+
+      &:before {
+        top: 100%;
+        left: 50%;
+        margin-left: - $popover-arrow-size;
+        border-top-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-top.drop-element-attached-center .drop-content {
+      margin-top: $popover-arrow-size;
+
+      &:before {
+        bottom: 100%;
+        left: 50%;
+        margin-left: - $popover-arrow-size;
+        border-bottom-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-right.drop-element-attached-middle .drop-content {
+      margin-right: $popover-arrow-size;
+
+      &:before {
+        left: 100%;
+        top: 50%;
+        margin-top: - $popover-arrow-size;
+        border-left-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-left.drop-element-attached-middle .drop-content {
+      margin-left: $popover-arrow-size;
+
+      &:before {
+        right: 100%;
+        top: 50%;
+        margin-top: - $popover-arrow-size;
+        border-right-color: $theme-bg;
+      }
+    }
+
+    // Target middle/center, element corner
+    &.drop-element-attached-left.drop-target-attached-center .drop-content {
+      left: - $popover-arrow-size * 2;
+    }
+
+    &.drop-element-attached-right.drop-target-attached-center .drop-content {
+      left: $popover-arrow-size * 2;
+    }
+
+    &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content {
+      margin-top: $popover-arrow-size;
+
+      &:before {
+        bottom: 100%;
+        left: $popover-arrow-size;
+        border-bottom-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content {
+      margin-top: $popover-arrow-size;
+
+      &:before {
+        bottom: 100%;
+        right: $popover-arrow-size;
+        border-bottom-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content {
+      margin-bottom: $popover-arrow-size;
+
+      &:before {
+        top: 100%;
+        left: $popover-arrow-size;
+        border-top-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content {
+      margin-bottom: $popover-arrow-size;
+
+      &:before {
+        top: 100%;
+        right: $popover-arrow-size;
+        border-top-color: $theme-bg;
+      }
+    }
+
+    // Top and bottom corners
+    &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
+      margin-top: $popover-arrow-size;
+
+      &:before {
+        bottom: 100%;
+        left: $popover-arrow-size;
+        border-bottom-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
+      margin-top: $popover-arrow-size;
+
+      &:before {
+        bottom: 100%;
+        right: $popover-arrow-size;
+        border-bottom-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
+      margin-bottom: $popover-arrow-size;
+
+      &:before {
+        top: 100%;
+        left: $popover-arrow-size;
+        border-top-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
+      margin-bottom: $popover-arrow-size;
+
+      &:before {
+        top: 100%;
+        right: $popover-arrow-size;
+        border-top-color: $theme-bg;
+      }
+    }
+
+    // Side corners
+    &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
+      margin-right: $popover-arrow-size;
+
+      &:before {
+        top: $popover-arrow-size;
+        left: 100%;
+        border-left-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
+      margin-left: $popover-arrow-size;
+
+      &:before {
+        top: $popover-arrow-size;
+        right: 100%;
+        border-right-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
+      margin-right: $popover-arrow-size;
+
+      &:before {
+        bottom: $popover-arrow-size;
+        left: 100%;
+        border-left-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
+      margin-left: $popover-arrow-size;
+
+      &:before {
+        bottom: $popover-arrow-size;
+        right: 100%;
+        border-right-color: $theme-bg;
+      }
+    }
+  }
+}
+
+@mixin drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear") {
+  .#{$themePrefix}-element.#{$themePrefix}-#{$themeName} {
+    transform: translateZ(0);
+    transition: opacity 100ms;
+    opacity: 0;
+    .#{$themePrefix}-content {
+      transition: transform 0.2s $easing;
+      transform: scale(0) translateZ(0);
+    }
+    &.#{$themePrefix}-open {
+      display: none;
+    }
+    &.#{$themePrefix}-open-transitionend {
+      display: block;
+    }
+    &.#{$themePrefix}-after-open {
+      transition: none;
+      opacity: 1;
+      .#{$themePrefix}-content {
+        transform: scale(1) translateZ(0);
+      }
+    }
+    // Centers and middles
+    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
+      transform-origin: 50% calc(100% + #{$attachmentOffset});
+    }
+    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
+      transform-origin: 50% (-$attachmentOffset);
+    }
+    &.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
+      transform-origin: calc(100% + #{$attachmentOffset}) 50%;
+    }
+    &.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
+      transform-origin: -($attachmentOffset 50%);
+    }
+    // Top and bottom corners
+    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content {
+      transform-origin: 0 (-$attachmentOffset);
+    }
+    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content {
+      transform-origin: 100% (-$attachmentOffset);
+    }
+    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-top .#{$themePrefix}-content {
+      transform-origin: 0 calc(100% + #{$attachmentOffset});
+    }
+    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-top .#{$themePrefix}-content {
+      transform-origin: 100% calc(100% + #{$attachmentOffset});
+    }
+    // Side corners
+    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content {
+      transform-origin: calc(100% + #{$attachmentOffset}) 0;
+    }
+    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content {
+      transform-origin: (-$attachmentOffset) 0;
+    }
+    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content {
+      transform-origin: calc(100% + #{$attachmentOffset}) 100%;
+    }
+    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content {
+      transform-origin: (-$attachmentOffset) 100%;
+    }
+  }
+}
+

public/sass/pages/_playlist.scss

@@ -1,3 +1,8 @@
+.playlist-description {
+  width: 555px;
+  margin-bottom: 20px;
+}
+
 .playlist-search-container {
   z-index: 1000;
   position: relative;
@@ -18,6 +23,10 @@
   right: 11px;
 }
 
+.playlist-search-containerwrapper {
+  margin-bottom: 15px;
+}
+
 .playlist-search-field-wrapper {
   input {
     width: 100%;
@@ -90,3 +99,29 @@
     padding-left: 20px;
   }
 }
+
+.playlist-available-list {
+  td {
+    line-height: 2rem;
+    white-space: nowrap;
+  }
+
+  .add-dashboard {
+    text-align: center;
+  }
+}
+
+.playlist-column-header {
+  border-bottom: thin solid $gray-1;
+  padding-bottom: 10px;
+  margin-bottom: 15px;
+}
+
+.selected-playlistitem-settings {
+  text-align: right;
+}
+
+.tag-result-container {
+  width: 160px;
+  float: left;
+}

public/test/test-main.js

@@ -10,6 +10,8 @@
     baseURL: '/base/',
     defaultJSExtensions: true,
     paths: {
+      'tether': 'vendor/npm/tether/dist/js/tether.js',
+      'tether-drop': 'vendor/npm/tether-drop/dist/js/drop.js',
       'moment': 'vendor/moment.js',
       "jquery": "vendor/jquery/dist/jquery.js",
       'lodash-src': 'vendor/lodash.js',