1import React, { useCallback, useMemo } from 'react';
2import { SelectableValue } from '@grafana/data';
3import { Select } from '@grafana/ui';
4import { AzureQueryEditorFieldProps } from '../../types';
5import { Field } from '../Field';
6import { setFormatAs } from './setQueryValue';
7
8const FORMAT_OPTIONS: Array<SelectableValue<string>> = [
9  { label: 'Time series', value: 'time_series' },
10  { label: 'Table', value: 'table' },
11];
12
13const FormatAsField: React.FC<AzureQueryEditorFieldProps> = ({ query, variableOptionGroup, onQueryChange }) => {
14  const options = useMemo(() => [...FORMAT_OPTIONS, variableOptionGroup], [variableOptionGroup]);
15
16  const handleChange = useCallback(
17    (change: SelectableValue<string>) => {
18      const { value } = change;
19      if (!value) {
20        return;
21      }
22
23      const newQuery = setFormatAs(query, value);
24      onQueryChange(newQuery);
25    },
26    [onQueryChange, query]
27  );
28
29  return (
30    <Field label="Format as">
31      <Select
32        menuShouldPortal
33        inputId="azure-monitor-logs-workspaces-field"
34        value={query.azureLogAnalytics?.resultFormat}
35        onChange={handleChange}
36        options={options}
37        width={38}
38      />
39    </Field>
40  );
41};
42
43export default FormatAsField;
44