WIP: frontend: router: Add lazy loading of routes for code splitting

Makefile

@@ -71,10 +71,18 @@ frontend-build-storybook:
 run-backend:
  @echo "**** Warning: Running with Helm and dynamic-clusters endpoints enabled. ****"
  @echo
- HEADLAMP_BACKEND_TOKEN=headlamp HEADLAMP_CONFIG_ENABLE_HELM=true HEADLAMP_CONFIG_ENABLE_DYNAMIC_CLUSTERS=true ./backend/headlamp-server -dev
+ @if [ -n "$$BASH_VERSION" ] || [ -n "$$ZSH_VERSION" ]; then \
+ HEADLAMP_BACKEND_TOKEN=headlamp HEADLAMP_CONFIG_ENABLE_HELM=true HEADLAMP_CONFIG_ENABLE_DYNAMIC_CLUSTERS=true ./backend/headlamp-server -dev \
+ else \
+ cmd /c \"set HEADLAMP_BACKEND_TOKEN=headlamp && set HEADLAMP_CONFIG_ENABLE_HELM=true && set HEADLAMP_CONFIG_ENABLE_DYNAMIC_CLUSTERS=true && ./backend/headlamp-server -dev\"; \
+ fi
 
 run-frontend:
- cd frontend && REACT_APP_HEADLAMP_BACKEND_TOKEN=headlamp npm start
+ @if [ -n "$$BASH_VERSION" ] || [ -n "$$ZSH_VERSION" ]; then \
+ cd frontend && nice -19 npm start; \
+ else \
+ cd frontend && npm start; \
+ fi
 
 frontend-lint:
  cd frontend && npm run lint -- --max-warnings 0 && npm run format-check

frontend/src/components/App/AppLogo.tsx

@@ -1,4 +1,5 @@
-import { SvgIcon, Theme } from '@mui/material';
+import { Theme } from '@mui/material';
+import SvgIcon from '@mui/material/SvgIcon';
 import { SxProps } from '@mui/system';
 import React, { isValidElement, ReactElement } from 'react';
 import { getThemeName } from '../../lib/themes';
@@ -7,7 +8,7 @@ import { ReactComponent as LogoDark } from '../../resources/icon-dark.svg';
 import { ReactComponent as LogoLight } from '../../resources/icon-light.svg';
 import { ReactComponent as LogoWithTextDark } from '../../resources/logo-dark.svg';
 import { ReactComponent as LogoWithTextLight } from '../../resources/logo-light.svg';
