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