Chore: Cleans up unused Playlist files (#32240)

This commit is contained in:
Hugo Häggmark 2021-03-24 07:11:45 +01:00 committed by GitHub
parent 15676baa4b
commit dea7c70fac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 0 additions and 588 deletions

View File

@ -1,4 +0,0 @@
import './playlists_ctrl';
import './playlist_search';
import './playlist_edit_ctrl';
import './playlist_routes';

View File

@ -1,124 +0,0 @@
<page-header model="ctrl.navModel"></page-header>
<div class="page-container page-body" ng-form="ctrl.playlistEditForm">
<h3 class="page-sub-heading" ng-hide="ctrl.isNew">Edit Playlist</h3>
<h3 class="page-sub-heading" ng-show="ctrl.isNew">New Playlist</h3>
<p class="playlist-description">
A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational
awareness, or just show off your metrics to your team or visitors.
</p>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-7">Name</span>
<input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input max-width-21" />
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Interval</span>
<input
type="text"
required
ng-model="ctrl.playlist.interval"
placeholder="5m"
class="gf-form-input max-width-21"
/>
</div>
</div>
<div class="gf-form-group">
<h3 class="page-headering">Dashboards</h3>
<table class="filter-table playlist-available-list">
<tr ng-repeat="playlistItem in ctrl.playlistItems">
<td ng-if="playlistItem.type === 'dashboard_by_id'">
<icon name="'apps'"></icon>&nbsp;&nbsp;{{playlistItem.title}}
</td>
<td ng-if="playlistItem.type === 'dashboard_by_tag'">
<a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title">
<icon name="'tag-alt'"></icon>
<span>{{playlistItem.title}}</span>
</a>
</td>
<td class="selected-playlistitem-settings">
<button class="btn btn-inverse btn-small" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
<icon name="'arrow-up'"></icon>
</button>
<button class="btn btn-inverse btn-small" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
<icon name="'arrow-down'"></icon>
</button>
<button class="btn btn-inverse btn-small" ng-click="ctrl.removePlaylistItem(playlistItem)">
<icon name="'times'"></icon>
</button>
</td>
</tr>
<tr ng-if="ctrl.playlistItems.length === 0">
<td><em>Playlist is empty, add dashboards below.</em></td>
</tr>
</table>
</div>
<div class="gf-form-group">
<h3 class="page-headering">Add dashboards</h3>
<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
<div ng-if="ctrl.filteredDashboards.length > 0">
<table class="filter-table playlist-available-list">
<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
<td>
<icon name="'apps'"></icon>
&nbsp;&nbsp;{{playlistItem.title}}
<icon name="'favorite'" type="'mono'" ng-show="playlistItem.isStarred"></icon>
</td>
<td class="add-dashboard">
<button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
<icon name="'plus'"></icon>
Add to playlist
</button>
</td>
</tr>
</table>
</div>
<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0;">
<table class="filter-table playlist-available-list">
<tr ng-repeat="tag in ctrl.filteredTags">
<td>
<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
<icon name="'tag-alt'"></icon>
<span>{{tag.term}} &nbsp;({{tag.count}})</span>
</a>
</td>
<td class="add-dashboard">
<button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addTagPlaylistItem(tag)">
<icon name="'plus'"></icon>
Add to playlist
</button>
</td>
</tr>
</table>
</div>
</div>
<div class="clearfix"></div>
<div class="gf-form-button-row">
<a
class="btn btn-primary"
ng-show="ctrl.isNew"
ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)"
>Create</a
>
<a
class="btn btn-primary"
ng-show="!ctrl.isNew"
ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)"
>Save</a
>
<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>
</div>
</div>
<footer />

View File

@ -1,35 +0,0 @@
<div class="playlist-search-field-wrapper">
<span style="position: relative;">
<input
type="text"
placeholder="Search dashboards by name"
tabindex="1"
ng-keydown="ctrl.keyDown($event)"
ng-model="ctrl.query.query"
ng-model-options="{ debounce: 500 }"
spellcheck="false"
ng-change="ctrl.searchDashboards()"
/>
<div class="playlist-search-switches">
<icon name="'filter'"></icon>
<a class="pointer" href="javascript:void 0;" ng-click="ctrl.showStarred()" tabindex="2">
<icon name="'times'" ng-show="ctrl.query.starred"></icon>
starred
</a>
|
<a class="pointer" href="javascript:void 0;" ng-click="ctrl.getTags()" tabindex="3">
<icon name="'times'" ng-show="ctrl.tagsMode"></icon>
tags
</a>
<span ng-if="ctrl.query.tag.length">
|
<span ng-repeat="tagName in ctrl.query.tag">
<a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="ctrl.tagName" class="label label-tag">
<icon name="'times'"></icon>
{{tagName}}
</a>
</span>
</span>
</div>
</span>
</div>

