Perf updates

This commit is contained in:
Kawanaao 2023-12-02 15:45:10 +02:00
parent c49f93572e
commit 9a556c2b9c
No known key found for this signature in database
GPG key ID: 5B7A8DDCE861E7DC
68 changed files with 3180 additions and 4151 deletions

View file

@ -1,11 +1,20 @@
{ {
"presets": [ "presets": [
"@babel/preset-env", "@babel/env",
"@babel/react",
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-transform-runtime",
[ [
"@babel/preset-react", "babel-plugin-direct-import",
{ {
"runtime": "automatic" "modules": [
"@mui/lab",
"@mui/material",
"@mui/x-date-pickers"
]
} }
] ]
] ],
} }

View file

@ -3,8 +3,7 @@ import Routes from './routes';
import * as React from 'react'; import * as React from 'react';
import ThemeCustomization from './themes'; import ThemeCustomization from './themes';
import ScrollTop from './components/ScrollTop'; import ScrollTop from './components/ScrollTop';
import Snackbar from '@mui/material/Snackbar'; import { Alert, Box, Snackbar } from '@mui/material';
import {Alert, Box} from '@mui/material';
import logo from './assets/images/icons/cosmos.png'; import logo from './assets/images/icons/cosmos.png';
import * as API from './api'; import * as API from './api';
@ -26,7 +25,7 @@ export let SetPrimaryColor = () => {};
export let SetSecondaryColor = () => {}; export let SetSecondaryColor = () => {};
export let GlobalPrimaryColor = ''; export let GlobalPrimaryColor = '';
export let GlobalSecondaryColor = ''; export let GlobalSecondaryColor = '';
const App = () => { const App = () => {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const [message, setMessage] = React.useState(''); const [message, setMessage] = React.useState('');

View file

@ -1,6 +1,4 @@
// material-ui import { Box, useTheme } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { Box } from '@mui/material';
import logo from '../icons/cosmos.png'; import logo from '../icons/cosmos.png';

View file

@ -2,9 +2,7 @@ import PropTypes from 'prop-types';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
// material-ui import { Grid, Typography, Breadcrumbs as MuiBreadcrumbs } from '@mui/material';
import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
import { Grid, Typography } from '@mui/material';
// project imports // project imports
import MainCard from '../MainCard'; import MainCard from '../MainCard';

View file

@ -1,8 +1,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
// material-ui import { Box, useTheme } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { Box } from '@mui/material';
const Dot = ({ color, size }) => { const Dot = ({ color, size }) => {
const theme = useTheme(); const theme = useTheme();

View file

@ -1,8 +1,6 @@
// material-ui
import { styled } from '@mui/material/styles';
import LinearProgress from '@mui/material/LinearProgress';
// loader style // loader style
import { styled, LinearProgress } from '@mui/material';
const LoaderWrapper = styled('div')(({ theme }) => ({ const LoaderWrapper = styled('div')(({ theme }) => ({
position: 'fixed', position: 'fixed',
top: 0, top: 0,

View file

@ -1,9 +1,8 @@
// material-ui
import { useTheme } from '@mui/material/styles';
import { fontWeight } from '@mui/system'; import { fontWeight } from '@mui/system';
import logo from '../../assets/images/icons/cosmos_simple_black.png'; import logo from '../../assets/images/icons/cosmos_simple_black.png';
import logoDark from '../../assets/images/icons/cosmos_simple_white.png'; import logoDark from '../../assets/images/icons/cosmos_simple_white.png';
import { useTheme } from '@mui/material';
// ==============================|| LOGO SVG ||============================== // // ==============================|| LOGO SVG ||============================== //

View file

@ -1,9 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { forwardRef } from 'react'; import { forwardRef } from 'react';
// material-ui import { Card, CardContent, CardHeader, Divider, Typography, useTheme } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material';
// project import // project import
import Highlighter from './third-party/Highlighter'; import Highlighter from './third-party/Highlighter';

View file

@ -1,11 +1,13 @@
// material-ui // material-ui
import { LoadingButton } from '@mui/lab'; import { LoadingButton } from '@mui/lab';
import { Button } from '@mui/material'; import {
import Dialog from '@mui/material/Dialog'; Button,
import DialogActions from '@mui/material/DialogActions'; Dialog,
import DialogContent from '@mui/material/DialogContent'; DialogActions,
import DialogContentText from '@mui/material/DialogContentText'; DialogContent,
import DialogTitle from '@mui/material/DialogTitle'; DialogContentText,
DialogTitle,
} from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';

View file

@ -1,11 +1,13 @@
// material-ui // material-ui
import { LoadingButton } from '@mui/lab'; import { LoadingButton } from '@mui/lab';
import { Button } from '@mui/material'; import {
import Dialog from '@mui/material/Dialog'; Button,
import DialogActions from '@mui/material/DialogActions'; Dialog,
import DialogContent from '@mui/material/DialogContent'; DialogActions,
import DialogContentText from '@mui/material/DialogContentText'; DialogContent,
import DialogTitle from '@mui/material/DialogTitle'; DialogContentText,
DialogTitle,
} from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';

View file

@ -1,8 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import Box from '@mui/material/Box'; import { Grid, Box, TextField, Autocomplete } from '@mui/material';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import { Grid } from '@mui/material';
// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js // From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
const _countries = [ const _countries = [

View file

@ -1,7 +1,6 @@
import { CheckOutlined, ClockCircleOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, SafetyOutlined, UpOutlined } from "@ant-design/icons"; import { CheckOutlined, ClockCircleOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, SafetyOutlined, UpOutlined } from "@ant-design/icons";
import { Card, Chip, Stack, Tooltip } from "@mui/material"; import { Card, Chip, Stack, Tooltip, useTheme } from "@mui/material";
import { useState } from "react"; import { useState } from "react";
import { useTheme } from '@mui/material/styles';
export const DeleteButton = ({onDelete, disabled, size}) => { export const DeleteButton = ({onDelete, disabled, size}) => {
const [confirmDelete, setConfirmDelete] = useState(false); const [confirmDelete, setConfirmDelete] = useState(false);

View file

@ -1,8 +1,7 @@
import { SettingOutlined } from "@ant-design/icons"; import { SettingOutlined } from "@ant-design/icons";
import { Chip } from "@mui/material"; import { Chip, useTheme } from "@mui/material";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { getOrigin, getFullOrigin } from "../utils/routes"; import { getOrigin, getFullOrigin } from "../utils/routes";
import { useTheme } from '@mui/material/styles';
const HostChip = ({route, settings, style}) => { const HostChip = ({route, settings, style}) => {
const theme = useTheme(); const theme = useTheme();

View file

@ -1,12 +1,17 @@
// material-ui // material-ui
import * as React from 'react'; import * as React from 'react';
import { Alert, Button, Stack, Typography } from '@mui/material'; import {
Alert,
Button,
Stack,
Typography,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from '@mui/material';
import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined , SyncOutlined, UserOutlined, KeyOutlined, ArrowUpOutlined, FileZipOutlined } from '@ant-design/icons'; import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined , SyncOutlined, UserOutlined, KeyOutlined, ArrowUpOutlined, FileZipOutlined } from '@ant-design/icons';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { smartDockerLogConcat, tryParseProgressLog } from '../utils/docker'; import { smartDockerLogConcat, tryParseProgressLog } from '../utils/docker';

View file

@ -1,7 +1,6 @@
import { CheckOutlined, ClockCircleOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, SafetyOutlined, UpOutlined } from "@ant-design/icons"; import { CheckOutlined, ClockCircleOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, SafetyOutlined, UpOutlined } from "@ant-design/icons";
import { Card, Chip, Stack, Tooltip } from "@mui/material"; import { Card, Chip, Stack, Tooltip, useTheme } from "@mui/material";
import { useState } from "react"; import { useState } from "react";
import { useTheme } from '@mui/material/styles';
let routeImages = { let routeImages = {
"SERVAPP": { "SERVAPP": {

View file

@ -1,14 +1,21 @@
import * as React from 'react'; import * as React from 'react';
import Table from '@mui/material/Table'; import {
import TableBody from '@mui/material/TableBody'; CircularProgress,
import TableCell from '@mui/material/TableCell'; Input,
import TableContainer from '@mui/material/TableContainer'; InputAdornment,
import TableHead from '@mui/material/TableHead'; Stack,
import TableRow from '@mui/material/TableRow'; TextField,
import Paper from '@mui/material/Paper'; useMediaQuery,
import { CircularProgress, Input, InputAdornment, Stack, TextField, useMediaQuery } from '@mui/material'; Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
useTheme,
} from '@mui/material';
import { SearchOutlined } from '@ant-design/icons'; import { SearchOutlined } from '@ant-design/icons';
import { useTheme } from '@mui/material/styles';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
const PrettyTableView = ({ isLoading, getKey, data, columns, sort, onRowClick, linkTo, buttons, fullWidth }) => { const PrettyTableView = ({ isLoading, getKey, data, columns, sort, onRowClick, linkTo, buttons, fullWidth }) => {

View file

@ -1,8 +1,8 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
// material-ui // material-ui
import { alpha, styled } from '@mui/material/styles'; import { styled } from '@mui/material/styles';
import { Box } from '@mui/material'; import { Box, alpha } from '@mui/material';
// third-party // third-party
import SimpleBar from 'simplebar-react'; import SimpleBar from 'simplebar-react';

View file

@ -3,9 +3,15 @@ import { forwardRef, useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
// material-ui import {
import { useTheme } from '@mui/material/styles'; Avatar,
import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material'; Chip,
ListItemButton,
ListItemIcon,
ListItemText,
Typography,
useTheme,
} from '@mui/material';
// project import // project import
import { activeItem } from '../../../../../store/reducers/menu'; import { activeItem } from '../../../../../store/reducers/menu';

View file

@ -1,6 +1,4 @@
// material-ui import { Box, styled } from '@mui/material';
import { styled } from '@mui/material/styles';
import { Box } from '@mui/material';
// ==============================|| DRAWER HEADER - STYLED ||============================== // // ==============================|| DRAWER HEADER - STYLED ||============================== //

View file

@ -1,8 +1,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
// material-ui import { Stack, Chip, useTheme } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { Stack, Chip } from '@mui/material';
// project import // project import
import DrawerHeaderStyled from './DrawerHeaderStyled'; import DrawerHeaderStyled from './DrawerHeaderStyled';

View file

@ -1,10 +1,8 @@
// material-ui
import { styled } from '@mui/material/styles';
import Drawer from '@mui/material/Drawer';
// project import // project import
import { drawerWidth } from '../../../config'; import { drawerWidth } from '../../../config';
import { styled, Drawer } from '@mui/material';
const openedMixin = (theme) => ({ const openedMixin = (theme) => ({
width: drawerWidth, width: drawerWidth,
borderRight: `1px solid ${theme.palette.divider}`, borderRight: `1px solid ${theme.palette.divider}`,

View file

@ -1,9 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useMemo } from 'react'; import { useMemo } from 'react';
// material-ui import { Box, Drawer, useMediaQuery, useTheme } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { Box, Drawer, useMediaQuery } from '@mui/material';
// project import // project import
import DrawerHeader from './DrawerHeader'; import DrawerHeader from './DrawerHeader';

View file

@ -1,10 +1,8 @@
// material-ui
import { styled } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
// project import // project import
import { drawerWidth } from '../../../config'; import { drawerWidth } from '../../../config';
import { styled, AppBar } from '@mui/material';
// ==============================|| HEADER - APP BAR STYLED ||============================== // // ==============================|| HEADER - APP BAR STYLED ||============================== //
const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({ const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({

View file

@ -1,8 +1,15 @@
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
// material-ui import {
import { useTheme } from '@mui/material/styles'; AppBar,
import { AppBar, Box, ClickAwayListener, IconButton, Paper, Popper, Toolbar } from '@mui/material'; Box,
ClickAwayListener,
IconButton,
Paper,
Popper,
Toolbar,
useTheme,
} from '@mui/material';
// project import // project import
import Search from './Search'; import Search from './Search';

View file

@ -1,7 +1,5 @@
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import { import {
Avatar, Avatar,
Badge, Badge,
@ -17,7 +15,8 @@ import {
Paper, Paper,
Popper, Popper,
Typography, Typography,
useMediaQuery useMediaQuery,
useTheme,
} from '@mui/material'; } from '@mui/material';
import * as timeago from 'timeago.js'; import * as timeago from 'timeago.js';

View file

@ -1,9 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useState } from 'react'; import { useState } from 'react';
// material-ui import { List, ListItemButton, ListItemIcon, ListItemText, useTheme } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { List, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
// assets // assets
import { EditOutlined, ProfileOutlined, LogoutOutlined, UserOutlined, WalletOutlined } from '@ant-design/icons'; import { EditOutlined, ProfileOutlined, LogoutOutlined, UserOutlined, WalletOutlined } from '@ant-design/icons';

View file

@ -1,8 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
// material-ui import { List, ListItemButton, ListItemIcon, ListItemText, useTheme } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { List, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
// assets // assets
import { CommentOutlined, LockOutlined, QuestionCircleOutlined, UserOutlined, UnorderedListOutlined } from '@ant-design/icons'; import { CommentOutlined, LockOutlined, QuestionCircleOutlined, UserOutlined, UnorderedListOutlined } from '@ant-design/icons';

View file

@ -1,8 +1,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import { import {
Avatar, Avatar,
Box, Box,
@ -16,7 +14,8 @@ import {
Stack, Stack,
Tab, Tab,
Tabs, Tabs,
Typography Typography,
useTheme,
} from '@mui/material'; } from '@mui/material';
// project import // project import

View file

@ -1,8 +1,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
// material-ui import { AppBar, IconButton, Toolbar, useMediaQuery, useTheme } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { AppBar, IconButton, Toolbar, useMediaQuery } from '@mui/material';
// project import // project import
import AppBarStyled from './AppBarStyled'; import AppBarStyled from './AppBarStyled';

View file

@ -2,9 +2,7 @@ import { useEffect, useState } from 'react';
import { Outlet } from 'react-router-dom'; import { Outlet } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
// material-ui import { Box, Toolbar, useMediaQuery, useTheme } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { Box, Toolbar, useMediaQuery } from '@mui/material';
// project import // project import
import Drawer from './Drawer'; import Drawer from './Drawer';

View file

@ -2,7 +2,7 @@
import { GithubOutlined, QuestionOutlined, BugOutlined } from '@ant-design/icons'; import { GithubOutlined, QuestionOutlined, BugOutlined } from '@ant-design/icons';
import DiscordOutlined from '../assets/images/icons/discord.svg' import DiscordOutlined from '../assets/images/icons/discord.svg'
import DiscordOutlinedWhite from '../assets/images/icons/discord_white.svg' import DiscordOutlinedWhite from '../assets/images/icons/discord_white.svg'
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material';
// ==============================|| MENU ITEMS - SAMPLE PAGE & DOCUMENTATION ||============================== // // ==============================|| MENU ITEMS - SAMPLE PAGE & DOCUMENTATION ||============================== //

View file

@ -1,7 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
// material-ui // material-ui
import { Box, Grid } from '@mui/material'; import { Box, Grid, useTheme } from '@mui/material';
// project import // project import
import AuthCard from './AuthCard'; import AuthCard from './AuthCard';
@ -10,7 +10,6 @@ import AuthFooter from '../../components/cards/AuthFooter';
// assets // assets
import AuthBackground from '../../assets/images/auth/AuthBackground'; import AuthBackground from '../../assets/images/auth/AuthBackground';
import { useTheme } from '@mui/material/styles';
// ==============================|| AUTHENTICATION - WRAPPER ||============================== // // ==============================|| AUTHENTICATION - WRAPPER ||============================== //

View file

@ -57,149 +57,147 @@ const AuthRegister = ({nickname, isRegister, isInviteLink, regkey}) => {
changePassword(''); changePassword('');
}, []); }, []);
return ( return <>
<> <Formik
<Formik initialValues={{
initialValues={{ nickname: nickname,
lastname: '',
email: '',
company: '',
password: '',
submit: null
}}
validationSchema={Yup.object().shape({
nickname: Yup.string().max(255).required('Nickname is required'),
password: Yup.string()
.max(255)
.required('Password is required')
.matches(
/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[~!@#$%\^&\*\(\)_\+=\-\{\[\}\]:;"'<,>\/])(?=.{9,})/,
'Must Contain 9 Characters, One Uppercase, One Lowercase, One Number and one special case Character (~!@#$%^&*()_+=-{[}]:;"\'<>.?/)'
),
})}
onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
return API.users.register({
nickname: nickname, nickname: nickname,
lastname: '', registerKey: regkey,
email: '', password: values.password,
company: '', }).then((res) => {
password: '', setStatus({ success: true });
submit: null setSubmitting(false);
}} redirectToLocal('/cosmos-ui/login');
validationSchema={Yup.object().shape({ }).catch((err) => {
nickname: Yup.string().max(255).required('Nickname is required'), setStatus({ success: false });
password: Yup.string() setErrors({ submit: err.message });
.max(255) setSubmitting(false);
.required('Password is required') });
.matches( }}
/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[~!@#$%\^&\*\(\)_\+=\-\{\[\}\]:;"'<,>\/])(?=.{9,})/, >
'Must Contain 9 Characters, One Uppercase, One Lowercase, One Number and one special case Character (~!@#$%^&*()_+=-{[}]:;"\'<>.?/)' {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
), <form noValidate onSubmit={handleSubmit}>
})} <Grid container spacing={3}>
onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => { {isInviteLink ? <Grid item xs={12}>
return API.users.register({ <Alert severity="info">
nickname: nickname, <strong>Invite Link</strong> - You have been invited to join this Cosmos instance. This Nickname has been provided to us by your administrator. Keep note of it, you will need it to login.
registerKey: regkey, </Alert>
password: values.password, </Grid> : ''}
}).then((res) => { {isInviteLink ? <Grid item xs={12}>
setStatus({ success: true }); <Stack spacing={1}>
setSubmitting(false); <InputLabel htmlFor="nickname-signup">Nickname</InputLabel>
redirectToLocal('/cosmos-ui/login'); <OutlinedInput
}).catch((err) => { id="nickname-login"
setStatus({ success: false }); type="nickname"
setErrors({ submit: err.message }); value={nickname}
setSubmitting(false); name="nickname"
}); onBlur={handleBlur}
}} onChange={handleChange}
> placeholder=""
{({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => ( disabled={true}
<form noValidate onSubmit={handleSubmit}> fullWidth
<Grid container spacing={3}> error={Boolean(touched.nickname && errors.nickname)}
{isInviteLink ? <Grid item xs={12}> />
<Alert severity="info"> {touched.nickname && errors.nickname && (
<strong>Invite Link</strong> - You have been invited to join this Cosmos instance. This Nickname has been provided to us by your administrator. Keep note of it, you will need it to login. <FormHelperText error id="helper-text-nickname-signup">
</Alert> {errors.nickname}
</Grid> : ''} </FormHelperText>
{isInviteLink ? <Grid item xs={12}> )}
<Stack spacing={1}> </Stack>
<InputLabel htmlFor="nickname-signup">Nickname</InputLabel> </Grid> : ''}
<OutlinedInput <Grid item xs={12}>
id="nickname-login" <Stack spacing={1}>
type="nickname" <InputLabel htmlFor="password-signup">Password</InputLabel>
value={nickname} <OutlinedInput
name="nickname" fullWidth
onBlur={handleBlur} error={Boolean(touched.password && errors.password)}
onChange={handleChange} id="password-signup"
placeholder="" type={showPassword ? 'text' : 'password'}
disabled={true} value={values.password}
fullWidth name="password"
error={Boolean(touched.nickname && errors.nickname)} onBlur={handleBlur}
/> onChange={(e) => {
{touched.nickname && errors.nickname && ( handleChange(e);
<FormHelperText error id="helper-text-nickname-signup"> changePassword(e.target.value);
{errors.nickname} }}
</FormHelperText> endAdornment={
)} <InputAdornment position="end">
</Stack> <IconButton
</Grid> : ''} aria-label="toggle password visibility"
<Grid item xs={12}> onClick={handleClickShowPassword}
<Stack spacing={1}> onMouseDown={handleMouseDownPassword}
<InputLabel htmlFor="password-signup">Password</InputLabel> edge="end"
<OutlinedInput size="large"
fullWidth >
error={Boolean(touched.password && errors.password)} {showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
id="password-signup" </IconButton>
type={showPassword ? 'text' : 'password'} </InputAdornment>
value={values.password} }
name="password" placeholder="********"
onBlur={handleBlur} inputProps={{}}
onChange={(e) => { />
handleChange(e); {touched.password && errors.password && (
changePassword(e.target.value); <FormHelperText error id="helper-text-password-signup">
}} {errors.password}
endAdornment={ </FormHelperText>
<InputAdornment position="end"> )}
<IconButton </Stack>
aria-label="toggle password visibility" <FormControl fullWidth sx={{ mt: 2 }}>
onClick={handleClickShowPassword} <Grid container spacing={2} alignItems="center">
onMouseDown={handleMouseDownPassword} <Grid item>
edge="end" <Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
size="large" </Grid>
> <Grid item>
{showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />} <Typography variant="subtitle1" fontSize="0.75rem">
</IconButton> {level?.label}
</InputAdornment> </Typography>
}
placeholder="********"
inputProps={{}}
/>
{touched.password && errors.password && (
<FormHelperText error id="helper-text-password-signup">
{errors.password}
</FormHelperText>
)}
</Stack>
<FormControl fullWidth sx={{ mt: 2 }}>
<Grid container spacing={2} alignItems="center">
<Grid item>
<Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
</Grid>
<Grid item>
<Typography variant="subtitle1" fontSize="0.75rem">
{level?.label}
</Typography>
</Grid>
</Grid> </Grid>
</FormControl>
</Grid>
{errors.submit && (
<Grid item xs={12}>
<FormHelperText error>{errors.submit}</FormHelperText>
</Grid> </Grid>
)} </FormControl>
<Grid item xs={12}>
<LoadingButton
disableElevation
loading={isSubmitting}
fullWidth
size="large"
type="submit"
variant="contained"
color="primary"
>
{
isRegister ? 'Register' : 'Reset Password'
}
</LoadingButton>
</Grid>
</Grid> </Grid>
</form> {errors.submit && (
)} <Grid item xs={12}>
</Formik> <FormHelperText error>{errors.submit}</FormHelperText>
</> </Grid>
); )}
<Grid item xs={12}>
<LoadingButton
disableElevation
loading={isSubmitting}
fullWidth
size="large"
type="submit"
variant="contained"
color="primary"
>
{
isRegister ? 'Register' : 'Reset Password'
}
</LoadingButton>
</Grid>
</Grid>
</form>
)}
</Formik>
</>;
}; };
export default AuthRegister; export default AuthRegister;

View file

@ -1,6 +1,4 @@
// material-ui import { useMediaQuery, Button, Stack, useTheme } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { useMediaQuery, Button, Stack } from '@mui/material';
// assets // assets
import Google from '../../../assets/images/icons/google.svg'; import Google from '../../../assets/images/icons/google.svg';

View file

@ -16,7 +16,8 @@ import {
Typography, Typography,
Alert, Alert,
TextField, TextField,
Tooltip Tooltip,
useTheme,
} from '@mui/material'; } from '@mui/material';
// project import // project import
@ -28,7 +29,6 @@ import * as Yup from 'yup';
import * as API from '../../api'; import * as API from '../../api';
import QRCode from 'qrcode'; import QRCode from 'qrcode';
import { useTheme } from '@mui/material/styles';
import { Formik } from 'formik'; import { Formik } from 'formik';
import { LoadingButton } from '@mui/lab'; import { LoadingButton } from '@mui/lab';
import { CosmosCollapse } from '../config/users/formShortcuts'; import { CosmosCollapse } from '../config/users/formShortcuts';

View file

@ -1,9 +1,8 @@
// material-ui
import { styled } from '@mui/material/styles';
// project import // project import
import ComponentSkeleton from './ComponentSkeleton'; import ComponentSkeleton from './ComponentSkeleton';
import MainCard from '../../components/MainCard'; import MainCard from '../../components/MainCard';
import { styled } from '@mui/material';
// styles // styles
const IFrameWrapper = styled('iframe')(() => ({ const IFrameWrapper = styled('iframe')(() => ({

View file

@ -1,8 +1,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
// material-ui import { Grid, Stack, Typography, useTheme } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { Grid, Stack, Typography } from '@mui/material';
// project import // project import
import MainCard from '../../components/MainCard'; import MainCard from '../../components/MainCard';

View file

@ -1,11 +1,30 @@
// material-ui // material-ui
import { AppstoreAddOutlined, PlusCircleOutlined, ReloadOutlined, SearchOutlined, SettingOutlined } from '@ant-design/icons'; import { AppstoreAddOutlined, PlusCircleOutlined, ReloadOutlined, SearchOutlined, SettingOutlined } from '@ant-design/icons';
import { Alert, Badge, Button, Card, Checkbox, Chip, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Input, InputAdornment, TextField, Tooltip, Typography } from '@mui/material'; import {
Alert,
Badge,
Button,
Card,
Checkbox,
Chip,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
Input,
InputAdornment,
TextField,
Tooltip,
Typography,
Paper,
styled,
} from '@mui/material';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2'; import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
import { Stack } from '@mui/system'; import { Stack } from '@mui/system';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
import * as API from '../../../api'; import * as API from '../../../api';
import IsLoggedIn from '../../../isLoggedIn'; import IsLoggedIn from '../../../isLoggedIn';

File diff suppressed because it is too large Load diff

View file

@ -21,13 +21,13 @@ import {
AccordionDetails, AccordionDetails,
Accordion, Accordion,
Chip, Chip,
Autocomplete,
CircularProgress,
} from '@mui/material'; } from '@mui/material';
import { Formik, Field } from 'formik'; import { Formik, Field } from 'formik';
import { DownOutlined, UpOutlined } from '@ant-design/icons'; import { DownOutlined, UpOutlined } from '@ant-design/icons';
import AnimateButton from '../../../components/@extended/AnimateButton'; import AnimateButton from '../../../components/@extended/AnimateButton';
import RestartModal from './restart'; import RestartModal from './restart';
import Autocomplete from '@mui/material/Autocomplete';
import CircularProgress from '@mui/material/CircularProgress';
import defaultport from '../../servapps/defaultport.json'; import defaultport from '../../servapps/defaultport.json';

View file

@ -4,7 +4,6 @@ import * as API from '../../../api';
import MainCard from '../../../components/MainCard'; import MainCard from '../../../components/MainCard';
import { Formik, Field } from 'formik'; import { Formik, Field } from 'formik';
import * as Yup from 'yup'; import * as Yup from 'yup';
import { useTheme } from '@mui/material/styles';
import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined , SyncOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons'; import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined , SyncOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
import { import {
Alert, Alert,
@ -26,7 +25,7 @@ import {
MenuItem, MenuItem,
Chip, Chip,
CircularProgress, CircularProgress,
useTheme,
} from '@mui/material'; } from '@mui/material';
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'; import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
import AnimateButton from '../../../components/@extended/AnimateButton'; import AnimateButton from '../../../components/@extended/AnimateButton';

View file

@ -1,23 +1,28 @@
// material-ui // material-ui
import * as React from 'react'; import * as React from 'react';
import { Alert, Button, Stack, Typography } from '@mui/material'; import {
Alert,
Button,
Stack,
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
TextField,
CircularProgress,
Chip,
IconButton,
} from '@mui/material';
import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined , SyncOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons'; import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined , SyncOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';
import CircularProgress from '@mui/material/CircularProgress';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import * as API from '../../../api'; import * as API from '../../../api';
import MainCard from '../../../components/MainCard'; import MainCard from '../../../components/MainCard';
import IsLoggedIn from '../../../isLoggedIn'; import IsLoggedIn from '../../../isLoggedIn';

View file

@ -1,23 +1,26 @@
// material-ui // material-ui
import * as React from 'react'; import * as React from 'react';
import { Button, Typography } from '@mui/material'; import {
Button,
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
TextField,
CircularProgress,
Chip,
IconButton,
} from '@mui/material';
import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined , SyncOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons'; import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined , SyncOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';
import CircularProgress from '@mui/material/CircularProgress';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import * as API from '../../../api'; import * as API from '../../../api';
import MainCard from '../../../components/MainCard'; import MainCard from '../../../components/MainCard';
import IsLoggedIn from '../../../isLoggedIn'; import IsLoggedIn from '../../../isLoggedIn';

View file

@ -1,10 +1,17 @@
// material-ui // material-ui
import { Alert, Button, InputLabel, OutlinedInput, Stack, TextField } from '@mui/material'; import {
import Dialog from '@mui/material/Dialog'; Alert,
import DialogActions from '@mui/material/DialogActions'; Button,
import DialogContent from '@mui/material/DialogContent'; InputLabel,
import DialogContentText from '@mui/material/DialogContentText'; OutlinedInput,
import DialogTitle from '@mui/material/DialogTitle'; Stack,
TextField,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useState } from 'react'; import { useState } from 'react';
import ResponsiveButton from '../../components/responseiveButton'; import ResponsiveButton from '../../components/responseiveButton';

View file

@ -17,13 +17,11 @@ import {
Stack, Stack,
TextField, TextField,
Typography, Typography,
Alert Alert,
useTheme,
} from '@mui/material'; } from '@mui/material';
import MainCard from '../../../components/MainCard'; import MainCard from '../../../components/MainCard';
// material-ui
import { useTheme } from '@mui/material/styles';
// third-party // third-party
import ReactApexChart from 'react-apexcharts'; import ReactApexChart from 'react-apexcharts';
import { FormaterForMetric, formatDate, toUTC } from './utils'; import { FormaterForMetric, formatDate, toUTC } from './utils';

View file

@ -15,13 +15,11 @@ import {
Stack, Stack,
TextField, TextField,
Typography, Typography,
Alert Alert,
useTheme,
} from '@mui/material'; } from '@mui/material';
import MainCard from '../../../components/MainCard'; import MainCard from '../../../components/MainCard';
// material-ui
import { useTheme } from '@mui/material/styles';
// third-party // third-party
import ReactApexChart from 'react-apexcharts'; import ReactApexChart from 'react-apexcharts';
import { FormaterForMetric, toUTC } from './utils'; import { FormaterForMetric, toUTC } from './utils';

View file

@ -26,13 +26,11 @@ import {
DialogTitle, DialogTitle,
DialogContent, DialogContent,
DialogContentText, DialogContentText,
DialogActions DialogActions,
useTheme,
} from '@mui/material'; } from '@mui/material';
import MainCard from '../../../components/MainCard'; import MainCard from '../../../components/MainCard';
// material-ui
import { useTheme } from '@mui/material/styles';
// third-party // third-party
import ReactApexChart from 'react-apexcharts'; import ReactApexChart from 'react-apexcharts';
import { object } from 'prop-types'; import { object } from 'prop-types';

View file

@ -1,11 +1,30 @@
// material-ui // material-ui
import { AppstoreAddOutlined, PlusCircleOutlined, ReloadOutlined, SearchOutlined, SettingOutlined } from '@ant-design/icons'; import { AppstoreAddOutlined, PlusCircleOutlined, ReloadOutlined, SearchOutlined, SettingOutlined } from '@ant-design/icons';
import { Alert, Badge, Button, Card, Checkbox, Chip, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Input, InputAdornment, TextField, Tooltip, Typography } from '@mui/material'; import {
Alert,
Badge,
Button,
Card,
Checkbox,
Chip,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
Input,
InputAdornment,
TextField,
Tooltip,
Typography,
Paper,
styled,
} from '@mui/material';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2'; import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
import { Stack } from '@mui/system'; import { Stack } from '@mui/system';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
import * as API from '../../api'; import * as API from '../../api';
import IsLoggedIn from '../../isLoggedIn'; import IsLoggedIn from '../../isLoggedIn';

View file

@ -4,7 +4,6 @@ import * as API from '../../api';
import MainCard from '../../components/MainCard'; import MainCard from '../../components/MainCard';
import { Formik, Field } from 'formik'; import { Formik, Field } from 'formik';
import * as Yup from 'yup'; import * as Yup from 'yup';
import { useTheme } from '@mui/material/styles';
import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined, SyncOutlined, UserOutlined, KeyOutlined, ArrowRightOutlined } from '@ant-design/icons'; import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined, SyncOutlined, UserOutlined, KeyOutlined, ArrowRightOutlined } from '@ant-design/icons';
import { import {
Alert, Alert,
@ -21,7 +20,7 @@ import {
DialogContentText, DialogContentText,
DialogActions, DialogActions,
IconButton, IconButton,
useTheme,
} from '@mui/material'; } from '@mui/material';
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'; import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
import AnimateButton from '../../components/@extended/AnimateButton'; import AnimateButton from '../../components/@extended/AnimateButton';

View file

@ -1,23 +1,31 @@
// material-ui // material-ui
import * as React from 'react'; import * as React from 'react';
import { Alert, Button, Checkbox, FormControlLabel, FormLabel, Stack, Typography } from '@mui/material'; import {
Alert,
Button,
Checkbox,
FormControlLabel,
FormLabel,
Stack,
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
TextField,
CircularProgress,
Chip,
IconButton,
} from '@mui/material';
import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined, SyncOutlined, UserOutlined, KeyOutlined, ArrowUpOutlined, FileZipOutlined, ArrowDownOutlined, ConsoleSqlOutlined } from '@ant-design/icons'; import { WarningOutlined, PlusCircleOutlined, CopyOutlined, ExclamationCircleOutlined, SyncOutlined, UserOutlined, KeyOutlined, ArrowUpOutlined, FileZipOutlined, ArrowDownOutlined, ConsoleSqlOutlined } from '@ant-design/icons';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';
import CircularProgress from '@mui/material/CircularProgress';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import * as API from '../../../api'; import * as API from '../../../api';
import MainCard from '../../../components/MainCard'; import MainCard from '../../../components/MainCard';
import IsLoggedIn from '../../../isLoggedIn'; import IsLoggedIn from '../../../isLoggedIn';

View file

@ -401,7 +401,8 @@ const DockerContainerSetup = ({ noCard, containerInfo, installer, OnChange, refr
</form> </form>
)} )}
</Formik> </Formik>
</div>); </div>
);
}; };
export default DockerContainerSetup; export default DockerContainerSetup;

View file

@ -1,8 +1,6 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import * as API from '../../../api'; import * as API from '../../../api';
import { Alert, Input, Stack, useMediaQuery, useTheme } from '@mui/material'; import { Alert, Input, Stack, useMediaQuery, useTheme, Button, TextField } from '@mui/material';
import Terminal from '../../../components/terminal'; import Terminal from '../../../components/terminal';
import { ApiOutlined, SendOutlined } from '@ant-design/icons'; import { ApiOutlined, SendOutlined } from '@ant-design/icons';
import ResponsiveButton from '../../../components/responseiveButton'; import ResponsiveButton from '../../../components/responseiveButton';

View file

@ -1,13 +1,25 @@
// material-ui // material-ui
import * as React from 'react'; import * as React from 'react';
import { Alert, Button, Checkbox, FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, Stack, TextField } from '@mui/material'; import {
Alert,
Button,
Checkbox,
FormControl,
FormHelperText,
Grid,
InputLabel,
MenuItem,
Select,
Stack,
TextField,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
CircularProgress,
} from '@mui/material';
import { PlusCircleFilled, PlusCircleOutlined, WarningOutlined } from '@ant-design/icons'; import { PlusCircleFilled, PlusCircleOutlined, WarningOutlined } from '@ant-design/icons';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import CircularProgress from '@mui/material/CircularProgress';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { LoadingButton } from '@mui/lab'; import { LoadingButton } from '@mui/lab';
import { FormikProvider, useFormik } from 'formik'; import { FormikProvider, useFormik } from 'formik';

View file

@ -1,13 +1,25 @@
// material-ui // material-ui
import * as React from 'react'; import * as React from 'react';
import { Alert, Button, Checkbox, FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, Stack, TextField } from '@mui/material'; import {
Alert,
Button,
Checkbox,
FormControl,
FormHelperText,
Grid,
InputLabel,
MenuItem,
Select,
Stack,
TextField,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
CircularProgress,
} from '@mui/material';
import { PlusCircleFilled, PlusCircleOutlined, WarningOutlined } from '@ant-design/icons'; import { PlusCircleFilled, PlusCircleOutlined, WarningOutlined } from '@ant-design/icons';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import CircularProgress from '@mui/material/CircularProgress';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { LoadingButton } from '@mui/lab'; import { LoadingButton } from '@mui/lab';
import { FormikProvider, useFormik } from 'formik'; import { FormikProvider, useFormik } from 'formik';

View file

@ -1,11 +1,32 @@
// material-ui // material-ui
import { AlertFilled, AppstoreAddOutlined, CloseSquareOutlined, DeleteOutlined, PauseCircleOutlined, PlaySquareOutlined, PlusCircleOutlined, ReloadOutlined, RollbackOutlined, SearchOutlined, SettingOutlined, StopOutlined, UpCircleOutlined, UpSquareFilled, WarningFilled } from '@ant-design/icons'; import { AlertFilled, AppstoreAddOutlined, CloseSquareOutlined, DeleteOutlined, PauseCircleOutlined, PlaySquareOutlined, PlusCircleOutlined, ReloadOutlined, RollbackOutlined, SearchOutlined, SettingOutlined, StopOutlined, UpCircleOutlined, UpSquareFilled, WarningFilled } from '@ant-design/icons';
import { Alert, Badge, Button, Card, Checkbox, Chip, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, IconButton, Input, InputAdornment, TextField, Tooltip, Typography } from '@mui/material'; import {
Alert,
Badge,
Button,
Card,
Checkbox,
Chip,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
IconButton,
Input,
InputAdornment,
TextField,
Tooltip,
Typography,
Paper,
styled,
useTheme,
} from '@mui/material';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2'; import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
import { Stack } from '@mui/system'; import { Stack } from '@mui/system';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
import * as API from '../../api'; import * as API from '../../api';
import IsLoggedIn from '../../isLoggedIn'; import IsLoggedIn from '../../isLoggedIn';
@ -22,7 +43,6 @@ import { ContainerNetworkWarning } from '../../components/containers';
import { ServAppIcon } from '../../utils/servapp-icon'; import { ServAppIcon } from '../../utils/servapp-icon';
import MiniPlotComponent from '../dashboard/components/mini-plot'; import MiniPlotComponent from '../dashboard/components/mini-plot';
import { DownloadFile } from '../../api/downloadButton'; import { DownloadFile } from '../../api/downloadButton';
import { useTheme } from '@mui/material/styles';
const Item = styled(Paper)(({ theme }) => ({ const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',

View file

@ -1,11 +1,32 @@
// material-ui // material-ui
import { AppstoreAddOutlined, CloseSquareOutlined, DeleteOutlined, PauseCircleOutlined, PlaySquareOutlined, PlusCircleOutlined, ReloadOutlined, RollbackOutlined, SearchOutlined, SettingOutlined, StopOutlined, SyncOutlined, UpCircleOutlined, UpSquareFilled } from '@ant-design/icons'; import { AppstoreAddOutlined, CloseSquareOutlined, DeleteOutlined, PauseCircleOutlined, PlaySquareOutlined, PlusCircleOutlined, ReloadOutlined, RollbackOutlined, SearchOutlined, SettingOutlined, StopOutlined, SyncOutlined, UpCircleOutlined, UpSquareFilled } from '@ant-design/icons';
import { Alert, Badge, Button, Card, Checkbox, Chip, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, IconButton, Input, InputAdornment, TextField, Tooltip, Typography, useTheme } from '@mui/material'; import {
Alert,
Badge,
Button,
Card,
Checkbox,
Chip,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
IconButton,
Input,
InputAdornment,
TextField,
Tooltip,
Typography,
useTheme,
Paper,
styled,
} from '@mui/material';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2'; import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
import { Stack } from '@mui/system'; import { Stack } from '@mui/system';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
import * as API from '../../api'; import * as API from '../../api';
import IsLoggedIn from '../../isLoggedIn'; import IsLoggedIn from '../../isLoggedIn';

View file

@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
import { useMemo } from 'react'; import { useMemo } from 'react';
// material-ui // material-ui
import { CssBaseline, StyledEngineProvider } from '@mui/material'; import { CssBaseline, StyledEngineProvider, createTheme } from '@mui/material';
import { createTheme, ThemeProvider } from '@mui/material/styles'; import { ThemeProvider } from '@mui/material/styles';
// project import // project import
import Palette from './palette'; import Palette from './palette';

View file

@ -1,7 +1,5 @@
// material-ui
import { alpha } from '@mui/material/styles';
// ==============================|| OVERRIDES - OUTLINED INPUT ||============================== // // ==============================|| OVERRIDES - OUTLINED INPUT ||============================== //
import { alpha } from '@mui/material';
export default function OutlinedInput(theme) { export default function OutlinedInput(theme) {
return { return {

View file

@ -1,6 +1,3 @@
// material-ui
import { createTheme } from '@mui/material/styles';
// third-party // third-party
import { presetPalettes } from '@ant-design/colors'; import { presetPalettes } from '@ant-design/colors';
@ -9,6 +6,8 @@ import ThemeOption from './theme';
import * as API from '../api'; import * as API from '../api';
import { createTheme } from '@mui/material';
// ==============================|| DEFAULT THEME - PALETTE ||============================== // // ==============================|| DEFAULT THEME - PALETTE ||============================== //
const Palette = (mode, PrimaryColor, SecondaryColor) => { const Palette = (mode, PrimaryColor, SecondaryColor) => {

View file

@ -1,7 +1,5 @@
// material-ui
import { alpha } from '@mui/material/styles';
// ==============================|| DEFAULT THEME - CUSTOM SHADOWS ||============================== // // ==============================|| DEFAULT THEME - CUSTOM SHADOWS ||============================== //
import { alpha } from '@mui/material';
const CustomShadows = (theme) => ({ const CustomShadows = (theme) => ({
button: `0 2px #0000000b`, button: `0 2px #0000000b`,

View file

@ -1,6 +1,8 @@
// ==============================|| PRESET THEME - THEME SELECTOR ||============================== // // ==============================|| PRESET THEME - THEME SELECTOR ||============================== //
import { purple, pink, deepPurple, blueGrey, lightBlue, lightGreen, orange, teal, indigo } from '@mui/material/colors'; import { pink, blueGrey, lightGreen, teal } from '@mui/material/colors';
import { purple, deepPurple, lightBlue, orange, indigo } from '@mui/material';
const Theme = (colors, darkMode) => { const Theme = (colors, darkMode) => {
const { blue, red, gold, cyan, green, grey } = colors; const { blue, red, gold, cyan, green, grey } = colors;

View file

@ -1,7 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
// third-party // third-party
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; import { SyntaxHighlighter } from 'react-syntax-highlighter';
import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs'; import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript'; import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';

View file

@ -1,4 +1,3 @@
import React from 'react';
import { useCookies } from 'react-cookie'; import { useCookies } from 'react-cookie';
import { logout } from '../api/authentication'; import { logout } from '../api/authentication';

26
eslint.config.js Normal file
View file

@ -0,0 +1,26 @@
const reactAll = require('eslint-plugin-react/configs/all');
const globals = require('globals');
module.exports = [
{
files: ['client/src/**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
...reactAll,
languageOptions: {
...reactAll.languageOptions,
globals: {
...globals.serviceworker,
...globals.browser,
},
},
rules: {
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'no-restricted-imports': [
"error",
{
"patterns": ["@mui/*/*/*"]
}
]
},
},
];

5125
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -66,6 +66,9 @@
"whiskers.js": "^1.0.0", "whiskers.js": "^1.0.0",
"yup": "^0.32.11" "yup": "^0.32.11"
}, },
"peerDependencies": {
"bn.js": ">= 4.12.0 =< 5.2.1"
},
"overrides": { "overrides": {
"react-lazyload": { "react-lazyload": {
"react": "^18.2.0", "react": "^18.2.0",
@ -114,14 +117,16 @@
"@babel/core": "^7.23.5", "@babel/core": "^7.23.5",
"@babel/eslint-parser": "^7.19.1", "@babel/eslint-parser": "^7.19.1",
"@babel/preset-env": "^7.23.5", "@babel/preset-env": "^7.23.5",
"@babel/preset-typescript": "^7.23.3",
"@swc/core": "^1.3.100", "@swc/core": "^1.3.100",
"babel-loader": "^9.1.3", "babel-loader": "^9.1.3",
"babel-plugin-direct-import": "^1.0.0",
"browserify-fs": "^1.0.0", "browserify-fs": "^1.0.0",
"buffer": "^6.0.3", "buffer": "^6.0.3",
"crypto-browserify": "^3.12.0", "crypto-browserify": "^3.12.0",
"css-loader": "^6.8.1", "css-loader": "^6.8.1",
"css-minimizer-webpack-plugin": "^5.0.1", "css-minimizer-webpack-plugin": "^5.0.1",
"eslint": "^8.23.1", "eslint": "^8.55.0",
"eslint-config-airbnb-typescript": "^17.0.0", "eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-config-react-app": "7.0.1", "eslint-config-react-app": "7.0.1",
@ -130,10 +135,12 @@
"eslint-plugin-import": "^2.26.0", "eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "6.6.1", "eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.8", "eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-react-hooks": "4.6.0",
"eslint-webpack-plugin": "^4.0.1",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.3", "html-webpack-plugin": "^5.5.3",
"inspectpack": "^4.7.1",
"mini-css-extract-plugin": "^2.7.6", "mini-css-extract-plugin": "^2.7.6",
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
"prettier": "2.7.1", "prettier": "2.7.1",

View file

@ -1,6 +1,11 @@
{ {
"compilerOptions": { "compilerOptions": {
"outDir": "client/dist", "outDir": "client/dist",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"noImplicitAny": true, "noImplicitAny": true,
"module": "es6", "module": "es6",
"target": "es6", "target": "es6",

View file

@ -1,9 +1,12 @@
const { IgnorePlugin } = require("webpack") const { IgnorePlugin } = require('webpack')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const TerserPlugin = require("terser-webpack-plugin"); const { DuplicatesPlugin } = require("inspectpack/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin"); const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const HtmlWebpackPlugin = require('html-webpack-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const path = require('path'); const path = require('path');
module.exports = { module.exports = {
@ -11,26 +14,26 @@ module.exports = {
module: { module: {
rules: [ rules: [
{ {
test: /\.(ts|tsx)$/, test: /\.(ts|tsx|js|jsx|mjs|cjs)$/,
use: 'ts-loader', use: {
exclude: /node_modules/, loader: 'babel-loader',
}, options: {
{ cacheCompression: true
test: /\.(js|jsx)$/, }
use: "babel-loader", },
exclude: /node_modules/, exclude: /node_modules/,
}, },
{ {
test: /\.s[ac]ss$/i, test: /\.s[ac]ss$/i,
use: [ use: [
MiniCssExtractPlugin.loader, MiniCssExtractPlugin.loader,
{ loader: "css-loader", options: { modules: true } }, { loader: 'css-loader', options: { modules: true } },
"sass-loader", 'sass-loader',
], ],
}, },
{ {
test: /\.css$/i, test: /\.css$/i,
use: ["style-loader", { loader: "css-loader", options: { modules: true } },], use: ['style-loader', { loader: 'css-loader', options: { modules: true } },],
}, },
{ {
test: /\.(jpe?g|png|gif|svg)$/i, test: /\.(jpe?g|png|gif|svg)$/i,
@ -39,34 +42,46 @@ module.exports = {
], ],
}, },
resolve: { resolve: {
extensions: ['.*', '.tsx', '.ts', '.jsx', '.js'], extensions: ['.*', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.cjs'],
fallback: { fallback: {
"stream": require.resolve("stream-browserify"), 'stream': require.resolve('stream-browserify'),
"crypto": require.resolve("crypto-browserify"), 'crypto': require.resolve('crypto-browserify'),
"path": require.resolve("path-browserify"), 'path': require.resolve('path-browserify'),
"fs": require.resolve("browserify-fs"), 'fs': require.resolve('browserify-fs'),
"buffer": require.resolve("buffer/"), 'buffer': require.resolve('buffer/'),
"util": require.resolve("util/"), 'util': require.resolve('util/'),
},
alias: {
'bn.js': require.resolve('bn.js')
} }
}, },
plugins: [ plugins: [
new ESLintPlugin(),
new IgnorePlugin({ new IgnorePlugin({
resourceRegExp: /[\d\D]*.demo[\d\D]*/ resourceRegExp: /[\d\D]*.demo[\d\D]*/
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: path.join(__dirname, "client", "index.html"), template: path.join(__dirname, 'client', 'index.html'),
filename: 'index.[contenthash].html'
}), }),
new BundleAnalyzerPlugin(), new BundleAnalyzerPlugin(),
new DuplicatesPlugin({
emitErrors: false,
verbose: true
})
], ],
output: { output: {
path: path.resolve(__dirname, 'client/dist'), path: path.resolve(__dirname, 'client/dist'),
}, },
optimization: { optimization: {
chunkIds: "total-size", chunkIds: 'total-size',
moduleIds: "size", moduleIds: 'size',
mergeDuplicateChunks: true, mergeDuplicateChunks: true,
portableRecords: true, portableRecords: true,
sideEffects: true, sideEffects: true,
splitChunks: {
chunks: 'all',
},
minimizer: [ minimizer: [
new CssMinimizerPlugin(), new CssMinimizerPlugin(),
new TerserPlugin({ new TerserPlugin({