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 { setResourceType } from './setQueryValue'; 8 9interface NamespaceFieldProps extends AzureQueryEditorFieldProps { 10 resourceTypes: AzureMonitorOption[]; 11} 12 13const NamespaceField: React.FC<NamespaceFieldProps> = ({ 14 resourceTypes, 15 query, 16 variableOptionGroup, 17 onQueryChange, 18}) => { 19 const handleChange = useCallback( 20 (change: SelectableValue<string>) => { 21 if (!change.value) { 22 return; 23 } 24 25 const newQuery = setResourceType(query, change.value); 26 onQueryChange(newQuery); 27 }, 28 [onQueryChange, query] 29 ); 30 31 const options = useMemo(() => [...resourceTypes, variableOptionGroup], [resourceTypes, variableOptionGroup]); 32 33 return ( 34 <Field label="Resource type"> 35 {/* It's expected that the label reads Resource type but the property is metricDefinition */} 36 <Select 37 menuShouldPortal 38 inputId="azure-monitor-metrics-resource-type-field" 39 value={query.azureMonitor?.metricDefinition} 40 onChange={handleChange} 41 options={options} 42 width={38} 43 allowCustomValue 44 /> 45 </Field> 46 ); 47}; 48 49export default NamespaceField; 50