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:
commit
9ec3216ab0
@ -18,11 +18,11 @@ The Playlist feature can be accessed from Grafana's sidemenu. Click the 'Playlis
|
||||
|
||||
Click on "New Playlist" button to create a new playlist. Firstly, name your playlist and configure a time interval for Grafana to wait on a particular Dashboard before advancing to the next one on the Playlist.
|
||||
|
||||
You can search Dashboards by name (or use a regular expression), and add them to your Playlist. By default, your starred dashboards will appear as candidates for the Playlist.
|
||||
You can search Dashboards by name (or use a regular expression), and add them to your Playlist. Or you could add tags which will include all the dashboards that belongs to a tag when the playlist start playing. By default, your starred dashboards will appear as candidates for the Playlist.
|
||||
|
||||
Be sure to click the "Add to dashboard" button next to the Dashboard name to add it to the Playlist. To remove a dashboard from the playlist click on "Remove[x]" button from the playlist.
|
||||
|
||||
Since the Playlist is basically a list of Dashboards, ensure that all the Dashboards you want to appear in your Playlist are added here.
|
||||
Since the Playlist is basically a list of Dashboards, ensure that all the Dashboards you want to appear in your Playlist are added here.
|
||||
|
||||
## Saving the playlist
|
||||
|
||||
|
@ -1,11 +1,8 @@
|
||||
package api
|
||||
|
||||
import (
|
||||
"errors"
|
||||
"strconv"
|
||||
|
||||
"github.com/grafana/grafana/pkg/bus"
|
||||
"github.com/grafana/grafana/pkg/log"
|
||||
_ "github.com/grafana/grafana/pkg/log"
|
||||
"github.com/grafana/grafana/pkg/middleware"
|
||||
m "github.com/grafana/grafana/pkg/models"
|
||||
)
|
||||
@ -101,39 +98,6 @@ func LoadPlaylistItems(id int64) ([]m.PlaylistItem, error) {
|
||||
return *itemQuery.Result, nil
|
||||
}
|
||||
|
||||
func LoadPlaylistDashboards(id int64) ([]m.PlaylistDashboardDto, error) {
|
||||
playlistItems, _ := LoadPlaylistItems(id)
|
||||
|
||||
dashboardIds := make([]int64, 0)
|
||||
|
||||
for _, i := range playlistItems {
|
||||
dashboardId, _ := strconv.ParseInt(i.Value, 10, 64)
|
||||
dashboardIds = append(dashboardIds, dashboardId)
|
||||
}
|
||||
|
||||
if len(dashboardIds) == 0 {
|
||||
return make([]m.PlaylistDashboardDto, 0), nil
|
||||
}
|
||||
|
||||
dashboardQuery := m.GetPlaylistDashboardsQuery{DashboardIds: dashboardIds}
|
||||
if err := bus.Dispatch(&dashboardQuery); err != nil {
|
||||
log.Warn("dashboardquery failed: %v", err)
|
||||
return nil, errors.New("Playlist not found")
|
||||
}
|
||||
|
||||
dtos := make([]m.PlaylistDashboardDto, 0)
|
||||
for _, item := range *dashboardQuery.Result {
|
||||
dtos = append(dtos, m.PlaylistDashboardDto{
|
||||
Id: item.Id,
|
||||
Slug: item.Slug,
|
||||
Title: item.Title,
|
||||
Uri: "db/" + item.Slug,
|
||||
})
|
||||
}
|
||||
|
||||
return dtos, nil
|
||||
}
|
||||
|
||||
func GetPlaylistItems(c *middleware.Context) Response {
|
||||
id := c.ParamsInt64(":id")
|
||||
|
||||
@ -147,9 +111,9 @@ func GetPlaylistItems(c *middleware.Context) Response {
|
||||
}
|
||||
|
||||
func GetPlaylistDashboards(c *middleware.Context) Response {
|
||||
id := c.ParamsInt64(":id")
|
||||
playlistId := c.ParamsInt64(":id")
|
||||
|
||||
playlists, err := LoadPlaylistDashboards(id)
|
||||
playlists, err := LoadPlaylistDashboards(c.OrgId, c.UserId, playlistId)
|
||||
if err != nil {
|
||||
return ApiError(500, "Could not load dashboards", err)
|
||||
}
|
||||
|
88
pkg/api/playlist_play.go
Normal file
88
pkg/api/playlist_play.go
Normal file
@ -0,0 +1,88 @@
|
||||
package api
|
||||
|
||||
import (
|
||||
"errors"
|
||||
"strconv"
|
||||
|
||||
"github.com/grafana/grafana/pkg/bus"
|
||||
_ "github.com/grafana/grafana/pkg/log"
|
||||
m "github.com/grafana/grafana/pkg/models"
|
||||
"github.com/grafana/grafana/pkg/services/search"
|
||||
)
|
||||
|
||||
func populateDashboardsById(dashboardByIds []int64) ([]m.PlaylistDashboardDto, error) {
|
||||
result := make([]m.PlaylistDashboardDto, 0)
|
||||
|
||||
if len(dashboardByIds) > 0 {
|
||||
dashboardQuery := m.GetDashboardsQuery{DashboardIds: dashboardByIds}
|
||||
if err := bus.Dispatch(&dashboardQuery); err != nil {
|
||||
return result, errors.New("Playlist not found") //TODO: dont swallow error
|
||||
}
|
||||
|
||||
for _, item := range *dashboardQuery.Result {
|
||||
result = append(result, m.PlaylistDashboardDto{
|
||||
Id: item.Id,
|
||||
Slug: item.Slug,
|
||||
Title: item.Title,
|
||||
Uri: "db/" + item.Slug,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return result, nil
|
||||
}
|
||||
|
||||
func populateDashboardsByTag(orgId, userId int64, dashboardByTag []string) []m.PlaylistDashboardDto {
|
||||
result := make([]m.PlaylistDashboardDto, 0)
|
||||
|
||||
if len(dashboardByTag) > 0 {
|
||||
for _, tag := range dashboardByTag {
|
||||
searchQuery := search.Query{
|
||||
Title: "",
|
||||
Tags: []string{tag},
|
||||
UserId: userId,
|
||||
Limit: 100,
|
||||
IsStarred: false,
|
||||
OrgId: orgId,
|
||||
}
|
||||
|
||||
if err := bus.Dispatch(&searchQuery); err == nil {
|
||||
for _, item := range searchQuery.Result {
|
||||
result = append(result, m.PlaylistDashboardDto{
|
||||
Id: item.Id,
|
||||
Title: item.Title,
|
||||
Uri: item.Uri,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
func LoadPlaylistDashboards(orgId, userId, playlistId int64) ([]m.PlaylistDashboardDto, error) {
|
||||
playlistItems, _ := LoadPlaylistItems(playlistId)
|
||||
|
||||
dashboardByIds := make([]int64, 0)
|
||||
dashboardByTag := make([]string, 0)
|
||||
|
||||
for _, i := range playlistItems {
|
||||
if i.Type == "dashboard_by_id" {
|
||||
dashboardId, _ := strconv.ParseInt(i.Value, 10, 64)
|
||||
dashboardByIds = append(dashboardByIds, dashboardId)
|
||||
}
|
||||
|
||||
if i.Type == "dashboard_by_tag" {
|
||||
dashboardByTag = append(dashboardByTag, i.Value)
|
||||
}
|
||||
}
|
||||
|
||||
result := make([]m.PlaylistDashboardDto, 0)
|
||||
|
||||
var k, _ = populateDashboardsById(dashboardByIds)
|
||||
result = append(result, k...)
|
||||
result = append(result, populateDashboardsByTag(orgId, userId, dashboardByTag)...)
|
||||
|
||||
return result, nil
|
||||
}
|
@ -146,3 +146,8 @@ type GetDashboardTagsQuery struct {
|
||||
OrgId int64
|
||||
Result []*DashboardTagCloudItem
|
||||
}
|
||||
|
||||
type GetDashboardsQuery struct {
|
||||
DashboardIds []int64
|
||||
Result *[]Dashboard
|
||||
}
|
||||
|
@ -76,9 +76,7 @@ type UpdatePlaylistCommand struct {
|
||||
OrgId int64 `json:"-"`
|
||||
Id int64 `json:"id" binding:"Required"`
|
||||
Name string `json:"name" binding:"Required"`
|
||||
Type string `json:"type"`
|
||||
Interval string `json:"interval"`
|
||||
Data []int64 `json:"data"`
|
||||
Items []PlaylistItemDTO `json:"items"`
|
||||
|
||||
Result *PlaylistDTO
|
||||
@ -86,9 +84,7 @@ type UpdatePlaylistCommand struct {
|
||||
|
||||
type CreatePlaylistCommand struct {
|
||||
Name string `json:"name" binding:"Required"`
|
||||
Type string `json:"type"`
|
||||
Interval string `json:"interval"`
|
||||
Data []int64 `json:"data"`
|
||||
Items []PlaylistItemDTO `json:"items"`
|
||||
|
||||
OrgId int64 `json:"-"`
|
||||
@ -121,8 +117,3 @@ type GetPlaylistItemsByIdQuery struct {
|
||||
PlaylistId int64
|
||||
Result *[]PlaylistItem
|
||||
}
|
||||
|
||||
type GetPlaylistDashboardsQuery struct {
|
||||
DashboardIds []int64
|
||||
Result *PlaylistDashboards
|
||||
}
|
||||
|
@ -14,6 +14,7 @@ import (
|
||||
func init() {
|
||||
bus.AddHandler("sql", SaveDashboard)
|
||||
bus.AddHandler("sql", GetDashboard)
|
||||
bus.AddHandler("sql", GetDashboards)
|
||||
bus.AddHandler("sql", DeleteDashboard)
|
||||
bus.AddHandler("sql", SearchDashboards)
|
||||
bus.AddHandler("sql", GetDashboardTags)
|
||||
@ -223,3 +224,20 @@ func DeleteDashboard(cmd *m.DeleteDashboardCommand) error {
|
||||
return nil
|
||||
})
|
||||
}
|
||||
|
||||
func GetDashboards(query *m.GetDashboardsQuery) error {
|
||||
if len(query.DashboardIds) == 0 {
|
||||
return m.ErrCommandValidationFailed
|
||||
}
|
||||
|
||||
var dashboards = make([]m.Dashboard, 0)
|
||||
|
||||
err := x.In("id", query.DashboardIds).Find(&dashboards)
|
||||
query.Result = &dashboards
|
||||
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
return nil
|
||||
}
|
||||
|
@ -15,7 +15,6 @@ func init() {
|
||||
bus.AddHandler("sql", DeletePlaylist)
|
||||
bus.AddHandler("sql", SearchPlaylists)
|
||||
bus.AddHandler("sql", GetPlaylist)
|
||||
bus.AddHandler("sql", GetPlaylistDashboards)
|
||||
bus.AddHandler("sql", GetPlaylistItem)
|
||||
}
|
||||
|
||||
@ -162,20 +161,3 @@ func GetPlaylistItem(query *m.GetPlaylistItemsByIdQuery) error {
|
||||
|
||||
return err
|
||||
}
|
||||
|
||||
func GetPlaylistDashboards(query *m.GetPlaylistDashboardsQuery) error {
|
||||
if len(query.DashboardIds) == 0 {
|
||||
return m.ErrCommandValidationFailed
|
||||
}
|
||||
|
||||
var dashboards = make(m.PlaylistDashboards, 0)
|
||||
|
||||
err := x.In("id", query.DashboardIds).Find(&dashboards)
|
||||
query.Result = &dashboards
|
||||
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
return nil
|
||||
}
|
||||
|
44
pkg/services/sqlstore/playlist_test.go
Normal file
44
pkg/services/sqlstore/playlist_test.go
Normal file
@ -0,0 +1,44 @@
|
||||
package sqlstore
|
||||
|
||||
import (
|
||||
"testing"
|
||||
|
||||
. "github.com/smartystreets/goconvey/convey"
|
||||
|
||||
m "github.com/grafana/grafana/pkg/models"
|
||||
)
|
||||
|
||||
func TestPlaylistDataAccess(t *testing.T) {
|
||||
|
||||
Convey("Testing Playlist data access", t, func() {
|
||||
InitTestDB(t)
|
||||
|
||||
Convey("Can create playlist", func() {
|
||||
items := []m.PlaylistItemDTO{
|
||||
{Title: "graphite", Value: "graphite", Type: "dashboard_by_tag"},
|
||||
{Title: "Backend response times", Value: "3", Type: "dashboard_by_id"},
|
||||
}
|
||||
cmd := m.CreatePlaylistCommand{Name: "NYC office", Interval: "10m", OrgId: 1, Items: items}
|
||||
err := CreatePlaylist(&cmd)
|
||||
So(err, ShouldBeNil)
|
||||
|
||||
Convey("can update playlist", func() {
|
||||
items := []m.PlaylistItemDTO{
|
||||
{Title: "influxdb", Value: "influxdb", Type: "dashboard_by_tag"},
|
||||
{Title: "Backend response times", Value: "2", Type: "dashboard_by_id"},
|
||||
}
|
||||
query := m.UpdatePlaylistCommand{Name: "NYC office ", OrgId: 1, Id: 1, Interval: "10s", Items: items}
|
||||
err = UpdatePlaylist(&query)
|
||||
|
||||
So(err, ShouldBeNil)
|
||||
|
||||
Convey("can remove playlist", func() {
|
||||
query := m.DeletePlaylistCommand{Id: 1}
|
||||
err = DeletePlaylist(&query)
|
||||
|
||||
So(err, ShouldBeNil)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
@ -276,7 +276,7 @@ function (angular, _, dateMath) {
|
||||
|
||||
query.downsample = interval + "-" + target.downsampleAggregator;
|
||||
|
||||
if (target.downsampleFillPolicy !== "none") {
|
||||
if (target.downsampleFillPolicy && target.downsampleFillPolicy !== "none") {
|
||||
query.downsample += "-" + target.downsampleFillPolicy;
|
||||
}
|
||||
}
|
||||
|
@ -8,6 +8,7 @@
|
||||
@import "bootstrap-tagsinput.less";
|
||||
@import "tables_lists.less";
|
||||
@import "search.less";
|
||||
@import "playlist.less";
|
||||
@import "panel.less";
|
||||
@import "forms.less";
|
||||
@import "tightform.less";
|
||||
|
93
public/less/playlist.less
Normal file
93
public/less/playlist.less
Normal file
@ -0,0 +1,93 @@
|
||||
.playlist-search-container {
|
||||
margin: 15px;
|
||||
z-index: 1000;
|
||||
position: relative;
|
||||
width: 700px;
|
||||
box-shadow: 0px 0px 55px 0px black;
|
||||
background-color: @grafanaPanelBackground;
|
||||
|
||||
.label-tag {
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-search-switches {
|
||||
position: relative;
|
||||
top: -39px;
|
||||
left: 260px;
|
||||
}
|
||||
|
||||
.playlist-search-field-wrapper {
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px 8px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button {
|
||||
margin: 0 4px 0 0;
|
||||
}
|
||||
> span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-search-results-container {
|
||||
min-height: 100px;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
line-height: 28px;
|
||||
|
||||
.search-item:hover, .search-item.selected {
|
||||
background-color: @grafanaListHighlight;
|
||||
}
|
||||
|
||||
.selected {
|
||||
.search-result-tag {
|
||||
opacity: 0.70;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-star, .fa-star-o {
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
.fa-star {
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
.search-result-link {
|
||||
color: @grafanaListMainLinkColor;
|
||||
.fa {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-item {
|
||||
display: block;
|
||||
padding: 3px 10px;
|
||||
white-space: nowrap;
|
||||
background-color: @grafanaListBackground;
|
||||
margin-bottom: 4px;
|
||||
.search-result-icon:before {
|
||||
content: "\f009";
|
||||
}
|
||||
|
||||
&.search-item-dash-home .search-result-icon:before {
|
||||
content: "\f015";
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-tags {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.search-result-actions {
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user