Merge pull request #14 from weareferal/develop

Added a number of interface improvements

CHANGELOG.md

@@ -19,3 +19,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Added
 
 - Added emergency backup feature
+
+## 1.2.0 - 2020-04-26
+
+### Added
+
+- File pruning
+- "Latest" badge on utilties page to easily identify the most recent synced file
+- A "show more" dropdown when there are > 3 synced files
+- A "hide" setting to remove either databases or volumes from the utilities panel

README.md

@@ -55,13 +55,20 @@ Alternatively, if you want to configure the plugin on a per-environment basis, y
 return [
     '*' => [
         'cloudProvider' => 's3',
-        //...
+        // Provider-specific details can be added here
+        // ...
         'useQueue' => false,
+				'keepEmergencyBackup' => true,
+        'prune' => false,
+        'pruneLimit' => 10,
+        'hideDatabases' => true,
+        'hideVolumes' => true
     ],
     'dev' => [],
     'staging' => [],
     'production' => [],
 ];
+
 ```
 
 Whichever approach you choose, you need to first configure your remote provider settings.
@@ -110,12 +117,14 @@ There are also console commands available for creating, pushing and pulling back
 - remote-sync/database                      Manage remote databases
     remote-sync/database/delete             Delete a remote database
     remote-sync/database/list               List remote databases
+    remote-sync/database/prune              Prune remote database files
     remote-sync/database/pull               Pull remote database and restore it locally
     remote-sync/database/push               Push local database to remote destination
 
 - remote-sync/volume                        Manage remote volumes
     remote-sync/volume/delete               Delete a remote volume
     remote-sync/volume/list                 List remote volumes
+    remote-sync/volume/prune                Prune remote volume files
     remote-sync/volume/pull                 Pull remote volume and restore it locally
     remote-sync/volume/push                 Push local volume to remote destination
 ```
@@ -126,9 +135,9 @@ There are also console commands available for creating, pushing and pulling back
 
 You can optionally use Craft's built-in queue to sync files. This is useful when they are large and you don't want to have to wait on the Control Panel interface every time you backup. Instead, the files will be added to the queue and completed in the background.
 
-You can enable this via the "Use Queue" lightswitch in the settings or via the `userQueue` settig in your config.
+You can enable this via the "Use Queue" lightswitch in the settings or via the `userQueue` setting in your config.
 
-#### ⚠️ CLI commands and the queue
+#### ⚠️ CLI commands
 
 The CLI commands ignore the queue setting. In other words, they will always run synchrously. This is by design as it's likely you will want to see the results of these operations if they are part of your crontab or deployment script.
 
@@ -141,6 +150,27 @@ This is a last resort in case you accidently pull and restore something you didn
 - `storage/sync/emergency-backup.sql` (database)
 - `storage/sync/emergency-backup.zip` (volumes)
 
+### Pruning
+
+![Craft Remote Sync Utilities Screenshot](resources/img/pruning-screenshot.png)
+
+When enabled, "old" synced files will be automatically deleted when you push new files to the remote provider. This allows you to keep the number of remote files manageable (therefore keeping your costs down).
+
+The "prune limit" controls how many of the most recent files you keep when pushing new files. For example, if the limit is 3 then Remote Sync will always keep the latest 3 remote database files as well as the latest 3 remote volume files. Any older files will be deleted.
+
+When enabled, pruning will happen automatically while using the utilities interface. 
+
+####⚠️ CLI commands
+
+You can prune the remote files using two CLI console commands:
+
+```sh
+./craft remote-sync/database/prune
+./craft remote-sync/volume/prune
+```
+
+Just like the queue setting above, pruning will not be automatically run when you are using the command line to push volumes, so you should run the prune command as part of any automated syncing scripts.
+
 ## Functionality
 
 All synced files have the following filename structure:
@@ -157,7 +187,7 @@ Which includes:
 - Random 10 character string
 - Craft version
 
-It's important not to manually rename these files as the plugin relies on this structure.
+It's important not to manually rename these files as the plugin relies on this structure. Like the queue setting above, pruning will not automatically happen when running console commands.
 
 ## Pairing with Craft Remote Backup
 

