[Maps] add saved objects for all sample data sets (#28797) (#30033)

* [Maps] add saved objects for all sample data sets

* add functional tests that compare sample data maps to baseline images

* add check for layer loading in functional tests

* try something out in CI

* try map without EMS regions

* add weblogs test but hide region layer

* skip tests with EMS vector layers

* gis-map to map and ES_GEOHASH_GRID to ES_GEO_GRID

* add resolution property to ES_GEO_GRID source descriptor

* move alphaValue from style descriptor to layer descriptor and rename to alpha

* terms join label change 'group by' to 'of'

* ensure sample data sets work with no internet access

* get functional tests working with updated full screen snapshots

* delete gis folder left overs

* give time for visibility to toggle to fire

* make web logs screen comparision more forgiving

* wait for layers to load on full screen

test/functional/apps/dashboard/_dashboard_snapshots.js

@@ -54,11 +54,11 @@ export default function ({ getService, getPageObjects, updateBaselines }) {
       await dashboardPanelActions.clickExpandPanelToggle();
 
       await PageObjects.dashboard.waitForRenderComplete();
-      const percentSimilar = await screenshot.compareAgainstBaseline('tsvb_dashboard', updateBaselines);
+      const percentDifference = await screenshot.compareAgainstBaseline('tsvb_dashboard', updateBaselines);
 
       await PageObjects.dashboard.clickExitFullScreenLogoButton();
 
-      expect(percentSimilar).to.be.lessThan(0.05);
+      expect(percentDifference).to.be.lessThan(0.05);
     });
 
     it('compare area chart snapshot', async () => {
@@ -75,12 +75,12 @@ export default function ({ getService, getPageObjects, updateBaselines }) {
       await dashboardPanelActions.clickExpandPanelToggle();
 
       await PageObjects.dashboard.waitForRenderComplete();
-      const percentSimilar = await screenshot.compareAgainstBaseline('area_chart', updateBaselines);
+      const percentDifference = await screenshot.compareAgainstBaseline('area_chart', updateBaselines);
 
       await PageObjects.dashboard.clickExitFullScreenLogoButton();
 
       // Testing some OS/browser differences were shown to cause .009 percent difference.
-      expect(percentSimilar).to.be.lessThan(0.05);
+      expect(percentDifference).to.be.lessThan(0.05);
     });
   });
 }

test/functional/page_objects/time_picker.js

@@ -17,14 +17,54 @@
  * under the License.
  */
 
