[Logs UI] Support zoom by brushing in the log rate chart (#45879)

This enables the modification of the displayed time range in the log rate chart by brushing over the chart. closes #45472
elastic · Sep 17, 2019 · 4e6cf79 · 4e6cf79
1 parent 69ab813
commit 4e6cf79
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 13 deletions.
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/page_results_content.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/page_results_content.tsx
@@ -101,6 +101,17 @@ export const AnalysisResultsContent = ({
     [setSelectedTimeRange, handleQueryTimeRangeChange]
   );
 
+  const handleChartTimeRangeChange = useCallback(
+    ({ startTime, endTime }: TimeRange) => {
+      handleSelectedTimeRangeChange({
+        end: new Date(endTime).toISOString(),
+        isInvalid: false,
+        start: new Date(startTime).toISOString(),
+      });
+    },
+    [handleSelectedTimeRangeChange]
+  );
+
   const handleAutoRefreshChange = useCallback(
     ({ isPaused, refreshInterval: interval }: { isPaused: boolean; refreshInterval: number }) => {
       setAutoRefresh({
@@ -183,6 +194,7 @@ export const AnalysisResultsContent = ({
                   <LogRateResults
                     isLoading={isLoading}
                     results={logEntryRate}
+                    setTimeRange={handleChartTimeRangeChange}
                     timeRange={queryTimeRange}
                   />
                 </EuiPageContentBody>

diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/chart.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/chart.tsx
@@ -30,15 +30,11 @@ const lineSeriesColour = 'rgb(49, 133, 252)';
 
 interface Props {
   data: GetLogEntryRateSuccessResponsePayload['data'] | null;
+  setTimeRange: (timeRange: TimeRange) => void;
   timeRange: TimeRange;
 }
 
-export const ChartView = ({ data, timeRange }: Props) => {
-  const showModelBoundsLabel = i18n.translate(
-    'xpack.infra.logs.analysis.logRateSectionModelBoundsCheckboxLabel',
-    { defaultMessage: 'Show model bounds' }
-  );
-
+export const ChartView = ({ data, setTimeRange, timeRange }: Props) => {
   const { areaSeries, lineSeries, anomalySeries } = useLogEntryRateGraphData({ data });
 
   const dateFormatter = useMemo(
@@ -55,15 +51,26 @@ export const ChartView = ({ data, timeRange }: Props) => {
 
   const [dateFormat] = useKibanaUiSetting('dateFormat');
 
-  const tooltipProps = {
-    headerFormatter: useCallback(
-      (tooltipData: TooltipValue) =>
+  const tooltipProps = useMemo(
+    () => ({
+      headerFormatter: (tooltipData: TooltipValue) =>
         moment(tooltipData.value).format(dateFormat || 'Y-MM-DD HH:mm:ss.SSS'),
-      [dateFormat]
-    ),
-  };
+    }),
+    [dateFormat]
+  );
 
   const [isShowingModelBounds, setIsShowingModelBounds] = useState<boolean>(true);
+
+  const handleBrushEnd = useCallback(
+    (startTime: number, endTime: number) => {
+      setTimeRange({
+        endTime,
+        startTime,
+      });
+    },
+    [setTimeRange]
+  );
+
   return (
     <>
       <EuiFlexGroup justifyContent="flexEnd">
@@ -172,6 +179,7 @@ export const ChartView = ({ data, timeRange }: Props) => {
             customSeriesColors={!isDarkMode() ? getColorsMap('red', anomalySpecId) : undefined}
           />
           <Settings
+            onBrushEnd={handleBrushEnd}
             tooltip={tooltipProps}
             theme={getChartTheme()}
             xDomain={{ min: timeRange.startTime, max: timeRange.endTime }}
@@ -181,3 +189,8 @@ export const ChartView = ({ data, timeRange }: Props) => {
     </>
   );
 };
+
+const showModelBoundsLabel = i18n.translate(
+  'xpack.infra.logs.analysis.logRateSectionModelBoundsCheckboxLabel',
+  { defaultMessage: 'Show model bounds' }
+);
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/index.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/index.tsx
@@ -24,10 +24,12 @@ import { TimeRange } from '../../../../../../common/http_api/shared/time_range';
 export const LogRateResults = ({
   isLoading,
   results,
+  setTimeRange,
   timeRange,
 }: {
   isLoading: boolean;
   results: GetLogEntryRateSuccessResponsePayload['data'] | null;
+  setTimeRange: (timeRange: TimeRange) => void;
   timeRange: TimeRange;
 }) => {
   const title = i18n.translate('xpack.infra.logs.analysis.logRateSectionTitle', {
@@ -83,7 +85,7 @@ export const LogRateResults = ({
           </EuiFlexGroup>
           <EuiSpacer size="l" />
           {viewMode === 'chart' ? (
-            <ChartView data={results} timeRange={timeRange} />
+            <ChartView data={results} setTimeRange={setTimeRange} timeRange={timeRange} />
           ) : (
             <TableView data={results} />
           )}