Add Product Model Validation

Juniper · Oct 4, 2024 · 8383a2c · 8383a2c
1 parent fdfba3c
commit 8383a2c
Show file tree

Hide file tree

Showing 15 changed files with 666 additions and 77 deletions.
diff --git a/demo/jccm-product-model-validation.gif b/demo/jccm-product-model-validation.gif
diff --git a/jccm/src/Frontend/Common/StateStore.js b/jccm/src/Frontend/Common/StateStore.js
@@ -18,12 +18,11 @@ const useStore = create((set, get) => ({
     getConsoleWindowWidth: () => {
         if (get().consoleWindowOpen) {
             return get().consoleWindowWidth;
-        } 
+        }
         return 0;
     },
 
     settings: {},
-
     setSettings: (settings) =>
         set((state) => {
             if (!_.isEqual(state.settings, settings)) {
@@ -442,6 +441,30 @@ const useStore = create((set, get) => ({
             const { [path]: _, ...rest } = state.isReleasing;
             return { isReleasing: rest };
         }),
+
+    deviceModels: [],
+    supportedDeviceModels: {},
+    setDeviceModels: (newDeviceModels) =>
+        set((state) => {
+            if (!_.isEqual(state.deviceModels, newDeviceModels)) {
+                const updatedSupportedDeviceModels = {};
+
+                newDeviceModels.forEach((device) => {
+                    if (device.oc_device === true) {
+                        const key = (
+                            device.alias || device.model
+                        ).toUpperCase(); // Use alias if available, otherwise use model
+                        updatedSupportedDeviceModels[key] = device;
+                    }
+                });
+
+                return {
+                    deviceModels: newDeviceModels,
+                    supportedDeviceModels: updatedSupportedDeviceModels,
+                };
+            }
+            return {};
+        }),
 }));
 
 export default useStore;
diff --git a/jccm/src/Frontend/Components/Login.js b/jccm/src/Frontend/Components/Login.js
@@ -301,6 +301,7 @@ export const Login = ({ isOpen, onClose }) => {
                 force: true,
                 ignoreCaseInName,
             });
+            await eventBus.emit('device-models-refresh');
 
             onClose();
         } else if (response.status === 'two_factor') {

diff --git a/jccm/src/Frontend/Components/Logout.js b/jccm/src/Frontend/Components/Logout.js
@@ -18,7 +18,7 @@ import { useMessageBar } from '../Common/MessageBarContext';
 
 function Logout({ isOpen, onClose }) {
     const [isLoggingOut, setIsLoggingOut] = useState(false); // State to track logout operation
-    const { getConsoleWindowWidth, setIsUserLoggedIn, setCloudInventory } = useStore(); // Get the login status from your global state
+    const { getConsoleWindowWidth, setIsUserLoggedIn, setCloudInventory, setDeviceModels } = useStore(); // Get the login status from your global state
     const { showMessageBar } = useMessageBar();
 
     const handleLogoutItem = async () => {
@@ -27,9 +27,10 @@ function Logout({ isOpen, onClose }) {
             const data = await electronAPI.saLogoutUser();
             console.log('logout', data);
             if (data.logout) {
-                console.log('logout: ', data);
+                // console.log('logout: ', data);
                 setIsUserLoggedIn(false);
                 setCloudInventory([]);
+                setDeviceModels([]);
                 showMessageBar({
                     message: 'Logout successful!',
                     intent: 'success',

diff --git a/jccm/src/Frontend/Components/UserAvatar.js b/jccm/src/Frontend/Components/UserAvatar.js
@@ -1,7 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import _ from 'lodash';
 
-import { Tooltip, Persona, makeStyles, tokens } from '@fluentui/react-components';
+import {
+    Tooltip,
+    Persona,
+    Text,
+    makeStyles,
+    tokens,
+} from '@fluentui/react-components';
 
 import useStore from '../Common/StateStore';
 import Logout from './Logout';
@@ -17,12 +23,15 @@ const usePersonaStyles = makeStyles({
 
 const UserAvatar = () => {
     const { user } = useStore();
-    const [isUserLogoutCardVisible, setIsUserLogoutCardVisible] = useState(false);
+    const [isUserLogoutCardVisible, setIsUserLogoutCardVisible] =
+        useState(false);
     const styles = usePersonaStyles();
 
     useEffect(() => {
         const intervalId = setInterval(async () => {
-            await eventBus.emit('user-session-check', { message: 'Periodic user session aliveness check' });
+            await eventBus.emit('user-session-check', {
+                message: 'Periodic user session aliveness check',
+            });
         }, 30000);
         return () => clearInterval(intervalId);
     }, []);
@@ -41,7 +50,9 @@ const UserAvatar = () => {
         >
             <div className={styles.root}>
                 <Tooltip
-                    content={`${userName} is logged into the service '${user?.service}'`}
+                    content={
+                        <Text size={100}>{`${userName} is logged into the service "${user?.service}"`}</Text>
+                    }
                     relationship='label'
                     withArrow
                     positioning='above-end'