backups.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  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. <small>*Cycle counter is not equal to the number of times the backup has executed. It is a reference number for developer only.</small>
  41. <div class="ui divider"></div>
  42. <button class="ui tiny right floated green button" onclick="initBackupDiskList();"><i class="refresh icon"></i> Refresh List</button>
  43. <button class="ui tiny basic button" onclick="toggleModeInfo();"><i class="question icon"></i> Know more about backup modes</button>
  44. <div class="ui message" id="modeInfo" style="display:none;">
  45. <div class="header">
  46. <i class="refresh icon"></i> Backup & Restore Modes
  47. </div>
  48. <p>There are 3 backup Modes under the ArozOS Hybrid Backup Manager. </p>
  49. <ul class="list">
  50. <li>Basic (Recommended)
  51. <ul class="list">
  52. <li>Backup newly created files within 5 minutes</li>
  53. <li>Deleted files will be kept 24 hours before it is deleted from backup storage</li>
  54. <li><i class="green checkmark icon"></i> Changes are backed up in near real time</li>
  55. <li><i class="green checkmark icon"></i> Suitable for recovering accidentally deleted files from other access methods (e.g. Samba delete)</li>
  56. <li><i class="red remove icon"></i> Only for disk with small number of files</li>
  57. <li><i class="red remove icon"></i> Frequent READ operations on disk (Recommended for SSD / SD cards only)</li>
  58. </ul>
  59. </li>
  60. <li>Nightly
  61. <ul class="list">
  62. <li>Backup newly created files every 24 hours</li>
  63. <li>Deleted files will be kept 24 - 48 hours before it is deleted from backup storage</li>
  64. <li><i class="green checkmark icon"></i> Allowing user to restore selected file vs (snapshot) restore the whole virtual root folder</li>
  65. <li><i class="green checkmark icon"></i> Suitable for recovering accidentally deleted files from other access methods (e.g. Samba delete)</li>
  66. <li><i class="red remove icon"></i> Changes might take 24 hours to back up</li>
  67. </ul>
  68. </li>
  69. <li>Version (Experimental)
  70. <ul class="list">
  71. <li>Snapshot based backup method</li>
  72. <li>All file changes are kept on disk</li>
  73. <li><i class="green checkmark icon"></i> Allowing user to restore to a specific snapshot</li>
  74. <li><i class="green checkmark icon"></i> Newly created files will be kept, files exists in snapshot will be restored / overwritten</li>
  75. <li><i class="red remove icon"></i> Require a lot of storage space</li>
  76. <li><i class="red remove icon"></i> Computational and IO access heavy, might not suitable for ARM SBCs.</li>
  77. </ul>
  78. </li>
  79. </ul>
  80. </div>
  81. </div>
  82. <script>
  83. function toggleModeInfo(){
  84. $("#modeInfo").slideToggle('fast');
  85. }
  86. initBackupDiskList();
  87. function initBackupDiskList(){
  88. $("#diskTable").html(``);
  89. $.get(`../../system/backup/listAll`, function(data){
  90. if (data.error !== undefined){
  91. alert(data.error);
  92. }else{
  93. //Render the list
  94. data.forEach(disk => {
  95. $("#diskTable").append(`<tr>
  96. <td data-label=""><img class="ui avatar image" style="border-radius: 0px;" src="../../img/system/drive-backup.svg"> ${disk.DiskName} (${disk.DiskUID}:/)</td>
  97. <td data-label=""><img class="ui avatar image" style="border-radius: 0px;" src="../../img/system/drive-virtual.svg"> ${disk.ParentName} (${disk.ParentUID}:/)</td>
  98. <td data-label="">${disk.BackupMode}</td>
  99. <td data-label="">${ao_module_utils.timeConverter(disk.LastBackupCycleTime)}</td>
  100. <td data-label="">${disk.BackupCycleCount}</td>
  101. <td data-label=""><button class="ui teal tiny button" onclick="openRestore('${disk.ParentUID}');">Restore Settings</button></td>
  102. </tr> `);
  103. });
  104. if (data.length == 0){
  105. $('#diskTable').append(`<tr>
  106. <td data-label=""col="5"><i class="red remove icon"></i> No backup disk found on this system</td>
  107. </tr> `);
  108. }
  109. }
  110. });
  111. }
  112. function openRestore(diskUUID){
  113. var rootname = [diskUUID + ":/"];
  114. console.log(rootname);
  115. var hashPassthrough = encodeURIComponent(JSON.stringify(rootname));
  116. ao_module_newfw({
  117. url: "SystemAO/disk/disk_restore.html#" + hashPassthrough,
  118. width: 410,
  119. height: 580,
  120. appicon: "img/system/backup.svg",
  121. title: "Backup & Restore",
  122. });
  123. }
  124. </script>
  125. </body>
  126. </html>