diff --git a/src/ui/public/kuery/suggestions/operator.js b/src/ui/public/kuery/suggestions/operator.js index ea74416c6f02d0..b12f32b92518bf 100644 --- a/src/ui/public/kuery/suggestions/operator.js +++ b/src/ui/public/kuery/suggestions/operator.js @@ -22,13 +22,13 @@ const operators = { fieldTypes: ['number', 'date', 'ip'] }, ':*': { - description: 'exists' + description: 'exists in any form' }, }; -function getDescription({ fieldName, operator }) { +function getDescription({ operator }) { const { description } = operators[operator]; - return `

Filter results where ${fieldName} ${description}

`; + return `

${description}

`; } export function getSuggestionsProvider({ indexPattern }) { @@ -41,7 +41,7 @@ export function getSuggestionsProvider({ indexPattern }) { }); const suggestions = matchingOperators.map(operator => { const text = operator + ' '; - const description = getDescription({ fieldName, operator }); + const description = getDescription({ operator }); return { type, text, description, start: end, end }; }); return suggestions; diff --git a/src/ui/public/kuery/suggestions/value.js b/src/ui/public/kuery/suggestions/value.js index e2e454b1d5115d..2ba3b4f2d4b09e 100644 --- a/src/ui/public/kuery/suggestions/value.js +++ b/src/ui/public/kuery/suggestions/value.js @@ -1,17 +1,9 @@ import chrome from 'ui/chrome'; import { escapeQuotes } from './escape_kql'; -import { escape } from 'lodash'; const baseUrl = chrome.addBasePath('/api/kibana/suggestions/values'); const type = 'value'; -function getDescription({ fieldName, value }) { - return ` -

Find results where ${escape(fieldName)} - is ${escape(value)}

- `; -} - export function getSuggestionsProvider({ $http, config, indexPattern }) { const shouldSuggestValues = config.get('filterEditor:suggestValues'); return shouldSuggestValues ? getValueSuggestions : () => Promise.resolve([]); @@ -40,7 +32,8 @@ export function getSuggestionsProvider({ $http, config, indexPattern }) { .filter(value => value.toLowerCase().includes(query.toLowerCase())) .map(value => { const text = `${value} `; - const description = getDescription({ fieldName, value }); + // Values can get long, and they don't really need a description. + const description = ''; return { type, text, description, start, end }; }); } diff --git a/src/ui/public/query_bar/directive/suggestion.less b/src/ui/public/query_bar/directive/suggestion.less index 529d17ed682ea2..58e36e6c512a0f 100644 --- a/src/ui/public/query_bar/directive/suggestion.less +++ b/src/ui/public/query_bar/directive/suggestion.less @@ -38,6 +38,10 @@ background-color: tint(@globalColorTeal, 90%); color: @globalColorTeal; } + + .suggestionItem__text { + width: auto; + } } &.suggestionItem--operator { @@ -49,8 +53,8 @@ &.suggestionItem--conjunction { .suggestionItem__type { - background-color: tint(@globalColorLightGray, 15%); - color: @globalColorMediumGray; + background-color: tint(@globalColorPurple, 90%); + color: @globalColorPurple; } } @@ -141,7 +145,7 @@ .suggestionItem--conjunction { .suggestionItem__type { - background-color: @globalColorLightGray; + background-color: tint(@globalColorPurple, 80%); } } } diff --git a/src/ui/public/styles/variables/colors.less b/src/ui/public/styles/variables/colors.less index 82030686cc18d3..84269c3a6e4e55 100644 --- a/src/ui/public/styles/variables/colors.less +++ b/src/ui/public/styles/variables/colors.less @@ -16,6 +16,7 @@ @globalColorWhite: #FFF; @globalColorTeal: #00A69B; @globalColorOrange: #E5830E; +@globalColorPurple: #7800A6; //## Gray and brand colors for use across Bootstrap.