[Infra UI] Brushing for Metrics Explorer Charts (#36235) (#36648)

* Returning live data

* Adding TSVB data population

* adding tests

* Adding UI

* Adding rough draft of metrics control

* Breaking out metric component; adding useCallback to callbacks; adding intl strings

* seperating out form

* Break metrics form out; change to custom color picker; create custom color palette;

* fixing bug with color picker

* changes to color palette; fix callback issue

* Fixing count label

* Fix chart label to truncate

* Changing by to graph per

* Making the metric popover wider to ease field name truncation

* critical changes to the import order

* Changing metrics behavior

* Hide metrics when choosing document count

* Updating chart tooltip; fixing types;

* Setting intial state to open metrics; Tweaking toolbar sizes

* fixing linting issues

* Allow users to filter by a grouping by clicking on the title

* Change rate to rateMax; add rateMin and rateAvg; fix title text-align

* Use relative paths to fix base path bug

* fixing typescript errors; removing rateAvg and rateMin; removing extranious files;

* Fixing formatting issues

* Fixing i18n linting errors

* Changing to elastic-charts

* fixing typing errors with charts

* Moving afterKey out of URL to fix bug with pagination

* Adding support for multiple axises

* Adding tests for useMetricsExplorerData hook

* breaking up the charting code; removing multi-axis support; changing color palette to use blue and red for first two color

* Adding drop down menu to charts for filtering and linking to TSVB

* Adding more tests for useMetricsExplorerData hook; adding error message; adding chart options to non-groupby charts

* only display groupings that have the metric fields

* Refactor page level state into custom hook; add test for options handlers;

* Fixing linting

* removing color picker

* removing useInterval

* Changing group by to use the pills; Changing context menu button; adding icons to context menu.

* Adding test for color palette

* Adding test for createFormatterForMetric()

* removing tsx extension; adding tests for createMetricLabel()

* removing tsx extension; adding tests for createMetricLabel()

* re-organizing helpers

* Moving helpers from libs to helpers; adding test for metricToFormat

* Fixing bug in tsvb link fn; adding timeRange props; adding createTSVBLink() test

* fixing timeRange fixture import; fixing aria label for action button

* removing some unecessary useCallbacks

* Adding test for MetricsExplorerChartContextMenu component

* Fixing linting issues

* Optimizing test

* Adding empty prompts for no metrics and no data

* Removing duplicate sereis def

* tcs has lost it's mind so I had to copy enzyme_helpers.tsx into our plugin

* Appeasing prettier

* Update x-pack/plugins/infra/public/components/metrics_exploerer/metrics.tsx

Co-Authored-By: simianhacker <chris@chriscowan.us>

* fixing path typo

* Adding supportFiltering to dependicy; change options to be more specific

* remove typo

* Fixing typo

* Adding logColumns to source fixture; fixing typo

* Fixing path to be more sane

* Adding brushing to Metrics Explorer Charts

x-pack/plugins/infra/public/components/metrics_explorer/chart.tsx

@@ -7,12 +7,13 @@
 import React, { useCallback } from 'react';
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import { EuiTitle } from '@elastic/eui';
-import { Chart, Axis, Position, timeFormatter, getAxisId } from '@elastic/charts';
+import { Chart, Axis, Position, timeFormatter, getAxisId, Settings } from '@elastic/charts';
 import '@elastic/charts/dist/style.css';
 import { first } from 'lodash';
 import { niceTimeFormatByDay } from '@elastic/charts/dist/utils/data/formatters';
 import { EuiFlexGroup } from '@elastic/eui';
 import { EuiFlexItem } from '@elastic/eui';
+import moment from 'moment';
 import { MetricsExplorerSeries } from '../../../server/routes/metrics_explorer/types';
 import {
   MetricsExplorerOptions,
@@ -36,6 +37,7 @@ interface Props {
   series: MetricsExplorerSeries;
   source: SourceQuery.Query['source']['configuration'] | undefined;
   timeRange: MetricsExplorerTimeOptions;
+  onTimeChange: (start: string, end: string) => void;
 }
 
 const dateFormatter = timeFormatter(niceTimeFormatByDay(1));
@@ -50,8 +52,12 @@ export const MetricsExplorerChart = injectI18n(
     height = 200,
     width = '100%',
     timeRange,
+    onTimeChange,
   }: Props) => {
     const { metrics } = options;
+    const handleTimeChange = (from: number, to: number) => {
+      onTimeChange(moment(from).toISOString(), moment(to).toISOString());
+    };
     const yAxisFormater = useCallback(createFormatterForMetric(first(metrics)), [options]);
     return (
       <React.Fragment>
@@ -97,6 +103,7 @@ export const MetricsExplorerChart = injectI18n(
                 tickFormat={dateFormatter}
               />
               <Axis id={getAxisId('values')} position={Position.Left} tickFormat={yAxisFormater} />
+              <Settings onBrushEnd={handleTimeChange} />
             </Chart>
           ) : options.metrics.length > 0 ? (
             <MetricsExplorerEmptyChart />

x-pack/plugins/infra/public/components/metrics_explorer/charts.tsx

@@ -23,13 +23,25 @@ interface Props {
   onLoadMore: (afterKey: string | null) => void;
   onRefetch: () => void;
   onFilter: (filter: string) => void;
+  onTimeChange: (start: string, end: string) => void;
   data: MetricsExplorerResponse | null;
   intl: InjectedIntl;
   source: SourceQuery.Query['source']['configuration'] | undefined;
   timeRange: MetricsExplorerTimeOptions;
 }
 export const MetricsExplorerCharts = injectI18n(
-  ({ loading, data, onLoadMore, options, onRefetch, intl, onFilter, source, timeRange }: Props) => {
+  ({
+    loading,
+    data,
+    onLoadMore,
+    options,
+    onRefetch,
+    intl,
+    onFilter,
+    source,
+    timeRange,
+    onTimeChange,
+  }: Props) => {
     if (!data && loading) {
       return (
         <InfraLoadingPanel
@@ -78,6 +90,7 @@ export const MetricsExplorerCharts = injectI18n(
                 series={series}
                 source={source}
                 timeRange={timeRange}
+                onTimeChange={onTimeChange}
               />
             </EuiFlexItem>
           ))}

x-pack/plugins/infra/public/pages/infrastructure/metrics_explorer/index.tsx

@@ -90,6 +90,7 @@ export const MetricsExplorerPage = injectI18n(
             onLoadMore={handleLoadMore}
             onFilter={handleFilterQuerySubmit}
             onRefetch={handleRefresh}
+            onTimeChange={handleTimeChange}
           />
         )}
       </div>

x-pack/plugins/infra/public/pages/infrastructure/metrics_explorer/use_metric_explorer_state.ts

@@ -42,11 +42,10 @@ export const useMetricsExplorerState = (
 
   const handleTimeChange = useCallback(
     (start: string, end: string) => {
-      setOptions({ ...options });
       setAfterKey(null);
       setTimeRange({ ...currentTimerange, from: start, to: end });
     },
-    [options, currentTimerange]
+    [currentTimerange]
   );
 
   const handleGroupByChange = useCallback(