diff --git a/__backend-tests__/chronosMethods.test.js b/__backend-tests__/chronosMethods.test.js index fadd2d168..4b91e5dff 100644 --- a/__backend-tests__/chronosMethods.test.js +++ b/__backend-tests__/chronosMethods.test.js @@ -1,4 +1,4 @@ -const { EcoTwoTone } = require('@material-ui/icons'); +const { EcoTwoTone } = require('@mui/icons-material'); const Chronos = require('../chronos_npm_package/chronos.js'); const helpers = require('../chronos_npm_package/controllers/utilities.js'); const hpropagate = require('hpropagate'); diff --git a/app/charts/RouteChart.jsx b/app/charts/RouteChart.jsx index b3e139a90..ca6e2c317 100644 --- a/app/charts/RouteChart.jsx +++ b/app/charts/RouteChart.jsx @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; import React, { useContext } from 'react'; import Graph from 'react-graph-vis'; import { CommsContext } from '../context/CommsContext'; diff --git a/app/components/ApplicationsCard/ApplicationsCard.tsx b/app/components/ApplicationsCard/ApplicationsCard.tsx index 829c9bb4f..0dc5ed68e 100644 --- a/app/components/ApplicationsCard/ApplicationsCard.tsx +++ b/app/components/ApplicationsCard/ApplicationsCard.tsx @@ -1,11 +1,11 @@ import React, { useContext, useRef } from "react"; import { useNavigate } from 'react-router-dom'; -import { Card,CardHeader,IconButton,CardContent,Typography } from "@material-ui/core"; +import { Card,CardHeader,IconButton,CardContent,Typography } from "@mui/material"; import { DashboardContext } from "../../context/DashboardContext"; import { ApplicationContext } from "../../context/ApplicationContext"; -import HighlightOffIcon from '@material-ui/icons/HighlightOff'; -import UpdateIcon from '@material-ui/icons/Update'; +import HighlightOffIcon from '@mui/icons-material/HighlightOff'; +import UpdateIcon from '@mui/icons-material/Update'; import './styles.scss' type ClickEvent = React.MouseEvent; @@ -84,7 +84,7 @@ const ApplicationsCard = (props) => { className={classes.iconbutton} aria-label="Delete" onClick={event => confirmDelete(event, i)} - > + size="large"> { - ) + ); } export default ApplicationsCard \ No newline at end of file diff --git a/app/components/AwsEC2Graphs.tsx b/app/components/AwsEC2Graphs.tsx index 36b539bf4..6c94eb275 100644 --- a/app/components/AwsEC2Graphs.tsx +++ b/app/components/AwsEC2Graphs.tsx @@ -1,8 +1,8 @@ import React, { useContext, useEffect, useState } from 'react'; import AwsChart from '../charts/AwsChart'; import { AwsContext } from '../context/AwsContext'; -import { CircularProgress } from '@material-ui/core'; -import zIndex from '@material-ui/core/styles/zIndex'; +import { CircularProgress } from '@mui/material'; +// import zIndex from '@mui/styles/zIndex'; const AwsEC2Graphs: React.FC = React.memo(props => { const { awsData, setAwsData, isLoading, setLoadingState } = useContext(AwsContext); diff --git a/app/components/ClusterTable.tsx b/app/components/ClusterTable.tsx index 676eb989c..d1dd88c72 100644 --- a/app/components/ClusterTable.tsx +++ b/app/components/ClusterTable.tsx @@ -7,8 +7,8 @@ import { TableHead, TableRow, Paper, -} from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; +} from '@mui/material'; +import { makeStyles } from '@mui/styles/'; import { AwsContext } from '../context/AwsContext'; const useStyles = makeStyles({ diff --git a/app/components/Copyright.tsx b/app/components/Copyright.tsx index b941c44bf..9e7b8b951 100644 --- a/app/components/Copyright.tsx +++ b/app/components/Copyright.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Typography, Link } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; +import { Typography, Link } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import '../stylesheets/Applications.scss'; export interface CopyrightProps {} diff --git a/app/components/DashboardIcons/DashboardIcons.tsx b/app/components/DashboardIcons/DashboardIcons.tsx index d9a659e29..9b04d3f04 100644 --- a/app/components/DashboardIcons/DashboardIcons.tsx +++ b/app/components/DashboardIcons/DashboardIcons.tsx @@ -1,10 +1,10 @@ import { CommsContext } from "../../context/CommsContext" import { DashboardContext } from "../../context/DashboardContext" -import DashboardIcon from '@material-ui/icons/Dashboard'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -import Badge from '@material-ui/core/Badge'; -import PersonIcon from '@material-ui/icons/Person'; -import { Button } from '@material-ui/core'; +import DashboardIcon from '@mui/icons-material/Dashboard'; +import NotificationsIcon from '@mui/icons-material/Notifications'; +import Badge from '@mui/material/Badge'; +import PersonIcon from '@mui/icons-material/Person'; +import { Button } from '@mui/material'; import React, { useContext,useState } from "react" import './styles.scss' diff --git a/app/components/Occupied/Occupied.tsx b/app/components/Occupied/Occupied.tsx index 320da8f01..31adaa282 100644 --- a/app/components/Occupied/Occupied.tsx +++ b/app/components/Occupied/Occupied.tsx @@ -7,10 +7,10 @@ import React, { useContext, useEffect, useState } from 'react'; // MATERIAL UI METHODS -import { Modal, Button } from '@material-ui/core'; +import { Modal, Button } from '@mui/material'; // MATERIAL UI ICONS -import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone'; +import AddCircleOutlineTwoToneIcon from '@mui/icons-material/AddCircleOutlineTwoTone'; // // MODALS // import AddModal from '../modals/AddModal'; diff --git a/app/components/Occupied/helpers/muiHelper.ts b/app/components/Occupied/helpers/muiHelper.ts index 7195b11b3..e06ae8f1d 100644 --- a/app/components/Occupied/helpers/muiHelper.ts +++ b/app/components/Occupied/helpers/muiHelper.ts @@ -1,11 +1,11 @@ -import { makeStyles } from '@material-ui/core/styles'; -import { BaseCSSProperties } from '@material-ui/core/styles/withStyles'; +import { makeStyles } from '@mui/styles'; +// import { BaseCSSProperties } from '@mui/system'; // Conditional Rendering of UI Modals for Light and Dark Mode // Theme, StyleProps -export const useStylesDark = makeStyles(theme => ({ +export const useStylesDark = makeStyles(theme => ({ // ALL CARDS paper: { display: 'flex', @@ -59,7 +59,7 @@ export const useStylesDark = makeStyles(theme => ({ }, })); -export const useStylesLight = makeStyles(theme => ({ +export const useStylesLight = makeStyles(theme => ({ // ALL CARDS paper: { display: 'flex', diff --git a/app/components/TransferColumns.tsx b/app/components/TransferColumns.tsx index d3c0c2fbd..76c024fd0 100644 --- a/app/components/TransferColumns.tsx +++ b/app/components/TransferColumns.tsx @@ -6,7 +6,9 @@ import { EventContext } from '../context/EventContext'; import { DataGrid } from '@material-ui/data-grid'; import * as DashboardContext from '../context/DashboardContext'; import lightAndDark from './Styling'; -import { Button, TextField } from '@material-ui/core'; + +import { Button, TextField } from '@mui/material'; +import SearchBar from './SearchBar/SearchBar'; interface Params { service: string; diff --git a/app/components/WindowBar/WindowBar.tsx b/app/components/WindowBar/WindowBar.tsx index d5cf95d64..7a6a63190 100644 --- a/app/components/WindowBar/WindowBar.tsx +++ b/app/components/WindowBar/WindowBar.tsx @@ -1,7 +1,7 @@ import React from 'react'; -// import Close from '@material-ui/icons/Close'; -// import Maximize from '@material-ui/icons/CheckBoxOutlineBlankSharp'; -// import Minimize from '@material-ui/icons/RemoveSharp'; +// import Close from '@mui/icons-material/Close'; +// import Maximize from '@mui/icons-material/CheckBoxOutlineBlankSharp'; +// import Minimize from '@mui/icons-material/RemoveSharp'; import './styles.scss'; // const { ipcRenderer } = window.require('electron'); diff --git a/app/containers/AWSGraphsContainer/AWSGraphsContainer.tsx b/app/containers/AWSGraphsContainer/AWSGraphsContainer.tsx index f4a81c585..2a52a67ae 100644 --- a/app/containers/AWSGraphsContainer/AWSGraphsContainer.tsx +++ b/app/containers/AWSGraphsContainer/AWSGraphsContainer.tsx @@ -1,7 +1,7 @@ import React, { useContext, useEffect } from 'react'; import { ApplicationContext } from '../../context/ApplicationContext'; import { DashboardContext } from '../../context/DashboardContext'; -import { Typography } from '@material-ui/core'; +import { Typography } from '@mui/material'; import { AwsContext } from '../../context/AwsContext'; import './styles.scss'; import { useLocation } from 'react-router-dom'; diff --git a/app/containers/DockerHealthContainer.tsx b/app/containers/DockerHealthContainer.tsx index 9f9aeb2e3..fb5a2abbc 100644 --- a/app/containers/DockerHealthContainer.tsx +++ b/app/containers/DockerHealthContainer.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState, useContext } from 'react'; import { HealthContext } from '../context/HealthContext'; import { QueryContext } from '../context/QueryContext'; import GrafanaEventChart from '../charts/GrafanaEventChart/GrafanaEventChart'; -import { Button } from '@material-ui/core'; +import { Button } from '@mui/material'; import { useParams } from 'react-router-dom'; import { stringToColour as colourGenerator } from './GraphsContainer/helpers'; diff --git a/app/containers/EventContainer.tsx b/app/containers/EventContainer.tsx index c62ddc213..33eb2211b 100644 --- a/app/containers/EventContainer.tsx +++ b/app/containers/EventContainer.tsx @@ -4,7 +4,7 @@ import { EventContext } from '../context/EventContext'; import { HealthContext } from '../context/HealthContext'; import { QueryContext } from '../context/QueryContext'; import EventChart from '../charts/EventChart'; -import { Button } from '@material-ui/core'; +import { Button } from '@mui/material'; import GrafanaEventChart from '../charts/GrafanaEventChart/GrafanaEventChart'; import { stringToColour as colourGenerator } from './GraphsContainer/helpers'; diff --git a/app/containers/ModifyMetricsContainer/ModifyMetricsContainer.tsx b/app/containers/ModifyMetricsContainer/ModifyMetricsContainer.tsx index 61dfa18ae..f2535b56c 100644 --- a/app/containers/ModifyMetricsContainer/ModifyMetricsContainer.tsx +++ b/app/containers/ModifyMetricsContainer/ModifyMetricsContainer.tsx @@ -4,7 +4,7 @@ import { ApplicationContext } from '../../context/ApplicationContext'; import * as DashboardContext from '../../context/DashboardContext'; import lightAndDark from '../../components/Styling'; import './styles.scss'; -import { Button } from '@material-ui/core'; +import { Button } from '@mui/material'; const { ipcRenderer } = window.require('electron'); const MetricsContainer: React.FC = React.memo(props => { diff --git a/app/containers/SidebarContainer/SidebarContainer.tsx b/app/containers/SidebarContainer/SidebarContainer.tsx index 14b9c976e..a2449fd5c 100644 --- a/app/containers/SidebarContainer/SidebarContainer.tsx +++ b/app/containers/SidebarContainer/SidebarContainer.tsx @@ -1,10 +1,10 @@ import React, { useContext } from 'react'; import { Link } from 'react-router-dom'; -import ListIcon from '@material-ui/icons/List'; -import InfoIcon from '@material-ui/icons/Info'; -import ContactSupportIcon from '@material-ui/icons/ContactSupport'; -import SettingsIcon from '@material-ui/icons/Settings'; +import ListIcon from '@mui/icons-material/List'; +import InfoIcon from '@mui/icons-material/Info'; +import ContactSupportIcon from '@mui/icons-material/ContactSupport'; +import SettingsIcon from '@mui/icons-material/Settings'; import './styles.scss'; import { ApplicationContext } from '../../context/ApplicationContext'; diff --git a/app/context/ApplicationContext.tsx b/app/context/ApplicationContext.tsx index 46bb81b4f..133340c68 100644 --- a/app/context/ApplicationContext.tsx +++ b/app/context/ApplicationContext.tsx @@ -38,13 +38,12 @@ const ApplicationContextProvider: React.FC = React.memo(props = */ // v10: Invoked by connectToDB, passing in app (card title) const fetchServicesNames = useCallback((application: string) => { - + ipcRenderer.send('servicesRequest'); ipcRenderer.on('servicesResponse', (event: Electron.Event, data: any) => { //data here refers to the services coming the services document of the database let result: any; result = JSON.parse(data); - // console.log({result}) setServicesData(result); ipcRenderer.removeAllListeners('servicesResponse'); }); diff --git a/app/index.tsx b/app/index.tsx index 388162313..ff77f3988 100644 --- a/app/index.tsx +++ b/app/index.tsx @@ -1,25 +1,41 @@ import React from 'react'; +// import { adaptV4Theme } from '@mui/styles'; +import { createTheme, adaptV4Theme } from '@mui/material/styles' import ReactDOM from 'react-dom'; // REACT 18 Syntax below // import { createRoot } from 'react-dom/client'; import './index.scss'; -import { createTheme, ThemeProvider } from '@material-ui/core/'; +import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material'; import App from './App'; import WindowBar from './components/WindowBar/WindowBar'; -const theme = createTheme({ +// declare module '@mui/styles/defaultTheme' { +// // eslint-disable-next-line @typescript-eslint/no-empty-interface +// interface DefaultTheme extends Theme {} +// } + + +const theme = createTheme(adaptV4Theme({ + // v4 theme typography: { fontFamily: ['Roboto', 'sans-serif'].join(','), }, -}); +})); +// const theme = createTheme(adaptV4Theme({ +// typography: { +// fontFamily: ['Roboto', 'sans-serif'].join(','), +// }, +// })); // React 17 Syntax below ReactDOM.render( - - - - , + + + + + + , document.getElementById('app') ); diff --git a/app/modals/AddModal/ServiceDBType.tsx b/app/modals/AddModal/ServiceDBType.tsx index 34f3cf071..f436eb210 100644 --- a/app/modals/AddModal/ServiceDBType.tsx +++ b/app/modals/AddModal/ServiceDBType.tsx @@ -2,6 +2,7 @@ import React from 'react'; const ServiceDBType = (props) => { + const { typeOfService, handleChange, database } = props return ( <>
@@ -11,8 +12,8 @@ const ServiceDBType = (props) => { props.handleChange(e)}> + diff --git a/app/modals/AddModal/ServicesDescription.tsx b/app/modals/AddModal/ServicesDescription.tsx index a36cae142..174fa00dd 100644 --- a/app/modals/AddModal/ServicesDescription.tsx +++ b/app/modals/AddModal/ServicesDescription.tsx @@ -1,6 +1,7 @@ import React from 'react'; const ServicesDescription = (props) => { + const { URI, handleChange, name, description } = props; return ( <>
@@ -10,8 +11,8 @@ const ServicesDescription = (props) => { props.handleChange(e)} + value={URI} + onChange={e => handleChange(e)} placeholder="Database URI" required /> @@ -24,8 +25,8 @@ const ServicesDescription = (props) => { id="db-name" type="text" name="name" - value={props.name} - onChange={e => props.handleChange(e)} + value={name} + onChange={e => handleChange(e)} placeholder="Add a name for your new service" required /> @@ -35,8 +36,8 @@ const ServicesDescription = (props) => {