diff --git a/public/app/features/playlist/all.js b/public/app/features/playlist/all.js
index a37de0f4612..3b07b0d74c5 100644
--- a/public/app/features/playlist/all.js
+++ b/public/app/features/playlist/all.js
@@ -1,5 +1,6 @@
define([
'./playlists_ctrl',
+ './playlist_search',
'./playlist_srv',
'./playlist_edit_ctrl',
'./playlist_routes'
diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html
index ca5cd05a997..c2a7cda09e1 100644
--- a/public/app/features/playlist/partials/playlist.html
+++ b/public/app/features/playlist/partials/playlist.html
@@ -39,34 +39,24 @@
- Add dashboards
-
-
Search results ({{ctrl.filteredPlaylistItems.length}})
+
Add dashboards
+
+
+
+
+
+
+
Search results ({{ctrl.filteredDashboards.length}})
-
+
|
{{playlistItem.title}}
|
@@ -77,13 +67,22 @@
-
- |
- Search results empty
- |
-
+
Added dashboards
diff --git a/public/app/features/playlist/partials/playlist_search.html b/public/app/features/playlist/partials/playlist_search.html
new file mode 100644
index 00000000000..01edcb413c0
--- /dev/null
+++ b/public/app/features/playlist/partials/playlist_search.html
@@ -0,0 +1,26 @@
+
diff --git a/public/app/features/playlist/playlist_edit_ctrl.ts b/public/app/features/playlist/playlist_edit_ctrl.ts
index f8f4a29fd5c..e684ba91ecf 100644
--- a/public/app/features/playlist/playlist_edit_ctrl.ts
+++ b/public/app/features/playlist/playlist_edit_ctrl.ts
@@ -6,14 +6,16 @@ import coreModule from '../../core/core_module';
import config from 'app/core/config';
export class PlaylistEditCtrl {
- filteredPlaylistItems: any = [];
- foundPlaylistItems: any = [];
+ 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) {
@@ -30,35 +32,18 @@ export class PlaylistEditCtrl {
this.playlistItems = result;
});
}
-
- this.search();
}
- search() {
- var query: any = {limit: 10};
-
- if (this.searchQuery) {
- query.query = this.searchQuery;
- }
-
- this.loading = true;
-
- this.backendSrv.search(query)
- .then((results) => {
- this.foundPlaylistItems = results;
- this.filterFoundPlaylistItems();
- })
- .finally(() => {
- this.loading = false;
- });
- };
-
filterFoundPlaylistItems() {
- this.filteredPlaylistItems = _.reject(this.foundPlaylistItems, (playlistItem) => {
+ console.log('filter !');
+ console.log(this.dashboardresult);
+ this.filteredDashboards = _.reject(this.dashboardresult, (playlistItem) => {
return _.findWhere(this.playlistItems, (listPlaylistItem) => {
return parseInt(listPlaylistItem.value) === playlistItem.id;
});
});
+
+ this.filteredTags = this.tagresult;
};
addPlaylistItem(playlistItem) {
@@ -70,6 +55,20 @@ export class PlaylistEditCtrl {
this.filterFoundPlaylistItems();
};
+ addTagPlaylistItem(tag) {
+ console.log(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;
@@ -104,7 +103,7 @@ export class PlaylistEditCtrl {
};
isSearchResultsEmpty() {
- return !this.foundPlaylistItems.length;
+ return !this.dashboardresult.length;
};
isSearchQueryEmpty() {
@@ -119,6 +118,16 @@ export class PlaylistEditCtrl {
return this.loading;
};
+ searchStarted(promise) {
+ promise.then((data) => {
+ console.log('searchStarted: ', data);
+
+ this.dashboardresult = data.dashboardResult;
+ this.tagresult = data.tagResult;
+ this.filterFoundPlaylistItems();
+ });
+ };
+
movePlaylistItem(playlistItem, offset) {
var currentPosition = this.playlistItems.indexOf(playlistItem);
var newPosition = currentPosition + offset;
diff --git a/public/app/features/playlist/playlist_search.ts b/public/app/features/playlist/playlist_search.ts
new file mode 100644
index 00000000000..cf16f4fbfa4
--- /dev/null
+++ b/public/app/features/playlist/playlist_search.ts
@@ -0,0 +1,95 @@
+///
+
+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((results) => {
+ console.log('playlist_search_ctrl: ', results);
+ return results;
+ });
+ */
+ prom.promise = this.backendSrv.search(this.query).then((result) => {
+ return {
+ dashboardResult: result,
+ tagResult: []
+ };
+ });
+
+ this.searchStarted(prom);
+ }
+
+ 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) => {
+ console.log('getTags: result', result);
+ return {
+ dashboardResult: [],
+ tagResult: result
+ };
+ });
+
+ this.searchStarted(prom);
+ /*
+ this.searchStarted(prom);
+
+ return this.backendSrv.get('/api/dashboards/tags').then((results) => {
+ this.tagsMode = true;
+
+
+ console.log(results);
+ });
+ */
+ };
+}
+
+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);
diff --git a/public/less/grafana.less b/public/less/grafana.less
index 9cf3630db3e..d10409d55df 100644
--- a/public/less/grafana.less
+++ b/public/less/grafana.less
@@ -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";
diff --git a/public/less/playlist.less b/public/less/playlist.less
new file mode 100644
index 00000000000..d120ca22548
--- /dev/null
+++ b/public/less/playlist.less
@@ -0,0 +1,99 @@
+.playlist-search-container {
+ //left: 59px;
+ //top: 39px;
+ margin: 15px;
+ z-index: 1000;
+ //position: relative;
+ position: relative;
+ width: 700px;
+ box-shadow: 0px 0px 55px 0px black;
+ //padding: 10px;
+ background-color: @grafanaPanelBackground;
+ //border: 1px solid @grafanaTargetFuncBackground;
+
+ .label-tag {
+ margin-left: 6px;
+ font-size: 11px;
+ padding: 2px 6px;
+ }
+}
+
+.playlist-search-switches {
+ position: relative;
+ top: -39px;
+ right: -268px;
+}
+
+.playlist-search-field-wrapper {
+ //padding-bottom: 10px;
+ 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;
+ }
+}
\ No newline at end of file