From b5702edfdecbaf6ccf1fc37e7ed8973b229614d6 Mon Sep 17 00:00:00 2001
From: Phillip Burch <phillip.burch@live.com>
Date: Thu, 8 Apr 2021 10:19:50 -0500
Subject: [PATCH] Add Log Rate to the metrics tab

---
 .../tabs/metrics/chart_section.tsx            | 103 ++++++
 .../node_details/tabs/metrics/metrics.tsx     | 292 +++++++-----------
 .../tabs/metrics/translations.tsx             |  11 +
 3 files changed, 232 insertions(+), 174 deletions(-)
 create mode 100644 x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_section.tsx

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_section.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_section.tsx
new file mode 100644
index 0000000000000..c3b2ed2c0ee2d
--- /dev/null
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_section.tsx
@@ -0,0 +1,103 @@
+/*
+ * 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 {
+  Axis,
+  Settings,
+  Position,
+  Chart,
+  PointerUpdateListener,
+  TickFormatter,
+  TooltipValue,
+  ChartSizeArray,
+} from '@elastic/charts';
+import React from 'react';
+import moment from 'moment';
+import { MetricsExplorerSeries } from '../../../../../../../../common/http_api';
+import { MetricExplorerSeriesChart } from '../../../../../metrics_explorer/components/series_chart';
+import {
+  MetricsExplorerChartType,
+  MetricsExplorerOptionsMetric,
+} from '../../../../../metrics_explorer/hooks/use_metrics_explorer_options';
+import { ChartHeader } from './chart_header';
+import { getTimelineChartTheme } from '../../../../../metrics_explorer/components/helpers/get_chart_theme';
+
+const CHART_SIZE: ChartSizeArray = ['100%', 160];
+
+interface Props {
+  title: string;
+  style: MetricsExplorerChartType;
+  chartRef: React.Ref<Chart>;
+  series: ChartSectionSeries[];
+  tickFormatterForTime: TickFormatter<any>;
+  tickFormatter: TickFormatter<any>;
+  onPointerUpdate: PointerUpdateListener;
+  domain: { max: number; min: number };
+  isDarkMode: boolean;
+  stack?: boolean;
+}
+
+export interface ChartSectionSeries {
+  metric: MetricsExplorerOptionsMetric;
+  series: MetricsExplorerSeries;
+}
+
+export const ChartSection = ({
+  title,
+  style,
+  chartRef,
+  series,
+  tickFormatterForTime,
+  tickFormatter,
+  onPointerUpdate,
+  domain,
+  isDarkMode,
+  stack = false,
+}: Props) => {
+  const metrics = series.map((chartSeries) => chartSeries.metric);
+
+  const tooltipProps = {
+    headerFormatter: (tooltipValue: TooltipValue) =>
+      moment(tooltipValue.value).format('Y-MM-DD HH:mm:ss.SSS'),
+  };
+
+  return (
+    <>
+      <ChartHeader title={title} metrics={metrics} />
+      <Chart ref={chartRef} size={CHART_SIZE}>
+        {series.map((chartSeries, index) => (
+          <MetricExplorerSeriesChart
+            type={style}
+            metric={chartSeries.metric}
+            id="0"
+            series={chartSeries.series}
+            stack={stack}
+          />
+        ))}
+        <Axis
+          id={'timestamp'}
+          position={Position.Bottom}
+          showOverlappingTicks={true}
+          tickFormat={tickFormatterForTime}
+        />
+        <Axis
+          id={'values'}
+          position={Position.Left}
+          tickFormat={tickFormatter}
+          domain={domain}
+          ticks={6}
+          showGridLines
+        />
+        <Settings
+          onPointerUpdate={onPointerUpdate}
+          tooltip={tooltipProps}
+          theme={getTimelineChartTheme(isDarkMode)}
+        />
+      </Chart>
+    </>
+  );
+};
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/metrics.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/metrics.tsx
index 5ab8eb380a657..e744017069e16 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/metrics.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/metrics.tsx
@@ -8,16 +8,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { first, last } from 'lodash';
 import { i18n } from '@kbn/i18n';
-import {
-  Axis,
-  Chart,
-  ChartSizeArray,
-  niceTimeFormatter,
-  Position,
-  Settings,
-  TooltipValue,
-  PointerEvent,
-} from '@elastic/charts';
+import { Chart, niceTimeFormatter, TooltipValue, PointerEvent } from '@elastic/charts';
 import moment from 'moment';
 import { EuiLoadingChart, EuiSpacer, EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
 import { TabContent, TabProps } from '../shared';
@@ -36,12 +27,10 @@ import {
   MetricsExplorerAggregation,
   MetricsExplorerSeries,
 } from '../../../../../../../../common/http_api';
-import { MetricExplorerSeriesChart } from '../../../../../metrics_explorer/components/series_chart';
 import { createInventoryMetricFormatter } from '../../../../lib/create_inventory_metric_formatter';
 import { calculateDomain } from '../../../../../metrics_explorer/components/helpers/calculate_domain';
-import { getTimelineChartTheme } from '../../../../../metrics_explorer/components/helpers/get_chart_theme';
 import { useUiSetting } from '../../../../../../../../../../../src/plugins/kibana_react/public';
-import { ChartHeader } from './chart_header';
+import { ChartSection } from './chart_section';
 import {
   SYSTEM_METRIC_NAME,
   USER_METRIC_NAME,
@@ -53,17 +42,19 @@ import {
   LOAD_CHART_TITLE,
   MEMORY_CHART_TITLE,
   NETWORK_CHART_TITLE,
+  LOG_RATE_METRIC_NAME,
+  LOG_RATE_CHART_TITLE,
 } from './translations';
 import { TimeDropdown } from './time_dropdown';
 
 const ONE_HOUR = 60 * 60 * 1000;
-const CHART_SIZE: ChartSizeArray = ['100%', 160];
 
 const TabComponent = (props: TabProps) => {
   const cpuChartRef = useRef<Chart>(null);
   const networkChartRef = useRef<Chart>(null);
   const memoryChartRef = useRef<Chart>(null);
   const loadChartRef = useRef<Chart>(null);
+  const logRateChartRef = useRef<Chart>(null);
   const [time, setTime] = useState(ONE_HOUR);
   const chartRefs = useMemo(() => [cpuChartRef, networkChartRef, memoryChartRef, loadChartRef], [
     cpuChartRef,
@@ -102,7 +93,14 @@ const TabComponent = (props: TabProps) => {
     [setTime]
   );
 
-  const { nodes, reload } = useSnapshot(
+  const timeRange = {
+    interval: '1m',
+    to: currentTime,
+    from: currentTime - time,
+    ignoreLookback: true,
+  };
+
+  const { nodes, reload, loading } = useSnapshot(
     filter,
     [
       { type: 'rx' },
@@ -123,12 +121,20 @@ const TabComponent = (props: TabProps) => {
     accountId,
     region,
     false,
-    {
-      interval: '1m',
-      to: currentTime,
-      from: currentTime - time,
-      ignoreLookback: true,
-    }
+    timeRange
+  );
+
+  const { nodes: logRateNodes, reload: reloadLogRate, loading: logRateLoading } = useSnapshot(
+    filter,
+    [{ type: 'logRate' }],
+    [],
+    nodeType,
+    sourceId,
+    currentTime,
+    accountId,
+    region,
+    false,
+    timeRange
   );
 
   const getDomain = useCallback(
@@ -163,6 +169,7 @@ const TabComponent = (props: TabProps) => {
     []
   );
   const loadFormatter = useMemo(() => createInventoryMetricFormatter({ type: 'load' }), []);
+  const logRateFormatter = useMemo(() => createInventoryMetricFormatter({ type: 'logRate' }), []);
 
   const mergeTimeseries = useCallback((...series: MetricsExplorerSeries[]) => {
     const base = series[0];
@@ -219,6 +226,16 @@ const TabComponent = (props: TabProps) => {
     [nodes]
   );
 
+  const getLogRateTimeseries = useCallback(() => {
+    if (!logRateNodes) {
+      return null;
+    }
+    if (logRateNodes.length === 0) {
+      return { rows: [], columns: [], id: '0' };
+    }
+    return logRateNodes[0].metrics.find((m) => m.name === 'logRate')!.timeseries!;
+  }, [logRateNodes]);
+
   const systemMetricsTs = useMemo(() => getTimeseries('system'), [getTimeseries]);
   const userMetricsTs = useMemo(() => getTimeseries('user'), [getTimeseries]);
   const rxMetricsTs = useMemo(() => getTimeseries('rx'), [getTimeseries]);
@@ -229,10 +246,12 @@ const TabComponent = (props: TabProps) => {
   const usedMemoryMetricsTs = useMemo(() => getTimeseries('usedMemory'), [getTimeseries]);
   const freeMemoryMetricsTs = useMemo(() => getTimeseries('freeMemory'), [getTimeseries]);
   const coresMetricsTs = useMemo(() => getTimeseries('cores'), [getTimeseries]);
+  const logRateMetricsTs = useMemo(() => getLogRateTimeseries(), [getLogRateTimeseries]);
 
   useEffect(() => {
     reload();
-  }, [time, reload]);
+    reloadLogRate();
+  }, [time, reload, reloadLogRate]);
 
   if (
     !systemMetricsTs ||
@@ -243,12 +262,14 @@ const TabComponent = (props: TabProps) => {
     !load5mMetricsTs ||
     !load15mMetricsTs ||
     !usedMemoryMetricsTs ||
-    !freeMemoryMetricsTs
+    !freeMemoryMetricsTs ||
+    !logRateMetricsTs
   ) {
     return <LoadingPlaceholder />;
   }
 
   const cpuChartMetrics = buildChartMetricLabels([SYSTEM_METRIC_NAME, USER_METRIC_NAME], 'avg');
+  const logRateChartMetrics = buildChartMetricLabels([LOG_RATE_METRIC_NAME], 'rate');
   const networkChartMetrics = buildChartMetricLabels(
     [INBOUND_METRIC_NAME, OUTBOUND_METRIC_NAME],
     'rate'
@@ -277,6 +298,7 @@ const TabComponent = (props: TabProps) => {
     return r;
   });
   const cpuTimeseries = mergeTimeseries(systemMetricsTs, userMetricsTs);
+  const logRateTimeseries = mergeTimeseries(logRateMetricsTs);
   const networkTimeseries = mergeTimeseries(rxMetricsTs, txMetricsTs);
   const loadTimeseries = mergeTimeseries(load1mMetricsTs, load5mMetricsTs, load15mMetricsTs);
   const memoryTimeseries = mergeTimeseries(usedMemoryMetricsTs, freeMemoryMetricsTs);
@@ -291,166 +313,88 @@ const TabComponent = (props: TabProps) => {
 
       <EuiFlexGrid columns={2} gutterSize={'l'} responsive={false}>
         <EuiFlexItem>
-          <ChartHeader title={CPU_CHART_TITLE} metrics={cpuChartMetrics} />
-          <Chart ref={cpuChartRef} size={CHART_SIZE}>
-            <MetricExplorerSeriesChart
-              type={MetricsExplorerChartType.line}
-              metric={cpuChartMetrics[0]}
-              id={'0'}
-              series={systemMetricsTs!}
-              stack={false}
-            />
-            <MetricExplorerSeriesChart
-              type={MetricsExplorerChartType.line}
-              metric={cpuChartMetrics[1]}
-              id={'0'}
-              series={userMetricsTs}
-              stack={false}
-            />
-            <Axis
-              id={'timestamp'}
-              position={Position.Bottom}
-              showOverlappingTicks={true}
-              tickFormat={formatter}
-            />
-            <Axis
-              id={'values'}
-              position={Position.Left}
-              tickFormat={cpuFormatter}
-              domain={getDomain(cpuTimeseries, cpuChartMetrics)}
-              ticks={6}
-              showGridLines
-            />
-            <Settings
-              onPointerUpdate={pointerUpdate}
-              tooltip={tooltipProps}
-              theme={getTimelineChartTheme(isDarkMode)}
-            />
-          </Chart>
+          <ChartSection
+            title={CPU_CHART_TITLE}
+            style={MetricsExplorerChartType.line}
+            chartRef={cpuChartRef}
+            series={[
+              { metric: cpuChartMetrics[0], series: systemMetricsTs },
+              { metric: cpuChartMetrics[1], series: userMetricsTs },
+            ]}
+            tickFormatterForTime={formatter}
+            tickFormatter={cpuFormatter}
+            onPointerUpdate={pointerUpdate}
+            domain={getDomain(cpuTimeseries, cpuChartMetrics)}
+            isDarkMode={isDarkMode}
+          />
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <ChartSection
+            title={LOAD_CHART_TITLE}
+            style={MetricsExplorerChartType.line}
+            chartRef={loadChartRef}
+            series={[
+              { metric: loadChartMetrics[0], series: load1mMetricsTs },
+              { metric: loadChartMetrics[1], series: load5mMetricsTs },
+              { metric: loadChartMetrics[2], series: load15mMetricsTs },
+            ]}
+            tickFormatterForTime={formatter}
+            tickFormatter={loadFormatter}
+            onPointerUpdate={pointerUpdate}
+            domain={getDomain(loadTimeseries, loadChartMetrics)}
+            isDarkMode={isDarkMode}
+          />
         </EuiFlexItem>
 
         <EuiFlexItem>
-          <ChartHeader title={LOAD_CHART_TITLE} metrics={loadChartMetrics} />
-          <Chart ref={loadChartRef} size={CHART_SIZE}>
-            <MetricExplorerSeriesChart
-              type={MetricsExplorerChartType.line}
-              metric={loadChartMetrics[0]}
-              id="0"
-              series={load1mMetricsTs}
-              stack={false}
-            />
-            <MetricExplorerSeriesChart
-              type={MetricsExplorerChartType.line}
-              metric={loadChartMetrics[1]}
-              id="0"
-              series={load5mMetricsTs}
-              stack={false}
-            />
-            <MetricExplorerSeriesChart
-              type={MetricsExplorerChartType.line}
-              metric={loadChartMetrics[2]}
-              id="0"
-              series={load15mMetricsTs}
-              stack={false}
-            />
-            <Axis
-              id={'timestamp'}
-              position={Position.Bottom}
-              showOverlappingTicks={true}
-              tickFormat={formatter}
-            />
-            <Axis
-              id={'values1'}
-              position={Position.Left}
-              tickFormat={loadFormatter}
-              domain={getDomain(loadTimeseries, loadChartMetrics)}
-              ticks={6}
-              showGridLines
-            />
-            <Settings
-              onPointerUpdate={pointerUpdate}
-              tooltip={tooltipProps}
-              theme={getTimelineChartTheme(isDarkMode)}
-            />
-          </Chart>
+          <ChartSection
+            title={MEMORY_CHART_TITLE}
+            style={MetricsExplorerChartType.line}
+            chartRef={memoryChartRef}
+            series={[
+              { metric: memoryChartMetrics[0], series: usedMemoryMetricsTs },
+              { metric: memoryChartMetrics[1], series: freeMemoryMetricsTs },
+            ]}
+            tickFormatterForTime={formatter}
+            tickFormatter={memoryFormatter}
+            onPointerUpdate={pointerUpdate}
+            domain={getDomain(memoryTimeseries, memoryChartMetrics)}
+            isDarkMode={isDarkMode}
+          />
         </EuiFlexItem>
 
         <EuiFlexItem>
-          <ChartHeader title={MEMORY_CHART_TITLE} metrics={memoryChartMetrics} />
-          <Chart ref={memoryChartRef} size={CHART_SIZE}>
-            <MetricExplorerSeriesChart
-              type={MetricsExplorerChartType.line}
-              metric={memoryChartMetrics[0]}
-              id="0"
-              series={usedMemoryMetricsTs}
-              stack={false}
-            />
-            <MetricExplorerSeriesChart
-              type={MetricsExplorerChartType.line}
-              metric={memoryChartMetrics[1]}
-              id="0"
-              series={freeMemoryMetricsTs}
-              stack={false}
-            />
-            <Axis
-              id={'timestamp'}
-              position={Position.Bottom}
-              showOverlappingTicks={true}
-              tickFormat={formatter}
-            />
-            <Axis
-              id={'values'}
-              position={Position.Left}
-              tickFormat={memoryFormatter}
-              domain={getDomain(memoryTimeseries, memoryChartMetrics)}
-              ticks={6}
-              showGridLines
-            />
-            <Settings
-              onPointerUpdate={pointerUpdate}
-              tooltip={tooltipProps}
-              theme={getTimelineChartTheme(isDarkMode)}
-            />
-          </Chart>
+          <ChartSection
+            title={NETWORK_CHART_TITLE}
+            style={MetricsExplorerChartType.line}
+            chartRef={networkChartRef}
+            series={[
+              { metric: networkChartMetrics[0], series: rxMetricsTs },
+              { metric: networkChartMetrics[1], series: txMetricsTs },
+            ]}
+            tickFormatterForTime={formatter}
+            tickFormatter={networkFormatter}
+            onPointerUpdate={pointerUpdate}
+            domain={getDomain(networkTimeseries, networkChartMetrics)}
+            isDarkMode={isDarkMode}
+            stack={true}
+          />
         </EuiFlexItem>
 
         <EuiFlexItem>
-          <ChartHeader title={NETWORK_CHART_TITLE} metrics={networkChartMetrics} />
-          <Chart ref={networkChartRef} size={CHART_SIZE}>
-            <MetricExplorerSeriesChart
-              type={MetricsExplorerChartType.line}
-              metric={networkChartMetrics[0]}
-              id="0"
-              series={rxMetricsTs}
-              stack={false}
-            />
-            <MetricExplorerSeriesChart
-              type={MetricsExplorerChartType.line}
-              metric={networkChartMetrics[1]}
-              id="0"
-              series={txMetricsTs}
-              stack={false}
-            />
-            <Axis
-              id={'timestamp'}
-              position={Position.Bottom}
-              showOverlappingTicks={true}
-              tickFormat={formatter}
-            />
-            <Axis
-              id={'values'}
-              position={Position.Left}
-              tickFormat={networkFormatter}
-              domain={getDomain(networkTimeseries, networkChartMetrics)}
-              ticks={6}
-              showGridLines
-            />
-            <Settings
-              onPointerUpdate={pointerUpdate}
-              tooltip={tooltipProps}
-              theme={getTimelineChartTheme(isDarkMode)}
-            />
-          </Chart>
+          <ChartSection
+            title={LOG_RATE_CHART_TITLE}
+            style={MetricsExplorerChartType.line}
+            chartRef={logRateChartRef}
+            series={[{ metric: logRateChartMetrics[0], series: logRateMetricsTs }]}
+            tickFormatterForTime={formatter}
+            tickFormatter={logRateFormatter}
+            onPointerUpdate={pointerUpdate}
+            domain={getDomain(logRateTimeseries, logRateChartMetrics)}
+            isDarkMode={isDarkMode}
+            stack={true}
+          />
         </EuiFlexItem>
       </EuiFlexGrid>
     </TabContent>
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/translations.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/translations.tsx
index a63d3d857bef6..940d97918b181 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/translations.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/translations.tsx
@@ -53,3 +53,14 @@ export const CPU_CHART_TITLE = i18n.translate('xpack.infra.nodeDetails.metrics.f
 export const LOAD_CHART_TITLE = i18n.translate('xpack.infra.nodeDetails.metrics.charts.loadTitle', {
   defaultMessage: 'Load',
 });
+
+export const LOG_RATE_METRIC_NAME = i18n.translate('xpack.infra.nodeDetails.metrics.logRate', {
+  defaultMessage: 'Log Rate',
+});
+
+export const LOG_RATE_CHART_TITLE = i18n.translate(
+  'xpack.infra.nodeDetails.metrics.charts.logRateTitle',
+  {
+    defaultMessage: 'Log Rate',
+  }
+);