-import { EmptyContent } from '../common';
+import EmptyContent from '../common/EmptyContent';
 import ErrorBoundary from '../common/ErrorBoundary';
 
 export interface AppLogoProps {

frontend/src/components/App/Home/index.tsx

@@ -18,9 +18,12 @@ import Event from '../../../lib/k8s/event';
 import { createRouteURL } from '../../../lib/router';
 import { useFilterFunc, useId } from '../../../lib/util';
 import { setConfig } from '../../../redux/configSlice';
-import { Link, PageGrid, SectionBox, SectionFilterHeader } from '../../common';
-import { ConfirmDialog } from '../../common';
+import ConfirmDialog from '../../common/ConfirmDialog';
+import Link from '../../common/Link';
+import { PageGrid } from '../../common/Resource/Resource';
 import ResourceTable from '../../common/Resource/ResourceTable';
+import SectionBox from '../../common/SectionBox';
+import SectionFilterHeader from '../../common/SectionFilterHeader';
 import RecentClusters from './RecentClusters';
 
 function ContextMenu({ cluster }: { cluster: Cluster }) {

frontend/src/components/App/Layout.tsx

@@ -1,4 +1,5 @@
-import { Box, Button } from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import Container from '@mui/material/Container';
 import CssBaseline from '@mui/material/CssBaseline';
 import Link from '@mui/material/Link';

frontend/src/components/App/Notifications/List.tsx

@@ -1,12 +1,22 @@
 import { Icon } from '@iconify/react';
-import { Box, IconButton, Menu, MenuItem, Tooltip, Typography, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { useTypedSelector } from '../../../redux/reducers/reducers';
-import { DateLabel, Link, SectionBox, SectionFilterHeader, SimpleTable } from '../../common';
 import Empty from '../../common/EmptyContent';
+import { DateLabel } from '../../common/Label';
+import Link from '../../common/Link';
+import SectionBox from '../../common/SectionBox';
+import SectionFilterHeader from '../../common/SectionFilterHeader';
+import SimpleTable from '../../common/SimpleTable';
 import { Notification, setNotifications, updateNotifications } from './notificationsSlice';
 
 export default function NotificationList() {

frontend/src/components/App/Notifications/index.tsx

@@ -1,18 +1,16 @@
 import bellIcon from '@iconify/icons-mdi/bell';
 import { Icon } from '@iconify/react';
-import {
- Badge,
- Box,
- Button,
- Grid,
- IconButton,
- ListItem,
- Popover,
- Theme,
- Tooltip,
- Typography,
- useTheme,
-} from '@mui/material';
+import { useTheme } from '@mui/material';
+import { Theme } from '@mui/material';
+import Badge from '@mui/material/Badge';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import ListItem from '@mui/material/ListItem';
+import Popover from '@mui/material/Popover';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -23,8 +21,8 @@ import { useClustersConf } from '../../../lib/k8s';
 import Event from '../../../lib/k8s/event';
 import { createRouteURL } from '../../../lib/router';
 import { useTypedSelector } from '../../../redux/reducers/reducers';
-import { DateLabel } from '../../common';
 import Empty from '../../common/EmptyContent';
+import { DateLabel } from '../../common/Label';
 import {
  defaultMaxNotificationsStored,
  loadNotifications,

frontend/src/components/App/PluginSettings/PluginSettings.tsx

@@ -1,16 +1,21 @@
-import { Switch, SwitchProps, Typography, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Link from '@mui/material/Link';
+import { SwitchProps } from '@mui/material/Switch';
+import Switch from '@mui/material/Switch';
+import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import helpers from '../../../helpers';
 import { useFilterFunc } from '../../../lib/util';
 import { PluginInfo, reloadPage, setPluginSettings } from '../../../plugin/pluginsSlice';
 import { useTypedSelector } from '../../../redux/reducers/reducers';
-import { Link as HeadlampLink, SectionBox, SimpleTable } from '../../common';
+import HeadlampLink from '../../common/Link';
+import SectionBox from '../../common/SectionBox';
 import SectionFilterHeader from '../../common/SectionFilterHeader';
+import SimpleTable from '../../common/SimpleTable';
 
 /**
  * Interface of the component's props structure.

frontend/src/components/App/PluginSettings/PluginSettingsDetails.stories.tsx

@@ -1,4 +1,4 @@
-import { TextField } from '@mui/material';
+import TextField from '@mui/material/TextField';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import { PluginInfo, PluginSettingsDetailsProps } from '../../../plugin/pluginsSlice';

frontend/src/components/App/PluginSettings/PluginSettingsDetails.tsx

@@ -13,9 +13,9 @@ import { ConfigStore } from '../../../plugin/configStore';
 import { PluginInfo, reloadPage } from '../../../plugin/pluginsSlice';
 import { useTypedSelector } from '../../../redux/reducers/reducers';
 import NotFoundComponent from '../../404';
-import { SectionBox } from '../../common';
 import { ConfirmDialog } from '../../common/Dialog';
 import ErrorBoundary from '../../common/ErrorBoundary';
+import SectionBox from '../../common/SectionBox';
 
 const PluginSettingsDetailsInitializer = (props: { plugin: PluginInfo }) => {
  const { plugin } = props;

frontend/src/components/App/RouteSwitcher.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { Redirect, Route, RouteProps, Switch, useHistory } from 'react-router-dom';
@@ -15,6 +16,7 @@ import {
 import { getCluster } from '../../lib/util';
 import { setHideAppBar } from '../../redux/actions/actions';
 import { useTypedSelector } from '../../redux/reducers/reducers';
+import Loader from '../common/Loader';
 import { useSidebarItem } from '../Sidebar';
 
 export default function RouteSwitcher(props: { requiresToken: () => boolean }) {
@@ -73,7 +75,9 @@ function RouteComponent({ route }: { route: RouteType }) {
  : route.sidebar?.item || ''
  )}
  >
- <route.component />
+ <Suspense fallback={<Loader title={'...'} />}>
+ <route.component />
+ </Suspense>
  </PageTitle>
  );
 }

frontend/src/components/App/Settings/NumRowsInput.tsx

@@ -1,16 +1,14 @@
 import { Icon } from '@iconify/react';
-import {
- Box,
- Button,
- FormControl,
- IconButton,
- ListItemSecondaryAction,
- ListItemText,
- MenuItem,
- Select,
- SelectChangeEvent,
- TextField,
-} from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import FormControl from '@mui/material/FormControl';
+import IconButton from '@mui/material/IconButton';
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import { SelectChangeEvent } from '@mui/material/Select';
+import TextField from '@mui/material/TextField';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';

frontend/src/components/App/Settings/Settings.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import makeStyles from '@mui/styles/makeStyles';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,7 +7,9 @@ import LocaleSelect from '../../../i18n/LocaleSelect/LocaleSelect';
 import { setVersionDialogOpen } from '../../../redux/actions/actions';
 import { setAppSettings } from '../../../redux/configSlice';
 import { defaultTableRowsPerPageOptions } from '../../../redux/configSlice';
-import { ActionButton, NameValueTable, SectionBox } from '../../common';
+import ActionButton from '../../common/ActionButton/ActionButton';
+import NameValueTable from '../../common/NameValueTable/NameValueTable';
+import SectionBox from '../../common/SectionBox';
 import TimezoneSelect from '../../common/TimezoneSelect';
 import { useSettings } from './hook';
 import NumRowsInput from './NumRowsInput';

frontend/src/components/App/Settings/SettingsButton.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { createRouteURL } from '../../../lib/router';
 import { getCluster } from '../../../lib/util';
-import { ActionButton } from '../../common';
+import ActionButton from '../../common/ActionButton/ActionButton';
 
 export default function SettingsButton(props: { onClickExtra?: () => void }) {
  const { onClickExtra } = props;

frontend/src/components/App/Settings/SettingsCluster.tsx

@@ -1,6 +1,9 @@
 import { Icon, InlineIcon } from '@iconify/react';
-import { Box, Chip, IconButton, TextField } from '@mui/material';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
 import { useTheme } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
 import makeStyles from '@mui/styles/makeStyles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,8 +13,10 @@ import helpers, { ClusterSettings } from '../../../helpers';
 import { useCluster, useClustersConf } from '../../../lib/k8s';
 import { deleteCluster } from '../../../lib/k8s/apiProxy';
 import { setConfig } from '../../../redux/configSlice';
-import { Link, NameValueTable, SectionBox } from '../../common';
 import ConfirmButton from '../../common/ConfirmButton';
+import Link from '../../common/Link';
+import NameValueTable from '../../common/NameValueTable/NameValueTable';
+import SectionBox from '../../common/SectionBox';
 
 const useStyles = makeStyles(() => ({
  input: {

frontend/src/components/App/Settings/SettingsClusters.tsx

@@ -1,6 +1,8 @@
 import { useTranslation } from 'react-i18next';
 import { useClustersConf } from '../../../lib/k8s';
-import { Link, SectionBox, SimpleTable } from '../../common';
+import Link from '../../common/Link';
+import SectionBox from '../../common/SectionBox';
+import SimpleTable from '../../common/SimpleTable';
 
 export default function SettingsClusters() {
  const clusterConf = useClustersConf();

frontend/src/components/App/Settings/ThemeChangeButton.tsx

@@ -1,5 +1,6 @@
 import { Icon } from '@iconify/react';
-import { Button, ButtonGroup } from '@mui/material';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
 import IconButton from '@mui/material/IconButton';
 import { styled } from '@mui/system';
 import React from 'react';

frontend/src/components/App/VersionDialog.tsx

@@ -1,10 +1,11 @@
-import { DialogContent } from '@mui/material';
+import DialogContent from '@mui/material/DialogContent';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import helpers from '../../helpers';
 import { setVersionDialogOpen } from '../../redux/actions/actions';
 import { useTypedSelector } from '../../redux/reducers/reducers';
-import { Dialog, NameValueTable } from '../common';
+import Dialog from '../common/Dialog';
+import NameValueTable from '../common/NameValueTable/NameValueTable';
 
 export default function VersionDialog() {
  const open = useTypedSelector(state => state.ui.isVersionDialogOpen);

frontend/src/components/DetailsViewSection/DetailsViewSection.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { useDispatch } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
-import { SectionBox } from '../common';
+import SectionBox from '../common/SectionBox';
 import DetailsViewSection, { DetailsViewSectionProps } from './DetailsViewSection';
 import { setDetailsView } from './detailsViewSectionSlice';
 

frontend/src/components/Sidebar/ListItemLink.tsx

@@ -1,8 +1,8 @@
 import { Icon, IconProps } from '@iconify/react';
-import { Tooltip } from '@mui/material';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
+import Tooltip from '@mui/material/Tooltip';
 import withStyles from '@mui/styles/withStyles';
 import React from 'react';
 import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';

frontend/src/components/Sidebar/NavigationTabs.tsx

@@ -1,5 +1,5 @@
-import { Divider } from '@mui/material';
 import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTranslation } from 'react-i18next';

frontend/src/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { InlineIcon } from '@iconify/react';
-import { Button } from '@mui/material';
 import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import Drawer from '@mui/material/Drawer';
 import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
@@ -15,7 +15,7 @@ import helpers from '../../helpers';
 import { useCluster } from '../../lib/k8s';
 import { createRouteURL } from '../../lib/router';
 import { useTypedSelector } from '../../redux/reducers/reducers';
-import { ActionButton } from '../common';
+import ActionButton from '../common/ActionButton/ActionButton';
 import CreateButton from '../common/Resource/CreateButton';
 import NavigationTabs from './NavigationTabs';
 import prepareRoutes from './prepareRoutes';

frontend/src/components/authchooser/index.tsx

@@ -1,5 +1,6 @@
 import { InlineIcon } from '@iconify/react';
-import { Box, Button } from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import withStyles from '@mui/styles/withStyles';
 import _ from 'lodash';
 import React from 'react';
@@ -13,9 +14,10 @@ import { createRouteURL, getRoute, getRoutePath } from '../../lib/router';
 import { getCluster, getClusterPrefixedPath } from '../../lib/util';
 import { setConfig } from '../../redux/configSlice';
 import { ClusterDialog } from '../cluster/Chooser';
-import { Link, Loader } from '../common';
 import { DialogTitle } from '../common/Dialog';
 import Empty from '../common/EmptyContent';
+import Link from '../common/Link';
+import Loader from '../common/Loader';
 import OauthPopup from '../oidcauth/OauthPopup';
 
 const ColorButton = withStyles(theme => ({

frontend/src/components/cluster/Chooser.tsx

@@ -1,15 +1,16 @@
 import { Icon, InlineIcon } from '@iconify/react';
-import { DialogActions, IconButton } from '@mui/material';
 import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import ButtonBase from '@mui/material/ButtonBase';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Container from '@mui/material/Container';
 import Dialog, { DialogProps } from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
 import { useTheme } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
@@ -30,7 +31,7 @@ import { getCluster, getClusterPrefixedPath } from '../../lib/util';
 import { setVersionDialogOpen } from '../../redux/actions/actions';
 import { useTypedSelector } from '../../redux/reducers/reducers';
 import { AppLogo } from '../App/AppLogo';
-import ActionButton from '../common/ActionButton';
+import ActionButton from '../common/ActionButton/ActionButton';
 import { DialogTitle } from '../common/Dialog';
 import ErrorBoundary from '../common/ErrorBoundary';
 import Loader from '../common/Loader';