From b9d6c9714736759f55d436d52fdbd8a753568b14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 1 Nov 2017 16:59:20 +0100 Subject: [PATCH] ux: progress on new search --- public/app/core/components/search/search.html | 46 ++++++---- public/app/core/components/search/search.ts | 66 +++++++------- public/sass/components/_search.scss | 87 ++++++++++++------- 3 files changed, 118 insertions(+), 81 deletions(-) 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.
-
- - - - {{tag}} - - - - - - - {{::row.title}} - +
+ + + {{::section.title}} + + +
+ + + + + + {{::item.title}} + + + + {{tag}} + + + + + + +
- - + +
+ + Find dashboards on Grafana.com + +
+ 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; +}