Na}{

File Content: `TimeGrainField.tsx`

import React, { useCallback, useMemo } from 'react';

import { SelectableValue } from '@grafana/data';
import { Select } from '@grafana/ui';

import TimegrainConverter from '../../time_grain_converter';
import { AzureQueryEditorFieldProps, AzureMonitorOption } from '../../types';
import { addValueToOptions } from '../../utils/common';
import { Field } from '../Field';

import { setTimeGrain } from './setQueryValue';

interface TimeGrainFieldProps extends AzureQueryEditorFieldProps {
  timeGrainOptions: AzureMonitorOption[];
}

const TimeGrainField = ({ query, timeGrainOptions, variableOptionGroup, onQueryChange }: TimeGrainFieldProps) => {
  const handleChange = useCallback(
    (change: SelectableValue<string>) => {
      if (!change.value) {
        return;
      }

      const newQuery = setTimeGrain(query, change.value);
      onQueryChange(newQuery);
    },
    [onQueryChange, query]
  );

  const timeGrains = useMemo(() => {
    const autoInterval = TimegrainConverter.findClosestTimeGrain(
      '1m',
      timeGrainOptions.map((o) => TimegrainConverter.createKbnUnitFromISO8601Duration(o.value)) || [
        '1m',
        '5m',
        '15m',
        '30m',
        '1h',
        '6h',
        '12h',
        '1d',
      ]
    );

    const baseTimeGrains = timeGrainOptions.map((v) => (v.value === 'auto' ? { ...v, description: autoInterval } : v));

    const options = addValueToOptions(baseTimeGrains, variableOptionGroup, query.azureMonitor?.timeGrain);

    return options;
  }, [timeGrainOptions, variableOptionGroup, query.azureMonitor?.timeGrain]);

  return (
    <Field label="Time grain">
      <Select
        inputId="azure-monitor-metrics-time-grain-field"
        value={query.azureMonitor?.timeGrain}
        onChange={handleChange}
        options={timeGrains}
      />
    </Field>
  );
};

export default TimeGrainField;

Name	Size	Permission
AdvancedResourcePicker.test.tsx	4451 bytes	0644
AdvancedResourcePicker.tsx	6128 bytes	0644
AggregationField.test.tsx	1519 bytes	0644
AggregationField.tsx	1331 bytes	0644
DimensionFields.test.tsx	11808 bytes	0644
DimensionFields.tsx	7750 bytes	0644
LegendFormatField.tsx	1154 bytes	0644
MetricNameField.test.tsx	1443 bytes	0644
MetricNameField.tsx	1365 bytes	0644
MetricNamespaceField.test.tsx	1518 bytes	0644
MetricNamespaceField.tsx	1359 bytes	0644
MetricsQueryEditor.test.tsx	16654 bytes	0644
MetricsQueryEditor.tsx	7096 bytes	0644
TimeGrainField.test.tsx	1489 bytes	0644
TimeGrainField.tsx	1865 bytes	0644
TopField.tsx	1068 bytes	0644
dataHooks.test.ts	8986 bytes	0644
dataHooks.ts	6876 bytes	0644
setQueryValue.test.ts	751 bytes	0644
setQueryValue.ts	3858 bytes	0644

File Content: TimeGrainField.tsx

File Content: `TimeGrainField.tsx`