Cleaning up Docker.jsx main view.

diff --git a/package-lock.json b/package-lock.json
index 032d137dbd939ef695044910c629c07376d5ce5d..e3339611155498715f9dd4023b6c88a674102713 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "material-react-table": "^3.2.1",
         "notistack": "^3.0.2",
         "react": "^19.1.1",
+        "react-app-alias": "^2.2.2",
         "react-dom": "^19.1.1",
         "react-hook-form": "^7.62.0",
         "react-router-dom": "^7.8.2",
@@ -13557,6 +13558,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-app-alias": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-app-alias/-/react-app-alias-2.2.2.tgz",
+      "integrity": "sha512-mkebUkGLEBA8A8jripu5h1e3cccGl8wWHCUmyJo43/KhaN91DO3qyCLWGWneogqkG4PWhp2JHtlCJ06YSdHVYQ=="
+    },
     "node_modules/react-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",

diff --git a/package.json b/package.json
index 0f0a4cb5cd441f7ffc40e939ff2b805d28048274..4883f8825c93104b24c578b4f4db7eea2859fc01 100644 (file)
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "material-react-table": "^3.2.1",
     "notistack": "^3.0.2",
     "react": "^19.1.1",
+    "react-app-alias": "^2.2.2",
     "react-dom": "^19.1.1",
     "react-hook-form": "^7.62.0",
     "react-router-dom": "^7.8.2",

diff --git a/src/app/views/Docker/Docker.jsx b/src/app/views/Docker/Docker.jsx
index f0c332ccf507c4c500be5b6672d0eab6d4485992..d1f9caf7a57d5c8f89aecfe5e6499bad9fbc464d 100644 (file)
--- a/src/app/views/Docker/Docker.jsx
+++ b/src/app/views/Docker/Docker.jsx
@@ -1,30 +1,29 @@
-import React, { useState, useEffect } from 'react';
-import { Container, Typography, TextField, Button } from '@mui/material';
-import { MaterialReactTable } from 'material-react-table';
+import React, { useEffect, useState } from 'react';
+import { Button, Container, TextField, Typography } from '@mui/material';
+import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
 import { DockerService } from '../../services';
 
-
 const Docker = () => {
-  const [containers, setContainers] = useState([]);
-  const [images, setImages] = useState([]);
-  const [composeFile, setComposeFile] = useState('');
-  const [message, setMessage] = useState('');
+  const [containers, setContainers] = useState( [] );
+  const [images, setImages] = useState( [] );
+  const [composeFile, setComposeFile] = useState( '' );
+  const [message, setMessage] = useState( '' );
 
   const fetchContainers = async () => {
     try {
-      const containersData = await DockerService.fetchContainers( { all: true } ); // Assuming you have a service to fetch containers
-      setContainers(containersData);
+      const containersData = await DockerService.fetchContainers( { all:true } ); // Assuming you have a service to fetch containers
+      setContainers( containersData );
     } catch (error) {
-      setMessage(error);
+      setMessage( error );
     }
   };
 
   const fetchImages = async () => {
     try {
       const imagesData = await DockerService.fetchImages(); // Assuming you have a service to fetch images
-      setImages(imagesData);
+      setImages( imagesData );
     } catch (error) {
-      setMessage(error);
+      setMessage( error );
     }
   };
 
@@ -33,76 +32,80 @@ const Docker = () => {
     fetchContainers().catch();
   }, [] );
 
