[Maps] Add shape drawing wizard- creates index only

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

@@ -6,6 +6,7 @@
  */
 
 export interface CreateDocSourceResp {
+  indexPatternId?: string;
   success: boolean;
   error?: Error;
 }

x-pack/plugins/maps/public/actions/layer_actions.ts

@@ -37,6 +37,7 @@ import {
   UPDATE_LAYER_PROP,
   UPDATE_LAYER_STYLE,
   UPDATE_SOURCE_PROP,
+  CLEAR_DRAWING_DATA,
 } from './map_action_constants';
 import { clearDataRequests, syncDataForLayerId, updateStyleMeta } from './data_request_actions';
 import { cleanTooltipStateForLayer } from './tooltip_actions';
@@ -548,3 +549,9 @@ export function setAreTilesLoaded(layerId: string, areTilesLoaded: boolean) {
     newValue: areTilesLoaded,
   };
 }
+
+export function clearDrawingData() {
+  return {
+    type: CLEAR_DRAWING_DATA,
+  };
+}

x-pack/plugins/maps/public/actions/map_action_constants.ts

@@ -37,10 +37,13 @@ export const ROLLBACK_TO_TRACKED_LAYER_STATE = 'ROLLBACK_TO_TRACKED_LAYER_STATE'
 export const REMOVE_TRACKED_LAYER_STATE = 'REMOVE_TRACKED_LAYER_STATE';
 export const SET_OPEN_TOOLTIPS = 'SET_OPEN_TOOLTIPS';
 export const UPDATE_DRAW_STATE = 'UPDATE_DRAW_STATE';
+export const UPDATE_EDIT_MODE = 'UPDATE_EDIT_MODE';
 export const SET_SCROLL_ZOOM = 'SET_SCROLL_ZOOM';
 export const SET_MAP_INIT_ERROR = 'SET_MAP_INIT_ERROR';
 export const SET_WAITING_FOR_READY_HIDDEN_LAYERS = 'SET_WAITING_FOR_READY_HIDDEN_LAYERS';
 export const SET_MAP_SETTINGS = 'SET_MAP_SETTINGS';
 export const ROLLBACK_MAP_SETTINGS = 'ROLLBACK_MAP_SETTINGS';
 export const TRACK_MAP_SETTINGS = 'TRACK_MAP_SETTINGS';
 export const UPDATE_MAP_SETTING = 'UPDATE_MAP_SETTING';
+export const SET_VECTOR_LAYER_INDEX_NAME = 'SET_VECTOR_LAYER_INDEX_NAME';
+export const CLEAR_DRAWING_DATA = 'CLEAR_DRAWING_DATA';

x-pack/plugins/maps/public/actions/map_actions.ts

@@ -10,7 +10,6 @@ import { AnyAction, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import turfBboxPolygon from '@turf/bbox-polygon';
 import turfBooleanContains from '@turf/boolean-contains';
-
 import { Filter, Query, TimeRange } from 'src/plugins/data/public';
 import { MapStoreState } from '../reducers/store';
 import {
@@ -43,7 +42,9 @@ import {
   TRACK_MAP_SETTINGS,
   TRIGGER_REFRESH_TIMER,
   UPDATE_DRAW_STATE,
+  UPDATE_EDIT_MODE,
   UPDATE_MAP_SETTING,
+  SET_VECTOR_LAYER_INDEX_NAME,
 } from './map_action_constants';
 import { autoFitToBounds, syncDataForAllLayers } from './data_request_actions';
 import { addLayer, addLayerWithoutDataSync } from './layer_actions';
@@ -323,3 +324,17 @@ export function updateDrawState(drawState: DrawState | null) {
     });
   };
 }
+
+export function updateEditMode(isActive: boolean) {
+  return {
+    type: UPDATE_EDIT_MODE,
+    isActive,
+  };
+}
+
+export function setVectorLayerIndexName(indexName: string) {
+  return {
+    type: SET_VECTOR_LAYER_INDEX_NAME,
+    indexName,
+  };
+}

