diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js index fd4e77e463bf1..2abeb920f74a8 100644 --- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js +++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js @@ -78,6 +78,13 @@ uiRoutes } return savedVisualizations.get($route.current.params) + .then(savedVis => { + if (savedVis.vis.type.setup) { + return savedVis.vis.type.setup(savedVis) + .catch(() => savedVis); + } + return savedVis; + }) .catch(redirectWhenMissing({ '*': '/visualize' })); @@ -97,6 +104,13 @@ uiRoutes savedVis.id); return savedVis; }) + .then(savedVis => { + if (savedVis.vis.type.setup) { + return savedVis.vis.type.setup(savedVis) + .catch(() => savedVis); + } + return savedVis; + }) .catch(redirectWhenMissing({ 'visualization': '/visualize', 'search': '/management/kibana/objects/savedVisualizations/' + $route.current.params.id, diff --git a/src/legacy/core_plugins/region_map/public/components/region_map_options.tsx b/src/legacy/core_plugins/region_map/public/components/region_map_options.tsx index c23e8386e5062..56742eaec5203 100644 --- a/src/legacy/core_plugins/region_map/public/components/region_map_options.tsx +++ b/src/legacy/core_plugins/region_map/public/components/region_map_options.tsx @@ -17,12 +17,11 @@ * under the License. */ -import React, { useEffect, useState, useCallback, useMemo } from 'react'; +import React, { useCallback, useMemo } from 'react'; import { EuiIcon, EuiLink, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { toastNotifications } from 'ui/notify'; import { FileLayerField, VectorLayer, ServiceSettings } from 'ui/vis/map/service_settings'; import { VisOptionsProps } from 'ui/vis/editors/default'; import { @@ -30,11 +29,8 @@ import { SelectOption, SwitchOption, } from '../../../kbn_vislib_vis_types/public/components'; -import { ORIGIN } from '../../../tile_map/common/origin'; import { WmsOptions } from '../../../tile_map/public/components/wms_options'; -import { mapToLayerWithId } from '../util'; import { RegionMapVisParams } from '../types'; -import { RegionMapsConfig } from '../plugin'; const mapLayerForOption = ({ layerId, name }: VectorLayer) => ({ text: name, @@ -48,22 +44,18 @@ const mapFieldForOption = ({ description, name }: FileLayerField) => ({ export type RegionMapOptionsProps = { serviceSettings: ServiceSettings; - includeElasticMapsService: RegionMapsConfig['includeElasticMapsService']; } & VisOptionsProps; function RegionMapOptions(props: RegionMapOptionsProps) { - const { includeElasticMapsService, serviceSettings, stateParams, vis, setValue } = props; - const [vectorLayers, setVectorLayers] = useState( - vis.type.editorConfig.collections.vectorLayers - ); - const [vectorLayerOptions, setVectorLayerOptions] = useState(vectorLayers.map(mapLayerForOption)); - const currentLayerId = stateParams.selectedLayer && stateParams.selectedLayer.layerId; + const { serviceSettings, stateParams, vis, setValue } = props; + const { vectorLayers } = vis.type.editorConfig.collections; + const vectorLayerOptions = useMemo(() => vectorLayers.map(mapLayerForOption), [vectorLayers]); const fieldOptions = useMemo( () => ((stateParams.selectedLayer && stateParams.selectedLayer.fields) || []).map( mapFieldForOption ), - [currentLayerId] + [stateParams.selectedLayer] ); const setEmsHotLink = useCallback( @@ -71,7 +63,7 @@ function RegionMapOptions(props: RegionMapOptionsProps) { const emsHotLink = await serviceSettings.getEMSHotLink(layer); setValue('emsHotLink', emsHotLink); }, - [setValue] + [setValue, serviceSettings] ); const setLayer = useCallback( @@ -84,7 +76,7 @@ function RegionMapOptions(props: RegionMapOptionsProps) { setEmsHotLink(newLayer); } }, - [vectorLayers, setValue] + [vectorLayers, setEmsHotLink, setValue] ); const setField = useCallback( @@ -93,53 +85,9 @@ function RegionMapOptions(props: RegionMapOptionsProps) { setValue(paramName, stateParams.selectedLayer.fields.find(f => f.name === value)); } }, - [currentLayerId, setValue] + [setValue, stateParams.selectedLayer] ); - useEffect(() => { - async function setDefaultValues() { - try { - const layers = await serviceSettings.getFileLayers(); - const newLayers = layers - .map(mapToLayerWithId.bind(null, ORIGIN.EMS)) - .filter( - layer => !vectorLayers.some(vectorLayer => vectorLayer.layerId === layer.layerId) - ); - - // backfill v1 manifest for now - newLayers.forEach(layer => { - if (layer.format === 'geojson') { - layer.format = { - type: 'geojson', - }; - } - }); - - const newVectorLayers = [...vectorLayers, ...newLayers]; - - setVectorLayers(newVectorLayers); - setVectorLayerOptions(newVectorLayers.map(mapLayerForOption)); - - const [newLayer] = newVectorLayers; - - if (newLayer && !stateParams.selectedLayer) { - setValue('selectedLayer', newLayer); - setValue('selectedJoinField', newLayer.fields[0]); - - if (newLayer.isEMS) { - setEmsHotLink(newLayer); - } - } - } catch (error) { - toastNotifications.addWarning(error.message); - } - } - - if (includeElasticMapsService) { - setDefaultValues(); - } - }, []); - return ( <> diff --git a/src/legacy/core_plugins/region_map/public/region_map_type.js b/src/legacy/core_plugins/region_map/public/region_map_type.js index 9b28aa96eccbc..b25cc36372257 100644 --- a/src/legacy/core_plugins/region_map/public/region_map_type.js +++ b/src/legacy/core_plugins/region_map/public/region_map_type.js @@ -33,9 +33,6 @@ import { ORIGIN } from '../../tile_map/common/origin'; export function createRegionMapTypeDefinition(dependencies) { const { uiSettings, regionmapsConfig, serviceSettings } = dependencies; const visualization = createRegionMapVisualization(dependencies); - const vectorLayers = regionmapsConfig.layers.map(mapToLayerWithId.bind(null, ORIGIN.KIBANA_YML)); - const selectedLayer = vectorLayers[0]; - const selectedJoinField = selectedLayer ? selectedLayer.fields[0] : null; return visFactory.createBaseVisualization({ name: 'region_map', @@ -52,8 +49,6 @@ provided base maps, or add your own. Darker colors represent higher values.', addTooltip: true, colorSchema: 'Yellow to Red', emsHotLink: '', - selectedLayer, - selectedJoinField, isDisplayWarning: true, wms: uiSettings.get('visualization:tileMap:WMSdefaults'), mapZoom: 2, @@ -69,12 +64,10 @@ provided base maps, or add your own. Darker colors represent higher values.', - ), + />), collections: { colorSchemas, - vectorLayers, + vectorLayers: [], tmsLayers: [], }, schemas: new Schemas([ @@ -113,5 +106,54 @@ provided base maps, or add your own. Darker colors represent higher values.', }, ]), }, + setup: async (savedVis) => { + const vis = savedVis.vis; + + const tmsLayers = await serviceSettings.getTMSServices(); + vis.type.editorConfig.collections.tmsLayers = tmsLayers; + if (!vis.params.wms.selectedTmsLayer && tmsLayers.length) { + vis.params.wms.selectedTmsLayer = tmsLayers[0]; + } + + const vectorLayers = regionmapsConfig.layers.map( + mapToLayerWithId.bind(null, ORIGIN.KIBANA_YML) + ); + let selectedLayer = vectorLayers[0]; + let selectedJoinField = selectedLayer ? selectedLayer.fields[0] : null; + if (regionmapsConfig.includeElasticMapsService) { + const layers = await serviceSettings.getFileLayers(); + const newLayers = layers + .map(mapToLayerWithId.bind(null, ORIGIN.EMS)) + .filter( + (layer) => + !vectorLayers.some(vectorLayer => vectorLayer.layerId === layer.layerId) + ); + + // backfill v1 manifest for now + newLayers.forEach((layer) => { + if (layer.format === 'geojson') { + layer.format = { + type: 'geojson', + }; + } + }); + + vis.type.editorConfig.collections.vectorLayers = [...vectorLayers, ...newLayers]; + + [selectedLayer] = vis.type.editorConfig.collections.vectorLayers; + selectedJoinField = selectedLayer ? selectedLayer.fields[0] : null; + + if (selectedLayer && !vis.params.selectedLayer && selectedLayer.isEMS) { + vis.params.emsHotLink = await serviceSettings.getEMSHotLink(selectedLayer); + } + } + + if (!vis.params.selectedLayer) { + vis.params.selectedLayer = selectedLayer; + vis.params.selectedJoinField = selectedJoinField; + } + + return savedVis; + }, }); } diff --git a/src/legacy/core_plugins/tile_map/public/components/tile_map_options.tsx b/src/legacy/core_plugins/tile_map/public/components/tile_map_options.tsx index 096266502417d..a3ebda8b3df0c 100644 --- a/src/legacy/core_plugins/tile_map/public/components/tile_map_options.tsx +++ b/src/legacy/core_plugins/tile_map/public/components/tile_map_options.tsx @@ -21,7 +21,6 @@ import React, { useEffect } from 'react'; import { EuiPanel, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { ServiceSettings } from 'ui/vis/map/service_settings'; import { VisOptionsProps } from 'ui/vis/editors/default'; import { BasicOptions, @@ -33,9 +32,7 @@ import { WmsOptions } from './wms_options'; import { TileMapVisParams } from '../types'; import { MapTypes } from '../map_types'; -export type TileMapOptionsProps = { serviceSettings: ServiceSettings } & VisOptionsProps< - TileMapVisParams ->; +export type TileMapOptionsProps = VisOptionsProps; function TileMapOptions(props: TileMapOptionsProps) { const { stateParams, setValue, vis } = props; diff --git a/src/legacy/core_plugins/tile_map/public/components/wms_options.tsx b/src/legacy/core_plugins/tile_map/public/components/wms_options.tsx index 42cc2776fcae4..ef6b2eaea1e52 100644 --- a/src/legacy/core_plugins/tile_map/public/components/wms_options.tsx +++ b/src/legacy/core_plugins/tile_map/public/components/wms_options.tsx @@ -17,12 +17,11 @@ * under the License. */ -import React, { useEffect, useState } from 'react'; +import React, { useMemo } from 'react'; import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { toastNotifications } from 'ui/notify'; import { TmsLayer } from 'ui/vis/map/service_settings'; import { SelectOption, SwitchOption } from '../../../kbn_vislib_vis_types/public/components'; import { RegionMapOptionsProps } from '../../../region_map/public/components/region_map_options'; @@ -32,18 +31,10 @@ import { TileMapVisParams } from '../types'; const mapLayerForOption = ({ id }: TmsLayer) => ({ text: id, value: id }); -function WmsOptions({ - serviceSettings, - stateParams, - setValue, - vis, -}: TileMapOptionsProps | RegionMapOptionsProps) { +function WmsOptions({ stateParams, setValue, vis }: TileMapOptionsProps | RegionMapOptionsProps) { const { wms } = stateParams; const { tmsLayers } = vis.type.editorConfig.collections; - const [tmsLayerOptions, setTmsLayersOptions] = useState>( - tmsLayers.map(mapLayerForOption) - ); - const [layers, setLayers] = useState([]); + const tmsLayerOptions = useMemo(() => tmsLayers.map(mapLayerForOption), [tmsLayers]); const setWmsOption = ( paramName: T, @@ -55,31 +46,12 @@ function WmsOptions({ }); const selectTmsLayer = (id: string) => { - const layer = layers.find(l => l.id === id); + const layer = tmsLayers.find((l: TmsLayer) => l.id === id); if (layer) { setWmsOption('selectedTmsLayer', layer); } }; - useEffect(() => { - serviceSettings - .getTMSServices() - .then(services => { - const newBaseLayers: TmsLayer[] = [ - ...tmsLayers, - ...services.filter(service => !tmsLayers.some(({ id }: TmsLayer) => service.id === id)), - ]; - - setLayers(newBaseLayers); - setTmsLayersOptions(newBaseLayers.map(mapLayerForOption)); - - if (!wms.selectedTmsLayer && newBaseLayers.length) { - setWmsOption('selectedTmsLayer', newBaseLayers[0]); - } - }) - .catch((error: Error) => toastNotifications.addWarning(error.message)); - }, []); - return ( diff --git a/src/legacy/core_plugins/tile_map/public/tile_map_type.js b/src/legacy/core_plugins/tile_map/public/tile_map_type.js index d96d8ad9be786..2b5bb0c576fd1 100644 --- a/src/legacy/core_plugins/tile_map/public/tile_map_type.js +++ b/src/legacy/core_plugins/tile_map/public/tile_map_type.js @@ -119,7 +119,7 @@ export function createTileMapTypeDefinition(dependencies) { ], tmsLayers: [], }, - optionsTemplate: props => , + optionsTemplate: (props) => , schemas: new Schemas([ { group: 'metrics', @@ -144,5 +144,21 @@ export function createTileMapTypeDefinition(dependencies) { }, ]), }, + setup: async (savedVis) => { + const vis = savedVis.vis; + let tmsLayers; + + try { + tmsLayers = await serviceSettings.getTMSServices(); + } catch (e) { + return savedVis; + } + + vis.type.editorConfig.collections.tmsLayers = tmsLayers; + if (!vis.params.wms.selectedTmsLayer && tmsLayers.length) { + vis.params.wms.selectedTmsLayer = tmsLayers[0]; + } + return savedVis; + }, }); }