-export function TimePickerPageProvider({ getService }) {
+export function TimePickerPageProvider({ getService, getPageObjects }) {
   const log = getService('log');
   const retry = getService('retry');
   const find = getService('find');
   const testSubjects = getService('testSubjects');
+  const PageObjects = getPageObjects(['header']);
 
   class TimePickerPage {
 
+    formatDateToAbsoluteTimeString(date) {
+      // toISOString returns dates in format 'YYYY-MM-DDTHH:mm:ss.sssZ'
+      // Need to replace T with space and remove timezone
+      const dateString = date.toISOString().replace('T', ' ');
+      return dateString.substring(0, 23);
+    }
+
+    /**
+     * @param {String} fromTime YYYY-MM-DD HH:mm:ss.SSS
+     * @param {String} fromTime YYYY-MM-DD HH:mm:ss.SSS
+     */
+    async setAbsoluteRange(fromTime, toTime) {
+      log.debug(`Setting absolute range to ${fromTime} to ${toTime}`);
+      await this.showStartEndTimes();
+
+      // set to time
+      await testSubjects.click('superDatePickerendDatePopoverButton');
+      await testSubjects.click('superDatePickerAbsoluteTab');
+      await testSubjects.setValue('superDatePickerAbsoluteDateInput', toTime);
+
+      // set from time
+      await testSubjects.click('superDatePickerstartDatePopoverButton');
+      await testSubjects.click('superDatePickerAbsoluteTab');
+      await testSubjects.setValue('superDatePickerAbsoluteDateInput', fromTime);
+
+      const superDatePickerApplyButtonExists = await testSubjects.exists('superDatePickerApplyTimeButton');
+      if (superDatePickerApplyButtonExists) {
+        // Timepicker is in top nav
+        // Click super date picker apply button to apply time range
+        await testSubjects.click('superDatePickerApplyTimeButton');
+      } else {
+        // Timepicker is embedded in query bar
+        // click query bar submit button to apply time range
+        await testSubjects.click('querySubmitButton');
+      }
+
+      await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
+    }
+
     async isQuickSelectMenuOpen() {
       return await testSubjects.exists('superDatePickerQuickMenu');
     }

test/functional/services/lib/compare_pngs.js

@@ -45,7 +45,7 @@ export async function comparePngs(sessionPath, baselinePath, diffPath, sessionDi
   // some the diffCount to be lower than our own threshold value.
   const THRESHOLD = .1;
   const { image, percent } = Jimp.diff(session, baseline, THRESHOLD);
-  log.debug(`percentSimilar: ${percent}`);
+  log.debug(`percent different: ${percent}`);
   if (percent > 0) {
     image.write(diffPath);
 

x-pack/plugins/maps/index.js

@@ -6,6 +6,8 @@
 
 import { resolve } from 'path';
 import { initRoutes } from './server/routes';
+import ecommerceSavedObjects from './server/sample_data/ecommerce_saved_objects.json';
+import fligthsSavedObjects from './server/sample_data/flights_saved_objects.json';
 import webLogsSavedObjects from './server/sample_data/web_logs_saved_objects.json';
 import mappings from './mappings.json';
 import { checkLicense } from './check_license';
@@ -67,6 +69,8 @@ export function maps(kibana) {
           .feature(thisPlugin.id)
           .registerLicenseCheckResultsGenerator(checkLicense);
 
+        server.addSavedObjectsToSampleDataset('ecommerce', ecommerceSavedObjects);
+        server.addSavedObjectsToSampleDataset('flights', fligthsSavedObjects);
         server.addSavedObjectsToSampleDataset('logs', webLogsSavedObjects);
         server.injectUiAppVars('maps', async () => {
           return await server.getInjectedUiAppVars('kibana');

x-pack/plugins/maps/public/angular/map_controller.js

@@ -244,9 +244,9 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
   timefilter.disableAutoRefreshSelector();
   $scope.showDatePicker = true; // used by query-bar directive to enable timepikcer in query bar
   $scope.topNavMenu = [{
-    key: 'fullScreen',
-    description: 'Full screen',
-    testId: 'fullScreenMode',
+    key: 'full screen',
+    description: 'full screen',
+    testId: 'mapsFullScreenMode',
     run() {
       getStore().dispatch(enableFullScreen());
     }

x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/view.js

@@ -56,6 +56,7 @@ export class TOCEntry extends React.Component {
         toggleVisible={() => {
           toggleVisible(layer.getId());
         }}
+        displayName={this.state.displayName}
       />
     );
     let tocDetails = layer.getTOCDetails();

x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/view.js

@@ -56,7 +56,7 @@ export class LayerTOC extends React.Component {
   render() {
     const layerEntries = this._renderLayers();
     return (
-      <div ref={node => this._domContainer = node}>
+      <div ref={node => this._domContainer = node} data-test-subj="mapLayerTOC">
         {layerEntries}
       </div>
     );

x-pack/plugins/maps/public/shared/components/layer_toc_actions.js

@@ -16,7 +16,6 @@ import {
   EuiIconTip
 } from '@elastic/eui';
 
-
 function flattenPanelTree(tree, array = []) {
   array.push(tree);
 
@@ -32,8 +31,14 @@ function flattenPanelTree(tree, array = []) {
   return array;
 }
 
-export class LayerTocActions extends Component {
+function cleanDisplayName(displayName) {
+  if (!displayName) {
+    return displayName;
+  }
+  return displayName.split(' ').join('');
+}
 
+export class LayerTocActions extends Component {
 
   state = {
     isPopoverOpen: false
@@ -59,6 +64,7 @@ export class LayerTocActions extends Component {
         flush="left"
         color="text"
         onClick={this._onClick}
+        data-test-subj={`layerTocActionsPanelToggleButton${cleanDisplayName(this.props.displayName)}`}
       >
         {icon}
       </EuiButtonEmpty>);
@@ -130,6 +136,7 @@ export class LayerTocActions extends Component {
         {
           name: this.props.layer.isVisible() ? 'Hide layer' : 'Show layer',
           icon: visibilityToggle,
+          'data-test-subj': 'layerVisibilityToggleButton',
           onClick: () => {
             this._closePopover();
             this.props.toggleVisible();
@@ -155,6 +162,7 @@ export class LayerTocActions extends Component {
         <EuiContextMenu
           initialPanelId={0}
           panels={this._getPanels()}
+          data-test-subj={`layerTocActionsPanel${cleanDisplayName(this.props.displayName)}`}
         />
       </EuiPopover>);
   }

x-pack/plugins/maps/public/shared/layers/sources/vector_source.js

@@ -16,8 +16,13 @@ export class AbstractVectorSource extends AbstractSource {
   static async getGeoJson({ format, featureCollectionPath, fetchUrl }) {
     let fetchedJson;
     try {
-      const vectorFetch = await fetch(fetchUrl);
-      fetchedJson = await vectorFetch.json();
+      // TODO proxy map.regionmap url requests through kibana server and then use kfetch
+      // Can not use kfetch because fetchUrl may point to external URL. (map.regionmap)
+      const response = await fetch(fetchUrl);
+      if (!response.ok) {
+        throw new Error('Request failed');
+      }
+      fetchedJson = await response.json();
     } catch (e) {
       throw new Error(`Unable to fetch vector shapes from url: ${fetchUrl}`);
     }

x-pack/plugins/maps/server/sample_data/flights_saved_objects.json

@@ -0,0 +1,16 @@
+[
+  {
+    "id":"5dd88580-1906-11e9-919b-ffe5949a18d2",
+    "type":"map",
+    "updated_at":"2019-01-15T20:44:54.767Z",
+    "version":2,
+    "attributes":{
+      "title":"[Flights] Origin and Destination Flight Time",
+      "description":"",
+      "mapStateJSON":"{\"zoom\":3.14,\"center\":{\"lon\":-89.58746,\"lat\":38.38637},\"timeFilters\":{\"from\":\"now-7d\",\"to\":\"now\"},\"refreshConfig\":{\"isPaused\":true,\"interval\":0},\"query\":{\"query\":\"\",\"language\":\"kuery\"}}",
+      "layerListJSON":"[{\"id\":\"0hmz5\",\"alpha\":1,\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{}},\"type\":\"TILE\",\"minZoom\":0,\"maxZoom\":24},{\"id\":\"jzppx\",\"label\":\"Flights\",\"minZoom\":9,\"maxZoom\":24,\"alpha\":1,\"sourceDescriptor\":{\"id\":\"040e0f25-9687-4569-a1e0-76f1a108da56\",\"type\":\"ES_SEARCH\",\"indexPatternId\":\"d3d7af60-4c81-11e8-b3d7-01146121b73d\",\"geoField\":\"DestLocation\",\"limit\":2048,\"filterByMapBounds\":true,\"tooltipProperties\":[\"Carrier\",\"DestCityName\",\"DestCountry\",\"OriginCityName\",\"OriginCountry\",\"FlightDelayMin\",\"FlightTimeMin\",\"DistanceMiles\",\"AvgTicketPrice\",\"FlightDelay\"]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"FlightTimeMin\",\"name\":\"FlightTimeMin\",\"origin\":\"source\"},\"color\":\"Greens\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"DistanceMiles\",\"name\":\"DistanceMiles\",\"origin\":\"source\"},\"minSize\":1,\"maxSize\":32}}},\"temporary\":true,\"previousStyle\":null},\"type\":\"VECTOR\"},{\"id\":\"y4jsz\",\"label\":\"Flight Origin Location\",\"minZoom\":0,\"maxZoom\":9,\"alpha\":1,\"sourceDescriptor\":{\"type\":\"ES_GEO_GRID\",\"resolution\":\"COARSE\",\"id\":\"fe893f84-388e-4865-8df4-650748533a77\",\"indexPatternId\":\"d3d7af60-4c81-11e8-b3d7-01146121b73d\",\"geoField\":\"OriginLocation\",\"requestType\":\"point\",\"metrics\":[{\"type\":\"count\"},{\"type\":\"avg\",\"field\":\"FlightTimeMin\"}]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"Count\",\"name\":\"doc_count\",\"origin\":\"source\"},\"color\":\"Blues\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#110081\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"avg of FlightTimeMin\",\"name\":\"avg_of_FlightTimeMin\",\"origin\":\"source\"},\"minSize\":1,\"maxSize\":32}}},\"temporary\":true,\"previousStyle\":null},\"type\":\"VECTOR\"},{\"id\":\"x8xpo\",\"label\":\"Flight Destination Location\",\"minZoom\":0,\"maxZoom\":9,\"alpha\":1,\"sourceDescriptor\":{\"type\":\"ES_GEO_GRID\",\"resolution\":\"COARSE\",\"id\":\"60a7346a-8c5f-4c03-b7d1-e8b36e847551\",\"indexPatternId\":\"d3d7af60-4c81-11e8-b3d7-01146121b73d\",\"geoField\":\"DestLocation\",\"requestType\":\"point\",\"metrics\":[{\"type\":\"count\"},{\"type\":\"avg\",\"field\":\"FlightDelayMin\"}]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"Count\",\"name\":\"doc_count\",\"origin\":\"source\"},\"color\":\"Reds\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#af0303\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"avg of FlightDelayMin\",\"name\":\"avg_of_FlightDelayMin\",\"origin\":\"source\"},\"minSize\":1,\"maxSize\":32}}},\"temporary\":true,\"previousStyle\":null},\"type\":\"VECTOR\"}]",
+      "uiStateJSON":"{\"isDarkMode\":false}",
+      "bounds":{"type":"envelope","coordinates":[[-139.83779,56.64828],[-39.33713,14.04811]]}
+    }
+  }
+]

x-pack/plugins/maps/server/sample_data/web_logs_saved_objects.json

@@ -1,29 +1,16 @@
 [
   {
-    "id" : "map:40298610-039e-11e9-b546-bdfedfa6a4c0",
-    "type": "map",
-    "updated_at" : "2018-12-19T14:56:22.769Z",
-    "version": 1,
-    "migrationVersion": {},
-    "attributes" : {
-      "title" : "[Logs] Web Traffic",
-      "description" : "",
-      "mapStateJSON" : "{\"zoom\":3.92,\"center\":{\"lon\":-83.95443,\"lat\":38.02463},\"timeFilters\":{\"from\":\"now-7d\",\"to\":\"now\"}}",
-      "layerListJSON" : "[{\"id\":\"0hmz5\",\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{\"alphaValue\":1}},\"type\":\"TILE\",\"alpha\":1,\"minZoom\":0,\"maxZoom\":24},{\"id\":\"ajk2l\",\"label\":\"logs(heatmap)\",\"alpha\":1,\"minZoom\":0,\"maxZoom\":9,\"sourceDescriptor\":{\"resolution\": \"COARSE\", \"type\":\"ES_GEO_GRID\",\"id\":\"60c5dffb-7fca-431c-b1f0-9cc2e6697e8c\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"requestType\":\"heatmap\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"HEATMAP\",\"refinement\":\"coarse\",\"properties\":{\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"HEATMAP\"},{\"id\":\"6hgh2\",\"label\":\"logs(documents)\",\"alpha\":1,\"minZoom\":7,\"maxZoom\":24,\"sourceDescriptor\":{\"id\":\"541f2ca1-6a0f-4937-8846-a589222b7f28\",\"type\":\"ES_SEARCH\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"limit\":2048,\"filterByMapBounds\":true,\"showTooltip\":true,\"tooltipProperties\":[\"timestamp\",\"clientip\",\"url\"]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#e6194b\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}},\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"VECTOR\"}]",
-      "uiStateJSON" : "{\"isDarkMode\":false}",
-      "bounds" : {
-        "type" : "envelope",
-        "coordinates" : [
-          [
-            -117.8416,
-            51.03159
-          ],
-          [
-            -50.06726,
-            22.22805
-          ]
-        ]
-      }
+    "id":"de71f4f0-1902-11e9-919b-ffe5949a18d2",
+    "type":"map",
+    "updated_at":"2019-01-15T20:30:25.436Z",
+    "version":5,
+    "attributes":{
+      "title":"[Logs] Total Requests and Bytes",
+      "description":"",
+      "mapStateJSON":"{\"zoom\":3.64,\"center\":{\"lon\":-88.92107,\"lat\":42.16337},\"timeFilters\":{\"from\":\"now-7d\",\"to\":\"now\"},\"refreshConfig\":{\"isPaused\":true,\"interval\":0},\"query\":{\"language\":\"kuery\",\"query\":\"\"}}",
+      "layerListJSON":"[{\"id\":\"0hmz5\",\"alpha\":1,\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{}},\"type\":\"TILE\",\"minZoom\":0,\"maxZoom\":24},{\"id\":\"edh66\",\"label\":\"Total Requests by Country\",\"minZoom\":0,\"maxZoom\":24,\"alpha\":0.5,\"sourceDescriptor\":{\"type\":\"EMS_FILE\",\"id\":\"world_countries\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"count of kibana_sample_data_logs:geo.src\",\"name\":\"__kbnjoin__count_groupby_kibana_sample_data_logs.geo.src\",\"origin\":\"join\"},\"color\":\"Greys\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}}},\"temporary\":true,\"previousStyle\":null},\"type\":\"VECTOR\",\"joins\":[{\"leftField\":\"iso2\",\"right\":{\"id\":\"673ff994-fc75-4c67-909b-69fcb0e1060e\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"indexPatternTitle\":\"kibana_sample_data_logs\",\"term\":\"geo.src\"}}]},{\"id\":\"gaxya\",\"label\":\"Actual Requests\",\"minZoom\":9,\"maxZoom\":24,\"alpha\":1,\"sourceDescriptor\":{\"id\":\"b7486535-171b-4d3b-bb2e-33c1a0a2854c\",\"type\":\"ES_SEARCH\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"limit\":2048,\"filterByMapBounds\":true,\"tooltipProperties\":[\"clientip\",\"timestamp\",\"host\",\"request\",\"response\",\"machine.os\",\"agent\",\"bytes\"]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#2200ff\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":2}},\"iconSize\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"bytes\",\"name\":\"bytes\",\"origin\":\"source\"},\"minSize\":1,\"maxSize\":23}}},\"temporary\":true,\"previousStyle\":null},\"type\":\"VECTOR\"},{\"id\":\"tfi3f\",\"label\":\"Total Requests and Bytes\",\"minZoom\":0,\"maxZoom\":9,\"alpha\":1,\"sourceDescriptor\":{\"type\":\"ES_GEO_GRID\",\"resolution\":\"COARSE\",\"id\":\"8aaa65b5-a4e9-448b-9560-c98cb1c5ac5b\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"requestType\":\"point\",\"metrics\":[{\"type\":\"count\"},{\"type\":\"sum\",\"field\":\"bytes\"}]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"Count\",\"name\":\"doc_count\",\"origin\":\"source\"},\"color\":\"Blues\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#cccccc\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"sum of bytes\",\"name\":\"sum_of_bytes\",\"origin\":\"source\"},\"minSize\":1,\"maxSize\":25}}},\"temporary\":true,\"previousStyle\":null},\"type\":\"VECTOR\"}]",
+      "uiStateJSON":"{\"isDarkMode\":false}",
+      "bounds":{"type":"envelope","coordinates":[[-124.45342,54.91445],[-53.38872,26.21461]]}
     }
   }
 ]

x-pack/test/functional/apps/maps/sample_data.js

@@ -6,34 +6,108 @@
 
 import expect from 'expect.js';
 
-export default function ({ getPageObjects }) {
-  const PageObjects = getPageObjects(['common', 'maps', 'header', 'home']);
+export default function ({ getPageObjects, getService, updateBaselines }) {
+  const PageObjects = getPageObjects(['common', 'maps', 'header', 'home', 'timePicker']);
+  const screenshot = getService('screenshots');
 
   describe('maps loaded from sample data', () => {
-    describe('web logs', () => {
 
+    // Sample data is shifted to be relative to current time
+    // This means that a static timerange will return different documents
+    // Setting the time range to a window larger than the sample data set
+    // ensures all documents are coverered by time query so the ES results will always be the same
+    async function setTimerangeToCoverAllSampleData() {
+      const past = new Date();
+      past.setMonth(past.getMonth() - 6);
+      const future = new Date();
+      future.setMonth(future.getMonth() + 6);
+      await PageObjects.timePicker.setAbsoluteRange(
+        PageObjects.timePicker.formatDateToAbsoluteTimeString(past),
+        PageObjects.timePicker.formatDateToAbsoluteTimeString(future)
+      );
+    }
+
+    // Skipped because EMS vectors are not accessible in CI
+    describe('ecommerce', () => {
+      before(async () => {
+        await PageObjects.common.navigateToUrl('home', 'tutorial_directory/sampleData');
+        await PageObjects.header.waitUntilLoadingHasFinished();
+        await PageObjects.home.addSampleDataSet('ecommerce');
+        await PageObjects.maps.loadSavedMap('[eCommerce] Orders by Country');
+        await PageObjects.maps.toggleLayerVisibility('road_map');
+        await PageObjects.maps.toggleLayerVisibility('United Kingdom');
+        await PageObjects.maps.toggleLayerVisibility('France');
+        await PageObjects.maps.toggleLayerVisibility('United States');
+        await PageObjects.maps.toggleLayerVisibility('World Countries');
+        await setTimerangeToCoverAllSampleData();
+        await PageObjects.maps.waitForLayersToLoad();
+        await PageObjects.maps.enterFullScreen();
+      });
+
+      after(async () => {
+        await PageObjects.maps.existFullScreen();
+        await PageObjects.common.navigateToUrl('home', 'tutorial_directory/sampleData');
+        await PageObjects.header.waitUntilLoadingHasFinished();
+        await PageObjects.home.removeSampleDataSet('ecommerce');
+      });
+
+      it('should load layers', async () => {
+        const percentDifference = await screenshot.compareAgainstBaseline('ecommerce_map', updateBaselines);
+        expect(percentDifference).to.be.lessThan(0.05);
+      });
+    });
+
+    describe('flights', () => {
+      before(async () => {
+        await PageObjects.common.navigateToUrl('home', 'tutorial_directory/sampleData');
+        await PageObjects.header.waitUntilLoadingHasFinished();
+        await PageObjects.home.addSampleDataSet('flights');
+        await PageObjects.maps.loadSavedMap('[Flights] Origin and Destination Flight Time');
+        await PageObjects.maps.toggleLayerVisibility('road_map');
+        await setTimerangeToCoverAllSampleData();
+        await PageObjects.maps.waitForLayersToLoad();
+        await PageObjects.maps.enterFullScreen();
+      });
+
+      after(async () => {
+        await PageObjects.maps.existFullScreen();
+        await PageObjects.common.navigateToUrl('home', 'tutorial_directory/sampleData');
+        await PageObjects.header.waitUntilLoadingHasFinished();
+        await PageObjects.home.removeSampleDataSet('flights');
+      });
+
+      it('should load saved object and display layers', async () => {
+        const percentDifference = await screenshot.compareAgainstBaseline('flights_map', updateBaselines);
+        expect(percentDifference).to.be.lessThan(0.05);
+      });
+    });
+
+    // Skipped because EMS vectors are not accessible in CI
+    describe('web logs', () => {
       before(async () => {
         await PageObjects.common.navigateToUrl('home', 'tutorial_directory/sampleData');
         await PageObjects.header.waitUntilLoadingHasFinished();
         await PageObjects.home.addSampleDataSet('logs');
-        await PageObjects.maps.loadSavedMap('[Logs] Web Traffic');
+        await PageObjects.maps.loadSavedMap('[Logs] Total Requests and Bytes');
+        await PageObjects.maps.toggleLayerVisibility('road_map');
+        await PageObjects.maps.toggleLayerVisibility('Total Requests by Country');
+        await setTimerangeToCoverAllSampleData();
+        await PageObjects.maps.waitForLayersToLoad();
+        await PageObjects.maps.enterFullScreen();
       });
 
       after(async () => {
+        await PageObjects.maps.existFullScreen();
         await PageObjects.common.navigateToUrl('home', 'tutorial_directory/sampleData');
         await PageObjects.header.waitUntilLoadingHasFinished();
         await PageObjects.home.removeSampleDataSet('logs');
       });
 
-      it('should contain web log heatmap layer', async () => {
-        const exists = await PageObjects.maps.doesLayerExist('logs(heatmap)');
-        expect(exists).to.be(true);
-      });
-
-      it('should contain web log document layer', async () => {
-        const exists = await PageObjects.maps.doesLayerExist('logs(documents)');
-        expect(exists).to.be(true);
+      it('should load saved object and display layers', async () => {
+        const percentDifference = await screenshot.compareAgainstBaseline('web_logs_map', updateBaselines);
+        expect(percentDifference).to.be.lessThan(0.06);
       });
     });
+
   });
 }

x-pack/test/functional/page_objects/gis_page.js

@@ -15,6 +15,32 @@ export function GisPageProvider({ getService, getPageObjects }) {
 
   class GisPage {
 
+    async enterFullScreen() {
+      log.debug(`enterFullScreen`);
+      await testSubjects.click('mapsFullScreenMode');
+      await retry.try(async () => {
+        await testSubjects.exists('exitFullScreenModeLogo');
+      });
+      await this.waitForLayersToLoad();
+    }
+
+    // TODO combine with dashboard full screen into a service
+    async existFullScreen() {
+      log.debug(`existFullScreen`);
+      const isFullScreen = await testSubjects.exists('exitFullScreenModeLogo');
+      if (isFullScreen) {
+        await testSubjects.click('exitFullScreenModeLogo');
+      }
+    }
+
+    async waitForLayersToLoad() {
+      log.debug('Wait for layers to load');
+      const tableOfContents = await testSubjects.find('mapLayerTOC');
+      await retry.try(async () => {
+        await tableOfContents.waitForDeletedByClassName('euiLoadingSpinner');
+      });
+    }
+
     // use the search filter box to narrow the results down to a single
     // entry, or at least to a single page of results
     async loadSavedMap(name) {
@@ -124,6 +150,20 @@ export function GisPageProvider({ getService, getPageObjects }) {
       return { lat, lon, zoom };
     }
 
+    async toggleLayerVisibility(layerName) {
+      log.debug(`Toggle layer visibility, layer: ${layerName}`);
+      await this.openLayerTocActionsPanel(layerName);
+      await testSubjects.click('layerVisibilityToggleButton');
+    }
+
+    async openLayerTocActionsPanel(layerName) {
+      const cleanLayerName = layerName.split(' ').join('');
+      const isOpen = await testSubjects.exists(`layerTocActionsPanel${cleanLayerName}`);
+      if (!isOpen) {
+        await testSubjects.click(`layerTocActionsPanelToggleButton${cleanLayerName}`);
+      }
+    }
+
     async openLayerPanel(layerName) {
       log.debug(`Open layer panel, layer: ${layerName}`);
       await testSubjects.click(`mapOpenLayerButton${layerName}`);