Fix macOS x86 package compatibility issue, add switch VC awareness.

Juniper · Aug 29, 2024 · ab8244f · ab8244f
1 parent dbd1f3d
commit ab8244f
Show file tree

Hide file tree

Showing 22 changed files with 1,188 additions and 1,315 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -79,12 +79,19 @@ jobs:
 
               working-directory: ./jccm
 
-            - name: Build and package (arm64 and x64)
+            - name: Build and package (arm64)
               run: |
                   source myenv/bin/activate
-                  npm run make
+                  npm run make -- --arch=arm64
               working-directory: ./jccm
 
+            - name: Build and package (x64)
+              run: |
+                  source myenv/bin/activate
+                  npm run make -- --arch=x64
+              working-directory: ./jccm
+
+
             - name: Notarize and Staple Packages
               run: |
                   set -ex  # Exit on error and print commands

diff --git a/jccm/package.json b/jccm/package.json
@@ -1,7 +1,7 @@
 {
   "name": "jccm",
   "productName": "Juniper Cloud Connection Manager",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Juniper Cloud Connection Manager",
   "main": ".webpack/main",
   "scripts": {
@@ -86,4 +86,4 @@
     "xterm-addon-fit": "^0.8.0",
     "zustand": "^4.5.2"
   }
-}
+}
diff --git a/jccm/src/Frontend/Layout/ChangeIcon.js b/jccm/src/Frontend/Layout/ChangeIcon.js
@@ -44,3 +44,25 @@ export const CircleIcon = ({ Icon, color = tokens.colorPaletteGreenBorder2, size
         </div>
     );
 };
+
+export const OverlappingIcons = ({ Icon, color = tokens.colorPaletteGreenBorder2, size = '12px' }) => {
+    const boxStyle = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+    };
+
+    const containerStyle = {
+        position: 'relative',
+        width: `calc(${size} + 2px)`,
+        height: `calc(${size} + 2px)`,
+    };
+
+    return (
+        <div style={containerStyle}>
+            <Icon style={{ ...boxStyle, fontSize: size, color: color, transform: 'translate(0px, 0px)' }} />
+            <Icon style={{ ...boxStyle, fontSize: size, color: color, transform: 'translate(2px, 2px)' }} />
+            <Icon style={{ ...boxStyle, fontSize: size, color: color, transform: 'translate(4px, 4px)' }} />
+        </div>
+    );
+};
diff --git a/jccm/src/Frontend/Layout/Devices.js b/jccm/src/Frontend/Layout/Devices.js
@@ -1,14 +1,25 @@
 const { electronAPI } = window;
 
+export const getDeviceFacts = async (device, upperSerialNumber=false) => {
+    const { address, port, username, password, timeout } = device;
+    const response = await electronAPI.saGetDeviceFacts({ address, port, username, password, timeout, upperSerialNumber });
+
+    if (response.facts) {
+        return { status: true, result: response.reply };
+    } else {
+        return { status: false, result: response.reply  };
+    }
+};
+
 export const adoptDevices = async (device, jsiTerm=false, deleteOutboundSSHTerm=false) => {
     const { address, port, username, password, organization, site } = device;
     const response = await electronAPI.saAdoptDevice({ address, port, username, password, organization, site, jsiTerm, deleteOutboundSSHTerm });
 
     if (response.adopt) {
-        return { status: true, result: response.result };
+        return { status: true, result: response.reply };
     } else {
         console.log('adoptDevice has failed', response);
-        return { status: false, result: response.result };
+        return { status: false, result: response.reply };
     }
 };
 
@@ -17,10 +28,10 @@ export const releaseDevices = async (deviceInfo) => {
     const response = await electronAPI.saReleaseDevice({ organization, serial: serialNumber });
 
     if (response.release) {
-        return { status: true, result: response.result };
+        return { status: true, result: response.reply };
     } else {
         console.log('releaseDevices has failed', response);
-        return { status: false, result: response.result };
+        return { status: false, result: response.reply };
     }
 };
 
@@ -37,14 +48,3 @@ export const executeJunosCommand = async (device, command) => {
     }
 };
 
