[Logs UI] Use short timestamps in the log stream view (#47042)

This commit changes the appearance of the log stream page. It removes the date value from the timestamp column, making it shorter and giving more space for the message of the log

When the date of two log entries is different, we add a marker to indicate this change. The date of the first visible log item is written in the header of the table.

x-pack/legacy/plugins/infra/public/components/formatted_time.tsx

@@ -17,8 +17,25 @@ const getFormattedTime = (
   return userFormat ? moment(time).format(userFormat) : moment(time).format(fallbackFormat);
 };
 
-export const useFormattedTime = (time: number, fallbackFormat?: string) => {
-  const [dateFormat] = useKibanaUiSetting('dateFormat');
+interface UseFormattedTimeOptions {
+  format?: 'dateTime' | 'time';
+  fallbackFormat?: string;
+}
+
+export const useFormattedTime = (
+  time: number,
+  { format = 'dateTime', fallbackFormat }: UseFormattedTimeOptions = {}
+) => {
+  // `dateFormat:scaled` is an array of `[key, format]` tuples.
+  // The hook might return `undefined`, so use a sane default for the `find` later.
+  const scaledTuples = useKibanaUiSetting('dateFormat:scaled')[0] || [['', undefined]];
+
+  const formatMap = {
+    dateTime: useKibanaUiSetting('dateFormat')[0],
+    time: scaledTuples.find(([key]: [string, string]) => key === '')[1],
+  };
+
+  const dateFormat = formatMap[format];
   const formattedTime = useMemo(() => getFormattedTime(time, dateFormat, fallbackFormat), [
     getFormattedTime,
     time,

x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx

@@ -5,6 +5,7 @@
  */
 
 import React from 'react';
+import { transparentize } from 'polished';
 
 import euiStyled from '../../../../../../common/eui_styled_components';
 import {
@@ -20,6 +21,8 @@ import {
   LogEntryColumnWidths,
 } from './log_entry_column';
 import { ASSUMED_SCROLLBAR_WIDTH } from './vertical_scroll_panel';
+import { WithLogPosition } from '../../../containers/logs/with_log_position';
+import { localizedDate } from '../../../utils/formatters/datetime';
 
 export const LogColumnHeaders: React.FunctionComponent<{
   columnConfigurations: LogColumnConfiguration[];
@@ -30,13 +33,16 @@ export const LogColumnHeaders: React.FunctionComponent<{
       {columnConfigurations.map(columnConfiguration => {
         if (isTimestampLogColumnConfiguration(columnConfiguration)) {
           return (
-            <LogColumnHeader
-              columnWidth={columnWidths[columnConfiguration.timestampColumn.id]}
-              data-test-subj="logColumnHeader timestampLogColumnHeader"
-              key={columnConfiguration.timestampColumn.id}
-            >
-              Timestamp
-            </LogColumnHeader>
+            <WithLogPosition key={columnConfiguration.timestampColumn.id}>
+              {({ firstVisiblePosition }) => (
+                <LogColumnHeader
+                  columnWidth={columnWidths[columnConfiguration.timestampColumn.id]}
+                  data-test-subj="logColumnHeader timestampLogColumnHeader"
+                >
+                  {firstVisiblePosition ? localizedDate(firstVisiblePosition.time) : 'Timestamp'}
+                </LogColumnHeader>
+              )}
+            </WithLogPosition>
           );
         } else if (isMessageLogColumnConfiguration(columnConfiguration)) {
           return (
@@ -83,13 +89,16 @@ const LogColumnHeadersWrapper = euiStyled.div.attrs({
   justify-content: flex-start;
   overflow: hidden;
   padding-right: ${ASSUMED_SCROLLBAR_WIDTH}px;
+  border-bottom: ${props => props.theme.eui.euiBorderThin};
+  box-shadow: 0 2px 2px -1px ${props => transparentize(0.3, props.theme.eui.euiColorLightShade)};
+  position: relative;
+  z-index: 1;
 `;
 
 const LogColumnHeaderWrapper = LogEntryColumn.extend.attrs({
   role: 'columnheader',
 })`
   align-items: center;
-  border-bottom: ${props => props.theme.eui.euiBorderThick};
   display: flex;
   flex-direction: row;
   height: 32px;

x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_date_row.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiTitle } from '@elastic/eui';
+import { localizedDate } from '../../../utils/formatters/datetime';
+
+interface LogDateRowProps {
+  timestamp: number;
+}
+
+/**
+ * Show a row with the date in the log stream
+ */
+export const LogDateRow: React.FC<LogDateRowProps> = ({ timestamp }) => {
+  const formattedDate = localizedDate(timestamp);
+
+  return (
+    <EuiFlexGroup alignItems="center" gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <EuiTitle size="xxs">
+          <h2 style={{ paddingLeft: 8 }}>{formattedDate}</h2>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiHorizontalRule />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx

@@ -19,7 +19,7 @@ interface LogEntryTimestampColumnProps {
 
 export const LogEntryTimestampColumn = memo<LogEntryTimestampColumnProps>(
   ({ isHighlighted, isHovered, time }) => {
-    const formattedTime = useFormattedTime(time);
+    const formattedTime = useFormattedTime(time, { format: 'time' });
 
     return (
       <TimestampColumnContent isHovered={isHovered} isHighlighted={isHighlighted}>
@@ -45,11 +45,8 @@ const TimestampColumnContent = LogEntryColumnContent.extend.attrs<{
   isHovered: boolean;
   isHighlighted: boolean;
 }>({})`
-  background-color: ${props => props.theme.eui.euiColorLightestShade};
-  border-right: solid 2px ${props => props.theme.eui.euiColorLightShade};
   color: ${props => props.theme.eui.euiColorDarkShade};
   overflow: hidden;
-  text-align: right;
   text-overflow: clip;
   white-space: pre;
 

x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx

@@ -6,7 +6,8 @@
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import React, { useMemo } from 'react';
+import React, { Fragment, useMemo } from 'react';
+import moment from 'moment';
 
 import euiStyled from '../../../../../../common/eui_styled_components';
 import { TextScale } from '../../../../common/log_text_scale';
@@ -26,6 +27,7 @@ import { MeasurableItemView } from './measurable_item_view';
 import { VerticalScrollPanel } from './vertical_scroll_panel';
 import { getColumnWidths, LogEntryColumnWidths } from './log_entry_column';
 import { useMeasuredCharacterDimensions } from './text_styles';
+import { LogDateRow } from './log_date_row';
 
 interface ScrollableLogTextStreamViewProps {
   columnConfigurations: LogColumnConfiguration[];
@@ -188,35 +190,47 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
                               isStreaming={false}
                               lastStreamingUpdate={null}
                             />
-                            {items.map(item => (
-                              <MeasurableItemView
-                                register={registerChild}
-                                registrationKey={getStreamItemId(item)}
-                                key={getStreamItemId(item)}
-                              >
-                                {itemMeasureRef => (
-                                  <LogEntryRow
-                                    columnConfigurations={columnConfigurations}
-                                    columnWidths={columnWidths}
-                                    openFlyoutWithItem={this.handleOpenFlyout}
-                                    boundingBoxRef={itemMeasureRef}
-                                    logEntry={item.logEntry}
-                                    highlights={item.highlights}
-                                    isActiveHighlight={
-                                      !!currentHighlightKey &&
-                                      currentHighlightKey.gid === item.logEntry.gid
-                                    }
-                                    scale={scale}
-                                    wrap={wrap}
-                                    isHighlighted={
-                                      highlightedItem
-                                        ? item.logEntry.gid === highlightedItem
-                                        : false
-                                    }
-                                  />
-                                )}
-                              </MeasurableItemView>
-                            ))}
+                            {items.map((item, idx) => {
+                              const currentTimestamp = item.logEntry.key.time;
+                              let showDate = false;
+
+                              if (idx > 0) {
+                                const prevTimestamp = items[idx - 1].logEntry.key.time;
+                                showDate = !moment(currentTimestamp).isSame(prevTimestamp, 'day');
+                              }
+
+                              return (
+                                <Fragment key={getStreamItemId(item)}>
+                                  {showDate && <LogDateRow timestamp={currentTimestamp} />}
+                                  <MeasurableItemView
+                                    register={registerChild}
+                                    registrationKey={getStreamItemId(item)}
+                                  >
+                                    {itemMeasureRef => (
+                                      <LogEntryRow
+                                        columnConfigurations={columnConfigurations}
+                                        columnWidths={columnWidths}
+                                        openFlyoutWithItem={this.handleOpenFlyout}
+                                        boundingBoxRef={itemMeasureRef}
+                                        logEntry={item.logEntry}
+                                        highlights={item.highlights}
+                                        isActiveHighlight={
+                                          !!currentHighlightKey &&
+                                          currentHighlightKey.gid === item.logEntry.gid
+                                        }
+                                        scale={scale}
+                                        wrap={wrap}
+                                        isHighlighted={
+                                          highlightedItem
+                                            ? item.logEntry.gid === highlightedItem
+                                            : false
+                                        }
+                                      />
+                                    )}
+                                  </MeasurableItemView>
+                                </Fragment>
+                              );
+                            })}
                             <LogTextStreamLoadingItemView
                               alignment="top"
                               isLoading={isStreaming || isLoadingMore}
@@ -326,7 +340,7 @@ const WithColumnWidths: React.FunctionComponent<{
 }> = ({ children, columnConfigurations, scale }) => {
   const { CharacterDimensionsProbe, dimensions } = useMeasuredCharacterDimensions(scale);
   const referenceTime = useMemo(() => Date.now(), []);
-  const formattedCurrentDate = useFormattedTime(referenceTime);
+  const formattedCurrentDate = useFormattedTime(referenceTime, { format: 'time' });
   const columnWidths = useMemo(
     () => getColumnWidths(columnConfigurations, dimensions.width, formattedCurrentDate.length),
     [columnConfigurations, dimensions.width, formattedCurrentDate]

x-pack/legacy/plugins/infra/public/utils/formatters/datetime.ts

@@ -0,0 +1,17 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export function localizedDate(dateTime: number | Date, locale: string = i18n.getLocale()) {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+
+  return formatter.format(dateTime);
+}

x-pack/test/functional/apps/infra/logs_source_configuration.ts

@@ -66,7 +66,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         await pageObjects.common.navigateToActualUrl('infraLogs', 'logs/stream');
         const columnHeaderLabels = await infraLogStream.getColumnHeaderLabels();
 
-        expect(columnHeaderLabels).to.eql(['Timestamp', 'event.dataset', 'Message']);
+        expect(columnHeaderLabels).to.eql(['Oct 17, 2018', 'event.dataset', 'Message']);
 
         const logStreamEntries = await infraLogStream.getStreamEntries();
         expect(logStreamEntries.length).to.be.greaterThan(0);
@@ -98,7 +98,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
         // TODO: make test more robust
         // expect(columnHeaderLabels).to.eql(['host.name', 'Timestamp']);
-        expect(columnHeaderLabels).to.eql(['Timestamp', 'host.name']);
+        expect(columnHeaderLabels).to.eql(['Oct 17, 2018', 'host.name']);
 
         const logStreamEntries = await infraLogStream.getStreamEntries();