[Maps] Add support for geohex_grid aggregation

x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/render_as_select/i18n_constants.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const CLUSTER_LABEL = i18n.translate('xpack.maps.source.esGeoGrid.pointsDropdownOption', {
+  defaultMessage: 'Clusters',
+});
+
+export const GRID_LABEL = i18n.translate('xpack.maps.source.esGeoGrid.gridRectangleDropdownOption', {
+  defaultMessage: 'Grids',
+});
+
+export const HEX_LABEL = i18n.translate('xpack.maps.source.esGeoGrid.hexDropdownOption', {
+  defaultMessage: 'Hexbins',
+});

x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/render_as_select/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { RenderAsSelect } from './render_as_select';

x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/render_as_select.tsx → x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/render_as_select/render_as_select.tsx

@@ -8,9 +8,11 @@
 import React from 'react';
 import { EuiFormRow, EuiButtonGroup } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { ES_GEO_FIELD_TYPE, RENDER_AS } from '../../../../common/constants';
-import { getIsCloud } from '../../../kibana_services';
-import { getIsGoldPlus } from '../../../licensed_features';
+import { ES_GEO_FIELD_TYPE, RENDER_AS } from '../../../../../common/constants';
+import { getIsCloud } from '../../../../kibana_services';
+import { getIsGoldPlus } from '../../../../licensed_features';
+import { CLUSTER_LABEL, GRID_LABEL, HEX_LABEL } from './i18n_constants';
+import { ShowAsLabel } from './show_as_label';
 
 interface Props {
   geoFieldType?: ES_GEO_FIELD_TYPE;
@@ -41,23 +43,17 @@ export function RenderAsSelect(props: Props) {
   const options = [
     {
       id: RENDER_AS.POINT,
-      label: i18n.translate('xpack.maps.source.esGeoGrid.pointsDropdownOption', {
-        defaultMessage: 'clusters',
-      }),
+      label: CLUSTER_LABEL,
       value: RENDER_AS.POINT,
     },
     {
       id: RENDER_AS.GRID,
-      label: i18n.translate('xpack.maps.source.esGeoGrid.gridRectangleDropdownOption', {
-        defaultMessage: 'grids',
-      }),
+      label: GRID_LABEL,
       value: RENDER_AS.GRID,
     },
     {
       id: RENDER_AS.HEX,
-      label: i18n.translate('xpack.maps.source.esGeoGrid.hexDropdownOption', {
-        defaultMessage: 'hexbins',
-      }),
+      label: HEX_LABEL,
       value: RENDER_AS.HEX,
       isDisabled: isHexDisabled,
     },
@@ -72,12 +68,11 @@ export function RenderAsSelect(props: Props) {
 
   const currentOption = options.find((option) => option.value === props.renderAs) || options[0];
 
+  const selectLabel = <ShowAsLabel isHexDisabled={isHexDisabled} hexDisabledReason={hexDisabledReason}/>;
+
   return (
     <EuiFormRow
-      label={i18n.translate('xpack.maps.source.esGeoGrid.showAsLabel', {
-        defaultMessage: 'Show as',
-      })}
-      helpText={hexDisabledReason}
+      label={selectLabel}
       display={props.isColumnCompressed ? 'columnCompressed' : 'row'}
     >
       <EuiButtonGroup

x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/render_as_select/show_as_label.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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 React from 'react';
+import { EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { CLUSTER_LABEL, GRID_LABEL, HEX_LABEL } from './i18n_constants';
+
+interface Props {
+  isHexDisabled: boolean;
+  hexDisabledReason: string;
+}
+
+export function ShowAsLabel(props: Props) {
+  return (
+    <EuiToolTip
+      content={
+        <EuiText>
+          <dl>
+            <dt>{CLUSTER_LABEL}</dt>
+            <dd>
+              <p>
+                <FormattedMessage
+                  id="xpack.maps.source.esGeoGrid.clusterDescription"
+                  defaultMessage="Uses geotile grid aggregation to group your documents into grids. The cluster location is the weighted centroid for all documents in the gridded cell."
+                />
+              </p>
+            </dd>
+
+            <dt>{GRID_LABEL}</dt>
+            <dd>
+              <p>
+                <FormattedMessage
+                  id="xpack.maps.source.esGeoGrid.gridDescription"
+                  defaultMessage="Uses geotile grid aggregation to group your documents into grids. Displays the bounding box polygon for each gridded cell."
+                />
+              </p>
+            </dd>
+
+            <dt>{HEX_LABEL}</dt>
+            <dd>
+              <p>
+                <FormattedMessage
+                  id="xpack.maps.source.esGeoGrid.hexDescription"
+                  defaultMessage="Uses geohex grid aggregation to group your documents into H3 hexagon grids. Displays the hexagon polygon for each gridded cell."
+                />
+              </p>
+              {props.isHexDisabled ? <em>{props.hexDisabledReason}</em> : null}
+            </dd>
+          </dl>
+        </EuiText>
+      }
+    >
+      <span>
+        <FormattedMessage
+          id="xpack.maps.source.esGeoGrid.showAsLabel"
+          defaultMessage="Show as"
+        />
+        {' '}
+        <EuiIcon type="questionInCircle" color="subdued" />
+      </span>
+    </EuiToolTip>
+  );
+}