Merge pull request #106 from shamanec/show-current-version-and-update

Show current version in hub UI

.github/workflows/main.yml

@@ -27,7 +27,7 @@ jobs:
         env:
           CI: false
         run: |
-          cd hub/gads-ui && npm install && npm run build --verbose
+          cd hub/gads-ui && npm install && REACT_APP_VERSION=${{ github.ref_name }} npm run build --verbose
 
       - name: Build binaries
         run: |

hub/gads-ui/src/Gads.js

@@ -4,31 +4,37 @@ import {Routes, Route, Navigate} from 'react-router-dom'
 import NavBar from './components/TopNavigationBar/TopNavigationBar'
 import DeviceControl from './components/DeviceControl/DeviceControl'
 import Login from './components/Login/Login'
-import { useContext } from 'react'
+import {useContext, useEffect} from 'react'
 import { Auth } from './contexts/Auth'
 import AdminDashboard from './components/Admin/AdminDashboard'
 import axiosInterceptor from './services/axiosInterceptor'
 
 function Gads() {
-  const {authToken, logout} = useContext(Auth)
-  // Set the logout function from the Auth context on the axiosInterceptor to automatically logout on each 401
-  axiosInterceptor(logout)
+    const {authToken, logout} = useContext(Auth)
+    // Set the logout function from the Auth context on the axiosInterceptor to automatically logout on each 401
+    axiosInterceptor(logout)
 
-  if (!authToken) {
-    return <Login />
-  }
+    useEffect(() => {
+        localStorage.removeItem('gadsVersion')
+        let version = process.env.REACT_APP_VERSION || 'unknown'
+        localStorage.setItem('gadsVersion', version)
+    }, [])
 
-  return (
-    <div style={{ backgroundColor: "#f4e6cd", height: "100%" }}>
-      <NavBar />
-      <Routes>
-        <Route path="/" element={<Navigate to="/devices" />} />
-        <Route path="/devices" element={<DeviceSelection />} />
-        <Route path="/devices/control/:id" element={<DeviceControl />} />
-        <Route path="/admin" element={<AdminDashboard />} />
-      </Routes>
-    </div>
-  );
+    if (!authToken) {
+        return <Login/>
+    }
+
+    return (
+        <div style={{backgroundColor: "#f4e6cd", height: "100%"}}>
+            <NavBar/>
+            <Routes>
+                <Route path="/" element={<Navigate to="/devices"/>}/>
+                <Route path="/devices" element={<DeviceSelection/>}/>
+                <Route path="/devices/control/:id" element={<DeviceControl/>}/>
+                <Route path="/admin" element={<AdminDashboard/>}/>
+            </Routes>
+        </div>
+    )
 }
 
 export default Gads

hub/gads-ui/src/components/Login/Login.js

@@ -50,6 +50,8 @@ export default function Login() {
             })
     }
 
