Elasticsearch: Show Size setting for raw_data metric (#30980)

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { SettingsEditor } from '.';
+import { ElasticsearchProvider } from '../../ElasticsearchQueryContext';
+import { ElasticDatasource } from 'app/plugins/datasource/elasticsearch/datasource';
+import { ElasticsearchQuery } from 'app/plugins/datasource/elasticsearch/types';
+
+describe('Settings Editor', () => {
+  describe('Raw Data', () => {
+    it('Should correctly render the settings editor and trigger correct state changes', () => {
+      const metricId = '1';
+      const initialSize = '500';
+      const query: ElasticsearchQuery = {
+        refId: 'A',
+        metrics: [
+          {
+            id: metricId,
+            type: 'raw_data',
+            settings: {
+              size: initialSize,
+            },
+          },
+        ],
+      };
+
+      const onChange = jest.fn();
+
+      const { rerender } = render(
+        <ElasticsearchProvider
+          query={query}
+          datasource={{} as ElasticDatasource}
+          onChange={onChange}
+          onRunQuery={() => {}}
+        >
+          <SettingsEditor metric={query.metrics![0]} previousMetrics={[]} />
+        </ElasticsearchProvider>
+      );
+
+      let settingsButtonEl = screen.getByRole('button', {
+        name: /Size: \d+$/i,
+      });
+
+      // The metric row should have a settings button
+      expect(settingsButtonEl).toBeInTheDocument();
+      expect(settingsButtonEl.textContent).toBe(`Size: ${initialSize}`);
+
+      // Open the settings editor
+      fireEvent.click(settingsButtonEl);
+
+      // The settings editor should have a Size input
+      const sizeInputEl = screen.getByLabelText('Size');
+      expect(sizeInputEl).toBeInTheDocument();
+
+      // We change value and trigger a blur event to trigger an update
+      const newSizeValue = '23';
+      fireEvent.change(sizeInputEl, { target: { value: newSizeValue } });
+      fireEvent.blur(sizeInputEl);
+
+      // the onChange handler should have been called correctly, and the resulting
+      // query state should match what expected
+      expect(onChange).toHaveBeenCalledTimes(1);
+      rerender(
+        <ElasticsearchProvider
+          query={onChange.mock.calls[0][0]}
+          datasource={{} as ElasticDatasource}
+          onChange={onChange}
+          onRunQuery={() => {}}
+        >
+          <SettingsEditor metric={onChange.mock.calls[0][0].metrics![0]} previousMetrics={[]} />
+        </ElasticsearchProvider>
+      );
+
+      settingsButtonEl = screen.getByRole('button', {
+        name: /Size: \d+$/i,
+      });
+      expect(settingsButtonEl).toBeInTheDocument();
+      expect(settingsButtonEl.textContent).toBe(`Size: ${newSizeValue}`);
+    });
+  });
+});

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx

@@ -16,6 +16,7 @@ import { useDescription } from './useDescription';
 import { MovingAverageSettingsEditor } from './MovingAverageSettingsEditor';
 import { uniqueId } from 'lodash';
 import { metricAggregationConfig } from '../utils';
+import { useQuery } from '../../ElasticsearchQueryContext';
 
 // TODO: Move this somewhere and share it with BucketsAggregation Editor
 const inlineFieldProps: Partial<ComponentProps<typeof InlineField>> = {
@@ -30,6 +31,7 @@ interface Props {
 export const SettingsEditor: FunctionComponent<Props> = ({ metric, previousMetrics }) => {
   const dispatch = useDispatch();
   const description = useDescription(metric);
+  const query = useQuery();
 
   return (
     <SettingsEditorContainer label={description} hidden={metric.hide}>
@@ -63,6 +65,7 @@ export const SettingsEditor: FunctionComponent<Props> = ({ metric, previousMetri
       {(metric.type === 'raw_data' || metric.type === 'raw_document') && (
         <InlineField label="Size" {...inlineFieldProps}>
           <Input
+            id={`ES-query-${query.refId}_metric-${metric.id}-size`}
             onBlur={(e) => dispatch(changeMetricSetting(metric, 'size', e.target.value))}
             defaultValue={metric.settings?.size ?? metricAggregationConfig['raw_data'].defaults.settings?.size}
           />

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/utils.ts

@@ -208,7 +208,7 @@ export const metricAggregationConfig: MetricsConfiguration = {
     isPipelineAgg: false,
     supportsMissing: false,
     supportsMultipleBucketPaths: false,
-    hasSettings: false,
+    hasSettings: true,
     supportsInlineScript: false,
     hasMeta: false,
     defaults: {