worked on favorites feature and dashboard playlist, #36

src/app/controllers/dashLoader.js

@@ -154,8 +154,22 @@ function (angular, _, moment) {
       });
     };
 
+    $scope.openSaveDropdown = function() {
+      $scope.isFavorite = playlistSrv.isCurrentFavorite();
+    };
+
     $scope.markAsFavorite = function() {
       playlistSrv.markAsFavorite();
+      $scope.isFavorite = true;
+    };
+
+    $scope.removeAsFavorite = function() {
+      playlistSrv.removeAsFavorite(dashboard.current);
+      $scope.isFavorite = false;
+    };
+
+    $scope.stopPlaylist = function() {
+      playlistSrv.stop(1);
     };
 
   });

src/app/controllers/playlistCtrl.js

@@ -1,7 +1,8 @@
 define([
-  'angular'
+  'angular',
+  'underscore'
 ],
-function (angular) {
+function (angular, _) {
   'use strict';
 
   var module = angular.module('kibana.controllers');
@@ -16,10 +17,20 @@ function (angular) {
 
     $scope.loadFavorites = function() {
       $scope.favDashboards = playlistSrv.getFavorites().dashboards;
+
+      _.each($scope.favDashboards, function(dashboard) {
+        dashboard.include = true;
+      });
+    };
+
+    $scope.removeAsFavorite = function(dashboard) {
+      playlistSrv.removeAsFavorite(dashboard);
+      $scope.loadFavorites();
     };
 
     $scope.start = function() {
-      playlistSrv.start($scope.favDashboards, $scope.timespan);
+      var included = _.where($scope.favDashboards, { include: true });
+      playlistSrv.start(included, $scope.timespan);
     };
 
   });

src/app/directives/configModal.js

@@ -18,6 +18,7 @@ function (angular, _, $) {
           elem.bind('click',function() {
             if ($(id).length) {
               elem.attr('data-target', id).attr('data-toggle', 'modal');
+              scope.$apply(function() { scope.$broadcast('modal-opened'); });
               return;
             }
 
@@ -32,8 +33,6 @@ 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/partials/dashLoader.html

@@ -19,7 +19,7 @@
 <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 grafana-menu-save" ng-show="showDropdown('save')">
-  <a href="#"  bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown">
+  <a href="#"  bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown" ng-click="openSaveDropdown()">
     <i class='icon-save'></i>
   </a>
 
@@ -38,9 +38,12 @@
     <li ng-show="dashboard.current.loader.save_default">
       <a class="link" ng-click="purge_default()">Reset Home</a>
     </li>
-    <li>
+    <li ng-show="!isFavorite">
       <a class="link" ng-click="markAsFavorite()">Mark as favorite</a>
     </li>
+    <li ng-show="isFavorite">
+      <a class="link" ng-click="removeAsFavorite()">Remove as favorite</a>
+    </li>
     <li ng-show="dashboard.current.loader.save_local">
       <a class="link" ng-click="dashboard.to_file()">Export schema</a>
     </li>
@@ -67,3 +70,8 @@
 
 <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>
 
+<li class="grafana-menu-stop-playlist hide">
+  <a class='small' ng-click='stopPlaylist(2)'>
+    Stop playlist
+  </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' class="add-row-panel-hint">
+      <div ng-show='dashboard.current.editable && dashboard.current.panel_hints' class="row-fluid 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>
@@ -76,7 +76,6 @@
         </div>
       </div>
 
-
     </div>
   </div>
 </div>

src/app/partials/playlist.html

@@ -1,34 +1,50 @@
 <div ng-controller="PlaylistCtrl" ng-init="init()">
   <div class="modal-header">
-	  <h3>Start playlist</h3>
+    <h3>Start dashboard playlist</h3>
   </div>
   <div class="modal-body">
     <div class="editor-row">
-		  <div class="section span4">
+      <div class="section">
         <div class="editor-option">
-	      	<label class="small">Dashboards</label>
-
-					<table class="table table-striped" style="width: 300px">
+          <table class="table table-striped span4">
+            <tr>
+              <th>Dashboard</th>
+              <th>Include</th>
+              <th style="white-space: nowrap;">Remove as favorite</th>
+            </tr>
             <tr ng-repeat="dashboard in favDashboards">
-						  <td>
+              <td style="white-space: nowrap;">
                 {{dashboard.title}}
               </td>
+              <td style="text-align: center">
+                <input type="checkbox" ng-model="dashboard.include" ng-checked="dashboard.include" />
+              </td>
+              <td style="text-align: center">
+                <i class="icon-remove pointer" ng-click="removeAsFavorite(dashboard)"></i>
+              </td>
+            </tr>
+            <tr ng-hide="favDashboards.length">
+              <td colspan="3">
+                <i class="icon-warning"></i> No dashboards marked as favorites
+              </td>
             </tr>
           </table>
         </div>
+        <div class="editor-option">
+          <div class="span4">
+            <span><i class="icon-question-sign"></i>
+              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 Mark as favorite
+              <br/><br/>
+            </span>
           </div>
-			<div class="section span4">
+        </div>
+        <div class="editor-option">
           <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">

src/app/partials/search.html

@@ -55,7 +55,6 @@
               </a>
             </td>
             <td style="width:100%;padding-left: 10px;font-weight: bold;">
-
             </td>
           </tr>
         </table>

src/app/services/playlistSrv.js

@@ -9,29 +9,53 @@ function (angular, _, kbn) {
   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 timerInstance;
     var favorites = { dashboards: [] };
+
+    this.init = function() {
       var existingJson = window.localStorage["grafana-favorites"];
       if (existingJson) {
         favorites = angular.fromJson(existingJson);
       }
+    };
 
+    this._save = function() {
+      window.localStorage["grafana-favorites"] = angular.toJson(favorites);
+    };
+
+    this._find = function(title) {
+      return _.findWhere(favorites.dashboards, { title: title });
+    };
+
+    this._remove = function(existing) {
+      if (existing) {
+        favorites.dashboards = _.without(favorites.dashboards, existing);
+      }
+    };
+
+    this.isCurrentFavorite = function() {
+      return this._find(dashboard.current.title) ? true : false;
+    };
+
+    this.markAsFavorite = function() {
+      var existing = this._find(dashboard.current.title);
+      this._remove(existing);
+
+      favorites.dashboards.push({
+        url: $location.path(),
+        title: dashboard.current.title
+      });
+
+      this._save();
+    };
+
+    this.removeAsFavorite = function(toRemove) {
+      var existing = this._find(toRemove.title);
+      this._remove(existing);
+      this._save();
+    };
+
+    this.getFavorites = function() {
       return favorites;
     };
 
@@ -40,9 +64,8 @@ function (angular, _, kbn) {
       var index = 0;
 
       $rootScope.playlist_active = true;
-      $rootScope.playlist_interval = interval;
 
-      setInterval(function() {
+      timerInstance = setInterval(function() {
         $rootScope.$apply(function() {
           $location.path(dashboards[index % dashboards.length].url);
           index++;
@@ -50,6 +73,13 @@ function (angular, _, kbn) {
       }, interval);
     };
 
+    this.stop = function() {
+      clearInterval(timerInstance);
+      $rootScope.playlist_active = false;
+    };
+
+    this.init();
+
   });
 
 });

src/css/less/grafana.less

@@ -18,11 +18,16 @@
   .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;
   }
+
+  .grafana-menu-stop-playlist {
+    display: list-item;
+  }
 }
 
 // Search
@@ -61,7 +66,7 @@
 .search-tagview-switch {
   position: absolute;
   top: 15px;
-  right: 180px;
+  right: 263px;
   color: darken(@linkColor, 30%);
   &.active {
     color: @linkColor;