[3/3] mesos git commit: Fixed the CORS error when redirecting in webUI.

[ya...@apache.org]

Fixed the CORS error when redirecting in webUI.

The redirection in webUI is broken due to the CORS restriction after
we enabled redirection in `master/state` endpoint in MESOS-1865.
As a workaround we change the request mechanism for `master/state`
endpoint from XHR to JSONP to bypass the CORS restriction.

Review: https://reviews.apache.org/r/50482/


Project: http://git-wip-us.apache.org/repos/asf/mesos/repo
Commit: http://git-wip-us.apache.org/repos/asf/mesos/commit/da4687c3
Tree: http://git-wip-us.apache.org/repos/asf/mesos/tree/da4687c3
Diff: http://git-wip-us.apache.org/repos/asf/mesos/diff/da4687c3

Branch: refs/heads/master
Commit: da4687c33f2d807eea5ba8328343cb32928585f3
Parents: 85b168e
Author: haosdent huang <ha...@gmail.com>
Authored: Fri Jul 29 16:31:13 2016 -0700
Committer: Jiang Yan Xu <xu...@apple.com>
Committed: Fri Jul 29 16:46:23 2016 -0700

----------------------------------------------------------------------
 src/webui/master/static/index.html        |  5 ---
 src/webui/master/static/js/controllers.js | 43 +++++++-------------------
 2 files changed, 11 insertions(+), 37 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/mesos/blob/da4687c3/src/webui/master/static/index.html
----------------------------------------------------------------------
diff --git a/src/webui/master/static/index.html b/src/webui/master/static/index.html
index a083537..6211892 100644
--- a/src/webui/master/static/index.html
+++ b/src/webui/master/static/index.html
@@ -57,11 +57,6 @@
         <div class="alert" data-ng-show="state &amp;&amp; !state.leader">
           <strong>No master is currently leading ...</strong>
         </div>
-        <div class="alert alert-warning hide" id="not-leader-alert">
-          <button class="close" data-dismiss="alert">�</button>
-          <strong>This master is <u>not the leader</u>, redirecting in {{redirect / 1000}} seconds ...</strong>
-          <a href="/master/redirect">go now</a>
-        </div>
 
         <div data-ng-repeat="alert in currentAlerts" class="alert alert-{{ alert.type }}">
           <p data-ng-show="alert.title">

http://git-wip-us.apache.org/repos/asf/mesos/blob/da4687c3/src/webui/master/static/js/controllers.js
----------------------------------------------------------------------
diff --git a/src/webui/master/static/js/controllers.js b/src/webui/master/static/js/controllers.js
index ceaf140..cf8c2a4 100644
--- a/src/webui/master/static/js/controllers.js
+++ b/src/webui/master/static/js/controllers.js
@@ -51,35 +51,13 @@
 
 
   // Update the outermost scope with the new state.
-  function updateState($scope, $timeout, data) {
-    // Don't do anything if the data hasn't changed.
-    if ($scope.data == data) {
+  function updateState($scope, $timeout, state) {
+    // Don't do anything if the state hasn't changed.
+    if ($scope.state == state) {
       return true; // Continue polling.
     }
 
-    $scope.state = JSON.parse(data);
-
-    // Determine if there is a leader (and redirect if not the leader).
-    if ($scope.state.leader) {
-
-      // Redirect if we aren't the leader.
-      if ($scope.state.leader != $scope.state.pid) {
-        $scope.redirect = 6000;
-        $("#not-leader-alert").removeClass("hide");
-
-        var countdown = function() {
-          if ($scope.redirect == 0) {
-            // TODO(benh): Use '$window'.
-            window.location = '/master/redirect';
-          } else {
-            $scope.redirect = $scope.redirect - 1000;
-            $timeout(countdown, 1000);
-          }
-        };
-        countdown();
-        return false; // Don't continue polling.
-      }
-    }
+    $scope.state = state;
 
     // A cluster is named if the state returns a non-empty string name.
     // Track whether this cluster is named in a Boolean for display purposes.
@@ -96,8 +74,6 @@
       return true;
     }
 
-    $scope.data = data;
-
     // Pass this pollTime to all relativeDate calls to make them all relative to
     // the same moment in time.
     //
@@ -396,10 +372,13 @@
     };
 
     var pollState = function() {
-      $http.get('master/state',
-                {transformResponse: function(data) { return data; }})
-        .success(function(data) {
-          if (updateState($scope, $timeout, data)) {
+      // When the current master is not the leader, the request is redirected to
+      // the leading master automatically. This would cause a CORS error if we
+      // use XMLHttpRequest here. To avoid the CORS error, we use JSONP as a
+      // workaround. Please refer to MESOS-5911 for further details.
+      $http.jsonp('master/state?jsonp=JSON_CALLBACK')
+        .success(function(response) {
+          if (updateState($scope, $timeout, response)) {
             $scope.delay = updateInterval(_.size($scope.agents));
             $timeout(pollState, $scope.delay);
           }