Skip to content

N
nexpie-grafana-theme
Commit 98dccb86 by bergquist
Options

feat(playlist): refactor FE to support playlistitems

parent 8a389912
Showing with 48 additions and 47 deletions
pkg/services/sqlstore/playlist.go
...@@ -84,6 +84,7 @@ func UpdatePlaylist(query *m.UpdatePlaylistQuery) error { ...@@ -84,6 +84,7 @@ func UpdatePlaylist(query *m.UpdatePlaylistQuery) error {
} }
playlistItems := make([]m.PlaylistItem, 0) playlistItems := make([]m.PlaylistItem, 0)
for _, item := range query.Items { for _, item := range query.Items {
playlistItems = append(playlistItems, m.PlaylistItem{ playlistItems = append(playlistItems, m.PlaylistItem{
PlaylistId: playlist.Id, PlaylistId: playlist.Id,
......
public/app/features/playlist/partials/playlist.html
...@@ -59,14 +59,14 @@ ...@@ -59,14 +59,14 @@
<div> <div>
<div class="span5 pull-left"> <div class="span5 pull-left">
<h5>Search results ({{filteredDashboards.length}})</h5> <h5>Search results ({{filteredPlaylistItems.length}})</h5>
<table class="grafana-options-table"> <table class="grafana-options-table">
<tr ng-repeat="dashboard in filteredDashboards"> <tr ng-repeat="playlistItem in filteredPlaylistItems">
<td style="white-space: nowrap;"> <td style="white-space: nowrap;">
{{dashboard.title}} {{playlistItem.title}}
</td> </td>
<td style="text-align: center"> <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> <i class="fa fa-plus"></i>
Add to playlist Add to playlist
</button> </button>
...@@ -82,18 +82,18 @@ ...@@ -82,18 +82,18 @@
<div class="span5 pull-left"> <div class="span5 pull-left">
<h5>Playlist dashboards</h5> <h5>Playlist dashboards</h5>
<table class="grafana-options-table"> <table class="grafana-options-table">
<tr ng-repeat="dashboard in dashboards"> <tr ng-repeat="playlistItem in playlistItems">
<td style="white-space: nowrap;"> <td style="white-space: nowrap;">
{{dashboard.title}} {{playlistItem.title}}
</td> </td>
<td style="text-align: right"> <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> <i class="fa fa-arrow-up"></i>
</button> </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> <i class="fa fa-arrow-down"></i>
</button> </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> <i class="fa fa-remove"></i>
</button> </button>
</td> </td>
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
<button type="button" <button type="button"
class="btn btn-success" class="btn btn-success"
ng-disabled="playlistEditForm.$invalid || isPlaylistEmpty()" ng-disabled="playlistEditForm.$invalid || isPlaylistEmpty()"
ng-click="savePlaylist(playlist, dashboards)">Save</button> ng-click="savePlaylist(playlist, playlistItems)">Save</button>
<button type="button" <button type="button"
class="btn btn-default" class="btn btn-default"
ng-click="backToList()">Cancel</button> ng-click="backToList()">Cancel</button>
......
public/app/features/playlist/playlist_edit_ctrl.js
...@@ -10,12 +10,12 @@ function (angular, config, _) { ...@@ -10,12 +10,12 @@ function (angular, config, _) {
module.controller('PlaylistEditCtrl', function($scope, playlistSrv, backendSrv, $location, $route) { module.controller('PlaylistEditCtrl', function($scope, playlistSrv, backendSrv, $location, $route) {
$scope.timespan = config.playlist_timespan; $scope.timespan = config.playlist_timespan;
$scope.filteredDashboards = []; $scope.filteredPlaylistItems = [];
$scope.foundDashboards = []; $scope.foundPlaylistItems = [];
$scope.searchQuery = ''; $scope.searchQuery = '';
$scope.loading = false; $scope.loading = false;
$scope.playlist = {}; $scope.playlist = {};
$scope.dashboards = []; $scope.playlistItems = [];
if ($route.current.params.id) { if ($route.current.params.id) {
var playlistId = $route.current.params.id; var playlistId = $route.current.params.id;
...@@ -25,9 +25,9 @@ function (angular, config, _) { ...@@ -25,9 +25,9 @@ function (angular, config, _) {
$scope.playlist = result; $scope.playlist = result;
}); });
backendSrv.get('/api/playlists/' + playlistId + '/dashboards') backendSrv.get('/api/playlists/' + playlistId + '/playlistitems')
.then(function(result) { .then(function(result) {
$scope.dashboards = result; $scope.playlistItems = result;
}); });
} }
...@@ -43,43 +43,43 @@ function (angular, config, _) { ...@@ -43,43 +43,43 @@ function (angular, config, _) {
backendSrv.search(query) backendSrv.search(query)
.then(function(results) { .then(function(results) {
$scope.foundDashboards = results; $scope.foundPlaylistItems = results;
$scope.filterFoundDashboards(); $scope.filterFoundPlaylistItems();
}) })
.finally(function() { .finally(function() {
$scope.loading = false; $scope.loading = false;
}); });
}; };
$scope.filterFoundDashboards = function() { $scope.filterFoundPlaylistItems = function() {
$scope.filteredDashboards = _.reject($scope.foundDashboards, function(dashboard) { $scope.filteredPlaylistItems = _.reject($scope.foundPlaylistItems, function(playlistItem) {
return _.findWhere($scope.dashboards, function(listDashboard) { return _.findWhere($scope.playlistItems, function(listPlaylistItem) {
return listDashboard.id === dashboard.id; return listPlaylistItem === playlistItem;
}); });
}); });
}; };
$scope.addDashboard = function(dashboard) { $scope.addPlaylistItem = function(playlistItem) {
$scope.dashboards.push(dashboard); playlistItem.value = playlistItem.id.toString();
$scope.filterFoundDashboards(); playlistItem.type = 'dashboard_by_id';
playlistItem.order = $scope.playlistItems.length + 1;
$scope.playlistItems.push(playlistItem);
$scope.filterFoundPlaylistItems();
}; };
$scope.removeDashboard = function(dashboard) { $scope.removePlaylistItem = function(playlistItem) {
_.remove($scope.dashboards, function(listedDashboard) { _.remove($scope.playlistItems, function(listedPlaylistItem) {
return dashboard === listedDashboard; return playlistItem === listedPlaylistItem;
}); });
$scope.filterFoundDashboards(); $scope.filterFoundPlaylistItems();
}; };
$scope.savePlaylist = function(playlist, dashboards) { $scope.savePlaylist = function(playlist, playlistItems) {
var savePromise; var savePromise;
playlist.data = dashboards.map(function(dashboard) { playlist.items = playlistItems;
return dashboard.id;
});
// Hardcoding playlist type for this iteration
playlist.type = "dashboards";
savePromise = playlist.id savePromise = playlist.id
? backendSrv.put('/api/playlists/' + playlist.id, playlist) ? backendSrv.put('/api/playlists/' + playlist.id, playlist)
...@@ -90,7 +90,7 @@ function (angular, config, _) { ...@@ -90,7 +90,7 @@ function (angular, config, _) {
$scope.appEvent('alert-success', ['Playlist saved', '']); $scope.appEvent('alert-success', ['Playlist saved', '']);
$location.path('/playlists'); $location.path('/playlists');
}, function() { }, function() {
$scope.appEvent('alert-success', ['Unable to save playlist', '']); $scope.appEvent('alert-error', ['Unable to save playlist', '']);
}); });
}; };
...@@ -103,11 +103,11 @@ function (angular, config, _) { ...@@ -103,11 +103,11 @@ function (angular, config, _) {
}; };
$scope.isPlaylistEmpty = function() { $scope.isPlaylistEmpty = function() {
return !$scope.dashboards.length; return !$scope.playlistItems.length;
}; };
$scope.isSearchResultsEmpty = function() { $scope.isSearchResultsEmpty = function() {
return !$scope.foundDashboards.length; return !$scope.foundPlaylistItems.length;
}; };
$scope.isSearchQueryEmpty = function() { $scope.isSearchQueryEmpty = function() {
...@@ -122,22 +122,22 @@ function (angular, config, _) { ...@@ -122,22 +122,22 @@ function (angular, config, _) {
return $scope.loading; return $scope.loading;
}; };
$scope.moveDashboard = function(dashboard, offset) { $scope.movePlaylistItem = function(playlistItem, offset) {
var currentPosition = $scope.dashboards.indexOf(dashboard); var currentPosition = $scope.playlistItems.indexOf(playlistItem);
var newPosition = currentPosition + offset; var newPosition = currentPosition + offset;
if (newPosition >= 0 && newPosition < $scope.dashboards.length) { if (newPosition >= 0 && newPosition < $scope.playlistItems.length) {
$scope.dashboards.splice(currentPosition, 1); $scope.playlistItems.splice(currentPosition, 1);
$scope.dashboards.splice(newPosition, 0, dashboard); $scope.playlistItems.splice(newPosition, 0, playlistItem);
} }
}; };
$scope.moveDashboardUp = function(dashboard) { $scope.movePlaylistItemUp = function(playlistItem) {
$scope.moveDashboard(dashboard, -1); $scope.moveDashboard(playlistItem, -1);
}; };
$scope.moveDashboardDown = function(dashboard) { $scope.movePlaylistItemDown = function(playlistItem) {
$scope.moveDashboard(dashboard, 1); $scope.moveDashboard(playlistItem, 1);
}; };
$scope.search(); $scope.search();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment