Dashboard De-Angularization

CHANGELOG.md

@@ -33,10 +33,10 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Add `color-scheme` to the root styling ([#4477](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4477))
 - [Multiple DataSource] Frontend support for adding sample data ([#4412](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4412))
 - Enable plugins to augment visualizations with additional data and context ([#4361](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4361))
+- Dashboard De-Angularization ([#4502](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4502))
 - New management overview page and rename stack management to dashboard management ([#4287](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4287))
 - [Vis Augmenter] Update base vis height in view events flyout ([#4535](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4535))
 
-
 ### 🐛 Bug Fixes
 
 - [Chore] Update deprecated url methods (url.parse(), url.format()) ([#2910](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2910))

package.json

@@ -171,7 +171,6 @@
     "dns-sync": "^0.2.1",
     "elastic-apm-node": "^3.43.0",
     "elasticsearch": "^16.7.0",
-    "http-aws-es": "npm:@zhongnansu/[email protected]",
     "execa": "^4.0.2",
     "expiry-js": "0.1.7",
     "fast-deep-equal": "^3.1.1",
@@ -182,6 +181,7 @@
     "globby": "^11.1.0",
     "handlebars": "4.7.7",
     "hjson": "3.2.1",
+    "http-aws-es": "npm:@zhongnansu/[email protected]",
     "http-proxy-agent": "^2.1.0",
     "https-proxy-agent": "^5.0.0",
     "inline-style": "^2.0.0",
@@ -290,6 +290,7 @@
     "@types/has-ansi": "^3.0.0",
     "@types/history": "^4.7.3",
     "@types/hjson": "^2.4.2",
+    "@types/http-aws-es": "6.0.2",
     "@types/jest": "^27.4.0",
     "@types/joi": "^13.4.2",
     "@types/jquery": "^3.3.31",
@@ -342,7 +343,6 @@
     "@types/zen-observable": "^0.8.0",
     "@typescript-eslint/eslint-plugin": "^3.10.0",
     "@typescript-eslint/parser": "^3.10.0",
-    "@types/http-aws-es": "6.0.2",
     "angular-aria": "^1.8.0",
     "angular-mocks": "^1.8.2",
     "angular-recursion": "^1.0.5",

src/plugins/dashboard/common/migrate_to_730_panels.ts

@@ -87,8 +87,11 @@ function is640To720Panel(
   panel: unknown | RawSavedDashboardPanel640To720
 ): panel is RawSavedDashboardPanel640To720 {
   return (
-    semver.satisfies((panel as RawSavedDashboardPanel630).version, '>6.3') &&
-    semver.satisfies((panel as RawSavedDashboardPanel630).version, '<7.3')
+    semver.satisfies(
+      semver.coerce((panel as RawSavedDashboardPanel630).version)!.version,
+      '>6.3'
+    ) &&
+    semver.satisfies(semver.coerce((panel as RawSavedDashboardPanel630).version)!.version, '<7.3')
   );
 }
 
@@ -273,10 +276,12 @@ function migrate640To720PanelsToLatest(
   version: string
 ): RawSavedDashboardPanel730ToLatest {
   const panelIndex = panel.panelIndex ? panel.panelIndex.toString() : uuid.v4();
+  const embeddableConfig = panel.embeddableConfig ?? {};
   return {
     ...panel,
     version,
     panelIndex,
+    embeddableConfig,
   };
 }
 

src/plugins/dashboard/public/application/app.scss

@@ -0,0 +1,11 @@
+.dshAppContainer {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+#dashboardViewport {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}

src/plugins/dashboard/public/application/app.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './app.scss';
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { DashboardConstants, createDashboardEditUrl } from '../dashboard_constants';
+import { DashboardEditor, DashboardListing, DashboardNoMatch } from './components';
+
+export const DashboardApp = () => {
+  return (
+    <Switch>
+      <Route path={[DashboardConstants.CREATE_NEW_DASHBOARD_URL, createDashboardEditUrl(':id')]}>
+        <div className="app-container dshAppContainer">
+          <DashboardEditor />
+          <div id="dashboardViewport" />
+        </div>
+      </Route>
+      <Route exact path={['/', DashboardConstants.LANDING_PAGE_PATH]}>
+        <DashboardListing />
+      </Route>
+      <DashboardNoMatch />
+    </Switch>
+  );
+};

src/plugins/dashboard/public/application/components/dashboard_editor.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { EventEmitter } from 'events';
+import { DashboardTopNav } from '../components/dashboard_top_nav';
+import { useChromeVisibility } from '../utils/use/use_chrome_visibility';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { useSavedDashboardInstance } from '../utils/use/use_saved_dashboard_instance';
+import { DashboardServices } from '../../types';
+import { useDashboardAppAndGlobalState } from '../utils/use/use_dashboard_app_state';
+import { useEditorUpdates } from '../utils/use/use_editor_updates';
+
+export const DashboardEditor = () => {
+  const { id: dashboardIdFromUrl } = useParams<{ id: string }>();
+  const { services } = useOpenSearchDashboards<DashboardServices>();
+  const { chrome } = services;
+  const isChromeVisible = useChromeVisibility({ chrome });
+  const [eventEmitter] = useState(new EventEmitter());
+
+  const { savedDashboard: savedDashboardInstance, dashboard } = useSavedDashboardInstance({
+    services,
+    eventEmitter,
+    isChromeVisible,
+    dashboardIdFromUrl,
+  });
+
+  const { appState, currentContainer, indexPatterns } = useDashboardAppAndGlobalState({
+    services,
+    eventEmitter,
+    savedDashboardInstance,
+    dashboard,
+  });
+
+  const { isEmbeddableRendered, currentAppState } = useEditorUpdates({
+    services,
+    eventEmitter,
+    savedDashboardInstance,
+    dashboard,
+    dashboardContainer: currentContainer,
+    appState,
+  });
+
+  return (
+    <div>
+      <div>
+        {savedDashboardInstance && appState && currentAppState && currentContainer && dashboard && (
+          <DashboardTopNav
+            isChromeVisible={isChromeVisible}
+            savedDashboardInstance={savedDashboardInstance}
+            appState={appState!}
+            dashboard={dashboard}
+            currentAppState={currentAppState}
+            isEmbeddableRendered={isEmbeddableRendered}
+            indexPatterns={indexPatterns}
+            currentContainer={currentContainer}
+            dashboardIdFromUrl={dashboardIdFromUrl}
+          />
+        )}
+      </div>
+    </div>
+  );
+};