show the status of backups in the control panel

management/templates/index.html

@@ -85,7 +85,10 @@
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">System <b class="caret"></b></a>
               <ul class="dropdown-menu">
                 <li><a href="#system_status" onclick="return show_panel(this);">Status Checks</a></li>
-                <li><a href="#system_dns" onclick="return show_panel(this);">DNS (Advanced)</a></li>
+                <li><a href="#system_backup" onclick="return show_panel(this);">Backup Status</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-header">Super Advanced Options</li>
+                <li><a href="#system_dns" onclick="return show_panel(this);">DNS (Custom/External)</a></li>
               </ul>
             </li>
             <li class="dropdown active">
@@ -115,6 +118,10 @@
       {% include "system-status.html" %}
       </div>
 
+      <div id="panel_system_backup" class="container panel">
+      {% include "system-backup.html" %}
+      </div>
+
       <div id="panel_system_dns" class="container panel">
       {% include "system-dns.html" %}
       </div>

management/templates/system-backup.html

@@ -0,0 +1,70 @@
+<style>
+#backup-status tr.full-backup td { font-weight: bold; }
+</style>
+
+<h2>Backup Status</h2>
+
+<p>The box makes an incremental backup each night. The backup is stored on the machine itself. You are responsible for copying the backup files off of the machine. Many cloud providers make this easy by allowing you to take snapshots of the machine's disk.</p>
+
+<h3>Copying Backup Files</h3>
+
+<p>Use SFTP (FTP over SSH) to copy files from <tt id="backup-location"></tt>. These files are encrpyted, so they are safe to store anywhere. Copy the encryption password from <tt id="backup-encpassword-file"></tt> also but keep it in a safe location.</p>
+
+<h3>Current Backups</h3>
+
+<p>The backup directory currently contains the backups listed below. The total size on disk of the backups is <span id="backup-total-size"></span>.</p>
+
+<table id="backup-status" class="table" style="width: auto">
+  <thead>
+    <th colspan="2">When</th>
+    <th>Type</th>
+    <th>Size</th>
+  </thead>
+  <tbody>
+  </tbody>
+</table>
+
+<p><small>The size column in the table indicates the size of the encrpyted backup, but the total size on disk shown above includes storage for unencrpyted intermediate files.</small></p>
+
+<script>
+function nice_size(bytes) {
+  var powers = ['bytes', 'KB', 'MB', 'GB', 'TB'];
+  while (true) {
+    if (powers.length == 1) break;
+    if (bytes < 1000) break;
+    bytes /= 1024;
+    powers.shift();
+  }
+  return (Math.round(bytes*10)/10) + " " + powers[0];
+}
+
+function show_system_backup() {
+  $('#backup-status tbody').html("<tr><td colspan='2' class='text-muted'>Loading...</td></tr>")
+  api(
+    "/system/backup/status",
+    "GET",
+    { },
+    function(r) {
+      $('#backup-location').text(r.encdirectory);
+      $('#backup-encpassword-file').text(r.encpwfile);
+
+      $('#backup-status tbody').html("");
+      var total_disk_size = 0;
+      for (var i = 0; i < r.backups.length; i++) {
+        var b = r.backups[i];
+        var tr = $('<tr/>');
+        if (b.full) tr.addClass("full-backup");
+        tr.append( $('<td/>').text(b.date_str + " " + r.tz) );
+        tr.append( $('<td/>').text(b.date_delta + " ago") );
+        tr.append( $('<td/>').text(b.full ? "full" : "incremental") );
+        tr.append( $('<td style="text-align: right"/>').text( nice_size(b.encsize)) );
+        $('#backup-status tbody').append(tr);
+
+        total_disk_size += b.size;
+        total_disk_size += b.encsize;
+      }
+
+      $('#backup-total-size').text(nice_size(total_disk_size));
+    })
+}
+</script>