From b5a920d8c9cf94a1468d9f9cb022f716e17bdfa3 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Tue, 28 Jul 2020 13:50:02 +0200 Subject: [PATCH] [Uptime] Convert kuery bar to ts (#70310) Co-authored-by: Elastic Machine --- .../__tests__/alert_monitor_status.test.tsx | 10 - .../overview/alerts/alert_monitor_status.tsx | 3 - .../alert_monitor_status.tsx | 4 - .../overview/kuery_bar/kuery_bar.tsx | 22 +- .../kuery_bar/typeahead/click_outside.js | 40 --- .../overview/kuery_bar/typeahead/index.d.ts | 46 --- .../overview/kuery_bar/typeahead/index.js | 245 -------------- .../overview/kuery_bar/typeahead/index.ts | 7 + .../kuery_bar/typeahead/suggestion.js | 140 -------- .../kuery_bar/typeahead/suggestion.tsx | 89 +++++ .../kuery_bar/typeahead/suggestions.js | 111 ------ .../kuery_bar/typeahead/suggestions.tsx | 116 +++++++ .../overview/kuery_bar/typeahead/typehead.tsx | 318 ++++++++++++++++++ .../plugins/uptime/public/pages/overview.tsx | 8 - 14 files changed, 543 insertions(+), 616 deletions(-) delete mode 100644 x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/click_outside.js delete mode 100644 x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/index.d.ts delete mode 100644 x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/index.js create mode 100644 x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/index.ts delete mode 100644 x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestion.js create mode 100644 x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestion.tsx delete mode 100644 x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestions.js create mode 100644 x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestions.tsx create mode 100644 x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/typehead.tsx diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/__tests__/alert_monitor_status.test.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/__tests__/alert_monitor_status.test.tsx index f3f3d583fd938..f26da59238b20 100644 --- a/x-pack/plugins/uptime/public/components/overview/alerts/__tests__/alert_monitor_status.test.tsx +++ b/x-pack/plugins/uptime/public/components/overview/alerts/__tests__/alert_monitor_status.test.tsx @@ -17,10 +17,6 @@ describe('alert monitor status component', () => { timerangeUnit: 'h', timerangeCount: 21, }, - autocomplete: { - addQuerySuggestionProvider: jest.fn(), - getQuerySuggestions: jest.fn(), - }, enabled: true, hasFilters: false, isOldAlert: true, @@ -45,12 +41,6 @@ describe('alert monitor status component', () => { /> = (p setAlertParams('search', value)} diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx index 4ac0355f5edc8..50b6fe2aa0ef1 100644 --- a/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx +++ b/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx @@ -7,7 +7,6 @@ import React, { useMemo, useEffect } from 'react'; import { useLocation } from 'react-router-dom'; import { useSelector, useDispatch } from 'react-redux'; -import { DataPublicPluginSetup } from 'src/plugins/data/public'; import { isRight } from 'fp-ts/lib/Either'; import { selectMonitorStatusAlert, @@ -32,7 +31,6 @@ import { useUpdateKueryString } from '../../../../hooks'; interface Props { alertParams: { [key: string]: any }; - autocomplete: DataPublicPluginSetup['autocomplete']; enabled: boolean; numTimes: number; setAlertParams: (key: string, value: any) => void; @@ -43,7 +41,6 @@ interface Props { } export const AlertMonitorStatus: React.FC = ({ - autocomplete, enabled, numTimes, setAlertParams, @@ -122,7 +119,6 @@ export const AlertMonitorStatus: React.FC = ({ return ( ({ suggestions: [], isLoadingIndexPattern: true, @@ -80,7 +85,7 @@ export function KueryBar({ const indexPatternMissing = loading && !indexPattern; - async function onChange(inputValue: string, selectionStart: number) { + async function onChange(inputValue: string, selectionStart: number | null) { if (!indexPattern) { return; } @@ -94,7 +99,7 @@ export function KueryBar({ try { const suggestions = ( - (await autocompleteService.getQuerySuggestions({ + (await autocomplete.getQuerySuggestions({ language: 'kuery', indexPatterns: [indexPattern], query: inputValue, @@ -111,8 +116,7 @@ export function KueryBar({ }, ], })) || [] - ).filter((suggestion) => !startsWith(suggestion.text, 'span.')); - + ).filter((suggestion: QuerySuggestion) => !startsWith(suggestion.text, 'span.')); if (currentRequest !== currentRequestCheck) { return; } @@ -155,8 +159,8 @@ export function KueryBar({ return ( { - this.nodeRef = node; - }; - - onClick = (event) => { - if (this.nodeRef && !this.nodeRef.contains(event.target)) { - this.props.onClickOutside(); - } - }; - - render() { - return ( -
- {this.props.children} -
- ); - } -} - -ClickOutside.propTypes = { - onClickOutside: PropTypes.func.isRequired, -}; 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 deleted file mode 100644 index 751170f3b1cf7..0000000000000 --- a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/index.d.ts +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; - -interface TypeaheadProps { - onChange: (inputValue: string, selectionStart: number) => void; - onSubmit: (inputValue: string) => void; - loadMore: () => void; - suggestions: unknown[]; - queryExample: string; - initialValue?: string; - isLoading?: boolean; - disabled?: boolean; -} - -export class Typeahead extends React.Component { - incrementIndex(currentIndex: any): void; - - decrementIndex(currentIndex: any): void; - - onKeyUp(event: any): void; - - onKeyDown(event: any): void; - - selectSuggestion(suggestion: any): void; - - onClickOutside(): void; - - onChangeInputValue(event: any): void; - - onClickInput(event: any): void; - - onClickSuggestion(suggestion: any): void; - - onMouseEnterSuggestion(index: any): void; - - 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 deleted file mode 100644 index 17141235d8bf2..0000000000000 --- a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/index.js +++ /dev/null @@ -1,245 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import Suggestions from './suggestions'; -import ClickOutside from './click_outside'; -import { EuiFieldSearch, EuiProgress } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; - -const KEY_CODES = { - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40, - ENTER: 13, - ESC: 27, - TAB: 9, -}; - -export class Typeahead extends Component { - state = { - isSuggestionsVisible: false, - index: null, - value: '', - inputIsPristine: true, - lastSubmitted: '', - selected: null, - }; - - static getDerivedStateFromProps(props, state) { - if (state.inputIsPristine && props.initialValue) { - return { - value: props.initialValue, - }; - } - - return null; - } - - incrementIndex = (currentIndex) => { - let nextIndex = currentIndex + 1; - if (currentIndex === null || nextIndex >= this.props.suggestions.length) { - nextIndex = 0; - } - this.setState({ index: nextIndex }); - }; - - decrementIndex = (currentIndex) => { - let previousIndex = currentIndex - 1; - if (previousIndex < 0) { - previousIndex = null; - } - this.setState({ index: previousIndex }); - }; - - onKeyUp = (event) => { - const { selectionStart } = event.target; - const { value } = this.state; - switch (event.keyCode) { - case KEY_CODES.LEFT: - this.setState({ isSuggestionsVisible: true }); - this.props.onChange(value, selectionStart); - break; - case KEY_CODES.RIGHT: - this.setState({ isSuggestionsVisible: true }); - this.props.onChange(value, selectionStart); - break; - } - }; - - onKeyDown = (event) => { - const { isSuggestionsVisible, index, value } = this.state; - switch (event.keyCode) { - case KEY_CODES.DOWN: - event.preventDefault(); - if (isSuggestionsVisible) { - this.incrementIndex(index); - } else { - this.setState({ isSuggestionsVisible: true, index: 0 }); - } - break; - case KEY_CODES.UP: - event.preventDefault(); - if (isSuggestionsVisible) { - this.decrementIndex(index); - } - break; - case KEY_CODES.ENTER: - event.preventDefault(); - if (isSuggestionsVisible && this.props.suggestions[index]) { - this.selectSuggestion(this.props.suggestions[index]); - } else { - this.setState({ isSuggestionsVisible: false }); - this.props.onSubmit(value); - } - break; - case KEY_CODES.ESC: - event.preventDefault(); - this.setState({ isSuggestionsVisible: false }); - break; - case KEY_CODES.TAB: - this.setState({ isSuggestionsVisible: false }); - break; - } - }; - - selectSuggestion = (suggestion) => { - const nextInputValue = - this.state.value.substr(0, suggestion.start) + - suggestion.text + - this.state.value.substr(suggestion.end); - - this.setState({ value: nextInputValue, index: null, selected: suggestion }); - this.props.onChange(nextInputValue, nextInputValue.length); - }; - - onClickOutside = () => { - if (this.state.isSuggestionsVisible) { - this.setState({ isSuggestionsVisible: false }); - this.onSubmit(); - } - }; - - onChangeInputValue = (event) => { - const { value, selectionStart } = event.target; - const hasValue = Boolean(value.trim()); - this.setState({ - value, - inputIsPristine: false, - isSuggestionsVisible: hasValue, - index: null, - }); - - if (!hasValue) { - this.props.onSubmit(value); - } - this.props.onChange(value, selectionStart); - }; - - onClickInput = (event) => { - const { selectionStart } = event.target; - this.props.onChange(this.state.value, selectionStart); - }; - - onClickSuggestion = (suggestion) => { - this.selectSuggestion(suggestion); - this.inputRef.focus(); - }; - - onMouseEnterSuggestion = (index) => { - this.setState({ index }); - }; - - onSubmit = () => { - 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 }); - } - }; - - onFocus = () => { - this.setState({ isSuggestionsVisible: true }); - }; - - render() { - return ( - -
- { - if (node) { - this.inputRef = node; - } - }} - disabled={this.props.disabled} - value={this.state.value} - onKeyDown={this.onKeyDown} - onKeyUp={this.onKeyUp} - onFocus={this.onFocus} - onChange={this.onChangeInputValue} - onClick={this.onClickInput} - autoComplete="off" - spellCheck={false} - /> - - {this.props.isLoading && ( - - )} -
- - - - ); - } -} - -Typeahead.propTypes = { - initialValue: PropTypes.string, - isLoading: PropTypes.bool, - disabled: PropTypes.bool, - onChange: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - loadMore: PropTypes.func.isRequired, - suggestions: PropTypes.array.isRequired, - queryExample: PropTypes.string.isRequired, -}; - -Typeahead.defaultProps = { - isLoading: false, - disabled: false, - suggestions: [], -}; diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/index.ts b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/index.ts new file mode 100644 index 0000000000000..6bf1226131e29 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { Typeahead } from './typehead'; 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 deleted file mode 100644 index 615a444d23e73..0000000000000 --- a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestion.js +++ /dev/null @@ -1,140 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import styled from 'styled-components'; -import { EuiIcon } from '@elastic/eui'; -import { - fontFamilyCode, - px, - units, - fontSizes, - unit, - // eslint-disable-next-line @kbn/eslint/no-restricted-paths -} from '../../../../../../apm/public/style/variables'; -import { tint } from 'polished'; -import theme from '@elastic/eui/dist/eui_theme_light.json'; - -function getIconColor(type) { - switch (type) { - case 'field': - return theme.euiColorVis7; - case 'value': - return theme.euiColorVis0; - case 'operator': - return theme.euiColorVis1; - case 'conjunction': - return theme.euiColorVis3; - case 'recentSearch': - return theme.euiColorMediumShade; - } -} - -const Description = styled.div` - color: ${theme.euiColorDarkShade}; - - p { - display: inline; - - span { - font-family: ${fontFamilyCode}; - color: ${theme.euiColorFullShade}; - padding: 0 ${px(units.quarter)}; - display: inline-block; - } - } -`; - -const ListItem = styled.button` - width: inherit; - font-size: ${fontSizes.small}; - height: ${px(units.double)}; - align-items: center; - display: flex; - background: ${(props) => (props.selected ? theme.euiColorLightestShade : 'initial')}; - cursor: pointer; - border-radius: ${px(units.quarter)}; - - ${Description} { - p span { - background: ${(props) => - props.selected ? theme.euiColorEmptyShade : theme.euiColorLightestShade}; - } - @media only screen and (max-width: ${theme.euiBreakpoints.s}) { - margin-left: auto; - text-align: end; - } - } -`; - -const Icon = styled.div` - flex: 0 0 ${px(units.double)}; - background: ${(props) => tint(0.1, getIconColor(props.type))}; - color: ${(props) => getIconColor(props.type)}; - width: 100%; - height: 100%; - text-align: center; - line-height: ${px(units.double)}; -`; - -const TextValue = styled.div` - text-align: left; - flex: 0 0 ${px(unit * 12)}; - color: ${theme.euiColorDarkestShade}; - padding: 0 ${px(units.half)}; - - @media only screen and (max-width: ${theme.euiBreakpoints.s}) { - flex: 0 0 ${px(unit * 8)}; - } - @media only screen and (min-width: 1300px) { - flex: 0 0 ${px(unit * 16)}; - } -`; - -function getEuiIconType(type) { - switch (type) { - case 'field': - return 'kqlField'; - case 'value': - return 'kqlValue'; - case 'recentSearch': - return 'search'; - case 'conjunction': - return 'kqlSelector'; - case 'operator': - return 'kqlOperand'; - default: - throw new Error('Unknown type', type); - } -} - -function Suggestion(props) { - return ( - props.onClick(props.suggestion)} - onMouseEnter={props.onMouseEnter} - > - - - - {props.suggestion.text} - {props.suggestion.description} - - ); -} - -Suggestion.propTypes = { - onClick: PropTypes.func.isRequired, - onMouseEnter: PropTypes.func.isRequired, - selected: PropTypes.bool, - suggestion: PropTypes.object.isRequired, - innerRef: PropTypes.func.isRequired, -}; - -export default Suggestion; diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestion.tsx b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestion.tsx new file mode 100644 index 0000000000000..1dc89d2795309 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestion.tsx @@ -0,0 +1,89 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { useRef, useEffect, RefObject } from 'react'; +import styled from 'styled-components'; +import { EuiSuggestItem } from '@elastic/eui'; +import theme from '@elastic/eui/dist/eui_theme_light.json'; + +import { QuerySuggestion } from '../../../../../../../../src/plugins/data/public'; + +const SuggestionItem = styled.div<{ selected: boolean }>` + background: ${(props) => (props.selected ? theme.euiColorLightestShade : 'initial')}; +`; + +function getIconColor(type: string) { + switch (type) { + case 'field': + return 'tint5'; + case 'value': + return 'tint0'; + case 'operator': + return 'tint1'; + case 'conjunction': + return 'tint3'; + case 'recentSearch': + return 'tint10'; + default: + return 'tint5'; + } +} + +function getEuiIconType(type: string) { + switch (type) { + case 'field': + return 'kqlField'; + case 'value': + return 'kqlValue'; + case 'recentSearch': + return 'search'; + case 'conjunction': + return 'kqlSelector'; + case 'operator': + return 'kqlOperand'; + default: + throw new Error(`Unknown type ${type}`); + } +} + +interface SuggestionProps { + onClick: (sug: QuerySuggestion) => void; + onMouseEnter: () => void; + selected: boolean; + suggestion: QuerySuggestion; + innerRef: (node: any) => void; +} + +export const Suggestion: React.FC = ({ + innerRef, + selected, + suggestion, + onClick, + onMouseEnter, +}) => { + const childNode: RefObject = useRef(null); + + useEffect(() => { + if (childNode.current) { + innerRef(childNode.current); + } + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [childNode]); + + return ( + + onClick(suggestion)} + onMouseEnter={onMouseEnter} + // @ts-ignore + description={suggestion.description} + /> + + ); +}; 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 deleted file mode 100644 index 8d614d7ea1aec..0000000000000 --- a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestions.js +++ /dev/null @@ -1,111 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import styled from 'styled-components'; -import { isEmpty } from 'lodash'; -import Suggestion from './suggestion'; -// eslint-disable-next-line @kbn/eslint/no-restricted-paths -import { units, px, unit } from '../../../../../../apm/public/style/variables'; -import { tint } from 'polished'; -import theme from '@elastic/eui/dist/eui_theme_light.json'; - -const List = styled.ul` - width: 100%; - border: 1px solid ${theme.euiColorLightShade}; - border-radius: ${px(units.quarter)}; - box-shadow: 0px ${px(units.quarter)} ${px(units.double)} ${tint(0.1, theme.euiColorFullShade)}; - position: absolute; - background: #fff; - z-index: 10; - left: 0; - max-height: ${px(unit * 20)}; - overflow: scroll; -`; - -class Suggestions extends Component { - childNodes = []; - - scrollIntoView = () => { - const parent = this.parentNode; - const child = this.childNodes[this.props.index]; - - if (this.props.index == null || !parent || !child) { - return; - } - - const scrollTop = Math.max( - Math.min(parent.scrollTop, child.offsetTop), - child.offsetTop + child.offsetHeight - parent.offsetHeight - ); - - 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(); - } - } - - render() { - if (!this.props.show || isEmpty(this.props.suggestions)) { - return null; - } - - const suggestions = this.props.suggestions.map((suggestion, index) => { - const key = suggestion + '_' + index; - return ( - (this.childNodes[index] = node)} - selected={index === this.props.index} - suggestion={suggestion} - onClick={this.props.onClick} - onMouseEnter={() => this.props.onMouseEnter(index)} - key={key} - /> - ); - }); - - return ( - (this.parentNode = node)} onScroll={this.handleScroll}> - {suggestions} - - ); - } -} - -Suggestions.propTypes = { - index: PropTypes.number, - onClick: PropTypes.func.isRequired, - 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/public/components/overview/kuery_bar/typeahead/suggestions.tsx b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestions.tsx new file mode 100644 index 0000000000000..dcd8df1ba18ef --- /dev/null +++ b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/suggestions.tsx @@ -0,0 +1,116 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { useRef, useState, useEffect } from 'react'; +import styled from 'styled-components'; +import { isEmpty } from 'lodash'; +import { tint } from 'polished'; +import theme from '@elastic/eui/dist/eui_theme_light.json'; +import { Suggestion } from './suggestion'; +// eslint-disable-next-line @kbn/eslint/no-restricted-paths +import { units, px, unit } from '../../../../../../apm/public/style/variables'; +import { QuerySuggestion } from '../../../../../../../../src/plugins/data/public'; + +const List = styled.ul` + width: 100%; + border: 1px solid ${theme.euiColorLightShade}; + border-radius: ${px(units.quarter)}; + box-shadow: 0px ${px(units.quarter)} ${px(units.double)} ${tint(0.1, theme.euiColorFullShade)}; + background: #fff; + z-index: 10; + max-height: ${px(unit * 20)}; + overflow: scroll; + position: absolute; +`; + +interface SuggestionsProps { + index: number; + onClick: (sug: QuerySuggestion) => void; + onMouseEnter: (index: number) => void; + show?: boolean; + suggestions: QuerySuggestion[]; + loadMore: () => void; +} + +export const Suggestions: React.FC = ({ + show, + index, + onClick, + suggestions, + onMouseEnter, + loadMore, +}) => { + const [childNodes, setChildNodes] = useState([]); + + const parentNode = useRef(null); + + useEffect(() => { + const scrollIntoView = () => { + const parent = parentNode.current; + const child = childNodes[index]; + + if (index == null || !parent || !child) { + return; + } + + const scrollTop = Math.max( + Math.min(parent.scrollTop, child.offsetTop), + child.offsetTop + child.offsetHeight - parent.offsetHeight + ); + + parent.scrollTop = scrollTop; + }; + scrollIntoView(); + }, [index, childNodes]); + + if (!show || isEmpty(suggestions)) { + return null; + } + + const handleScroll = () => { + const parent = parentNode.current; + + if (!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) { + loadMore(); + } + }; + + const suggestionsNodes = suggestions.map((suggestion, currIndex) => { + const key = suggestion + '_' + currIndex; + return ( + { + const nodes = childNodes; + nodes[currIndex] = node; + setChildNodes([...nodes]); + }} + selected={currIndex === index} + suggestion={suggestion} + onClick={onClick} + onMouseEnter={() => onMouseEnter(currIndex)} + key={key} + /> + ); + }); + + return ( + + {suggestionsNodes} + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/typehead.tsx b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/typehead.tsx new file mode 100644 index 0000000000000..5582818b6f09b --- /dev/null +++ b/x-pack/plugins/uptime/public/components/overview/kuery_bar/typeahead/typehead.tsx @@ -0,0 +1,318 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { KeyboardEvent, ChangeEvent, MouseEvent, useState, useRef, useEffect } from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiFieldSearch, EuiProgress, EuiOutsideClickDetector } from '@elastic/eui'; +import { Suggestions } from './suggestions'; +import { QuerySuggestion } from '../../../../../../../../src/plugins/data/public'; + +const KEY_CODES = { + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40, + ENTER: 13, + ESC: 27, + TAB: 9, +}; + +interface TypeaheadState { + isSuggestionsVisible: boolean; + index: number | null; + value: string; + inputIsPristine: boolean; + lastSubmitted: string; + selected: QuerySuggestion | null; +} + +interface TypeaheadProps { + onChange: (inputValue: string, selectionStart: number | null) => void; + onSubmit: (inputValue: string) => void; + suggestions: QuerySuggestion[]; + queryExample: string; + initialValue?: string; + isLoading?: boolean; + disabled?: boolean; + dataTestSubj: string; + ariaLabel: string; + loadMore: () => void; +} + +export const Typeahead: React.FC = ({ + initialValue, + suggestions, + onChange, + onSubmit, + dataTestSubj, + ariaLabel, + disabled, + isLoading, + loadMore, +}) => { + const [state, setState] = useState({ + isSuggestionsVisible: false, + index: null, + value: '', + inputIsPristine: true, + lastSubmitted: '', + selected: null, + }); + + const inputRef = useRef(); + + useEffect(() => { + if (state.inputIsPristine && initialValue) { + setState((prevState) => ({ + ...prevState, + value: initialValue, + })); + } + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [initialValue]); + + const incrementIndex = (currentIndex: number) => { + let nextIndex = currentIndex + 1; + if (currentIndex === null || nextIndex >= suggestions.length) { + nextIndex = 0; + } + + setState((prevState) => ({ + ...prevState, + index: nextIndex, + })); + }; + + const decrementIndex = (currentIndex: number) => { + let previousIndex: number | null = currentIndex - 1; + if (previousIndex < 0) { + previousIndex = null; + } + + setState((prevState) => ({ + ...prevState, + index: previousIndex, + })); + }; + + const onKeyUp = (event: KeyboardEvent & ChangeEvent) => { + const { selectionStart } = event.target; + const { value } = state; + switch (event.keyCode) { + case KEY_CODES.LEFT: + setState((prevState) => ({ + ...prevState, + isSuggestionsVisible: true, + })); + onChange(value, selectionStart); + break; + case KEY_CODES.RIGHT: + setState((prevState) => ({ + ...prevState, + isSuggestionsVisible: true, + })); + onChange(value, selectionStart); + break; + } + }; + + const onKeyDown = (event: KeyboardEvent) => { + const { isSuggestionsVisible, index, value } = state; + switch (event.keyCode) { + case KEY_CODES.DOWN: + event.preventDefault(); + if (isSuggestionsVisible) { + incrementIndex(index!); + } else { + setState((prevState) => ({ + ...prevState, + isSuggestionsVisible: true, + index: 0, + })); + } + break; + case KEY_CODES.UP: + event.preventDefault(); + if (isSuggestionsVisible) { + decrementIndex(index!); + } + break; + case KEY_CODES.ENTER: + event.preventDefault(); + if (isSuggestionsVisible && suggestions[index!]) { + selectSuggestion(suggestions[index!]); + } else { + setState((prevState) => ({ + ...prevState, + isSuggestionsVisible: false, + })); + + onSubmit(value); + } + break; + case KEY_CODES.ESC: + event.preventDefault(); + + setState((prevState) => ({ + ...prevState, + isSuggestionsVisible: false, + })); + + break; + case KEY_CODES.TAB: + setState((prevState) => ({ + ...prevState, + isSuggestionsVisible: false, + })); + break; + } + }; + + const selectSuggestion = (suggestion: QuerySuggestion) => { + const nextInputValue = + state.value.substr(0, suggestion.start) + + suggestion.text + + state.value.substr(suggestion.end); + + setState((prevState) => ({ + ...prevState, + value: nextInputValue, + index: null, + selected: suggestion, + })); + + onChange(nextInputValue, nextInputValue.length); + }; + + const onClickOutside = () => { + if (state.isSuggestionsVisible) { + setState((prevState) => ({ + ...prevState, + isSuggestionsVisible: false, + })); + + onSuggestionSubmit(); + } + }; + + const onChangeInputValue = (event: ChangeEvent) => { + const { value, selectionStart } = event.target; + const hasValue = Boolean(value.trim()); + + setState((prevState) => ({ + ...prevState, + value, + inputIsPristine: false, + isSuggestionsVisible: hasValue, + index: null, + })); + + if (!hasValue) { + onSubmit(value); + } + onChange(value, selectionStart!); + }; + + const onClickInput = (event: MouseEvent & ChangeEvent) => { + event.stopPropagation(); + const { selectionStart } = event.target; + onChange(state.value, selectionStart!); + }; + + const onFocus = () => { + setState((prevState) => ({ + ...prevState, + isSuggestionsVisible: true, + })); + }; + + const onClickSuggestion = (suggestion: QuerySuggestion) => { + selectSuggestion(suggestion); + if (inputRef.current) inputRef.current.focus(); + }; + + const onMouseEnterSuggestion = (index: number) => { + setState({ ...state, index }); + + setState((prevState) => ({ + ...prevState, + index, + })); + }; + + const onSuggestionSubmit = () => { + const { value, lastSubmitted, selected } = state; + + if ( + lastSubmitted !== value && + selected && + (selected.type === 'value' || selected.text.trim() === ': *') + ) { + onSubmit(value); + + setState((prevState) => ({ + ...prevState, + lastSubmitted: value, + selected: null, + })); + } + }; + + return ( + + +
+ { + if (node) { + inputRef.current = node; + } + }} + disabled={disabled} + value={state.value} + onKeyDown={onKeyDown} + onKeyUp={onKeyUp} + onFocus={onFocus} + onChange={onChangeInputValue} + onClick={onClickInput} + autoComplete="off" + spellCheck={false} + /> + + {isLoading && ( + + )} +
+ + + + + ); +}; diff --git a/x-pack/plugins/uptime/public/pages/overview.tsx b/x-pack/plugins/uptime/public/pages/overview.tsx index 32c86435913f7..3b58ea1e5cf84 100644 --- a/x-pack/plugins/uptime/public/pages/overview.tsx +++ b/x-pack/plugins/uptime/public/pages/overview.tsx @@ -18,7 +18,6 @@ import { useTrackPageview } from '../../../observability/public'; import { MonitorList } from '../components/overview/monitor_list/monitor_list_container'; import { EmptyState, FilterGroup, KueryBar, ParsingErrorCallout } from '../components/overview'; import { StatusPanel } from '../components/overview/status_panel'; -import { useKibana } from '../../../../../src/plugins/kibana_react/public'; interface Props { loading: boolean; @@ -43,12 +42,6 @@ export const OverviewPageComponent = React.memo( const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = useGetUrlParams(); const { search, filters: urlFilters } = params; - const { - services: { - data: { autocomplete }, - }, - } = useKibana(); - useTrackPageview({ app: 'uptime', path: 'overview' }); useTrackPageview({ app: 'uptime', path: 'overview', delay: 15000 }); @@ -77,7 +70,6 @@ export const OverviewPageComponent = React.memo( aria-label={i18n.translate('xpack.uptime.filterBar.ariaLabel', { defaultMessage: 'Input filter criteria for the overview page', })} - autocomplete={autocomplete} data-test-subj="xpack.uptime.filterBar" />