diff --git a/src/ui/public/kuery/suggestions/conjunction.js b/src/ui/public/kuery/suggestions/conjunction.js index 90857611af693..0abd46795fb4a 100644 --- a/src/ui/public/kuery/suggestions/conjunction.js +++ b/src/ui/public/kuery/suggestions/conjunction.js @@ -3,7 +3,13 @@ const type = 'conjunction'; const conjunctions = ['and', 'or']; function getDescription(conjunction) { - return `Add an ${conjunction.toUpperCase()} clause.`; + if (conjunction === 'and') { + return `

Requires that both arguments joined together both return true

`; + } else if (conjunction === 'or') { + return `

Requires only one of the arguments joined together must return true

`; + } else { + return `

Add an ${conjunction.toUpperCase()} clause

`; + } } export function getSuggestionsProvider() { diff --git a/src/ui/public/kuery/suggestions/field.js b/src/ui/public/kuery/suggestions/field.js index 2e74006ef4060..f49e5020ac9d4 100644 --- a/src/ui/public/kuery/suggestions/field.js +++ b/src/ui/public/kuery/suggestions/field.js @@ -1,7 +1,7 @@ const type = 'field'; function getDescription(fieldName) { - return `Filter results using ${fieldName}.`; + return `

Filter results that contain ${fieldName}

`; } export function getSuggestionsProvider({ indexPattern }) { diff --git a/src/ui/public/kuery/suggestions/operator.js b/src/ui/public/kuery/suggestions/operator.js index eb5ab27c983e8..2a140b597419b 100644 --- a/src/ui/public/kuery/suggestions/operator.js +++ b/src/ui/public/kuery/suggestions/operator.js @@ -2,33 +2,33 @@ const type = 'operator'; const operators = { '<=': { - description: 'is LESS THAN OR EQUAL TO some value', + description: 'is less than or equal to some value', fieldTypes: ['number', 'date', 'ip'] }, '>=': { - description: 'is GREATER THAN OR EQUAL TO to some value', + description: 'is greater than or equal to to some value', fieldTypes: ['number', 'date', 'ip'] }, '<': { - description: 'is LESS THAN some value', + description: 'is less than some value', fieldTypes: ['number', 'date', 'ip'] }, '>': { - description: 'is GREATER THAN some value', + description: 'is greater than some value', fieldTypes: ['number', 'date', 'ip'] }, ':': { - description: 'IS some value', + description: 'equals some value', fieldTypes: ['string', 'number', 'date', 'ip', 'geo_point', 'geo_shape'] }, ':*': { - description: 'EXISTS' + description: 'exists' } }; function getDescription({ fieldName, operator }) { const { description } = operators[operator]; - return `Filter results where ${fieldName} ${description}.`; + return `

Filter results where ${fieldName} ${description}

`; } export function getSuggestionsProvider({ indexPattern }) { diff --git a/src/ui/public/kuery/suggestions/recent_search.js b/src/ui/public/kuery/suggestions/recent_search.js index 070b4b9b1ef4d..1999c5e5dcb0f 100644 --- a/src/ui/public/kuery/suggestions/recent_search.js +++ b/src/ui/public/kuery/suggestions/recent_search.js @@ -1,5 +1,5 @@ const type = 'recentSearch'; -const description = 'A recent entry in your search history.'; +const description = 'Run this query you performed earlier'; export function getSuggestionsProvider({ persistedLog, query }) { return function getRecentSearchSuggestions() { diff --git a/src/ui/public/kuery/suggestions/value.js b/src/ui/public/kuery/suggestions/value.js index 55bdbb0dff5d4..a1a60349342ee 100644 --- a/src/ui/public/kuery/suggestions/value.js +++ b/src/ui/public/kuery/suggestions/value.js @@ -4,7 +4,10 @@ const baseUrl = chrome.addBasePath('/api/kibana/suggestions/values'); const type = 'value'; function getDescription({ fieldName, value }) { - return `Filter results where ${fieldName} is "${value}".`; + return ` +

Find results where ${fieldName} + is ${value}

+ `; } export function getSuggestionsProvider({ $http, indexPattern }) { diff --git a/src/ui/public/query_bar/directive/query_bar.html b/src/ui/public/query_bar/directive/query_bar.html index 8ac92d8cc0532..e7608098e4d31 100644 --- a/src/ui/public/query_bar/directive/query_bar.html +++ b/src/ui/public/query_bar/directive/query_bar.html @@ -7,6 +7,7 @@ items="queryBar.suggestions" item-template="queryBar.suggestionTemplate" on-select="queryBar.onSuggestionSelect(item)" + class="suggestionTypeahead" >
-
- {{item.type}} -
-
- {{item.text}} -
-
- {{item.description}} +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
diff --git a/src/ui/public/query_bar/directive/suggestion.less b/src/ui/public/query_bar/directive/suggestion.less index ca6fbbbdf1d16..8289d04feda0c 100644 --- a/src/ui/public/query_bar/directive/suggestion.less +++ b/src/ui/public/query_bar/directive/suggestion.less @@ -1,31 +1,150 @@ @import (reference) "~ui/styles/variables"; -.suggestion-type, .suggestion-text, .suggestion-description { - display: inline-block; - vertical-align: middle; +.suggestionItem { + display: flex; + align-items: stretch; + flex-grow: 1; + align-items: center; + font-size: 13px; + white-space: nowrap; } -.suggestion-type { - height: 32px; +.suggestionItem__text, .suggestionItem__type, .suggestionItem__description { + flex-grow: 1; + flex-basis: 0%; + display: flex; + flex-direction: column; +} + +.suggestionItem__type { + flex-grow: 0; + flex-basis: auto; width: 32px; - background: @globalColorLightGray; - font-size: 12px; + height: 32px; text-align: center; - font-family: monospace; - margin-right: 16px; overflow: hidden; - text-overflow: ellipsis; + padding: 4px; +} + +&.suggestionItem--field { + .suggestionItem__type { + background-color: tint(@globalColorOrange, 90%); + color: @globalColorOrange; + } +} + +&.suggestionItem--value { + .suggestionItem__type { + background-color: tint(@globalColorTeal, 90%); + color: @globalColorTeal; + } +} + +&.suggestionItem--operator { + .suggestionItem__type { + background-color: tint(@globalColorBlue, 90%); + color: @globalColorBlue; + } +} + +&.suggestionItem--conjunction { + .suggestionItem__type { + background-color: tint(@globalColorLightGray, 15%); + color: @globalColorMediumGray; + } +} + +&.suggestionItem--recentSearch { + .suggestionItem__type { + background-color: @globalColorLightGray; + color: @globalColorMediumGray; + } + + .suggestionItem__text { + width: auto; + } } -.suggestion-value { - font-family: monospace; +.suggestionItem__text { + flex-grow: 0; /* 2 */ + flex-basis: auto; /* 2 */ + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-right: 32px; - font-weight: bold; - width: 200px; + width: 250px; overflow: hidden; text-overflow: ellipsis; + padding: 4px 8px; + color: #111; } -.suggestion-description { +.suggestionItem__description { color: @globalColorDarkGray; + overflow: hidden; + text-overflow: ellipsis; +} + +.suggestionItem__callout { + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + background: @globalColorLightestGray; + color: #000; + padding: 0 4px; + display: inline-block; +} + +.suggestionTypeahead { + .typeahead { + .typeahead-items { + max-height: 80vh; + overflow-y: auto; + + .typeahead-item { + padding: 0; + border-bottom: none; + + &:hover { + cursor: pointer; + } + + &.active { + background-color: @globalColorLightestGray; + + .suggestionItem__callout { + background: #fff; + } + + .suggestionItem__text { + color: #000; + } + + .suggestionItem__type { + color: #000; + } + + .suggestionItem--field { + .suggestionItem__type { + background-color: tint(@globalColorOrange, 80%); + } + } + + .suggestionItem--value { + .suggestionItem__type { + background-color: tint(@globalColorTeal, 80%); + } + } + + .suggestionItem--operator { + .suggestionItem__type { + background-color: tint(@globalColorBlue, 80%); + } + } + + .suggestionItem--conjunction { + .suggestionItem__type { + background-color: @globalColorLightGray; + } + } + } + } + } + } } diff --git a/src/ui/public/react_components.js b/src/ui/public/react_components.js index d0108c4ac008d..913bd432407a4 100644 --- a/src/ui/public/react_components.js +++ b/src/ui/public/react_components.js @@ -6,16 +6,15 @@ import { import { EuiConfirmModal, + EuiIcon, } from '@elastic/eui'; import { uiModules } from 'ui/modules'; const app = uiModules.get('app/kibana', ['react']); -app.directive('toolBarSearchBox', function (reactDirective) { - return reactDirective(KuiToolBarSearchBox); -}); +app.directive('toolBarSearchBox', reactDirective => reactDirective(KuiToolBarSearchBox)); -app.directive('confirmModal', function (reactDirective) { - return reactDirective(EuiConfirmModal); -}); +app.directive('confirmModal', reactDirective => reactDirective(EuiConfirmModal)); + +app.directive('icon', reactDirective => reactDirective(EuiIcon)); diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 6df321d72e511..750f2980288fe 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -2733,6 +2733,8 @@ main { .theme-dark .kuiLocalSearchInput:focus { outline: none; border-color: #0079a5; } + .kuiLocalSearchInput:focus { + box-shadow: none; } .kuiLocalSearchInput.kuiLocalSearchInput-isInvalid { border-color: #e74C3c; } diff --git a/ui_framework/src/components/local_nav/_local_search.scss b/ui_framework/src/components/local_nav/_local_search.scss index a6da753b2961f..673b07c367cb9 100644 --- a/ui_framework/src/components/local_nav/_local_search.scss +++ b/ui_framework/src/components/local_nav/_local_search.scss @@ -11,6 +11,10 @@ border-color: $kuiColorLightGray; border-radius: $kuiBorderRadius 0 0 $kuiBorderRadius; + &:focus { + box-shadow: none; + } + &.kuiLocalSearchInput-isInvalid { border-color: $localSearchBorderColor-isInvalid; }