x-pack/plugins/maps/public/classes/layers/icons/draw_layer_icon.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+
+export const DrawLayerIcon: FunctionComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="49"
+    height="25"
+    fill="none"
+    viewBox="0 0 49 25"
+    className="mapLayersWizardIcon"
+  >
+    <path
+      className="mapLayersWizardIcon__background"
+      d="M12.281 3l-6.625 7.625 1.657 8.938 35.218-.813v-13l-10.625-3.5-9.781 9.5L12.281 3z"
+    />
+    <path
+      className="mapLayersWizardIcon__highlight"
+      fillRule="evenodd"
+      d="M31.775 1.68l11.256 3.708v13.85l-36.133.834-1.777-9.593 7.114-8.189 9.875 8.778 9.665-9.388zm.262 1.14l-9.897 9.612-9.813-8.722-6.135 7.06 1.535 8.283 34.304-.792V6.111L32.037 2.82z"
+      clipRule="evenodd"
+    />
+    <circle cx="7.281" cy="19.5" r="2.5" className="mapLayersWizardIcon__highlight" />
+    <circle cx="5.656" cy="10.25" r="2.5" className="mapLayersWizardIcon__highlight" />
+    <circle cx="12.156" cy="3.625" r="2.5" className="mapLayersWizardIcon__highlight" />
+    <circle cx="22" cy="11.6" r="2.5" className="mapLayersWizardIcon__highlight" />
+    <circle cx="31.969" cy="2.5" r="2.5" className="mapLayersWizardIcon__highlight" />
+    <circle cx="42.344" cy="6.125" r="2.5" className="mapLayersWizardIcon__highlight" />
+    <circle cx="42.344" cy="19" r="2.5" className="mapLayersWizardIcon__highlight" />
+  </svg>
+);

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

@@ -30,6 +30,8 @@ import { mvtVectorSourceWizardConfig } from '../sources/mvt_single_layer_vector_
 import { ObservabilityLayerWizardConfig } from './solution_layers/observability';
 import { SecurityLayerWizardConfig } from './solution_layers/security';
 import { choroplethLayerWizardConfig } from './choropleth_layer_wizard';
