Add map as embeddable to dashboard (#231)

* Add map as embeddable to dashboard Signed-off-by: Junqiu Lei <junqiu@amazon.com> * Create new map from dashboard visualization and save return Signed-off-by: Junqiu Lei <junqiu@amazon.com> * Enable interval refresh in dashboard Signed-off-by: Junqiu Lei <junqiu@amazon.com> * Enable filters in dashboard Signed-off-by: Junqiu Lei <junqiu@amazon.com> * Enable query in dashboard Signed-off-by: Junqiu Lei <junqiu@amazon.com> * Add cypress test Signed-off-by: Junqiu Lei <junqiu@amazon.com> * Fix maps listing in visualization listing page Signed-off-by: Junqiu Lei <junqiu@amazon.com> * Refactor controller Signed-off-by: Junqiu Lei <junqiu@amazon.com> * Resolve feedback Signed-off-by: Junqiu Lei <junqiu@amazon.com> --------- Signed-off-by: Junqiu Lei <junqiu@amazon.com>
opensearch-project · Feb 20, 2023 · e48407b · e48407b
1 parent 73be418
commit e48407b
Show file tree

Hide file tree

Showing 24 changed files with 1,090 additions and 205 deletions.
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
@@ -12,5 +12,5 @@ export const MAX_FILE_PAYLOAD_SIZE_IN_MB = 25;
 export const MAX_FILE_PAYLOAD_SIZE = fromMBtoBytes(MAX_FILE_PAYLOAD_SIZE_IN_MB);
 export const PLUGIN_ID = 'customImportMap';
 export const PLUGIN_NAME = 'customImportMap';
-export const PLUGIN_NAVIGATION_BAR_TILE = 'Maps';
-export const PLUGIN_NAVIGATION_BAR_ID = 'maps-dashboards';
+export const MAPS_APP_DISPLAY_NAME = 'Maps';
+export const MAPS_APP_ID = 'maps-dashboards';
diff --git a/common/index.ts b/common/index.ts
@@ -9,7 +9,7 @@ import {
  MAX_FILE_PAYLOAD_SIZE,
  MAX_FILE_PAYLOAD_SIZE_IN_MB,
  PLUGIN_ID,
- PLUGIN_NAVIGATION_BAR_ID,
+ MAPS_APP_ID,
  PLUGIN_NAME,
 } from './constants/shared';
 
@@ -19,7 +19,7 @@ export {
  MAX_FILE_PAYLOAD_SIZE,
  MAX_FILE_PAYLOAD_SIZE_IN_MB,
  PLUGIN_ID,
- PLUGIN_NAVIGATION_BAR_ID,
+ MAPS_APP_ID,
  PLUGIN_NAME,
 };
 
@@ -44,6 +44,10 @@ export const MAX_LAYER_NAME_LIMIT = 35;
 export const MAX_LONGITUDE = 180;
 export const MIN_LONGITUDE = -180;
 export const NEW_MAP_LAYER_DEFAULT_PREFIX = 'New layer';
+export const MAP_SAVED_OBJECT_TYPE = 'map';
+// TODO: Replace with actual app icon
+export const MAPS_APP_ICON = 'gisApp';
+export const MAPS_VISUALIZATION_DESCRIPTION = 'Create map visualization with multiple layers';
 
 // Starting position [lng, lat] and zoom
 export const MAP_INITIAL_STATE = {

diff --git a/cypress/integration/add_map_to_dashboard.spec.js b/cypress/integration/add_map_to_dashboard.spec.js
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { BASE_PATH } from '../utils/constants';
+
+describe('Add map to dashboard', () => {
+ before(() => {
+ cy.visit(`${BASE_PATH}/app/home#/tutorial_directory/sampleData`, {
+ retryOnStatusCodeFailure: true,
+ timeout: 60000,
+ });
+ cy.get('div[data-test-subj="sampleDataSetCardflights"]', { timeout: 60000 })
+ .contains(/(Add|View) data/)
+ .click();
+ cy.wait(60000);
+ });
+
+ it('Add new map to dashboard', () => {
+ const testMapName = 'saved-map-' + Date.now().toString();
+ cy.visit(`${BASE_PATH}/app/dashboards`);
+ cy.get('button[data-test-subj="newItemButton"]').click();
+ cy.get('button[data-test-subj="dashboardAddNewPanelButton"]').click();
+ cy.get('button[data-test-subj="visType-customImportMap"]').click();
+ cy.wait(5000).get('button[data-test-subj="mapSaveButton"]').click();
+ cy.wait(5000).get('[data-test-subj="savedObjectTitle"]').type(testMapName);
+ cy.wait(5000).get('[data-test-subj="confirmSaveSavedObjectButton"]').click();
+ cy.get('.embPanel__titleText').should('contain', testMapName);
+ });
+
+ after(() => {
+ cy.visit(`${BASE_PATH}/app/home#/tutorial_directory`);
+ cy.get('button[data-test-subj="removeSampleDataSetflights"]').should('be.visible').click();
+ });
+});
diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
@@ -4,6 +4,6 @@
  "opensearchDashboardsVersion": "3.0.0",
  "server": true,
  "ui": true,
- "requiredPlugins": ["regionMap", "opensearchDashboardsReact", "navigation", "savedObjects", "data"],
+ "requiredPlugins": ["regionMap", "opensearchDashboardsReact", "opensearchDashboardsUtils", "navigation", "savedObjects", "data", "embeddable", "visualizations"],
  "optionalPlugins": ["home"]
  }
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/components/app.tsx b/public/components/app.tsx
@@ -24,15 +24,13 @@ export const MapsDashboardsApp = ({ mapConfig }: Props) => {
  return (
  <Router history={appBasePath}>
  <I18nProvider>
- <div>
- <Switch>
- <Route
- path={[APP_PATH.CREATE_MAP, APP_PATH.EDIT_MAP]}
- render={() => <MapPage mapConfig={mapConfig} />}
- />
- <Route exact path={APP_PATH.LANDING_PAGE_PATH} render={() => <MapsList />} />
- </Switch>
- </div>
+ <Switch>
+ <Route
+ path={[APP_PATH.CREATE_MAP, APP_PATH.EDIT_MAP]}
+ render={() => <MapPage mapConfig={mapConfig} />}
+ />
+ <Route exact path={APP_PATH.LANDING_PAGE_PATH} render={() => <MapsList />} />
+ </Switch>
  </I18nProvider>
  </Router>
  );