diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx
index 8b2140aa196b3..0943ced5e5be0 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx
@@ -11,7 +11,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
import { euiStyled } from '../../../../../../../observability/public';
import { InfraWaffleMapNode, InfraWaffleMapOptions } from '../../../../../lib/lib';
import { InventoryItemType } from '../../../../../../common/inventory_models/types';
-import { MetricsTab } from './tabs/metrics';
+import { MetricsTab } from './tabs/metrics/metrics';
import { LogsTab } from './tabs/logs';
import { ProcessesTab } from './tabs/processes';
import { PropertiesTab } from './tabs/properties';
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/logs.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/logs.tsx
index 1a8bc374e79a3..ce800a7d73700 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/logs.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/logs.tsx
@@ -4,14 +4,86 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
+import { EuiFieldSearch } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
+import { EuiButtonEmpty } from '@elastic/eui';
import { TabContent, TabProps } from './shared';
+import { LogStream } from '../../../../../../components/log_stream';
+import { useWaffleOptionsContext } from '../../../hooks/use_waffle_options';
+import { findInventoryFields } from '../../../../../../../common/inventory_models';
+import { euiStyled } from '../../../../../../../../observability/public';
+import { useLinkProps } from '../../../../../../hooks/use_link_props';
+import { getNodeLogsUrl } from '../../../../../link_to';
const TabComponent = (props: TabProps) => {
- return Logs Placeholder;
+ const [textQuery, setTextQuery] = useState('');
+ const endTimestamp = props.currentTime;
+ const startTimestamp = endTimestamp - 60 * 60 * 1000; // 60 minutes
+ const { nodeType } = useWaffleOptionsContext();
+ const { options, node } = props;
+
+ const filter = useMemo(() => {
+ let query = options.fields
+ ? `${findInventoryFields(nodeType, options.fields).id}: "${node.id}"`
+ : ``;
+
+ if (textQuery) {
+ query += ` and message: ${textQuery}`;
+ }
+ return query;
+ }, [options, nodeType, node.id, textQuery]);
+
+ const onQueryChange = useCallback((e: React.ChangeEvent) => {
+ setTextQuery(e.target.value);
+ }, []);
+
+ const nodeLogsMenuItemLinkProps = useLinkProps(
+ getNodeLogsUrl({
+ nodeType,
+ nodeId: node.id,
+ time: startTimestamp,
+ })
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
};
+const QueryWrapper = euiStyled.div`
+ padding: ${(props) => props.theme.eui.paddingSizes.m};
+ padding-right: 0;
+`;
+
export const LogsTab = {
id: 'logs',
name: i18n.translate('xpack.infra.nodeDetails.tabs.logs', {