[7.8] [Uptime] Fix kuery bar selection of suggestion via on click (#6…

…6888) (#69005) Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
elastic · Jun 13, 2020 · 1244c9f · 1244c9f
1 parent a975bae
commit 1244c9f
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 15 deletions.
diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx b/x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx
@@ -57,16 +57,27 @@ export function KueryBar({
     suggestions: [],
     isLoadingIndexPattern: true,
   });
+  const [suggestionLimit, setSuggestionLimit] = useState(15);
   const [isLoadingSuggestions, setIsLoadingSuggestions] = useState<boolean>(false);
   let currentRequestCheck: string;
 
   const [getUrlParams, updateUrlParams] = useUrlParams();
-  const { search: kuery } = getUrlParams();
+  const { search: kuery, dateRangeStart, dateRangeEnd } = getUrlParams();
 
   useEffect(() => {
     updateSearchText(kuery);
   }, [kuery, updateSearchText]);
 
+  useEffect(() => {
+    if (updateDefaultKuery && kuery) {
+      updateDefaultKuery(kuery);
+    } else if (defaultKuery && updateDefaultKuery) {
+      updateDefaultKuery(defaultKuery);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const indexPatternMissing = loading && !indexPattern;
 
   async function onChange(inputValue: string, selectionStart: number) {
@@ -76,6 +87,7 @@ export function KueryBar({
 
     setIsLoadingSuggestions(true);
     setState({ ...state, suggestions: [] });
+    setSuggestionLimit(15);
 
     const currentRequest = uniqueId();
     currentRequestCheck = currentRequest;
@@ -88,10 +100,18 @@ export function KueryBar({
           query: inputValue,
           selectionStart,
           selectionEnd: selectionStart,
+          boolFilter: [
+            {
+              range: {
+                '@timestamp': {
+                  gte: dateRangeStart,
+                  lte: dateRangeEnd,
+                },
+              },
+            },
+          ],
         })) || []
-      )
-        .filter((suggestion) => !startsWith(suggestion.text, 'span.'))
-        .slice(0, 15);
+      ).filter((suggestion) => !startsWith(suggestion.text, 'span.'));
 
       if (currentRequest !== currentRequestCheck) {
         return;
@@ -128,6 +148,10 @@ export function KueryBar({
     }
   }
 
+  const increaseLimit = () => {
+    setSuggestionLimit(suggestionLimit + 15);
+  };
+
   return (
     <Container>
       <Typeahead
@@ -138,7 +162,8 @@ export function KueryBar({
         initialValue={defaultKuery || kuery}
         onChange={onChange}
         onSubmit={onSubmit}
-        suggestions={state.suggestions}
+        suggestions={state.suggestions.slice(0, suggestionLimit)}
+        loadMore={increaseLimit}
         queryExample=""
       />
 

diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/index.d.ts b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/index.d.ts
@@ -9,6 +9,7 @@ import React from 'react';
 interface TypeaheadProps {
   onChange: (inputValue: string, selectionStart: number) => void;
   onSubmit: (inputValue: string) => void;
+  loadMore: () => void;
   suggestions: unknown[];
   queryExample: string;
   initialValue?: string;
@@ -40,4 +41,6 @@ export class Typeahead extends React.Component<TypeaheadProps> {
   onSubmit(): void;
 
   render(): any;
+
+  loadMore(): void;
 }
diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/index.js b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/index.js
@@ -28,6 +28,7 @@ export class Typeahead extends Component {
     value: '',
     inputIsPristine: true,
     lastSubmitted: '',
+    selected: null,
   };
 
   static getDerivedStateFromProps(props, state) {
@@ -113,12 +114,15 @@ export class Typeahead extends Component {
       suggestion.text +
       this.state.value.substr(suggestion.end);
 
-    this.setState({ value: nextInputValue, index: null });
+    this.setState({ value: nextInputValue, index: null, selected: suggestion });
     this.props.onChange(nextInputValue, nextInputValue.length);
   };
 
   onClickOutside = () => {
-    this.setState({ isSuggestionsVisible: false });
+    if (this.state.isSuggestionsVisible) {
+      this.setState({ isSuggestionsVisible: false });
+      this.onSubmit();
+    }
   };
 
   onChangeInputValue = (event) => {
@@ -152,11 +156,20 @@ export class Typeahead extends Component {
   };
 
   onSubmit = () => {
-    if (this.state.lastSubmitted !== this.state.value) {
-      this.props.onSubmit(this.state.value);
-      this.setState({ lastSubmitted: this.state.value });
+    const { value, lastSubmitted, selected } = this.state;
+
+    if (
+      lastSubmitted !== value &&
+      selected &&
+      (selected.type === 'value' || selected.text.trim() === ': *')
+    ) {
+      this.props.onSubmit(value);
+      this.setState({ lastSubmitted: value, selected: null });
     }
-    this.setState({ isSuggestionsVisible: false });
+  };
+
+  onFocus = () => {
+    this.setState({ isSuggestionsVisible: true });
   };
 
   render() {
@@ -181,7 +194,7 @@ export class Typeahead extends Component {
             value={this.state.value}
             onKeyDown={this.onKeyDown}
             onKeyUp={this.onKeyUp}
-            onBlur={this.onSubmit}
+            onFocus={this.onFocus}
             onChange={this.onChangeInputValue}
             onClick={this.onClickInput}
             autoComplete="off"
@@ -207,6 +220,7 @@ export class Typeahead extends Component {
           index={this.state.index}
           onClick={this.onClickSuggestion}
           onMouseEnter={this.onMouseEnterSuggestion}
+          loadMore={this.props.loadMore}
         />
       </ClickOutside>
     );
@@ -219,6 +233,7 @@ Typeahead.propTypes = {
   disabled: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
+  loadMore: PropTypes.func.isRequired,
   suggestions: PropTypes.array.isRequired,
   queryExample: PropTypes.string.isRequired,
 };

diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestion.js b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestion.js
@@ -49,7 +49,8 @@ const Description = styled.div`
   }
 `;
 
-const ListItem = styled.li`
+const ListItem = styled.button`
+  width: inherit;
   font-size: ${fontSizes.small};
   height: ${px(units.double)};
   align-items: center;
@@ -81,6 +82,7 @@ const Icon = styled.div`
 `;
 
 const TextValue = styled.div`
+  text-align: left;
   flex: 0 0 ${px(unit * 12)};
   color: ${theme.euiColorDarkestShade};
   padding: 0 ${px(units.half)};

diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestions.js b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestions.js
@@ -46,6 +46,26 @@ class Suggestions extends Component {
     parent.scrollTop = scrollTop;
   };
 
+  handleScroll = () => {
+    const parent = this.parentNode;
+
+    if (!this.props.loadMore || !parent) {
+      return;
+    }
+
+    const position = parent.scrollTop + parent.offsetHeight;
+    const height = parent.scrollHeight;
+    const remaining = height - position;
+    const margin = 50;
+
+    if (!height || !position) {
+      return;
+    }
+    if (remaining <= margin) {
+      this.props.loadMore();
+    }
+  };
+
   componentDidUpdate(prevProps) {
     if (prevProps.index !== this.props.index) {
       this.scrollIntoView();
@@ -71,7 +91,11 @@ class Suggestions extends Component {
       );
     });
 
-    return <List innerRef={(node) => (this.parentNode = node)}>{suggestions}</List>;
+    return (
+      <List ref={(node) => (this.parentNode = node)} onScroll={this.handleScroll}>
+        {suggestions}
+      </List>
+    );
   }
 }
 
@@ -81,6 +105,7 @@ Suggestions.propTypes = {
   onMouseEnter: PropTypes.func.isRequired,
   show: PropTypes.bool,
   suggestions: PropTypes.array.isRequired,
+  loadMore: PropTypes.func.isRequired,
 };
 
 export default Suggestions;
diff --git a/x-pack/plugins/uptime/server/lib/requests/get_filter_bar.ts b/x-pack/plugins/uptime/server/lib/requests/get_filter_bar.ts
@@ -33,7 +33,7 @@ export const combineRangeWithFilters = (
       },
     },
   };
-  if (!filters) return range;
+  if (!filters?.bool) return range;
   const clientFiltersList = Array.isArray(filters?.bool?.filter ?? {})
     ? // i.e. {"bool":{"filter":{ ...some nested filter objects }}}
       filters.bool.filter