Changes to the frontend: Unable to communicate modal, utc bugs fixed in configuration tab

typescript/frontend-marios2/src/content/dashboards/BatteryView/BatteryView.tsx

@@ -31,6 +31,7 @@ interface BatteryViewProps {
   values: TopologyValues;
   s3Credentials: I_S3Credentials;
   installationId: number;
+  productNum: number;
 }
 
 function BatteryView(props: BatteryViewProps) {
@@ -157,6 +158,7 @@ function BatteryView(props: BatteryViewProps) {
                       s3Credentials={props.s3Credentials}
                       batteryData={findBatteryData(battery.BatteryId)}
                       installationId={props.installationId}
+                      productNum={props.productNum}
                     ></DetailedBatteryView>
                   }
                 />
@@ -272,23 +274,29 @@ function BatteryView(props: BatteryViewProps) {
                         battery.AverageTemperature.unit}
                     </TableCell>
 
+                    {props.productNum === 0 && (
+                      <>
                         <TableCell
                           style={{
                             width: '20%',
                             textAlign: 'center',
                             padding: '8px',
                             fontWeight:
-                          battery.Warnings.value !== '' ? 'bold' : 'inherit',
+                              battery.Warnings.value !== ''
+                                ? 'bold'
+                                : 'inherit',
                             backgroundColor:
-                          battery.Warnings.value === '' ? 'inherit' : '#ff9900',
+                              battery.Warnings.value === ''
+                                ? 'inherit'
+                                : '#ff9900',
                             color:
                               battery.Warnings.value != '' ? 'black' : 'inherit'
                           }}
                         >
                           {battery.Warnings.value === '' ? (
                             'None'
-                      ) : battery.Warnings.value.toString().split('-').length >
+                          ) : battery.Warnings.value.toString().split('-')
-                        1 ? (
+                              .length > 1 ? (
                             <Link
                               style={{ color: 'black' }}
                               to={
@@ -313,14 +321,17 @@ function BatteryView(props: BatteryViewProps) {
                             fontWeight:
                               battery.Alarms.value !== '' ? 'bold' : 'inherit',
                             backgroundColor:
-                          battery.Alarms.value === '' ? 'inherit' : '#FF033E',
+                              battery.Alarms.value === ''
-                        color: battery.Alarms.value != '' ? 'black' : 'inherit'
+                                ? 'inherit'
+                                : '#FF033E',
+                            color:
+                              battery.Alarms.value != '' ? 'black' : 'inherit'
                           }}
                         >
                           {battery.Alarms.value === '' ? (
                             'None'
-                      ) : battery.Alarms.value.toString().split('-').length >
+                          ) : battery.Alarms.value.toString().split('-')
-                        1 ? (
+                              .length > 1 ? (
                             <Link
                               style={{ color: 'black' }}
                               to={
@@ -338,6 +349,8 @@ function BatteryView(props: BatteryViewProps) {
                             battery.Alarms.value
                           )}
                         </TableCell>
+                      </>
+                    )}
                   </TableRow>
                 ))}
               </TableBody>

typescript/frontend-marios2/src/content/dashboards/BatteryView/DetailedBatteryView.tsx

@@ -25,6 +25,7 @@ interface DetailedBatteryViewProps {
   s3Credentials: I_S3Credentials;
   batteryData: Battery;
   installationId: number;
+  productNum: number;
 }
 
 function DetailedBatteryView(props: DetailedBatteryViewProps) {
@@ -273,6 +274,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
             <ArrowBackIcon />
           </IconButton>
 
+          {props.productNum === 0 && (
             <Button
               variant="contained"
               onClick={handleUpdateFirmware}
@@ -289,6 +291,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
                 defaultMessage="Update Firmware"
               />
             </Button>
+          )}
         </Grid>
       </Grid>
       <Grid container>
@@ -310,7 +313,8 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
               style={{
                 ...batteryStringStyle,
                 backgroundColor:
-                  props.batteryData.String1Active.value == 'True'
+                  props.batteryData.String1Active.value == 'True' ||
+                  props.batteryData.String4Active.value == 0
                     ? '#32CD32'
                     : '#FF033E'
               }}
@@ -319,7 +323,8 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
               style={{
                 ...batteryStringStyle,
                 backgroundColor:
-                  props.batteryData.String2Active.value == 'True'
+                  props.batteryData.String2Active.value == 'True' ||
+                  props.batteryData.String4Active.value == 0
                     ? '#32CD32'
                     : '#FF033E'
               }}
@@ -328,7 +333,8 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
               style={{
                 ...batteryStringStyle,
                 backgroundColor:
-                  props.batteryData.String3Active.value == 'True'
+                  props.batteryData.String3Active.value == 'True' ||
+                  props.batteryData.String4Active.value == 0
                     ? '#32CD32'
                     : '#FF033E'
               }}
@@ -337,7 +343,8 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
               style={{
                 ...batteryStringStyle,
                 backgroundColor:
-                  props.batteryData.String4Active.value == 'True'
+                  props.batteryData.String4Active.value == 'True' ||
+                  props.batteryData.String4Active.value == 0
                     ? '#32CD32'
                     : '#FF033E'
               }}
@@ -346,7 +353,8 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
               style={{
                 ...batteryStringStyle,
                 backgroundColor:
-                  props.batteryData.String5Active.value == 'True'
+                  props.batteryData.String5Active.value == 'True' ||
+                  props.batteryData.String4Active.value == 0
                     ? '#32CD32'
                     : '#FF033E'
               }}
@@ -514,6 +522,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
                       props.batteryData.Power.unit}
                   </TableCell>
                 </TableRow>
+
                 <TableRow>
                   <TableCell
                     component="th"
@@ -609,6 +618,8 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
         </Card>
       </Grid>
       {/*----------------------------------------------------------------------------------------------------------------------------------*/}
+      {props.productNum === 0 && (
+        <>
           <Grid item md={3} xs={3}>
             <Card
               sx={{
@@ -799,6 +810,8 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
               </TableContainer>
             </Card>
           </Grid>
+        </>
+      )}
 
       {/*----------------------------------------------------------------------------------------------------------------------------------*/}
       <Grid item md={3} xs={3}>
@@ -807,6 +820,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
             overflow: 'visible',
             marginTop: '30px',
             marginLeft: '20px',
+            marginBottom: '20px',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
@@ -992,6 +1006,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
       </Grid>
 
       {/*----------------------------------------------------------------------------------------------------------------------------------*/}
+
       <Grid item md={3} xs={3}>
         <Card
           sx={{
@@ -1044,6 +1059,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
                       props.batteryData.Eoc.unit}
                   </TableCell>
                 </TableRow>
+
                 <TableRow>
                   <TableCell
                     component="th"
@@ -1066,6 +1082,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
                       props.batteryData.SerialNumber.unit}
                   </TableCell>
                 </TableRow>
+
                 <TableRow>
                   <TableCell
                     component="th"
@@ -1110,6 +1127,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
                       props.batteryData.TimeSinceTOC.unit}
                   </TableCell>
                 </TableRow>
+                {props.productNum === 0 && (
                   <TableRow>
                     <TableCell
                       component="th"
@@ -1132,6 +1150,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
                         props.batteryData.CalibrationChargeRequested.unit}
                     </TableCell>
                   </TableRow>
+                )}
                 <TableRow>
                   <TableCell
                     component="th"
@@ -1181,6 +1200,7 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
           </TableContainer>
         </Card>
       </Grid>
+
       {/*----------------------------------------------------------------------------------------------------------------------------------*/}
 
       {/*<Grid item md={1.5} xs={1.5}>*/}

typescript/frontend-marios2/src/content/dashboards/Configuration/Configuration.tsx

@@ -43,7 +43,7 @@ function Configuration(props: ConfigurationProps) {
   const CalibrationChargeOptions = [
     'Repetitive Calibration',
     'Additional Calibration',
-    'Force Calibration Now'
+    'Force Permanent Calibration Now'
   ];
 
   const CalibrationChargeOptionsController = [
@@ -93,13 +93,11 @@ function Configuration(props: ConfigurationProps) {
       CalibrationChargeOptionsController.indexOf(
         props.values.calibrationChargeState[0].value.toString()
       ) == 0
-        ? dayjs
+        ? dayjs(props.values.repetitiveCalibrationChargeDate[0].value)
-            .utc(props.values.repetitiveCalibrationChargeDate[0].value)
+            // .add(localOffset, 'minute')
-            .add(localOffset, 'minute')
             .toDate()
-        : dayjs
+        : dayjs(props.values.additionalCalibrationChargeDate[0].value)
-            .utc(props.values.additionalCalibrationChargeDate[0].value)
+            // .add(localOffset, 'minute')
-            .add(localOffset, 'minute')
             .toDate()
   });
 
@@ -124,14 +122,19 @@ function Configuration(props: ConfigurationProps) {
       setErrorDateModalOpen(true);
       return;
     } else {
-      //console.log('asked for', dayjs(formValues.calibrationChargeDate));
+      // console.log('asked for', dayjs(formValues.calibrationChargeDate));
       const configurationToSend: ConfigurationValues = {
         minimumSoC: formValues.minimumSoC,
         gridSetPoint: formValues.gridSetPoint,
         CalibrationChargeState: formValues.CalibrationChargeState,
-        calibrationChargeDate: dayjs(formValues.calibrationChargeDate).toDate()
+        calibrationChargeDate: dayjs
+          .utc(formValues.calibrationChargeDate)
+          .add(localOffset, 'minute')
+          .toDate()
       };
 
+      // console.log('will send ', dayjs(formValues.calibrationChargeDate));
+
       setLoading(true);
       const res = await axiosConfig
         .post(
@@ -157,9 +160,11 @@ function Configuration(props: ConfigurationProps) {
   };
 
   const handleConfirm = (newDate) => {
+    //console.log('non adapted day is ', newDate);
+    //console.log('adapted day is ', dayjs.utc(newDate).toDate());
     setFormValues({
       ...formValues,
-      ['calibrationChargeDate']: dayjs.utc(newDate).toDate()
+      ['calibrationChargeDate']: dayjs(newDate).toDate()
     });
   };
 
@@ -170,6 +175,7 @@ function Configuration(props: ConfigurationProps) {
     if (difference < 0) {
       difference += 7;
     }
+
     const adjustedDate = currentDate.add(difference, 'day');
     setFormValues({
       ...formValues,
@@ -185,13 +191,11 @@ function Configuration(props: ConfigurationProps) {
       ),
       ['calibrationChargeDate']:
         CalibrationChargeOptions.indexOf(event.target.value) == 0
-          ? dayjs
+          ? dayjs(props.values.repetitiveCalibrationChargeDate[0].value)
-              .utc(props.values.repetitiveCalibrationChargeDate[0].value)
+              // .add(localOffset, 'minute')
-              .add(localOffset, 'minute')
               .toDate()
-          : dayjs
+          : dayjs(props.values.additionalCalibrationChargeDate[0].value)
-              .utc(props.values.additionalCalibrationChargeDate[0].value)
+              // .add(localOffset, 'minute')
-              .add(localOffset, 'minute')
               .toDate()
     });
   };
@@ -349,7 +353,7 @@ function Configuration(props: ConfigurationProps) {
                       format="DD/MM/YYYY HH:mm"
                       ampm={false}
                       label="Select Next Calibration Charge Date"
-                      value={dayjs.utc(formValues.calibrationChargeDate)}
+                      value={dayjs(formValues.calibrationChargeDate)}
                       onChange={handleConfirm}
                       sx={{
                         marginTop: 2
@@ -397,8 +401,8 @@ function Configuration(props: ConfigurationProps) {
                       <TimePicker
                         ampm={false}
                         label="Calibration Charge Hour"
-                        value={dayjs.utc(formValues.calibrationChargeDate)}
+                        value={dayjs(formValues.calibrationChargeDate)}
-                        onChange={handleConfirm}
+                        onChange={(newTime) => handleConfirm(dayjs(newTime))}
                       />
                     </LocalizationProvider>
                   </div>

typescript/frontend-marios2/src/content/dashboards/Information/Information.tsx

@@ -307,7 +307,7 @@ function Information(props: InformationProps) {
                         label="S3 Bucket Name"
                         name="s3writesecretkey"
                         value={
-                          formValues.id +
+                          formValues.s3BucketId +
                           '-3e5b3069-214a-43ee-8d85-57d72000c19d'
                         }
                         variant="outlined"

typescript/frontend-marios2/src/content/dashboards/Information/InformationSalidomo.tsx

@@ -37,7 +37,7 @@ function InformationSalidomo(props: InformationSalidomoProps) {
   const { currentUser } = context;
   const theme = useTheme();
   const [formValues, setFormValues] = useState(props.values);
-  const requiredFields = ['name', 'region', 'location', 'country'];
+  const requiredFields = ['installationName', 'region', 'location', 'country'];
   const [openModalDeleteInstallation, setOpenModalDeleteInstallation] =
     useState(false);
   const navigate = useNavigate();
@@ -194,7 +194,7 @@ function InformationSalidomo(props: InformationSalidomoProps) {
                       />
                     }
                     name="installationName"
-                    value={formValues.name}
+                    value={formValues.installationName}
                     onChange={handleChange}
                     variant="outlined"
                     fullWidth
@@ -280,7 +280,8 @@ function InformationSalidomo(props: InformationSalidomoProps) {
                     label="S3 Bucket Name"
                     name="s3writesecretkey"
                     value={
-                      formValues.id + '-c0436b6a-d276-4cd8-9c44-1eae86cf5d0e'
+                      formValues.s3BucketId +
+                      '-c0436b6a-d276-4cd8-9c44-1eae86cf5d0e'
                     }
                     variant="outlined"
                     fullWidth

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

@@ -102,11 +102,11 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => {
               <TableBody>
                 {props.installations.map((installation) => {
                   const isInstallationSelected =
-                    installation.id === selectedInstallation;
+                    installation.s3BucketId === selectedInstallation;
 
                   const status = getStatus(installation.id);
                   const rowStyles =
-                    isRowHovered === installation.id
+                    isRowHovered === installation.s3BucketId
                       ? {
                           cursor: 'pointer',
                           backgroundColor: theme.colors.primary.lighter
@@ -116,13 +116,15 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => {
                   return (
                     <TableRow
                       hover
-                      key={installation.id}
+                      key={installation.s3BucketId}
                       selected={isInstallationSelected}
                       style={rowStyles}
                       onClick={() =>
-                        handleSelectOneInstallation(installation.id)
+                        handleSelectOneInstallation(installation.s3BucketId)
+                      }
+                      onMouseEnter={() =>
+                        handleRowMouseEnter(installation.s3BucketId)
                       }
-                      onMouseEnter={() => handleRowMouseEnter(installation.id)}
                       onMouseLeave={() => handleRowMouseLeave()}
                     >
                       <TableCell>

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

@@ -1,5 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Card, CircularProgress, Grid, Typography } from '@mui/material';
+import {
+  Card,
+  CircularProgress,
+  Container,
+  Grid,
+  Typography
+} from '@mui/material';
 import { I_Installation } from 'src/interfaces/InstallationTypes';
 import { UserContext } from 'src/contexts/userContext';
 import AccessContextProvider from 'src/contexts/AccessContextProvider';
@@ -39,6 +45,14 @@ function Installation(props: singleInstallationProps) {
   const [currentTab, setCurrentTab] = useState<string>(undefined);
   const [values, setValues] = useState<TopologyValues | null>(null);
   const status = getStatus(props.current_installation.id);
+  const [
+    failedToCommunicateWithInstallation,
+    setFailedToCommunicateWithInstallation
+  ] = useState(0);
+  const [
+    openModalUnableToCommunicateWIthInstallation,
+    setOpenModalUnableToCommunicateWIthInstallation
+  ] = useState(false);
 
   if (props.current_installation == undefined) {
     return null;
@@ -48,14 +62,15 @@ function Installation(props: singleInstallationProps) {
     s3Region: props.current_installation.s3Region,
     s3Provider: props.current_installation.s3Provider,
     s3Key: props.current_installation.s3Key,
-    s3Secret: props.current_installation.s3Secret
+    s3Secret: props.current_installation.s3Secret,
+    s3BucketId: props.current_installation.s3BucketId
   };
 
   const s3Bucket =
     props.current_installation.product === 0
-      ? props.current_installation.id.toString() +
+      ? props.current_installation.s3BucketId.toString() +
         '-3e5b3069-214a-43ee-8d85-57d72000c19d'
-      : props.current_installation.id.toString() +
+      : props.current_installation.s3BucketId.toString() +
         '-c0436b6a-d276-4cd8-9c44-1eae86cf5d0e';
 
   const s3Credentials = { s3Bucket, ...S3data };
@@ -67,6 +82,8 @@ function Installation(props: singleInstallationProps) {
       const res = await fetchData(now, s3Credentials);
 
       if (res != FetchResult.notAvailable && res != FetchResult.tryLater) {
+        setFailedToCommunicateWithInstallation(0);
+        setOpenModalUnableToCommunicateWIthInstallation(false);
         setValues(
           extractValues({
             time: now,
@@ -74,6 +91,13 @@ function Installation(props: singleInstallationProps) {
           })
         );
         return true;
+      } else {
+        setFailedToCommunicateWithInstallation((prevCount) => {
+          if (prevCount + 1 >= 3) {
+            setOpenModalUnableToCommunicateWIthInstallation(true);
+          }
+          return prevCount + 1;
+        });
       }
     } catch (err) {
       return false;
@@ -99,6 +123,12 @@ function Installation(props: singleInstallationProps) {
     setCurrentTab(path[path.length - 1]);
   }, [location]);
 
+  useEffect(() => {
+    if (status === -1) {
+      setOpenModalUnableToCommunicateWIthInstallation(true);
+    }
+  }, [status]);
+
   useEffect(() => {
     if (
       currentTab == 'live' ||
@@ -118,7 +148,7 @@ function Installation(props: singleInstallationProps) {
         fetchDataOnlyOneTime();
       }
 
-      // Cleanup function to cancel interval and update isMounted when unmounted
+      // Cleanup function to cancel interval
       return () => {
         if (
           currentTab == 'live' ||
@@ -130,6 +160,10 @@ function Installation(props: singleInstallationProps) {
     }
   }, [currentTab, location]);
 
+  const UnableToCommunicateModalHandleOk = () => {
+    setOpenModalUnableToCommunicateWIthInstallation(false);
+  };
+
   return (
     <>
       <Grid item xs={12} md={12}>
@@ -264,6 +298,31 @@ function Installation(props: singleInstallationProps) {
             alignItems="stretch"
             spacing={0}
           >
+            {openModalUnableToCommunicateWIthInstallation && (
+              <Container
+                maxWidth="xl"
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  height: '70vh'
+                }}
+              >
+                <CircularProgress size={60} style={{ color: '#ffc04d' }} />
+                <Typography
+                  variant="body2"
+                  style={{ color: 'black', fontWeight: 'bold' }}
+                  mt={2}
+                >
+                  Unable to communicate with the installation
+                </Typography>
+                <Typography variant="body2" style={{ color: 'black' }}>
+                  Please wait or refresh the page
+                </Typography>
+              </Container>
+            )}
+
             <Routes>
               <Route
                 path={routes.information}
@@ -283,6 +342,7 @@ function Installation(props: singleInstallationProps) {
                     values={values}
                     s3Credentials={s3Credentials}
                     installationId={props.current_installation.id}
+                    productNum={props.current_installation.product}
                   ></BatteryView>
                 }
               ></Route>

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

@@ -63,11 +63,11 @@ function InstallationSearch(props: installationSearchProps) {
         {filteredData.map((installation) => {
           return (
             <Route
-              key={installation.id}
+              key={installation.s3BucketId}
-              path={routes.installation + installation.id + '*'}
+              path={routes.installation + installation.s3BucketId + '*'}
               element={
                 <Installation
-                  key={installation.id}
+                  key={installation.s3BucketId}
                   current_installation={installation}
                   type="installation"
                 ></Installation>

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

@@ -25,6 +25,7 @@ function installationForm(props: installationFormProps) {
   const theme = useTheme();
   const [open, setOpen] = useState(true);
   const [formValues, setFormValues] = useState<Partial<I_Installation>>({
+    installationName: '',
     name: '',
     region: '',
     location: '',
@@ -32,7 +33,14 @@ function installationForm(props: installationFormProps) {
     vpnIp: '',
     orderNumbers: ''
   });
-  const requiredFields = ['name', 'region', 'location', 'country', 'vpnIp'];
+  const requiredFields = [
+    'installationName',
+    'name',
+    'region',
+    'location',
+    'country',
+    'vpnIp'
+  ];
   const tokencontext = useContext(TokenContext);
   const { removeToken } = tokencontext;
 
@@ -105,6 +113,21 @@ function installationForm(props: installationFormProps) {
             noValidate
             autoComplete="off"
           >
+            <div>
+              <TextField
+                label={
+                  <FormattedMessage
+                    id="installationName"
+                    defaultMessage="Installation Name"
+                  />
+                }
+                name="installationName"
+                value={formValues.installationName}
+                onChange={handleChange}
+                required
+                error={formValues.installationName === ''}
+              />
+            </div>
             <div>
               <TextField
                 label={
@@ -120,6 +143,7 @@ function installationForm(props: installationFormProps) {
                 error={formValues.name === ''}
               />
             </div>
+
             <div>
               <TextField
                 label={<FormattedMessage id="region" defaultMessage="Region" />}

typescript/frontend-marios2/src/content/dashboards/Log/graph.util.tsx

@@ -174,7 +174,6 @@ const batteryPaths = [
   '/Battery/Devices/%id%/Dc/Voltage',
   '/Battery/Devices/%id%/Soc',
   '/Battery/Devices/%id%/Temperatures/Cells/Average',
-  //'/Log/SalimaxWarnings/Battery/%id%',
   '/Battery/Devices/%id%/Warnings',
   '/Battery/Devices/%id%/Alarms',
 
@@ -319,6 +318,8 @@ export const extractValues = (
 ): TopologyValues | null => {
   const extractedValues: TopologyValues = {} as TopologyValues;
 
+  // console.log('timeSeriesData=', timeSeriesData);
+
   for (const topologyKey of Object.keys(topologyPaths)) {
     //Each topologykey may have more than one paths (for example inverter)
     const paths = topologyPaths[topologyKey];

typescript/frontend-marios2/src/content/dashboards/SalidomoInstallations/FlatInstallationView.tsx

@@ -100,11 +100,11 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => {
               <TableBody>
                 {props.installations.map((installation) => {
                   const isInstallationSelected =
-                    installation.id === selectedInstallation;
+                    installation.s3BucketId === selectedInstallation;
 
                   const status = getStatus(installation.id);
                   const rowStyles =
-                    isRowHovered === installation.id
+                    isRowHovered === installation.s3BucketId
                       ? {
                           cursor: 'pointer',
                           backgroundColor: theme.colors.primary.lighter
@@ -114,13 +114,15 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => {
                   return (
                     <TableRow
                       hover
-                      key={installation.id}
+                      key={installation.s3BucketId}
                       selected={isInstallationSelected}
                       style={rowStyles}
                       onClick={() =>
-                        handleSelectOneInstallation(installation.id)
+                        handleSelectOneInstallation(installation.s3BucketId)
+                      }
+                      onMouseEnter={() =>
+                        handleRowMouseEnter(installation.s3BucketId)
                       }
-                      onMouseEnter={() => handleRowMouseEnter(installation.id)}
                       onMouseLeave={() => handleRowMouseLeave()}
                     >
                       <TableCell>
@@ -132,7 +134,7 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => {
                           noWrap
                           sx={{ marginTop: '10px', fontSize: 'small' }}
                         >
-                          {installation.name}
+                          {installation.installationName}
                         </Typography>
                       </TableCell>
 

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

@@ -10,7 +10,6 @@ import {
 } from 'src/content/dashboards/Log/graph.util';
 import { WebSocketContext } from 'src/contexts/WebSocketContextProvider';
 import { FormattedMessage } from 'react-intl';
-import Overview from '../Overview/overview';
 import { fetchData } from 'src/content/dashboards/Installations/fetchData';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import routes from '../../../Resources/routes.json';
@@ -41,11 +40,12 @@ function Installation(props: singleInstallationProps) {
     s3Region: props.current_installation.s3Region,
     s3Provider: props.current_installation.s3Provider,
     s3Key: props.current_installation.s3Key,
-    s3Secret: props.current_installation.s3Secret
+    s3Secret: props.current_installation.s3Secret,
+    s3BucketId: props.current_installation.s3BucketId
   };
 
   const s3Bucket =
-    props.current_installation.id.toString() +
+    props.current_installation.s3BucketId.toString() +
     '-' +
     'c0436b6a-d276-4cd8-9c44-1eae86cf5d0e';
 
@@ -182,13 +182,10 @@ function Installation(props: singleInstallationProps) {
                     values={values}
                     s3Credentials={s3Credentials}
                     installationId={props.current_installation.id}
+                    productNum={props.current_installation.product}
                   ></BatteryView>
                 }
               ></Route>
-              <Route
-                path={routes.overview}
-                element={<Overview s3Credentials={s3Credentials}></Overview>}
-              />
 
               <Route
                 path={'*'}

typescript/frontend-marios2/src/content/dashboards/SalidomoInstallations/InstallationSearch.tsx

@@ -107,11 +107,11 @@ function InstallationSearch(props: installationSearchProps) {
         {filteredData.map((installation) => {
           return (
             <Route
-              key={installation.id}
+              key={installation.s3BucketId}
-              path={routes.installation + installation.id + '*'}
+              path={routes.installation + installation.s3BucketId + '*'}
               element={
                 <Installation
-                  key={installation.id}
+                  key={installation.s3BucketId}
                   current_installation={installation}
                   type="installation"
                 ></Installation>

typescript/frontend-marios2/src/content/dashboards/SalidomoInstallations/SalidomoInstallationForm.tsx

@@ -23,14 +23,20 @@ function SalidomonstallationForm(props: SalidomoInstallationFormProps) {
   const theme = useTheme();
   const [open, setOpen] = useState(true);
   const [formValues, setFormValues] = useState<Partial<I_Installation>>({
-    name: '',
+    installationName: '',
     region: '',
     location: '',
     country: '',
     vpnIp: '',
     vrmLink: ''
   });
-  const requiredFields = ['name', 'location', 'country', 'vpnIp', 'vrmLink'];
+  const requiredFields = [
+    'installationName',
+    'location',
+    'country',
+    'vpnIp',
+    'vrmLink'
+  ];
   const installationContext = useContext(InstallationsContext);
   const { createInstallation, loading, setLoading, error, setError } =
     installationContext;
@@ -108,11 +114,11 @@ function SalidomonstallationForm(props: SalidomoInstallationFormProps) {
                     defaultMessage="Installation Name"
                   />
                 }
-                name="name"
+                name="installationName"
-                value={formValues.name}
+                value={formValues.installationName}
                 onChange={handleChange}
                 required
-                error={formValues.name === ''}
+                error={formValues.installationName === ''}
               />
             </div>
             <div>

typescript/frontend-marios2/src/content/dashboards/Tree/CustomTreeItem.tsx

@@ -52,7 +52,7 @@ function CustomTreeItem(props: CustomTreeItemProps) {
         routes.installations +
           routes.tree +
           routes.installation +
-          installation.id +
+          installation.s3BucketId +
           '/' +
           routes.live,
         {

typescript/frontend-marios2/src/content/dashboards/Tree/InstallationTree.tsx

@@ -28,7 +28,11 @@ function InstallationTree() {
                 subnode != node &&
                 subnode.parentId == node.id && (
                   <TreeNode
-                    key={subnode.id.toString() + subnode.type}
+                    key={
+                      subnode.type == 'Installation'
+                        ? subnode.s3BucketId.toString() + subnode.type
+                        : subnode.id.toString() + subnode.type
+                    }
                     node={subnode}
                     parent_id={node.id}
                   />
@@ -58,7 +62,11 @@ function InstallationTree() {
           {foldersAndInstallations.map((node, index) => {
             return (
               <TreeNode
-                key={node.id.toString() + node.type}
+                key={
+                  node.type == 'Installation'
+                    ? node.s3BucketId.toString() + node.type
+                    : node.id.toString() + node.type
+                }
                 node={node}
                 parent_id={'0'}
               />
@@ -72,11 +80,11 @@ function InstallationTree() {
           if (installation.type == 'Installation') {
             return (
               <Route
-                key={installation.id}
+                key={installation.s3BucketId}
-                path={routes.installation + installation.id + '*'}
+                path={routes.installation + installation.s3BucketId + '*'}
                 element={
                   <Installation
-                    key={installation.id}
+                    key={installation.s3BucketId}
                     current_installation={installation}
                     type="installation"
                   ></Installation>

typescript/frontend-marios2/src/interfaces/InstallationTypes.tsx

@@ -25,5 +25,6 @@ export interface I_Folder {
   information: string;
   parentId: number;
   type: string;
+  s3BucketId: number;
   children?: (I_Installation | I_Folder)[];
 }

typescript/frontend-marios2/src/interfaces/S3Types.tsx

@@ -3,7 +3,8 @@ export interface I_S3Credentials {
   s3Provider: string;
   s3Key: string;
   s3Secret: string;
-  s3Bucket?: string;
+  s3Bucket: string;
+  s3BucketId: number;
 }
 
 export interface ErrorMessage {