import { DataViewBase } from '@kbn/es-query' ; import React , { useMemo , useState } from 'react' ; import { SearchBar , TimeHistory } from '../../../../../../../src/plugins/data/public' ; import { Storage } from '../../../../../../../src/plugins/kibana_utils/public' ; import { translations } from '../../../config' ; type QueryLanguageType = 'lucene' | 'kuery' ; export function AlertsSearchBar ( { dynamicIndexPatterns , rangeFrom , rangeTo , onQueryChange , query , } ) { const timeHistory = useMemo ( ( ) => { return new TimeHistory ( new Storage ( localStorage ) ) ; } , [ ] ) ; const [ queryLanguage , setQueryLanguage ] = useState < QueryLanguageType > ( 'kuery' ) ; const compatibleIndexPatterns = useMemo ( ( ) => dynamicIndexPatterns . map ( ( dynamicIndexPattern ) => ( { title : dynamicIndexPattern . title ?? '' , id : dynamicIndexPattern . id ?? '' , fields : dynamicIndexPattern . fields , } ) ) , [ dynamicIndexPatterns ] ) ; return ( < SearchBar indexPatterns = { compatibleIndexPatterns } placeholder = { translations . alertsSearchBar . placeholder } query = { { query : query ?? '' , language : queryLanguage } } timeHistory = { timeHistory } dateRangeFrom = { rangeFrom } dateRangeTo = { rangeTo } onRefresh = { ( { dateRange } ) => { onQueryChange ( { dateRange , query } ) ; } } onQuerySubmit = { ( { dateRange , query : nextQuery } ) => { onQueryChange ( { dateRange , query : typeof nextQuery ?. query === 'string' ? nextQuery . query : '' , } ) ; setQueryLanguage ( ( nextQuery ?. language ?? 'kuery' ) as QueryLanguageType ) ; } } displayStyle = "inPage" / > ) ; }