grafana/public/app/plugins/datasource/azuremonitor/components/LogsQueryBuilder/LimitSection.tsx

import { useState } from 'react';

import { t } from '@grafana/i18n';
import { EditorRow, EditorFieldGroup, EditorField } from '@grafana/plugin-ui';
import { Input } from '@grafana/ui';

import { BuildAndUpdateOptions } from './utils';

interface LimitSectionProps {
  buildAndUpdateQuery: (options: Partial<BuildAndUpdateOptions>) => void;
}

export const LimitSection: React.FC<LimitSectionProps> = (props) => {
  const { buildAndUpdateQuery } = props;

  const [limit, setLimit] = useState<number>(1000);

  const handleQueryLimitUpdate = (newLimit: number) => {
    buildAndUpdateQuery({
      limit: newLimit,
    });
  };

  return (
    <EditorRow>
      <EditorFieldGroup>
        <EditorField
          label={t('components.limit-section.label-limit', 'Limit')}
          optional={true}
          tooltip={t(
            'components.limit-section.tooltip-limit',
            'Restrict the number of rows returned (default is 1000).'
          )}
        >
          <Input
            className="width-5"
            type="number"
            placeholder={t('components.limit-section.placeholder-limit', 'Enter limit')}
            value={limit}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
              const newValue = e.target.value.replace(/[^0-9]/g, '');
              setLimit(Number(newValue));
              handleQueryLimitUpdate(Number(newValue));
            }}
          />
        </EditorField>
      </EditorFieldGroup>
    </EditorRow>
  );
};