search.html 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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. ng-blur="ctrl.searchInputBlur()"
  12. />
  13. <div class="search-field-spacer"></div>
  14. </div>
  15. <div class="search-dropdown">
  16. <div class="search-dropdown__col_1">
  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 class="search-dropdown__col_2">
  27. <div class="search-filter-box">
  28. <div class="search-filter-box__header">
  29. <i class="fa fa-filter"></i>
  30. Filter by:
  31. <a class="pointer pull-right small">
  32. <i class="fa fa-remove"></i> Clear
  33. </a>
  34. </div>
  35. <div class="gf-form">
  36. <folder-picker initial-title="ctrl.initialFolderFilterTitle"
  37. on-change="ctrl.onFolderChange($folder)"
  38. label-class="width-4">
  39. </folder-picker>
  40. </div>
  41. <div class="gf-form">
  42. <label class="gf-form-label width-4">Tags</label>
  43. <bootstrap-tagsinput ng-model="ctrl.dashboard.tags" tagclass="label label-tag" placeholder="add tags">
  44. </bootstrap-tagsinput>
  45. </div>
  46. </div>
  47. <div class="search-filter-box">
  48. <a href="dashboard/new" class="search-filter-box-link">
  49. <i class="gicon gicon-dashboard-new"></i>
  50. Dashboard
  51. </a>
  52. <a href="dashboards/folder/new" class="search-filter-box-link">
  53. <i class="gicon gicon-folder-new"></i>
  54. Folder
  55. </a>
  56. <a class="search-filter-box-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
  57. <img src="public/img/icn-dashboard-tiny.svg" width="20" /> Find dashboards on Grafana.com
  58. </a>
  59. </div>
  60. </div>
  61. </div>
  62. </div>