View File

@ -1,76 +0,0 @@
<page-header model="ctrl.navModel"></page-header>
<div class="page-container page-body">
<div ng-if="ctrl.playlists.length > 0">
<div class="page-action-bar" ng-if="ctrl.canEditPlaylists">
<div class="page-action-bar__spacer"></div>
<a class="btn btn-primary pull-right" href="playlists/create">
New playlist
</a>
</div>
<table class="filter-table filter-table--hover">
<thead>
<th><strong>Name</strong></th>
<th style="width: 100px"></th>
<th ng-if="ctrl.canEditPlaylists" style="width: 78px"></th>
</thead>
<tr ng-repeat="playlist in ctrl.playlists">
<td ng-class="{'link-td': ctrl.canEditPlaylists}">
<a ng-if="ctrl.canEditPlaylists" href="playlists/edit/{{playlist.id}}">{{playlist.name}}</a>
<span ng-if="!ctrl.canEditPlaylists">{{playlist.name}}</span>
</td>
<td class="dropdown">
<button class="btn btn-inverse btn-small" data-toggle="dropdown">
Start playlist
<icon name="'angle-down'"></icon>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{playlist.startUrl}}">
<icon name="'play'"></icon> In Normal mode</span>
</a>
<a href="{{playlist.startUrl}}?kiosk=tv">
<icon name="'play'"></icon> In TV mode</span>
</a>
<a href="{{playlist.startUrl}}?kiosk=tv&autofitpanels">
<icon name="'play'"></icon> In TV mode <span class="muted">(with auto fit panels)</span>
</a>
<a href="{{playlist.startUrl}}?kiosk">
<icon name="'play'"></icon> In Kiosk mode</span>
</a>
<a ng-href="{{playlist.startUrl}}?kiosk&autofitpanels">
<icon name="'play'"></icon> In Kiosk mode <span class="muted">(with auto fit panels)</span>
</a>
</li>
</ul>
</td>
<td ng-if="ctrl.canEditPlaylists" class="text-right">
<a ng-click="ctrl.removePlaylist(playlist)" class="btn btn-danger btn-small">
<icon name="'times'"></icon>
</a>
</td>
</tr>
</table>
</div>
<div ng-if="ctrl.playlists.length === 0">
<div ng-if="ctrl.canEditPlaylists">
<empty-list-cta
title="'There are no playlists created yet'"
buttonIcon="'plus'"
buttonLink="'playlists/create'"
buttonTitle="'Create Playlist'"
proTip="'You can use playlists to cycle dashboards on TVs without user control'"
proTipLink="'http://docs.grafana.org/reference/playlist/'"
proTipLinkTitle="'Learn more'"
proTipTarget="'_blank'" />
</div>
<div class="grafana-info-box" ng-if="!ctrl.canEditPlaylists">
<h5>There are no playlists created yet</h5>
<p>Unfortunately you don't have permission to create playlists.</p>
</div>
</div>
</div>
<footer />

View File