-export const getDeviceFacts = async (device, upperSerialNumber=false) => {
-    const { address, port, username, password, timeout } = device;
-    const response = await electronAPI.saGetDeviceFacts({ address, port, username, password, timeout, upperSerialNumber });
-
-    if (response.facts) {
-        return { status: true, result: response.reply };
-    } else {
-        return { status: false, result: response.reply  };
-    }
-};
-
diff --git a/jccm/src/Frontend/Layout/Footer.js b/jccm/src/Frontend/Layout/Footer.js
@@ -11,8 +11,18 @@ export default () => {
     const [countOfOrgOrSiteUnmatched, setCountOfOrgOrSiteUnmatched] = useState(0);
 
     const countOfDeviceFacts = Object.keys(deviceFacts).length;
+
     const countOfAdoptedDevices = Object.values(deviceFacts).filter(
-        (facts) => cloudDevices[facts?.serialNumber]
+        (fact) => {
+            if (fact.vc) {
+                for (const member of fact.vc) {
+                    const device = cloudDevices[member.serial];
+                    if (device) return device;
+                }
+            }
+
+            return cloudDevices[fact.systemInformation?.serialNumber];
+        }
     ).length;
 
     const doesSiteNameExist = (orgName, siteName) => {

diff --git a/jccm/src/Frontend/Layout/GlobalSettings/GlobalSettings.js b/jccm/src/Frontend/Layout/GlobalSettings/GlobalSettings.js
@@ -51,7 +51,6 @@ export const GlobalSettings = ({ title, isOpen, onClose }) => {
 
 
     const onTabSelect = (event, data) => {
-        console.log('onTabSelect: ', data.value);
         setSelectedTab(data.value);
     };
 

diff --git a/jccm/src/Frontend/Layout/Header.js b/jccm/src/Frontend/Layout/Header.js
@@ -162,7 +162,6 @@ export default () => {
     };
 
     const onTabSelect = (event, data) => {
-        console.log('onTabSelect: ', data.value);
         setSelectedTab(data.value);
     };
 

diff --git a/jccm/src/Frontend/Layout/InventoryLocalEditForm.js b/jccm/src/Frontend/Layout/InventoryLocalEditForm.js
@@ -127,7 +127,6 @@ const InventoryLocalEditForm = ({ isOpen, onClose, title, importedInventory }) =
             return data.every((row) => requiredFields.every((field) => row[field] !== '' && row[field] !== null));
         };
 
-        console.log('rowData', rowData);
         const allFieldsValid = validateRowData(rowData);
         setIsDataModified(allFieldsValid);
     };

diff --git a/jccm/src/Frontend/Layout/InventorySearch/InventorySearch.js b/jccm/src/Frontend/Layout/InventorySearch/InventorySearch.js
@@ -73,15 +73,15 @@ const InventorySearchCard = ({ isOpen, onClose }) => {
     const [facts, setFacts] = useState([]);
 
     const factsColumns = [
-        { label: 'Address', name: 'address', width: 10 },
+        { label: 'Address', name: 'address', width: 8 },
         { label: 'Port', name: 'port', width: 5 },
         { label: 'Username', name: 'username', width: 10 },
         { label: 'Password', name: 'password', width: 10 },
+        { label: 'Host Name', name: 'hostName', width: 10 },
         { label: 'Hardware Model', name: 'hardwareModel', width: 10 },
+        { label: 'Serial Number', name: 'serialNumber', width: 10 },
         { label: 'OS Name', name: 'osName', width: 10 },
         { label: 'OS Version', name: 'osVersion', width: 10 },
-        { label: 'Serial Number', name: 'serialNumber', width: 10 },
-        { label: 'Host Name', name: 'hostName', width: 10 },
     ];
 
     const containerRef = useRef(null);
@@ -101,7 +101,6 @@ const InventorySearchCard = ({ isOpen, onClose }) => {
         const loadSubnets = async () => {
             try {
                 const result = await electronAPI.saLoadSubnets();
-                console.log('result: ', result);
                 if (result.status && Array.isArray(result.subnets)) {
                     setSubnets(result.subnets);
                 } else {
@@ -165,7 +164,6 @@ const InventorySearchCard = ({ isOpen, onClose }) => {
         setSubnets((prevSubnets) => {
             const cleanSubnet = cleanupSubnet(inputSubnet.subnet);
             const newSubnet = { ...inputSubnet, subnet: cleanSubnet };
-            console.log('newSubnet: ', newSubnet);
 
             // Check if the new subnet already exists in the list
             const subnetExists = prevSubnets.some(

diff --git a/jccm/src/Frontend/Layout/InventorySearch/InventorySearchControl.js b/jccm/src/Frontend/Layout/InventorySearch/InventorySearchControl.js
@@ -10,6 +10,13 @@ import {
     ProgressBar,
     Toast,
     ToastTitle,
+    Accordion,
+    AccordionHeader,
+    AccordionItem,
+    AccordionPanel,
+    Popover,
+    PopoverSurface,
+    PopoverTrigger,
     tokens,
 } from '@fluentui/react-components';
 
@@ -80,19 +87,48 @@ export const InventorySearchControl = ({ subnets, startCallback, endCallback, on
                 updateHostStatusCount(response.result.status);
 
                 const { address, port, username, password } = device;
-                const { hardwareModel, osName, osVersion, serialNumber, hostName } = response.result;
-
-                await onAddFact({
-                    address,
-                    port,
-                    username,
-                    password,
-                    hardwareModel,
-                    osName,
-                    osVersion,
-                    serialNumber,
-                    hostName,
-                });
+
+                if (!!response.result.vc) {
+                    const { osName, osVersion, hostName } = response.result.systemInformation;
+
+                    const memberHardwareModel = [];
+                    const memberSerialNumber = [];
+
+                    response.result.vc.forEach((member, index) => {
+                        memberHardwareModel.push(member.model);
+                        memberSerialNumber.push(member.serial);
+                    });
+
+                    await onAddFact({
+                        address,
+                        port,
+                        username,
+                        password,
+                        hardwareModel: { label: 'Virtual Chassis', values: memberHardwareModel },
+                        serialNumber: {
+                            label: `${memberSerialNumber.length} item${memberSerialNumber.length > 1 ? 's' : ''}`,
+                            values: memberSerialNumber,
+                        },
+                        osName,
+                        osVersion,
+                        hostName,
+                    });
+                } else {
+                    const { hardwareModel, osName, osVersion, serialNumber, hostName } =
+                        response.result.systemInformation;
+
+                    await onAddFact({
+                        address,
+                        port,
+                        username,
+                        password,
+                        hardwareModel,
+                        osName,
+                        osVersion,
+                        serialNumber,
+                        hostName,
+                    });
+                }
 
                 return response;
             } else {
@@ -263,9 +299,13 @@ export const InventorySearchControl = ({ subnets, startCallback, endCallback, on
 
                 <Tooltip
                     content={
-                        <Text align='start' wrap size={100}>
-                            Select search rate ({minRate}-{maxRate} per second). 
-                            Please ensure there are no security issues when searching at a high rate.
+                        <Text
+                            align='start'
+                            wrap
+                            size={100}
+                        >
+                            Select search rate ({minRate}-{maxRate} per second). Please ensure there are no security
+                            issues when searching at a high rate.
                         </Text>
                     }
                     positioning='below'

diff --git a/jccm/src/Frontend/Layout/InventorySearch/InventorySearchResult.js b/jccm/src/Frontend/Layout/InventorySearch/InventorySearchResult.js
@@ -35,7 +35,13 @@ export const InventorySearchResult = ({ columns, items, rowHeight, disabled }) =
 
     const aggregateByHardwareModel = (items) => {
         return items.reduce((acc, item) => {
-            const model = item.hardwareModel;
+            const model =
+                item.hardwareModel !== null &&
+                typeof item.hardwareModel === 'object' &&
+                !Array.isArray(item.hardwareModel)
+                    ? item.hardwareModel.label
+                    : item.hardwareModel;
+
             if (acc[model]) {
                 acc[model] += 1;
             } else {
@@ -71,9 +77,13 @@ export const InventorySearchResult = ({ columns, items, rowHeight, disabled }) =
             columnOrder.forEach((key) => {
                 const keys = key.split('.');
                 let value = item;
+
                 keys.forEach((k) => {
-                    // value = value && value[k] ? value[k] : '';
                     value = value && value[k] ? value[k] : `Your ${k}`;
+                    value =
+                        value !== null && typeof value === 'object' && !Array.isArray(value)
+                            ? value.values.join(', ')
+                            : value;
                 });
                 orderedRow[columnMapping[key]] = value;
             });

diff --git a/jccm/src/Frontend/Layout/InventorySearch/RWTable.js b/jccm/src/Frontend/Layout/InventorySearch/RWTable.js
@@ -80,7 +80,30 @@ const RenderRow = ({ index, style, data, columns, onDeleteSubnet, disabled }) =>
                                 size={200}
                                 font='numeric'
                             >
-                                {row.item[col.name]}
+                                {row.item[col.name] !== null &&
+                                typeof row.item[col.name] === 'object' &&
+                                !Array.isArray(row.item[col.name]) ? (
+                                    <Tooltip
+                                        content={
+                                            <div
+                                                style={{
+                                                    display: 'flex',
+                                                    justifyContent: 'flex-start',
+                                                    flexDirection: 'column',
+                                                }}
+                                            >
+                                                {row.item[col.name].values.map((item, index) => (
+                                                    <Text key={index} size={100}>{item}</Text>
+                                                ))}
+                                            </div>
+                                        }
+                                        positioning='below'
+                                    >
+                                        <Text size={100}>{row.item[col.name].label}</Text>
+                                    </Tooltip>
+                                ) : (
+                                    row.item[col.name]
+                                )}
                             </Text>
                         )}
                     </TableCell>