search.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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()">
  5. <i class="fa fa-search"></i>
  6. </div>
  7. <input type="text" placeholder="Find dashboards by name" give-focus="ctrl.giveSearchFocus" tabindex="1"
  8. ng-keydown="ctrl.keyDown($event)"
  9. ng-model="ctrl.query.query"
  10. ng-model-options="{ debounce: 500 }"
  11. spellcheck='false'
  12. ng-change="ctrl.search()"
  13. ng-blur="ctrl.searchInputBlur()"
  14. />
  15. <div class="search-switches">
  16. <i class="fa fa-filter"></i>
  17. <a class="pointer" href="javascript:void 0;" ng-click="ctrl.showStarred()" tabindex="2">
  18. <i class="fa fa-remove" ng-show="ctrl.query.starred"></i>
  19. starred
  20. </a> |
  21. <a class="pointer" href="javascript:void 0;" ng-click="ctrl.getTags()" tabindex="3">
  22. <i class="fa fa-remove" ng-show="ctrl.tagsMode"></i>
  23. tags
  24. </a>
  25. <span ng-if="ctrl.query.tag.length">
  26. |
  27. <span ng-repeat="tagName in ctrl.query.tag">
  28. <a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="tagName" class="label label-tag">
  29. <i class="fa fa-remove"></i>
  30. {{tagName}}
  31. </a>
  32. </span>
  33. </span>
  34. </div>
  35. <div class="search-field-spacer"></div>
  36. </div>
  37. <div class="search-dropdown" ng-class="{'search-dropdown--fade-in': ctrl.openCompleted}">
  38. <div class="search-results-container" ng-if="ctrl.tagsMode">
  39. <div ng-repeat="tag in ctrl.results" class="pointer" style="width: 180px; float: left;"
  40. ng-class="{'selected': $index === ctrl.selectedIndex }"
  41. ng-click="ctrl.filterByTag(tag.term, $event)">
  42. <a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
  43. <i class="fa fa-tag"></i>
  44. <span>{{tag.term}} &nbsp;({{tag.count}})</span>
  45. </a>
  46. </div>
  47. </div>
  48. <div class="search-results-container" ng-if="!ctrl.tagsMode">
  49. <h6 ng-hide="ctrl.results.length">No dashboards matching your query were found.</h6>
  50. <div bindonce ng-repeat="row in ctrl.results">
  51. <a class="search-item pointer search-item-{{row.type}}"
  52. ng-class="{'selected': $index == ctrl.selectedIndex}" ng-href="{{row.url}}">
  53. <span class="search-result-tags">
  54. <span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name="tag" class="label label-tag">
  55. {{tag}}
  56. </span>
  57. <i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>
  58. </span>
  59. <span class="search-result-link">
  60. <i class="fa search-result-icon"></i>
  61. <span bo-text="row.title"></span>
  62. </span>
  63. <a class="search-item search-item-child pointer search-item-{{child.type}}" ng-repeat="child in row.dashboards"
  64. ng-class="{'selected': $index == ctrl.selectedIndex}" ng-href="{{'dashboard/' + child.uri}}">
  65. <span class="search-result-tags">
  66. <span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in child.tags" tag-color-from-name="tag" class="label label-tag">
  67. {{tag}}
  68. </span>
  69. <i class="fa" ng-class="{'fa-star': child.isStarred, 'fa-star-o': !child.isStarred}"></i>
  70. </span>
  71. <span class="search-result-link">
  72. <i class="fa search-result-icon"></i>
  73. <span bo-text="child.title"></span>
  74. </span>
  75. </a>
  76. </a>
  77. </div>
  78. </div>
  79. <div class="search-button-row">
  80. <a class="btn btn-secondary" href="dashboard/new" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
  81. <i class="fa fa-plus"></i>&nbsp; New Dashboard
  82. </a>
  83. <a class="btn btn-inverse" ng-click="ctrl.showNewFolderModal()" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
  84. <i class="fa fa-plus"></i>
  85. Create New Folder
  86. </a>
  87. <a class="btn btn-inverse" href="dashboard/new/?editview=import" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
  88. <i class="fa fa-upload"></i>
  89. &nbsp; Import Dashboard
  90. </a>
  91. <a class="search-button-row-explore-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
  92. Find <img src="public/img/icn-dashboard-tiny.svg" width="14" /> dashboards on Grafana.com
  93. </a>
  94. </div>
  95. </div>
  96. </div>