Add Log Rate to the metrics tab

phillipb · Apr 8, 2021 · b5702ed · b5702ed
1 parent afc1fd0
commit b5702ed
Show file tree

Hide file tree

Showing 3 changed files with 232 additions and 174 deletions.
diff --git a/...ublic/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_section.tsx b/...ublic/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>
+    </>
+  );
+};