1import React, { useCallback, useMemo } from 'react'; 2import { Select } from '@grafana/ui'; 3import { SelectableValue } from '@grafana/data'; 4 5import { Field } from '../Field'; 6import { AzureQueryEditorFieldProps, AzureMonitorOption } from '../../types'; 7import { setResourceName } from './setQueryValue'; 8 9interface ResourceNameFieldProps extends AzureQueryEditorFieldProps { 10 resourceNames: AzureMonitorOption[]; 11} 12 13const ResourceNameField: React.FC<ResourceNameFieldProps> = ({ 14 resourceNames, 15 query, 16 variableOptionGroup, 17 onQueryChange, 18}) => { 19 const handleChange = useCallback( 20 (change: SelectableValue<string>) => { 21 const newQuery = setResourceName(query, change.value); 22 onQueryChange(newQuery); 23 }, 24 [onQueryChange, query] 25 ); 26 27 const options = useMemo(() => [...resourceNames, variableOptionGroup], [resourceNames, variableOptionGroup]); 28 const value = query.azureMonitor?.resourceName ?? null; 29 30 return ( 31 <Field label="Resource name"> 32 <Select 33 menuShouldPortal 34 inputId="azure-monitor-metrics-resource-name-field" 35 value={value} 36 onChange={handleChange} 37 options={options} 38 width={38} 39 allowCustomValue 40 /> 41 </Field> 42 ); 43}; 44 45export default ResourceNameField; 46