[Metrics UI] Add inventory metric threshold alerts (elastic#64292)

* Add new inventory metric threshold alert

* Add missed file

* Fix some types

* Convert units on client and executor.

* Move formatters to common. Properly format metrics in alert messages

* Style changes

* Remove unused files

* fix test

* Update create

* Fix signature

* Remove old test. Remove unecessary import

* Pass in filter when clicking create alert from context menu

* Fix filtering

* Fix more types

* Fix tests

* Fix merge

* Fix merge

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/infra/public/utils/formatters/bytes.test.ts → x-pack/plugins/infra/common/formatters/bytes.test.ts

@@ -3,9 +3,9 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
-import { InfraWaffleMapDataFormat } from '../../lib/lib';
+import { InfraWaffleMapDataFormat } from './types';
 import { createBytesFormatter } from './bytes';
+
 describe('createDataFormatter', () => {
   it('should format bytes as bytesDecimal', () => {
     const formatter = createBytesFormatter(InfraWaffleMapDataFormat.bytesDecimal);

x-pack/plugins/infra/public/utils/formatters/bytes.ts → x-pack/plugins/infra/common/formatters/bytes.ts

@@ -3,9 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
-import { InfraWaffleMapDataFormat } from '../../lib/lib';
 import { formatNumber } from './number';
+import { InfraWaffleMapDataFormat } from './types';
 
 /**
  * The labels are derived from these two Wikipedia articles.

x-pack/plugins/infra/public/utils/formatters/index.ts → x-pack/plugins/infra/common/formatters/index.ts

@@ -5,12 +5,12 @@
  */
 
 import Mustache from 'mustache';
-import { InfraWaffleMapDataFormat } from '../../lib/lib';
 import { createBytesFormatter } from './bytes';
 import { formatNumber } from './number';
 import { formatPercent } from './percent';
-import { InventoryFormatterType } from '../../../common/inventory_models/types';
+import { InventoryFormatterType } from '../inventory_models/types';
 import { formatHighPercision } from './high_precision';
+import { InfraWaffleMapDataFormat } from './types';
 
 export const FORMATTERS = {
   number: formatNumber,

x-pack/plugins/infra/common/formatters/snapshot_metric_formats.ts

@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+
+enum InfraFormatterType {
+  number = 'number',
+  abbreviatedNumber = 'abbreviatedNumber',
+  bytes = 'bytes',
+  bits = 'bits',
+  percent = 'percent',
+}
+
+interface MetricFormatter {
+  formatter: InfraFormatterType;
+  template: string;
+  bounds?: { min: number; max: number };
+}
+
+interface MetricFormatters {
+  [key: string]: MetricFormatter;
+}
+
+export const METRIC_FORMATTERS: MetricFormatters = {
+  ['count']: { formatter: InfraFormatterType.number, template: '{{value}}' },
+  ['cpu']: {
+    formatter: InfraFormatterType.percent,
+    template: '{{value}}',
+  },
+  ['memory']: {
+    formatter: InfraFormatterType.percent,
+    template: '{{value}}',
+  },
+  ['rx']: { formatter: InfraFormatterType.bits, template: '{{value}}/s' },
+  ['tx']: { formatter: InfraFormatterType.bits, template: '{{value}}/s' },
+  ['logRate']: {
+    formatter: InfraFormatterType.abbreviatedNumber,
+    template: '{{value}}/s',
+  },
+  ['diskIOReadBytes']: {
+    formatter: InfraFormatterType.bytes,
+    template: '{{value}}/s',
+  },
+  ['diskIOWriteBytes']: {
+    formatter: InfraFormatterType.bytes,
+    template: '{{value}}/s',
+  },
+  ['s3BucketSize']: {
+    formatter: InfraFormatterType.bytes,
+    template: '{{value}}',
+  },
+  ['s3TotalRequests']: {
+    formatter: InfraFormatterType.abbreviatedNumber,
+    template: '{{value}}',
+  },
+  ['s3NumberOfObjects']: {
+    formatter: InfraFormatterType.abbreviatedNumber,
+    template: '{{value}}',
+  },
+  ['s3UploadBytes']: {
+    formatter: InfraFormatterType.bytes,
+    template: '{{value}}',
+  },
+  ['s3DownloadBytes']: {
+    formatter: InfraFormatterType.bytes,
+    template: '{{value}}',
+  },
+  ['sqsOldestMessage']: {
+    formatter: InfraFormatterType.number,
+    template: '{{value}} seconds',
+  },
+};

x-pack/plugins/infra/common/formatters/types.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 enum InfraWaffleMapDataFormat {
+  bytesDecimal = 'bytesDecimal',
+  bitsDecimal = 'bitsDecimal',
+  abbreviatedNumber = 'abbreviatedNumber',
+}

x-pack/plugins/infra/common/inventory_models/aws_ec2/toolbar_items.tsx

@@ -11,27 +11,29 @@ import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_
 import { CloudToolbarItems } from '../shared/components/cloud_toolbar_items';
 import { SnapshotMetricType } from '../types';
 
+export const ec2MetricTypes: SnapshotMetricType[] = [
+  'cpu',
+  'rx',
+  'tx',
+  'diskIOReadBytes',
+  'diskIOWriteBytes',
+];
+
+export const ec2groupByFields = [
+  'cloud.availability_zone',
+  'cloud.machine.type',
+  'aws.ec2.instance.image.id',
+  'aws.ec2.instance.state.name',
+];
+
 export const AwsEC2ToolbarItems = (props: ToolbarProps) => {
-  const metricTypes: SnapshotMetricType[] = [
-    'cpu',
-    'rx',
-    'tx',
-    'diskIOReadBytes',
-    'diskIOWriteBytes',
-  ];
-  const groupByFields = [
-    'cloud.availability_zone',
-    'cloud.machine.type',
-    'aws.ec2.instance.image.id',
-    'aws.ec2.instance.state.name',
-  ];
   return (
     <>
       <CloudToolbarItems {...props} />
       <MetricsAndGroupByToolbarItems
         {...props}
-        metricTypes={metricTypes}
-        groupByFields={groupByFields}
+        metricTypes={ec2MetricTypes}
+        groupByFields={ec2groupByFields}
       />
     </>
   );

x-pack/plugins/infra/common/inventory_models/aws_rds/toolbar_items.tsx

@@ -11,26 +11,28 @@ import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_
 import { CloudToolbarItems } from '../shared/components/cloud_toolbar_items';
 import { SnapshotMetricType } from '../types';
 
+export const rdsMetricTypes: SnapshotMetricType[] = [
+  'cpu',
+  'rdsConnections',
+  'rdsQueriesExecuted',
+  'rdsActiveTransactions',
+  'rdsLatency',
+];
+
+export const rdsGroupByFields = [
+  'cloud.availability_zone',
+  'aws.rds.db_instance.class',
+  'aws.rds.db_instance.status',
+];
+
 export const AwsRDSToolbarItems = (props: ToolbarProps) => {
-  const metricTypes: SnapshotMetricType[] = [
-    'cpu',
-    'rdsConnections',
-    'rdsQueriesExecuted',
-    'rdsActiveTransactions',
-    'rdsLatency',
-  ];
-  const groupByFields = [
-    'cloud.availability_zone',
-    'aws.rds.db_instance.class',
-    'aws.rds.db_instance.status',
-  ];
   return (
     <>
       <CloudToolbarItems {...props} />
       <MetricsAndGroupByToolbarItems
         {...props}
-        metricTypes={metricTypes}
-        groupByFields={groupByFields}
+        metricTypes={rdsMetricTypes}
+        groupByFields={rdsGroupByFields}
       />
     </>
   );

x-pack/plugins/infra/common/inventory_models/aws_s3/toolbar_items.tsx

@@ -11,22 +11,24 @@ import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_
 import { CloudToolbarItems } from '../shared/components/cloud_toolbar_items';
 import { SnapshotMetricType } from '../types';
 
+export const s3MetricTypes: SnapshotMetricType[] = [
+  's3BucketSize',
+  's3NumberOfObjects',
+  's3TotalRequests',
+  's3DownloadBytes',
+  's3UploadBytes',
+];
+
+export const s3GroupByFields = ['cloud.region'];
+
 export const AwsS3ToolbarItems = (props: ToolbarProps) => {
-  const metricTypes: SnapshotMetricType[] = [
-    's3BucketSize',
-    's3NumberOfObjects',
-    's3TotalRequests',
-    's3DownloadBytes',
-    's3UploadBytes',
-  ];
-  const groupByFields = ['cloud.region'];
   return (
     <>
       <CloudToolbarItems {...props} />
       <MetricsAndGroupByToolbarItems
         {...props}
-        metricTypes={metricTypes}
-        groupByFields={groupByFields}
+        metricTypes={s3MetricTypes}
+        groupByFields={s3GroupByFields}
       />
     </>
   );

x-pack/plugins/infra/common/inventory_models/aws_sqs/toolbar_items.tsx

@@ -11,22 +11,23 @@ import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_
 import { CloudToolbarItems } from '../shared/components/cloud_toolbar_items';
 import { SnapshotMetricType } from '../types';
 
+export const sqsMetricTypes: SnapshotMetricType[] = [
+  'sqsMessagesVisible',
+  'sqsMessagesDelayed',
+  'sqsMessagesSent',
+  'sqsMessagesEmpty',
+  'sqsOldestMessage',
+];
+export const sqsGroupByFields = ['cloud.region'];
+
 export const AwsSQSToolbarItems = (props: ToolbarProps) => {
-  const metricTypes: SnapshotMetricType[] = [
-    'sqsMessagesVisible',
-    'sqsMessagesDelayed',
-    'sqsMessagesSent',
-    'sqsMessagesEmpty',
-    'sqsOldestMessage',
-  ];
-  const groupByFields = ['cloud.region'];
   return (
     <>
       <CloudToolbarItems {...props} />
       <MetricsAndGroupByToolbarItems
         {...props}
-        metricTypes={metricTypes}
-        groupByFields={groupByFields}
+        metricTypes={sqsMetricTypes}
+        groupByFields={sqsGroupByFields}
       />
     </>
   );

x-pack/plugins/infra/common/inventory_models/container/toolbar_items.tsx

@@ -10,21 +10,22 @@ import { ToolbarProps } from '../../../public/pages/metrics/inventory_view/compo
 import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_groupby_toolbar_items';
 import { SnapshotMetricType } from '../types';
 
+export const containerMetricTypes: SnapshotMetricType[] = ['cpu', 'memory', 'rx', 'tx'];
+export const containerGroupByFields = [
+  'host.name',
+  'cloud.availability_zone',
+  'cloud.machine.type',
+  'cloud.project.id',
+  'cloud.provider',
+  'service.type',
+];
+
 export const ContainerToolbarItems = (props: ToolbarProps) => {
-  const metricTypes: SnapshotMetricType[] = ['cpu', 'memory', 'rx', 'tx'];
-  const groupByFields = [
-    'host.name',
-    'cloud.availability_zone',
-    'cloud.machine.type',
-    'cloud.project.id',
-    'cloud.provider',
-    'service.type',
-  ];
   return (
     <MetricsAndGroupByToolbarItems
       {...props}
-      metricTypes={metricTypes}
-      groupByFields={groupByFields}
+      metricTypes={containerMetricTypes}
+      groupByFields={containerGroupByFields}
     />
   );
 };

x-pack/plugins/infra/common/inventory_models/host/toolbar_items.tsx

@@ -10,20 +10,27 @@ import { ToolbarProps } from '../../../public/pages/metrics/inventory_view/compo
 import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_groupby_toolbar_items';
 import { SnapshotMetricType } from '../types';
 
+export const hostMetricTypes: SnapshotMetricType[] = [
+  'cpu',
+  'memory',
+  'load',
+  'rx',
+  'tx',
+  'logRate',
+];
+export const hostGroupByFields = [
+  'cloud.availability_zone',
+  'cloud.machine.type',
+  'cloud.project.id',
+  'cloud.provider',
+  'service.type',
+];
 export const HostToolbarItems = (props: ToolbarProps) => {
-  const metricTypes: SnapshotMetricType[] = ['cpu', 'memory', 'load', 'rx', 'tx', 'logRate'];
-  const groupByFields = [
-    'cloud.availability_zone',
-    'cloud.machine.type',
-    'cloud.project.id',
-    'cloud.provider',
-    'service.type',
-  ];
   return (
     <MetricsAndGroupByToolbarItems
       {...props}
-      metricTypes={metricTypes}
-      groupByFields={groupByFields}
+      metricTypes={hostMetricTypes}
+      groupByFields={hostGroupByFields}
     />
   );
 };

x-pack/plugins/infra/common/inventory_models/pod/toolbar_items.tsx

@@ -10,14 +10,15 @@ import { ToolbarProps } from '../../../public/pages/metrics/inventory_view/compo
 import { MetricsAndGroupByToolbarItems } from '../shared/components/metrics_and_groupby_toolbar_items';
 import { SnapshotMetricType } from '../types';
 
+export const podMetricTypes: SnapshotMetricType[] = ['cpu', 'memory', 'rx', 'tx'];
+export const podGroupByFields = ['kubernetes.namespace', 'kubernetes.node.name', 'service.type'];
+
 export const PodToolbarItems = (props: ToolbarProps) => {
-  const metricTypes: SnapshotMetricType[] = ['cpu', 'memory', 'rx', 'tx'];
-  const groupByFields = ['kubernetes.namespace', 'kubernetes.node.name', 'service.type'];
   return (
     <MetricsAndGroupByToolbarItems
       {...props}
-      metricTypes={metricTypes}
-      groupByFields={groupByFields}
+      metricTypes={podMetricTypes}
+      groupByFields={podGroupByFields}
     />
   );
 };

x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_dropdown.tsx

@@ -10,7 +10,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { AlertFlyout } from './alert_flyout';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 
-export const AlertDropdown = () => {
+export const MetricsAlertDropdown = () => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [flyoutVisible, setFlyoutVisible] = useState(false);
   const kibana = useKibana();