浏览代码

Updated UI about SMART

Alanyeung's Windows Laptop 4 年之前
父节点
当前提交
fd3ec9e246

+ 23 - 1
mod/disk/smart/smart.go

@@ -43,7 +43,7 @@ func NewSmartListener() (*SMARTListener, error) {
 
 	driveList := scanAvailableDevices(smartExec)
 	readSMARTDevices(smartExec, &driveList)
-
+	fillHealthyStatus(&driveList)
 	return &SMARTListener{
 		SystemSmartExecutable: smartExec,
 		DriveList:             driveList,
@@ -74,6 +74,28 @@ func readSMARTDevices(smartExec string, devicesList *DevicesList) {
 	}
 }
 
+func fillHealthyStatus(devicesList *DevicesList) {
+	devicesList.Healthy = "Normal"
+	for i, device := range devicesList.Devices {
+		for j, smartTableElement := range device.Smart.AtaSmartAttributes.Table {
+			devicesList.Devices[i].Smart.Healthy = "Normal"
+			devicesList.Devices[i].Smart.AtaSmartAttributes.Table[j].Healthy = "Normal"
+			if smartTableElement.WhenFailed == "FAILING_NOW" {
+				devicesList.Devices[i].Smart.AtaSmartAttributes.Table[j].Healthy = "Failing"
+				devicesList.Devices[i].Smart.Healthy = "Failing"
+				devicesList.Healthy = "Failing"
+				break
+			}
+			if smartTableElement.WhenFailed == "In_the_past" {
+				devicesList.Devices[i].Smart.AtaSmartAttributes.Table[j].Healthy = "Attention"
+				devicesList.Devices[i].Smart.Healthy = "Attention"
+				devicesList.Healthy = "Attention"
+				break
+			}
+		}
+	}
+}
+
 func (s *SMARTListener) GetSMART(w http.ResponseWriter, r *http.Request) {
 	jsonText, _ := json.Marshal(s.DriveList)
 	sendJSONResponse(w, string(jsonText))

+ 3 - 0
mod/disk/smart/structure.go

@@ -24,6 +24,7 @@ type DevicesList struct {
 		Protocol string      `json:"protocol"`
 		Smart    DeviceSMART `json:"smart"`
 	} `json:"devices"`
+	Healthy string `json:"healthy"`
 }
 
 // DeviceSMART was used for storing each disk smart information
@@ -152,6 +153,7 @@ type DeviceSMART struct {
 			Worst      int    `json:"worst"`
 			Thresh     int    `json:"thresh"`
 			WhenFailed string `json:"when_failed"`
+			Healthy    string `json:"healthy"`
 			Flags      struct {
 				Value         int    `json:"value"`
 				String        string `json:"string"`
@@ -214,4 +216,5 @@ type DeviceSMART struct {
 			PowerUpScanResumeMinutes int `json:"power_up_scan_resume_minutes"`
 		} `json:"ata_smart_selective_self_test_log"`
 	*/
+	Healthy string `json:"healthy"`
 }

+ 0 - 62
web/SystemAO/disk/smart/dotest.html

@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<meta name="apple-mobile-web-app-capable" content="yes" />
-<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=0.6, maximum-scale=0.6" />
-<html>
-
-<head>
-    <meta charset="UTF-8">
-    <script type='text/javascript' charset='utf-8'>
-        // Hides mobile browser's address bar when page is done loading.
-        window.addEventListener('load', function(e) {
-            setTimeout(function() {
-                window.scrollTo(0, 1);
-            }, 1);
-        }, false);
-    </script>
-    <title>ArOZ Onlineβ</title>
-    <link rel="stylesheet" href="../../../script/tocas/tocas.css">
-    <script src="../../../script/tocas/tocas.js"></script>
-    <script src="../../../script/jquery.min.js"></script>
-    <!--<script src="../../../script/ao_module.js"></script>-->
-</head>
-
-<body style="background-color: rgba(255, 255, 255,0.9)">
-    <br>
-    <div class="ts container">
-        <p id="Tstatus">Quick diagnostic in progress... Approximate time was 3 minutes.</p>
-        <div class="ts progress">
-            <div class="bar" id="prbar" style="width: 0%"></div>
-        </div>
-        <p id="status"></p>
-    </div>
-    <script>
-        var timer = setInterval(function() {
-            $.getJSON("../../../system/disk/smart/getLogInfo?disk=" + get("disk"), function(data) {
-                if (data["value"] == 246) {
-                    var width = data["remaining_percent"];
-                    $("#prbar").attr("style", "width: " + (100 - width) + "%");
-                    $("#status").text("Status:" + data["string"]);
-                } else if (data["value"] == 16) {
-                    $("#Tstatus").text("Harddisk test aborted.");
-                    $("#status").text("Status:" + data["string"]);
-                } else if (data["value"] == 0) {
-                    $("#Tstatus").text("Harddisk test finished.");
-                    $("#prbar").attr("style", "width: 100%");
-                    $("#status").text("Status:" + data["string"]);
-                }
-            });
-        }, 3000);
-
-        //https://stackoverflow.com/questions/831030/how-to-get-get-request-parameters-in-javascript
-        function get(name) {
-            if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(location.search)) {
-                return decodeURIComponent(name[1]);
-            }
-        }
-    </script>
-</body>
-
-</html>
-<?php
-exec('sudo smartctl -t short -C '.$_GET["disk"]);
-?>

+ 1 - 0
web/SystemAO/disk/smart/img/hard-drive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hard-drive"><line x1="22" y1="12" x2="2" y2="12"></line><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path><line x1="6" y1="16" x2="6.01" y2="16"></line><line x1="10" y1="16" x2="10.01" y2="16"></line></svg>

+ 0 - 114
web/SystemAO/disk/smart/log.html

@@ -1,114 +0,0 @@
-<!DOCTYPE html>
-<meta name="apple-mobile-web-app-capable" content="yes" />
-<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=0.6, maximum-scale=0.6" />
-<html>
-
-<head>
-    <meta charset="UTF-8">
-    <script type='text/javascript' charset='utf-8'>
-        // Hides mobile browser's address bar when page is done loading.
-        window.addEventListener('load', function(e) {
-            setTimeout(function() {
-                window.scrollTo(0, 1);
-            }, 1);
-        }, false);
-    </script>
-    <title>ArOZ Onlineβ</title>
-    <link rel="stylesheet" href="../../../script/tocas/tocas.css">
-    <script src="../../../script/tocas/tocas.js"></script>
-    <script src="../../../script/jquery.min.js"></script>
-    <!--<script src="../../../script/ao_module.js"></script>-->
-    <style>
-
-    </style>
-</head>
-
-<body style="background-color: rgba(255, 255, 255,0.9)">
-    <table class="ts celled striped table">
-        <thead>
-            <tr>
-                <th>Disk</th>
-                <th>Serial Number</th>
-                <th>Position</th>
-                <th>Event</th>
-            </tr>
-        </thead>
-        <tbody id="log_result">
-        </tbody>
-    </table>
-    <div>
-    </div>
-
-    <!-- use for displaying dialog , for VDI user , use VDI module instead -->
-    <div class="ts modals dimmer">
-        <dialog id="modal" class="ts basic modal" style="background-color: white;color: black!important" open>
-            <div class="content" id="modaldata">
-            </div>
-            <div class="actions">
-                <div class="ts fluid separated stackable buttons">
-                    <button class="ts info button">Close</button>
-                </div>
-            </div>
-    </div>
-
-    <div id="msgbox" class="ts bottom right snackbar">
-        <div class="content">
-            Your request is processing now.
-        </div>
-    </div>
-
-    <br><br>
-    <script>
-        $.getJSON("../../system/disk/smart/getSMART", function(data) {
-            if ($(data).length == 0) {
-                msg("No harddisk detected.");
-                LogHTML = "";
-                LogHTML += "<tr>"
-                LogHTML += "<td><i class=\"big caution sign icon\"></i>No log was founded on this server.</td>"
-                LogHTML += "</tr>"
-                $("#log_result").append(LogHTML);
-            }
-            $.each(data, function(id, disk) {
-                if (disk.SMART.ata_smart_self_test_log.standard.table == null) {
-                    msg("No LOG available");
-                }
-                LogHTML = "";
-                $.each(disk.SMART.ata_smart_self_test_log.standard.table, function(index, value) {
-                    LogHTML += "<tr>"
-                    LogHTML += "<td class=\"collapsing\">" + disk.SMART.ModelName + "</td>"
-                    LogHTML += "<td>" + disk.SMART.SerialNumber + "</td>"
-                    LogHTML += "<td>" + disk.Port + "</td>"
-                    LogHTML += "<td>" + value.Type.String + " - " + value.Status.String + "</td>"
-                    LogHTML += "</tr>"
-                });
-                $("#log_result").append(LogHTML);
-            });
-        });
-
-        function msg(content) {
-            ts('.snackbar').snackbar({
-                content: content,
-                actionEmphasis: 'negative',
-            });
-        }
-
-
-        function showDialog(href, x, y) {
-            $("#modaldata").html("");
-            if (loadViaSystemSetting !== undefined && loadViaSystemSetting == true) {
-                href = "../disk/smart/" + href;
-            }
-            $("#modaldata").load(href);
-            ts('#modal').modal({
-                approve: '.info',
-                onApprove: function() {
-                    try {
-                        clearInterval(timer);
-                    } catch (err) {}
-                }
-            }).modal("show")
-        }
-    </script>
-</body>
-
-</html>

+ 106 - 226
web/SystemAO/disk/smart/smart.html

@@ -1,215 +1,92 @@
-<!DOCTYPE html>
-<meta name="apple-mobile-web-app-capable" content="yes" />
-<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=0.6, maximum-scale=0.6" />
-<html>
-
-<head>
-    <meta charset="UTF-8">
-    <script type='text/javascript' charset='utf-8'>
-        // Hides mobile browser's address bar when page is done loading.
-        window.addEventListener('load', function(e) {
-            setTimeout(function() {
-                window.scrollTo(0, 1);
-            }, 1);
-        }, false);
-    </script>
-    <title>ArOZ Onlineβ</title>
-    <link rel="stylesheet" href="../../../script/tocas/tocas.css">
-    <script src="../../../script/tocas/tocas.js"></script>
-    <script src="../../../script/jquery.min.js"></script>
-    <!--<script src="../../../script/ao_module.js"></script>-->
-    <style>
-
-    </style>
-</head>
-
-<body style="background-color: rgba(255, 255, 255,0.9)">
-    <div class="ts relaxed separated mini compact buttons">
-        <button onclick="showSMART(this)" class="ts button">Health Info</button>
-        <button onclick="shortTest(this)" class="ts button">S.M.A.R.T Test</button>
-    </div>
-    <div class="ts divider"></div>
-    <div class="ts bottom attached vertical menu" id="mainmenu">
-    </div>
-
-
-
-
-
-
-
-    <div id="mainmenumsg" style="display:none;">
-        <p>Location: <span id="location"></span></p>
-        <p>Temperature: <span id="temperature"></span></p>
-        <p>Serial Number: <span id="serial_number"></span></p>
-        <p>Firmware Version: <span id="firmware_version"></span></p>
-        <p>SMART Support: <span id="smart"></span></p>
-    </div>
-
-    <div>
-    </div>
 
-    <!-- use for displaying dialog , for VDI user , use VDI module instead -->
-    <div class="ts modals dimmer">
-        <dialog id="modal" class="ts basic modal" style="background-color: white;color: black!important" open>
-            <div class="content" id="modaldata">
-            </div>
-            <div class="actions">
-                <div class="ts fluid separated stackable buttons">
-                    <button class="ts info button">Close</button>
-                </div>
+<html>
+    <head>
+        <title>Disk Quota</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
+        <link rel="stylesheet" href="../../../script/semantic/semantic.min.css">
+        <link rel="stylesheet" href="../disk/quota/script/Chart.min.css">
+        <script type="text/javascript" src="../../../script/jquery.min.js"></script>
+        <script type="text/javascript" src="../../../script/semantic/semantic.min.js"></script>
+        <script src="../disk/quota/script/Chart.min.js"></script>
+        <style>
+
+        </style>
+    </head>
+    <body>
+        <div class="ui container">
+            <p>Drive SMART</p>
+            <h1 class="ui header">
+                <span id="healthy">Loading</span>
+                <div class="sub header"><span id="totaldisk">N/A</span> disks detected.</div>
+            </h1>
+            <div class="ui divider"></div>
+            <p id="loadWarning"><i class="ui loading spinner icon"></i> Loading SMART data...</p>
+                <div id="smart-holder" class="ui unstackable items">
+                  </div>
+            <br>
+            <div class="ui divider"></div>
+        </div>
+        <div class="ui modal">
+          <i class="close icon"></i>
+          <div class="header">
+            SMART Information (<span id="modal_model"></span>)
+          </div>
+          <div class="content">
+            <table class="ui very basic fluid celled table">
+              <thead>
+                <tr><th>ID</th>
+                <th>Name</th>
+                <th>Value</th>
+                <th>Worst</th>
+                <th>Thresh</th>
+                <th>Status</th>
+              </tr></thead>
+              <tbody id="modal_smart">
+                <tr>
+                  <td>
+                    ...
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="actions">
+            <div class="ui black deny button">
+              Close
             </div>
-    </div>
-
-    <div id="msgbox" class="ts bottom right snackbar">
-        <div class="content">
-            Your request is processing now.
+          </div>
         </div>
-    </div>
-
-    <br><br>
-    <script>
-        ts('.secondary.menu .item').tab();
-        $("#mainmenu").html("");
-        var lastSelectedObject = "";
-        startup();
-
-        function startup() {
-            $.getJSON("../../system/disk/smart/getSMART", function(data) {
+        <script>
+          var smart_template = '<div class="item"><div class="image" style="width: auto !important"><img src="/SystemAO/disk/smart/img/hard-drive.svg" style="height:60px;width:auto"></div><div class="content"><p class="header">{model}</p><button class="ui right floated icon button" id="{id}" onclick="showDetails(this)"><i class="info icon"></i></button><div class="meta"><span>{status}</span></div><div class="description"><p></p></div><div class="extra">{capacity}</div></div></div>';
+          var smartDATA;  
+          $.getJSON("/system/disk/smart/getSMART", function(data) {
+                smartDATA = data;
                 $("#mainmenu").html("");
                 if ($(data).length == 0) {
-                    msg("No harddisk detected.");
-                    MainHTML = "";
-                    MainHTML += "<div class=\"item\">";
-                    MainHTML += "<div class=\"ts comments\">";
-                    MainHTML += "<div class=\"comment\" style=\"cursor:pointer;width:98vw\">";
-                    MainHTML += "<div class=\"avatar\"><i class=\"big caution sign icon\"></i></div>";
-                    MainHTML += "<div class=\"content\">";
-                    MainHTML += "<p class=\"author\">No disk was found on this system</p>";
-                    MainHTML += "<div class=\"text\">Please make sure your disk installed correctly</div>";
-                    MainHTML += "</div>";
-                    MainHTML += "</div>";
-                    MainHTML += "</div>";
-                    MainHTML += "</div>";
-                    $("#mainmenu").append(MainHTML);
+                    $("#smart-holder").append(append("-1","No disk find!","",-1));
+                    $("#healthy").text("No disks detected.");
+                    $("#totaldisk").text("0");
+                }else{
+                  $.each(data.devices, function(index, value) {
+                    $("#smart-holder").append(append(index,value.smart.model_name,value.smart.healthy,value.smart.user_capacity.bytes));
+                  });
+                  $("#healthy").text(data.healthy);
+                  $("#totaldisk").text(data.devices.length);
                 }
-                $.each(data, function(index, value) {
-
-                    if (value["SMART"]["smartctl"]["messages"] !== null) {
-                        if (value["SMART"]["smartctl"]["messages"][0]["severity"] == "error") {
-                            msg(value["SMART"]["smartctl"]["messages"][0]["string"]);
-                            return;
-                        }
-                    }
-
-                    if (value["SMART"]["user_capacity"] !== null) {
-                        var capacity = disksize(value["SMART"]["user_capacity"]["bytes"]);
-                    } else {
-                        var capacity = "Unknown";
-                    }
-                    if (typeof value["SMART"]["model_name"] !== null) {
-                        var model_name = value["SMART"]["model_name"];
-                    } else {
-                        var model_name = "Unknown";
-                    }
-                    //for extended
-                    var location = "This Host";
-                    if (value["SMART"]["temperature"] !== null) {
-                        var temperatureF = Math.round(1.8 * parseInt(value["SMART"]["temperature"]["current"]) + 32);
-                        var temperature = value["SMART"]["temperature"]["current"] + "°C | " + temperatureF + "°F";
-                    } else {
-                        var temperature = "Unknown";
-                    }
-                    if (value["SMART"]["serial_number"] !== null) {
-                        var serial_number = value["SMART"]["serial_number"];
-                    } else {
-                        var serial_number = "Unknown";
-                    }
-                    if (value["SMART"]["firmware_version"] !== null) {
-                        var firmware_version = value["SMART"]["firmware_version"];
-                    } else {
-                        var firmware_version = "Unknown";
-                    }
-                    if (value["SMART"]["ata_smart_attributes"] !== null) {
-                        var smart = "Yes";
-                        var icon = "info";
-                        $.each(value["SMART"]["ata_smart_attributes"]["table"], function(indexf, valuef) {
-                            if (typeof valuef["when_failed"] !== "undefined") {
-                                if (valuef["when_failed"] !== "") { //probabally FAILING_NOW, but not sure.
-                                    icon = "negative";
-                                }
-                            }
-                        });
-                    } else {
-                        var smart = "No";
-                    }
-
-
-
-                    $("#mainmenu").append('<div class="item" ondblclick="showSMART()" onClick="selected(this);" diskid="' + value["Port"] + '" location="' + location + '" temperature="' + temperature + '" serial_number="' + serial_number + '" firmware_version="' + firmware_version + '" smart="' + smart + '"><div class="ts comments"><div class="comment" style="cursor:pointer;"><div class="avatar"><i class="inverted ' + icon + ' circular disk outline icon"></i></div><div class="content"><p class="author">' + value["Port"] + '</p><div class="text">' + model_name + ", " + capacity + '</div></div></div></div></div>');
-
-                });
+                $("#loadWarning").remove();
             });
-        }
-
-        function showSMART() {
-            if ($("div[active='true']").length == 0) {
-                msg("Nothing selected");
-            } else {
-                window.history.pushState("", "", "?disk=" + $("div[active='true']").attr("diskid"));
-                showDialog("table.html?disk=" + $("div[active='true']").attr("diskid"), 300, 300);
-            }
-        }
-
-        function shortTest() {
-            if ($("div[active='true']").length == 0) {
-                msg("Nothing selected");
-            } else {
-                window.history.pushState("", "", "?disk=" + $("div[active='true']").attr("diskid"));
-                showDialog("dotest.html?disk=" + $("div[active='true']").attr("diskid"), 300, 300);
+            
+            function append(id, name, status, capacity){
+              var tmp = smart_template;
+              tmp = tmp.replaceAll("{id}",id);
+              tmp = tmp.replaceAll("{model}",name);
+              tmp = tmp.replaceAll("{status}",status);
+              tmp = tmp.replaceAll("{capacity}",disksize(capacity));
+              return tmp;
             }
-        }
-
-        function selected(object) {
-            if (lastSelectedObject != "") {
-                $(lastSelectedObject).css("border-style", "solid");
-                $(lastSelectedObject).css("border-width", "0px");
-                $(lastSelectedObject).css("border-color", "#ffffff");
-                $(lastSelectedObject).css("background-color", "#ffffff");
-                $(lastSelectedObject).removeAttr("style");
-                $(lastSelectedObject).removeAttr("active");
-                $(lastSelectedObject).children("div[class='ts comments']").children("div[class='comment']").children("div[class='avatar']").children("i[name='arrow']").attr("class", "large chevron down icon")
-            }
-            $(object).css("border-style", "solid");
-            $(object).css("border-width", "1px");
-            $(object).css("border-color", "#5998ff");
-            $(object).css("background-color", "#e2fdff");
-            $(object).attr("active", "true");
-            $(object).attr("active", "true");
-            $(object).children("div[class='ts comments']").children("div[class='comment']").children("div[class='avatar']").children("i[name='arrow']").attr("class", "large chevron up icon")
-            $("#mainmenumsg").appendTo(object);
-            $("#mainmenumsg").show();
-            $("#location").text($(object).attr("location"));
-            $("#temperature").text($(object).attr("temperature"));
-            $("#serial_number").text($(object).attr("serial_number"));
-            $("#firmware_version").text($(object).attr("firmware_version"));
-            $("#smart").text($(object).attr("smart"));
-
-            lastSelectedObject = object;
-
-        }
-
-
 
-
-        function msg(content) {
-            ts('.snackbar').snackbar({
-                content: content,
-                actionEmphasis: 'negative',
-            });
-        }
-
-        function disksize(size) {
+          function disksize(size) {
             if (size >= 1000000000000) {
                 return Math.floor(size / 1000000000000) + " TB";
             } else if (size >= 1000000000) {
@@ -218,29 +95,32 @@
                 return Math.floor(size / 1000000) + " MB";
             } else if (size >= 1024) {
                 return Math.floor(size / 1000) + " KB";
-            } else {
+            } else if (size > 0) {
                 return size + " Bytes";
+            } else if (size == 0) {
+                return "Unknown capacity";
+            } else {
+                return "";
             }
-        }
-
-        function showDialog(href, x, y) {
-            $("#modaldata").html("");
-            if (typeof loadViaSystemSetting !== "undefined") {
-                if (loadViaSystemSetting == true) {
-                    href = "../disk/smart/" + href;
-                }
-            }
-            $("#modaldata").load(href);
-            ts('#modal').modal({
-                approve: '.info',
-                onApprove: function() {
-                    try {
-                        clearInterval(timer);
-                    } catch (err) {}
-                }
-            }).modal("show")
-        }
-    </script>
-</body>
-
+          }
+
+          function showDetails(selector) {
+            $("#modal_smart").html("");
+            var id = $(selector).attr("id");
+            $("#modal_model").text(smartDATA.devices[id].smart.model_name);
+            $.each(smartDATA.devices[id].smart.ata_smart_attributes.table, function(index, value) {
+                    $("#modal_smart").append("<tr>");
+                    $("#modal_smart").append("<td>" + value.id + "</td>");
+                    $("#modal_smart").append("<td>" + value.name + "</td>");
+                    $("#modal_smart").append("<td>" + value.value + "</td>");
+                    $("#modal_smart").append("<td>" + value.worst + "</td>");
+                    $("#modal_smart").append("<td>" + value.thresh + "</td>");
+                    $("#modal_smart").append("<td>" + value.healthy + "</td>");
+                    $("#modal_smart").append("</tr>");
+            });
+            $('.ui.modal').modal('show');
+          }
+        </script>
+   
+    </body>
 </html>

+ 0 - 91
web/SystemAO/disk/smart/table.html

@@ -1,91 +0,0 @@
-<!DOCTYPE html>
-<meta name="apple-mobile-web-app-capable" content="yes" />
-<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=0.6, maximum-scale=0.6" />
-<html>
-
-<head>
-    <meta charset="UTF-8">
-    <script type='text/javascript' charset='utf-8'>
-        // Hides mobile browser's address bar when page is done loading.
-        window.addEventListener('load', function(e) {
-            setTimeout(function() {
-                window.scrollTo(0, 1);
-            }, 1);
-        }, false);
-    </script>
-    <title>ArOZ Onlineβ</title>
-    <link rel="stylesheet" href="../../../script/tocas/tocas.css">
-    <script src="../../../script/tocas/tocas.js"></script>
-    <script src="../../../script/jquery.min.js"></script>
-    <!--<script src="../../../script/ao_module.js"></script>-->
-</head>
-
-<body style="background-color: rgba(255, 255, 255,0.9)">
-    <table class="ts celled striped table">
-        <thead>
-            <tr>
-                <thead>
-                    <tr>
-                        <th>#</th>
-                        <th>Name</th>
-                        <th>Value</th>
-                        <th>Worst</th>
-                        <th>Raw Data</th>
-                    </tr>
-                </thead>
-                <tbody id="smartbody">
-                </tbody>
-    </table>
-
-    <script>
-        if (typeof ao_module_getAORootFromScriptPath !== "function") {
-            $.getScript("../../../script/ao_module.js", function() {
-                ao_module_setWindowSize(700, 500);
-            });
-        }
-
-        $.getJSON("../../system/disk/smart/getSMARTTable?disk=" + get("disk"), function(data) {
-            $.each(data, function(index, value) {
-                if (value["id"] !== undefined) {
-                    var id = value["id"];
-                } else {
-                    var id = "Unknown";
-                }
-                if (value["name"] !== undefined) {
-                    var name = value["name"];
-                } else {
-                    var name = "Unknown";
-                }
-                if (value["value"] !== undefined) {
-                    var Svalue = value["value"];
-                } else {
-                    var Svalue = "Unknown";
-                }
-                if (value["worst"] !== undefined) {
-                    var worst = value["worst"];
-                } else {
-                    var worst = "Unknown";
-                }
-                if (typeof value["when_failed"] !== "undefined") {
-                    if (value["when_failed"] !== "") { //probabally FAILING_NOW, but not sure.
-                        var when_failed = "Failed";
-                    } else {
-                        var when_failed = "OK";
-                    }
-                } else {
-                    var when_failed = "Unknown";
-                }
-                $("#smartbody").append('<tr><td>' + id + '</td><td>' + name + '</td><td>' + Svalue + '</td><td>' + worst + '</td><td>' + when_failed + '</td></tr>');
-            });
-        });
-
-        //https://stackoverflow.com/questions/831030/how-to-get-get-request-parameters-in-javascript
-        function get(name) {
-            if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(location.search)) {
-                return decodeURIComponent(name[1]);
-            }
-        }
-    </script>
-</body>
-
-</html>