[ES|QL] Use correct timeFieldName for time brush filter (elastic#221322)

## Summary

fix elastic#221241

## Bug and fix descriptions

The logic that applies a time filter by updating the time picker vs
adding it as a filter pill in the filter bar is described here:

https://github.com/elastic/kibana/blob/e877bafa3e4725d3e7cfd3b2ca0be4bc6d88a0b9/src/platform/plugins/shared/unified_search/public/actions/apply_filter_action/apply_filter_action.tsx#L107-L114

The `extractTimeFilter` function extracts the `timeRangeFilter` only if
the `timeFieldName === keys(filter.query.range)[0]` . The problem was
that the first key of `query.range` was different than the
`timeFieldName`. That `timeFieldName` in the ESQL world was wrongly
applied via the ` table.columns[xAxisColumnIndex].name` that doesn't
reflect the actual column name for ES|QL, in fact that name reflect the
visualization label name for the time dimension. In particular, before
the fix, that timeFieldName was set as the axis name (e.g.`@timestamp
every 5 minute` ) and cause the time range filter to fail to be
extracted from the filters list.

A combination of two PRs caused this to be now anymore the correct
behaviour:
- this PR elastic#196049 introduced the
use of the `souceField` as field name for the creation of filter from a
range
- this PR elastic#217719 instead
introduced the use of `sourceField` also for ESQL datasources. This
field points to the actual column name described in the ESQL query.

Both PR causes the `extractTimeFilter` to fail to extract the
timeFilter, pushing the filter up to the filter pills.

### Side notes

This could be probably fixed in other ways, like by avoiding using the
`sourceField` in ESQL, or by using only the column.name in the filter
creation, or by avoiding checking the `timeFieldName` against the
`query.range` key (not really sure why this is required). In general the
problem here is that there is a low confidence on what these
fields/params are supposed to be and which is supposted to be the
identifiers to use everywhere. For example the column ids reflects only
a link between the rows and the column descriptions, the name is the
associated label, but can we rely on that label for filtering? i believe
we need a stronger connection with the data and the actual original
source field or column identifier is a better choice.
I believe a valid subsequent task is
elastic#189044

(cherry picked from commit eb4ba96)

Author: markov00

src/platform/packages/shared/kbn-es-query/src/filters/helpers/extract_time_filter.ts

@@ -12,28 +12,28 @@ import { Filter, isRangeFilter, RangeFilter } from '../build_filters';
 import { TimeRange } from './types';
 import { convertRangeFilterToTimeRangeString } from './convert_range_filter';
 
-export function extractTimeFilter(timeFieldName: string, filters: Filter[]) {
-  const [timeRangeFilter, restOfFilters] = partition(filters, (obj: Filter) => {
-    let key;
-
-    if (isRangeFilter(obj)) {
-      key = keys(obj.query.range)[0];
-    }
-
-    return Boolean(key && key === timeFieldName);
-  });
+export function extractTimeFilter(
+  timeFieldName: string,
+  filters: Filter[]
+): { restOfFilters: Filter[]; timeRangeFilter?: RangeFilter } {
+  const [timeRangeFilter, restOfFilters] = partition<Filter, RangeFilter>(
+    filters,
+    (f: Filter): f is RangeFilter => isRangeFilter(f) && timeFieldName === keys(f.query.range)[0]
+  );
 
   return {
     restOfFilters,
-    timeRangeFilter: timeRangeFilter[0] as RangeFilter | undefined,
+    timeRangeFilter: timeRangeFilter[0],
   };
 }
 
 export function extractTimeRange(
   filters: Filter[],
   timeFieldName?: string
 ): { restOfFilters: Filter[]; timeRange?: TimeRange } {
-  if (!timeFieldName) return { restOfFilters: filters, timeRange: undefined };
+  if (!timeFieldName) {
+    return { restOfFilters: filters };
+  }
   const { timeRangeFilter, restOfFilters } = extractTimeFilter(timeFieldName, filters);
   return {
     restOfFilters,

src/platform/plugins/shared/chart_expressions/expression_xy/public/components/xy_chart.tsx

@@ -658,12 +658,16 @@ export function XYChart({
         ? getAccessorByDimension(dataLayers[0].xAccessor, table.columns)
         : undefined;
     const xAxisColumnIndex = table.columns.findIndex((el) => el.id === xAccessor);
-
     const context: BrushEvent['data'] = {
       range: [min, max],
       table,
       column: xAxisColumnIndex,
-      ...(isEsqlMode ? { timeFieldName: table.columns[xAxisColumnIndex].name } : {}),
+      ...(isEsqlMode
+        ? {
+            timeFieldName:
+              table.columns[xAxisColumnIndex].meta.sourceParams?.sourceField?.toString(),
+          }
+        : {}),
     };
     onSelectRange(context);
   };

src/platform/test/functional/apps/discover/esql/_esql_view.ts

@@ -26,6 +26,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const esql = getService('esql');
   const dashboardAddPanel = getService('dashboardAddPanel');
   const dataViews = getService('dataViews');
+  const elasticChart = getService('elasticChart');
+  const filterBar = getService('filterBar');
+
   const { common, discover, dashboard, header, timePicker, unifiedFieldList, unifiedSearch } =
     getPageObjects([
       'common',
@@ -236,6 +239,36 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         const cell = await dataGrid.getCellElementExcludingControlColumns(0, 0);
         expect(await cell.getVisibleText()).to.be('1');
       });
+
+      it('should allow brushing time series', async () => {
+        await timePicker.setDefaultAbsoluteRange();
+        await discover.selectTextBaseLang();
+        await header.waitUntilLoadingHasFinished();
+        await discover.waitUntilSearchingHasFinished();
+        await unifiedFieldList.waitUntilSidebarHasLoaded();
+
+        const testQuery = `from logstash-* | limit 100`;
+
+        await monacoEditor.setCodeEditorValue(testQuery);
+        await testSubjects.click('querySubmitButton');
+        await header.waitUntilLoadingHasFinished();
+        await discover.waitUntilSearchingHasFinished();
+
+        const initialTimeConfig = await timePicker.getTimeConfigAsAbsoluteTimes();
+        expect(initialTimeConfig.start).to.equal(timePicker.defaultStartTime);
+        expect(initialTimeConfig.end).to.equal(timePicker.defaultEndTime);
+
+        const renderingCount = await elasticChart.getVisualizationRenderingCount();
+        await discover.brushHistogram();
+        await discover.waitUntilSearchingHasFinished();
+        // no filter pill created for time brush
+        expect(await filterBar.getFilterCount()).to.be(0);
+        // chart and time picker updated
+        await elasticChart.waitForRenderingCount(renderingCount + 1);
+        const updatedTimeConfig = await timePicker.getTimeConfigAsAbsoluteTimes();
+        expect(updatedTimeConfig.start).to.be('Sep 20, 2015 @ 08:41:22.854');
+        expect(updatedTimeConfig.end).to.be('Sep 21, 2015 @ 04:14:56.951');
+      });
     });
 
     describe('errors', () => {