mirror of https://github.com/grafana/grafana
bergquist
9 years ago
parent
12dfee544f
commit
a7de2ceae4
@ -0,0 +1,26 @@ |
||||
<div class="playlist-search-field-wrapper"> |
||||
<span style="position: relative;"> |
||||
<input type="text" placeholder="Find dashboards by name" give-focus="ctrl.giveSearchFocus" 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> |
||||
@ -0,0 +1,95 @@ |
||||
///<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((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); |
||||
@ -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; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue