Skip to content

GitLab

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

Add backup list page 

Manage and maintain different backup sets
parent 86fff4c3
Hide whitespace changes
Inline Side-by-side
backup-list.html 0 → 100644
View file @ 22dea7ed
<!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>
index.html
View file @ 22dea7ed
......@@ -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