import React , { useState , useEffect } from 'react' ; import { SavedObject } from 'opensearch-dashboards/public' ; import { IIndexPattern , IndexPatternAttributes } from 'src/plugins/data/public' ; import { I18nProvider } from '@osd/i18n/react' ; import { IndexPatternRef } from './types' ; import { ChangeIndexPattern } from './change_indexpattern' ; export interface DiscoverIndexPatternProps { /**
     * list of available index patterns, if length > 1, component offers a "change" link
     */ indexPatternList : Array < SavedObject < IndexPatternAttributes > > ; /**
     * currently selected index pattern, due to angular issues it's undefined at first rendering
     */ selectedIndexPattern : IIndexPattern ; /**
     * triggered when user selects a new index pattern
     */ setIndexPattern : ( id : string ) => void ; } /**
 * Component allows you to select an index pattern in discovers side bar
 */ export function DiscoverIndexPattern ( { indexPatternList , selectedIndexPattern , setIndexPattern , } ) { const options = ( indexPatternList || [ ] ) . map ( ( entity ) => ( { id : entity . id , title : entity . attributes ! . title , } ) ) ; const { id : selectedId , title : selectedTitle } = selectedIndexPattern || { } ; const [ selected , setSelected ] = useState ( { id : selectedId , title : selectedTitle || '' , } ) ; useEffect ( ( ) => { const { id , title } = selectedIndexPattern ; setSelected ( { id , title } ) ; } , [ selectedIndexPattern ] ) ; if ( ! selectedId ) { return null ; } return ( < div className = "dscIndexPattern__container" > < I18nProvider > < ChangeIndexPattern trigger = { { label : selected . title , title : selected . title , 'data-test-subj' : 'indexPattern-switch-link' , className : 'dscIndexPattern__triggerButton' , } } indexPatternId = { selected . id } indexPatternRefs = { options } onChangeIndexPattern = { ( id ) => { const indexPattern = options . find ( ( pattern ) => pattern . id === id ) ; if ( indexPattern ) { setIndexPattern ( id ) ; setSelected ( indexPattern ) ; } } } /> < /I18nProvider> < /div>); }