+import { newVectorLayerWizardConfig } from './new_vector_layer_wizard/config';
+import { getMapAppConfig } from '../../kibana_services';
 
 let registered = false;
 export function registerLayerWizards() {
@@ -39,6 +41,9 @@ export function registerLayerWizards() {
 
   // Registration order determines display order
   registerLayerWizard(uploadLayerWizardConfig);
+  if (getMapAppConfig().enableDrawingFeature) {
+    registerLayerWizard(newVectorLayerWizardConfig);
+  }
   registerLayerWizard(esDocumentsLayerWizardConfig);
   // @ts-ignore
   registerLayerWizard(choroplethLayerWizardConfig);

x-pack/plugins/maps/public/classes/layers/new_vector_layer_wizard/config.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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';
+import React from 'react';
+import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
+import { NewVectorLayerEditor } from './index';
+import { DrawLayerIcon } from '../../layers/icons/draw_layer_icon';
+import { CREATE_DRAWN_FEATURES_INDEX_STEP_ID, ADD_DRAWN_FEATURES_TO_INDEX_STEP_ID } from './wizard';
+import { getFileUpload } from '../../../kibana_services';
+
+export const newVectorLayerWizardConfig: LayerWizard = {
+  categories: [],
+  description: i18n.translate('xpack.maps.newVectorLayerWizard.description', {
+    defaultMessage: 'Draw points & shapes and save in Elasticsearch',
+  }),
+  disabledReason: i18n.translate('xpack.maps.newVectorLayerWizard.disabledDesc', {
+    defaultMessage:
+      'Unable to draw vector shapes, you are missing the Kibana privilege "Index Pattern Management".',
+  }),
+  getIsDisabled: async () => {
+    const hasImportPermission = await getFileUpload().hasImportPermission({
+      checkCreateIndexPattern: true,
+      checkHasManagePipeline: false,
+    });
+    return !hasImportPermission;
+  },
+  icon: DrawLayerIcon,
+  prerequisiteSteps: [
+    {
+      id: CREATE_DRAWN_FEATURES_INDEX_STEP_ID,
+      label: i18n.translate('xpack.maps.newVectorLayerWizard.indexFeatures', {
+        defaultMessage: 'Index features',
+      }),
+    },
+    {
+      id: ADD_DRAWN_FEATURES_TO_INDEX_STEP_ID,
+      label: i18n.translate('xpack.maps.newVectorLayerWizard.indexingFeatures', {
+        defaultMessage: 'Indexing features',
+      }),
+    },
+  ],
+  renderWizard: (renderWizardArguments: RenderWizardArguments) => {
+    return <NewVectorLayerEditor {...renderWizardArguments} />;
+  },
+  title: i18n.translate('xpack.maps.newVectorLayerWizard.title', {
+    defaultMessage: 'Draw new vector layer',
+  }),
+};

x-pack/plugins/maps/public/classes/layers/new_vector_layer_wizard/index.ts

@@ -0,0 +1,51 @@
+/*
+ * 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 { ThunkDispatch } from 'redux-thunk';
+import { AnyAction } from 'redux';
+import { connect } from 'react-redux';
+import { MapStoreState } from '../../../reducers/store';
+import { NewVectorLayerEditor } from './wizard';
+import {
+  addLayer,
+  clearDrawingData,
+  setSelectedLayer,
+  setVectorLayerIndexName,
+  updateEditMode,
+  updateFlyout,
+} from '../../../actions';
+import { FLYOUT_STATE } from '../../../reducers/ui';
+import { LayerDescriptor } from '../../../../common/descriptor_types';
+import { getVectorLayerIndexName } from '../../../selectors/map_selectors';
+
+function mapStateToProps(state: MapStoreState) {
+  return {
+    indexName: getVectorLayerIndexName(state),
+  };
+}
+
+function mapDispatchToProps(dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) {
+  return {
+    setEditModeActive: () => dispatch(updateEditMode(true)),
+    setEditModeInActive: () => {
+      dispatch(updateEditMode(false));
+      dispatch(clearDrawingData());
+    },
+    setIndexName: (indexName: string) => dispatch(setVectorLayerIndexName(indexName)),
+    clearDrawingData: () => {
+      dispatch(clearDrawingData());
+    },
+    addNewLayer: async (layerDescriptor: LayerDescriptor) => {
+      await dispatch(addLayer(layerDescriptor));
+      await dispatch(setSelectedLayer(layerDescriptor.id));
+      dispatch(updateFlyout(FLYOUT_STATE.LAYER_PANEL));
+    },
+  };
+}
+
+const connected = connect(mapStateToProps, mapDispatchToProps)(NewVectorLayerEditor);
+export { connected as NewVectorLayerEditor };

x-pack/plugins/maps/public/classes/layers/new_vector_layer_wizard/utils/http_service.js

@@ -0,0 +1,52 @@
+/*
+ * 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';
+import { getHttp } from '../../../../kibana_services';
+
+export async function http(options) {
+  if (!(options && options.url)) {
+    throw i18n.translate('xpack.maps.layers.newVectorLayerWizard.httpService.noUrl', {
+      defaultMessage: 'No URL provided',
+    });
+  }
+  const url = options.url || '';
+  const headers = {
+    'Content-Type': 'application/json',
+    ...options.headers,
+  };
+
+  const allHeaders = options.headers === undefined ? headers : { ...options.headers, ...headers };
+  const body = options.data === undefined ? null : JSON.stringify(options.data);
+
+  const payload = {
+    method: options.method || 'GET',
+    headers: allHeaders,
+    credentials: 'same-origin',
+    query: options.query,
+  };
+
+  if (body !== null) {
+    payload.body = body;
+  }
+  return await doFetch(url, payload);
+}
+
+async function doFetch(url, payload) {
+  try {
+    return await getHttp().fetch(url, payload);
+  } catch (err) {
+    return {
+      failures: [
+        i18n.translate('xpack.maps.layers.newVectorLayerWizard.httpService.fetchError', {
+          defaultMessage: 'Error performing fetch: {error}',
+          values: { error: err.message },
+        }),
+      ],
+    };
+  }
+}

x-pack/plugins/maps/public/classes/layers/new_vector_layer_wizard/utils/indexing_service.js

@@ -0,0 +1,72 @@
+/*
+ * 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 { http as httpService } from './http_service';
+import { getSavedObjectsClient } from '../../../../kibana_services';
+
+export const getExistingIndexNames = async () => {
+  const indexes = await httpService({
+    url: `/api/index_management/indices`,
+    method: 'GET',
+  });
+  return indexes ? indexes.map(({ name }) => name) : [];
+};
+
+export const createNewIndexAndPattern = async (indexName) => {
+  return await httpService({
+    url: `/api/maps/docSource`,
+    method: 'POST',
+    data: {
+      index: indexName,
+      // Initially set to static mappings
+      mappings: {
+        properties: {
+          coordinates: {
+            type: 'geo_shape',
+          },
+        },
+      },
+    },
+  });
+};
+
+export const addFeatureToIndex = async (indexName, geometry) => {
+  return await httpService({
+    url: `/api/maps/feature`,
+    method: 'POST',
+    data: {
+      index: indexName,
+      data: {
+        coordinates: geometry,
+      },
+    },
+  });
+};
+
+export const getExistingIndexPatternNames = async () => {
+  const indexPatterns = await getSavedObjectsClient()
+    .find({
+      type: 'index-pattern',
+      fields: ['id', 'title', 'type', 'fields'],
+      perPage: 10000,
+    })
+    .then(({ savedObjects }) => savedObjects.map((savedObject) => savedObject.get('title')));
+  return indexPatterns ? indexPatterns.map(({ name }) => name) : [];
+};
+
+export function checkIndexPatternValid(name) {
+  const byteLength = encodeURI(name).split(/%(?:u[0-9A-F]{2})?[0-9A-F]{2}|./).length - 1;
+  const reg = new RegExp('[\\\\/*?"<>|\\s,#]+');
+  const indexPatternInvalid =
+    byteLength > 255 || // name can't be greater than 255 bytes
+    name !== name.toLowerCase() || // name should be lowercase
+    name === '.' ||
+    name === '..' || // name can't be . or ..
+    name.match(/^[-_+]/) !== null || // name can't start with these chars
+    name.match(reg) !== null; // name can't contain these chars
+  return !indexPatternInvalid;
+}