search.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <div class="search-container" ng-if="ctrl.isOpen">
  2. <div class="search-field-wrapper">
  3. <span style="position: relative;">
  4. <input type="text" placeholder="Find dashboards by name" give-focus="ctrl.giveSearchFocus" tabindex="1"
  5. ng-keydown="ctrl.keyDown($event)" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.search()" />
  6. </span>
  7. <div class="search-switches">
  8. <i class="fa fa-filter"></i>
  9. <a class="pointer" href="javascript:void 0;" ng-click="ctrl.showStarred()" tabindex="2">
  10. <i class="fa fa-remove" ng-show="ctrl.query.starred"></i>
  11. starred
  12. </a> |
  13. <a class="pointer" href="javascript:void 0;" ng-click="ctrl.getTags()" tabindex="3">
  14. <i class="fa fa-remove" ng-show="ctrl.tagsMode"></i>
  15. tags
  16. </a>
  17. <span ng-if="ctrl.query.tag.length">
  18. |
  19. <span ng-repeat="tagName in ctrl.query.tag">
  20. <a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="tagName" class="label label-tag">
  21. <i class="fa fa-remove"></i>
  22. {{tagName}}
  23. </a>
  24. </span>
  25. </span>
  26. </div>
  27. </div>
  28. <div class="search-results-container" ng-if="ctrl.tagsMode">
  29. <div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
  30. ng-class="{'selected': $index === ctrl.selectedIndex }"
  31. ng-click="ctrl.filterByTag(tag.term, $event)">
  32. <a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
  33. <i class="fa fa-tag"></i>
  34. <span>{{tag.term}} &nbsp;({{tag.count}})</span>
  35. </a>
  36. </div>
  37. </div>
  38. <div class="search-results-container" ng-if="!ctrl.tagsMode">
  39. <h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
  40. <a class="search-item pointer search-item-{{row.type}}" bindonce ng-repeat="row in ctrl.results"
  41. ng-class="{'selected': $index == ctrl.selectedIndex}" ng-href="{{row.url}}">
  42. <span class="search-result-tags">
  43. <span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name="tag" class="label label-tag">
  44. {{tag}}
  45. </span>
  46. <i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>
  47. </span>
  48. <span class="search-result-link">
  49. <i class="fa search-result-icon"></i>
  50. <span bo-text="row.title"></span>
  51. </span>
  52. </a>
  53. </div>
  54. <div class="search-button-row">
  55. <a class="btn btn-inverse pull-left" href="dashboard/new" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
  56. <i class="fa fa-plus"></i>
  57. Create New
  58. </a>
  59. <a class="btn btn-inverse pull-left" href="dashboard/new/?editview=import" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
  60. <i class="fa fa-upload"></i>
  61. Import
  62. </a>
  63. <a class="pull-right search-button-row-explore-link" target="_blank" href="https://grafana.net/dashboards?utm_source=grafana_search">
  64. Find dashboards on
  65. </a>
  66. <div class="clearfix"></div>
  67. </div>
  68. </div>