NEW Add loading animation to Create Report button, fix bug in CurlLinkChecker

.editorconfig

@@ -10,8 +10,5 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[{*.yml,package.json}]
+[*.{yml,js,scss,css,json}]
 indent_size = 2
-
-# The indent size used in the package.json file cannot be changed:
-# https://github.com/npm/npm/pull/3180#issuecomment-16336516

composer.json

@@ -29,7 +29,10 @@
         }
     },
     "extra": {
-        "expose": ["javascript"],
+        "expose": [
+            "css",
+            "javascript"
+        ],
         "branch-alias": {
             "dev-master": "2.x-dev"
         }

css/BrokenExternalLinksReport.css

@@ -0,0 +1,4 @@
+.external-links-report__create-report,
+.external-links-report__report-progress {
+  margin-top: 20px;
+}

javascript/BrokenExternalLinksReport.js

@@ -1,69 +1,135 @@
 (function($) {
-	$.entwine('ss', function($) {
+  $.entwine('ss', function($) {
-		$('#externalLinksReport').entwine({
+    $('.external-links-report__create-report').entwine({
-			PollTimeout: null,
+      PollTimeout: null,
-			onclick: function() {
+      ButtonIsLoading: false,
-				this.start();
-			},
-			onmatch: function() {
-				// poll the current job and update the front end status
-				$('#externalLinksReport').hide();
-				this.poll();
-			},
-			start: function() {
-				// initiate a new job
-				$('#ReportHolder').empty();
-				$('#ReportHolder').text('Running report 0%');
-				$('#ReportHolder').append('<span class="ss-ui-loading-icon"></span>');
-				$('#externalLinksReport').hide();
-				$.ajax({url: "admin/externallinks/start", async: false, timeout: 3000 });
-				this.poll();
-			},
-			poll: function() {
-				var self = this;
 
-				$.ajax({
+      onclick: function(e) {
-					url: "admin/externallinks/getJobStatus",
+        e.preventDefault();
-					async: true,
-					success: function(data) {
-						// No report, so let user create one
-						if (!data) {
-							$('#externalLinksReport').show();
-							return;
-						}
 
-						// Parse data
+        this.buttonLoading();
-						var completed = data.Completed ? data.Completed : 0;
+        this.start();
-						var total = data.Total ? data.Total : 0;
+      },
-						
-						// If complete status
-						if (data.Status === 'Completed') {
-							$('#ReportHolder').text('Report Finished ' + completed + '/' + total);
-							$('#externalLinksReport').show();
-							return;
-						}
-						
-						// If incomplete update status
-						if (completed < total) {
-							var percent = (completed / total) * 100;
-							$('#ReportHolder')
-								.text('Running report  ' + completed + '/' +  total + ' (' + percent.toFixed(2) + '%)')
-								.append('<span class="ss-ui-loading-icon"></span>');
-						}
 
-						// Ensure the regular poll method is run
+      onmatch: function() {
-						// kill any existing timeout
+        // poll the current job and update the front end status
-						if(self.getPollTimeout() !== null) {
+        this.poll();
-							clearTimeout(self.getPollTimeout());
+      },
-						}
 
-						self.setPollTimeout(setTimeout(function() { $('#externalLinksReport').poll(); }, 1000));
+      start: function() {
-					},
+        // initiate a new job
-					error: function(e) {
+        $('.external-links-report__report-progress')
-						if(typeof console !== 'undefined') console.log(e);
+          .empty()
-					}
+          .text('Running report 0%');
-				});
+
-			}
+        $.ajax({
-		});
+          url: "admin/externallinks/start",
-	});
+          async: true,
+          timeout: 3000
+        });
+
+        this.poll();
+      },
+
+      /**
+       * Get the "create report" button selector
+       *
+       * @return {Object}
+       */
+      getButton: function() {
+        return $('.external-links-report__create-report');
+      },
+
+      /**
+       * Sets the button into a loading state. See LeftAndMain.js.
+       */
+      buttonLoading: function() {
+        if (this.getButtonIsLoading()) {
+          return;
+        }
+        this.setButtonIsLoading(true);
+
+        var $button = this.getButton();
+
+        // set button to "submitting" state
+        $button.addClass('btn--loading loading');
+
+        if ($button.is('button')) {
+          $button.append($(
+            '<div class="btn__loading-icon">'+
+              '<span class="btn__circle btn__circle--1" />'+
+              '<span class="btn__circle btn__circle--2" />'+
+              '<span class="btn__circle btn__circle--3" />'+
+            '</div>'));
+
+          $button.css($button.outerWidth() + 'px');
+        }
+      },
+
+      /**
+       * Reset the button back to its original state after loading. See LeftAndMain.js.
+       */
+      buttonReset: function() {
+        this.setButtonIsLoading(false);
+
+        var $button = this.getButton();
+
+        $button.removeClass('btn--loading loading');
+        $button.find('.btn__loading-icon').remove();
+        $button.css('width', 'auto');
+      },
+
+      poll: function() {
+        var self = this;
+        this.buttonLoading();
+
+        $.ajax({
+          url: "admin/externallinks/getJobStatus",
+          async: true,
+          success: function(data) {
+            // No report, so let user create one
+            if (!data) {
+              this.buttonReset();
+              return;
+            }
+
+            // Parse data
+            var completed = data.Completed ? data.Completed : 0;
+            var total = data.Total ? data.Total : 0;
+
+            // If complete status
+            if (data.Status === 'Completed') {
+              $('.external-links-report__report-progress')
+                .text('Report finished ' + completed + '/' + total);
+
+              self.buttonReset();
+              return;
+            }
+
+            // If incomplete update status
+            if (completed < total) {
+              var percent = (completed / total) * 100;
+              $('.external-links-report__report-progress')
+                .text('Running report  ' + completed + '/' +  total + ' (' + percent.toFixed(2) + '%)');
+            }
+
+            // Ensure the regular poll method is run
+            // kill any existing timeout
+            if (self.getPollTimeout() !== null) {
+              clearTimeout(self.getPollTimeout());
+            }
+
+            self.setPollTimeout(setTimeout(function() {
+              $('.external-links-report__create-report').poll();
+            }, 1000));
+          },
+          error: function(e) {
+            if (typeof console !== 'undefined') {
+              console.log(e);
+            }
+          }
+        });
+      }
+    });
+  });
 }(jQuery));

src/Controllers/CMSExternalLinksController.php

@@ -3,6 +3,7 @@
 namespace SilverStripe\ExternalLinks\Controllers;
 
 use SilverStripe\Control\HTTP;
+use SilverStripe\Core\Convert;
 use SilverStripe\ExternalLinks\Model\BrokenExternalPageTrackStatus;
 use SilverStripe\ExternalLinks\Jobs\CheckExternalLinksJob;
 use SilverStripe\ExternalLinks\Tasks\CheckExternalLinksTask;
@@ -35,7 +36,7 @@ class CMSExternalLinksController extends Controller
         // Format status
         $track = BrokenExternalPageTrackStatus::get_latest();
         if ($track) {
-            return json_encode([
+            return Convert::array2json([
                 'TrackID' => $track->ID,
                 'Status' => $track->Status,
                 'Completed' => $track->getCompletedPages(),

src/Reports/BrokenExternalLinksReport.php

@@ -2,11 +2,11 @@
 
 namespace SilverStripe\ExternalLinks\Reports;
 
-use SilverStripe\ORM\ArrayList;
-use SilverStripe\ExternalLinks\Model\BrokenExternalPageTrackStatus;
 use SilverStripe\Core\Convert;
-use SilverStripe\View\HTML;
+use SilverStripe\ExternalLinks\Model\BrokenExternalPageTrackStatus;
 use SilverStripe\Forms\LiteralField;
+use SilverStripe\Forms\FormAction;
+use SilverStripe\ORM\ArrayList;
 use SilverStripe\Reports\Report;
 use SilverStripe\View\Requirements;
 
@@ -78,25 +78,20 @@ class BrokenExternalLinksReport extends Report
 
     public function getCMSFields()
     {
+        Requirements::css('silverstripe/externallinks: css/BrokenExternalLinksReport.css');
         Requirements::javascript('silverstripe/externallinks: javascript/BrokenExternalLinksReport.js');
+
         $fields = parent::getCMSFields();
 
-        $reportResultSpan = '</ br></ br><h3 id="ReportHolder"></h3>';
+        $runReportButton = FormAction::create('createReport', _t(__CLASS__ . '.RUNREPORT', 'Create new report'))
+            ->addExtraClass('btn-primary external-links-report__create-report')
+            ->setUseButtonTag(true);
+        $fields->push($runReportButton);
+
+        $reportResultSpan = '<p class="external-links-report__report-progress"></p>';
         $reportResult = LiteralField::create('ResultTitle', $reportResultSpan);
         $fields->push($reportResult);
 
-        $button = HTML::createTag(
-            'button',
-            [
-                'id' => 'externalLinksReport',
-                'type' => 'button',
-                'class' => 'btn btn-primary'
-            ],
-            _t(__CLASS__ . '.RUNREPORT', 'Create new report')
-        );
-        $runReportButton = LiteralField::create('runReport', $button);
-        $fields->push($runReportButton);
-
         return $fields;
     }
 }

src/Tasks/CurlLinkChecker.php

@@ -14,7 +14,7 @@ class CurlLinkChecker implements LinkChecker
     /**
      * Return cache
      *
-     * @return Zend_Cache_Frontend
+     * @return CacheInterface
      */
     protected function getCache()
     {
@@ -36,7 +36,7 @@ class CurlLinkChecker implements LinkChecker
 
         // Check if we have a cached result
         $cacheKey = md5($href);
-        $result = $this->getCache()->get($cacheKey);
+        $result = $this->getCache()->get($cacheKey, false);
         if ($result !== false) {
             return $result;
         }
@@ -51,7 +51,7 @@ class CurlLinkChecker implements LinkChecker
         curl_close($handle);
 
         // Cache result
-        $this->getCache()->set($httpCode, $cacheKey);
+        $this->getCache()->set($cacheKey, $httpCode);
         return $httpCode;
     }
 }