search.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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}}" ng-class="{'selected': $index == ctrl.selectedIndex}" ng-href="{{row.url}}">
  52. <span class="search-result-tags">
  53. <span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name="tag" class="label label-tag">
  54. {{tag}}
  55. </span>
  56. <i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>
  57. </span>
  58. <span class="search-result-link">
  59. <i class="fa search-result-icon"></i>
  60. <span bo-text="row.title"></span>
  61. </span>
  62. <a class="search-item search-item-child pointer search-item-{{child.type}}" ng-repeat="child in row.dashboards"
  63. ng-class="{'selected': $index == ctrl.selectedIndex}" ng-href="{{'dashboard/' + child.uri}}">
  64. <span class="search-result-tags">
  65. <span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in child.tags" tag-color-from-name="tag" class="label label-tag">
  66. {{tag}}
  67. </span>
  68. <i class="fa" ng-class="{'fa-star': child.isStarred, 'fa-star-o': !child.isStarred}"></i>
  69. </span>
  70. <span class="search-result-link">
  71. <i class="fa search-result-icon"></i>
  72. <span bo-text="child.title"></span>
  73. </span>
  74. </a>
  75. </a>
  76. </div>
  77. </div>
  78. <div class="search-button-row">
  79. <a class="btn btn-secondary" href="dashboard/new" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
  80. <i class="fa fa-plus"></i>&nbsp; New Dashboard
  81. </a>
  82. <a class="btn btn-inverse" ng-click="ctrl.showNewFolderModal()" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
  83. <i class="fa fa-plus"></i>
  84. New Folder
  85. </a>
  86. <a class="btn btn-inverse" href="dashboard/new/?editview=import" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
  87. <i class="fa fa-upload"></i>
  88. &nbsp; Import Dashboard
  89. </a>
  90. <a class="search-button-row-explore-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
  91. Find <img src="public/img/icn-dashboard-tiny.svg" width="14" /> dashboards on Grafana.com
  92. </a>
  93. </div>
  94. </div>
  95. </div>