Fixed frontend to load data from S3 only when the overview tab is open.

Fixed information update

typescript/frontend-marios2/src/content/dashboards/Installations/Installation.tsx

@@ -133,7 +133,10 @@ function Installation(props: singleInstallationProps) {
   const s3Credentials = { s3Bucket, ...S3data };
 
   useEffect(() => {
-    if (installationId == props.current_installation.id) {
+    if (
+      installationId == props.current_installation.id &&
+      (currentTab == 'live' || currentTab == 'configuration')
+    ) {
       let isMounted = true;
       setFormValues(props.current_installation);
       setErrorLoadingS3Data(false);
@@ -193,7 +196,7 @@ function Installation(props: singleInstallationProps) {
         clearInterval(interval);
       };
     }
-  }, [installationId]);
+  }, [installationId, currentTab]);
 
   if (installationId == props.current_installation.id) {
     return (

typescript/frontend-marios2/src/content/dashboards/Installations/index.tsx

@@ -27,10 +27,11 @@ function InstallationTabs() {
 
   const searchParams = new URLSearchParams(location.search);
   const installationId = parseInt(searchParams.get('installation'));
+  //const currentTab = searchParams.get('tab');
   const [singleInstallationID, setSingleInstallationID] = useState(-1);
   const context = useContext(UserContext);
   const { currentUser, setUser } = context;
-  const [currentTab, setCurrentTab] = useState<string>('list');
+  const [currentTab, setCurrentTab] = useState<string>(searchParams.get('tab'));
   const { installations, fetchAllInstallations } =
     useContext(InstallationsContext);
 
@@ -49,10 +50,16 @@ function InstallationTabs() {
     }
 
     if (installations.length === 1) {
-      navigate(`list?installation=${installations[0].id}&tab=live`, {
-        replace: true
-      });
-      setCurrentTab('live');
+      if (!currentTab) {
+        navigate(`?installation=${installationId}&tab=live`, {
+          replace: true
+        });
+        setCurrentTab('live');
+      } else {
+        navigate(`?installation=${installationId}&tab=${currentTab}`, {
+          replace: true
+        });
+      }
     } else {
       if (
         location.pathname === '/installations' ||
@@ -61,17 +68,29 @@ function InstallationTabs() {
         navigate(routes.installations + routes.list, {
           replace: true
         });
-      } else if (location.pathname === '/installations/tree/') {
+      } else if (
+        location.pathname === '/installations/tree/' &&
+        !installationId
+      ) {
         setCurrentTab('tree');
-      } else if (location.pathname === '/installations/list/') {
+      } else if (
+        location.pathname === '/installations/list/' &&
+        !installationId
+      ) {
         setCurrentTab('list');
       }
 
       if (installationId) {
-        navigate(`?installation=${installationId}&tab=live`, {
-          replace: true
-        });
-        setCurrentTab('live');
+        if (currentTab == 'list' || currentTab == 'tree') {
+          navigate(`?installation=${installationId}&tab=live`, {
+            replace: true
+          });
+          setCurrentTab('live');
+        } else {
+          navigate(`?installation=${installationId}&tab=${currentTab}`, {
+            replace: true
+          });
+        }
       }
     }
   }, [location.pathname, navigate, installationId, installations]);

typescript/frontend-marios2/src/content/dashboards/Installations/installationForm.tsx

@@ -29,9 +29,10 @@ function installationForm(props: installationFormProps) {
     region: '',
     location: '',
     country: '',
+    vpnIp: '',
     orderNumbers: ''
   });
-  const requiredFields = ['name', 'region', 'location', 'country'];
+  const requiredFields = ['name', 'region', 'location', 'country', 'vpnIp'];
   const tokencontext = useContext(TokenContext);
   const { removeToken } = tokencontext;
 
@@ -151,6 +152,18 @@ function installationForm(props: installationFormProps) {
                 error={formValues.country === ''}
               />
             </div>
+            <div>
+              <TextField
+                label={<FormattedMessage id="VpnIp" defaultMessage="VpnIp" />}
+                name="VpnIp"
+                value={formValues.vpnIp}
+                onChange={handleChange}
+                fullWidth
+                required
+                error={formValues.vpnIp === ''}
+              />
+            </div>
+
             <div>
               <TextField
                 label={

typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx

@@ -117,7 +117,7 @@ function Overview(props: OverviewProps) {
       };
     });
 
-    console.log(input);
+    //console.log(input);
     input.forEach((item) => {
       const csvContent = item.value;
       pathsToSearch.forEach((path) => {

typescript/frontend-marios2/src/contexts/WebSocketContextProvider.tsx

@@ -44,7 +44,7 @@ const WebSocketContextProvider = ({ children }: { children: ReactNode }) => {
         if (socket.readyState === WebSocket.OPEN) {
           socket.send(JSON.stringify([-1]));
         }
-      }, 10000); // Send a ping every 5 seconds
+      }, 10000); // Send a ping every 10 seconds
 
       // Listen for messages
       socket.addEventListener('message', (event) => {
@@ -54,7 +54,7 @@ const WebSocketContextProvider = ({ children }: { children: ReactNode }) => {
           const installation_id = message.id;
           const status = message.status;
 
-          console.log('Message from server ', installation_id, status);
+          //console.log('Message from server ', installation_id, status);
 
           setInstallationStatus((prevStatus) => {
             // Create a new object by spreading the previous state