Adding technical preview badge

x-pack/plugins/monitoring/public/components/chart/get_technical_preview.js

@@ -0,0 +1,22 @@
+/*
+ * 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 { chain } from 'lodash';
+
+/*
+ * Chart titles are taken from `metric.title` or `metric.label` fields in the series data.
+ * Use title if found, otherwise use label
+ */
+export function getTechnicalPreview(series = []) {
+  return chain(
+    series.map((s) => {
+      return Boolean(s.metric.technicalPreview);
+    })
+  )
+    .first()
+    .value();
+}

x-pack/plugins/monitoring/public/components/chart/get_technical_preview.test.js

@@ -0,0 +1,32 @@
+/*
+ * 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 expect from '@kbn/expect';
+import { getTechnicalPreview } from './get_technical_preview';
+
+describe('getTechnicalPreview', function () {
+  it('with metric.technicalPreview undefined', () => {
+    const series = [{ metric: {} }, { metric: { technicalPreview: true } }];
+    expect(getTechnicalPreview(series)).to.be(false);
+  });
+
+  it('with metric.technicalPreview false', () => {
+    const series = [
+      { metric: { technicalPreview: false } },
+      { metric: { technicalPreview: true } },
+    ];
+    expect(getTechnicalPreview(series)).to.be(false);
+  });
+
+  it('with metric.technicalPreview true', () => {
+    const series = [
+      { metric: { technicalPreview: true } },
+      { metric: { technicalPreview: false } },
+    ];
+    expect(getTechnicalPreview(series)).to.be(true);
+  });
+});

x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js

@@ -7,13 +7,15 @@
 
 import React, { Fragment } from 'react';
 import { get, first } from 'lodash';
+import { getTechnicalPreview } from './get_technical_preview';
 import { getTitle } from './get_title';
 import { getUnits } from './get_units';
 import { MonitoringTimeseries } from './monitoring_timeseries';
 import { InfoTooltip } from './info_tooltip';
 import './monitoring_timeseries_container.scss';
 
 import {
+  EuiBadge,
   EuiIconTip,
   EuiFlexGroup,
   EuiFlexItem,
@@ -50,12 +52,30 @@ const zoomOutBtn = (zoomInfo) => {
   );
 };
 
+const technicalPreviewBadge = (technicalPreview) => {
+  if (!technicalPreview) {
+    return null;
+  }
+
+  return (
+    <EuiFlexItem>
+      <EuiBadge color="hollow" iconType="cheer">
+        <FormattedMessage
+          id="xpack.monitoring.chart.timeSeries.technicalPreview"
+          defaultMessage="Technical Preview"
+        />
+      </EuiBadge>
+    </EuiFlexItem>
+  );
+};
+
 export function MonitoringTimeseriesContainer({ series, onBrush, zoomInfo }) {
   if (series === undefined) {
     return null; // still loading
   }
 
   const title = getTitle(series);
+  const technicalPreview = getTechnicalPreview(series);
   const titleForAriaIds = title.replace(/\s+/, '--');
   const units = getUnits(series);
   const bucketSize = get(first(series), 'bucket_size'); // bucket size will be the same for all metrics in all series
@@ -115,6 +135,7 @@ export function MonitoringTimeseriesContainer({ series, onBrush, zoomInfo }) {
                   </EuiScreenReaderOnly>
                 </Fragment>
               </EuiFlexItem>
+              {technicalPreviewBadge(technicalPreview)}
               {zoomOutBtn(zoomInfo)}
             </EuiFlexGroup>
           </EuiFlexItem>

x-pack/plugins/monitoring/server/lib/metrics/classes/metric.ts

@@ -24,6 +24,7 @@ interface OptionalMetricOptions {
   mbField?: string;
   type?: string;
   isNotSupportedInInternalCollection?: boolean;
+  technicalPreview?: boolean;
 }
 
 interface DefaultMetricOptions {
@@ -60,6 +61,7 @@ export class Metric {
   public periodsField?: string;
   public quotaField?: string;
   public isNotSupportedInInternalCollection?: boolean;
+  public technicalPreview?: boolean;
 
   constructor(opts: MetricOptions) {
     const props: Required<DefaultMetricOptions> = {
@@ -99,6 +101,7 @@ export class Metric {
       'description',
       'units',
       'format',
+      'technicalPreview',
     ];
 
     const metric = Object.create(this);

x-pack/plugins/monitoring/server/lib/metrics/kibana/classes.ts

@@ -21,6 +21,7 @@ type KibanaClusterMetricOptions = Pick<
   | 'derivative'
   | 'derivativeNormalizedUnits'
   | 'isNotSupportedInInternalCollection'
+  | 'technicalPreview'
 > &
   Partial<Pick<MetricOptions, 'title'>>;
 

x-pack/plugins/monitoring/server/lib/metrics/kibana/metrics.ts

@@ -289,6 +289,7 @@ export const metrics = {
     metricAgg: 'max',
     units: '',
     isNotSupportedInInternalCollection: true,
+    technicalPreview: true,
   }),
   kibana_instance_rule_executions: new KibanaInstanceRuleMetric({
     derivative: true,
@@ -307,6 +308,7 @@ export const metrics = {
     metricAgg: 'max',
     units: '',
     isNotSupportedInInternalCollection: true,
+    technicalPreview: true,
   }),
   kibana_instance_action_failures: new KibanaInstanceActionMetric({
     derivative: true,
@@ -325,6 +327,7 @@ export const metrics = {
     metricAgg: 'max',
     units: '',
     isNotSupportedInInternalCollection: true,
+    technicalPreview: true,
   }),
   kibana_instance_action_executions: new KibanaInstanceActionMetric({
     derivative: true,
@@ -343,6 +346,7 @@ export const metrics = {
     metricAgg: 'max',
     units: '',
     isNotSupportedInInternalCollection: true,
+    technicalPreview: true,
   }),
 
   kibana_cluster_rule_overdue_count: new KibanaClusterRuleMetric({
@@ -360,6 +364,7 @@ export const metrics = {
     metricAgg: 'max',
     units: '',
     isNotSupportedInInternalCollection: true,
+    technicalPreview: true,
   }),
   kibana_cluster_rule_overdue_p50: new KibanaClusterRuleMetric({
     title: ruleQueueDurationTitle,
@@ -377,6 +382,7 @@ export const metrics = {
     metricAgg: 'max',
     units: msTimeUnitLabel,
     isNotSupportedInInternalCollection: true,
+    technicalPreview: true,
   }),
   kibana_cluster_rule_overdue_p99: new KibanaClusterRuleMetric({
     title: ruleQueueDurationTitle,
@@ -413,6 +419,7 @@ export const metrics = {
     metricAgg: 'max',
     units: '',
     isNotSupportedInInternalCollection: true,
+    technicalPreview: true,
   }),
   kibana_cluster_action_overdue_p50: new KibanaClusterActionMetric({
     title: actionQueueDurationTitle,
@@ -430,6 +437,7 @@ export const metrics = {
     metricAgg: 'max',
     units: msTimeUnitLabel,
     isNotSupportedInInternalCollection: true,
+    technicalPreview: true,
   }),
   kibana_cluster_action_overdue_p99: new KibanaClusterActionMetric({
     title: actionQueueDurationTitle,
@@ -447,5 +455,6 @@ export const metrics = {
     metricAgg: 'max',
     units: msTimeUnitLabel,
     isNotSupportedInInternalCollection: true,
+    technicalPreview: true,
   }),
 };