[7.x] [Logs UI] Use the Super date picker in the log stream (#54280)

x-pack/plugins/infra/common/http_api/log_entries/entries.ts

@@ -12,11 +12,11 @@ export const LOG_ENTRIES_PATH = '/api/log_entries/entries';
 export const logEntriesBaseRequestRT = rt.intersection([
  rt.type({
  sourceId: rt.string,
- startDate: rt.number,
- endDate: rt.number,
+ startTimestamp: rt.number,
+ endTimestamp: rt.number,
  }),
  rt.partial({
- query: rt.string,
+ query: rt.union([rt.string, rt.null]),
  size: rt.number,
  }),
 ]);
@@ -31,7 +31,7 @@ export const logEntriesAfterRequestRT = rt.intersection([
  rt.type({ after: rt.union([logEntriesCursorRT, rt.literal('first')]) }),
 ]);
 
-export const logEntriesCenteredRT = rt.intersection([
+export const logEntriesCenteredRequestRT = rt.intersection([
  logEntriesBaseRequestRT,
  rt.type({ center: logEntriesCursorRT }),
 ]);
@@ -40,54 +40,60 @@ export const logEntriesRequestRT = rt.union([
  logEntriesBaseRequestRT,
  logEntriesBeforeRequestRT,
  logEntriesAfterRequestRT,
- logEntriesCenteredRT,
+ logEntriesCenteredRequestRT,
 ]);
 
+export type LogEntriesBaseRequest = rt.TypeOf<typeof logEntriesBaseRequestRT>;
+export type LogEntriesBeforeRequest = rt.TypeOf<typeof logEntriesBeforeRequestRT>;
+export type LogEntriesAfterRequest = rt.TypeOf<typeof logEntriesAfterRequestRT>;
+export type LogEntriesCenteredRequest = rt.TypeOf<typeof logEntriesCenteredRequestRT>;
 export type LogEntriesRequest = rt.TypeOf<typeof logEntriesRequestRT>;
 
-// JSON value
-const valueRT = rt.union([rt.string, rt.number, rt.boolean, rt.object, rt.null, rt.undefined]);
+export const logMessageConstantPartRT = rt.type({
+ constant: rt.string,
+});
+export const logMessageFieldPartRT = rt.type({
+ field: rt.string,
+ value: rt.unknown,
+ highlights: rt.array(rt.string),
+});
 
-export const logMessagePartRT = rt.union([
- rt.type({
- constant: rt.string,
- }),
- rt.type({
- field: rt.string,
- value: valueRT,
- highlights: rt.array(rt.string),
- }),
-]);
+export const logMessagePartRT = rt.union([logMessageConstantPartRT, logMessageFieldPartRT]);
 
-export const logColumnRT = rt.union([
- rt.type({ columnId: rt.string, timestamp: rt.number }),
- rt.type({
-  columnId: rt.string,
-  field: rt.string,
-  value: rt.union([rt.string, rt.undefined]),
- highlights: rt.array(rt.string),
- }),
- rt.type({
-  columnId: rt.string,
- message: rt.array(logMessagePartRT),
- }),
-]);
+export const logTimestampColumnRT = rt.type({ columnId: rt.string, timestamp: rt.number });
+export const logFieldColumnRT = rt.type({
+ columnId: rt.string,
+ field: rt.string,
+ value: rt.unknown,
+ highlights: rt.array(rt.string),
+});
+export const logMessageColumnRT = rt.type({
+ columnId: rt.string,
+ message: rt.array(logMessagePartRT),
+});
+
+export const logColumnRT = rt.union([logTimestampColumnRT, logFieldColumnRT, logMessageColumnRT]);
 
 export const logEntryRT = rt.type({
  id: rt.string,
  cursor: logEntriesCursorRT,
  columns: rt.array(logColumnRT),
 });
 
-export type LogMessagepart = rt.TypeOf<typeof logMessagePartRT>;
+export type LogMessageConstantPart = rt.TypeOf<typeof logMessageConstantPartRT>;
+export type LogMessageFieldPart = rt.TypeOf<typeof logMessageFieldPartRT>;
+export type LogMessagePart = rt.TypeOf<typeof logMessagePartRT>;
+export type LogTimestampColumn = rt.TypeOf<typeof logTimestampColumnRT>;
+export type LogFieldColumn = rt.TypeOf<typeof logFieldColumnRT>;
+export type LogMessageColumn = rt.TypeOf<typeof logMessageColumnRT>;
 export type LogColumn = rt.TypeOf<typeof logColumnRT>;
 export type LogEntry = rt.TypeOf<typeof logEntryRT>;
 
 export const logEntriesResponseRT = rt.type({
  data: rt.type({
  entries: rt.array(logEntryRT),
- topCursor: logEntriesCursorRT,
- bottomCursor: logEntriesCursorRT,
+ topCursor: rt.union([logEntriesCursorRT, rt.null]),
+ bottomCursor: rt.union([logEntriesCursorRT, rt.null]),
  }),
 });
 

x-pack/plugins/infra/common/http_api/log_entries/highlights.ts

@@ -9,7 +9,7 @@ import {
  logEntriesBaseRequestRT,
  logEntriesBeforeRequestRT,
  logEntriesAfterRequestRT,
- logEntriesCenteredRT,
+ logEntriesCenteredRequestRT,
  logEntryRT,
 } from './entries';
 import { logEntriesCursorRT } from './common';
@@ -36,7 +36,7 @@ export const logEntriesHighlightsAfterRequestRT = rt.intersection([
 ]);
 
 export const logEntriesHighlightsCenteredRequestRT = rt.intersection([
- logEntriesCenteredRT,
+ logEntriesCenteredRequestRT,
  highlightsRT,
 ]);
 

x-pack/plugins/infra/common/http_api/log_entries/summary.ts

@@ -10,8 +10,8 @@ export const LOG_ENTRIES_SUMMARY_PATH = '/api/log_entries/summary';
 
 export const logEntriesSummaryRequestRT = rt.type({
  sourceId: rt.string,
- startDate: rt.number,
- endDate: rt.number,
+ startTimestamp: rt.number,
+ endTimestamp: rt.number,
  bucketSize: rt.number,
  query: rt.union([rt.string, rt.undefined, rt.null]),
 });

x-pack/plugins/infra/public/components/logging/log_datepicker.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useCallback } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiSuperDatePicker, EuiButtonEmpty } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+interface LogDatepickerProps {
+ startDateExpression: string;
+ endDateExpression: string;
+ isStreaming: boolean;
+ onUpdateDateRange?: (range: { startDateExpression: string; endDateExpression: string }) => void;
+ onStartStreaming?: () => void;
+ onStopStreaming?: () => void;
+}
+
+export const LogDatepicker: React.FC<LogDatepickerProps> = ({
+ startDateExpression,
+ endDateExpression,
+ isStreaming,
+ onUpdateDateRange,
+ onStartStreaming,
+ onStopStreaming,
+}) => {
+ const handleTimeChange = useCallback(
+ ({ start, end, isInvalid }) => {
+ if (onUpdateDateRange && !isInvalid) {
+ onUpdateDateRange({ startDateExpression: start, endDateExpression: end });
+ }
+ },
+ [onUpdateDateRange]
+ );
+
+ return (
+ <EuiFlexGroup gutterSize="s">
+ <EuiFlexItem>
+ <EuiSuperDatePicker
+ start={startDateExpression}
+ end={endDateExpression}
+ onTimeChange={handleTimeChange}
+ showUpdateButton={false}
+ // @ts-ignore: EuiSuperDatePicker doesn't expose the `isDisabled` prop, although it exists.
+ isDisabled={isStreaming}
+ />
+ </EuiFlexItem>
+ <EuiFlexItem grow={false}>
+ {isStreaming ? (
+ <EuiButtonEmpty
+ color="primary"
+ iconType="pause"
+ iconSide="left"
+ onClick={onStopStreaming}
+ >
+ <FormattedMessage
+ id="xpack.infra.logs.stopStreamingButtonLabel"
+ defaultMessage="Stop streaming"
+ />
+ </EuiButtonEmpty>
+ ) : (
+ <EuiButtonEmpty iconType="play" iconSide="left" onClick={onStartStreaming}>
+ <FormattedMessage
+ id="xpack.infra.logs.startStreamingButtonLabel"
+ defaultMessage="Stream live"
+ />
+ </EuiButtonEmpty>
+ )}
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ );
+};

x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx

@@ -10,10 +10,10 @@ import { max } from 'lodash';
 import * as React from 'react';
 
 import { euiStyled } from '../../../../../observability/public';
-import { SummaryBucket } from './types';
+import { LogEntriesSummaryBucket } from '../../../../common/http_api';
 
 interface DensityChartProps {
- buckets: SummaryBucket[];
+ buckets: LogEntriesSummaryBucket[];
  end: number;
  start: number;
  width: number;
@@ -38,36 +38,36 @@ export const DensityChart: React.FC<DensityChartProps> = ({
  const xMax = max(buckets.map(bucket => bucket.entriesCount)) || 0;
  const xScale = scaleLinear()
  .domain([0, xMax])
- .range([0, width * (2 / 3)]);
+ .range([0, width]);
 
- const path = area<SummaryBucket>()
+ const path = area<LogEntriesSummaryBucket>()
  .x0(xScale(0))
  .x1(bucket => xScale(bucket.entriesCount))
- .y(bucket => yScale((bucket.start + bucket.end) / 2))
+ .y0(bucket => yScale(bucket.start))
+ .y1(bucket => yScale(bucket.end))
  .curve(curveMonotoneY);
- const pathData = path(buckets);
 
- const highestPathCoord = String(pathData)
- .replace(/[^.0-9,]/g, ' ')
- .split(/[ ,]/)
- .reduce((result, num) => (Number(num) > result ? Number(num) : result), 0);
+ const firstBucket = buckets[0];
+ const lastBucket = buckets[buckets.length - 1];
+ const pathBuckets = [
+ // Make sure the graph starts at the count of the first point
+ { start, end: start, entriesCount: firstBucket.entriesCount },
+ ...buckets,
+ // Make sure the line ends at the height of the last point
+ { start: lastBucket.end, end: lastBucket.end, entriesCount: lastBucket.entriesCount },
+ // If the last point is not at the end of the minimap, make sure it doesn't extend indefinitely and goes to 0
+ { start: end, end, entriesCount: 0 },
+ ];
+ const pathData = path(pathBuckets);
+
  return (
- <g transform={`translate(${width / 3}, 0)`}>
- <DensityChartNegativeBackground
- transform={`translate(${-width / 3}, 0)`}
- width={width / 2}
- height={highestPathCoord}
- />
- <DensityChartPositiveBackground width={width * (2 / 3)} height={highestPathCoord} />
+ <g>
+ <DensityChartPositiveBackground width={width} height={height} />
  <PositiveAreaPath d={pathData || ''} />
  </g>
  );
 };
 
-const DensityChartNegativeBackground = euiStyled.rect`
- fill: ${props => props.theme.eui.euiColorEmptyShade};
-`;
-
 const DensityChartPositiveBackground = euiStyled.rect`
  fill: ${props =>
  props.theme.darkMode

x-pack/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx

@@ -13,6 +13,7 @@ interface HighlightedIntervalProps {
  getPositionOfTime: (time: number) => number;
  start: number;
  end: number;
+ targetWidth: number;
  width: number;
  target: number | null;
 }
@@ -22,6 +23,7 @@ export const HighlightedInterval: React.FC<HighlightedIntervalProps> = ({
  end,
  getPositionOfTime,
  start,
+ targetWidth,
  width,
  target,
 }) => {
@@ -35,14 +37,14 @@ export const HighlightedInterval: React.FC<HighlightedIntervalProps> = ({
  <HighlightTargetMarker
  className={className}
  x1={0}
- x2={width / 3}
+ x2={targetWidth}
  y1={yTarget}
  y2={yTarget}
  />
  )}
  <HighlightPolygon
  className={className}
- points={` ${width / 3},${yStart} ${width},${yStart} ${width},${yEnd} ${width / 3},${yEnd}`}
+ points={` ${targetWidth},${yStart} ${width},${yStart} ${width},${yEnd} ${targetWidth},${yEnd}`}
  />
  </>
  );