src/assets/remotesyncutility/dist/css/RemoteSyncUtility.css

@@ -6,24 +6,45 @@
   position: relative;
 }
 
-#rb-utilities-database {
-  margin-bottom: 25px;
+.rb-utilities-section:nth-child(2) {
+  margin-top: 25px;
 }
 
 .rb-utilities-table {
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
-.rb-utilities-table .default-row {
+/* Hide Craft's default hover background on table rows */
+table.data.rb-utilities-table tbody tr:not(.disabled):hover th,
+table.data.rb-utilities-table tbody tr:not(.disabled):hover td {
+  background-color: transparent;
+}
+
+/* Hide template rows and collapsed rows */
+.rb-utilities-table tr.default-row,
+.rb-utilities-table.rb-utilities-table--collapsed
+  tr:not(.default-row):nth-child(n + 4) {
   display: none;
 }
 
 .rb-utilities-table tbody tr td:first-child {
   display: flex;
   align-items: center;
-  cursor: help;
+  padding-left: 0;
+}
+
+/* "Latest" bubble */
+.rb-utilities-table tbody tr td:first-child span {
+  border: 1px solid #9aa5b1;
+  margin: 2px 0 0 10px;
+  padding: 3px 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  line-height: 1;
+  color: #9aa5b1;
 }
 
+/* Add green circle to the title */
 .rb-utilities-table tbody tr:not(.default-row) td:first-child:before {
   display: block;
   height: 10px;
@@ -34,13 +55,23 @@
   margin-right: 10px;
 }
 
+/* "Show All" row */
+.rb-utilities-table tbody tr.show-all-row td {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.rb-utilities-table tr.show-all-row td a {
+  font-size: 12px;
+}
+
 .rb-utilities-submit {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   position: relative;
 }
 
+/* Small status spinner */
 .rb-utilities-submit .utility-status {
   width: 100px;
   margin-left: 20px;

src/assets/remotesyncutility/dist/js/RemoteSyncUtility.js

@@ -2,9 +2,15 @@
   Craft.RemoteSyncUtility = Garnish.Base.extend({
     init: function (id) {
       this.$element = $("#" + id);
+
+      if (this.$element.length <= 0) {
+        return;
+      }
+
       this.$form = $("form", this.$element);
       this.$table = $("table", this.$element);
       this.$tbody = $("tbody", this.$table);
+      this.$showAllRow = $(".show-all-row", this.$tbody);
       this.$submit = $("input.submit", this.$form);
       this.$loadingOverlay = $(".rb-utilities-overlay", this.$element);
 
@@ -21,6 +27,17 @@
       this.csrfToken = this.$form.find('input[name="CRAFT_CSRF_TOKEN"]').val();
 
       this.$form.on("submit", this.push.bind(this));
+
+      // Show all rows
+      this.$showAllRow.find("a").on(
+        "click",
+        function (e) {
+          this.$showAllRow.hide();
+          this.$table.removeClass("rb-utilities-table--collapsed");
+          e.preventDefault();
+        }.bind(this)
+      );
+
       this.list();
     },
 
@@ -60,45 +77,52 @@
     updateTable: function (backups, error) {
       if (error) {
         this.showTableErrors();
-      } else if (backups.length > 0) {
-        for (var i = 0; i < backups.length; i++) {
-          var $row = this.$tbody.find(".template-row").clone();
-          var $td = $row.find("td");
-          $row.removeClass("template-row default-row");
-          if (i > 0) {
-            $row.removeClass("first");
-          }
-          $td.text(backups[i].label);
-          $td.attr("title", backups[i].value);
-          $td.attr("data-filename", backups[i].value);
-
-          var $pullButton = $("<button>")
-            .addClass("btn small")
-            .attr("title", "Pull and restore this remote database")
-            .text("Pull & Restore");
-          var $deleteButton = $("<button>")
-            .addClass("btn small")
-            .attr("title", "Delete this remote database")
-            .text("Delete");
-
-          this.addListener(
-            $pullButton,
-            "click",
-            this.pull.bind(this, backups[i].value)
-          );
-          this.addListener(
-            $deleteButton,
-            "click",
-            this.delete.bind(this, backups[i].value)
-          );
-
-          $row.append($("<td>").addClass("thin").append($pullButton));
-          $row.append($("<td>").addClass("thin").append($deleteButton));
-          this.$tbody.append($row);
-        }
-      } else {
+        return false;
+      }
+
+      if (backups.length <= 0) {
         this.showTableNoResults();
+        return false;
       }
+
+      // Backups are ordered newest to oldest ([0] = most recent) but we
+      // prepend them instead of append them to make it easier to style
+      for (var i = backups.length - 1; i >= 0; i--) {
+        var $row = this.$tbody
+          .find(".template-row")
+          .clone()
+          .removeClass("template-row default-row");
+
+        var $td = $row.find("td:first");
+        $td.text(backups[i].label);
+        $td.attr("title", backups[i].value);
+        $td.attr("data-filename", backups[i].value);
+
+        if (i === 0) {
+          $td.append($("<span>").text("latest"));
+        } else {
+          $row.removeClass("first");
+        }
+
+        this.addListener(
+          $row.find(".pull-button"),
+          "click",
+          this.pull.bind(this, backups[i].value)
+        );
+        this.addListener(
+          $row.find(".delete-button"),
+          "click",
+          this.delete.bind(this, backups[i].value)
+        );
+
+        this.$tbody.prepend($row);
+      }
+
+      if (backups.length > 3) {
+        this.$showAllRow.show();
+      }
+
+      return true;
     },
 
     /**

src/config/remote-sync.example.php

@@ -1,9 +1,30 @@
 <?php
 return [
     '*' => [
+        // The provider you are using for syncing
         'cloudProvider' => 's3',
+
+        // Provider-specific details can be added here
+
         //...
+
+        // Use Craft's native queue when performing operations
         'useQueue' => false,
+
+        // Keep a single emergency backup of the database/volumes when restoring
+        'keepEmergencyBackup' => true,
+
+        // Remove old files
+        'prune' => false,
+
+        // The number of recent files to keep if pruning is enabled
+        'pruneLimit' => 10,
+
+        // Hide the database sync panel on the utilities page
+        'hideDatabases' => false,
+
+        // Hide the volume sync panel on the utilities page
+        'hideVolumes' => false
     ],
     'dev' => [],
     'staging' => [],

src/console/controllers/DatabaseController.php

@@ -74,6 +74,38 @@ public function actionPush()
         return ExitCode::OK;
     }
 
+    /**
+     * Prune remote database files
+     */
+    public function actionPrune()
+    {
+        try {
+            $this->requirePluginEnabled();
+            $this->requirePluginConfigured();
+
+            if (!RemoteSync::getInstance()->getSettings()->prune) {
+                $this->stderr("Pruning disabled. Please enable via the Remote Sync control panel settings" . PHP_EOL, Console::FG_YELLOW);
+                return ExitCode::CONFIG;
+            } else {
+                $filenames = RemoteSync::getInstance()->remotesync->pruneDatabases();
+                if (count($filenames) <= 0) {
+                    $this->stdout("No database files deleted" . PHP_EOL, Console::FG_YELLOW);
+                } else {
+                    $this->stdout("Deleted database files:" . PHP_EOL, Console::FG_GREEN);
+                    foreach ($filenames as $filename) {
+                        $this->stdout(" " . $filename . PHP_EOL);
+                    }
+                }
+                return ExitCode::OK;
+            }
+        } catch (\Exception $e) {
+            Craft::$app->getErrorHandler()->logException($e);
+            $this->stderr('Error: ' . $e->getMessage() . PHP_EOL, Console::FG_RED);
+            return ExitCode::UNSPECIFIED_ERROR;
+        }
+        return ExitCode::OK;
+    }
+
     /**
      * Pull remote database and restore it locally
      */