Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Removes Angular from the `plugins/dashboard` utilizing React. This includes refactoring to address changes in state management but will require fast follow to address none blocking issues raised which can be found here: #3365 Partially Resolves: #3365 --- * Replace angular modules with react components * Use React to start up the dashboard app, and use react routing to configure basic routing for dashboard plugin. * [Dashboard De-Angular] Render dashboard listing page (#4015) * #4000 * Render the dashboard listing component with basic functionalities: * When there is no dashboard, render the empty dashboard page * When there are dashboards, show the dashboard listing table * When click on the dashboard, show the editor page * Delete the dashboards when selected * Can use search bar to filter dashboard * Basic top nav bar for dashboard (#4108) * Basic top nav bar for dashboard * This PR will add basic structure to render top nav bar, including a basic implementation for dashboard app state. * Render editor page with basic nav actions (#4213) * Added dashboard embeddable container to render the dashboard editor page. * Add visualization (#4257) * Add and save visualization to dashboard * Render empty screen (#4346) * Render empty screen with correct edit and view view when creating a new dashboard. * Fix routing (#4357) * Fix the edit action routing on the dashboard listing page; also fix routing when the route has no match. Add '_g' param to the URL on both dashboard listing page and dashboard editor page. * [Dashboard De-Angular] Enable time filter functionalities (#4364) * Fix time filter on dashboard * Save dashboard with time restore * Dashboard be able to save query and app filter * Enable functional test for dashboard * Fix comments and add ui bootstrap back * No index pattern routing (#4401) * Should redirect to stack management page if there is no index pattern detected. * Add embed mode and other URL param options (#4407) * UI should render based on URL param options * [Dashboard De-Angular] Add dashboard class for discard flow (#3563) * Add Dashboard class for state managing * isDirty working for cancel flow * [Dashboard De-Angular] Add breadcrumb with view/edit mode and unsaved flow (#4479) * set isDirty back to false when saving successfully * Breadcrumb working * change to dashboards in breadcrumb * [Dashboard De-Angular] Enable URL title param for initial filter on dashboard listing (#4480) * Fix dashboard listing functional test * Can filter dashboards using URL title param * Fix the functional tests * [Dashboard De-Angular] Fix dashboard save and back button functional test (#4491) * fix copy on save and functional test 5 * Fix back button navigation * Fix version migration for panels * Fix conversions between saved panel and container panel type * Fix redundant browser update by re-structure app state and global state sync logic in order for back button to work, also fix the corresponding functional test * migration version * Add initialization dirty flag and fix full mode filter bar * [Dashboard De-Angular] Fix filter and query related functional tests in functional test group 3 (#4495) * fix index pattern window * Fix time filter and query related functional test in group 3 * [Dashboard De-Angular] Fix remaining functional tests (#4496) * fix dashboard state function test in group 4 * fix expanding panel * fix dashboard listing delete (#4508) * [Dashboard De-Angular] Initial clean up and linter fix (#4511) * Clean up linter issues * Add changelog and other fixes * [Dashboard De-Angular] Cypress fix (#4521) * fix cypress * refactor scss files * delete old unit test for state management * Refactor app state and cleanup unused imports (#4504) * Clean up app state for Dashboards plugin. * Removes the dashboard container hook in place of a single dashboard app state container * Still recovers some follow-ups and clean up * Skips test for rendering of a legacy test. * Set dashboard container functions and fix license headers (#4540) * Set dashboard container after defining functions * renderEmpty was not being set prior to the current container was being dispatched. * fix up license headers for new files * add TODOs from PR Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> Signed-off-by: Kawika Avilla <kavilla414@gmail.com> Co-authored-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> Co-authored-by: Kawika Avilla <kavilla414@gmail.com> Co-authored-by: Miki <amoo_miki@yahoo.com> (cherry picked from commit 1d41cfe) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
- Loading branch information
4 people
committed
Jul 11, 2023
1 parent
898410d
commit c10b070
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| .dshAppContainer { | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-grow: 1; | ||
| } | ||
|
|
||
| #dashboardViewport { | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex: 1; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; | ||
Oops, something went wrong.