Merge pull request #98 from mfreeman451/41-bug-fix-ordering-of-ip-add…

…resses-in-sweep-results fixed ordering of addresses
carverauto · Jan 23, 2025 · 61724d8 · 61724d8
2 parents d3a337d + 67e97be
commit 61724d8
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 9 deletions.
diff --git a/pkg/cloud/api/web/dist/index.html b/pkg/cloud/api/web/dist/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ServiceRadar</title>
-    <script type="module" crossorigin src="/assets/index-Cw-NIEwS.js"></script>
+    <script type="module" crossorigin src="/assets/index-ClR9Yc2P.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-ulyhZo4y.css">
   </head>
   <body>

diff --git a/web/dist/index.html b/web/dist/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ServiceRadar</title>
-    <script type="module" crossorigin src="/assets/index-Cw-NIEwS.js"></script>
+    <script type="module" crossorigin src="/assets/index-ClR9Yc2P.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-ulyhZo4y.css">
   </head>
   <body>

diff --git a/web/src/components/NetworkSweepView.jsx b/web/src/components/NetworkSweepView.jsx
@@ -90,8 +90,24 @@ const NetworkSweepView = ({ nodeId, service }) => {
     const portStats = sweepDetails.ports?.sort((a, b) => b.available - a.available) || [];
     const hosts = sweepDetails.hosts || [];
 
+    const sortHosts = (hosts) => {
+        return hosts.sort((a, b) => {
+            // Extract the last octet from IP addresses
+            const aMatch = a.host.match(/(\d+)$/);
+            const bMatch = b.host.match(/(\d+)$/);
+
+            if (aMatch && bMatch) {
+                return parseInt(aMatch[1]) - parseInt(bMatch[1]);
+            }
+            return a.host.localeCompare(b.host);
+        });
+    };
+
+    // Convert sweepDetails.hosts to array and sort
+    const sortedHosts = sweepDetails?.hosts ? sortHosts([...sweepDetails.hosts]) : [];
+
     // Filter hosts based on search term and online status
-    const filteredHosts = hosts.filter(host =>
+    const filteredHosts = sortedHosts.filter(host =>
         (showOffline || host.available) &&
         host.host.toLowerCase().includes(searchTerm.toLowerCase())
     );
@@ -223,7 +239,6 @@ const NetworkSweepView = ({ nodeId, service }) => {
             {viewMode === 'hosts' && (
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     {filteredHosts
-                        .sort((a, b) => b.available - a.available)
                         .map(host => (
                             <HostDetailsView key={host.host} host={host} />
                         ))

diff --git a/web/src/components/NodeList.jsx b/web/src/components/NodeList.jsx
@@ -9,6 +9,7 @@ function NodeList() {
   const [currentPage, setCurrentPage] = useState(1);
   const [nodesPerPage] = useState(10);
   const [sortBy, setSortBy] = useState('status'); // 'status', 'name', 'lastUpdate'
+  const [sortOrder, setSortOrder] = useState('asc');
   const [expandedNode, setExpandedNode] = useState(null);
   const [viewMode, setViewMode] = useState('grid'); // 'grid' or 'table'
 
@@ -43,20 +44,37 @@ function NodeList() {
 
     // Apply sorting
     results.sort((a, b) => {
+      let comparison = 0;
+
       switch (sortBy) {
         case 'status':
-          return (b.is_healthy === a.is_healthy) ? 0 : b.is_healthy ? 1 : -1;
+          comparison = (b.is_healthy === a.is_healthy) ? 0 : b.is_healthy ? 1 : -1;
+          break;
         case 'name':
-          return a.node_id.localeCompare(b.node_id);
+          // Extract last octet for IP address comparison
+          const aMatch = a.node_id.match(/(\d+)$/);
+          const bMatch = b.node_id.match(/(\d+)$/);
+          if (aMatch && bMatch) {
+            comparison = parseInt(aMatch[1]) - parseInt(bMatch[1]);
+          } else {
+            comparison = a.node_id.localeCompare(b.node_id);
+          }
+          break;
         case 'lastUpdate':
-          return new Date(b.last_update) - new Date(a.last_update);
+          comparison = new Date(b.last_update) - new Date(a.last_update);
+          break;
         default:
-          return 0;
+          comparison = 0;
       }
+      return sortOrder === 'asc' ? comparison : -comparison;
     });
 
     setFilteredNodes(results);
-  }, [nodes, searchTerm, sortBy]);
+  }, [nodes, searchTerm, sortBy, sortOrder]);
+
+  const toggleSortOrder = () => {
+    setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
+  };
 
   const pageCount = Math.ceil(filteredNodes.length / nodesPerPage);
   const currentNodes = filteredNodes.slice(
@@ -95,6 +113,12 @@ function NodeList() {
               <option value="name">Sort by Name</option>
               <option value="lastUpdate">Sort by Last Update</option>
             </select>
+            <button
+                onClick={toggleSortOrder}
+                className="px-3 py-1 border rounded"
+            >
+              {sortOrder === 'asc' ? '↑' : '↓'}
+            </button>
             <div className="flex gap-2">
               <button
                   onClick={() => setViewMode('grid')}