feat(playlist): refactor FE to support playlistitems

pkg/services/sqlstore/playlist.go

@@ -84,6 +84,7 @@ func UpdatePlaylist(query *m.UpdatePlaylistQuery) error {
 	}
 
 	playlistItems := make([]m.PlaylistItem, 0)
+
 	for _, item := range query.Items {
 		playlistItems = append(playlistItems, m.PlaylistItem{
 			PlaylistId: playlist.Id,

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

@@ -59,14 +59,14 @@
 
   <div>
     <div class="span5 pull-left">
-      <h5>Search results ({{filteredDashboards.length}})</h5>
+      <h5>Search results ({{filteredPlaylistItems.length}})</h5>
        <table class="grafana-options-table">
-        <tr ng-repeat="dashboard in filteredDashboards">
+        <tr ng-repeat="playlistItem in filteredPlaylistItems">
           <td style="white-space: nowrap;">
-            {{dashboard.title}}
+            {{playlistItem.title}}
           </td>
           <td style="text-align: center">
-            <button class="btn btn-inverse btn-mini pull-right" ng-click="addDashboard(dashboard)">
+            <button class="btn btn-inverse btn-mini pull-right" ng-click="addPlaylistItem(playlistItem)">
               <i class="fa fa-plus"></i>
               Add to playlist
             </button>
@@ -82,18 +82,18 @@
     <div class="span5 pull-left">
       <h5>Playlist dashboards</h5>
       <table class="grafana-options-table">
-        <tr ng-repeat="dashboard in dashboards">
+        <tr ng-repeat="playlistItem in playlistItems">
           <td style="white-space: nowrap;">
-            {{dashboard.title}}
+            {{playlistItem.title}}
           </td>
           <td style="text-align: right">
-            <button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="moveDashboardUp(dashboard)">
+            <button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="movePlaylistItemUp(playlistItem)">
               <i class="fa fa-arrow-up"></i>
             </button>
-            <button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="moveDashboardDown(dashboard)">
+            <button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="movePlaylistItemDown(playlistItem)">
               <i class="fa fa-arrow-down"></i>
             </button>
-            <button class="btn btn-inverse btn-mini" ng-click="removeDashboard(dashboard)">
+            <button class="btn btn-inverse btn-mini" ng-click="removePlaylistItem(playlistItem)">
               <i class="fa fa-remove"></i>
             </button>
           </td>
@@ -113,7 +113,7 @@
       <button type="button"
               class="btn btn-success"
               ng-disabled="playlistEditForm.$invalid || isPlaylistEmpty()"
-              ng-click="savePlaylist(playlist, dashboards)">Save</button>
+              ng-click="savePlaylist(playlist, playlistItems)">Save</button>
       <button type="button"
               class="btn btn-default"
               ng-click="backToList()">Cancel</button>

public/app/features/playlist/playlist_edit_ctrl.js

@@ -10,12 +10,12 @@ function (angular, config, _) {
 
   module.controller('PlaylistEditCtrl', function($scope, playlistSrv, backendSrv, $location, $route) {
     $scope.timespan = config.playlist_timespan;
-    $scope.filteredDashboards = [];
-    $scope.foundDashboards = [];
+    $scope.filteredPlaylistItems = [];
+    $scope.foundPlaylistItems = [];
     $scope.searchQuery = '';
     $scope.loading = false;
     $scope.playlist = {};
-    $scope.dashboards = [];
+    $scope.playlistItems = [];
 
     if ($route.current.params.id) {
       var playlistId = $route.current.params.id;
@@ -25,9 +25,9 @@ function (angular, config, _) {
           $scope.playlist = result;
         });
 
-      backendSrv.get('/api/playlists/' + playlistId + '/dashboards')
+      backendSrv.get('/api/playlists/' + playlistId + '/playlistitems')
         .then(function(result) {
-          $scope.dashboards = result;
+          $scope.playlistItems = result;
         });
     }
 
@@ -43,43 +43,43 @@ function (angular, config, _) {
 
       backendSrv.search(query)
         .then(function(results) {
-          $scope.foundDashboards = results;
-          $scope.filterFoundDashboards();
+          $scope.foundPlaylistItems = results;
+          $scope.filterFoundPlaylistItems();
         })
         .finally(function() {
           $scope.loading = false;
         });
     };
 
-    $scope.filterFoundDashboards = function() {
-      $scope.filteredDashboards = _.reject($scope.foundDashboards, function(dashboard) {
-        return _.findWhere($scope.dashboards, function(listDashboard) {
-          return listDashboard.id === dashboard.id;
+    $scope.filterFoundPlaylistItems = function() {
+      $scope.filteredPlaylistItems = _.reject($scope.foundPlaylistItems, function(playlistItem) {
+        return _.findWhere($scope.playlistItems, function(listPlaylistItem) {
+          return listPlaylistItem === playlistItem;
         });
       });
     };
 
-    $scope.addDashboard = function(dashboard) {
-      $scope.dashboards.push(dashboard);
-      $scope.filterFoundDashboards();
+    $scope.addPlaylistItem = function(playlistItem) {
+      playlistItem.value = playlistItem.id.toString();
+      playlistItem.type = 'dashboard_by_id';
+      playlistItem.order = $scope.playlistItems.length + 1;
+
+      $scope.playlistItems.push(playlistItem);
+      $scope.filterFoundPlaylistItems();
+
     };
 
-    $scope.removeDashboard = function(dashboard) {
-      _.remove($scope.dashboards, function(listedDashboard) {
-        return dashboard === listedDashboard;
+    $scope.removePlaylistItem = function(playlistItem) {
+      _.remove($scope.playlistItems, function(listedPlaylistItem) {
+        return playlistItem === listedPlaylistItem;
       });
-      $scope.filterFoundDashboards();
+      $scope.filterFoundPlaylistItems();
     };
 
-    $scope.savePlaylist = function(playlist, dashboards) {
+    $scope.savePlaylist = function(playlist, playlistItems) {
       var savePromise;
 
-      playlist.data = dashboards.map(function(dashboard) {
-        return dashboard.id;
-      });
-
-      // Hardcoding playlist type for this iteration
-      playlist.type = "dashboards";
+      playlist.items = playlistItems;
 
       savePromise = playlist.id
         ? backendSrv.put('/api/playlists/' + playlist.id, playlist)
@@ -90,7 +90,7 @@ function (angular, config, _) {
           $scope.appEvent('alert-success', ['Playlist saved', '']);
           $location.path('/playlists');
         }, function() {
-          $scope.appEvent('alert-success', ['Unable to save playlist', '']);
+          $scope.appEvent('alert-error', ['Unable to save playlist', '']);
         });
     };
 
@@ -103,11 +103,11 @@ function (angular, config, _) {
     };
 
     $scope.isPlaylistEmpty = function() {
-      return !$scope.dashboards.length;
+      return !$scope.playlistItems.length;
     };
 
     $scope.isSearchResultsEmpty = function() {
-      return !$scope.foundDashboards.length;
+      return !$scope.foundPlaylistItems.length;
     };
 
     $scope.isSearchQueryEmpty = function() {
@@ -122,22 +122,22 @@ function (angular, config, _) {
       return $scope.loading;
     };
 
-    $scope.moveDashboard = function(dashboard, offset) {
-      var currentPosition = $scope.dashboards.indexOf(dashboard);
+    $scope.movePlaylistItem = function(playlistItem, offset) {
+      var currentPosition = $scope.playlistItems.indexOf(playlistItem);
       var newPosition = currentPosition + offset;
 
-      if (newPosition >= 0 && newPosition < $scope.dashboards.length) {
-        $scope.dashboards.splice(currentPosition, 1);
-        $scope.dashboards.splice(newPosition, 0, dashboard);
+      if (newPosition >= 0 && newPosition < $scope.playlistItems.length) {
+        $scope.playlistItems.splice(currentPosition, 1);
+        $scope.playlistItems.splice(newPosition, 0, playlistItem);
       }
     };
 
-    $scope.moveDashboardUp = function(dashboard) {
-      $scope.moveDashboard(dashboard, -1);
+    $scope.movePlaylistItemUp = function(playlistItem) {
+      $scope.moveDashboard(playlistItem, -1);
     };
 
-    $scope.moveDashboardDown = function(dashboard) {
-      $scope.moveDashboard(dashboard, 1);
+    $scope.movePlaylistItemDown = function(playlistItem) {
+      $scope.moveDashboard(playlistItem, 1);
     };
 
     $scope.search();