import { Card , ToolbarItem } from '@patternfly/react-core' ; import React from 'react' ; import { IDashboardVariableValues , IOptionsAdditionalFields , IPluginTimes , Toolbar } from '@kobsio/plugin-core' ; import DashboardToolbarVariable from './DashboardToolbarVariable' ; interface IDashboardToolbarProps { variables : IDashboardVariableValues [ ] ; setVariables : ( variables : IDashboardVariableValues [ ] ) => void ; times : IPluginTimes ; setTimes : ( times : IPluginTimes ) => void ; } const DashboardToolbar = ( { variables , setVariables , times , setTimes , } ) => { const selectValue = ( index , value ) : void => { const tmpVariables = [ ... variables ] ; tmpVariables [ index ] . value = value ; setVariables ( tmpVariables ) ; } ; const changeOptions = ( times , additionalFields ) : void => { setTimes ( times ) ; } ; return ( < Card style = { { maxWidth : '100%' } } > < Toolbar times = { times } showOptions = { true } showSearchButton = { false } setOptions = { changeOptions } > < React . Fragment > { variables . map ( ( variable , index ) => variable . hide ? null : ( < ToolbarItem key = { variable . name } > < DashboardToolbarVariable variable = { variable } selectValue = { ( value ) : void => selectValue ( index , value ) } / > < /ToolbarItem>))} < /React.Fragment> < /Toolbar> < /Card>); } ; export default DashboardToolbar ;