[Metrics UI] Add logs to node details (#83433)

* Add charts to the metrics tab * Add timepicker, i18n, polish * Fix copyrite * Add log stream component to node details * Add logs tab with ability to search * Update i18n * Apply suggestions from code review Co-authored-by: Zacqary Adam Xeper <[email protected]> * Update comment * Fix lint * Fix eslint Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Zacqary Adam Xeper <[email protected]>
elastic · Nov 19, 2020 · bc49b5b · bc49b5b
1 parent 48ac9f7
commit bc49b5b
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 3 deletions.
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
@@ -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/...k/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/logs.tsx b/...k/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 <TabContent>Logs Placeholder</TabContent>;
+  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<HTMLInputElement>) => {
+    setTextQuery(e.target.value);
+  }, []);
+
+  const nodeLogsMenuItemLinkProps = useLinkProps(
+    getNodeLogsUrl({
+      nodeType,
+      nodeId: node.id,
+      time: startTimestamp,
+    })
+  );
+
+  return (
+    <TabContent>
+      <EuiFlexGroup gutterSize={'none'} alignItems="center">
+        <EuiFlexItem>
+          <QueryWrapper>
+            <EuiFieldSearch
+              fullWidth
+              placeholder={i18n.translate('xpack.infra.nodeDetails.logs.textFieldPlaceholder', {
+                defaultMessage: 'Search for log entries...',
+              })}
+              value={textQuery}
+              isClearable
+              onChange={onQueryChange}
+            />
+          </QueryWrapper>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty iconType={'popout'} {...nodeLogsMenuItemLinkProps}>
+            <FormattedMessage
+              id="xpack.infra.nodeDetails.logs.openLogsLink"
+              defaultMessage="Open in Logs"
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <LogStream startTimestamp={startTimestamp} endTimestamp={endTimestamp} query={filter} />
+    </TabContent>
+  );
 };
 
+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', {