Merge pull request elastic#12 from snide/kql/cleanup

KQL autocomplete cleanup

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 `<p>Requires that <span class="suggestionItem__callout">both arguments</span> joined together both return true</p>`;
+  } else if (conjunction === 'or') {
+    return `<p>Requires <span class="suggestionItem__callout">only one of</span> the arguments joined together must return true</p>`;
+  } else {
+    return `<p>Add an ${conjunction.toUpperCase()} clause</p>`;
+  }
 }
 
 export function getSuggestionsProvider() {

src/ui/public/kuery/suggestions/field.js

@@ -1,7 +1,7 @@
 const type = 'field';
 
 function getDescription(fieldName) {
-  return `Filter results using ${fieldName}.`;
+  return `<p>Filter results that contain <span class="suggestionItem__callout">${fieldName}</span></p>`;
 }
 
 export function getSuggestionsProvider({ indexPattern }) {

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 <span class="suggestionItem__callout">less than or equal to</span> some value',
     fieldTypes: ['number', 'date', 'ip']
   },
   '>=': {
-    description: 'is GREATER THAN OR EQUAL TO to some value',
+    description: 'is <span class="suggestionItem__callout">greater than or equal to</span> to some value',
     fieldTypes: ['number', 'date', 'ip']
   },
   '<': {
-    description: 'is LESS THAN some value',
+    description: 'is <span class="suggestionItem__callout">less than</span> some value',
     fieldTypes: ['number', 'date', 'ip']
   },
   '>': {
-    description: 'is GREATER THAN some value',
+    description: 'is <span class="suggestionItem__callout">greater than</span> some value',
     fieldTypes: ['number', 'date', 'ip']
   },
   ':': {
-    description: 'IS some value',
+    description: '<span class="suggestionItem__callout">equals</span> some value',
     fieldTypes: ['string', 'number', 'date', 'ip', 'geo_point', 'geo_shape']
   },
   ':*': {
-    description: 'EXISTS'
+    description: '<span class="suggestionItem__callout">exists</span>'
   }
 };
 
 function getDescription({ fieldName, operator }) {
   const { description } = operators[operator];
-  return `Filter results where ${fieldName} ${description}.`;
+  return `<p>Filter results where ${fieldName} ${description}</p>`;
 }
 
 export function getSuggestionsProvider({ indexPattern }) {

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() {

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 `
+    <p>Find results where <span class="suggestionItem__callout">${fieldName}</span>
+    is <span class="suggestionItem__callout">${value}</span></p>
+  `;
 }
 
 export function getSuggestionsProvider({ $http, indexPattern }) {

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"
   >
     <div
       class="kuiLocalSearch"

src/ui/public/query_bar/directive/suggestion.html

@@ -1,11 +1,23 @@
-<div>
-  <div class="suggestion-type">
-    {{item.type}}
-  </div>
-  <div class="suggestion-text">
-    {{item.text}}
-  </div>
-  <div class="suggestion-description">
-    {{item.description}}
+<div class="suggestionItem suggestionItem--{{item.type}}">
+  <div class="suggestionItem__type">
+    <div ng-switch="item.type">
+      <div ng-switch-when="field">
+        <icon type="'list'"></icon>
+      </div>
+      <div ng-switch-when="value">
+        <icon type="'bullseye'"></icon>
+      </div>
+      <div ng-switch-when="recentSearch">
+        <icon type="'calendar'"></icon>
+      </div>
+      <div ng-switch-when="conjunction">
+        <icon type="'merge'"></icon>
+      </div>
+      <div ng-switch-when="operator">
+        <icon type="'dot'"></icon>
+      </div>
+    </div>
   </div>
+  <div class="suggestionItem__text" ng-bind-html="item.text"></div>
+  <div class="suggestionItem__description" ng-if="item.type !== 'recentSearch'" ng-bind-html="item.description"></div>
 </div>

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;
+            }
+          }
+        }
+      }
+    }
+  }
 }

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));

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; }
 

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;
   }