From a7de2ceae4fb1e520477a2fdc2d9af6e9c97b25f Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 28 Jan 2016 20:06:50 +0100 Subject: [PATCH] feat(playlist): basic UI support for tags --- public/app/features/playlist/all.js | 1 + .../features/playlist/partials/playlist.html | 51 +++++----- .../playlist/partials/playlist_search.html | 26 +++++ .../features/playlist/playlist_edit_ctrl.ts | 59 ++++++----- .../app/features/playlist/playlist_search.ts | 95 ++++++++++++++++++ public/less/grafana.less | 1 + public/less/playlist.less | 99 +++++++++++++++++++ 7 files changed, 281 insertions(+), 51 deletions(-) create mode 100644 public/app/features/playlist/partials/playlist_search.html create mode 100644 public/app/features/playlist/playlist_search.ts create mode 100644 public/less/playlist.less 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 -
    • -
  • - -
    • -
-
-
-
-
Search results ({{ctrl.filteredPlaylistItems.length}})
+
Add dashboards
+
+ +
+
+
+ +
+
+
Search results ({{ctrl.filteredDashboards.length}})
- + @@ -77,13 +67,22 @@ - - -
{{playlistItem.title}}
- Search results empty -
+
+
+
+
+ + + {{tag.term}}  ({{tag.count}}) + +
+
+
+
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 @@ +
+ + + +
+ + + + starred + | + + + tags + + + | + + + + {{tagName}} + + + +
+
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