Events Feature Phase 0: Replace Rhythm Charts with Elastic Charts

x-pack/legacy/plugins/monitoring/public/components/elastic_chart/helpers/info_tooltip.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { Series } from './types';
+
+interface Props {
+  series: Series[];
+  bucketSize: string;
+}
+
+export function InfoTooltip({ series, bucketSize }: Props) {
+  const tableRows = series.map((item: Series, index: number) => {
+    return (
+      <tr
+        key={`chart-tooltip-${index}`}
+        data-debug-metric-agg={item.metric.metricAgg}
+        data-debug-metric-field={item.metric.field}
+        data-debug-metric-is-derivative={item.metric.isDerivative}
+        data-debug-metric-has-calculation={item.metric.hasCalculation}
+      >
+        <td className="monChart__tooltipLabel">{item.metric.label}</td>
+        <td className="monChart__tooltipValue">{item.metric.description}</td>
+      </tr>
+    );
+  });
+
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <td className="monChart__tooltipLabel">
+            <FormattedMessage
+              id="xpack.monitoring.chart.infoTooltip.intervalLabel"
+              defaultMessage="Interval"
+            />
+          </td>
+          <td className="monChart__tooltipValue">{bucketSize}</td>
+        </tr>
+        {tableRows}
+      </tbody>
+    </table>
+  );
+}

x-pack/legacy/plugins/monitoring/public/components/elastic_chart/helpers/types.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface Metric {
+  app: string;
+  description: string;
+  field: string;
+  format: string;
+  hasCalculation?: boolean;
+  isDerivative?: boolean;
+  label: string;
+  metricAgg: string;
+  title: string;
+  units: string;
+}
+
+export interface Series {
+  bucket_size: string;
+  timeRange: {
+    min: number;
+    max: number;
+  };
+  metric: Metric;
+  data: Array<[number, number]>;
+}
+
+export type FormatMethod = (val: number) => string;

x-pack/legacy/plugins/monitoring/public/components/elastic_chart/helpers/utils.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { get } from 'lodash';
+import numeral from '@elastic/numeral';
+import moment from 'moment';
+
+import { Series, FormatMethod } from './types';
+
+export const getUnits = (series: Series): string => {
+  const units: string = get(series, '.metric.units', 'B');
+  return units !== 'B' ? units : '';
+};
+
+export const formatTicksValues = (series: Series): FormatMethod => {
+  const format: string = get(series, '.metric.format', '0,0.0');
+  return (val: number) => `${numeral(val).format(format)} ${getUnits(series)}`;
+};
+
+export const formatTimeValues: FormatMethod = (val: number) => `${moment.utc(val).format('HH:mm')}`;
+
+export const getTitle = (series: Series[]): string => {
+  for (const s of series) {
+    const { metric } = s;
+    const { title, label } = metric;
+    const sTitle = title || label;
+    if (sTitle) {
+      return sTitle;
+    }
+  }
+  return '';
+};

x-pack/legacy/plugins/monitoring/public/components/elastic_chart/index.tsx

