Added network interface table

web/components/status.html

@@ -1,20 +1,61 @@
 <div class="ts-content is-rounded is-padded has-top-spaced-large" style="background: var(--ts-gray-800); color: var(--ts-gray-50)">
     <div style="max-width: 480px">
         <div class="ts-header is-huge is-heavy">
-            <span class="ts-icon is-positive is-heading is-check-icon" style="color: var(--ts-positive-500);"></span>
-            <span i18n>Looks Good
-                // 看起來不錯
-            </span>
+            <div class="sysstatus_good">
+                <span class="ts-icon is-positive is-heading is-check-icon" style="color: var(--ts-positive-500);"></span>
+                <span i18n>Looks Good
+                    // 看起來不錯
+                </span>
+            </div>
+            <div class="sysstatus_attention" style="display:none;">
+                <span class="ts-icon is-warning is-heading is-exclamation-icon" style="color: var(--ts-warning-600);"></span>
+                <span i18n>Attention Required
+                    // 需要注意
+                </span>
+            </div>
+            <div class="sysstatus_bad" style="display:none;">
+                <span class="ts-icon is-negative is-heading is-xmark-icon" style="color: var(--ts-negative-500);"></span>
+                <span i18n>Critical Error
+                    // 嚴重錯誤
+                </span>
+            </div>
+            
         </div>
-        <p i18n>This status shows you the general idea on how this storage node is doing in terms of disk health and other system conditions. See system analytic report for more details.
+        <p class="sysstatus_good" i18n>This status shows you the general idea on how this storage node is doing in terms of disk health and other system conditions. See system analytic report for more details.
             // 此狀態顯示了這個儲存節點在磁碟健康和其他系統條件方面的整體情況。 有關詳細資訊，請參閱系統分析報告。
         </p>
+        <p class="sysstatus_attention" style="display:none;" i18n>Some disks are failing soon. Check the SMART status of the disks for more details.
+            // 某些磁碟的壽命即將結束。 請檢查磁碟的 SMART 狀態。
+        </p>
+        <p class="sysstatus_bad" style="display:none;" i18n>All disks are not healthy or failed. Replace the disks as soon as possible.
+            // 所有磁碟都不健康或已損壞。 請儘快更換磁碟。
+        </p>
         <a href="#!" class="ts-button is-outlined" style="color: var(--ts-gray-50)" i18n>
             Analytics Report
             // 分析報告
         </a>
     </div>
 </div>
+<!-- Disk SMARTs -->
+<div class="has-top-spaced-large is-padded">
+    <div id="disk-smart-overview" class="ts-grid has-top-spaced-large is-relaxed is-3-columns is-stretched mobile:is-stacked">
+        <div class="column">
+            <div class="ts-content is-rounded is-padded">
+                <div class="ts-header is-truncated is-large is-heavy" i18n>
+                    SMART Status
+                    // 磁碟健康狀態
+                </div>
+                <p>
+                    <span class="ts-icon is-spinning is-circle-notch-icon"></span>
+                    <span i18n>Loading
+                        // 載入中
+                    </span>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>  
+
 <!-- Network IO -->
 <div class="ts-box has-top-spaced-large is-rounded is-padded ">
     <div class="ts-content">
@@ -45,29 +86,68 @@
     
     </div>
 </div>  
-<!-- Disk SMARTs -->
+
+<!-- Network Interface -->
 <div class="has-top-spaced-large is-padded">
