Update firmware on frontend

csharp/App/Backend/Controller.cs

@@ -514,18 +514,16 @@ public class Controller : ControllerBase
     }
     
     [HttpPost(nameof(UpdateFirmware))]
-    public ActionResult UpdateFirmware(Int64 batteryNode, Int64 installationId,Token authToken)
+    public async Task<ActionResult> UpdateFirmware(Int64 batteryNode, Int64 installationId,Token authToken)
     {
         var session = Db.GetSession(authToken);
         var installationToUpdate = Db.GetInstallationById(installationId);
         Console.WriteLine("Inside firmware function controller,batteryNode="+batteryNode+ "and installation is "+installationId);
 
-#pragma warning disable CS4014 // Because this call is not awaited, execution of the current method continues before the call is completed
         if (installationToUpdate != null)
         {
-            session.RunScriptInBackground(installationToUpdate.VpnIp, batteryNode);
+            _ = session.RunScriptInBackground(installationToUpdate.VpnIp, batteryNode);
         }
-#pragma warning restore CS4014 // Because this call is not awaited, execution of the current method continues before the call is completed
 
         return Ok();
     }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Container,
   Grid,
@@ -8,7 +8,8 @@ import {
   TableCell,
   TableContainer,
   TableHead,
-  TableRow
+  TableRow,
+  Typography
 } from '@mui/material';
 import { TopologyValues } from '../Log/graph.util';
 import {
@@ -24,10 +25,12 @@ import { I_S3Credentials } from '../../../interfaces/S3Types';
 import routes from '../../../Resources/routes.json';
 import MainStats from './MainStats';
 import DetailedBatteryView from './DetailedBatteryView';
+import CircularProgress from '@mui/material/CircularProgress';
 
 interface BatteryViewProps {
   values: TopologyValues;
   s3Credentials: I_S3Credentials;
+  installationId: number;
 }
 
 function BatteryView(props: BatteryViewProps) {
@@ -40,6 +43,10 @@ function BatteryView(props: BatteryViewProps) {
     (a, b) => b.BatteryId - a.BatteryId
   );
 
+  const [loading, setLoading] = useState(
+    sortedBatteryView.length == 0 ? true : false
+  );
+
   const handleMainStatsButton = () => {
     navigate(routes.mainstats);
   };
@@ -52,8 +59,42 @@ function BatteryView(props: BatteryViewProps) {
     }
   };
 
+  useEffect(() => {
+    if (sortedBatteryView.length == 0) {
+      setLoading(true);
+    } else {
+      setLoading(false);
+    }
+  }, [sortedBatteryView]);
+
   return (
     <>
+      {loading && (
+        <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}
+          >
+            Battery service is not available at the moment
+          </Typography>
+          <Typography variant="body2" style={{ color: 'black' }}>
+            Please wait or refresh the page
+          </Typography>
+        </Container>
+      )}
+
+      {!loading && (
         <Container maxWidth="xl">
           <Grid container>
             <Grid
@@ -115,6 +156,7 @@ function BatteryView(props: BatteryViewProps) {
                     <DetailedBatteryView
                       s3Credentials={props.s3Credentials}
                       batteryData={findBatteryData(battery.BatteryId)}
+                      installationId={props.installationId}
                     ></DetailedBatteryView>
                   }
                 />
@@ -190,10 +232,12 @@ function BatteryView(props: BatteryViewProps) {
                         textAlign: 'center',
 
                         backgroundColor:
-                        battery.Voltage.value < 44 || battery.Voltage.value > 57
+                          battery.Voltage.value < 44 ||
+                          battery.Voltage.value > 57
                             ? '#FF033E'
                             : '#32CD32',
-                      color: battery.Voltage.value === '' ? 'white' : 'inherit'
+                        color:
+                          battery.Voltage.value === '' ? 'white' : 'inherit'
                       }}
                     >
                       {battery.Voltage.value + ' ' + battery.Voltage.unit}
@@ -237,7 +281,8 @@ function BatteryView(props: BatteryViewProps) {
                           battery.Warnings.value !== '' ? 'bold' : 'inherit',
                         backgroundColor:
                           battery.Warnings.value === '' ? 'inherit' : '#ff9900',
-                      color: battery.Warnings.value != '' ? 'black' : 'inherit'
+                        color:
+                          battery.Warnings.value != '' ? 'black' : 'inherit'
                       }}
                     >
                       {battery.Warnings.value === '' ? (
@@ -299,6 +344,7 @@ function BatteryView(props: BatteryViewProps) {
             </Table>
           </TableContainer>
         </Container>
+      )}
     </>
   );
 }

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

@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { I_S3Credentials } from '../../../interfaces/S3Types';
 import {
+  Box,
   Card,
   Grid,
+  IconButton,
+  Modal,
   Paper,
   Table,
   TableBody,
@@ -12,14 +15,16 @@ import {
   Typography
 } from '@mui/material';
 import { Battery } from '../Log/graph.util';
+import { useNavigate } from 'react-router-dom';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import Button from '@mui/material/Button';
 import { FormattedMessage } from 'react-intl';
-import { useNavigate } from 'react-router-dom';
+import axiosConfig from '../../../Resources/axiosConfig';
-import routes from '../../../Resources/routes.json';
 
 interface DetailedBatteryViewProps {
   s3Credentials: I_S3Credentials;
   batteryData: Battery;
+  installationId: number;
 }
 
 function DetailedBatteryView(props: DetailedBatteryViewProps) {
@@ -27,16 +32,20 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
     return null;
   }
   const navigate = useNavigate();
+  const [openModalFirmwareUpdate, setOpenModalFirmwareUpdate] = useState(false);
+  const [openModalResultFirmwareUpdate, setOpenModalResultFirmwareUpdate] =
+    useState(false);
 
   const handleBatteryViewButton = () => {
     navigate(location.pathname.split('/').slice(0, -2).join('/'));
   };
-  const handleMainStatsButton = () => {
+
-    navigate(
+  const handleUpdateFirmware = () => {
-      location.pathname.split('/').slice(0, -2).join('/') +
+    setOpenModalFirmwareUpdate(true);
-        '/' +
+  };
-        routes.mainstats
+
-    );
+  const firmwareModalResultHandleOk = () => {
+    navigate(location.pathname.split('/').slice(0, -2).join('/'));
   };
 
   const [GreenisBlinking, setGreenisBlinking] = useState(
@@ -96,26 +105,177 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
     backgroundColor: '#bfbfbf'
   };
 
+  const FirmwareModalHandleProceed = async (e) => {
+    setOpenModalFirmwareUpdate(false);
+
+    const res = await axiosConfig
+      .post(
+        `/UpdateFirmware?batteryNode=${props.batteryData.BatteryId.toString()}&installationId=${
+          props.installationId
+        }`
+      )
+      .catch((err) => {
+        if (err.response) {
+          // setError(true);
+          // setLoading(false);
+        }
+      });
+
+    //if (res) {
+    setOpenModalResultFirmwareUpdate(true);
+    //}
+  };
+
+  const FirmwareModalHandleCancel = () => {
+    setOpenModalFirmwareUpdate(false);
+  };
+
   return (
     <>
+      {openModalResultFirmwareUpdate && (
+        <Modal
+          open={openModalResultFirmwareUpdate}
+          aria-labelledby="error-modal"
+          aria-describedby="error-modal-description"
+        >
+          <Box
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: 420,
+              bgcolor: 'background.paper',
+              borderRadius: 4,
+              boxShadow: 24,
+              p: 4,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center'
+            }}
+          >
+            <Typography
+              variant="body1"
+              gutterBottom
+              sx={{ fontWeight: 'bold' }}
+            >
+              The firmware is getting updated. Please wait...
+            </Typography>
+
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                marginTop: 10
+              }}
+            >
+              <Button
+                sx={{
+                  marginTop: 2,
+                  textTransform: 'none',
+                  bgcolor: '#ffc04d',
+                  color: '#111111',
+                  '&:hover': { bgcolor: '#f7b34d' }
+                }}
+                onClick={firmwareModalResultHandleOk}
+              >
+                Ok
+              </Button>
+            </div>
+          </Box>
+        </Modal>
+      )}
+
+      {openModalFirmwareUpdate && (
+        <Modal
+          open={openModalFirmwareUpdate}
+          onClose={FirmwareModalHandleCancel}
+          aria-labelledby="error-modal"
+          aria-describedby="error-modal-description"
+        >
+          <Box
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: 420,
+              bgcolor: 'background.paper',
+              borderRadius: 4,
+              boxShadow: 24,
+              p: 4,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center'
+            }}
+          >
+            <Typography
+              variant="body1"
+              gutterBottom
+              sx={{ fontWeight: 'bold' }}
+            >
+              Do you really want to update the firmware?
+            </Typography>
+
+            <Typography variant="body1" gutterBottom>
+              This action requires the battery service to be stopped.
+            </Typography>
+
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                marginTop: 10
+              }}
+            >
+              <Button
+                sx={{
+                  marginTop: 2,
+                  textTransform: 'none',
+                  bgcolor: '#ffc04d',
+                  color: '#111111',
+                  '&:hover': { bgcolor: '#f7b34d' }
+                }}
+                onClick={FirmwareModalHandleProceed}
+              >
+                Proceed
+              </Button>
+              <Button
+                sx={{
+                  marginTop: 2,
+                  marginLeft: 2,
+                  textTransform: 'none',
+                  bgcolor: '#ffc04d',
+                  color: '#111111',
+                  '&:hover': { bgcolor: '#f7b34d' }
+                }}
+                onClick={FirmwareModalHandleCancel}
+              >
+                Cancel
+              </Button>
+            </div>
+          </Box>
+        </Modal>
+      )}
+
       <Grid container>
         <Grid item xs={6} md={6}>