+    let gadsVersion = localStorage.getItem('gadsVersion') || 'unknown'
+
     return (
         <div className="top-wrapper">
             <div className="fancy-wrapper">
@@ -76,7 +78,7 @@ export default function Login() {
                                 label="Username"
                                 required
                                 id="outlined-required"
-                                style={{ color: "#9ba984" }}
+                                style={{color: "#9ba984"}}
                                 sx={{
                                     input: {
                                         background: "#9ba984"
@@ -96,7 +98,7 @@ export default function Login() {
                                 label="Password"
                                 required
                                 id="outlined-required"
-                                style={{ color: "#9ba984" }}
+                                style={{color: "#9ba984"}}
                             />
                         </label>
                         <div>
@@ -113,6 +115,16 @@ export default function Login() {
                         </div>
                         {showAlert && <Alert severity="error">{alertText}</Alert>}
                     </form>
+                    <p
+                        style={{
+                            width: '100%',
+                            marginRight: '20px',
+                            textAlign: 'right',
+                            fontWeight: 'bold',
+                            color: '#2f3b26'
+                        }}
+                    >{gadsVersion.startsWith('v') ? gadsVersion : "DEV"}
+                    </p>
                 </div>
             </div>
         </div>

hub/gads-ui/src/components/TopNavigationBar/TopNavigationBar.js

@@ -1,9 +1,10 @@
-import { useContext, useState } from 'react'
+import {useContext, useState} from 'react'
 import './TopNavigationBar.css'
-import { NavLink } from 'react-router-dom'
-import { Auth } from '../../contexts/Auth'
+import {NavLink} from 'react-router-dom'
+import {Auth} from '../../contexts/Auth'
 import Button from '@mui/material/Button'
-import { api } from '../../services/api.js'
+import {api} from '../../services/api.js'
+import Divider from '@mui/material/Divider';
 
 export default function NavBar() {
     const {userName} = useContext(Auth)
@@ -12,12 +13,14 @@ export default function NavBar() {
 
     const roleFromStorage = localStorage.getItem('userRole')
 
-    if (roleFromStorage == 'admin') {
+    if (roleFromStorage === 'admin') {
         if (!showAdmin) {
             setShowAdmin(true)
         }
     }
 
+    let appVersion = localStorage.getItem('gadsVersion') || 'unknown'
+
     return (
         <div
             className='navbar-wrapper'
@@ -44,10 +47,26 @@ export default function NavBar() {
                     />
                 )}
             </nav>
+            <Divider
+                orientation="vertical"
+                flexItem
+                style={{
+                    marginLeft: '10px',
+                    marginRight: '20px'
+                }}
+            />
+            <div
+                style={{
+                    fontWeight: 'bold',
+                    color: '#2f3b26',
+                    pointerEvents: 'none',
+                    userSelect: 'none',
+                }}
+            >{appVersion.startsWith('v') ? appVersion : "DEV"}</div>
             <div
                 className="social-buttons-wrapper"
             >
-                <p style={{ fontWeight: "bold"}}>Welcome, {userName}</p>
+                <p style={{fontWeight: "bold"}}>Welcome, {userName}</p>
                 <KoFiButton></KoFiButton>
                 <GithubButton></GithubButton>
                 <DiscordButton></DiscordButton>
@@ -58,15 +77,15 @@ export default function NavBar() {
     )
 }
 
-function StyledNavLink({ to, linkText }) {
+function StyledNavLink({to, linkText}) {
     return (
         <NavLink className="nav-bar-link"
-            style={({ isActive }) => ({
-                backgroundColor: isActive ? "#2f3b26" : "",
-                color: isActive ? "#9ba984" : "#2f3b26",
-                fontWeight: "bold"
-            })}
-            to={to}
+                 style={({isActive}) => ({
+                     backgroundColor: isActive ? "#2f3b26" : "",
+                     color: isActive ? "#9ba984" : "#2f3b26",
+                     fontWeight: "bold"
+                 })}
+                 to={to}
         >
             {linkText}
         </NavLink>
@@ -135,6 +154,7 @@ function LogoutButton() {
                 console.log(e)
             })
     }
+
     return (
         <Button
             variant="contained"

hub/hub.go

@@ -17,12 +17,13 @@ import (
 //go:embed gads-ui/build
 var uiFiles embed.FS
 
-func StartHub(flags *pflag.FlagSet) {
+func StartHub(flags *pflag.FlagSet, appVersion string) {
 	port, _ := flags.GetString("port")
 	if port == "" {
 		log.Fatalf("Please provide a port on which the hub instance should run through the --port flag, e.g. --port=10000")
 	}
 	hostAddress, _ := flags.GetString("host-address")
+	fmt.Printf("Running hub version `%s`\n", appVersion)
 	fmt.Printf("UI accessible on http://%s:%v. You can change the address and port with the --host-address and --port flags\n", hostAddress, port)
 
 	mongoDB, _ := flags.GetString("mongo-db")

main.go

@@ -21,7 +21,7 @@ func main() {
 		Use:   "hub",
 		Short: "Run a hub component",
 		Run: func(cmd *cobra.Command, args []string) {
-			hub.StartHub(cmd.Flags())
+			hub.StartHub(cmd.Flags(), AppVersion)
 		},
 	}
 	hubCmd.Flags().String("ui-files-dir", "", "Directory where the UI static files will be unpacked and served from."+