backups.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="mobile-web-app-capable" content="yes">
  5. <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
  6. <meta charset="UTF-8">
  7. <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
  8. <script src="../../script/jquery.min.js"></script>
  9. <script src="../../script/semantic/semantic.min.js"></script>
  10. <style>
  11. .hidden{
  12. display:none;
  13. }
  14. .disabled{
  15. opacity: 0.5;
  16. pointer-events: none;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div class="ui container">
  22. <div class="ui basic segment">
  23. <h3 class="ui header">
  24. Backup Disk
  25. <div class="sub header">Virtual Roots managed by Hybrid Backup Manager</div>
  26. </h3>
  27. </div>
  28. <table class="ui celled table">
  29. <thead>
  30. <tr><th>Backup Disk (UUID)</th>
  31. <th>Source Disk (UUID)</th>
  32. <th>Mode</th>
  33. <th>Last Cycle Time</th>
  34. <th>Cycle Counter</th>
  35. <th>Action</th>
  36. </tr></thead>
  37. <tbody id="diskTable">
  38. </tbody>
  39. </table>
  40. <div class="ui divider"></div>
  41. <button class="ui tiny right floated green button" onclick="initBackupDiskList();"><i class="refresh icon"></i> Refresh List</button>
  42. <button class="ui tiny basic button" onclick="toggleModeInfo();"><i class="question icon"></i> Know more about backup modes</button>
  43. <div class="ui message" id="modeInfo" style="display:none;">
  44. <div class="header">
  45. <i class="refresh icon"></i> Backup & Restore Modes
  46. </div>
  47. <p>There are 3 backup Modes under the ArozOS Hybrid Backup Manager. </p>
  48. <ul class="list">
  49. <li>Basic (Recommended)
  50. <ul class="list">
  51. <li>Backup newly created files within 5 minutes</li>
  52. <li>Deleted files will be kept 24 hours before it is deleted from backup storage</li>
  53. <li><i class="green checkmark icon"></i> Changes are backed up in near real time</li>
  54. <li><i class="green checkmark icon"></i> Suitable for recovering accidentally deleted files from other access methods (e.g. Samba delete)</li>
  55. <li><i class="red remove icon"></i> Only for disk with small number of files</li>
  56. <li><i class="red remove icon"></i> Frequent READ operations on disk (Recommended for SSD / SD cards only)</li>
  57. </ul>
  58. </li>
  59. <li>Nightly
  60. <ul class="list">
  61. <li>Backup newly created files every 24 hours</li>
  62. <li>Deleted files will be kept 24 - 48 hours before it is deleted from backup storage</li>
  63. <li><i class="green checkmark icon"></i> Allowing user to restore selected file vs (snapshot) restore the whole virtual root folder</li>
  64. <li><i class="green checkmark icon"></i> Suitable for recovering accidentally deleted files from other access methods (e.g. Samba delete)</li>
  65. <li><i class="red remove icon"></i> Changes might take 24 hours to back up</li>
  66. </ul>
  67. </li>
  68. <li>Version (Experimental)
  69. <ul class="list">
  70. <li>Snapshot based backup method</li>
  71. <li>All file changes are kept on disk</li>
  72. <li><i class="green checkmark icon"></i> Allowing user to restore to a specific snapshot</li>
  73. <li><i class="green checkmark icon"></i> Newly created files will be kept, files exists in snapshot will be restored / overwritten</li>
  74. <li><i class="red remove icon"></i> Require a lot of storage space</li>
  75. <li><i class="red remove icon"></i> Computational and IO access heavy, might not suitable for ARM SBCs.</li>
  76. </ul>
  77. </li>
  78. </ul>
  79. </div>
  80. </div>
  81. <script>
  82. function toggleModeInfo(){
  83. $("#modeInfo").slideToggle('fast');
  84. }
  85. initBackupDiskList();
  86. function initBackupDiskList(){
  87. $("#diskTable").html(``);
  88. $.get(`../../system/backup/listAll`, function(data){
  89. if (data.error !== undefined){
  90. alert(data.error);
  91. }else{
  92. //Render the list
  93. data.forEach(disk => {
  94. $("#diskTable").append(`<tr>
  95. <td data-label=""><img class="ui avatar image" style="border-radius: 0px;" src="../../img/system/drive-backup.svg"> ${disk.DiskName} (${disk.DiskUID}:/)</td>
  96. <td data-label=""><img class="ui avatar image" style="border-radius: 0px;" src="../../img/system/drive-virtual.svg"> ${disk.ParentName} (${disk.ParentUID}:/)</td>
  97. <td data-label="">${disk.BackupMode}</td>
  98. <td data-label="">${ao_module_utils.timeConverter(disk.LastBackupCycleTime)}</td>
  99. <td data-label="">${disk.BackupCycleCount}</td>
  100. <td data-label=""><button class="ui teal tiny button" onclick="openRestore('${disk.ParentUID}');">Restore Settings</button></td>
  101. </tr> `);
  102. });
  103. if (data.length == 0){
  104. $('#diskTable').append(`<tr>
  105. <td data-label=""col="5"><i class="red remove icon"></i> No backup disk found on this system</td>
  106. </tr> `);
  107. }
  108. }
  109. });
  110. }
  111. function openRestore(diskUUID){
  112. var rootname = [diskUUID + ":/"];
  113. console.log(rootname);
  114. var hashPassthrough = encodeURIComponent(JSON.stringify(rootname));
  115. ao_module_newfw({
  116. url: "SystemAO/disk/disk_restore.html#" + hashPassthrough,
  117. width: 410,
  118. height: 580,
  119. appicon: "img/system/backup.svg",
  120. title: "Backup & Restore",
  121. });
  122. }
  123. </script>
  124. </body>
  125. </html>