-  const handleContainerAction = async (action, containerId) => {
-    await DockerService.containerAction(action, containerId);
+  const handleContainerAction = async ( action, containerId ) => {
+    await DockerService.containerAction( action, containerId );
     await fetchContainers();
   };
 
-  const handleComposeSubmit = async (event) => {
+  const handleComposeSubmit = async ( event ) => {
     event.preventDefault();
     setMessage( await DockerService.composeDown( composeFile ) );
   };
 
-  return(
+  const containerTable = useMaterialReactTable( {
+    columns:[
+      { accessorKey:'id', header:'ID' },
+      { accessorKey:'name', header:'Name' },
+      { accessorKey:'state', header:'State' },
+      { accessorKey:'status', header:'Status' },
+      {
+        header:'Actions',
+        Cell:( { row } ) => (
+          <>
+            <Button variant="contained"
+                    color="primary"
+                    onClick={ () => handleContainerAction( 'start', row.original.id ) }
+                    disabled={ row.original.state === 'running' }>
+              Start
+            </Button>
+            <Button variant="contained"
+                    color="secondary"
+                    onClick={ () => handleContainerAction( 'stop', row.original.id ) }
+                    disabled={ row.original.state !== 'running' }>
+              Stop
+            </Button>
+          </>
+        ),
+      },
+    ],
+    data:containers
+  } );
+
+  const imageTable = useMaterialReactTable( {
+    columns:[
+      { accessorKey:'id', header:'ID' },
+      { accessorKey:'tags', header:'Tags', Cell:( { cell } ) => cell.getValue().join( ', ' ) },
+      { accessorKey:'created', header:'Created' },
+    ],
+    data:images
+  } );
+
+  return (
     <Container>
-      <Typography variant="h5" className="mt-6">Docker Containers</Typography>
-      <MaterialReactTable
-        columns={[
-          { accessorKey: 'id', header: 'ID' },
-          { accessorKey: 'name', header: 'Name' },
-          { accessorKey: 'state', header: 'State' },
-          { accessorKey: 'status', header: 'Status' },
-          {
-            header: 'Actions',
-            Cell: ({ row }) => (
-              <>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  onClick={() => handleContainerAction('start', row.original.id)}
-                  disabled={row.original.state === 'running'}
-                >
-                  Start
-                </Button>
-                <Button
-                  variant="contained"
-                  color="secondary"
-                  onClick={() => handleContainerAction('stop', row.original.id)}
-                  disabled={row.original.state !== 'running'}
-                >
-                  Stop
-                </Button>
-              </>
-            ),
-          },
-        ]}
-        data={containers}
-      />
+      <Typography variant="h5"
+                  className="mt-6">Docker Containers</Typography>
+      <MaterialReactTable table={ containerTable }/>
 
-      <Typography variant="h5" className="mt-6">Docker Images</Typography>
-      <MaterialReactTable
-        columns={[
-          { accessorKey: 'id', header: 'ID' },
-          { accessorKey: 'tags', header: 'Tags', Cell: ({ cell }) => cell.getValue().join(', ') },
-          { accessorKey: 'created', header: 'Created' },
-        ]}
-        data={images}
-      />
+      <Typography variant="h5"
+                  className="mt-6">Docker Images</Typography>
+      <MaterialReactTable table={ imageTable }/>
 
-      <Typography variant="h5" className="mt-6">Stop Docker Compose Services</Typography>
-      <form onSubmit={handleComposeSubmit} className="space-y-4">
-        <TextField
-          label="Compose File Path"
-          value={composeFile}
-          onChange={(e) => setComposeFile(e.target.value)}
-          fullWidth
-        />
-        <Button type="submit" variant="contained" color="secondary">Stop Compose Services</Button>
+      <Typography variant="h5"
+                  className="mt-6">Stop Docker Compose Services</Typography>
+      <form onSubmit={ handleComposeSubmit }
+            className="space-y-4">
+        <TextField label="Compose File Path"
+                   value={ composeFile }
+                   onChange={ ( e ) => setComposeFile( e.target.value ) }
+                   fullWidth/>
+        <Button type="submit"
+                variant="contained"
+                color="secondary">Stop Compose Services</Button>
       </form>
 
-      {message && <Typography color={message?.startsWith('Error') ? 'error' : 'success'}>{message}</Typography>}
+      { message && <Typography color={ message?.startsWith( 'Error' ) ? 'error' : 'success' }>{ message }</Typography> }
     </Container>
-  )
-}
+  );
+};
 
 export default Docker;
\ No newline at end of file