Plugin test investigation

apps/front/package.json

@@ -17,6 +17,7 @@
   },
   "prettier": "../../packages/tools/prettier.config.js",
   "dependencies": {
+    "@ebay/nice-modal-react": "^1.2.10",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@friday-ai/shared": "workspace:*",

apps/front/src/assets/i18n/en.json

@@ -9,6 +9,39 @@
         "settings": "Settings",
         "title": "User Menu"
       }
+    },
+    "satellites": {
+      "areYouSure": "Are you sure ?",
+      "configPlugin": "Config plugin",
+      "deletePluginMessage": "This action <b>cannot</b> be undone. This will permanently delete the plugin :",
+      "installedPlugins": "Plugins installed",
+      "installPlugin": "Install plugin",
+      "ipAddress": "IP address",
+      "lastHeartbeat": "Last eartbeat",
+      "location": "Location",
+      "name": "Name",
+      "noDataFound": "No Data found",
+      "pluginsStates": "Plugins states",
+      "resetFilters": "Try installing a plugin or change yours filters",
+      "restartAllPlugins": "Restart all plugins",
+      "restartPlugin": "Restart plugin",
+      "restartSatellite": "Restart satellite",
+      "satellite": "Satellite",
+      "state": "State",
+      "stateConnected": "Connected",
+      "stateDisconnected": "Disconnected",
+      "stateErrored": "Error",
+      "stateInstalled": "Installed",
+      "stateRunning": "Running",
+      "stateStandby": "Stanby",
+      "stateStopped": "Stopped",
+      "stateWaitingConfig": "Waiting config",
+      "stateWaitingInstallation": "Waiting install",
+      "stopAllPlugins": "Stop all plugins",
+      "stopPlugin": "Stop plugin",
+      "stopSatellite": "Stop satellite",
+      "uninstallPlugin": "Uninstall plugin",
+      "uptime": "Uptime"
     }
   },
   "errors": {

apps/front/src/assets/i18n/fr.json

@@ -9,6 +9,39 @@
         "settings": "Paramètres",
         "title": "Menu utilisateur"
       }
