IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(playlist): refactor FE to support playlistitems

Browse Source
This commit is contained in:
bergquist 2016-01-11 16:54:52 +01:00
parent 8a38991270
commit 98dccb8641
3 changed files with 48 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pkg/services/sqlstore/playlist.go
View File

@ -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,

20
public/app/features/playlist/partials/playlist.html
View File

@ -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>

74
public/app/features/playlist/playlist_edit_ctrl.js
View File

@ -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();