yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-23 08:28:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix #5292 lazy loading added for development and production. (#5294)

Browse Source 
Co-authored-by: yug shah <yugshah0106@gmail.com>
This commit is contained in:
Shailesh Parmar 2022-06-04 00:24:26 +05:30 committed by GitHub
parent cae834d671
commit 3f682b6685
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 148 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
openmetadata-ui/src/main/resources/ui/src/router/AppRouter.tsx
View File

@ -18,9 +18,17 @@ import Appbar from '../components/app-bar/Appbar';
import Loader from '../components/Loader/Loader';
import { ROUTES } from '../constants/constants';
import { AuthTypes } from '../enums/signin.enum';
import SigninPage from '../pages/login';
import PageNotFound from '../pages/page-not-found';
import AuthenticatedAppRouter from './AuthenticatedAppRouter';
import withSuspenseFallback from './withSuspenseFallback';
const AuthenticatedAppRouter = withSuspenseFallback(
React.lazy(() => import('./AuthenticatedAppRouter'))
);
const SigninPage = withSuspenseFallback(
React.lazy(() => import('../pages/login'))
);
const PageNotFound = withSuspenseFallback(
React.lazy(() => import('../pages/page-not-found'))
);
const AppRouter = () => {
const {

158
openmetadata-ui/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx
View File

@ -17,39 +17,131 @@ import { Redirect, Route, Switch } from 'react-router-dom';
import AppState from '../AppState';
import AddCustomProperty from '../components/CustomEntityDetail/AddCustomProperty/AddCustomProperty';
import { ROUTES } from '../constants/constants';
import AddGlossaryPage from '../pages/AddGlossary/AddGlossaryPage.component';
import AddGlossaryTermPage from '../pages/AddGlossaryTermPage/AddGlossaryTermPage.component';
import AddIngestionPage from '../pages/AddIngestionPage/AddIngestionPage.component';
import AddServicePage from '../pages/AddServicePage/AddServicePage.component';
import AddWebhookPage from '../pages/AddWebhookPage/AddWebhookPage.component';
import BotsListPage from '../pages/BotsListpage/BotsListpage.component';
import BotsPage from '../pages/BotsPage/BotsPage.component';
import CreateUserPage from '../pages/CreateUserPage/CreateUserPage.component';
import CustomPropertiesPage from '../pages/CustomPropertiesPage/CustomPropertiesPage';
import DashboardDetailsPage from '../pages/DashboardDetailsPage/DashboardDetailsPage.component';
import DatabaseDetails from '../pages/database-details/index';
import DatabaseSchemaPageComponent from '../pages/DatabaseSchemaPage/DatabaseSchemaPage.component';
import DatasetDetailsPage from '../pages/DatasetDetailsPage/DatasetDetailsPage.component';
import EditIngestionPage from '../pages/EditIngestionPage/EditIngestionPage.component';
import EditWebhookPage from '../pages/EditWebhookPage/EditWebhookPage.component';
import EntityVersionPage from '../pages/EntityVersionPage/EntityVersionPage.component';
import ExplorePage from '../pages/explore/ExplorePage.component';
import GlossaryPageV1 from '../pages/GlossaryPage/GlossaryPageV1.component';
import MlModelPage from '../pages/MlModelPage/MlModelPage.component';
import MyDataPage from '../pages/MyDataPage/MyDataPage.component';
import PipelineDetailsPage from '../pages/PipelineDetails/PipelineDetailsPage.component';
import RolesPage from '../pages/RolesPage/RolesPage.component';
import ServicePage from '../pages/service';
import ServicesPage from '../pages/services';
import SignupPage from '../pages/signup';
import SwaggerPage from '../pages/swagger';
import TagsPage from '../pages/tags';
import TeamsAndUsersPage from '../pages/TeamsAndUsersPage/TeamsAndUsersPage.component';
import TopicDetailsPage from '../pages/TopicDetails/TopicDetailsPage.component';
import TourPageComponent from '../pages/tour-page/TourPage.component';
import UserPage from '../pages/UserPage/UserPage.component';
import WebhooksPage from '../pages/WebhooksPage/WebhooksPage.component';
import AdminProtectedRoute from './AdminProtectedRoute';
import withSuspenseFallback from './withSuspenseFallback';
const MyDataPage = withSuspenseFallback(
React.lazy(() => import('../pages/MyDataPage/MyDataPage.component'))
);
const PipelineDetailsPage = withSuspenseFallback(
React.lazy(
() => import('../pages/PipelineDetails/PipelineDetailsPage.component')
)
);
const RolesPage = withSuspenseFallback(
React.lazy(() => import('../pages/RolesPage/RolesPage.component'))
);
const ServicePage = withSuspenseFallback(
React.lazy(() => import('../pages/service'))
);
const ServicesPage = withSuspenseFallback(
React.lazy(() => import('../pages/services'))
);
const SignupPage = withSuspenseFallback(
React.lazy(() => import('../pages/signup'))
);
const SwaggerPage = withSuspenseFallback(
React.lazy(() => import('../pages/swagger'))
);
const TagsPage = withSuspenseFallback(
React.lazy(() => import('../pages/tags'))
);
const TeamsAndUsersPage = withSuspenseFallback(
React.lazy(
() => import('../pages/TeamsAndUsersPage/TeamsAndUsersPage.component')
)
);
const TopicDetailsPage = withSuspenseFallback(
React.lazy(() => import('../pages/TopicDetails/TopicDetailsPage.component'))
);
const TourPageComponent = withSuspenseFallback(
React.lazy(() => import('../pages/tour-page/TourPage.component'))
);
const UserPage = withSuspenseFallback(
React.lazy(() => import('../pages/UserPage/UserPage.component'))
);
const WebhooksPage = withSuspenseFallback(
React.lazy(() => import('../pages/WebhooksPage/WebhooksPage.component'))
);
const AdminProtectedRoute = withSuspenseFallback(
React.lazy(() => import('./AdminProtectedRoute'))
);
const AddGlossaryPage = withSuspenseFallback(
React.lazy(() => import('../pages/AddGlossary/AddGlossaryPage.component'))
);
const AddGlossaryTermPage = withSuspenseFallback(
React.lazy(
() => import('../pages/AddGlossaryTermPage/AddGlossaryTermPage.component')
)
);
const AddIngestionPage = withSuspenseFallback(
React.lazy(
() => import('../pages/AddIngestionPage/AddIngestionPage.component')
)
);
const AddServicePage = withSuspenseFallback(
React.lazy(() => import('../pages/AddServicePage/AddServicePage.component'))
);
const AddWebhookPage = withSuspenseFallback(
React.lazy(() => import('../pages/AddWebhookPage/AddWebhookPage.component'))
);
const BotsListPage = withSuspenseFallback(
React.lazy(() => import('../pages/BotsListpage/BotsListpage.component'))
);
const BotsPage = withSuspenseFallback(
React.lazy(() => import('../pages/BotsPage/BotsPage.component'))
);
const CreateUserPage = withSuspenseFallback(
React.lazy(() => import('../pages/CreateUserPage/CreateUserPage.component'))
);
const DashboardDetailsPage = withSuspenseFallback(
React.lazy(
() => import('../pages/DashboardDetailsPage/DashboardDetailsPage.component')
)
);
const DatabaseDetails = withSuspenseFallback(
React.lazy(() => import('../pages/database-details/index'))
);
const DatabaseSchemaPageComponent = withSuspenseFallback(
React.lazy(
() => import('../pages/DatabaseSchemaPage/DatabaseSchemaPage.component')
)
);
const DatasetDetailsPage = withSuspenseFallback(
React.lazy(
() => import('../pages/DatasetDetailsPage/DatasetDetailsPage.component')
)
);
const EditIngestionPage = withSuspenseFallback(
React.lazy(
() => import('../pages/EditIngestionPage/EditIngestionPage.component')
)
);
const EditWebhookPage = withSuspenseFallback(
React.lazy(() => import('../pages/EditWebhookPage/EditWebhookPage.component'))
);
const EntityVersionPage = withSuspenseFallback(
React.lazy(
() => import('../pages/EntityVersionPage/EntityVersionPage.component')
)
);
const ExplorePage = withSuspenseFallback(
React.lazy(() => import('../pages/explore/ExplorePage.component'))
);
const GlossaryPageV1 = withSuspenseFallback(
React.lazy(() => import('../pages/GlossaryPage/GlossaryPageV1.component'))
);
const MlModelPage = withSuspenseFallback(
React.lazy(() => import('../pages/MlModelPage/MlModelPage.component'))
);
const CustomPropertiesPage = withSuspenseFallback(
React.lazy(() => import('../pages/CustomPropertiesPage/CustomPropertiesPage'))
);
const AuthenticatedAppRouter: FunctionComponent = () => {
return (
<Switch>

12
openmetadata-ui/src/main/resources/ui/src/router/withSuspenseFallback.js Normal file
View File

@ -0,0 +1,12 @@
import React, { Suspense } from 'react';
import Loader from '../components/Loader/Loader';
export default function withSuspenseFallback(Component) {
return function DefaultFallback(props) {
return (
<Suspense fallback={<Loader />}>
<Component {...props} />
</Suspense>
);
};
}