diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html
index 57fa3bb894a..668201b1574 100644
--- a/public/app/core/components/search/search.html
+++ b/public/app/core/components/search/search.html
@@ -55,23 +55,39 @@
No dashboards matching your query were found.
-
+
+
-
diff --git a/public/app/core/components/search/search.ts b/public/app/core/components/search/search.ts
index 32ea6800106..e0f383988bf 100644
--- a/public/app/core/components/search/search.ts
+++ b/public/app/core/components/search/search.ts
@@ -1,7 +1,6 @@
-///
-
import _ from 'lodash';
import coreModule from '../../core_module';
+import {impressions} from 'app/features/dashboard/impression_store';
export class SearchCtrl {
isOpen: boolean;
@@ -105,46 +104,45 @@ export class SearchCtrl {
return this.backendSrv.search(this.query).then(results => {
if (localSearchId < this.currentSearchId) { return; }
- let byId = _.groupBy(results, 'id');
- let byFolderId = _.groupBy(results, 'folderId');
- let finalList = [];
+ let sections: any = {};
- // add missing parent folders
- _.each(results, (hit, index) => {
- if (hit.folderId && !byId[hit.folderId]) {
- const folder = {
- id: hit.folderId,
- uri: `db/${hit.folderSlug}`,
- title: hit.folderTitle,
- type: 'dash-folder'
- };
- byId[hit.folderId] = folder;
- results.splice(index, 0, folder);
- }
- });
+ sections["starred"] = {
+ score: 0,
+ icon: 'fa fa-star-o',
+ title: "Starred dashboards",
+ items: [
+ {title: 'Frontend Nginx'},
+ {title: 'Cassandra overview'}
+ ]
+ };
- // group by folder
+ sections["recent"] = {
+ score: 1,
+ icon: 'fa fa-clock-o',
+ title: "Recent dashboards",
+ items: [
+ {title: 'Frontend Nginx'},
+ {title: 'Cassandra overview'}
+ ]
+ };
+
+ // create folder index
for (let hit of results) {
- if (hit.folderId) {
- hit.type = "dash-child";
- } else {
- finalList.push(hit);
+ let section = sections[hit.folderId];
+ if (!section) {
+ section = {
+ id: hit.folderId,
+ title: hit.folderTitle, items: [],
+ icon: 'fa fa-folder-open'
+ };
+ sections[hit.folderId] = section;
}
hit.url = 'dashboard/' + hit.uri;
-
- if (hit.type === 'dash-folder') {
- if (!byFolderId[hit.id]) {
- continue;
- }
-
- for (let child of byFolderId[hit.id]) {
- finalList.push(child);
- }
- }
+ section.items.push(hit);
}
- this.results = finalList;
+ this.results = _.sortBy(_.values(sections), 'score');
});
}
diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss
index b4dc7d1b13f..e82c99210ed 100644
--- a/public/sass/components/_search.scss
+++ b/public/sass/components/_search.scss
@@ -62,11 +62,11 @@
.search-dropdown {
display: flex;
flex-direction: column;
- max-width: 1100px;
+ max-width: 800px;
visibility: none;
opacity: 0;
background: $panel-bg;
- height: 65%;
+ height: calc(100% - #{$navbarHeight});
&--fade-in {
visibility: visible;
@@ -78,7 +78,6 @@
.search-results-container {
height: 100%;
display: block;
- line-height: 28px;
padding: $spacer;
flex-grow: 10;
@@ -88,27 +87,39 @@
color: white;
}
}
+}
- .fa-star, .fa-star-o {
- padding-left: 13px;
- }
+.search-section__header {
+ font-size: $font-size-h6;
+ padding: 0.6rem 0;
+ color: $text-color-weak;
+ display: flex;
- .fa-star {
- color: $orange;
- }
-
- .search-result-link {
- color: $grafanaListMainLinkColor;
- .fa {
- padding-right: 10px;
+ &:hover {
+ color: $text-color-weak;
+ .search-section__header__toggle {
+ background: $tight-form-func-bg;
+ color: $link-hover-color;
}
}
}
-.search-item {
- word-wrap: break-word;
- display: block;
+.search-section__header__icon {
padding: 3px 10px;
+}
+
+.search-section__header__toggle {
+ padding: 5px;
+}
+
+.search-section__header__text {
+ flex-grow: 1;
+}
+
+.search-item {
+ display: flex;
+ height: 35px;
+ padding: 0px;
white-space: nowrap;
background-color: $tight-form-bg;
margin-bottom: 4px;
@@ -123,25 +134,37 @@
background-color: $tight-form-func-bg;
}
- &--dash-db,
- &--dash-child {
- .search-result-icon::before {
- content: "\f009";
- }
+ .fa-star, .fa-star-o {
+ padding-left: 13px;
}
- &--dash-folder {
- .search-result-icon::before {
- content: "\f07c";
- }
- }
-
- &--dash-child {
- margin-left: 20px;
+ .fa-star {
+ color: $orange;
}
}
-.search-result-tags {
- float: right;
+.search-item__title {
+ color: $grafanaListMainLinkColor;
+ flex: 1 1 auto;
+ overflow: hidden;
+ padding: 8px;
}
+.search-item__icon {
+ padding: 5px;
+ flex: 0 0 auto;
+ font-size: 19px;
+}
+
+.search-item__tags {
+ padding: 8px;
+}
+
+.search-item__actions {
+ visibility: hidden;
+}
+
+.search-button-row {
+ text-align: center;
+ padding: $spacer*2 $spacer;
+}