spring-cloud-dataflow-ui: Setting server context-path breaks dashboard

From @EHJ-52n on April 24, 2018 8:52

Problem

I am using the docker image springcloud/spring-cloud-dataflow-server-local:1.4.0.RELEASE and set the following environment configuration in my docker-compose.yml for this image:

environment:
  - spring.cloud.dataflow.applicationProperties.stream.spring.rabbitmq.host=rabbitmq
  - server.contextPath=/dataflow
  - spring.cloud.config.enabled=false

The result is, that I can access the server via http://localhost:9393/dataflow/.

The response looks like:

{
  _links: {
    dashboard: {
      href: "http://localhost:9393/dataflow/dashboard"
    },
    streams / definitions: {
      href: "http://localhost:9393/dataflow/streams/definitions"
    },
    streams / definitions / definition: {
      href: "http://localhost:9393/dataflow/streams/definitions/{name}",
      templated: true
    },
    streams / deployments: {
      href: "http://localhost:9393/dataflow/streams/deployments"
    },
    streams / deployments / deployment: {
      href: "http://localhost:9393/dataflow/streams/deployments/{name}",
      templated: true
    },
    runtime / apps: {
      href: "http://localhost:9393/dataflow/runtime/apps"
    },
    runtime / apps / app: {
      href: "http://localhost:9393/dataflow/runtime/apps/{appId}",
      templated: true
    },
    runtime / apps / instances: {
      href: "http://localhost:9393/dataflow/runtime/apps/{appId}/instances",
      templated: true
    },
    metrics / streams: {
      href: "http://localhost:9393/dataflow/metrics/streams"
    },
    tasks / definitions: {
      href: "http://localhost:9393/dataflow/tasks/definitions"
    },
    tasks / definitions / definition: {
      href: "http://localhost:9393/dataflow/tasks/definitions/{name}",
      templated: true
    },
    tasks / executions: {
      href: "http://localhost:9393/dataflow/tasks/executions"
    },
    tasks / executions / name: {
      href: "http://localhost:9393/dataflow/tasks/executions{?name}",
      templated: true
    },
    tasks / executions / execution: {
      href: "http://localhost:9393/dataflow/tasks/executions/{id}",
      templated: true
    },
    jobs / executions: {
      href: "http://localhost:9393/dataflow/jobs/executions"
    },
    jobs / executions / name: {
      href: "http://localhost:9393/dataflow/jobs/executions{?name}",
      templated: true
    },
    jobs / executions / execution: {
      href: "http://localhost:9393/dataflow/jobs/executions/{id}",
      templated: true
    },
    jobs / executions / execution / steps: {
      href: "http://localhost:9393/dataflow/jobs/executions/{jobExecutionId}/steps",
      templated: true
    },
    jobs / executions / execution / steps / step: {
      href: "http://localhost:9393/dataflow/jobs/executions/{jobExecutionId}/steps/{stepId}",
      templated: true
    },
    jobs / executions / execution / steps / step / progress: {
      href: "http://localhost:9393/dataflow/jobs/executions/{jobExecutionId}/steps/{stepId}/progress",
      templated: true
    },
    jobs / instances / name: {
      href: "http://localhost:9393/dataflow/jobs/instances{?name}",
      templated: true
    },
    jobs / instances / instance: {
      href: "http://localhost:9393/dataflow/jobs/instances/{id}",
      templated: true
    },
    tools / parseTaskTextToGraph: {
      href: "http://localhost:9393/dataflow/tools"
    },
    tools / convertTaskGraphToText: {
      href: "http://localhost:9393/dataflow/tools"
    },
    counters: {
      href: "http://localhost:9393/dataflow/metrics/counters"
    },
    counters / counter: {
      href: "http://localhost:9393/dataflow/metrics/counters/{name}",
      templated: true
    },
    field - value - counters: {
      href: "http://localhost:9393/dataflow/metrics/field-value-counters"
    },
    field - value - counters / counter: {
      href: "http://localhost:9393/dataflow/metrics/field-value-counters/{name}",
      templated: true
    },
    aggregate - counters: {
      href: "http://localhost:9393/dataflow/metrics/aggregate-counters"
    },
    aggregate - counters / counter: {
      href: "http://localhost:9393/dataflow/metrics/aggregate-counters/{name}",
      templated: true
    },
    apps: {
      href: "http://localhost:9393/dataflow/apps"
    },
    about: {
      href: "http://localhost:9393/dataflow/about"
    },
    completions / stream: {
      href: "http://localhost:9393/dataflow/completions/stream{?start,detailLevel}",
      templated: true
    },
    completions / task: {
      href: "http://localhost:9393/dataflow/completions/task{?start,detailLevel}",
      templated: true
    }
  },
  api.revision: 14
}

When accessing the dashboard via http://localhost:9393/dataflow/dashboard, I get an empty page with the following source:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Spring Cloud Data Flow</title>
  <base href="/dashboard/">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="styles.05e4cbe82167119ec62a.bundle.css" rel="stylesheet" />
</head>

<body>
  <app-root>
    <div class="jumbotron vertical-center fade-index-spinner">
      <div class="container text-center">
        <div class="icon icon-middle" style="font-size: 96px">
          <svg class="icon-spinner-lg" width="200px" height="200px" 
              viewBox="0 0 101 101" xmlns="http://www.w3.org/2000/svg">
                <circle class="ring" fill="none" stroke-width="10%" 
                  stroke-linecap="butt" cx="50%" cy="50%" r="45%"></circle>
                <circle class="path" fill="none" stroke-width="10%"
                 stroke-linecap="butt" cx="50%" cy="50%" r="45%"></circle>
          </svg>
        </div>
      </div>
    </div>
  </app-root>
  <script type="text/javascript" src="inline.245caa4e45fc4a7126da.bundle.js"></script>
  <script type="text/javascript" src="polyfills.3d1c9d609a48f3c17cc7.bundle.js"></script>
  <script type="text/javascript" src="main.81410b088574907b4009.bundle.js"></script>
</body>

</html>

This code results in firefox and chromium trying to download the script files from http://localhost:9393/dashboard/*.bundle.js which should be http://localhost:9393/dataflow/dashboard/*.bundle.js.

Potential Solution

To fix this, the <html><head><base> hrefattribute should be adjusted to server.contextPath + /dashboard/ or ./dashboard/.

Miscellaneous

What do you think?

Is there any work-around for this possible?

Copied from original issue: spring-cloud/spring-cloud-dataflow#2158