Commit 22dea7ed authored by Efthymia Bika's avatar Efthymia Bika
Browse files

Add backup list page

Manage and maintain different backup sets
parent 86fff4c3
<!DOCTYPE html>
<html>
<head>
<title>Backup List</title>
<script type="text/javascript">
$(document).ready(function() {
$('#backup-name-error small').hide();
$('#cloud-error small').hide();
if(typeof clouds === 'undefined') {
load_data_from_file(CLOUDS_CONF_FILE, populate_clouds);
} else {
populate_clouds("");
}
});
var errors = {
backup_name_empty: 'Provide a Backup Name',
backup_name_illegal: 'Invalid Entry. Allowed characters [A-Za-z0-9-_]',
cloud_empty: 'Select cloud configuration'
};
load_data_from_file(BACKUP_CONF_FILE, render_backup_sets);
function render_backup_sets(data) {
$("#backup_list").remove();
// backups is undefined the first time, when
// reading data from file
if(typeof backups === 'undefined') {
if(data != "") {
backups = JSON.parse(data).backups;
} else {
backups = [];
}
}
var ul = $("<ul></ul>")
.attr("id", "backup_list")
.attr("class", "side-nav");
$.each(backups, function(i, backup) {
var li = $("<li></li>")
.attr("style", "word-break: break-all");
var a = $("<a>" + backup.name + "</a>")
.attr("href", "#")
.attr("id", backup.name)
.attr("class", "left")
.click(function() { load_backup(backup) });
li.append(a);
var a_del = $("<a><i class='fa fa-times-circle delete_icon'></i></a>")
.attr("href", "#")
.attr("class", "right")
.click(function() {
if(confirm("Are you sure you want to delete " + backup.name + '?')) {
delete_backup(backup);
}
});
li.append(a_del);
ul.append(li);
$("#sidebar").append(ul);
});
}
function load_backup(backup) {
$('#backup_details_tab').addClass('active');
$('#backup-name-error small').hide();
$('#directory-error small').hide();
$('#cloud-error small').hide();
if(backup) {
$("#backup-name").val(backup.name);
$("#directory").html(backup.local_dir);
$("#cloud").val(backup.cloud);
$("#passphrase").val(backup.passphrase);
if(backup.passphrase != "") {
$("#save_passphrase").prop("checked", true);
}
} else {
$("#backup-name").val('');
$("#directory").html('');
$("#cloud").val('');
$("#passphrase").val('');
}
$("#backup_details_link").trigger("click");
}
function check_backup_name() {
var backup_name = $('#backup-name').val().replace(/^\s+|\s+$/gm,'');
if(!backup_name) {
$('#backup-name-error small').text(errors.backup_name_empty);
$('#backup-name-error small').show();
} else {
var pattern = /^[\w.\-]+$/;
if(!backup_name.match(pattern)) {
$('#backup-name-error small').text(errors.backup_name_illegal);
$('#backup-name-error small').show();
} else {
$('#backup-name-error small').hide();
}
}
}
function check_directory() {
if(!$('#directory').html()) {
$('#directory-error small').text(errors.dir_not_chosen);
$('#directory-error small').show();
return false;
} else $('#directory-error small').hide();
return true;
}
function check_cloud() {
var cloud = $("#cloud").val();
if(cloud === "0") {
$('#cloud-error small').text(errors.cloud_empty);
$('#cloud-error small').show();
} else {
$('#cloud-error small').hide();
}
}
function populate_clouds(data) {
if(typeof clouds === 'undefined') {
if(data != "") {
clouds = JSON.parse(data).clouds;
} else {
clouds = [];
}
}
var cloud_sel = $("#cloud");
$.each(clouds, function(i, cloud) {
cloud_sel.append($("<option></option>")
.attr("value", cloud.name)
.text(cloud.name));
});
}
function save_backup_set() {
var backup_name = $("#backup-name").val().replace(/^\s+|\s+$/gm,'');
var directory = $("#directory").html();
var cloud = $("#cloud").val();
var save_pass = $("#save_passphrase").is(":checked");
var passphrase = (save_pass) ? $("#passphrase").val() : "";
if($("#" + backup_name).attr("id")) {
$.each(backups, function(i, backup_set) {
if(backup_set.name == backup_name) {
backup_set.name = backup_name;
backup_set.local_dir = directory;
backup_set.cloud = cloud;
backup_set.passphrase = passphrase;
}
});
} else {
var backup_set = {"name" : "", "local_dir" : "",
"cloud" : "", "passphrase" : "", "container" : "" };
backup_set.name = backup_name;
backup_set.local_dir = directory;
backup_set.cloud = cloud;
backup_set.passphrase = passphrase;
//backup_set.container = "Backup_" + backup_name;
backup_set.container = "synnefoBackup";
backups.push(backup_set);
render_backup_sets("");
}
var root_backup_sets = {"backups" : "" };
root_backup_sets.backups = backups;
write_conf_file(BACKUP_CONF_FILE, root_backup_sets);
}
function delete_backup(backup) {
var i = backups.indexOf(backup);
backups.splice(i, 1);
render_backup_sets("");
var root_backup_sets = {"backups" : "" };
root_backup_sets.backups = backups;
write_conf_file(BACKUP_CONF_FILE, root_backup_sets);
}
function set_envs() {
var passphrase = $('#passphrase').val();
if(passphrase) {
process.env['PASSPHRASE'] = passphrase;
}
var cloud_name = $("#cloud").val().replace(/^\s+|\s+$/gm,'');
$.each(clouds, function(i, cloud) {
if(cloud.name == cloud_name) {
process.env['SWIFT_PREAUTHURL'] = cloud.pithos_public + '/' + cloud.uuid;
process.env['SWIFT_PREAUTHTOKEN'] = cloud.token;
}
});
}
function run_duplicity(allow_source_mismatch) {
var exec = require('child_process').exec;
var directory = $("#directory").html();
var allow_arg = "";
if(allow_source_mismatch)
allow_arg = " --allow-source-mismatch ";
exec("duplicity " + allow_arg + directory + " swift://synnefoBackup" , function(error, stdout, stderr) {
if(error) {
$("#msg").addClass("panel");
var src_mismatch_error =
new RegExp("Backup source directory has changed").exec(error);
if(src_mismatch_error) {
var cur_dir = new RegExp('Current directory: ([^\n]+)', 'gm').exec(error);
var prev_dir = new RegExp('Previous directory: ([^\n]+)', 'gm').exec(error);
var msg = src_mismatch_error + "\n" + cur_dir[0] + "\n" + prev_dir[0] + "\n\n";
msg += "If this is not a mistake select OK to continue";
if(confirm(msg)) {
run_duplicity(true);
}
} else {
$("#msg").html(error);
}
} else {
$("#msg").html("");
$("#msg").removeClass("panel");
}
$("#loader").hide();
});
}
function backup() {
$("#loader").show();
save_backup_set();
set_envs();
run_duplicity(false);
}
function check_fields() {
return true;
}
function load_status() {
$("#loader").show();
$("#status").html("");
var exec = require('child_process').exec;
function puts(error, stdout, stderr) {
console.log("error ==== " + error);
console.log("stdout === " + stdout);
console.log("stderr === " + stderr);
if(error) {
$("#msg").html(error);
$("#msg").addClass("panel");
} else {
$("#msg").html("");
$("#msg").removeClass("panel");
$("#status").html(stdout.replace(/(?:\r\n|\r|\n)/g, '<br />'));
}
$("#loader").hide();
}
exec("duplicity collection-status swift://synnefoBackup" , puts);
}
function load_contents() {
$("#loader").show();
$("#contents").html("");
var exec = require('child_process').exec;
function puts(error, stdout, stderr) {
console.log("error ==== " + error);
console.log("stdout === " + stdout);
console.log("stderr === " + stderr);
if(error) {
$("#msg").html(error);
$("#msg").addClass("panel");
} else {
$("#msg").html("");
$("#msg").removeClass("panel");
$("#contents").html(stdout.replace(/(?:\r\n|\r|\n)/g, '<br />'));
}
$("#loader").hide();
}
exec("duplicity list-current-files swift://synnefoBackup" , puts);
}
</script>
</head>
<body>
<div class="row">
<div class="small-12 columns">
<p>&nbsp;</p>
</div>
</div>
<div class="row">
<div class="small-3 columns panel" id="sidebar">
<a href="#" onclick="load_backup();" class="button small radius">
<i class="fa fa-plus-circle">&nbsp;New Backup Set</i>
</a>
</div>
<div class="small-9 columns">
<ul class="tabs" data-tab>
<li class="tab-title radius" id="backup_details_tab">
<a href="#backup_details" id="backup_details_link">Settings</a>
</li>
<li class="tab-title radius"><a href="#contents" onclick="load_contents();">Contents</a></li>
<li class="tab-title radius"><a href="#status" onclick="load_status();">Status</a></li>
<li class="tab-title radius"><a href="#schedule">Schedule</a></li>
</ul>
<div class="tabs-content">
<div class="content" id="backup_details">
<form>
<div class="clearfix">
<div class="small-3 columns">
<label id="backup_name_label" for="backup-name" class="right inline">Name</label>
</div>
<div class="small-9 columns error" id="backup-name-error">
<input type="text" id="backup-name"
placeholder="Backup Name [A-Za-z0-9-_]" onchange="check_backup_name();">
<small class="error"></small>
</div>
</div>
<div class="clearfix">
<div class="small-3 columns">
<label id="directory_label" for="directory" class="right">
Local directory
</label>
</div>
<div id="directory" class="small-6 columns"></div>
<div id="dirdialogue_label" onclick="$('#choose-dir').trigger('click');"
class="small-3 columns" id="dirpick">
<i class="fa fa-folder-o" style="color:#008CBA">&nbsp;</i>
</div>
</div>
<div class="clearfix">
<div class="small-3 columns">&nbsp;</div>
<div id="directory-error" class="small-6 columns">
<small></small>
</div>
<input type="file" id="choose-dir" nwdirectory
style="display:none;"
onchange="$('#directory').html($(this).val());
check_directory();" />
</div>
<div class="clearfix">
<div class="small-3 columns">
<label id="cloud_label" for="cloud" class="right inline">Cloud</label>
</div>
<div class="small-9 columns error" id="cloud-error">
<select id="cloud" onchange="check_cloud();">
<option value="0">&nbsp;</option>
</select>
<small class="error"></small>
</div>
</div>
<div class="clearfix">
<div class="small-3 columns">
<label id="passphrase_label" for="passphrase" class="right inline">Passphrase</label>
</div>
<div class="small-6 columns" id="passphrase-error">
<input type="password" id="passphrase" placeholder="Passphrase">
</div>
<div class="small-3 columns">
<label for="save_passphrase" class="left">Save&nbsp;
<input id="save_passphrase" type="checkbox" class="right">
</label>
</div>
</div>
<div class="clearfix">
<div class="small-6 columns">
<a id="save_button" class="button radius left"
onclick="if(check_fields()) restore();">
<i class="fa fa-cloud-download"></i>&nbsp;Restore</a>
</div>
<div class="small-6 columns">
<a id="save_button" class="button radius right"
onclick="if(check_fields()) backup();">
<i class="fa fa-cloud-upload"></i>&nbsp;Backup</a>
</div>
</div>
</form>
</div>
<div class="content" id="contents">
<p>This is the second panel of the basic tab example.</p>
</div>
<div class="content" id="status">
</div>
<div class="content" id="schedule">
<p>This is the fourth panel of the basic tab example.</p>
</div>
</div>
<div id="loader" class="hide"><i class="fa fa-spinner fa-pulse fa-2x" style="color:#6e6e6e"></i></div>
<div id="msg" class="small-10 columns"></div>
</div>
</div>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
......@@ -40,7 +40,7 @@
backup.append(new gui.MenuItem({
label: 'List',
click: function() {
$('#main').load('list.html');
$('#main').load('backup-list.html');
}
}));
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment