Add final touch

sig-0 · Nov 18, 2022 · c1ba4c3 · c1ba4c3
1 parent f50949b
commit c1ba4c3
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 22 deletions.
diff --git a/web-ui/src/components/organisms/NavigationBar/NavigationBar.tsx b/web-ui/src/components/organisms/NavigationBar/NavigationBar.tsx
@@ -1,19 +1,19 @@
 import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded';
-import React, { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
-import QuitService from '../../../services/quitService/quitService';
 import theme from '../../../theme/theme';
 import ActionButton from '../../atoms/ActionButton/ActionButton';
 import Logo from '../../atoms/Logo/Logo';
 import { EActiveAppTab } from '../../layouts/AppLayout/appLayout.types';
 import NavigationBarItem from '../../molecules/NavigationBarItem/NavigationBarItem';
-import useSnackbar from '../../molecules/Snackbar/useSnackbar.hook';
 import { INavigationBarProps } from './navigationBar.types';
+import { useNavigate } from 'react-router-dom';
 
 const NavigationBar: FC<INavigationBarProps> = () => {
   const classes = useStyles();
+  const navigate = useNavigate();
 
   const [activeTab, setActiveTab] = useState<EActiveAppTab>(
     EActiveAppTab.ACCOUNTS
@@ -57,23 +57,12 @@ const NavigationBar: FC<INavigationBarProps> = () => {
     }
   ];
 
-  const { openSnackbar } = useSnackbar();
   const handleTabChange = (newActive: EActiveAppTab) => {
     setActiveTab(newActive);
   };
 
   const handleQuit = () => {
-    const sendQuitSignal = async () => {
-      await QuitService.sendQuitSignal();
-    };
-
-    sendQuitSignal()
-      .then(() => {
-        openSnackbar('Environment closed', 'success');
-      })
-      .catch((e) => {
-        openSnackbar('Unable to gracefully quit', 'error');
-      });
+    navigate('/quit');
   };
 
   return (

diff --git a/web-ui/src/components/pages/Logger/Logs.tsx b/web-ui/src/components/pages/Logger/Logs.tsx
@@ -22,19 +22,26 @@ const Logs: FC<ILogsProps> = () => {
         });
     }
 
+
     fetchData().then((data) => {
-      console.log(data)
-
       setLogs(data.logs)
     }).catch((e) => {
     })
+
     const intFunc = setInterval(() => {
+
       fetchData().then((data) => {
         console.log(data)
-
+        console.log("fetched")
+        var objDiv = document.getElementById("bottom");
+        if (objDiv != null) {
+          objDiv.scrollTop = objDiv.scrollHeight;
+        }
+
         setLogs(data.logs)
       }).catch((e) => {
       })
+
     }, 2000);
 
     return () => clearInterval(intFunc);
@@ -48,21 +55,27 @@ const Logs: FC<ILogsProps> = () => {
           display={'flex'}
           flexDirection={"column-reverse"}
         >
-          <div style={{"color":"silver", "backgroundColor":"black", "height":"800px", "width":"100%", "padding":"50px", "borderRadius":"25px", "overflow": "auto", "fontSize":"13px", "overflowY": "scroll", "display":"flex", "flexDirection":"column-reverse"}}>
+          <div>
+          <div style={{"color":"silver", "backgroundColor":"black", "height":"800px", "width":"100%", "padding":"50px", "borderRadius":"25px", "overflow": "auto", "fontSize":"13px", "overflowY": "scroll", "display":"flex","flexDirection":"column-reverse"}}>
           {
-             logs.map((item, index) => {
+             logs.slice(0).reverse().map((item, index) => {
               return <div>{item}</div>
              })
-
+            
           }
+
+          </div>
+          <div id="bottom"></div>
           </div>
-
           <Box display={'flex'} alignItems={'center'} width={'100%'} marginBottom={"30px"}>
           <Box display={'flex'} justifyContent={"space-between"}>
             <ActionButton text={'Log to file'} square={true}/>
             <Box ml={2}>
             <ActionButton text={'Log level'} square={true}/>
             </Box>
+            <Box ml={2}>
+            <ActionButton text={'Select node'} square={true}/>
+            </Box>
           </Box>
           </Box>
          </Box>

diff --git a/web-ui/src/components/pages/QuitPage/Quit.tsx b/web-ui/src/components/pages/QuitPage/Quit.tsx
@@ -0,0 +1,52 @@
+import { Box, Typography } from "@material-ui/core";
+import { FC, useEffect} from "react";
+import { IQuitProps } from "./quit.types";
+import LoadingIndicator from '../../atoms/LoadingIndicator/LoadingIndicator';
+import QuitService from '../../../services/quitService/quitService';
+import useSnackbar from '../../molecules/Snackbar/useSnackbar.hook';
+import { useNavigate } from 'react-router-dom';
+
+const Quit: FC<IQuitProps> = () => {
+    const { openSnackbar } = useSnackbar();
+    const navigate = useNavigate();
+
+    useEffect(()=>{
+        const sendQuitSignal = async () => {
+            await QuitService.sendQuitSignal();
+          };
+
+          sendQuitSignal()
+            .then(() => {
+                navigate('/setup');
+            })
+            .catch((e) => {
+              openSnackbar('Unable to gracefully quit', 'error');
+            });
+    },[])
+
+    return <Box mt={4}
+    flexDirection={"column"}
+    display={'flex'}
+    justifyContent="center"
+    alignItems="center"
+    minHeight="100vh"
+    marginTop={"-130px"}
+    >
+
+            <Box
+              mt={2}
+              display={'flex'}
+              alignItems={'center'}
+              justifyContent={'center'}
+              flexDirection={"column"}
+            >
+                <LoadingIndicator />
+                <br></br>
+              <Typography>Cleaning up environment...</Typography>
+            </Box>
+          </Box>
+
+
+}
+
+export default Quit;
diff --git a/web-ui/src/components/pages/QuitPage/quit.types.ts b/web-ui/src/components/pages/QuitPage/quit.types.ts
@@ -0,0 +1 @@
+export interface IQuitProps{}
diff --git a/web-ui/src/router/AppRouter.tsx b/web-ui/src/router/AppRouter.tsx
@@ -7,6 +7,7 @@ import ContractView from '../components/pages/ContractView/ContractView';
 import Logs from '../components/pages/Logger/Logs';
 import NewContract from '../components/pages/NewContract/NewContract';
 import SetupPage from '../components/pages/SetupPage/SetupPage';
+import Quit from '../components/pages/QuitPage/Quit';
 
 const AppRouter = () => (
   <BrowserRouter>
@@ -22,6 +23,7 @@ const AppRouter = () => (
           element={<ContractView />}
         />
         <Route path={'/blockscout'} element={<Blockscout />} />
+        <Route path={'/quit'} element={<Quit />} />
       </Route>
       <Route path="*" element={<Navigate to={'/setup'} />} />
     </Routes>