mailinabox/management/templates/system-backup.html

<style>
#backup-status th { text-align: center; }
#backup-status tr.full-backup td { font-weight: bold; }
</style>

<h2>Backup Status</h2>

<p>The box makes an incremental backup each night. By default the backup is stored on the machine itself, but you can also have it stored on Amazon S3</p>

<h3>Configuration</h3>

<form class="form-horizontal" role="form" onsubmit="set_custom_backup(); return false;">
  <div class="form-group">
    <label for="target" class="col-sm-2 control-label">Backup target</label>
    <div class="col-sm-2">
      <select class="form-control" rows="1" id="target-type" onchange="toggle_form()">
        <option value="file">{{hostname}}</option>
        <option value="s3">Amazon S3</option>
      </select>
    </div>
  </div>
  <div class="form-group backup-target-file">
    <div class="col-sm-10 col-sm-offset-2">
      <div>Backups are stored on this machine&rsquo;s own hard disk. You are responsible for periodically using SFTP (FTP over SSH) to copy the backup files from <tt id="backup-location"></tt> to a safe location. These files are encrypted, so they are safe to store anywhere.</div>
    </div>
  </div>
  <div class="form-group backup-target-s3">
    <div class="col-sm-10 col-sm-offset-2">
      <div>Backups are stored in an Amazon Web Services S3 bucket. You must have an AWS account already.</div>
    </div>
  </div>
  <div class="form-group">
    <label for="target" class="col-sm-2 control-label">How many days should backups be kept?</label>
    <div class="col-sm-8">
      <input type="number" class="form-control" rows="1" id="min-age"></input>
    </div>
  </div>
  <div class="form-group backup-target-s3">
    <label for="target" class="col-sm-2 control-label">S3 URL</label>
    <div class="col-sm-8">
      <input type="text" placeholder="s3://s3-eu-central-1.amazonaws.com/bucket-name" class="form-control" rows="1" id="target"></textarea>
    </div>
  </div>
  <div class="form-group backup-target-s3">
    <label for="target-user" class="col-sm-2 control-label">S3 Access Key</label>
    <div class="col-sm-8">
      <input type="text" class="form-control" rows="1" id="target-user"></input>
    </div>
  </div>
  <div class="form-group backup-target-s3">
    <label for="target-pass" class="col-sm-2 control-label">S3 Secret Access Key</label>
    <div class="col-sm-8">
      <input type="text" class="form-control" rows="1" id="target-pass"></input>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-11">
      <button id="set-s3-backup-button" type="submit" class="btn btn-primary">Save</button>
    </div>
  </div>
</form>

<p> Copy the encryption password from <tt id="backup-encpassword-file"></tt> to a safe and secure location. You will need this file to decrypt backup files.</div></p>

<h3>Available Backups</h3>

<p>The backup location currently contains the backups listed below. The total size of the backups is currently <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>
    <th>Deleted in...</th>
  </thead>
  <tbody>
  </tbody>
</table>
<script>

function toggle_form() {
  var target_type = $("#target-type").val();
  $(".backup-target-file, .backup-target-s3").hide();
  $(".backup-target-" + target_type).show();
}

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();
  }
  // round to have three significant figures but at most one decimal place
  if (bytes >= 100)
    bytes = Math.round(bytes)
  else
    bytes = Math.round(bytes*10)/10;
  return bytes + " " + powers[0];
}

function show_system_backup() {
  show_custom_backup()
  
  $('#backup-status tbody').html("<tr><td colspan='2' class='text-muted'>Loading...</td></tr>")
  api(
    "/system/backup/status",
    "GET",
    { },
    function(r) {
      $('#backup-status tbody').html("");
      var total_disk_size = 0;

      if (r.backups.length == 0) {
        var tr = $('<tr><td colspan="3">No backups have been made yet.</td></tr>');
        $('#backup-status tbody').append(tr);
      }

      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" : "increment") );
        tr.append( $('<td style="text-align: right"/>').text( nice_size(b.size)) );
        if (b.deleted_in)
          tr.append( $('<td/>').text(b.deleted_in) );
        else
          tr.append( $('<td class="text-muted">unknown</td>') );
        $('#backup-status tbody').append(tr);

        total_disk_size += b.size;
      }

      $('#backup-total-size').text(nice_size(total_disk_size));
    })
}

function show_custom_backup() {
    $(".backup-target-file, .backup-target-s3").hide();
    api(
      "/system/backup/config",
      "GET",
      { },
      function(r) {
        var target_type = r.target.split(':')[0]
        $("#target").val(r.target);
        $("#target-type").val(target_type);
        $("#target-user").val(r.target_user);
        $("#target-pass").val(r.target_pass);
        $("#min-age").val(r.min_age_in_days);
        $('#backup-location').text(r.file_target_directory);
        $('#backup-encpassword-file').text(r.enc_pw_file);
        toggle_form()
      })
}

function set_custom_backup() {
  var target = $("#target").val();
  var target_type = $("#target-type").val();
  var target_user = $("#target-user").val();
  var target_pass = $("#target-pass").val();
  var min_age = $("#min-age").val();
  api(
    "/system/backup/config",
    "POST",
    {
      target: target,
      target_user: target_user,
      target_pass: target_pass,
      min_age: min_age
    },
    function(r) {
      // Responses are multiple lines of pre-formatted text.
      show_modal_error("Backup configuration", $("<pre/>").text(r));
    },
    function(r) {
      show_modal_error("Backup configuration (error)", r);
    });
  return false;
}
</script>