search.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <div class="search-backdrop" ng-if="ctrl.isOpen"></div>
  2. <div class="search-container" ng-if="ctrl.isOpen">
  3. <div class="search-field-wrapper">
  4. <div class="search-field-icon pointer" ng-click="ctrl.closeSearch()"><i class="fa fa-search"></i></div>
  5. <input type="text" placeholder="Find dashboards by name" give-focus="ctrl.giveSearchFocus" tabindex="1"
  6. ng-keydown="ctrl.keyDown($event)"
  7. ng-model="ctrl.query.query"
  8. ng-model-options="{ debounce: 500 }"
  9. spellcheck='false'
  10. ng-change="ctrl.search()"
  11. />
  12. <div class="search-field-spacer"></div>
  13. </div>
  14. <div class="search-dropdown">
  15. <div class="search-dropdown__col_1">
  16. <div class="search-results-scroller">
  17. <div class="search-results-container" grafana-scrollbar>
  18. <h6 ng-show="!ctrl.isLoading && ctrl.results.length === 0">No dashboards matching your query were found.</h6>
  19. <dashboard-search-results
  20. results="ctrl.results"
  21. on-tag-selected="ctrl.filterByTag($tag)"
  22. on-folder-expanding="ctrl.folderExpanding()"
  23. on-folder-expanded="ctrl.folderExpanded($folder)" />
  24. </div>
  25. </div>
  26. </div>
  27. <div class="search-dropdown__col_2">
  28. <div class="search-filter-box" ng-click="ctrl.onFilterboxClick()">
  29. <div class="search-filter-box__header">
  30. <i class="fa fa-filter"></i>
  31. Filter by:
  32. <a class="pointer pull-right small" ng-click="ctrl.clearSearchFilter()">
  33. <i class="fa fa-remove"></i> Clear
  34. </a>
  35. </div>
  36. <tag-filter tags="ctrl.query.tag" tagOptions="ctrl.getTags" onSelect="ctrl.onTagSelect">
  37. </tag-filter>
  38. </div>
  39. <div class="search-filter-box" ng-if="ctrl.isEditor">
  40. <a href="dashboard/new" class="search-filter-box-link">
  41. <i class="gicon gicon-dashboard-new"></i> New dashboard
  42. </a>
  43. <a href="dashboards/folder/new" class="search-filter-box-link">
  44. <i class="gicon gicon-folder-new"></i> New folder
  45. </a>
  46. <a href="dashboard/import" class="search-filter-box-link">
  47. <i class="gicon gicon-dashboard-import"></i> Import dashboard
  48. </a>
  49. <a class="search-filter-box-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
  50. <img src="public/img/icn-dashboard-tiny.svg" width="20" /> Find dashboards on Grafana.com
  51. </a>
  52. </div>
  53. </div>
  54. </div>
  55. </div>