@ -1,147 +0,0 @@
import _ from 'lodash';
import coreModule from '../../core/core_module';
import { ILocationService, IScope } from 'angular';
import { getBackendSrv } from '@grafana/runtime';
import { NavModelSrv } from 'app/core/nav_model_srv';
import { AppEventEmitter } from 'app/types';
import { AppEvents } from '@grafana/data';
import { promiseToDigest } from '../../core/utils/promiseToDigest';
import { PlaylistItem } from './types';
export class PlaylistEditCtrl {
filteredDashboards: any = [];
filteredTags: any = [];
searchQuery = '';
loading = false;
playlist: any = {
interval: '5m',
};
playlistItems: any = [];
dashboardresult: any = [];
tagresult: any = [];
navModel: any;
isNew: boolean;
/** @ngInject */
constructor(
private $scope: IScope & AppEventEmitter,
private $location: ILocationService,
$route: any,
navModelSrv: NavModelSrv
) {
this.navModel = navModelSrv.getNav('dashboards', 'playlists', 0);
this.isNew = !$route.current.params.id;
if ($route.current.params.id) {
const playlistId = $route.current.params.id;
promiseToDigest(this.$scope)(
getBackendSrv()
.get('/api/playlists/' + playlistId)
.then((result: any) => {
this.playlist = result;
this.playlistItems = result.items;
})
);
}
}
filterFoundPlaylistItems() {
this.filteredDashboards = _.reject(this.dashboardresult, (playlistItem) => {
return _.find(this.playlistItems, (listPlaylistItem) => {
return parseInt(listPlaylistItem.value, 10) === playlistItem.id;
});
});
this.filteredTags = _.reject(this.tagresult, (tag) => {
return _.find(this.playlistItems, (listPlaylistItem) => {
return listPlaylistItem.value === tag.term;
});
});
}
addPlaylistItem(playlistItem: PlaylistItem) {
playlistItem.value = playlistItem.id!.toString();
playlistItem.type = 'dashboard_by_id';
playlistItem.order = this.playlistItems.length + 1;
this.playlistItems.push(playlistItem);
this.filterFoundPlaylistItems();
}
addTagPlaylistItem(tag: { term: any }) {
const playlistItem: any = {
value: tag.term,
type: 'dashboard_by_tag',
order: this.playlistItems.length + 1,
title: tag.term,
};
this.playlistItems.push(playlistItem);
this.filterFoundPlaylistItems();
}
removePlaylistItem(playlistItem: PlaylistItem) {
_.remove(this.playlistItems, (listedPlaylistItem) => {
return playlistItem === listedPlaylistItem;
});
this.filterFoundPlaylistItems();
}
savePlaylist(playlist: any, playlistItems: PlaylistItem[]) {
let savePromise;
playlist.items = playlistItems;
savePromise = playlist.id
? promiseToDigest(this.$scope)(getBackendSrv().put('/api/playlists/' + playlist.id, playlist))
: promiseToDigest(this.$scope)(getBackendSrv().post('/api/playlists', playlist));
savePromise.then(
() => {
this.$scope.appEvent(AppEvents.alertSuccess, ['Playlist saved']);
this.$location.path('/playlists');
},
() => {
this.$scope.appEvent(AppEvents.alertError, ['Unable to save playlist']);
}
);
}
isPlaylistEmpty() {
return !this.playlistItems.length;
}
backToList() {
this.$location.path('/playlists');
}
searchStarted(promise: Promise<any>) {
promise.then((data: any) => {
this.dashboardresult = data.dashboardResult;
this.tagresult = data.tagResult;
this.filterFoundPlaylistItems();
});
}
movePlaylistItem(playlistItem: PlaylistItem, offset: number) {
const currentPosition = this.playlistItems.indexOf(playlistItem);
const newPosition = currentPosition + offset;
if (newPosition >= 0 && newPosition < this.playlistItems.length) {
this.playlistItems.splice(currentPosition, 1);
this.playlistItems.splice(newPosition, 0, playlistItem);
}
}
movePlaylistItemUp(playlistItem: PlaylistItem) {
this.movePlaylistItem(playlistItem, -1);
}
movePlaylistItemDown(playlistItem: PlaylistItem) {
this.movePlaylistItem(playlistItem, 1);
}
}
coreModule.controller('PlaylistEditCtrl', PlaylistEditCtrl);

View File

@ -1,33 +0,0 @@
// TODO[Router]
// import { RouteDescriptor } from 'app/core/navigation/types';
//
// export const playlistRoutes: RouteDescriptor[] = [
// {
// path: '/playlists',
// templateUrl: 'public/app/features/playlist/partials/playlists.html',
// controllerAs: 'ctrl',
// controller: 'PlaylistsCtrl',
// },
// {
// path: '/playlists/create',
// templateUrl: 'public/app/features/playlist/partials/playlist.html',
// controllerAs: 'ctrl',
// controller: 'PlaylistEditCtrl',
// },
// {
// path: '/playlists/edit/:id',
// templateUrl: 'public/app/features/playlist/partials/playlist.html',
// controllerAs: 'ctrl',
// controller: 'PlaylistEditCtrl',
// },
// {
// path: '/playlists/play/:id',
// template: '',
// resolve: {
// init: (playlistSrv: PlaylistSrv, $route: any) => {
// const playlistId = $route.current.params.id;
// playlistSrv.start(playlistId);
// },
// },
// },
// ];

View File

