mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge branch 'master' of github.com:grafana/grafana
This commit is contained in:
Torkel Ödegaard
@@ -24,8 +24,16 @@
|
||||
<i class="fa" ng-class="{'fa-star-o': !dashboardMeta.isStarred, 'fa-star': dashboardMeta.isStarred}" style="color: orange;"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-show="dashboardMeta.canShare">
|
||||
<a class="pointer" ng-click="shareDashboard()" bs-tooltip="'Share dashboard'" data-placement="bottom"><i class="fa fa-share-square-o"></i></a>
|
||||
<li ng-show="dashboardMeta.canShare" class="dropdown">
|
||||
<a class="pointer" ng-click="hideTooltip($event)" bs-tooltip="'Share dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-share-square-o"></i></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="shareDashboard(0)">
|
||||
<i class="fa fa-link"></i>
|
||||
Link to Dashboard</a></li>
|
||||
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="shareDashboard(1)">
|
||||
<i class="gf-icon gf-icon-snap-multi"></i>
|
||||
Snapshot sharing</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li ng-show="dashboardMeta.canSave">
|
||||
<a ng-click="saveDashboard()" bs-tooltip="'Save dashboard'" data-placement="bottom"><i class="fa fa-save"></i></a>
|
||||
|
||||
@@ -42,10 +42,13 @@ export class DashNavCtrl {
|
||||
}
|
||||
};
|
||||
|
||||
$scope.shareDashboard = function() {
|
||||
$scope.shareDashboard = function(tabIndex) {
|
||||
var modalScope = $scope.$new();
|
||||
modalScope.tabIndex = tabIndex;
|
||||
|
||||
$scope.appEvent('show-modal', {
|
||||
src: './app/features/dashboard/partials/shareModal.html',
|
||||
scope: $scope.$new(),
|
||||
scope: modalScope
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
|
||||
<script type="text/ng-template" id="shareLink.html">
|
||||
<div class="share-modal-big-icon">
|
||||
<i class="fa fa-external-link"></i>
|
||||
<i class="fa fa-link"></i>
|
||||
</div>
|
||||
|
||||
<div ng-include src="'shareLinkOptions.html'"></div>
|
||||
|
||||
@@ -12,7 +12,7 @@ function (angular, _, require, config) {
|
||||
module.controller('ShareModalCtrl', function($scope, $rootScope, $location, $timeout, timeSrv, $element, templateSrv, linkSrv) {
|
||||
|
||||
$scope.options = { forCurrent: true, includeTemplateVars: true, theme: 'current' };
|
||||
$scope.editor = { index: 0 };
|
||||
$scope.editor = { index: $scope.tabIndex || 0};
|
||||
|
||||
$scope.init = function() {
|
||||
$scope.modeSharePanel = $scope.panel ? true : false;
|
||||
|
||||
@@ -123,7 +123,7 @@ function (angular, $, _) {
|
||||
}
|
||||
|
||||
var menuTemplate;
|
||||
if ($(e.target).hasClass('fa-external-link')) {
|
||||
if ($(e.target).hasClass('fa-link')) {
|
||||
menuTemplate = createExternalLinkMenu($scope);
|
||||
} else {
|
||||
menuTemplate = createMenuTemplate($scope);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
define([
|
||||
'./playlists_ctrl',
|
||||
'./playlist_search',
|
||||
'./playlist_srv',
|
||||
'./playlist_edit_ctrl',
|
||||
'./playlist_routes'
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<navbar title="Playlists" title-url="playlists" icon="fa fa-fw fa-list" subnav="true">
|
||||
<ul class="nav">
|
||||
<li ng-class="{active: isNew()}" ng-show="isNew()"><a href="datasources/create">New</a></li>
|
||||
<li class="active" ng-show="!isNew()"><a href="playlists/edit/{{playlist.id}}">{{playlist.name}}</a></li>
|
||||
<li ng-class="{active: ctrl.isNew()}" ng-show="ctrl.isNew()"><a href="datasources/create">New</a></li>
|
||||
<li class="active" ng-show="!ctrl.isNew()"><a href="playlists/edit/{{ctrl.playlist.id}}">{{ctrl.playlist.name}}</a></li>
|
||||
</ul>
|
||||
</navbar>
|
||||
|
||||
<div class="page-container" ng-form="playlistEditForm">
|
||||
<div class="page">
|
||||
<h2 ng-show="isNew()">New playlist</h2>
|
||||
<h2 ng-show="!isNew()">Edit playlist</h2>
|
||||
<h2 ng-show="ctrl.isNew()">New playlist</h2>
|
||||
<h2 ng-show="!ctrl.isNew()">Edit playlist</h2>
|
||||
|
||||
<h4>Name and interval</h4>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
Name
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" required ng-model="playlist.name" class="input-xlarge tight-form-input">
|
||||
<input type="text" required ng-model="ctrl.playlist.name" class="input-xlarge tight-form-input">
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
@@ -31,7 +31,7 @@
|
||||
Interval
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" required ng-model="playlist.interval" placeholder="5m" class="input-xlarge tight-form-input">
|
||||
<input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="input-xlarge tight-form-input">
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
@@ -39,66 +39,72 @@
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<h4>Add dashboards</h4>
|
||||
|
||||
<div style="display: inline-block">
|
||||
<div class="tight-form last">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item">
|
||||
Search
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
class="tight-form-input input-xlarge last"
|
||||
ng-model="searchQuery"
|
||||
placeholder="dashboard search term"
|
||||
ng-trim="true"
|
||||
ng-change="search()">
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span5 pull-left">
|
||||
<h5>Search results ({{filteredPlaylistItems.length}})</h5>
|
||||
<h5>Add dashboards</h5>
|
||||
<div style="">
|
||||
<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span5 pull-left" ng-if="ctrl.filteredDashboards.length > 0">
|
||||
<h5>Search results ({{ctrl.filteredDashboards.length}})</h5>
|
||||
<table class="grafana-options-table">
|
||||
<tr ng-repeat="playlistItem in filteredPlaylistItems">
|
||||
<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
|
||||
<td style="white-space: nowrap;">
|
||||
{{playlistItem.title}}
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<button class="btn btn-inverse btn-mini pull-right" ng-click="addPlaylistItem(playlistItem)">
|
||||
<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
|
||||
<i class="fa fa-plus"></i>
|
||||
Add to playlist
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-if="isSearchResultsEmpty()">
|
||||
<td colspan="2">
|
||||
<i class="fa fa-warning"></i> Search results empty
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0">
|
||||
<div class="row">
|
||||
<div class="span6 offset1">
|
||||
<div ng-repeat="tag in ctrl.filteredTags" class="pointer" style="width: 180px; float: left;"
|
||||
ng-class="{'selected': $index === selectedIndex }"
|
||||
ng-click="ctrl.addTagPlaylistItem(tag, $event)">
|
||||
<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
|
||||
<i class="fa fa-tag"></i>
|
||||
<span>{{tag.term}} ({{tag.count}})</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span5 pull-left">
|
||||
<h5>Added dashboards</h5>
|
||||
<table class="grafana-options-table">
|
||||
<tr ng-repeat="playlistItem in playlistItems">
|
||||
<td style="white-space: nowrap;">
|
||||
<tr ng-repeat="playlistItem in ctrl.playlistItems">
|
||||
<td style="white-space: nowrap;" ng-if="playlistItem.type === 'dashboard_by_id'">
|
||||
{{playlistItem.title}}
|
||||
</td>
|
||||
<td style="white-space: nowrap;" ng-if="playlistItem.type === 'dashboard_by_tag'">
|
||||
<a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title">
|
||||
<i class="fa fa-tag"></i>
|
||||
<span>{{playlistItem.title}}</span>
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td style="text-align: right">
|
||||
<button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="movePlaylistItemUp(playlistItem)">
|
||||
<button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
|
||||
<i class="fa fa-arrow-up"></i>
|
||||
</button>
|
||||
<button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="movePlaylistItemDown(playlistItem)">
|
||||
<button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
|
||||
<i class="fa fa-arrow-down"></i>
|
||||
</button>
|
||||
<button class="btn btn-inverse btn-mini" ng-click="removePlaylistItem(playlistItem)">
|
||||
<button class="btn btn-inverse btn-mini" ng-click="ctrl.removePlaylistItem(playlistItem)">
|
||||
<i class="fa fa-remove"></i>
|
||||
</button>
|
||||
</td>
|
||||
@@ -113,11 +119,11 @@
|
||||
<!-- <div class="tight-form"> -->
|
||||
<button type="button"
|
||||
class="btn btn-success"
|
||||
ng-disabled="playlistEditForm.$invalid || isPlaylistEmpty()"
|
||||
ng-click="savePlaylist(playlist, playlistItems)">Save</button>
|
||||
ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
|
||||
ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</button>
|
||||
<button type="button"
|
||||
class="btn btn-inverse"
|
||||
ng-click="backToList()">Cancel</button>
|
||||
ng-click="ctrl.backToList()">Cancel</button>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
|
||||
26
public/app/features/playlist/partials/playlist_search.html
Normal file
26
public/app/features/playlist/partials/playlist_search.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<div class="playlist-search-field-wrapper">
|
||||
<span style="position: relative;">
|
||||
<input type="text" placeholder="Find 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()" />
|
||||
</span>
|
||||
<div class="playlist-search-switches">
|
||||
<i class="fa fa-filter"></i>
|
||||
<a class="pointer" href="javascript:void 0;" ng-click="ctrl.showStarred()" tabindex="2">
|
||||
<i class="fa fa-remove" ng-show="ctrl.query.starred"></i>
|
||||
starred
|
||||
</a> |
|
||||
<a class="pointer" href="javascript:void 0;" ng-click="ctrl.getTags()" tabindex="3">
|
||||
<i class="fa fa-remove" ng-show="ctrl.tagsMode"></i>
|
||||
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">
|
||||
<i class="fa fa-remove"></i>
|
||||
{{tagName}}
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -19,7 +19,7 @@
|
||||
<th style="width: 25px"></th>
|
||||
|
||||
</thead>
|
||||
<tr ng-repeat="playlist in playlists">
|
||||
<tr ng-repeat="playlist in ctrl.playlists">
|
||||
<td>
|
||||
<a href="playlists/edit/{{playlist.id}}">{{playlist.name}}</a>
|
||||
</td>
|
||||
@@ -39,7 +39,7 @@
|
||||
</a>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<a ng-click="removePlaylist(playlist)" class="btn btn-danger btn-mini">
|
||||
<a ng-click="ctrl.removePlaylist(playlist)" class="btn btn-danger btn-mini">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</td>
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
define([
|
||||
'angular',
|
||||
'app/core/config',
|
||||
'lodash'
|
||||
],
|
||||
function (angular, config, _) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.controllers');
|
||||
|
||||
module.controller('PlaylistEditCtrl', function($scope, playlistSrv, backendSrv, $location, $route) {
|
||||
$scope.filteredPlaylistItems = [];
|
||||
$scope.foundPlaylistItems = [];
|
||||
$scope.searchQuery = '';
|
||||
$scope.loading = false;
|
||||
$scope.playlist = {
|
||||
interval: '10m',
|
||||
};
|
||||
$scope.playlistItems = [];
|
||||
|
||||
$scope.init = function() {
|
||||
if ($route.current.params.id) {
|
||||
var playlistId = $route.current.params.id;
|
||||
|
||||
backendSrv.get('/api/playlists/' + playlistId)
|
||||
.then(function(result) {
|
||||
$scope.playlist = result;
|
||||
});
|
||||
|
||||
backendSrv.get('/api/playlists/' + playlistId + '/items')
|
||||
.then(function(result) {
|
||||
$scope.playlistItems = result;
|
||||
});
|
||||
}
|
||||
|
||||
$scope.search();
|
||||
};
|
||||
|
||||
$scope.search = function() {
|
||||
var query = {limit: 10};
|
||||
|
||||
if ($scope.searchQuery) {
|
||||
query.query = $scope.searchQuery;
|
||||
}
|
||||
|
||||
$scope.loading = true;
|
||||
|
||||
backendSrv.search(query)
|
||||
.then(function(results) {
|
||||
$scope.foundPlaylistItems = results;
|
||||
$scope.filterFoundPlaylistItems();
|
||||
})
|
||||
.finally(function() {
|
||||
$scope.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.filterFoundPlaylistItems = function() {
|
||||
$scope.filteredPlaylistItems = _.reject($scope.foundPlaylistItems, function(playlistItem) {
|
||||
return _.findWhere($scope.playlistItems, function(listPlaylistItem) {
|
||||
return parseInt(listPlaylistItem.value) === playlistItem.id;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
$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.removePlaylistItem = function(playlistItem) {
|
||||
_.remove($scope.playlistItems, function(listedPlaylistItem) {
|
||||
return playlistItem === listedPlaylistItem;
|
||||
});
|
||||
$scope.filterFoundPlaylistItems();
|
||||
};
|
||||
|
||||
$scope.savePlaylist = function(playlist, playlistItems) {
|
||||
var savePromise;
|
||||
|
||||
playlist.items = playlistItems;
|
||||
|
||||
savePromise = playlist.id
|
||||
? backendSrv.put('/api/playlists/' + playlist.id, playlist)
|
||||
: backendSrv.post('/api/playlists', playlist);
|
||||
|
||||
savePromise
|
||||
.then(function() {
|
||||
$scope.appEvent('alert-success', ['Playlist saved', '']);
|
||||
$location.path('/playlists');
|
||||
}, function() {
|
||||
$scope.appEvent('alert-error', ['Unable to save playlist', '']);
|
||||
});
|
||||
};
|
||||
|
||||
$scope.isNew = function() {
|
||||
return !$scope.playlist.id;
|
||||
};
|
||||
|
||||
$scope.isPlaylistEmpty = function() {
|
||||
return !$scope.playlistItems.length;
|
||||
};
|
||||
|
||||
$scope.isSearchResultsEmpty = function() {
|
||||
return !$scope.foundPlaylistItems.length;
|
||||
};
|
||||
|
||||
$scope.isSearchQueryEmpty = function() {
|
||||
return $scope.searchQuery === '';
|
||||
};
|
||||
|
||||
$scope.backToList = function() {
|
||||
$location.path('/playlists');
|
||||
};
|
||||
|
||||
$scope.isLoading = function() {
|
||||
return $scope.loading;
|
||||
};
|
||||
|
||||
$scope.movePlaylistItem = function(playlistItem, offset) {
|
||||
var currentPosition = $scope.playlistItems.indexOf(playlistItem);
|
||||
var newPosition = currentPosition + offset;
|
||||
|
||||
if (newPosition >= 0 && newPosition < $scope.playlistItems.length) {
|
||||
$scope.playlistItems.splice(currentPosition, 1);
|
||||
$scope.playlistItems.splice(newPosition, 0, playlistItem);
|
||||
}
|
||||
};
|
||||
|
||||
$scope.movePlaylistItemUp = function(playlistItem) {
|
||||
$scope.movePlaylistItem(playlistItem, -1);
|
||||
};
|
||||
|
||||
$scope.movePlaylistItemDown = function(playlistItem) {
|
||||
$scope.movePlaylistItem(playlistItem, 1);
|
||||
};
|
||||
|
||||
$scope.init();
|
||||
});
|
||||
});
|
||||
136
public/app/features/playlist/playlist_edit_ctrl.ts
Normal file
136
public/app/features/playlist/playlist_edit_ctrl.ts
Normal file
@@ -0,0 +1,136 @@
|
||||
///<reference path="../../headers/common.d.ts" />
|
||||
|
||||
import angular from 'angular';
|
||||
import _ from 'lodash';
|
||||
import coreModule from '../../core/core_module';
|
||||
import config from 'app/core/config';
|
||||
|
||||
export class PlaylistEditCtrl {
|
||||
filteredDashboards: any = [];
|
||||
filteredTags: any = [];
|
||||
searchQuery: string = '';
|
||||
loading: boolean = false;
|
||||
playlist: any = {
|
||||
interval: '10m',
|
||||
};
|
||||
playlistItems: any = [];
|
||||
dashboardresult: any = [];
|
||||
tagresult: any = [];
|
||||
|
||||
/** @ngInject */
|
||||
constructor(private $scope, private playlistSrv, private backendSrv, private $location, private $route) {
|
||||
if ($route.current.params.id) {
|
||||
var playlistId = $route.current.params.id;
|
||||
|
||||
backendSrv.get('/api/playlists/' + playlistId)
|
||||
.then((result) => {
|
||||
this.playlist = result;
|
||||
});
|
||||
|
||||
backendSrv.get('/api/playlists/' + playlistId + '/items')
|
||||
.then((result) => {
|
||||
this.playlistItems = result;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
filterFoundPlaylistItems() {
|
||||
this.filteredDashboards = _.reject(this.dashboardresult, (playlistItem) => {
|
||||
return _.findWhere(this.playlistItems, (listPlaylistItem) => {
|
||||
return parseInt(listPlaylistItem.value) === playlistItem.id;
|
||||
});
|
||||
});
|
||||
|
||||
this.filteredTags = _.reject(this.tagresult, (tag) => {
|
||||
return _.findWhere(this.playlistItems, (listPlaylistItem) => {
|
||||
return listPlaylistItem.value === tag.term;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
addPlaylistItem(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) {
|
||||
var 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) {
|
||||
_.remove(this.playlistItems, (listedPlaylistItem) => {
|
||||
return playlistItem === listedPlaylistItem;
|
||||
});
|
||||
this.filterFoundPlaylistItems();
|
||||
};
|
||||
|
||||
savePlaylist(playlist, playlistItems) {
|
||||
var savePromise;
|
||||
|
||||
playlist.items = playlistItems;
|
||||
|
||||
savePromise = playlist.id
|
||||
? this.backendSrv.put('/api/playlists/' + playlist.id, playlist)
|
||||
: this.backendSrv.post('/api/playlists', playlist);
|
||||
|
||||
savePromise
|
||||
.then(() => {
|
||||
this.$scope.appEvent('alert-success', ['Playlist saved', '']);
|
||||
this.$location.path('/playlists');
|
||||
}, () => {
|
||||
this.$scope.appEvent('alert-error', ['Unable to save playlist', '']);
|
||||
});
|
||||
}
|
||||
|
||||
isNew() {
|
||||
return !this.playlist.id;
|
||||
}
|
||||
|
||||
isPlaylistEmpty() {
|
||||
return !this.playlistItems.length;
|
||||
}
|
||||
|
||||
backToList() {
|
||||
this.$location.path('/playlists');
|
||||
}
|
||||
|
||||
searchStarted(promise) {
|
||||
promise.then((data) => {
|
||||
this.dashboardresult = data.dashboardResult;
|
||||
this.tagresult = data.tagResult;
|
||||
this.filterFoundPlaylistItems();
|
||||
});
|
||||
}
|
||||
|
||||
movePlaylistItem(playlistItem, offset) {
|
||||
var currentPosition = this.playlistItems.indexOf(playlistItem);
|
||||
var newPosition = currentPosition + offset;
|
||||
|
||||
if (newPosition >= 0 && newPosition < this.playlistItems.length) {
|
||||
this.playlistItems.splice(currentPosition, 1);
|
||||
this.playlistItems.splice(newPosition, 0, playlistItem);
|
||||
}
|
||||
}
|
||||
|
||||
movePlaylistItemUp(playlistItem) {
|
||||
this.movePlaylistItem(playlistItem, -1);
|
||||
}
|
||||
|
||||
movePlaylistItemDown(playlistItem) {
|
||||
this.movePlaylistItem(playlistItem, 1);
|
||||
}
|
||||
}
|
||||
|
||||
coreModule.controller('PlaylistEditCtrl', PlaylistEditCtrl);
|
||||
@@ -1,4 +1,4 @@
|
||||
define([
|
||||
define([
|
||||
'angular',
|
||||
'app/core/config',
|
||||
'lodash'
|
||||
@@ -12,14 +12,17 @@ function (angular) {
|
||||
$routeProvider
|
||||
.when('/playlists', {
|
||||
templateUrl: 'app/features/playlist/partials/playlists.html',
|
||||
controllerAs: 'ctrl',
|
||||
controller : 'PlaylistsCtrl'
|
||||
})
|
||||
.when('/playlists/create', {
|
||||
templateUrl: 'app/features/playlist/partials/playlist.html',
|
||||
controllerAs: 'ctrl',
|
||||
controller : 'PlaylistEditCtrl'
|
||||
})
|
||||
.when('/playlists/edit/:id', {
|
||||
templateUrl: 'app/features/playlist/partials/playlist.html',
|
||||
controllerAs: 'ctrl',
|
||||
controller : 'PlaylistEditCtrl'
|
||||
})
|
||||
.when('/playlists/play/:id', {
|
||||
|
||||
83
public/app/features/playlist/playlist_search.ts
Normal file
83
public/app/features/playlist/playlist_search.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
///<reference path="../../headers/common.d.ts" />
|
||||
|
||||
import angular from 'angular';
|
||||
import config from 'app/core/config';
|
||||
import _ from 'lodash';
|
||||
import $ from 'jquery';
|
||||
import coreModule from '../../core/core_module';
|
||||
|
||||
export class PlaylistSearchCtrl {
|
||||
query: any;
|
||||
tagsMode: boolean;
|
||||
|
||||
searchStarted: any;
|
||||
|
||||
/** @ngInject */
|
||||
constructor(private $scope, private $location, private $timeout, private backendSrv, private contextSrv) {
|
||||
this.query = { query: '', tag: [], starred: false };
|
||||
|
||||
$timeout(() => {
|
||||
this.query.query = '';
|
||||
this.searchDashboards();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
searchDashboards() {
|
||||
this.tagsMode = false;
|
||||
var prom: any = {};
|
||||
|
||||
prom.promise = this.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, evt) {
|
||||
this.query.tag.push(tag);
|
||||
this.searchDashboards();
|
||||
if (evt) {
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
getTags() {
|
||||
var prom: any = {};
|
||||
prom.promise = this.backendSrv.get('/api/dashboards/tags').then((result) => {
|
||||
return {
|
||||
dashboardResult: [],
|
||||
tagResult: result
|
||||
};
|
||||
});
|
||||
|
||||
this.searchStarted(prom);
|
||||
}
|
||||
}
|
||||
|
||||
export function playlistSearchDirective() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'app/features/playlist/partials/playlist_search.html',
|
||||
controller: PlaylistSearchCtrl,
|
||||
bindToController: true,
|
||||
controllerAs: 'ctrl',
|
||||
scope: {
|
||||
searchStarted: '&'
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
coreModule.directive('playlistSearch', playlistSearchDirective);
|
||||
@@ -1,43 +0,0 @@
|
||||
define([
|
||||
'angular',
|
||||
'lodash'
|
||||
],
|
||||
function (angular, _) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.controllers');
|
||||
|
||||
module.controller('PlaylistsCtrl', function($scope, $location, backendSrv) {
|
||||
backendSrv.get('/api/playlists')
|
||||
.then(function(result) {
|
||||
$scope.playlists = result;
|
||||
});
|
||||
|
||||
$scope.removePlaylistConfirmed = function(playlist) {
|
||||
_.remove($scope.playlists, {id: playlist.id});
|
||||
|
||||
backendSrv.delete('/api/playlists/' + playlist.id)
|
||||
.then(function() {
|
||||
$scope.appEvent('alert-success', ['Playlist deleted', '']);
|
||||
}, function() {
|
||||
$scope.appEvent('alert-error', ['Unable to delete playlist', '']);
|
||||
$scope.playlists.push(playlist);
|
||||
});
|
||||
};
|
||||
|
||||
$scope.removePlaylist = function(playlist) {
|
||||
|
||||
$scope.appEvent('confirm-modal', {
|
||||
title: 'Confirm delete playlist',
|
||||
text: 'Are you sure you want to delete playlist ' + playlist.name + '?',
|
||||
yesText: "Delete",
|
||||
icon: "fa-warning",
|
||||
onConfirm: function() {
|
||||
$scope.removePlaylistConfirmed(playlist);
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
});
|
||||
});
|
||||
44
public/app/features/playlist/playlists_ctrl.ts
Normal file
44
public/app/features/playlist/playlists_ctrl.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
///<reference path="../../headers/common.d.ts" />
|
||||
|
||||
import angular from 'angular';
|
||||
import _ from 'lodash';
|
||||
import coreModule from '../../core/core_module';
|
||||
|
||||
export class PlaylistsCtrl {
|
||||
playlists: any;
|
||||
|
||||
/** @ngInject */
|
||||
constructor(private $scope, private $location, private backendSrv) {
|
||||
backendSrv.get('/api/playlists')
|
||||
.then((result) => {
|
||||
this.playlists = result;
|
||||
});
|
||||
}
|
||||
|
||||
removePlaylistConfirmed(playlist) {
|
||||
_.remove(this.playlists, { id: playlist.id });
|
||||
|
||||
this.backendSrv.delete('/api/playlists/' + playlist.id)
|
||||
.then(() => {
|
||||
this.$scope.appEvent('alert-success', ['Playlist deleted', '']);
|
||||
}, () => {
|
||||
this.$scope.appEvent('alert-error', ['Unable to delete playlist', '']);
|
||||
this.playlists.push(playlist);
|
||||
});
|
||||
}
|
||||
|
||||
removePlaylist(playlist) {
|
||||
|
||||
this.$scope.appEvent('confirm-modal', {
|
||||
title: 'Confirm delete playlist',
|
||||
text: 'Are you sure you want to delete playlist ' + playlist.name + '?',
|
||||
yesText: "Delete",
|
||||
icon: "fa-warning",
|
||||
onConfirm: () => {
|
||||
this.removePlaylistConfirmed(playlist);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
coreModule.controller('PlaylistsCtrl', PlaylistsCtrl);
|
||||
@@ -1,86 +0,0 @@
|
||||
import '../playlist_edit_ctrl';
|
||||
import {describe, beforeEach, it, expect, angularMocks} from 'test/lib/common';
|
||||
import helpers from 'test/specs/helpers';
|
||||
|
||||
describe('PlaylistEditCtrl', function() {
|
||||
var ctx = new helpers.ControllerTestContext();
|
||||
|
||||
var searchResult = [
|
||||
{
|
||||
id: 2,
|
||||
title: 'dashboard: 2'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'dashboard: 3'
|
||||
}
|
||||
];
|
||||
|
||||
var playlistSrv = {};
|
||||
var backendSrv = {
|
||||
search: (query) => {
|
||||
return ctx.$q.when(searchResult);
|
||||
}
|
||||
};
|
||||
|
||||
beforeEach(angularMocks.module('grafana.core'));
|
||||
beforeEach(angularMocks.module('grafana.controllers'));
|
||||
beforeEach(angularMocks.module('grafana.services'));
|
||||
beforeEach(ctx.providePhase({
|
||||
playlistSrv: playlistSrv,
|
||||
backendSrv: backendSrv,
|
||||
$route: { current: { params: { } } },
|
||||
}));
|
||||
|
||||
beforeEach(ctx.createControllerPhase('PlaylistEditCtrl'));
|
||||
|
||||
beforeEach(() => {
|
||||
ctx.scope.$digest();
|
||||
});
|
||||
|
||||
describe('searchresult returns 2 dashboards', function() {
|
||||
it('found dashboard should be 2', function() {
|
||||
expect(ctx.scope.foundPlaylistItems.length).to.be(2);
|
||||
});
|
||||
|
||||
it('filtred dashboard should be 2', function() {
|
||||
expect(ctx.scope.filteredPlaylistItems.length).to.be(2);
|
||||
});
|
||||
|
||||
describe('adds one dashboard to playlist', () => {
|
||||
beforeEach(() => {
|
||||
ctx.scope.addPlaylistItem({ id: 2, title: 'dashboard: 2' });
|
||||
});
|
||||
|
||||
it('playlistitems should be increased by one', () => {
|
||||
expect(ctx.scope.playlistItems.length).to.be(1);
|
||||
});
|
||||
|
||||
it('filtred playlistitems should be reduced by one', () => {
|
||||
expect(ctx.scope.filteredPlaylistItems.length).to.be(1);
|
||||
});
|
||||
|
||||
it('found dashboard should be 2', function() {
|
||||
expect(ctx.scope.foundPlaylistItems.length).to.be(2);
|
||||
});
|
||||
|
||||
describe('removes one dashboard from playlist', () => {
|
||||
beforeEach(() => {
|
||||
ctx.scope.removePlaylistItem(ctx.scope.playlistItems[0]);
|
||||
});
|
||||
|
||||
it('playlistitems should be increased by one', () => {
|
||||
expect(ctx.scope.playlistItems.length).to.be(0);
|
||||
});
|
||||
|
||||
it('found dashboard should be 2', function() {
|
||||
expect(ctx.scope.foundPlaylistItems.length).to.be(2);
|
||||
});
|
||||
|
||||
it('filtred playlist should be reduced by one', () => {
|
||||
expect(ctx.scope.filteredPlaylistItems.length).to.be(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,72 @@
|
||||
import '../playlist_edit_ctrl';
|
||||
import {describe, beforeEach, it, expect} from 'test/lib/common';
|
||||
import {PlaylistEditCtrl} from '../playlist_edit_ctrl';
|
||||
|
||||
describe('PlaylistEditCtrl', () => {
|
||||
var ctx: any;
|
||||
beforeEach(() => {
|
||||
ctx = new PlaylistEditCtrl(null, null, null, null, { current: { params: {} } });
|
||||
|
||||
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).to.be(2);
|
||||
});
|
||||
|
||||
it('filtred result should be 2', () => {
|
||||
ctx.filterFoundPlaylistItems();
|
||||
expect(ctx.filteredDashboards.length).to.be(2);
|
||||
expect(ctx.filteredTags.length).to.be(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).to.be(2);
|
||||
});
|
||||
|
||||
it('filtred playlistitems should be reduced by one', () => {
|
||||
expect(ctx.filteredDashboards.length).to.be(1);
|
||||
expect(ctx.filteredTags.length).to.be(1);
|
||||
});
|
||||
|
||||
it('found dashboard should be 2', () => {
|
||||
expect(ctx.dashboardresult.length).to.be(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).to.be(0);
|
||||
});
|
||||
|
||||
it('found dashboard should be 2', () => {
|
||||
expect(ctx.dashboardresult.length).to.be(2);
|
||||
expect(ctx.filteredDashboards.length).to.be(2);
|
||||
expect(ctx.filteredTags.length).to.be(2);
|
||||
expect(ctx.tagresult.length).to.be(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user