Worked on playlist mode, hides dashboard controls and dashboard search button,…

Worked on playlist mode, hides dashboard controls and dashboard search button, added prev, stop, next icon buttons

src/app/directives/bodyClass.js

 define([
   'angular',
-  'app',
   'lodash'
 ],
-function (angular) {
+function (angular, _) {
   'use strict';
 
   angular
@@ -35,9 +34,8 @@ function (angular) {
             }
           });
 
-          $scope.$watch('playlist_active', function() {
-            elem.toggleClass('hide-controls', $scope.playlist_active === true);
-            elem.toggleClass('playlist-active', $scope.playlist_active === true);
+          $scope.$watch('playlistSrv', function(newValue) {
+            elem.toggleClass('playlist-active', _.isObject(newValue));
           });
         }
       };

src/app/features/dashboard/playlistSrv.js

@@ -4,88 +4,51 @@ define([
   'kbn',
   'store'
 ],
-function (angular, _, kbn, store) {
+function (angular, _, kbn) {
   'use strict';
 
   var module = angular.module('grafana.services');
 
-  module.service('playlistSrv', function($location, $rootScope) {
-    var timerInstance;
-    var favorites = { dashboards: [] };
+  module.service('playlistSrv', function($location, $rootScope, $timeout) {
+    var self = this;
 
-    this.init = function() {
-      var existingJson = store.get("grafana-favorites");
-      if (existingJson) {
-        favorites = angular.fromJson(existingJson);
-      }
-    };
+    this.next = function() {
+      $timeout.cancel(self.cancelPromise);
 
-    this._save = function() {
-      store.set('grafana-favorites', angular.toJson(favorites));
-    };
-
-    this._find = function(title) {
-      return _.findWhere(favorites.dashboards, { title: title });
-    };
+      angular.element(window).unbind('resize');
+      var dash = self.dashboards[self.index % self.dashboards.length];
+      var relativeUrl = dash.url.substring($location.absUrl().length - $location.url().length);
 
-    this._remove = function(existing) {
-      if (existing) {
-        favorites.dashboards = _.without(favorites.dashboards, existing);
-      }
-    };
+      $location.url(relativeUrl);
+      self.index++;
 
-    this.isCurrentFavorite = function(dashboard) {
-      return this._find(dashboard.title) ? true : false;
+      self.cancelPromise = $timeout(self.next, self.interval);
     };
 
-    this.markAsFavorite = function(dashboard) {
-      var existing = this._find(dashboard.title);
-      this._remove(existing);
-
-      favorites.dashboards.push({
-        url: $location.path(),
-        title: dashboard.title
-      });
-
-      this._save();
-    };
-
-    this.removeAsFavorite = function(toRemove) {
-      var existing = this._find(toRemove.title);
-      this._remove(existing);
-      this._save();
-    };
-
-    this.getFavorites = function() {
-      return favorites;
+    this.prev = function() {
+      self.index = Math.max(self.index - 2, 0);
+      self.next();
     };
 
     this.start = function(dashboards, timespan) {
       this.stop();
 
-      var interval = kbn.interval_to_ms(timespan);
-      var index = 0;
-
-      $rootScope.playlist_active = true;
-
-      timerInstance = setInterval(function() {
-        $rootScope.$apply(function() {
-          angular.element(window).unbind('resize');
-          var dash = dashboards[index % dashboards.length];
-          var relativeUrl = dash.url.substring($location.absUrl().length - $location.url().length);
-          $location.url(relativeUrl);
+      self.interval = kbn.interval_to_ms(timespan);
+      self.dashboards = dashboards;
+      $rootScope.playlistSrv = this;
 
-          index++;
-        });
-      }, interval);
+      self.cancelPromise = $timeout(self.next, self.interval);
     };
 
     this.stop = function() {
-      clearInterval(timerInstance);
-      $rootScope.playlist_active = false;
-    };
+      self.index = 0;
+
+      if (self.cancelPromise) {
+        $timeout.cancel(self.cancelPromise);
+      }
 
-    this.init();
+      $rootScope.playlistSrv = null;
+    };
 
   });
 

src/app/partials/dashboard_topnav.html

@@ -19,11 +19,11 @@
 				</span>
 
 				<a ng-click="asd()" class="top-nav-title pointer">
-					 {{dashboard.title}}
-				 </a>
-			 </div>
+					{{dashboard.title}}
+				</a>
+			</div>
 
-			<ul class="nav pull-left" ng-if="!dashboardMeta.isHome">
+			<ul class="nav pull-left top-nav-dash-actions" ng-if="!dashboardMeta.isHome">
 				<li>
 					<a class="pointer" ng-click="starDashboard()">
 						<i class="fa" ng-class="{'fa-star-o': !dashboardMeta.isStarred, 'fa-star': dashboardMeta.isStarred,}" style="color: orange;"></i>
@@ -48,6 +48,18 @@
 				</li>
 			</ul>
 
+			<ul class="nav dash-playlist-actions" ng-if="playlistSrv">
+				<li>
+					<a ng-click="playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
+				</li>
+				<li>
+					<a ng-click="playlistSrv.stop()"><i class="fa fa-stop"></i></a>
+				</li>
+				<li>
+					<a ng-click="playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
+				</li>
+			</ul>
+
 			<ul class="nav pull-right">
 				<li ng-show="dashboardViewState.fullscreen">
 					<a ng-click="exitFullscreen()">
@@ -60,12 +72,6 @@
 					</grafana-simple-panel>
 				</li>
 
-				<li class="grafana-menu-stop-playlist hide">
-					<a class='small' ng-click='stopPlaylist(2)'>
-						Stop playlist
-					</a>
-				</li>
-
 			</ul>
 		</div>
 	</div>

src/css/less/grafana.less

@@ -35,13 +35,11 @@
 
 .playlist-active {
   .grafana-menu-zoom-out,
-  .grafana-menu-save,
-  .grafana-menu-load,
   .add-row-panel-hint,
-  .grafana-menu-home,
   .grafana-menu-refresh,
-  .grafana-menu-edit {
-    display: none;
+  .top-nav-dashboards-btn,
+  .top-nav-dash-actions {
+    display:none;
   }
 
   .grafana-menu-stop-playlist {