[Log UI] Replace sourceId with mandatory logView prop in LogStream component (#134850)

* replace sourceId with mandatory logview prop in logstream component

* update unit test assert

* revert small change on use_log_view

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/apm/public/components/app/service_logs/index.tsx

@@ -85,6 +85,7 @@ export function ServiceLogs() {
 
   return (
     <LogStream
+      logView={{ type: 'log-view-reference', logViewId: 'default' }}
       columns={[{ type: 'timestamp' }, { type: 'message' }]}
       height={'60vh'}
       startTimestamp={moment(start).valueOf()}

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/transaction_tabs.tsx

@@ -125,6 +125,7 @@ function LogsTabContent({ transaction }: { transaction: Transaction }) {
   const framePaddingMs = 1000 * 60 * 60 * 24; // 24 hours
   return (
     <LogStream
+      logView={{ type: 'log-view-reference', logViewId: 'default' }}
       startTimestamp={startTimestamp - framePaddingMs}
       endTimestamp={endTimestamp + framePaddingMs}
       query={`trace.id:"${transaction.trace.id}" OR "${transaction.trace.id}"`}

x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/automated_curation_history.tsx

@@ -66,6 +66,10 @@ export const AutomatedCurationHistory: React.FC<Props> = ({ query, engineName })
       hasBorder
     >
       <EntSearchLogStream
+        logView={{
+          type: 'log-view-reference',
+          logViewId: 'default',
+        }}
         hoursAgo={720}
         endTimestamp={endTimestamp}
         query={filters.join(' and ')}

x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations_history/components/automated_curations_history_panel.tsx

@@ -65,7 +65,10 @@ export const AutomatedCurationsHistoryPanel: React.FC = () => {
       hasBorder
     >
       <EntSearchLogStream
-        sourceId={ENTERPRISE_SEARCH_RELEVANCE_LOGS_SOURCE_ID}
+        logView={{
+          type: 'log-view-reference',
+          logViewId: ENTERPRISE_SEARCH_RELEVANCE_LOGS_SOURCE_ID,
+        }}
         hoursAgo={720}
         query={filters.join(' and ')}
         endTimestamp={endTimestamp}

x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations_history/components/rejected_curations_history_panel.tsx

@@ -67,7 +67,10 @@ export const RejectedCurationsHistoryPanel: React.FC = () => {
       hasBorder
     >
       <EntSearchLogStream
-        sourceId={ENTERPRISE_SEARCH_RELEVANCE_LOGS_SOURCE_ID}
+        logView={{
+          type: 'log-view-reference',
+          logViewId: ENTERPRISE_SEARCH_RELEVANCE_LOGS_SOURCE_ID,
+        }}
         hoursAgo={720}
         query={filters.join(' and ')}
         endTimestamp={endTimestamp}

x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/audit_logs_modal/audit_logs_modal.tsx

@@ -55,7 +55,10 @@ export const AuditLogsModal: React.FC = () => {
         </EuiText>
         <EuiSpacer size="m" />
         <EntSearchLogStream
-          sourceId={ENTERPRISE_SEARCH_AUDIT_LOGS_SOURCE_ID}
+          logView={{
+            type: 'log-view-reference',
+            logViewId: ENTERPRISE_SEARCH_AUDIT_LOGS_SOURCE_ID,
+          }}
           columns={[
             {
               type: 'timestamp',

x-pack/plugins/enterprise_search/public/applications/shared/log_stream/log_stream.test.tsx

@@ -18,7 +18,11 @@ describe('EntSearchLogStream', () => {
 
   describe('renders with default props', () => {
     /** As a result of the theme provider being added, we have to extract the child component to correctly assert */
-    const wrapper = shallow(shallow(<EntSearchLogStream />).prop('children'));
+    const wrapper = shallow(
+      shallow(
+        <EntSearchLogStream logView={{ type: 'log-view-reference', logViewId: 'default' }} />
+      ).prop('children')
+    );
 
     it('renders a LogStream (wrapped in React.Suspense) component', () => {
       expect(wrapper.type()).toEqual(React.Suspense);
@@ -37,19 +41,28 @@ describe('EntSearchLogStream', () => {
   describe('renders custom props', () => {
     it('overrides the default props', () => {
       const wrapper = shallow(
-        shallow(<EntSearchLogStream sourceId="test" startTimestamp={1} endTimestamp={2} />).prop(
-          'children'
-        )
+        shallow(
+          <EntSearchLogStream
+            logView={{ type: 'log-view-reference', logViewId: 'test' }}
+            startTimestamp={1}
+            endTimestamp={2}
+          />
+        ).prop('children')
       );
 
-      expect(wrapper.prop('sourceId')).toEqual('test');
+      expect(wrapper.prop('logView')).toEqual({ type: 'log-view-reference', logViewId: 'test' });
       expect(wrapper.prop('startTimestamp')).toEqual(1);
       expect(wrapper.prop('endTimestamp')).toEqual(2);
     });
 
     it('allows passing a custom hoursAgo that modifies the default start timestamp', () => {
       const wrapper = shallow(
-        shallow(<EntSearchLogStream sourceId={fakeSourceId} hoursAgo={1} />).prop('children')
+        shallow(
+          <EntSearchLogStream
+            logView={{ type: 'log-view-reference', logViewId: fakeSourceId }}
+            hoursAgo={1}
+          />
+        ).prop('children')
       );
 
       expect(wrapper.prop('startTimestamp')).toEqual(156400000);
@@ -60,7 +73,7 @@ describe('EntSearchLogStream', () => {
       const wrapper = shallow(
         shallow(
           <EntSearchLogStream
-            sourceId={fakeSourceId}
+            logView={{ type: 'log-view-reference', logViewId: fakeSourceId }}
             height={500}
             highlight="some-log-id"
             columns={[

x-pack/plugins/enterprise_search/public/applications/shared/log_stream/log_stream.tsx

@@ -21,14 +21,12 @@ import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
  */
 
 interface Props extends Omit<LogStreamProps, 'startTimestamp' | 'endTimestamp'> {
-  sourceId?: string;
   startTimestamp?: LogStreamProps['startTimestamp'];
   endTimestamp?: LogStreamProps['endTimestamp'];
   hoursAgo?: number;
 }
 
 export const EntSearchLogStream: React.FC<Props> = ({
-  sourceId,
   startTimestamp,
   endTimestamp,
   hoursAgo = 24,
@@ -39,12 +37,7 @@ export const EntSearchLogStream: React.FC<Props> = ({
 
   return (
     <EuiThemeProvider>
-      <LogStream
-        sourceId={sourceId}
-        startTimestamp={startTimestamp}
-        endTimestamp={endTimestamp}
-        {...props}
-      />
+      <LogStream startTimestamp={startTimestamp} endTimestamp={endTimestamp} {...props} />
     </EuiThemeProvider>
   );
 };

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/agent_logs.tsx

@@ -350,6 +350,7 @@ export const AgentLogsUI: React.FunctionComponent<AgentLogsProps> = memo(
         <EuiFlexItem>
           <EuiPanel paddingSize="none" panelRef={logsPanelRef}>
             <LogStream
+              logView={{ type: 'log-view-reference', logViewId: 'default' }}
               height={logPanelHeight}
               startTimestamp={dateRangeTimestamps.start}
               endTimestamp={dateRangeTimestamps.end}

x-pack/plugins/infra/public/components/log_stream/lazy_log_stream_wrapper.tsx

@@ -10,7 +10,7 @@ import type { LogStreamProps } from './log_stream';
 
 const LazyLogStream = React.lazy(() => import('./log_stream'));
 
-export const LazyLogStreamWrapper: React.FC<LogStreamProps> = (props) => (
+export const LazyLogStreamWrapper = (props: LogStreamProps) => (
   <React.Suspense fallback={<div />}>
     <LazyLogStream {...props} />
   </React.Suspense>

x-pack/plugins/infra/public/components/log_stream/log_stream.tsx

@@ -64,8 +64,13 @@ export interface LogStreamProps extends LogStreamContentProps {
   height?: string | number;
 }
 
+interface LogView {
+  type: 'log-view-reference';
+  logViewId: string;
+}
+
 interface LogStreamContentProps {
-  sourceId?: string;
+  logView: LogView;
   startTimestamp: number;
   endTimestamp: number;
   query?: string | Query | BuiltEsQuery;
@@ -76,7 +81,7 @@ interface LogStreamContentProps {
   showFlyoutAction?: boolean;
 }
 
-export const LogStream: React.FC<LogStreamProps> = ({ height = 400, ...contentProps }) => {
+export const LogStream = ({ height = 400, ...contentProps }: LogStreamProps) => {
   return (
     <LogStreamContainer style={{ height }}>
       <LogStreamErrorBoundary resetOnChange={[contentProps.query]}>
@@ -86,8 +91,8 @@ export const LogStream: React.FC<LogStreamProps> = ({ height = 400, ...contentPr
   );
 };
 
-export const LogStreamContent: React.FC<LogStreamContentProps> = ({
-  sourceId = 'default',
+export const LogStreamContent = ({
+  logView,
   startTimestamp,
   endTimestamp,
   query,
@@ -96,7 +101,7 @@ export const LogStreamContent: React.FC<LogStreamContentProps> = ({
   highlight,
   columns,
   showFlyoutAction = false,
-}) => {
+}: LogStreamProps) => {
   const customColumns = useMemo(
     () => (columns ? convertLogColumnDefinitionToLogSourceColumnDefinition(columns) : undefined),
     [columns]
@@ -115,7 +120,7 @@ Read more at https://github.com/elastic/kibana/blob/main/src/plugins/kibana_reac
     );
   }
 
-  const { openLogEntryFlyout } = useLogEntryFlyout(sourceId);
+  const { openLogEntryFlyout } = useLogEntryFlyout(logView.logViewId);
 
   const kibanaQuerySettings = useKibanaQuerySettings();
 
@@ -130,7 +135,7 @@ Read more at https://github.com/elastic/kibana/blob/main/src/plugins/kibana_reac
     load: loadLogView,
     resolvedLogView,
   } = useLogView({
-    logViewId: sourceId,
+    logViewId: logView.logViewId,
     logViews,
     fetch: http.fetch,
   });
@@ -162,7 +167,7 @@ Read more at https://github.com/elastic/kibana/blob/main/src/plugins/kibana_reac
     isLoadingMore,
     isReloading: isLoadingEntries,
   } = useLogStream({
-    sourceId,
+    sourceId: logView.logViewId,
     startTimestamp,
     endTimestamp,
     query: parsedQuery,

x-pack/plugins/infra/public/components/log_stream/log_stream_embeddable.tsx

@@ -84,6 +84,7 @@ export class LogStreamEmbeddable extends Embeddable<LogStreamEmbeddableInput> {
         <EuiThemeProvider>
           <div style={{ width: '100%' }}>
             <LazyLogStreamWrapper
+              logView={{ type: 'log-view-reference', logViewId: 'default' }}
               startTimestamp={startTimestamp}
               endTimestamp={endTimestamp}
               height="100%"

x-pack/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx

@@ -56,7 +56,7 @@ export const PageViewLogInContext: React.FC = () => {
           </EuiFlexItem>
           <EuiFlexItem grow={1}>
             <LogStream
-              sourceId={sourceId}
+              logView={{ type: 'log-view-reference', logViewId: sourceId }}
               startTimestamp={startTimestamp}
               endTimestamp={endTimestamp}
               query={contextQuery}

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/logs.tsx

@@ -81,7 +81,12 @@ const TabComponent = (props: TabProps) => {
           </EuiButtonEmpty>
         </EuiFlexItem>
       </EuiFlexGroup>
-      <LogStream startTimestamp={startTimestamp} endTimestamp={endTimestamp} query={filter} />
+      <LogStream
+        logView={{ type: 'log-view-reference', logViewId: 'default' }}
+        startTimestamp={startTimestamp}
+        endTimestamp={endTimestamp}
+        query={filter}
+      />
     </TabContent>
   );
 };