@ -1,86 +0,0 @@
import { IScope, ITimeoutService } from 'angular';
import coreModule from '../../core/core_module';
import { backendSrv } from 'app/core/services/backend_srv';
import { promiseToDigest } from '../../core/utils/promiseToDigest';
export class PlaylistSearchCtrl {
query: any;
tagsMode: boolean;
searchStarted: any;
/** @ngInject */
constructor(private $scope: IScope, $timeout: ITimeoutService) {
this.query = { query: '', tag: [], starred: false, limit: 20 };
$timeout(() => {
this.query.query = '';
this.query.type = 'dash-db';
this.searchDashboards();
}, 100);
}
searchDashboards() {
this.tagsMode = false;
const prom: any = {};
prom.promise = promiseToDigest(this.$scope)(
backendSrv.search(this.query).then((result) => {
return {
dashboardResult: result,
tagResult: [],
};
})
);
this.searchStarted(prom);
}
showStarred() {
this.query.starred = !this.query.starred;
this.searchDashboards();
}
queryHasNoFilters() {
return this.query.query === '' && this.query.starred === false && this.query.tag.length === 0;
}
filterByTag(tag: any, evt: any) {
this.query.tag.push(tag);
this.searchDashboards();
if (evt) {
evt.stopPropagation();
evt.preventDefault();
}
}
getTags() {
const prom: any = {};
prom.promise = promiseToDigest(this.$scope)(
backendSrv.get('/api/dashboards/tags').then((result: any) => {
return {
dashboardResult: [],
tagResult: result,
} as any;
})
);
this.searchStarted(prom);
}
}
export function playlistSearchDirective() {
return {
restrict: 'E',
templateUrl: 'public/app/features/playlist/partials/playlist_search.html',
controller: PlaylistSearchCtrl,
bindToController: true,
controllerAs: 'ctrl',
scope: {
searchStarted: '&',
},
};
}
coreModule.directive('playlistSearch', playlistSearchDirective);

View File

@ -1,83 +0,0 @@
import { PlaylistEditCtrl } from '../playlist_edit_ctrl';
import { ILocationService, IScope } from 'angular';
import { AppEventEmitter } from '../../../types';
describe('PlaylistEditCtrl', () => {
let ctx: any;
beforeEach(() => {
const navModelSrv: any = {
getNav: () => {
return { breadcrumbs: [], node: {} } as any;
},
};
ctx = new PlaylistEditCtrl(
(null as unknown) as IScope & AppEventEmitter,
(null as unknown) as ILocationService,
{ current: { params: {} } },
navModelSrv
);
ctx.dashboardresult = [
{ id: 2, title: 'dashboard: 2' },
{ id: 3, title: 'dashboard: 3' },
];
ctx.tagresult = [
{ term: 'graphite', count: 1 },
{ term: 'nyc', count: 2 },
];
});
describe('searchresult returns 2 dashboards, ', () => {
it('found dashboard should be 2', () => {
expect(ctx.dashboardresult.length).toBe(2);
});
it('filtred result should be 2', () => {
ctx.filterFoundPlaylistItems();
expect(ctx.filteredDashboards.length).toBe(2);
expect(ctx.filteredTags.length).toBe(2);
});
describe('adds one dashboard to playlist, ', () => {
beforeEach(() => {
ctx.addPlaylistItem({ id: 2, title: 'dashboard: 2' });
ctx.addTagPlaylistItem({ term: 'graphite' });
ctx.filterFoundPlaylistItems();
});
it('playlistitems should be increased by one', () => {
expect(ctx.playlistItems.length).toBe(2);
});
it('filtred playlistitems should be reduced by one', () => {
expect(ctx.filteredDashboards.length).toBe(1);
expect(ctx.filteredTags.length).toBe(1);
});
it('found dashboard should be 2', () => {
expect(ctx.dashboardresult.length).toBe(2);
});
describe('removes one dashboard from playlist, ', () => {
beforeEach(() => {
ctx.removePlaylistItem(ctx.playlistItems[0]);
ctx.removePlaylistItem(ctx.playlistItems[0]);
ctx.filterFoundPlaylistItems();
});
it('playlistitems should be increased by one', () => {
expect(ctx.playlistItems.length).toBe(0);
});
it('found dashboard should be 2', () => {
expect(ctx.dashboardresult.length).toBe(2);
expect(ctx.filteredDashboards.length).toBe(2);
expect(ctx.filteredTags.length).toBe(2);
expect(ctx.tagresult.length).toBe(2);
});
});
});
});
});