add map page and add basic layers panel (#40)

add map page and add basic layers panel Signed-off-by: Junqiu Lei <[email protected]>
opensearch-project · Sep 8, 2022 · 97b9b3a · 97b9b3a
1 parent 49f988f
commit 97b9b3a
Show file tree

Hide file tree

Showing 15 changed files with 737 additions and 93 deletions.
diff --git a/src/plugins/maps_dashboards/common/index.ts b/src/plugins/maps_dashboards/common/index.ts
@@ -3,5 +3,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export const PLUGIN_ID = 'mapsDashboards';
+export const PLUGIN_ID = 'maps-dashboards';
 export const PLUGIN_NAME = 'Maps';
+
+// This style URL is only used for development, will replace with production vector tile service url.
+export const MAP_VECTOR_TILE_URL =
+  'https://dldbnqfps17cd.cloudfront.net/styles/basic-preview/compressedstyle.json';
+
+// Starting position [lng, lat] and zoom
+export const MAP_INITIAL_STATE = {
+  lng: 0,
+  lat: 0,
+  zoom: 1,
+};
+
+export const APP_PATH = {
+  CREATE_MAP: '/create-map',
+};
diff --git a/src/plugins/maps_dashboards/package-lock.json b/src/plugins/maps_dashboards/package-lock.json
diff --git a/src/plugins/maps_dashboards/package.json b/src/plugins/maps_dashboards/package.json
@@ -6,5 +6,8 @@
     "build": "yarn plugin-helpers build",
     "plugin-helpers": "node ../../scripts/plugin_helpers",
     "osd": "node ../../scripts/osd"
+  },
+  "dependencies": {
+    "maplibre-gl": "^2.4.0"
   }
 }
diff --git a/src/plugins/maps_dashboards/public/components/app.tsx b/src/plugins/maps_dashboards/public/components/app.tsx
@@ -3,29 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-/*
- * This file has temporary code for the landing page.
- * Based on the Maps visualization tab, this file will be
- * changed in the future.
- */
-
-import React, { useCallback } from 'react';
-import { i18n } from '@osd/i18n';
+import React from 'react';
+import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 import { I18nProvider } from '@osd/i18n/react';
-import { BrowserRouter as Router } from 'react-router-dom';
-
-import {
-  EuiPage,
-  EuiPageBody,
-  EuiPageContentBody,
-} from '@elastic/eui';
-
-import {
-  TableListView,
-} from '../../../../src/plugins/opensearch_dashboards_react/public';
-
+import { MapsList, Map } from '../pages/';
 import { CoreStart } from '../../../../src/core/public';
 import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
+import { APP_PATH } from '../../common/index';
 
 interface MapsDashboardsAppDeps {
   basename: string;
@@ -34,74 +18,21 @@ interface MapsDashboardsAppDeps {
   navigation: NavigationPublicPluginStart;
 }
 
-export const MapsDashboardsApp = ({
-  basename,
-  notifications,
-  http,
-  navigation,
-}: MapsDashboardsAppDeps) => {
-  const find = async (num: number) => {
-    let hits: never[] = [];
-    await http.post('/api/maps_dashboards/example').then((res) => {
-      hits = res.hits;
-    });
-    return Promise.resolve({
-      total: num,
-      hits: hits,
-    });
-  };
-
-  const tableColumns = [
-    {
-      field: 'title',
-      name: i18n.translate('maps.listing.table.titleColumnName', {
-        defaultMessage: 'Title',
-      }),
-      sortable: true,
-    },
-    {
-      field: 'description',
-      name: i18n.translate('maps.listing.table.descriptionColumnName', {
-        defaultMessage: 'Description',
-      }),
-      sortable: true,
-    },
-  ];
-
+export const MapsDashboardsApp = ({ basename, notifications, http }: MapsDashboardsAppDeps) => {
   // Render the application DOM.
   return (
     <Router basename={basename}>
       <I18nProvider>
-        <>
-          <EuiPage restrictWidth="1000px">
-            <EuiPageBody component="main">
-              <EuiPageContentBody>
-                <TableListView
-                  headingId="mapsListingHeading"
-                  createItem={useCallback(() => {},[])}
-                  findItems={find.bind(null, 3)}
-                  deleteItems={async() => {await Promise.all([])}}
-                  editItem={useCallback(() => {},[])}
-                  tableColumns={tableColumns}
-                  listingLimit={10}
-                  initialPageSize={10}
-                  initialFilter={''}
-                  noItemsFragment={<div></div>}
-                  entityName={i18n.translate('maps.listing.table.entityName', {
-                    defaultMessage: 'map',
-                  })}
-                  entityNamePlural={i18n.translate('maps.listing.table.entityNamePlural', {
-                    defaultMessage: 'maps',
-                  })}
-                  tableListTitle={i18n.translate('maps.listing.table.listTitle', {
-                    defaultMessage: 'Maps',
-                  })}
-                  toastNotifications={notifications.toasts}
-                />
-              </EuiPageContentBody>
-            </EuiPageBody>
-          </EuiPage>
-        </>
+        <div>
+          <Switch>
+            <Route path={APP_PATH.CREATE_MAP} render={(props) => <Map />} />
+            <Route
+              exact
+              path="/"
+              render={() => <MapsList http={http} notifications={notifications} />}
+            />
+          </Switch>
+        </div>
       </I18nProvider>
     </Router>
   );