began work on dashboard playlist feature, #36

src/app/controllers/all.js

@@ -9,4 +9,5 @@ define([
   './graphiteTarget',
   './graphiteImport',
   './influxTargetCtrl',
+  './playlistCtrl',
 ], function () {});

src/app/controllers/dashLoader.js

@@ -8,7 +8,7 @@ function (angular, _, moment) {
 
   var module = angular.module('kibana.controllers');
 
-  module.controller('dashLoader', function($scope, $rootScope, $http, dashboard, alertSrv, $location, filterSrv) {
+  module.controller('dashLoader', function($scope, $rootScope, $http, dashboard, alertSrv, $location, filterSrv, playlistSrv) {
     $scope.loader = dashboard.current.loader;
 
     $scope.init = function() {
@@ -154,6 +154,10 @@ function (angular, _, moment) {
       });
     };
 
+    $scope.markAsFavorite = function() {
+      playlistSrv.markAsFavorite();
+    };
+
   });
 
 });

src/app/controllers/playlistCtrl.js

@@ -0,0 +1,27 @@
+define([
+  'angular'
+],
+function (angular) {
+  'use strict';
+
+  var module = angular.module('kibana.controllers');
+
+  module.controller('PlaylistCtrl', function($scope, playlistSrv) {
+
+    $scope.init = function() {
+      $scope.timespan = "15s";
+      $scope.loadFavorites();
+      $scope.$on('modal-opened', $scope.loadFavorites);
+    };
+
+    $scope.loadFavorites = function() {
+      $scope.favDashboards = playlistSrv.getFavorites().dashboards;
+    };
+
+    $scope.start = function() {
+      playlistSrv.start($scope.favDashboards, $scope.timespan);
+    };
+
+  });
+
+});

src/app/controllers/search.js

