[SPARK-33579][UI] Fix executor blank page behind proxy

### What changes were proposed in this pull request?

Fix some "hardcoded" API urls in Web UI.
More specifically, we avoid the use of `location.origin` when constructing URLs for internal API calls within the JavaScript.
Instead, we use `apiRoot` global variable.

### Why are the changes needed?

On one hand, it allows us to build relative URLs. On the other hand, `apiRoot` reflects the Spark property `spark.ui.proxyBase` which can be set to change the root path of the Web UI.

If `spark.ui.proxyBase` is actually set, original URLs become incorrect, and we end up with an executors blank page.
I encounter this bug when accessing the Web UI behind a proxy (in my case a Kubernetes Ingress).

See the following link for more context:
https://github.com/jupyterhub/jupyter-server-proxy/issues/57#issuecomment-699163115

### Does this PR introduce _any_ user-facing change?

Yes, as all the changes introduced are in the JavaScript for the Web UI.

### How the changes have been tested ?
I modified/debugged the JavaScript as in the commit with the help of the developer tools in Google Chrome, while accessing the Web UI of my Spark app behind my k8s ingress.

Closes #30523 from pgillet/fix-executors-blank-page-behind-proxy.

Authored-by: Pascal Gillet <pascal.gillet@stack-labs.com>
Signed-off-by: Kousuke Saruta <sarutak@oss.nttdata.com>
This commit is contained in:
Pascal Gillet 2020-11-30 19:31:42 +09:00 committed by Kousuke Saruta
parent 5cfbdddefe
commit 6e5446e61f
2 changed files with 4 additions and 4 deletions

View file

@ -70,7 +70,7 @@ function stageEndPoint(appId) {
return newBaseURI + "/api/v1/applications/" + appId + "/" + appAttemptId + "/stages/" + stageId;
}
}
return location.origin + "/api/v1/applications/" + appId + "/stages/" + stageId;
return uiRoot + "/api/v1/applications/" + appId + "/stages/" + stageId;
}
function getColumnNameForTaskMetricSummary(columnKey) {

View file

@ -105,7 +105,7 @@ function getStandAloneAppId(cb) {
}
// Looks like Web UI is running in standalone mode
// Let's get application-id using REST End Point
$.getJSON(location.origin + "/api/v1/applications", function(response, status, jqXHR) {
$.getJSON(uiRoot + "/api/v1/applications", function(response, status, jqXHR) {
if (response && response.length > 0) {
var appId = response[0].id;
cb(appId);
@ -152,7 +152,7 @@ function createTemplateURI(appId, templateName) {
var baseURI = words.slice(0, ind).join('/') + '/static/' + templateName + '-template.html';
return baseURI;
}
return location.origin + "/static/" + templateName + "-template.html";
return uiRoot + "/static/" + templateName + "-template.html";
}
function setDataTableDefaults() {
@ -193,5 +193,5 @@ function createRESTEndPointForExecutorsPage(appId) {
return newBaseURI + "/api/v1/applications/" + appId + "/" + attemptId + "/allexecutors";
}
}
return location.origin + "/api/v1/applications/" + appId + "/allexecutors";
return uiRoot + "/api/v1/applications/" + appId + "/allexecutors";
}