[skip ci] Optimizations/react (#186)

* Replaced the lodash module with submodules * Using lazy imports of heavy modules * Replaced the old authorization verification system with PrivateRoute * Dynamic import of all paths * Minifying the syntax highlighting library * Added missing imports * Added expires to head meta * Don't force the code to follow unnecessary redirects * Kawanaao accept CLA --------- Co-authored-by: Yann S <[email protected]>
azukaar · Feb 4, 2024 · 87c1636 · 87c1636
1 parent 5a0e81b
commit 87c1636
Show file tree

Hide file tree

Showing 42 changed files with 130 additions and 112 deletions.
diff --git a/.clabot b/.clabot
@@ -1,4 +1,4 @@
 {
-  "contributors": ["azukaar", "jwr1", "Jogai", "InterN0te", "catmandx", "revam"],
+  "contributors": ["azukaar", "jwr1", "Jogai", "InterN0te", "catmandx", "revam", "Kawanaao"],
   "message": "We require contributors to sign our [Contributor License Agreement](https://github.com/azukaar/Cosmos-Server/blob/master/cla.md). In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA."
 }
diff --git a/client/index.html b/client/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta http-equiv="expires" content="0">
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cosmos</title>

diff --git a/client/src/PrivateRoute.jsx b/client/src/PrivateRoute.jsx
@@ -0,0 +1,18 @@
+import { Suspense } from "react"
+import { Await, Navigate } from "react-router"
+import isLoggedIn from "./isLoggedIn"
+
+function PrivateRoute({ children }) {
+  return <Suspense>
+    <Await resolve={isLoggedIn()}>
+      {authStatus => {
+        switch (authStatus) {
+          case "OK": return children
+          default: return <Navigate to={authStatus} replace />
+        }
+      }}
+    </Await>
+  </Suspense>
+}
+
+export default PrivateRoute
diff --git a/client/src/api/authentication.jsx b/client/src/api/authentication.jsx
@@ -11,7 +11,7 @@ function login(values) {
 }
 
 function me() {
-  return fetch('/cosmos/api/me/', {
+  return fetch('/cosmos/api/me', {
     method: 'GET',
     headers: {
         'Content-Type': 'application/json'
@@ -21,7 +21,7 @@ function me() {
 }
 
 function logout() {
-  return wrap(fetch('/cosmos/api/logout/', {
+  return wrap(fetch('/cosmos/api/logout', {
     method: 'GET',
     headers: {
         'Content-Type': 'application/json'

diff --git a/client/src/components/third-party/Highlighter.jsx b/client/src/components/third-party/Highlighter.jsx
@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { lazy, useState } from 'react';
 
 // material-ui
 import { Box, CardActions, Collapse, Divider, IconButton, Tooltip } from '@mui/material';
 
 // third-party
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import reactElementToJSXString from 'react-element-to-jsx-string';
+const reactElementToJSXString = lazy(() => import('react-element-to-jsx-string'));
 
 // project import
 import SyntaxHighlight from '../../utils/SyntaxHighlight';

diff --git a/client/src/isLoggedIn.jsx b/client/src/isLoggedIn.jsx
@@ -1,25 +1,25 @@
 
 import * as API from './api';
-import { useEffect } from 'react';
-import { redirectToLocal } from './utils/indexs';
 
-const IsLoggedIn = () => useEffect(() => {
+async function isLoggedIn() {
     const urlSearch = encodeURIComponent(window.location.search);
     const redirectToURL = (window.location.pathname + urlSearch);
+    const data = await API.auth.me();
 
-    API.auth.me().then((data) => {
-        if(data.status != 'OK') {
-            if(data.status == 'NEW_INSTALL') {
-                redirectToLocal('/cosmos-ui/newInstall');
-            } else if (data.status == 'error' && data.code == "HTTP004") {
-                redirectToLocal('/cosmos-ui/login?redirect=' + redirectToURL);
-            } else if (data.status == 'error' && data.code == "HTTP006") {
-                redirectToLocal('/cosmos-ui/loginmfa?redirect=' + redirectToURL);
-            } else if (data.status == 'error' && data.code == "HTTP007") {
-                redirectToLocal('/cosmos-ui/newmfa?redirect=' + redirectToURL);
-            }
-        }
-    })
-}, []);
+    if (data.status == 'NEW_INSTALL') {
+        return '/cosmos-ui/newInstall';
+    } else if (data.status == 'error' && data.code == "HTTP004") {
+        return '/cosmos-ui/login?redirect=' + redirectToURL;
+    } else if (data.status == 'error' && data.code == "HTTP006") {
+        return '/cosmos-ui/loginmfa?redirect=' + redirectToURL;
+    } else if (data.status == 'error' && data.code == "HTTP007") {
+        return '/cosmos-ui/newmfa?redirect=' + redirectToURL;
+    } else if (data.status == 'OK') {
+        return data.status
+    } else {
+        console.warn(`Status "${data.status}" does not have a navigation handler, will be interpreted as OK!`)
+        return 'OK'
+    }
+};
 
-export default IsLoggedIn;
+export default isLoggedIn;
diff --git a/client/src/pages/authentication/openid.jsx b/client/src/pages/authentication/openid.jsx
@@ -7,7 +7,6 @@ import { Checkbox, Grid, Stack, Typography } from '@mui/material';
 import AuthLogin from './auth-forms/AuthLogin';
 import AuthWrapper from './AuthWrapper';
 import { getFaviconURL } from '../../utils/routes';
-import IsLoggedIn from '../../isLoggedIn';
 import { LoadingButton } from '@mui/lab';
 import { Field, useFormik } from 'formik';
 import { useState } from 'react';
@@ -52,7 +51,6 @@ const OpenID = () => {
   }      
 
   return (<AuthWrapper>
-    <IsLoggedIn />
     <Grid container spacing={3}>
       <Grid item xs={12}>
         <Stack spacing={2}>

diff --git a/client/src/pages/config/routeConfigPage.jsx b/client/src/pages/config/routeConfigPage.jsx
@@ -7,7 +7,6 @@ import { useEffect, useState } from "react";
 import * as API  from "../../api";
 import RouteSecurity from "./routes/routeSecurity";
 import RouteOverview from "./routes/routeoverview";
-import IsLoggedIn from "../../isLoggedIn";
 import RouteMetrics from "../dashboard/routeMonitoring";
 import EventExplorerStandalone from "../dashboard/eventsExplorerStandalone";
 
@@ -31,7 +30,6 @@ const RouteConfigPage = () => {
   }, []);
 
   return <div>
-    <IsLoggedIn />
     <h2>
       <Stack spacing={1}>
       <Stack direction="row" spacing={1} alignItems="center">

diff --git a/client/src/pages/config/routes/newRoute.jsx b/client/src/pages/config/routes/newRoute.jsx
@@ -8,7 +8,6 @@ import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';
 
 import * as API from '../../../api';
-import IsLoggedIn from '../../../isLoggedIn';
 import RestartModal from '../../config/users/restart';
 import RouteManagement from '../../config/routes/routeman';
 import { ValidateRoute, getFaviconURL, sanitizeRoute } from '../../../utils/routes';

diff --git a/client/src/pages/config/routes/routeoverview.jsx b/client/src/pages/config/routes/routeoverview.jsx
@@ -7,7 +7,6 @@ import { RouteMode, RouteSecurity } from '../../../components/routeComponents';
 import { getFaviconURL } from '../../../utils/routes';
 import * as API from '../../../api';
 import { CheckOutlined, ClockCircleOutlined, ContainerOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, InfoCircleFilled, InfoCircleOutlined, LockOutlined, NodeExpandOutlined, SafetyCertificateOutlined, UpOutlined } from "@ant-design/icons";
-import IsLoggedIn from '../../../isLoggedIn';
 import { redirectToLocal } from '../../../utils/indexs';
 import { CosmosCheckbox } from '../users/formShortcuts';
 import { Field } from 'formik';

diff --git a/client/src/pages/config/users/configman.jsx b/client/src/pages/config/users/configman.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import IsLoggedIn from '../../../isLoggedIn';
 import * as API from '../../../api';
 import MainCard from '../../../components/MainCard';
 import { Formik, Field } from 'formik';
@@ -60,8 +59,6 @@ const ConfigManagement = () => {
   }, []);
 
   return <div style={{maxWidth: '1000px', margin: ''}}>
-    <IsLoggedIn />
-
     <Stack direction="row" spacing={2} style={{marginBottom: '15px'}}>
       <Button variant="contained" color="primary" startIcon={<SyncOutlined />} onClick={() => {
           refresh();

diff --git a/client/src/pages/config/users/proxyman.jsx b/client/src/pages/config/users/proxyman.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import IsLoggedIn from '../../../isLoggedIn';
 import * as API from '../../../api';
 import MainCard from '../../../components/MainCard';
 import { Formik, Field } from 'formik';
@@ -32,7 +31,6 @@ import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
 import AnimateButton from '../../../components/@extended/AnimateButton';
 import RestartModal from './restart';
 import RouteManagement from '../routes/routeman';
-import { map } from 'lodash';
 import { getFaviconURL, sanitizeRoute, ValidateRoute } from '../../../utils/routes';
 import PrettyTableView from '../../../components/tableView/prettyTableView';
 import HostChip from '../../../components/hostChip';
@@ -145,7 +143,6 @@ const ProxyManagement = () => {
   let routes = config && (config.HTTPConfig.ProxyConfig.Routes || []);
 
   return <div style={{   }}>
-    <IsLoggedIn />
     <Stack direction="row" spacing={1} style={{ marginBottom: '20px' }}>
       <Button variant="contained" color="primary" startIcon={<SyncOutlined />} onClick={() => {
           refresh();

diff --git a/client/src/pages/config/users/restart.jsx b/client/src/pages/config/users/restart.jsx
@@ -20,7 +20,6 @@ import Chip from '@mui/material/Chip';
 import IconButton from '@mui/material/IconButton';
 import * as API from '../../../api';
 import MainCard from '../../../components/MainCard';
-import IsLoggedIn from '../../../isLoggedIn';
 import { useEffect, useState } from 'react';
 import { isDomain } from '../../../utils/indexs';
 

diff --git a/client/src/pages/config/users/usermanagement.jsx b/client/src/pages/config/users/usermanagement.jsx
@@ -20,7 +20,6 @@ import Chip from '@mui/material/Chip';
 import IconButton from '@mui/material/IconButton';
 import * as API from '../../../api';
 import MainCard from '../../../components/MainCard';
-import IsLoggedIn from '../../../isLoggedIn';
 import { useEffect, useState } from 'react';
 import PrettyTableView from '../../../components/tableView/prettyTableView';
 
@@ -64,7 +63,6 @@ const UserManagement = () => {
     }
 
     return <>
-        <IsLoggedIn />
         {openInviteForm ? <Dialog open={openInviteForm} onClose={() => setOpenInviteForm(false)}>
             <DialogTitle>Invite User</DialogTitle>
             <DialogContent>

diff --git a/client/src/pages/constellation/dns.jsx b/client/src/pages/constellation/dns.jsx
@@ -5,7 +5,6 @@ import AddDeviceModal from "./addDevice";
 import PrettyTableView from "../../components/tableView/prettyTableView";
 import { DeleteButton } from "../../components/delete";
 import { CloudOutlined, CloudServerOutlined, CompassOutlined, DesktopOutlined, LaptopOutlined, MobileOutlined, TabletOutlined } from "@ant-design/icons";
-import IsLoggedIn from "../../isLoggedIn";
 import { Alert, Button, CircularProgress, InputLabel, Stack } from "@mui/material";
 import { CosmosCheckbox, CosmosFormDivider, CosmosInputText } from "../config/users/formShortcuts";
 import MainCard from "../../components/MainCard";

diff --git a/client/src/pages/constellation/index.jsx b/client/src/pages/constellation/index.jsx
@@ -6,7 +6,6 @@ import { RouteMode, RouteSecurity } from '../../components/routeComponents';
 import { getFaviconURL } from '../../utils/routes';
 import * as API from '../../api';
 import { CheckOutlined, ClockCircleOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, UpOutlined } from "@ant-design/icons";
-import IsLoggedIn from '../../isLoggedIn';
 import PrettyTabbedView from '../../components/tabbedView/tabbedView';
 import { useClientInfos } from '../../utils/hooks';
 
@@ -18,8 +17,6 @@ const ConstellationIndex = () => {
   const isAdmin = role === "2";
 
   return isAdmin ? <div>
-    <IsLoggedIn />
-
     <PrettyTabbedView path="/cosmos-ui/constellation/:tab" tabs={[
         {
           title: 'VPN',

diff --git a/client/src/pages/constellation/vpn.jsx b/client/src/pages/constellation/vpn.jsx
@@ -5,7 +5,6 @@ import AddDeviceModal from "./addDevice";
 import PrettyTableView from "../../components/tableView/prettyTableView";
 import { DeleteButton } from "../../components/delete";
 import { CloudOutlined, CloudServerOutlined, CompassOutlined, DesktopOutlined, LaptopOutlined, MobileOutlined, TabletOutlined } from "@ant-design/icons";
-import IsLoggedIn from "../../isLoggedIn";
 import { Alert, Button, CircularProgress, Stack } from "@mui/material";
 import { CosmosCheckbox, CosmosFormDivider, CosmosInputText } from "../config/users/formShortcuts";
 import MainCard from "../../components/MainCard";

diff --git a/client/src/pages/dashboard/AlertPage.jsx b/client/src/pages/dashboard/AlertPage.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import IsLoggedIn from '../../isLoggedIn';
 import * as API from '../../api';
 import MainCard from '../../components/MainCard';
 import { Formik, Field, useFormik, FormikProvider } from 'formik';
@@ -400,8 +399,6 @@ const AlertPage = () => {
   }
 
   return <div style={{maxWidth: '1200px', margin: ''}}>
-    <IsLoggedIn />
-
     {openModal && <EditAlertModal open={openModal} onClose={() => setOpenModal(false)} onSave={saveAlert} />}
 
     <Stack direction="row" spacing={2} style={{marginBottom: '15px'}}>

diff --git a/client/src/pages/dashboard/components/mini-plot.jsx b/client/src/pages/dashboard/components/mini-plot.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo  } from 'react';
+import React, { useEffect, useState, useMemo, lazy  } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 // material-ui
@@ -25,7 +25,7 @@ import MainCard from '../../../components/MainCard';
 import { useTheme } from '@mui/material/styles';
 
 // third-party
-import ReactApexChart from 'react-apexcharts';
+const ReactApexChart = lazy(() => import('react-apexcharts'));
 import { FormaterForMetric, formatDate, toUTC } from './utils';
 
 import * as API from '../../../api';

diff --git a/client/src/pages/dashboard/components/plot.jsx b/client/src/pages/dashboard/components/plot.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { lazy, useEffect, useState } from 'react';
 // material-ui
 import {
   Avatar,
@@ -23,7 +23,7 @@ import MainCard from '../../../components/MainCard';
 import { useTheme } from '@mui/material/styles';
 
 // third-party
-import ReactApexChart from 'react-apexcharts';
+const ReactApexChart = lazy(() => import('react-apexcharts'));
 import { FormaterForMetric, toUTC } from './utils';
 
 

diff --git a/client/src/pages/dashboard/components/table.jsx b/client/src/pages/dashboard/components/table.jsx
@@ -34,10 +34,8 @@ import MainCard from '../../../components/MainCard';
 import { useTheme } from '@mui/material/styles';
 
 // third-party
-import ReactApexChart from 'react-apexcharts';
 import { object } from 'prop-types';
 import { FormaterForMetric } from './utils';
-import { set } from 'lodash';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import PlotComponent from './plot';
 

diff --git a/client/src/pages/dashboard/containerMetrics.jsx b/client/src/pages/dashboard/containerMetrics.jsx
@@ -10,8 +10,6 @@ import {
     CircularProgress
 } from '@mui/material';
 
-import IsLoggedIn from '../../isLoggedIn';
-
 import * as API from '../../api';
 import PlotComponent from './components/plot';
 import { formatDate } from './components/utils';
@@ -93,7 +91,6 @@ const ContainerMetrics = ({containerName}) => {
 
     return (
         <>
-        <IsLoggedIn />
         {!metrics && <Box style={{
           width: '100%',
           height: '100%',

diff --git a/client/src/pages/dashboard/index.jsx b/client/src/pages/dashboard/index.jsx
@@ -13,8 +13,6 @@ import {
     CircularProgress
 } from '@mui/material';
 
-import IsLoggedIn from '../../isLoggedIn';
-
 import * as API from '../../api';
 import { formatDate } from './components/utils';
 import ResourceDashboard from './resourceDashboard';
@@ -118,7 +116,6 @@ const DashboardDefault = () => {
 
     return (
         <>
-        <IsLoggedIn />
         {!metrics && <Box style={{
           width: '100%',
           height: '100%',

diff --git a/client/src/pages/dashboard/routeMonitoring.jsx b/client/src/pages/dashboard/routeMonitoring.jsx
@@ -21,8 +21,6 @@ import {
     CircularProgress
 } from '@mui/material';
 
-import IsLoggedIn from '../../isLoggedIn';
-
 import * as API from '../../api';
 import AnimateButton from '../../components/@extended/AnimateButton';
 import PlotComponent from './components/plot';
@@ -144,7 +142,6 @@ const RouteMetrics = ({routeName}) => {
 
     return (
         <>
-        <IsLoggedIn />
         {!metrics && <Box style={{
           width: '100%',
           height: '100%',