mirror of
https://github.com/grafana/grafana.git
synced 2025-02-20 11:48:34 -06:00
95 lines
3.6 KiB
HTML
95 lines
3.6 KiB
HTML
|
|
<div class="search-backdrop" ng-if="ctrl.isOpen"></div>
|
|
|
|
<div class="search-container" ng-if="ctrl.isOpen">
|
|
|
|
<div class="search-field-wrapper">
|
|
<div class="search-field-icon pointer" ng-click="ctrl.closeSearch()"><i class="fa fa-search"></i></div>
|
|
|
|
<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.search()"
|
|
ng-blur="ctrl.searchInputBlur()"
|
|
/>
|
|
|
|
<div class="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="tagName" class="label label-tag">
|
|
<i class="fa fa-remove"></i>
|
|
{{tagName}}
|
|
</a>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="search-field-spacer"></div>
|
|
</div>
|
|
|
|
<div class="search-dropdown" ng-class="{'search-dropdown--fade-in': ctrl.openCompleted}">
|
|
<div gemini-scrollbar>
|
|
<div class="search-results-container" ng-if="ctrl.tagsMode">
|
|
<div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
|
|
ng-class="{'selected': $index === ctrl.selectedIndex }"
|
|
ng-click="ctrl.filterByTag(tag.term, $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 class="search-results-container" ng-if="!ctrl.tagsMode">
|
|
<h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
|
|
|
|
<div ng-repeat="section in ctrl.results" class="search-section">
|
|
<a class="search-section__header pointer" ng-hide="section.hideHeader" ng-click="ctrl.toggleFolder(section)">
|
|
<i class="search-section__header__icon" ng-class="section.icon"></i>
|
|
<span class="search-section__header__text">{{::section.title}}</span>
|
|
<i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
|
|
<i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
|
|
</a>
|
|
|
|
<div ng-if="section.expanded">
|
|
<a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}">
|
|
<span class="search-item__icon">
|
|
<i class="fa fa-th-large"></i>
|
|
</span>
|
|
<span class="search-item__title">
|
|
{{::item.title}}
|
|
</span>
|
|
<span class="search-item__tags">
|
|
<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag" class="label label-tag">
|
|
{{tag}}
|
|
</span>
|
|
</span>
|
|
<span class="search-item__actions">
|
|
<i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-button-row">
|
|
<a class="search-button-row-explore-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
|
|
Find <img src="public/img/icn-dashboard-tiny.svg" width="14" /> dashboards on Grafana.com
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|