smart.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <html>
  2. <head>
  3. <title>Disk Quota</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  6. <link rel="stylesheet" href="../../../script/semantic/semantic.min.css">
  7. <link rel="stylesheet" href="../disk/quota/script/Chart.min.css">
  8. <script type="text/javascript" src="../../../script/jquery.min.js"></script>
  9. <script type="text/javascript" src="../../../script/semantic/semantic.min.js"></script>
  10. <script src="../disk/quota/script/Chart.min.js"></script>
  11. <style>
  12. </style>
  13. </head>
  14. <body>
  15. <div class="ui container">
  16. <p>Drive SMART</p>
  17. <h1 class="ui header">
  18. <span id="healthy">Loading</span>
  19. <div class="sub header"><span id="totaldisk">N/A</span> disks detected.</div>
  20. </h1>
  21. <div class="ui divider"></div>
  22. <p id="loadWarning"><i class="ui loading spinner icon"></i> Loading SMART data...</p>
  23. <div id="smart-holder" class="ui unstackable items">
  24. </div>
  25. <br>
  26. <div class="ui divider"></div>
  27. </div>
  28. <div class="ui modal">
  29. <i class="close icon"></i>
  30. <div class="header">
  31. SMART Information (<span id="modal_model"></span>)
  32. </div>
  33. <div class="content">
  34. <table class="ui very basic fluid celled table">
  35. <thead>
  36. <tr><th>ID</th>
  37. <th>Name</th>
  38. <th>Value</th>
  39. <th>Worst</th>
  40. <th>Thresh</th>
  41. <th>Status</th>
  42. </tr></thead>
  43. <tbody id="modal_smart">
  44. <tr>
  45. <td>
  46. ...
  47. </td>
  48. </tr>
  49. </tbody>
  50. </table>
  51. </div>
  52. <div class="actions">
  53. <div class="ui black deny button">
  54. Close
  55. </div>
  56. </div>
  57. </div>
  58. <script>
  59. 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>';
  60. var smartDATA;
  61. $.getJSON("/system/disk/smart/getSMART", function(data) {
  62. smartDATA = data;
  63. $("#mainmenu").html("");
  64. if ($(data).length == 0) {
  65. $("#smart-holder").append(append("-1","No disk find!","",-1));
  66. $("#healthy").text("No disks detected.");
  67. $("#totaldisk").text("0");
  68. }else{
  69. $.each(data.devices, function(index, value) {
  70. $("#smart-holder").append(append(index,value.smart.model_name,value.smart.healthy,value.smart.user_capacity.bytes));
  71. });
  72. $("#healthy").text(data.healthy);
  73. $("#totaldisk").text(data.devices.length);
  74. }
  75. $("#loadWarning").remove();
  76. });
  77. function append(id, name, status, capacity){
  78. var tmp = smart_template;
  79. tmp = tmp.replaceAll("{id}",id);
  80. tmp = tmp.replaceAll("{model}",name);
  81. tmp = tmp.replaceAll("{status}",status);
  82. tmp = tmp.replaceAll("{capacity}",disksize(capacity));
  83. return tmp;
  84. }
  85. function disksize(size) {
  86. if (size >= 1000000000000) {
  87. return Math.floor(size / 1000000000000) + " TB";
  88. } else if (size >= 1000000000) {
  89. return Math.floor(size / 1000000000) + " GB";
  90. } else if (size >= 1000000) {
  91. return Math.floor(size / 1000000) + " MB";
  92. } else if (size >= 1024) {
  93. return Math.floor(size / 1000) + " KB";
  94. } else if (size > 0) {
  95. return size + " Bytes";
  96. } else if (size == 0) {
  97. return "Unknown capacity";
  98. } else {
  99. return "";
  100. }
  101. }
  102. function showDetails(selector) {
  103. $("#modal_smart").html("");
  104. var id = $(selector).attr("id");
  105. $("#modal_model").text(smartDATA.devices[id].smart.model_name);
  106. $.each(smartDATA.devices[id].smart.ata_smart_attributes.table, function(index, value) {
  107. $("#modal_smart").append("<tr>");
  108. $("#modal_smart").append("<td>" + value.id + "</td>");
  109. $("#modal_smart").append("<td>" + value.name + "</td>");
  110. $("#modal_smart").append("<td>" + value.value + "</td>");
  111. $("#modal_smart").append("<td>" + value.worst + "</td>");
  112. $("#modal_smart").append("<td>" + value.thresh + "</td>");
  113. $("#modal_smart").append("<td>" + value.healthy + "</td>");
  114. $("#modal_smart").append("</tr>");
  115. });
  116. $('.ui.modal').modal('show');
  117. }
  118. </script>
  119. </body>
  120. </html>