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