@@ -0,0 +1,219 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import chrome from 'ui/chrome';
+import {
+  Axis,
+  Chart,
+  getAxisId,
+  getSpecId,
+  LineSeries,
+  Settings,
+  ScaleType,
+  Theme,
+  CursorEvent,
+  LIGHT_THEME,
+  DARK_THEME,
+  CrosshairStyle,
+} from '@elastic/charts';
+import { CursorUpdateListener } from '@elastic/charts/dist/chart_types/xy_chart/store/chart_state';
+import { AxisSpec } from '@elastic/charts/dist/chart_types/xy_chart/utils/specs';
+import {
+  EuiPageContent,
+  EuiSpacer,
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiTitle,
+  EuiScreenReaderOnly,
+  EuiIconTip,
+} from '@elastic/eui';
+import { get } from 'lodash';
+import { getTitle, getUnits, formatTicksValues, formatTimeValues } from './helpers/utils';
+import { InfoTooltip } from './helpers/info_tooltip';
+import { Series } from './helpers/types';
+
+interface PropsSeries {
+  series: Series[];
+  onCursorUpdate?: CursorUpdateListener;
+  chartRef: React.RefObject<Chart>;
+}
+
+type OptionalComponent = JSX.Element | null;
+type StaticComponent = JSX.Element;
+
+const getBaseTheme = (): Theme => {
+  const modeTheme: Theme = chrome.getUiSettingsClient().get('theme:darkMode')
+    ? DARK_THEME
+    : LIGHT_THEME;
+  return {
+    ...modeTheme,
+    crosshair: {
+      band: { fill: 'red', visible: true },
+      line: {} as CrosshairStyle['line'],
+    },
+    lineSeriesStyle: {
+      line: {
+        strokeWidth: 2,
+        visible: true,
+        opacity: 1,
+      },
+      point: {
+        strokeWidth: 1,
+        visible: true,
+        radius: 2,
+        opacity: 1,
+      },
+    },
+  };
+};
+
+const gridLines: AxisSpec = {
+  showGridLines: true,
+  gridLineStyle: {
+    stroke: 'black',
+    strokeWidth: 0.5,
+    opacity: 0.1,
+  },
+} as AxisSpec;
+
+const MonitoringChart = ({ series, onCursorUpdate, chartRef }: PropsSeries): OptionalComponent => {
+  if (!series) {
+    return null;
+  }
+
+  const firstSeries: Series = series[0];
+  const { timeRange } = firstSeries;
+  const { min, max } = timeRange;
+  return (
+    <Chart ref={chartRef}>
+      <Settings
+        showLegend
+        legendPosition="bottom"
+        xDomain={{ min, max }}
+        theme={getBaseTheme()}
+        onCursorUpdate={onCursorUpdate}
+      />
+      <Axis
+        id={getAxisId('bottom')}
+        position="bottom"
+        {...gridLines}
+        tickFormat={formatTimeValues}
+      />
+      <Axis id={getAxisId('left')} {...gridLines} tickFormat={formatTicksValues(firstSeries)} />
+      {series.map((item: Series, index: number) => (
+        <LineSeries
+          key={index}
+          id={getSpecId(item.metric.label)}
+          xScaleType={ScaleType.Time}
+          yScaleType={ScaleType.Linear}
+          xAccessor={0}
+          yAccessors={[1]}
+          data={item.data}
+          yScaleToDataExtent={true}
+          curve={9}
+        />
+      ))}
+    </Chart>
+  );
+};
+
+const MonitoringTimeseriesContainer = (props: PropsSeries): OptionalComponent => {
+  const { series } = props;
+  if (!series) {
+    return null;
+  }
+
+  const seriesTitle: string = getTitle(series);
+  const titleForAriaIds: string = seriesTitle.replace(/\s+/, '--');
+  const units: string = getUnits(series[0]);
+  const title: string = `${seriesTitle}${units ? ` (${units})` : ''}`;
+  const bucketSize: string = get(series[0], 'bucket_size');
+  const seriesScreenReaderTextList: string[] = [
+    i18n.translate('xpack.monitoring.chart.seriesScreenReaderListDescription', {
+      defaultMessage: 'Interval: {bucketSize}',
+      values: {
+        bucketSize,
+      },
+    }),
+  ].concat(series.map((item: Series) => `${item.metric.label}: ${item.metric.description}`));
+
+  return (
+    <EuiFlexGroup direction="column" gutterSize="s" className="monRhythmChart__wrapper">
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup gutterSize="s" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="s">
+              <>
+                {title}
+                <EuiScreenReaderOnly>
+                  <span>
+                    <FormattedMessage
+                      id="xpack.monitoring.chart.screenReaderUnaccessibleTitle"
+                      defaultMessage="This chart is not screen reader accessible"
+                    />
+                  </span>
+                </EuiScreenReaderOnly>
+              </>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiIconTip
+              anchorClassName="eui-textRight eui-alignMiddle monChart__tooltipTrigger"
+              type="iInCircle"
+              position="right"
+              content={<InfoTooltip series={series} bucketSize={bucketSize} />}
+            />
+            <EuiScreenReaderOnly>
+              <span id={`monitoringChart${titleForAriaIds}`}>
+                {seriesScreenReaderTextList.join('. ')}
+              </span>
+            </EuiScreenReaderOnly>
+          </EuiFlexItem>
+          {/* zoom button was here */}
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem style={{ height: '250px' }}>
+        <MonitoringChart {...props} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+export const MonitoringCharts = ({ metrics }: { metrics: Series[][] }): StaticComponent => {
+  const chartRefs: Array<React.RefObject<Chart>> = metrics.map(() => React.createRef<Chart>());
+  const timers: NodeJS.Timeout[] = [];
+  const onCursorUpdate: CursorUpdateListener = (event: CursorEvent | undefined): void => {
+    chartRefs.forEach((ref: React.RefObject<Chart>, i: number) => {
+      clearTimeout(timers[i]);
+      timers[i] = setTimeout(
+        () => ref.current && ref.current!.dispatchExternalCursorEvent(event),
+        i * 5
+      );
+    });
+  };
+
+  return (
+    <>
+      <EuiSpacer size="m" />
+      <EuiPageContent>
+        <EuiFlexGrid columns={2} gutterSize="s">
+          {metrics.map((series: Series[], index: number) => (
+            <EuiFlexItem key={index}>
+              <MonitoringTimeseriesContainer
+                {...{ series, onCursorUpdate, chartRef: chartRefs[index] }}
+              />
+              <EuiSpacer size="xs" />
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGrid>
+      </EuiPageContent>
+    </>
+  );
+};

x-pack/legacy/plugins/monitoring/public/components/elasticsearch/node/advanced.js

@@ -7,20 +7,15 @@
 import React from 'react';
 import {
   EuiPage,
-  EuiPageContent,
   EuiPageBody,
   EuiPanel,
-  EuiSpacer,
-  EuiFlexGrid,
-  EuiFlexItem,
 } from '@elastic/eui';
 import { NodeDetailStatus } from '../node_detail_status';
-import { MonitoringTimeseriesContainer } from '../../chart';
+import { MonitoringCharts } from '../../elastic_chart';
 
 export const AdvancedNode = ({
   nodeSummary,
-  metrics,
-  ...props
+  metrics
 }) => {
   const metricsToShow = [
     metrics.node_gc,
@@ -46,20 +41,7 @@ export const AdvancedNode = ({
         <EuiPanel>
           <NodeDetailStatus stats={nodeSummary} />
         </EuiPanel>
-        <EuiSpacer size="m" />
-        <EuiPageContent>
-          <EuiFlexGrid columns={2} gutterSize="s">
-            {metricsToShow.map((metric, index) => (
-              <EuiFlexItem key={index}>
-                <MonitoringTimeseriesContainer
-                  series={metric}
-                  {...props}
-                />
-                <EuiSpacer />
-              </EuiFlexItem>
-            ))}
-          </EuiFlexGrid>
-        </EuiPageContent>
+        <MonitoringCharts metrics={metricsToShow}/>
       </EuiPageBody>
     </EuiPage>
   );

x-pack/tsconfig.json

@@ -31,8 +31,9 @@
       "test_utils/*": [
         "x-pack/test_utils/*"
       ],
-      "monitoring/common/*": [
-        "x-pack/monitoring/common/*"
+      "plugins/monitoring/*": [
+        "x-pack/monitoring/common/*",
+        "x-pack/legacy/plugins/monitoring/public/components/elastic-chart/*"
       ]
     },
     "types": [