Spring Cloud Data Flow Dashboard

This is the Spring Cloud Data Flow Dashboard user interface (UI). The UI uses Angular. Source code documentation is available at http://cloud.spring.io/spring-cloud-dataflow-ui/.

The Git repository for the main Spring Cloud Data Flow project is at: https://github.com/spring-cloud/spring-cloud-dataflow

Building the Module

Two build tool chains are supported. Primarily, the Spring Cloud Data Flow UI uses npm (Node.js-based) for managing dependencies and the execution of the build. In order to provide easier Continuous Integration (CI) support, Maven can also be used to execute the build.

The Spring Cloud Data Flow Dashboard uses Maven, specifically the frontend-maven-plugin which will actually execute npm underneath. Using the frontend-maven-plugin, however, the required tooling, including Node.js will be downloaded, installed and executed for you.

Requirements

Using Maven is also the easiest route for Java developers to get started, as the only requirements are:

• Maven
• Git

Building the Project using Maven

$ git clone https://github.com/spring-cloud/spring-cloud-dataflow-ui.git
$ cd spring-cloud-dataflow-ui
$ mvn clean install

This will create target/spring-cloud-dataflow-ui-1.3.0.BUILD-SNAPSHOT.jar and also install the build artifact into the local Maven repository.

Building the Project using npm

For UI development purposes, we recommend using npm directly. Please ensure that at a minimum Node.js, npm and the Angular CLI are available on your system. In order to execute the build simply do:

$ git clone https://github.com/spring-cloud/spring-cloud-dataflow-ui.git
$ cd spring-cloud-dataflow-ui/ui
$ npm install
$ ng build --prod

NOTE: Before building be sure that the ng-serve development server has been shutdown.

Build fails after merging a branch or changing branches

In some cases the npm-modules or other dependencies may become inconsistent during branch changes. In order to resolve the problem we need to clean out inconsistent dependencies. The following instructions can be used to do this:

• Shutdown the development server if it is running.
• Commit or stash your changes
• Execute the following:
  • git clean -fx
  • npm install
• If you stashed your files execute the following: git stash pop
• Now build the application by executing the following: ng build --prod

Important Build-related Configuration Files

• pom.xml Maven config file
• ui/package.json Node dependencies

Running Tests - Locally

Unit Tests

	$ ng test --single-run

E2E Tests

	$ npm run e2e

Running Tests - SauceLabs

Before you can run tests using SauceLabs, please setup your username and password:

    $ export SAUCE_USERNAME=your-username
    $ export SAUCE_ACCESS_KEY=your-access-key

Unit Tests

	$ npm run test-saucelabs-local

E2E Tests

For E2E tests, developers should refrain from using localhost. Instead, add dataflow.local to your local DNS hosts file.

	$ npm run e2e-saucelabs-local

Thank You

Cross-browser Testing provided by SauceLabs.

Running Tests - BrowserStack

Before you can run tests using BrowserStack, please setup your username and password:

    $ export BROWSER_STACK_USERNAME=your-username
    $ export BROWSER_STACK_ACCESS_KEY=your-access-key

Unit Tests

	$ npm run test-browserstack-local

E2E Tests

For E2E tests, developers should refrain from using localhost. Instead, add dataflow.local to your local DNS hosts file.

	$ npm run e2e-browserstack-local

Big Thanks

Cross-browser Testing Platform provided by BrowserStack.

Development

For development, please ensure that a Spring Cloud Data Flow server instance is running at http://localhost:9393/.

The execute:

$ npm start

The Dashboard will be running at http://localhost:4200/. The browser will automatically reload upon saving any changes to the application sources.

Dependency Management

npm is used for managing UI dependencies.

Install Build Dependency

$ npm install --save-dev my-dependency

How to Update Node.js dependencies in package.json

Use https://github.com/tjunnone/npm-check-updates

Project Analytics

Web Pack Bundle Analyzer

Produces analysis report on the project webpack bundles.

$ ng build --prod --stats-json
$ npm run bundle-report

You can view the results via your browser at: http://127.0.0.1:8888/

Code Coverage Report

Produces code coverage report.

$ ng test --browsers PhantomJS --watch --code-coverage  --reporters=coverage-istanbul