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