[Infra UI] Add 'host.name' field view for 'Logs' tab (#159561)

closes #159560 

## 📝  Summary

This PR adds an inline view for the logs tab in the Hosts view, where
the `host.name` column is statically added to the columns definition.

## ✅  Testing

1. Navigate to Stream page
2. Change the settings to have any Date Source and columns
3. Navigate to the logs tab in the Hosts view
4. Verify that the columns applied in step 2 aren't showing in the logs,
and that `host.name` is showing.
5. Click the open in logs link and make sure that the settings show the
host.name and notes an inline view is being used.



a19f7969-31b3-40af-9e07-784631d6292f

x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/logs/logs_link_to_stream.tsx

@@ -8,15 +8,17 @@ import React from 'react';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { EuiButtonEmpty } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { LogViewReference } from '../../../../../../../common/log_views';
 import { useKibanaContextForPlugin } from '../../../../../../hooks/use_kibana';
 
 interface LogsLinkToStreamProps {
   startTime: number;
   endTime: number;
   query: string;
+  logView: LogViewReference;
 }
 
-export const LogsLinkToStream = ({ startTime, endTime, query }: LogsLinkToStreamProps) => {
+export const LogsLinkToStream = ({ startTime, endTime, query, logView }: LogsLinkToStreamProps) => {
   const { services } = useKibanaContextForPlugin();
   const { locators } = services;
 
@@ -30,6 +32,7 @@ export const LogsLinkToStream = ({ startTime, endTime, query }: LogsLinkToStream
             endTime,
           },
           filter: query,
+          logView,
         })}
         data-test-subj="hostsView-logs-link-to-stream-button"
         iconType="popout"

x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/logs/logs_tab_content.tsx

@@ -5,9 +5,15 @@
  * 2.0.
  */
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { DEFAULT_LOG_VIEW } from '../../../../../../../common/log_views';
+import type {
+  LogIndexReference,
+  LogViewReference,
+} from '../../../../../../../common/log_views/types';
+import { useKibanaContextForPlugin } from '../../../../../../hooks/use_kibana';
 import { InfraLoadingPanel } from '../../../../../../components/loading';
 import { LogStream } from '../../../../../../components/log_stream';
 import { useHostsViewContext } from '../../../hooks/use_hosts_view';
@@ -23,11 +29,57 @@ export const LogsTabContent = () => {
   const { from, to } = useMemo(() => getDateRangeAsTimestamp(), [getDateRangeAsTimestamp]);
   const { hostNodes, loading } = useHostsViewContext();
 
+  const [logViewIndices, setLogViewIndices] = useState<LogIndexReference>();
+
+  const {
+    services: {
+      logViews: { client },
+    },
+  } = useKibanaContextForPlugin();
+
+  useEffect(() => {
+    const getLogView = async () => {
+      const { attributes } = await client.getLogView(DEFAULT_LOG_VIEW);
+      setLogViewIndices(attributes.logIndices);
+    };
+    getLogView();
+  }, [client, setLogViewIndices]);
+
   const hostsFilterQuery = useMemo(
     () => createHostsFilter(hostNodes.map((p) => p.name)),
     [hostNodes]
   );
 
+  const logView: LogViewReference = useMemo(() => {
+    return {
+      type: 'log-view-inline',
+      id: 'hosts-logs-view',
+      attributes: {
+        name: 'Hosts Logs View',
+        description: 'Default view for hosts logs tab',
+        logIndices: logViewIndices!,
+        logColumns: [
+          {
+            timestampColumn: {
+              id: '5e7f964a-be8a-40d8-88d2-fbcfbdca0e2f',
+            },
+          },
+          {
+            fieldColumn: {
+              id: 'eb9777a8-fcd3-420e-ba7d-172fff6da7a2',
+              field: 'host.name',
+            },
+          },
+          {
+            messageColumn: {
+              id: 'b645d6da-824b-4723-9a2a-e8cece1645c0',
+            },
+          },
+        ],
+      },
+    };
+  }, [logViewIndices]);
+
   const logsLinkToStreamQuery = useMemo(() => {
     const hostsFilterQueryParam = createHostsFilterQueryParam(hostNodes.map((p) => p.name));
 
@@ -38,7 +90,7 @@ export const LogsTabContent = () => {
     return filterQuery.query || hostsFilterQueryParam;
   }, [filterQuery.query, hostNodes]);
 
-  if (loading) {
+  if (loading || !logViewIndices) {
     return (
       <EuiFlexGroup style={{ height: 300 }} direction="column" alignItems="stretch">
         <EuiFlexItem grow>
@@ -64,14 +116,19 @@ export const LogsTabContent = () => {
           <LogsSearchBar />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <LogsLinkToStream startTime={from} endTime={to} query={logsLinkToStreamQuery} />
+          <LogsLinkToStream
+            startTime={from}
+            endTime={to}
+            query={logsLinkToStreamQuery}
+            logView={logView}
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
 
       <EuiFlexItem>
         <LogStream
           height={500}
-          logView={{ type: 'log-view-reference', logViewId: 'default' }}
+          logView={logView}
           startTimestamp={from}
           endTimestamp={to}
           filters={[hostsFilterQuery]}

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

@@ -447,6 +447,14 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         it('should load the Logs tab section when clicking on it', async () => {
           await testSubjects.existOrFail('hostsView-logs');
         });
+
+        it('should load the Logs tab with the right columns', async () => {
+          await retry.try(async () => {
+            const columnLabels = await pageObjects.infraHostsView.getLogsTableColumnHeaders();
+
+            expect(columnLabels).to.eql(['Timestamp', 'host.name', 'Message']);
+          });
+        });
       });
 
       describe('Alerts Tab', () => {

x-pack/test/functional/page_objects/infra_hosts_view.ts

@@ -214,6 +214,13 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) {
       return container.findAllByCssSelector('[data-test-subj*=streamEntry]');
     },
 
+    async getLogsTableColumnHeaders() {
+      const columnHeaderElements: WebElementWrapper[] = await testSubjects.findAll(
+        '~logColumnHeader'
+      );
+      return await Promise.all(columnHeaderElements.map((element) => element.getVisibleText()));
+    },
+
     // Alerts Tab
     getAlertsTab() {
       return testSubjects.find('hostsView-tabs-alerts');