@@ -69,7 +69,7 @@ function (angular, _, config, $) {
         .query($scope.ejs.QueryStringQuery(query))
         .sort('_uid')
         .facet($scope.ejs.TermsFacet("tags").field("tags").order('term').size(50))
-        .size(50).doSearch()
+        .size(20).doSearch()
         .then(function(results) {
 
           if(_.isUndefined(results.hits)) {

src/app/directives/bodyClass.js

@@ -25,13 +25,17 @@ function (angular, app, _) {
           }, true);
 
           $scope.$watch('dashboard.current.hideControls', function() {
-            var hideControls = $scope.dashboard.current.hideControls;
+            var hideControls = $scope.dashboard.current.hideControls || $scope.playlist_active;
 
             if (lastHideControlsVal !== hideControls) {
               elem.toggleClass('hide-controls', hideControls);
               lastHideControlsVal = hideControls;
             }
+          });
 
+          $scope.$watch('playlist_active', function() {
+            elem.toggleClass('hide-controls', $scope.playlist_active === true);
+            elem.toggleClass('playlist-active', $scope.playlist_active === true);
           });
         }
       };

src/app/directives/configModal.js

@@ -32,6 +32,8 @@ function (angular, _, $) {
             $q.when(panelModal).then(function(modalEl) {
               elem.attr('data-target', id).attr('data-toggle', 'modal');
 
+              scope.$emit('modal-opened');
+
               $timeout(function () {
                 if (!modalEl.data('modal').isShown) {
                   modalEl.modal('show');

src/app/panels/timepicker/module.html

@@ -47,7 +47,7 @@
         </ul>
 
       </li>
-      <li ng-show="!dashboard.current.refresh">
+      <li ng-show="!dashboard.current.refresh" class="grafana-menu-refresh">
         <a class="icon-refresh" ng-click="dashboard.refresh()"></a>
       </li>
     </ul>

src/app/partials/dashLoader.html

@@ -10,7 +10,7 @@
   </a>
 </li>
 
-<li>
+<li class="grafana-menu-zoom-out">
   <a class='small' ng-click='zoom(2)'>
     Zoom Out
   </a>
@@ -18,54 +18,52 @@
 
 <li ng-repeat="pulldown in dashboard.current.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable"><kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel></li>
 
-<li class="dropdown"ng-show="showDropdown('save')">
+<li class="dropdown grafana-menu-save" ng-show="showDropdown('save')">
   <a href="#"  bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown">
     <i class='icon-save'></i>
   </a>
 
-  <ul class="dropdown-menu" style="padding:10px">
+  <ul class="save-dashboard-dropdown dropdown-menu">
 
     <li ng-show="dashboard.current.loader.save_elasticsearch">
-      <form class="input-prepend nomargin">
-        <button class="btn" ng-click="elasticsearch_save('dashboard')"><i class="icon-save"></i></button>
+      <form class="input-prepend nomargin save-dashboard-dropdown-save-form">
         <input class='input-medium' ng-model="dashboard.current.title" type="text" ng-model="elasticsearch.title"/>
+        <button class="btn" ng-click="elasticsearch_save('dashboard')"><i class="icon-save"></i></button>
       </form>
     </li>
 
-    <li class="dropdown-submenu noarrow" ng-show="dashboard.current.loader.save_local || dashboard.current.loader.save_gist || dashboard.current.loader.save_default">
-      <a tabindex="-1" class="small" style="padding:0"><i class="icon-caret-left"></i> Advanced</a>
-      <ul class="dropdown-menu">
-
-        <li ng-show="dashboard.current.loader.save_default">
-          <a class="link" ng-click="set_default()">Save as Home</a>
-        </li>
-        <li ng-show="dashboard.current.loader.save_default">
-          <a class="link" ng-click="purge_default()">Reset Home</a>
-        </li>
-        <li ng-show="dashboard.current.loader.save_local">
-          <a class="link" ng-click="dashboard.to_file()">Export schema</a>
-        </li>
-        <li ng-show="showDropdown('share')"><a bs-tooltip="'Share'" data-placement="bottom" ng-click="elasticsearch_save('temp',dashboard.current.loader.save_temp_ttl)" config-modal="app/partials/dashLoaderShare.html">Share temp copy</i></a></li>
+    <li ng-show="dashboard.current.loader.save_default">
+      <a class="link" ng-click="set_default()">Save as Home</a>
+    </li>
+    <li ng-show="dashboard.current.loader.save_default">
+      <a class="link" ng-click="purge_default()">Reset Home</a>
+    </li>
+    <li>
+      <a class="link" ng-click="markAsFavorite()">Mark as favorite</a>
+    </li>
+    <li ng-show="dashboard.current.loader.save_local">
+      <a class="link" ng-click="dashboard.to_file()">Export schema</a>
+    </li>
+    <li ng-show="showDropdown('share')"><a bs-tooltip="'Share'" data-placement="bottom" ng-click="elasticsearch_save('temp',dashboard.current.loader.save_temp_ttl)" config-modal="app/partials/dashLoaderShare.html">Share temp copy</i></a></li>
 
-        <li ng-show="dashboard.current.loader.save_gist" style="margin:10px">
-          <h6>Gist</h6>
-          <form class="input-append">
-            <input class='input-medium' placeholder='Title' type="text" ng-model="gist.title"/>
-            <button class="btn" ng-click="save_gist()"><i class="icon-github-alt"></i></button>
-          </form><br>
-          <small ng-show="gist.last">Last gist: <a target="_blank" href="{{gist.last}}">{{gist.last}}</a></small>
-        </li>
-      </ul>
+    <li ng-show="dashboard.current.loader.save_gist" style="margin:10px">
+      <h6>Gist</h6>
+      <form class="input-append">
+        <input class='input-medium' placeholder='Title' type="text" ng-model="gist.title"/>
+        <button class="btn" ng-click="save_gist()"><i class="icon-github-alt"></i></button>
+      </form><br>
+      <small ng-show="gist.last">Last gist: <a target="_blank" href="{{gist.last}}">{{gist.last}}</a></small>
     </li>
+
   </ul>
 </li>
 
-<li class="dropdown" ng-show="showDropdown('load')" ng-controller="SearchCtrl" ng-init="init()" ng-include="'app/partials/search.html'">
+<li class="dropdown grafana-menu-load" ng-show="showDropdown('load')" ng-controller="SearchCtrl" ng-init="init()" ng-include="'app/partials/search.html'">
 
 </li>
 
 
-<li><a bs-tooltip="'Goto saved default'" data-placement="bottom" href='#/dashboard'><i class='icon-home'></i></a></li>
+<li class="grafana-menu-home"><a bs-tooltip="'Goto saved default'" data-placement="bottom" href='#/dashboard'><i class='icon-home'></i></a></li>
 
-<li ng-show="dashboard.current.editable" bs-tooltip="'Configure dashboard'" data-placement="bottom"><a class="link" config-modal="app/partials/dasheditor.html"><i class='icon-cog pointer'></i></a></li>
+<li class="grafana-menu-edit" ng-show="dashboard.current.editable" bs-tooltip="'Configure dashboard'" data-placement="bottom"><a class="link" config-modal="app/partials/dasheditor.html"><i class='icon-cog pointer'></i></a></li>
 

src/app/partials/dashboard.html

@@ -68,7 +68,7 @@
         </div>
       </div>
 
-      <div class="row-fluid" ng-show='dashboard.current.editable && dashboard.current.panel_hints'>
+      <div class="row-fluid" ng-show='dashboard.current.editable && dashboard.current.panel_hints' class="add-row-panel-hint">
         <div class="span12" style="text-align:right;">
           <span style="margin-left: 0px;" class="pointer btn btn-mini" config-modal="app/partials/dasheditor.html">
             <span ng-click="editor.index = 1"><i class="icon-plus-sign"></i> ADD A ROW</span>

src/app/partials/playlist.html

@@ -0,0 +1,38 @@
+<div ng-controller="PlaylistCtrl" ng-init="init()">
+	<div class="modal-header">
+	  <h3>Start playlist</h3>
+	</div>
+	<div class="modal-body">
+		<div class="editor-row">
+		  <div class="section span4">
+			  <div class="editor-option">
+	      	<label class="small">Dashboards</label>
+
+					<table class="table table-striped" style="width: 300px">
+						<tr ng-repeat="dashboard in favDashboards">
+						  <td>
+								{{dashboard.title}}
+						  </td>
+						</tr>
+					</table>
+				</div>
+			</div>
+			<div class="section span4">
+				<label>
+					Timespan between change
+				</label>
+				<input type="text" class="input-small" ng-model="timespan" />
+			</div>
+			<div class="section">
+				<span>
+					Dashboards available in the playlist are only the once marked as favorites (stored in local browser storage).
+					To mark a dashboard as favorite, use save icon in the menu and in the dropdown select Favorites > Mark as favorite
+				</span>
+			</div>
+		</div>
+	</div>
+	<div class="modal-footer">
+		<button class="btn btn-success" ng-click="start();dismiss();"><i class="icon-play"></i> Start</button>
+	  <button type="button" class="btn btn-primary" ng-click="dismiss();"><i class="icon-ban-circle"></i> Cancel</button>
+	</div>
+</div>

src/app/partials/search.html

@@ -20,6 +20,10 @@
     <li ng-if="!showImport">
       <div class="grafana-search-panel">
         <div class="search-field-wrapper">
+          <button class="btn btn-success pull-right" config-modal="app/partials/playlist.html">
+            <i class="icon-play"></i>
+            Playlist
+          </button>
           <button class="btn btn-success pull-right" ng-click="toggleImport($event)">
             <i class="icon-download-alt"></i>
             Import

src/app/services/all.js

@@ -7,5 +7,6 @@ define([
   './datasourceSrv',
   './keyboardManager',
   './annotationsSrv',
+  './playlistSrv',
 ],
 function () {});

src/app/services/playlistSrv.js

@@ -0,0 +1,55 @@
+define([
+  'angular',
+  'underscore',
+  'kbn'
+],
+function (angular, _, kbn) {
+  'use strict';
+
+  var module = angular.module('kibana.services');
+
+  module.service('playlistSrv', function(dashboard, $location, $rootScope) {
+
+    this.markAsFavorite = function() {
+      var favorites = this.getFavorites();
+
+      var existing = _.findWhere(favorites.dashboards, { title: dashboard.current.title });
+
+      if (existing) {
+        favorites.dashboard = _.without(favorites.dashboards, existing);
+      }
+
+      favorites.dashboards.push({ url: $location.path(), title: dashboard.current.title });
+
+      window.localStorage["grafana-favorites"] = angular.toJson(favorites);
+    };
+
+    this.getFavorites = function() {
+
+      var favorites = { dashboards: [] };
+      var existingJson = window.localStorage["grafana-favorites"];
+      if (existingJson) {
+        favorites = angular.fromJson(existingJson);
+      }
+
+      return favorites;
+    };
+
+    this.start = function(dashboards, timespan) {
+      var interval = kbn.interval_to_ms(timespan);
+      var index = 0;
+
+      $rootScope.playlist_active = true;
+      $rootScope.playlist_interval = interval;
+
+      setInterval(function() {
+        $rootScope.$apply(function() {
+          $location.path(dashboards[index % dashboards.length].url);
+          index++;
+        });
+      }, interval);
+    };
+
+  });
+
+});

src/css/less/grafana.less

@@ -9,6 +9,20 @@
   .submenu-controls {
     display: none;
   }
+  .add-row-panel-hint {
+    display: none;
+  }
+}
+
+.playlist-active {
+  .grafana-menu-zoom-out,
+  .grafana-menu-save,
+  .grafana-menu-load,
+  .grafana-menu-home,
+  .grafana-menu-refresh,
+  .grafana-menu-edit {
+    display: none;
+  }
 }
 
 // Search

src/css/less/overrides.less

@@ -571,3 +571,15 @@ div.flot-text {
   }
 }
 
+// Top menu
+
+.save-dashboard-dropdown {
+  padding: 10px;
+  li>a {
+    padding-left: 5px;
+  }
+}
+
+.save-dashboard-dropdown-save-form {
+  margin-bottom: 5px;
+}