add sections to content page for backup/restore

domain-server/resources/web/content/index.shtml

@@ -14,6 +14,8 @@
 
 <!--#include virtual="base-settings-scripts.html"-->
 
+<script src="js/moment-locale.min.js"></script>
+<script src="js/bootstrap-sortable.min.js"></script>
 <script src="js/content.js"></script>
 
 <!--#include virtual="page-end.html"-->

domain-server/resources/web/content/js/content.js

@@ -1,37 +1,174 @@
 $(document).ready(function(){
 
-  Settings.afterReloadActions = function() {};
+  var RESTORE_SETTINGS_UPLOAD_ID = 'restore-settings-button';
+  var RESTORE_SETTINGS_FILE_ID = 'restore-settings-file';
 
-  var frm = $('#upload-form');
-  frm.submit(function (ev) {
-    $.ajax({
-      type: frm.attr('method'),
-      url: frm.attr('action'),
-      data: new FormData($(this)[0]),
-      cache: false,
-      contentType: false,
-      processData: false,
-      success: function (data) {
-        swal({
-          title: 'Uploaded',
-          type: 'success',
-          text: 'Your Entity Server is restarting to replace its local content with the uploaded file.',
-          confirmButtonText: 'OK'
-        })
-      },
-      error: function (data) {
-        swal({
-          title: '',
-          type: 'error',
-          text: 'Your entities file could not be transferred to the Entity Server.</br>Verify that the file is a <i>.json</i> or <i>.json.gz</i> entities file and try again.',
-          html: true,
-          confirmButtonText: 'OK',
-        });
+  function setupBackupUpload() {
+    // construct the HTML needed for the settings backup panel
+    var html = "<div class='form-group'>";
+
+    html += "<span class='help-block'>Upload a Content Backup to replace the content of this domain";
+    html += "<br/>Note: Your domain's content will be replaced by the content you upload, but the existing backup files of your domain's content will not immediately be changed.</span>";
+
+    html += "<input id='restore-settings-file' name='restore-settings' type='file'>";
+    html += "<button type='button' id='" + RESTORE_SETTINGS_UPLOAD_ID + "' disabled='true' class='btn btn-primary'>Upload Domain Settings</button>";
+
+    html += "</div>";
+
+    $('#' + Settings.UPLOAD_CONTENT_BACKUP_PANEL_ID + ' .panel-body').html(html);
+  }
+
+  var GENERATE_ARCHIVE_BUTTON_ID = 'generate-archive-button';
+  var AUTOMATIC_ARCHIVES_TABLE_ID = 'automatic-archives-table';
+  var AUTOMATIC_ARCHIVES_TBODY_ID = 'automatic-archives-tbody';
+  var MANUAL_ARCHIVES_TABLE_ID = 'manual-archives-table';
+  var MANUAL_ARCHIVES_TBODY_ID = 'manual-archives-tbody';
+  var automaticBackups = [];
+  var manualBackups = [];
+
+  function setupContentArchives() {
+
+    // construct the HTML needed for the content archives panel
+    var html = "<div class='form-group'>";
+    html += "<label class='control-label'>Automatic Content Archives</label>";
+    html += "<span class='help-block'>Your domain server makes regular archives of the content in your domain. In the list below, you can see and download all of your domain content and settings backups.</span>"
+    html += "</div>";
+    html += "<table class='table sortable' id='" + AUTOMATIC_ARCHIVES_TABLE_ID + "'>";
+
+    var backups_table_head = "<thead><tr class='gray-tr'><th>Archive Name</th><th data-defaultsort='desc'>Archive Date</th><th class='text-right' data-defaultsort='disabled'>Actions</th></tr></thead>";
+
+    html += backups_table_head;
+    html += "<tbody id='" + AUTOMATIC_ARCHIVES_TBODY_ID + "'></tbody></table>";
+    html += "<div class='form-group'>";
+    html += "<label class='control-label'>Manual Content Archives</label>";
+    html += "<span class='help-block'>You can generate and download an archive of your domain content right now. You can also download, delete and restore any archive listed.</span>";
+    html += "<button type='button' id='" + GENERATE_ARCHIVE_BUTTON_ID + "' class='btn btn-primary'>Generate New Archive</button>";
+    html += "</div>";
+    html += "<table class='table sortable' id='" + MANUAL_ARCHIVES_TABLE_ID + "'>";
+    html += backups_table_head;
+    html += "<tbody id='" + MANUAL_ARCHIVES_TBODY_ID + "'></tbody></table>";
+
+    // put the base HTML in the content archives panel
+    $('#' + Settings.CONTENT_ARCHIVES_PANEL_ID + ' .panel-body').html(html);
+  }
+
+  function reloadLatestBackups() {
+    // make a GET request to get backup information to populate the table
+    $.get('/api/backups', function(data) {
+      // split the returned data into manual and automatic manual backups
+      var splitBackups = _.partition(data.backups, function(value, index) {
+        return value.isManualBackup;
+      });
+
+      manualBackups = splitBackups[0];
+      automaticBackups = splitBackups[1];
+
+      // populate the backups tables with the backups
+      function createBackupTableRow(backup) {
+        return "<tr><td data-value='" + backup.name.toLowerCase() + "'>" + backup.name + "</td><td data-dateformat='lll'>"
+          + moment(backup.createdAtMillis).format('lll')
+          + "</td><td class='text-right'>"
+          + "<div class='dropdown'><div class='dropdown-toggle' data-toggle='dropdown' aria-expanded='false'><span class='glyphicon glyphicon-option-vertical'></span></div>"
+          + "<ul class='dropdown-menu dropdown-menu-right'><li><a class='update-server' href='#'>Restore from here</a></li><li class='divider'></li><li><a class='restart-server' href='#'>Download</a></li><li class='divider'></li><li><a class='' href='#'>Delete</a></li></ul></div>"
+          + "</td>";
       }
+
+      var automaticRows = "";
+
+      if (automaticBackups.length > 0) {
+        for (var backupIndex in automaticBackups) {
+          // create a table row for this backup and add it to the rows we'll put in the table body
+          automaticRows += createBackupTableRow(automaticBackups[backupIndex]);
+        }
+      }
+
+      $('#' + AUTOMATIC_ARCHIVES_TBODY_ID).html(automaticRows);
+
+      var manualRows = "";
+
+      if (manualBackups.length > 0) {
+        for (var backupIndex in manualBackups) {
+          // create a table row for this backup and add it to the rows we'll put in the table body
+          manualRows += createBackupTableRow(manualBackups[backupIndex]);
+        }
+      }
+
+      $('#' + MANUAL_ARCHIVES_TBODY_ID).html(manualRows);
+
+      // tell bootstrap sortable to update for the new rows
+      $.bootstrapSortable({ applyLast: true });
+
+    }).fail(function(){
+      // we've hit the very rare case where we couldn't load the list of backups from the domain server
+
+      // set our backups to empty
+      automaticBackups = [];
+      manualBackups = [];
+
+      // replace the content archives panel with a simple error message
+      // stating that the user should reload the page
+      $('#' + Settings.CONTENT_ARCHIVES_PANEL_ID + ' .panel-body').html(
+        "<div class='form-group'>" +
+        "<span class='help-block'>There was a problem loading your list of automatic and manual content archives. Please reload the page to try again.</span>" +
+        "</div>"
+      );
+
+    }).always(function(){
+      // toggle showing or hiding the tables depending on if they have entries
+      $('#' + AUTOMATIC_ARCHIVES_TABLE_ID).toggle(automaticBackups.length > 0);
+      $('#' + MANUAL_ARCHIVES_TABLE_ID).toggle(manualBackups.length > 0);
     });
+  }
 
-    ev.preventDefault();
+  // handle click on manual archive creation button
+  $('body').on('click', '#' + GENERATE_ARCHIVE_BUTTON_ID, function(e) {
+    e.preventDefault();
 
-    showSpinnerAlert("Uploading Entities File");
+    // show a sweet alert to ask the user to provide a name for their content archive
+    swal({
+      title: "Generate a Content Archive",
+      type: "input",
+      text: "This will capture the state of all the content in your domain right now, which you can save as a backup and restore from later.",
+      confirmButtonText: "Generate Archive",
+      showCancelButton: true,
+      closeOnConfirm: false,
+      inputPlaceholder: 'Archive Name'
+    }, function(inputValue){
+      if (inputValue === false) {
+        return false;
+      }
+
+      if (inputValue === "") {
+        swal.showInputError("Please give the content archive a name.")
+        return false;
+      }
+
+      // post the provided archive name to ask the server to kick off a manual backup
+      $.ajax({
+        type: 'POST',
+        url: '/api/backup',
+        data: {
+          'name': inputValue
+        }
+      }).done(function(data) {
+        // since we successfully setup a new content archive, reload the table of archives
+        // which should show that this archive is pending creation
+        reloadContentArchives();
+      }).fail(function(jqXHR, textStatus, errorThrown) {
+
+      });
+
+      swal.close();
+    });
   });
+
+  Settings.extraGroupsAtIndex = Settings.extraContentGroupsAtIndex;
+
+  Settings.afterReloadActions = function() {
+    setupBackupUpload();
+    setupContentArchives();
+
+    // load the latest backups immediately
+    reloadLatestBackups();
+  };
 });

domain-server/resources/web/css/bootstrap-sortable.css

@@ -0,0 +1,110 @@
+/**
+ * adding sorting ability to HTML tables with Bootstrap styling
+ * @summary HTML tables sorting ability
+ * @version 2.0.0
+ * @requires tinysort, moment.js, jQuery
+ * @license MIT
+ * @author Matus Brlit (drvic10k)
+ * @copyright Matus Brlit (drvic10k), bootstrap-sortable contributors
+ */
+
+table.sortable span.sign {
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 5px;
+    font-size: 12px;
+    margin-top: -10px;
+    color: #bfbfc1;
+}
+
+table.sortable th:after {
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 5px;
+    font-size: 12px;
+    margin-top: -10px;
+    color: #bfbfc1;
+}
+
+table.sortable th.arrow:after {
+    content: '';
+}
+
+table.sortable span.arrow, span.reversed, th.arrow.down:after, th.reversedarrow.down:after, th.arrow.up:after, th.reversedarrow.up:after {
+    border-style: solid;
+    border-width: 5px;
+    font-size: 0;
+    border-color: #ccc transparent transparent transparent;
+    line-height: 0;
+    height: 0;
+    width: 0;
+    margin-top: -2px;
+}
+
+    table.sortable span.arrow.up, th.arrow.up:after {
+        border-color: transparent transparent #ccc transparent;
+        margin-top: -7px;
+    }
+
+table.sortable span.reversed, th.reversedarrow.down:after {
+    border-color: transparent transparent #ccc transparent;
+    margin-top: -7px;
+}
+
+    table.sortable span.reversed.up, th.reversedarrow.up:after {
+        border-color: #ccc transparent transparent transparent;
+        margin-top: -2px;
+    }
+
+table.sortable span.az:before, th.az.down:after {
+    content: "a .. z";
+}
+
+table.sortable span.az.up:before, th.az.up:after {
+    content: "z .. a";
+}
+
+table.sortable th.az.nosort:after, th.AZ.nosort:after, th._19.nosort:after, th.month.nosort:after {
+    content: "..";
+}
+
+table.sortable span.AZ:before, th.AZ.down:after {
+    content: "A .. Z";
+}
+
+table.sortable span.AZ.up:before, th.AZ.up:after {
+    content: "Z .. A";
+}
+
+table.sortable span._19:before, th._19.down:after {
+    content: "1 .. 9";
+}
+
+table.sortable span._19.up:before, th._19.up:after {
+    content: "9 .. 1";
+}
+
+table.sortable span.month:before, th.month.down:after {
+    content: "jan .. dec";
+}
+
+table.sortable span.month.up:before, th.month.up:after {
+    content: "dec .. jan";
+}
+
+table.sortable>thead th:not([data-defaultsort=disabled]) {
+    cursor: pointer;
+    position: relative;
+    top: 0;
+    left: 0;
+}
+
+table.sortable>thead th:hover:not([data-defaultsort=disabled]) {
+    background: #efefef;
+}
+
+table.sortable>thead th div.mozilla {
+    position: relative;
+}

domain-server/resources/web/css/style.css

@@ -355,21 +355,31 @@ table .headers + .headers td {
   }
 }
 
-ul.nav li.dropdown ul.dropdown-menu {
+ul.dropdown-menu {
   padding: 0px 0px;
 }
 
-ul.nav li.dropdown li a {
+ul.dropdown-menu li a {
   padding-top: 7px;
   padding-bottom: 7px;
 }
 
-ul.nav li.dropdown li a:hover {
+ul.dropdown-menu li a:hover {
   color: white;
   background-color: #337ab7;
 }
 
-ul.nav li.dropdown ul.dropdown-menu .divider {
+table ul.dropdown-menu li:first-child a:hover {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+ul.dropdown-menu li:last-child a:hover {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+ul.dropdown-menu .divider {
   margin: 0px 0;
 }
 
@@ -434,3 +444,37 @@ ul.nav li.dropdown ul.dropdown-menu .divider {
 .save-button-text {
   pointer-events: none;
 }
+
+#content_archives .panel-body {
+  padding: 0;
+}
+
+#content_archives .panel-body .form-group {
+  padding: 15px;
+}
+
+#content_archives .panel-body th, #content_archives .panel-body td {
+  padding: 8px 15px;
+}
+
+#content_archives table {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+}
+
+tr.gray-tr {
+  background-color: #f5f5f5;
+}
+
+.dropdown-toggle span.glyphicon-option-vertical {
+  font-size: 110%;
+  cursor: pointer;
+  border-radius: 50%;
+  background-color: #F5F5F5;
+  padding: 4px 4px 4px 6px;
+}
+
+.dropdown.open span.glyphicon-option-vertical {
+  background-color: #337AB7;
+  color: white;
+}

domain-server/resources/web/header.html

@@ -9,6 +9,7 @@
     <link href="/css/style.css" rel="stylesheet" media="screen">
     <link href="/css/sweetalert.css" rel="stylesheet" media="screen">
     <link href="/css/bootstrap-switch.min.css" rel="stylesheet" media="screen">
+    <link href="/css/bootstrap-sortable.css" rel="stylesheet" media="screen">
 
     <script src='/js/sweetalert.min.js'></script>
   </head>

domain-server/resources/web/js/base-settings.js

@@ -106,8 +106,12 @@ function reloadSettings(callback) {
   $.getJSON(Settings.endpoint, function(data){
     _.extend(data, viewHelpers);
 
-    for (var spliceIndex in Settings.extraGroups) {
-      data.descriptions.splice(spliceIndex, 0, Settings.extraGroups[spliceIndex]);
+    for (var spliceIndex in Settings.extraGroupsAtIndex) {
+      data.descriptions.splice(spliceIndex, 0, Settings.extraGroupsAtIndex[spliceIndex]);
+    }
+
+    for (var endGroupIndex in Settings.extraGroupsAtEnd) {
+      data.descriptions.push(Settings.extraGroupsAtEnd[endGroupIndex]);
     }
 
     $('#panels').html(Settings.panelsTemplate(data));

domain-server/resources/web/js/domain-server.js

@@ -55,6 +55,34 @@ $(document).ready(function(){
   var $contentDropdown = $('#content-settings-nav-dropdown');
   var $settingsDropdown = $('#domain-settings-nav-dropdown');
 
+   // define extra groups to add to setting panels, with their splice index
+  Settings.extraContentGroupsAtIndex = {
+    0: {
+      html_id: Settings.CONTENT_ARCHIVES_PANEL_ID,
+      label: 'Content Archives'
+    },
+    1: {
+      html_id: Settings.UPLOAD_CONTENT_BACKUP_PANEL_ID,
+      label: 'Upload Content'
+    }
+  };
+
+  Settings.extraContentGroupsAtEnd = [];
+
+  Settings.extraDomainGroupsAtIndex = {
+    1: {
+      html_id: 'places',
+      label: 'Places'
+    }
+  }
+
+  Settings.extraDomainGroupsAtEnd = [
+    {
+      html_id: 'settings_backup',
+      label: 'Settings Backup'
+    }
+  ]
+
   // for pages that have the settings dropdowns
   if ($contentDropdown.length && $settingsDropdown.length) {
     // make a JSON request to get the dropdown menus for content and settings
@@ -65,6 +93,15 @@ $(document).ready(function(){
         return "<li class='setting-group'><a href='" + settingsGroupAnchor(base, html_id) + "'>" + group.label + "<span class='badge'></span></a></li>";
       }
 
+      // add the dummy settings groups that get populated via JS
+      for (var spliceIndex in Settings.extraContentGroupsAtIndex) {
+        data.content_settings.splice(spliceIndex, 0, Settings.extraContentGroupsAtIndex[spliceIndex]);
+      }
+
+      for (var endIndex in Settings.extraContentGroupsAtEnd) {
+        data.content_settings.push(Settings.extraContentGroupsAtIndex[spliceIndex]);
+      }
+
       $.each(data.content_settings, function(index, group){
         if (index > 0) {
           $contentDropdown.append("<li role='separator' class='divider'></li>");
@@ -73,25 +110,22 @@ $(document).ready(function(){
         $contentDropdown.append(makeGroupDropdownElement(group, "/content/"));
       });
 
+      // add the dummy settings groups that get populated via JS
+      for (var spliceIndex in Settings.extraDomainGroupsAtIndex) {
+        data.domain_settings.splice(spliceIndex, 0, Settings.extraDomainGroupsAtIndex[spliceIndex]);
+      }
+
+      for (var endIndex in Settings.extraDomainGroupsAtEnd) {
+        data.domain_settings.push(Settings.extraDomainGroupsAtEnd[endIndex]);
+      }
+
       $.each(data.domain_settings, function(index, group){
         if (index > 0) {
           $settingsDropdown.append("<li role='separator' class='divider'></li>");
         }
 
         $settingsDropdown.append(makeGroupDropdownElement(group, "/settings/"));
-
-        // for domain settings, we add a dummy "Places" group that we fill
-        // via the API - add it to the dropdown menu in the right spot
-        // which is after "Metaverse / Networking"
-        if (group.name == "metaverse") {
-          $settingsDropdown.append("<li role='separator' class='divider'></li>");
-          $settingsDropdown.append(makeGroupDropdownElement({ html_id: 'places', label: 'Places' }, "/settings/"));
-        }
       });
-
-      // append a link for the "Settings Backup" panel
-      $settingsDropdown.append("<li role='separator' class='divider'></li>");
-      $settingsDropdown.append(makeGroupDropdownElement({ html_id: 'settings_backup', label: 'Settings Backup'}, "/settings"));
     });
   }
 });

domain-server/resources/web/js/shared.js

@@ -42,7 +42,9 @@ Object.assign(Settings, {
   ADD_PLACE_BTN_ID: 'add-place-btn',
   FORM_ID: 'settings-form',
   INVALID_ROW_CLASS: 'invalid-input',
-  DATA_ROW_INDEX: 'data-row-index'
+  DATA_ROW_INDEX: 'data-row-index',
+  CONTENT_ARCHIVES_PANEL_ID: 'content_archives',
+  UPLOAD_CONTENT_BACKUP_PANEL_ID: 'upload_content'
 });
 
 var URLs = {
@@ -164,7 +166,7 @@ function getDomainFromAPI(callback) {
   if (callback === undefined) {
     callback = function() {};
   }
-  
+
   if (!domainIDIsSet()) {
     callback({ status: 'fail' });
     return null;

domain-server/resources/web/settings/js/settings.js

@@ -14,17 +14,9 @@ $(document).ready(function(){
       return b;
   })(window.location.search.substr(1).split('&'));
 
-  // define extra groups to add to description, with their splice index
-  Settings.extraGroups = {
-    1: {
-      html_id: 'places',
-      label: 'Places'
-    },
-    "-1": {
-      html_id: 'settings_backup',
-      label: 'Settings Backup'
-    }
-  }
+  Settings.extraGroupsAtEnd = Settings.extraDomainGroupsAtEnd;
+  Settings.extraGroupsAtIndex = Settings.extraDomainGroupsAtIndex;
+
 
   Settings.afterReloadActions = function() {
     // append the domain selection modal
@@ -643,7 +635,6 @@ $(document).ready(function(){
     autoNetworkingEl.after(form);
   }
 
-
   function setupPlacesTable() {
     // create a dummy table using our view helper
     var placesTableSetting = {
@@ -1097,8 +1088,5 @@ $(document).ready(function(){
     html += "</div>";
 
     $('#settings_backup .panel-body').html(html);
-
-    // add an upload button to the footer to kick off the upload form
-
   }
 });