-          <Button
+          <IconButton
-            variant="contained"
+            aria-label="go back"
-            onClick={handleBatteryViewButton}
             sx={{
               marginTop: '20px',
-              backgroundColor: '#ffc04d',
+              backgroundColor: 'grey',
               color: '#000000',
               '&:hover': { bgcolor: '#f7b34d' }
             }}
+            onClick={handleBatteryViewButton}
           >
-            <FormattedMessage id="main_stats" defaultMessage="Battery View" />
+            <ArrowBackIcon />
-          </Button>
+          </IconButton>
 
           <Button
             variant="contained"
-            onClick={handleMainStatsButton}
+            onClick={handleUpdateFirmware}
             sx={{
               marginTop: '20px',
               marginLeft: '20px',
@@ -124,7 +284,10 @@ function DetailedBatteryView(props: DetailedBatteryViewProps) {
               '&:hover': { bgcolor: '#f7b34d' }
             }}
           >
-            <FormattedMessage id="main_stats" defaultMessage="Main Stats" />
+            <FormattedMessage
+              id="update_firmware"
+              defaultMessage="Update Firmware"
+            />
           </Button>
         </Grid>
       </Grid>

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

@@ -1,4 +1,12 @@
-import { Box, Card, Container, Grid, Modal, Typography } from '@mui/material';
+import {
+  Box,
+  Card,
+  Container,
+  Grid,
+  IconButton,
+  Modal,
+  Typography
+} from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import React, { useEffect, useState } from 'react';
 import { I_S3Credentials } from '../../../interfaces/S3Types';
@@ -16,6 +24,7 @@ import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useLocation, useNavigate } from 'react-router-dom';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
 interface MainStatsProps {
   s3Credentials: I_S3Credentials;
@@ -384,31 +393,18 @@ function MainStats(props: MainStatsProps) {
       {!loading && (
         <>
           <Grid item xs={6} md={6}>
-            <Button
+            <IconButton
-              variant="contained"
+              aria-label="go back"
+              sx={{
+                marginTop: '20px',
+                backgroundColor: 'grey',
+                color: '#000000',
+                '&:hover': { bgcolor: '#f7b34d' }
+              }}
               onClick={handleBatteryViewButton}
-              sx={{
-                marginTop: '20px',
-                backgroundColor: '#ffc04d',
-                color: '#000000',
-                '&:hover': { bgcolor: '#f7b34d' }
-              }}
             >
-              <FormattedMessage id="main_stats" defaultMessage="Battery View" />
+              <ArrowBackIcon />
-            </Button>
+            </IconButton>
-
-            <Button
-              variant="contained"
-              sx={{
-                marginTop: '20px',
-                marginLeft: '20px',
-                backgroundColor: '#808080',
-                color: '#000000',
-                '&:hover': { bgcolor: '#f7b34d' }
-              }}
-            >
-              <FormattedMessage id="main_stats" defaultMessage="Main Stats" />
-            </Button>
 
             <Button
               variant="contained"

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

@@ -278,6 +278,7 @@ function Installation(props: singleInstallationProps) {
                   <BatteryView
                     values={values}
                     s3Credentials={s3Credentials}
+                    installationId={props.current_installation.id}
                   ></BatteryView>
                 }
               ></Route>