[Maps] observability real user monitoring solution layer (#64949)

* [Maps] observability real user monitoring solution layer

* make stateful component

* rename RUM to observability

* layer select

* metrics select

* display select

* clean up

* create cholopleth map layer descriptor

* get styling working

* fix unique count agg

* create geo grid source

* render as heatmap

* clusters

* tslint errors

* last tslint fix

* only show card when APM index exists

* layer label

* clean up

* fix getLayerWizards

* add parans

* review feedback

* add cluster labels

* use green to red ramp

* tslint fix

Co-authored-by: Elastic Machine <[email protected]>

x-pack/plugins/maps/common/constants.ts

@@ -57,6 +57,7 @@ export enum SOURCE_TYPES {
   ES_GEO_GRID = 'ES_GEO_GRID',
   ES_SEARCH = 'ES_SEARCH',
   ES_PEW_PEW = 'ES_PEW_PEW',
+  ES_TERM_SOURCE = 'ES_TERM_SOURCE',
   EMS_XYZ = 'EMS_XYZ', // identifies a custom TMS source. Name is a little unfortunate.
   WMS = 'WMS',
   KIBANA_TILEMAP = 'KIBANA_TILEMAP',

x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts

@@ -71,6 +71,7 @@ export type ESPewPewSourceDescriptor = AbstractESAggSourceDescriptor & {
 export type ESTermSourceDescriptor = AbstractESAggSourceDescriptor & {
   indexPatternTitle: string;
   term: string; // term field name
+  whereQuery?: Query;
 };
 
 export type KibanaRegionmapSourceDescriptor = AbstractSourceDescriptor & {

x-pack/plugins/maps/common/get_join_key.ts → x-pack/plugins/maps/common/get_agg_key.ts

@@ -4,9 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { AGG_DELIMITER, AGG_TYPE, JOIN_FIELD_NAME_PREFIX } from './constants';
+import { AGG_DELIMITER, AGG_TYPE, COUNT_PROP_NAME, JOIN_FIELD_NAME_PREFIX } from './constants';
 
-// function in common since its needed by migration
 export function getJoinAggKey({
   aggType,
   aggFieldName,
@@ -15,8 +14,18 @@ export function getJoinAggKey({
   aggType: AGG_TYPE;
   aggFieldName?: string;
   rightSourceId: string;
-}) {
+}): string {
   const metricKey =
     aggType !== AGG_TYPE.COUNT ? `${aggType}${AGG_DELIMITER}${aggFieldName}` : aggType;
   return `${JOIN_FIELD_NAME_PREFIX}${metricKey}__${rightSourceId}`;
 }
+
+export function getSourceAggKey({
+  aggType,
+  aggFieldName,
+}: {
+  aggType: AGG_TYPE;
+  aggFieldName?: string;
+}): string {
+  return aggType !== AGG_TYPE.COUNT ? `${aggType}${AGG_DELIMITER}${aggFieldName}` : COUNT_PROP_NAME;
+}

x-pack/plugins/maps/common/migrations/join_agg_key.ts

@@ -13,7 +13,7 @@ import {
   LAYER_TYPE,
   VECTOR_STYLES,
 } from '../constants';
-import { getJoinAggKey } from '../get_join_key';
+import { getJoinAggKey } from '../get_agg_key';
 import {
   AggDescriptor,
   JoinDescriptor,

x-pack/plugins/maps/public/connected_components/_index.scss

@@ -1,5 +1,5 @@
 @import 'gis_map/gis_map';
-@import 'layer_addpanel/source_select/index';
+@import 'layer_addpanel/index';
 @import 'layer_panel/index';
 @import 'widget_overlay/index';
 @import 'toolbar_overlay/index';

x-pack/plugins/maps/public/connected_components/layer_addpanel/layer_wizard_select.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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 _ from 'lodash';
+import React, { Component, Fragment } from 'react';
+import { EuiSpacer, EuiCard, EuiIcon } from '@elastic/eui';
+import { getLayerWizards, LayerWizard } from '../../layers/layer_wizard_registry';
+
+interface Props {
+  onSelect: (layerWizard: LayerWizard) => void;
+}
+
+interface State {
+  layerWizards: LayerWizard[];
+}
+
+export class LayerWizardSelect extends Component<Props, State> {
+  private _isMounted: boolean = false;
+
+  state = {
+    layerWizards: [],
+  };
+
+  componentDidMount() {
+    this._isMounted = true;
+    this._loadLayerWizards();
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  async _loadLayerWizards() {
+    const layerWizards = await getLayerWizards();
+    if (this._isMounted) {
+      this.setState({ layerWizards });
+    }
+  }
+
+  render() {
+    return this.state.layerWizards.map((layerWizard: LayerWizard) => {
+      const icon = layerWizard.icon ? <EuiIcon type={layerWizard.icon} size="l" /> : undefined;
+
+      const onClick = () => {
+        this.props.onSelect(layerWizard);
+      };
+
+      return (
+        <Fragment key={layerWizard.title}>
+          <EuiSpacer size="s" />
+          <EuiCard
+            className="mapLayerAddpanel__card"
+            title={layerWizard.title}
+            icon={icon}
+            onClick={onClick}
+            description={layerWizard.description}
+            layout="horizontal"
+            data-test-subj={_.camelCase(layerWizard.title)}
+          />
+        </Fragment>
+      );
+    });
+  }
+}

x-pack/plugins/maps/public/connected_components/layer_addpanel/view.js

@@ -5,7 +5,7 @@
  */
 
 import React, { Component, Fragment } from 'react';
-import { SourceSelect } from './source_select/source_select';
+import { LayerWizardSelect } from './layer_wizard_select';
 import { FlyoutFooter } from './flyout_footer';
 import { ImportEditor } from './import_editor';
 import { EuiButtonEmpty, EuiPanel, EuiTitle, EuiFlyoutHeader, EuiSpacer } from '@elastic/eui';
@@ -80,8 +80,8 @@ export class AddLayerPanel extends Component {
     this.props.removeTransientLayer();
   };
 
-  _onSourceSelectionChange = ({ layerWizard, isIndexingSource }) => {
-    this.setState({ layerWizard, importView: isIndexingSource });
+  _onWizardSelect = layerWizard => {
+    this.setState({ layerWizard, importView: !!layerWizard.isIndexingSource });
   };
 
   _layerAddHandler = () => {
@@ -100,7 +100,7 @@ export class AddLayerPanel extends Component {
 
   _renderPanelBody() {
     if (!this.state.layerWizard) {
-      return <SourceSelect updateSourceSelection={this._onSourceSelectionChange} />;
+      return <LayerWizardSelect onSelect={this._onWizardSelect} />;
     }
 
     const backButton = this.props.isIndexingTriggered ? null : (

x-pack/plugins/maps/public/layers/layer_wizard_registry.ts

@@ -20,7 +20,7 @@ export type RenderWizardArguments = {
 };
 
 export type LayerWizard = {
-  checkVisibility?: () => boolean;
+  checkVisibility?: () => Promise<boolean>;
   description: string;
   icon: string;
   isIndexingSource?: boolean;
@@ -31,11 +31,23 @@ export type LayerWizard = {
 const registry: LayerWizard[] = [];
 
 export function registerLayerWizard(layerWizard: LayerWizard) {
-  registry.push(layerWizard);
+  registry.push({
+    checkVisibility: async () => {
+      return true;
+    },
+    ...layerWizard,
+  });
 }
 
-export function getLayerWizards(): LayerWizard[] {
-  return registry.filter(layerWizard => {
-    return layerWizard.checkVisibility ? layerWizard.checkVisibility() : true;
+export async function getLayerWizards(): Promise<LayerWizard[]> {
+  const promises = registry.map(async layerWizard => {
+    return {
+      ...layerWizard,
+      // @ts-ignore
+      isVisible: await layerWizard.checkVisibility(),
+    };
+  });
+  return (await Promise.all(promises)).filter(({ isVisible }) => {
+    return isVisible;
   });
 }

x-pack/plugins/maps/public/layers/load_layer_wizards.ts

@@ -25,17 +25,19 @@ import { tmsLayerWizardConfig } from './sources/xyz_tms_source';
 // @ts-ignore
 import { wmsLayerWizardConfig } from './sources/wms_source';
 import { mvtVectorSourceWizardConfig } from './sources/mvt_single_layer_vector_source';
-// @ts-ignore
+import { ObservabilityLayerWizardConfig } from './solution_layers/observability';
 import { getInjectedVarFunc } from '../kibana_services';
 
-// Registration order determines display order
 let registered = false;
 export function registerLayerWizards() {
   if (registered) {
     return;
   }
+
+  // Registration order determines display order
   // @ts-ignore
   registerLayerWizard(uploadLayerWizardConfig);
+  registerLayerWizard(ObservabilityLayerWizardConfig);
   // @ts-ignore
   registerLayerWizard(esDocumentsLayerWizardConfig);
   // @ts-ignore