Merge pull request #122 from NetSepio/Ashwini

UI changes on the NodeDataDvpnUser, NodeDataDwifiUser
NetSepio · Sep 1, 2024 · b4cd97d · b4cd97d
2 parents da42e09 + 5713019
commit b4cd97d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 25 deletions.
diff --git a/components/NodesDataDvpnUser.jsx b/components/NodesDataDvpnUser.jsx
@@ -15,7 +15,7 @@ const NodesData = () => {
 
   const fetchNodesData = async () => {
     try {
-      const response = await axios.get(`${EREBRUS_GATEWAY_URL}api/v1.0/nodes/all`);
+      const response = await axios.get(`${EREBRUS_GATEWAY_URL}/api/v1.0/nodes/all`);
 
       console.log("API Response:", response.data);
 
@@ -73,15 +73,21 @@ const NodesData = () => {
     {nodesdata.length > 0 ? (
       <div className="overflow-x-auto">
         <table className="min-w-full bg-gray-800 rounded-lg overflow-hidden">
-          <thead className="bg-gray-700">
-            <tr>
-              {["Node Name", "Chain", "Wallet Address", "Region", "Network Speed", "Status", "Uptime", "Last Ping"].map((header) => (
-                <th key={header} className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
-                  {header}
-                </th>
-              ))}
-            </tr>
-          </thead>
+        <thead className="bg-gray-700">
+  <tr>
+    {["Node Name", "Chain", "Wallet Address", "Region", "Network Speed", "Status", "Uptime", "Last Ping"].map((header) => (
+      <th
+        key={header}
+        className="px-6 py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"
+        style={{ lineHeight: '1.5', height: 'auto', paddingTop: '12px', paddingBottom: '12px' }}
+      >
+        {header}
+      </th>
+    ))}
+  </tr>
+</thead>
+
+
           <tbody className="divide-y divide-gray-600">
             {nodesdata.map((node) => (
               <tr
@@ -141,4 +147,4 @@ const NodesData = () => {
   );
 };
 
-export default NodesData;
+export default NodesData;
diff --git a/components/nodedataDwifiUser.js b/components/nodedataDwifiUser.js
@@ -95,17 +95,16 @@ const NodeDwifiStreamUser = () => {
       </div>
     );
   }
-
   return (
     <div className="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
       <h1 className="text-3xl font-bold mb-6">DWifi Nodes Dashboard</h1>
 
       <div className="overflow-x-auto">
         <table className="min-w-full bg-gray-800 rounded-lg overflow-hidden">
           <thead className="bg-gray-700">
-            <tr>
+            <tr className="flex justify-between space-x-2">
               {["Host SSID", "Gateway", "Chain", "Interface", "Connected Devices", "Status", "Location", "Connected At", "Last Pinged"].map((header) => (
-                <th key={header} className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
+                <th key={header} className="flex-1 px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                   {header}
                 </th>
               ))}
@@ -115,25 +114,25 @@ const NodeDwifiStreamUser = () => {
             {Object.values(uniqueNodesData).map((item) => (
               <tr
                 key={item.id}
-                className={`hover:bg-gray-700 transition-colors duration-200 ${
+                className={`flex justify-between space-x-2 transition-colors duration-200 ${
                   item.connected === "true" ? "text-red-300" : "text-blue-300"
                 }`}
               >
-                <td className="px-6 py-4 whitespace-nowrap">{item.status[0].hostSSID}</td>
-                <td className="px-6 py-4 whitespace-nowrap">{item.gateway}</td>
-                <td className="px-6 py-4 whitespace-nowrap">{item.chain_name}</td>
-                <td className="px-6 py-4 whitespace-nowrap">{item.status[0].interfaceName}</td>
-                <td className="px-6 py-4 whitespace-nowrap">{item.status.length}</td>
-                <td className="px-6 py-4 whitespace-nowrap">
+                <td className="flex-1 px-6 py-4 whitespace-nowrap">{item.status[0].hostSSID}</td>
+                <td className="flex-1 px-6 py-4 whitespace-nowrap">{item.gateway}</td>
+                <td className="flex-1 px-6 py-4 whitespace-nowrap">{item.chain_name}</td>
+                <td className="flex-1 px-6 py-4 whitespace-nowrap">{item.status[0].interfaceName}</td>
+                <td className="flex-1 px-6 py-4 whitespace-nowrap">{item.status.length}</td>
+                <td className="flex-1 px-6 py-4 whitespace-nowrap">
                   <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                     item.connected === "true" ? "bg-red-100 text-red-800" : "bg-green-100 text-green-800"
                   }`}>
                     {item.connected === "true" ? "Offline" : "Online"}
                   </span>
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap">{item.location}</td>
-                <td className="px-6 py-4 whitespace-nowrap">{new Date(item.status[0].connectedAt).toLocaleString()}</td>
-                <td className="px-6 py-4 whitespace-nowrap">{new Date(item.status[0].lastChecked).toLocaleString()}</td>
+                <td className="flex-1 px-6 py-4 whitespace-nowrap">{item.location}</td>
+                <td className="flex-1 px-6 py-4 whitespace-nowrap">{new Date(item.status[0].connectedAt).toLocaleString()}</td>
+                <td className="flex-1 px-6 py-4 whitespace-nowrap">{new Date(item.status[0].lastChecked).toLocaleString()}</td>
               </tr>
             ))}
           </tbody>
@@ -142,5 +141,4 @@ const NodeDwifiStreamUser = () => {
     </div>
   );
 };
-
 export default NodeDwifiStreamUser;