[Logs UI] Add callout for legacy log views

x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/legacy_log_view_callout.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiCallOut, EuiLink } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+
+export const LegacyLogViewCallout: React.FC<{ upgradeAssistantUrl?: string }> = ({
+  upgradeAssistantUrl,
+}) => {
+  // share.url.locators.get(id);
+
+  const UpgradeAssistant = upgradeAssistantUrl ? (
+    <EuiLink href={upgradeAssistantUrl}>{upgradeAssistantLabel}</EuiLink>
+  ) : (
+    upgradeAssistantLabel
+  );
+
+  return (
+    <EuiCallOut title={legacyLogViewTitle} color="warning" iconType="alert">
+      <p>
+        <FormattedMessage
+          id="xpack.logsShared.logStream.legacyLogViewDescription"
+          defaultMessage="This view uses a deprecated configuration. Use the {UpgradeAssistant} to migrate to a supported configuration."
+          values={{
+            UpgradeAssistant,
+          }}
+        />
+      </p>
+    </EuiCallOut>
+  );
+};
+
+const legacyLogViewTitle = i18n.translate('xpack.logsShared.logStream.legacyLogViewTitle', {
+  defaultMessage: 'Deprecated Log Source Configuration',
+});
+
+const upgradeAssistantLabel = i18n.translate(
+  'xpack.logsShared.logStream.upgradeAssistantLinkText',
+  {
+    defaultMessage: 'Upgrade Assistant',
+  }
+);

x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/log_stream.tsx

@@ -5,10 +5,12 @@
  * 2.0.
  */
 
+import { EuiSpacer } from '@elastic/eui';
+import styled from '@emotion/styled';
 import type { HttpStart } from '@kbn/core-http-browser';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
+import { MANAGEMENT_APP_LOCATOR } from '@kbn/deeplinks-management/constants';
 import { buildEsQuery, Filter, Query } from '@kbn/es-query';
-import styled from '@emotion/styled';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import type { LogsDataAccessPluginStart } from '@kbn/logs-data-access-plugin/public';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
@@ -17,14 +19,19 @@ import { noop } from 'lodash';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import usePrevious from 'react-use/lib/usePrevious';
 import { LogEntryCursor } from '../../../common/log_entry';
-import { defaultLogViewsStaticConfig, LogViewReference } from '../../../common/log_views';
+import {
+  defaultLogViewsStaticConfig,
+  logSourcesKibanaAdvancedSettingRT,
+  LogViewReference,
+} from '../../../common/log_views';
 import { BuiltEsQuery, useLogStream } from '../../containers/logs/log_stream';
 import { useLogView } from '../../hooks/use_log_view';
 import { LogViewsClient } from '../../services/log_views';
 import { LogColumnRenderConfiguration } from '../../utils/log_column_render_configuration';
 import { useKibanaQuerySettings } from '../../utils/use_kibana_query_settings';
 import { useLogEntryFlyout } from '../logging/log_entry_flyout';
 import { ScrollableLogTextStreamView, VisibleInterval } from '../logging/log_text_stream';
