From 0a7c6c689fe3534685a807196e0cfd1c0a8eb89c Mon Sep 17 00:00:00 2001
From: Giordano Ricci <gio.ricci@grafana.com>
Date: Mon, 8 Feb 2021 11:10:52 +0000
Subject: [PATCH] Elasticsearch: Show Size setting for raw_data metric (#30980)

---
 .../SettingsEditor/index.test.tsx             | 80 +++++++++++++++++++
 .../SettingsEditor/index.tsx                  |  3 +
 .../MetricAggregationsEditor/utils.ts         |  2 +-
 3 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.test.tsx

diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.test.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.test.tsx
new file mode 100644
index 00000000000..c9018436cf0
--- /dev/null
+++ b/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}`);
+    });
+  });
+});
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
index 67923530eaa..0c20b134278 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
+++ b/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}
           />
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/utils.ts b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/utils.ts
index b90a13fef4f..7c3a1aafc4c 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/utils.ts
+++ b/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: {