+    },
+    "satellites": {
+      "areYouSure": "Êtes-vous sûr ?",
+      "configPlugin": "Configurer le plugin",
+      "deletePluginMessage": "Cette action <b>ne peut pas</b> être annulée. Cela supprimera définitivement le plugin :",
+      "installedPlugins": "Plugins installés",
+      "installPlugin": "Installer un plugin",
+      "ipAddress": "Adresse IP",
+      "lastHeartbeat": "Dernier signal",
+      "location": "Emplacement",
+      "name": "Nom",
+      "noDataFound": "Aucune donnée disponible",
+      "pluginsStates": "Status des plugins",
+      "resetFilters": "Essayez d'installer un plugin ou modifiez vos filtres",
+      "restartAllPlugins": "Redémarrer tous les plugins",
+      "restartPlugin": "Redémarrer le plugin",
+      "restartSatellite": "Redémarrer le satellite",
+      "satellite": "Satellite",
+      "state": "Etat",
+      "stateConnected": "Connecté",
+      "stateDisconnected": "Déconnecté",
+      "stateErrored": "Erreur",
+      "stateInstalled": "Installé",
+      "stateRunning": "Démarré",
+      "stateStandby": "Stanby",
+      "stateStopped": "Arreté",
+      "stateWaitingConfig": "En attente de config",
+      "stateWaitingInstallation": "En attente d'install",
+      "stopAllPlugins": "Arrêter tous les plugins",
+      "stopPlugin": "Arrêter le plugin",
+      "stopSatellite": "Arrêter le satellite",
+      "uninstallPlugin": "Désinstaller le plugin",
+      "uptime": "Démarré"
     }
   },
   "errors": {

apps/front/src/components/App/DashboardLayout.tsx

@@ -1,4 +1,5 @@
 import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 
@@ -7,12 +8,13 @@ import AnimationLayout from './AnimationLayout';
 
 export default function DashboardLayout() {
   return (
-    <Container sx={{ padding: 2, paddingTop: 0 }}>
+    <Container sx={{ paddingTop: 0 }}>
       <AppBar />
-      <Container sx={{ paddingTop: 2 }}>
+      <Container sx={{ padding: 2, paddingTop: 2 }}>
         <AnimationLayout>
           <Outlet />
         </AnimationLayout>
+        <Paper className="primary-gradient"></Paper>
       </Container>
     </Container>
   );

apps/front/src/components/AppBar/AppBar.tsx

@@ -50,7 +50,7 @@ export default function App() {
 
   return (
     <AppBar position="static">
-      <Toolbar>
+      <Toolbar sx={{ marginX: 2 }}>
         <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' }, mr: 3 }}>
           <Menu id="pages-menu" title="Pages menu" ariaLabel="pages menu" ariaControls="pages-menu-appbar" buttonType="icon" icon={<MenuIcon />}>
             <MenuItem onClick={() => handleNavigation(null, 'devices')}>

apps/front/src/components/Charts/Pie.tsx

@@ -12,6 +12,7 @@ import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import { useTheme } from '@mui/material/styles';
 
+import { useTranslation } from 'react-i18next';
 import { colorToRGBA } from '../../utils/color';
 
 const margin = 20;
@@ -43,6 +44,7 @@ type PieProps = {
 
 export default withTooltip<PieProps, PieData>((props) => {
   const { data, totalCount, totalLabel, tooltipOpen, tooltipData, tooltipLeft, tooltipTop, showTooltip, hideTooltip } = props;
+  const { t } = useTranslation();
 
   const ordinalColorScale = scaleOrdinal({
     domain: data.map((d) => d.label),
@@ -148,7 +150,7 @@ export default withTooltip<PieProps, PieData>((props) => {
                           <rect fill={colorToRGBA(label.value || '', colorOpacity)} width={legendGlyphSize} height={legendGlyphSize} />
                         </svg>
                         <LegendLabel align="left" margin="0 0 0 4px">
-                          {label.text}
+                          {t(label.text)}
                         </LegendLabel>
                       </LegendItem>
                     ))}
@@ -171,7 +173,7 @@ export default withTooltip<PieProps, PieData>((props) => {
                   <svg width={legendGlyphSize} height={legendGlyphSize}>
                     <rect fill={colorToRGBA(tooltipData.color || '', colorOpacity)} width={legendGlyphSize} height={legendGlyphSize} />
                   </svg>
-                  <span>{tooltipData.label}</span> :<strong>{tooltipData.value}</strong>
+                  <span>{t(tooltipData.label)}</span> :<strong>{tooltipData.value}</strong>
                 </Stack>
               </VisxTooltip>
             )}

apps/front/src/components/Modal/Confirm.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+
+import NiceModal, { useModal } from '@ebay/nice-modal-react';
+import { Typography } from '@mui/material';
+
+export interface ConfirmationDialogProps {
+  title: string;
+  content: string;
+  onClose: (confirm: boolean) => Promise<void>;
+}
+
+export default NiceModal.create(({ title, content, onClose }: ConfirmationDialogProps) => {
+  const modal = useModal();
+
+  const handleClose = (confirm: boolean) => {
+    onClose(confirm);
+    modal.hide();
+
+    // Wait close animation before removing component
+    setTimeout(() => {
+      modal.remove();
+    }, 1000);
+  };
+
+  return (
+    <Dialog open={modal.visible} onClose={() => handleClose(false)} fullWidth maxWidth={'xs'}>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <Typography dangerouslySetInnerHTML={{ __html: content }}></Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button autoFocus onClick={() => handleClose(false)} variant={'contained'}>
+          Cancel
+        </Button>
+        <Button onClick={() => handleClose(true)} variant={'outlined'}>
+          Ok
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+});

apps/front/src/index.css

@@ -14,6 +14,18 @@ body > #root > div {
   height: 100%;
 }
 
+.primary-gradient {
+  background: linear-gradient(350deg, rgb(6 70 245 / 30%) 0%, rgb(18 28 66 / 0%) 100%);
+  filter: blur(200px);
+  width: 30%;
+  height: 30%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+}
+
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;

apps/front/src/main.tsx

@@ -1,3 +1,4 @@
+import NiceModal from '@ebay/nice-modal-react';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import { domAnimation, LazyMotion } from 'framer-motion';
@@ -9,8 +10,8 @@ import { registerSW } from 'virtual:pwa-register';
 
 import './index.css';
 import Root from './routes/Root';
-import theme from './utils/theme';
 import './utils/i18n';
+import theme from './utils/theme';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -31,10 +32,12 @@ if (rootContainer !== null) {
       <LazyMotion features={domAnimation}>
         <QueryClientProvider client={queryClient}>
           <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <BrowserRouter>
-              <Root />
-            </BrowserRouter>
+            <NiceModal.Provider>
+              <CssBaseline />
+              <BrowserRouter>
+                <Root />
+              </BrowserRouter>
+            </NiceModal.Provider>
           </ThemeProvider>
         </QueryClientProvider>
       </LazyMotion>