+import { LegacyLogViewCallout } from './legacy_log_view_callout';
 import { LogStreamErrorBoundary } from './log_stream_error_boundary';
 
 interface LogStreamPluginDeps {
@@ -117,6 +124,11 @@ export const LogStreamContent = ({
   const {
     services: { http, data, share, logsDataAccess },
   } = useKibana<LogStreamPluginDeps>();
+
+  const upgradeAssistantUrl = share.url.locators
+    .get(MANAGEMENT_APP_LOCATOR)
+    ?.useUrl({ sectionId: 'stack', appId: 'upgrade_assistant/kibana_deprecations' });
+
   if (http == null || data == null || share == null || logsDataAccess == null) {
     throw new Error(
       `<LogStream /> cannot access kibana core services.
@@ -148,11 +160,19 @@ Read more at https://github.com/elastic/kibana/blob/main/src/plugins/kibana_reac
     isLoading: isLoadingLogView,
     load: loadLogView,
     resolvedLogView,
+    logView: currentLogView,
   } = useLogView({
     initialLogViewReference: logView,
     logViews,
   });
 
+  const isLegacyLogView = useMemo(
+    () =>
+      currentLogView != null &&
+      !logSourcesKibanaAdvancedSettingRT.is(currentLogView?.attributes.logIndices),
+    [currentLogView]
+  );
+
   const parsedQuery = useMemo<BuiltEsQuery | undefined>(() => {
     if (typeof query === 'object' && 'bool' in query) {
       return mergeBoolQueries(
@@ -270,35 +290,44 @@ Read more at https://github.com/elastic/kibana/blob/main/src/plugins/kibana_reac
   );
 
   return (
-    <ScrollableLogTextStreamView
-      target={center ? center : entries.length ? entries[entries.length - 1].cursor : null}
-      columnConfigurations={columnConfigurations}
-      items={streamItems}
-      scale="medium"
-      wrap={true}
-      isReloading={isReloading}
-      isLoadingMore={isLoadingMore}
-      isStreaming={isStreaming}
-      hasMoreBeforeStart={hasMoreBefore}
-      hasMoreAfterEnd={hasMoreAfter}
-      lastLoadedTime={lastLoadedTime}
-      jumpToTarget={noop}
-      reportVisibleInterval={handlePagination}
-      reloadItems={fetchEntries}
-      onOpenLogEntryFlyout={showFlyoutAction ? openLogEntryFlyout : undefined}
-      highlightedItem={highlight ?? null}
-      currentHighlightKey={null}
-      startDateExpression={startDateExpression}
-      endDateExpression={endDateExpression}
-      updateDateRange={noop}
-      startLiveStreaming={noop}
-      hideScrollbar={false}
-    />
+    <>
+      {isLegacyLogView ? (
+        <>
+          <LegacyLogViewCallout upgradeAssistantUrl={upgradeAssistantUrl} />
+          <EuiSpacer size="s" />
+        </>
+      ) : null}
+      <ScrollableLogTextStreamView
+        target={center ? center : entries.length ? entries[entries.length - 1].cursor : null}
+        columnConfigurations={columnConfigurations}
+        items={streamItems}
+        scale="medium"
+        wrap={true}
+        isReloading={isReloading}
+        isLoadingMore={isLoadingMore}
+        isStreaming={isStreaming}
+        hasMoreBeforeStart={hasMoreBefore}
+        hasMoreAfterEnd={hasMoreAfter}
+        lastLoadedTime={lastLoadedTime}
+        jumpToTarget={noop}
+        reportVisibleInterval={handlePagination}
+        reloadItems={fetchEntries}
+        onOpenLogEntryFlyout={showFlyoutAction ? openLogEntryFlyout : undefined}
+        highlightedItem={highlight ?? null}
+        currentHighlightKey={null}
+        startDateExpression={startDateExpression}
+        endDateExpression={endDateExpression}
+        updateDateRange={noop}
+        startLiveStreaming={noop}
+        hideScrollbar={false}
+      />
+    </>
   );
 };
 
 const LogStreamContainer = styled.div`
   display: flex;
+  flex-direction: column;
   background-color: ${(props) => props.theme.euiTheme.colors.emptyShade};
 `;
 

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/column_headers.tsx

@@ -8,7 +8,9 @@
 import { i18n } from '@kbn/i18n';
 import React, { FC, PropsWithChildren } from 'react';
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
+
+import { useEuiFontSize } from '@elastic/eui';
 import {
   LogEntryColumn,
   LogEntryColumnContent,
@@ -113,19 +115,19 @@ export const LogColumnHeader: FC<
   </LogColumnHeaderWrapper>
 );
 
-const LogColumnHeaderWrapper = euiStyled(LogEntryColumn)`
+const LogColumnHeaderWrapper = styled(LogEntryColumn)`
   align-items: center;
   display: flex;
   flex-direction: row;
   height: 32px;
   overflow: hidden;
 `;
 
-const LogColumnHeaderContent = euiStyled(LogEntryColumnContent)`
-  color: ${(props) => props.theme.eui.euiTitleColor};
-  font-size: ${(props) => props.theme.eui.euiFontSizeS};
-  font-weight: ${(props) => props.theme.eui.euiFontWeightSemiBold};
-  line-height: ${(props) => props.theme.eui.euiLineHeight};
+const LogColumnHeaderContent = styled(LogEntryColumnContent)`
+  color: ${(props) => props.theme.euiTheme.colors.textParagraph};
+  font-size: ${() => useEuiFontSize('s').fontSize};
+  font-weight: ${(props) => props.theme.euiTheme.font.weight.semiBold};
+  line-height: ${() => useEuiFontSize('s').lineHeight};
   text-overflow: clip;
   white-space: pre;
 `;

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/jump_to_tail.tsx

@@ -9,7 +9,7 @@ import { EuiButtonEmpty, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import * as React from 'react';
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 
 interface LogTextStreamJumpToTailProps {
   onClickJump?: () => void;
@@ -45,16 +45,16 @@ export class LogTextStreamJumpToTail extends React.PureComponent<LogTextStreamJu
   }
 }
 
-const JumpToTailWrapper = euiStyled.div<{ width: number }>`
+const JumpToTailWrapper = styled.div<{ width: number }>`
   align-items: center;
   display: flex;
-  min-height: ${(props) => props.theme.eui.euiSizeXXL};
+  min-height: ${(props) => props.theme.euiTheme.size.xxl};
   width: ${(props) => props.width}px;
   position: fixed;
   bottom: 0;
-  background-color: ${(props) => props.theme.eui.euiColorEmptyShade};
+  background-color: ${(props) => props.theme.euiTheme.colors.emptyShade};
 `;
 
-const MessageWrapper = euiStyled.div`
+const MessageWrapper = styled.div`
   padding: 8px 16px;
 `;

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/log_entry_field_column.tsx

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
+import styled from '@emotion/styled';
 import { JsonValue } from '@kbn/utility-types';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { LogColumn } from '../../../../common/log_entry';
 import { isFieldColumn, isHighlightFieldColumn } from '../../../utils/log_entry';
 import { FieldValue } from './field_value';
@@ -54,7 +54,7 @@ interface LogEntryColumnContentProps {
   wrapMode: WrapMode;
 }
 
-const FieldColumnContent = euiStyled(LogEntryColumnContent)<LogEntryColumnContentProps>`
+const FieldColumnContent = styled(LogEntryColumnContent)<LogEntryColumnContentProps>`
   text-overflow: ellipsis;
 
   ${(props) =>

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/log_entry_message_column.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { memo, useMemo } from 'react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { LogColumn, LogMessagePart } from '../../../../common/log_entry';
 import {
   isConstantSegment,
@@ -59,7 +59,7 @@ interface MessageColumnContentProps {
   wrapMode: WrapMode;
 }
 
-const MessageColumnContent = euiStyled(LogEntryColumnContent)<MessageColumnContentProps>`
+const MessageColumnContent = styled(LogEntryColumnContent)<MessageColumnContentProps>`
   text-overflow: ellipsis;
   ${(props) =>
     props.wrapMode === 'long'

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/log_entry_row_wrapper.tsx

@@ -5,28 +5,32 @@
  * 2.0.
  */
 
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
+import { withAttrs } from '../../../utils/theme_utils/with_attrs';
 import { TextScale } from '../../../../common/log_text_scale';
-import { highlightedContentStyle, hoveredContentStyle, monospaceTextStyle } from './text_styles';
+import { highlightedContentStyle, hoveredContentStyle, useMonospaceTextStyle } from './text_styles';
 
-export const LogEntryRowWrapper = euiStyled.div.attrs(() => ({
-  role: 'row',
-}))<LogEntryRowWrapperProps>`
+export const LogEntryRowWrapper = withAttrs(
+  styled.div<LogEntryRowWrapperProps>`
     align-items: stretch;
-    color: ${(props) => props.theme.eui.euiTextColor};
+    color: ${(props) => props.theme.euiTheme.colors.textParagraph};
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: flex-start;
     overflow: hidden;
-  
-    ${(props) => monospaceTextStyle(props.scale)};
-    ${(props) => (props.isHighlighted ? highlightedContentStyle : '')}
-  
+
+    ${(props) => useMonospaceTextStyle(props.scale, props.theme.euiTheme)};
+    ${(props) => (props.isHighlighted ? highlightedContentStyle(props.theme.euiTheme) : '')}
+
     &:hover {
-      ${hoveredContentStyle}
+      ${(props) => hoveredContentStyle(props.theme.euiTheme)}
     }
-  `;
+  `,
+  () => ({
+    role: 'row',
+  })
+);
 
 export interface LogEntryRowWrapperProps {
   scale: TextScale;

x-pack/platform/plugins/shared/logs_shared/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx

@@ -6,8 +6,7 @@
  */
 
 import React, { memo } from 'react';
-
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { TimeFormat, useFormattedTime } from '../../formatted_time';
 import { LogEntryColumnContent } from './log_entry_column';
 
@@ -25,8 +24,8 @@ export const LogEntryTimestampColumn = memo<LogEntryTimestampColumnProps>(
   }
 );
 
-const TimestampColumnContent = euiStyled(LogEntryColumnContent)`
-  color: ${(props) => props.theme.eui.euiColorDarkShade};
+const TimestampColumnContent = styled(LogEntryColumnContent)`
+  color: ${(props) => props.theme.euiTheme.colors.darkShade};
   overflow: hidden;
   text-overflow: clip;
   white-space: pre;