-    <div id="disk-smart-overview" class="ts-grid has-top-spaced-large is-relaxed is-3-columns is-stretched mobile:is-stacked">
-        <div class="column">
-            <div class="ts-content is-rounded is-padded">
-                <div class="ts-header is-truncated is-large is-heavy" i18n>
-                    SMART Status
-                    // 磁碟健康狀態
-                </div>
-                <p>
+    <div class="ts-content">
+        <div class="ts-header is-truncated is-large is-heavy" i18n>Network Interfaces
+            // 網路介面
+        </div>
+        <p i18n>List of network interfaces and their IP addresses.
+            // 網路介面及其 IP 位址列表。
+        </p>
+    </div>
+    <table class="ts-table is-striped">
+        <thead>
+            <tr>
+                <th>ID</th>
+                <th i18n>iface name
+                    // 介面名稱
+                </th>
+                <th i18n>IP Address
+                    // IP 位址
+                </th>
+            </tr>
+        </thead>
+        <tbody id="network-interface-list">
+            <tr>
+                <td colspan="3">
                     <span class="ts-icon is-spinning is-circle-notch-icon"></span>
                     <span i18n>Loading
                         // 載入中
                     </span>
-                </p>
-            </div>
-        </div>
-    </div>
-</div>  
-
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
 
 <script>
 
+    /* Network Interface */
+    function updateNetworkInterfaceTable() {
+        $.get("./api/info/iface", function(data) {
+            const tableBody = $("#network-interface-list");
+            tableBody.empty(); // Clear existing rows
+
+            data.forEach(iface => {
+                const ipAddresses = iface.IPs ? iface.IPs.join("<br>") : '<td class="is-empty"></td>';
+                const row = `
+                    <tr>
+                        <td>${iface.ID}</td>
+                        <td>${iface.Name}</td>
+                        ${iface.IPs ? "<td>" + ipAddresses + "</td>" : '<td class="is-empty"></td>'}
+                    </tr>
+                `;
+                tableBody.append(row);
+            });
+        });
+    }
+
+    // Call the function to populate the table initially
+    updateNetworkInterfaceTable();
+
+    /*  SMART DISK HEALTH STATUS */
     // Function to format power-on hours into a human-readable format
     function formatPowerOnHours(hours) {
         const hoursInDay = 24;
@@ -146,10 +226,17 @@
         }
     }
 
+    function getOverallSystemHealth(){
+
+    }
+
 
     function initDiskSmartHealthOverview(){
         $.get("./api/smart/health/all", function(data){
             $("#disk-smart-overview").html("");
+            let good_count = 0;
+            let attention_count = 0;
+            let bad_count = 0;
             for (var i = 0; i < data.length; i++){
                 let disk = data[i];
                 let healthState = evaluateDriveHealth(disk);
@@ -159,13 +246,16 @@
                 if (healthState == "healthy"){
                     iconClass = "ts-icon is-positive is-heading is-circle-check-icon";
                     iconColor = "var(--ts-positive-500)";
+                    good_count++;
                 }else if (healthState == "attention"){
                     iconClass = "ts-icon is-warning is-heading is-circle-exclamation-icon";
                     iconColor = "var(--ts-warning-500)";
+                    attention_count++;
                 }else if (healthState == "not_healthy"){
                     iconClass = "ts-icon is-danger is-heading is-circle-xmark-icon";
                     iconColor = "var(--ts-gray-300)";
                     tsBoxExtraCss = `background-color: var(--ts-negative-400);`;
+                    bad_count++;
                 }else{
                     iconClass = "ts-icon is-heading is-circle-question-icon";
                     iconColor = "var(--ts-gray-500)";
@@ -223,6 +313,22 @@
                 </div>`);
             }
 
+            // Update the overall system health status
+            if (bad_count == data.length || bad_count + attention_count == data.length){
+                //All disks are bad
+                $(".sysstatus_bad").show();
+                $(".sysstatus_attention").hide();
+                $(".sysstatus_good").hide();
+            }else if (bad_count > 0){
+                $(".sysstatus_bad").hide();
+                $(".sysstatus_attention").show();
+                $(".sysstatus_good").hide();
+            }else{
+                //All or some disks are good but should not be effecting the system
+                $(".sysstatus_bad").hide();
+                $(".sysstatus_attention").hide();
+                $(".sysstatus_good").show();
+            }
             relocale();
         });
     }