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 { setMetricNamespace } from './setQueryValue'; 8 9interface MetricNamespaceFieldProps extends AzureQueryEditorFieldProps { 10 metricNamespaces: AzureMonitorOption[]; 11} 12 13const MetricNamespaceField: React.FC<MetricNamespaceFieldProps> = ({ 14 metricNamespaces, 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 = setMetricNamespace(query, change.value); 26 onQueryChange(newQuery); 27 }, 28 [onQueryChange, query] 29 ); 30 31 const options = useMemo(() => [...metricNamespaces, variableOptionGroup], [metricNamespaces, variableOptionGroup]); 32 const optionValues = metricNamespaces.map((m) => m.value).concat(variableOptionGroup.options.map((p) => p.value)); 33 const value = query.azureMonitor?.metricNamespace; 34 if (value && !optionValues.includes(value)) { 35 options.push({ label: value, value }); 36 } 37 38 return ( 39 <Field label="Metric namespace"> 40 <Select 41 menuShouldPortal 42 inputId="azure-monitor-metrics-metric-namespace-field" 43 value={query.azureMonitor?.metricNamespace} 44 onChange={handleChange} 45 options={options} 46 width={38} 47 allowCustomValue 48 /> 49 </Field> 50 ); 51}; 52 53export default MetricNamespaceField; 54