Skip to content
This repository was archived by the owner on May 14, 2025. It is now read-only.

Commit 6c267de

Browse files
oodamienghillert
authored andcommitted
Update ReadMe
1 parent 188286e commit 6c267de

File tree

5 files changed

+352
-309
lines changed

5 files changed

+352
-309
lines changed

.gitignore

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,20 @@ ui/app/styles/main.css.map
88
ui/.tmp
99
ui/documentation/
1010
ui/package-lock.json
11+
ui/dist
12+
ui/tmp
13+
ui/out-tsc
14+
ui/.c9/
15+
16+
ui/.sass-cache
17+
ui/connect.lock
18+
ui/coverage
19+
ui/libpeerconnection.log
20+
ui/npm-debug.log
21+
ui/testem.log
22+
ui/typings
23+
24+
1125
src/main/resources/public/dashboard
1226
target/
1327
.classpath
@@ -19,3 +33,14 @@ target/
1933
*.iws
2034
npm-debug.log
2135
.vscode
36+
*.launch
37+
*.sublime-workspace
38+
.DS_Store
39+
Thumbs.db
40+
41+
# IDE - VSCode
42+
.vscode/*
43+
!.vscode/settings.json
44+
!.vscode/tasks.json
45+
!.vscode/launch.json
46+
!.vscode/extensions.json

README.md

Lines changed: 97 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,94 @@
1-
# Spring Cloud Data Flow Dashboard [![Stories in Ready](https://badge.waffle.io/spring-cloud/spring-cloud-dataflow-ui.svg?label=ready&title=Ready)](http://waffle.io/spring-cloud/spring-cloud-dataflow-ui) [![Stories in Progress](https://badge.waffle.io/spring-cloud/spring-cloud-dataflow-ui.svg?label=In%20Progress&title=In%20Progress)](http://waffle.io/spring-cloud/spring-cloud-dataflow-ui)
21

3-
[![Build Status](https://travis-ci.org/spring-cloud/spring-cloud-dataflow-ui.png?branch=master)](https://travis-ci.org/spring-cloud/spring-cloud-dataflow-ui)
4-
[![Build status](https://ci.appveyor.com/api/projects/status/7pqco2aqjyaphp36/branch/master?svg=true)](https://ci.appveyor.com/project/ghillert/spring-cloud-dataflow-ui/branch/master)
5-
[![Code Coverage](https://codecov.io/gh/spring-cloud/spring-cloud-dataflow-ui/branch/master/graph/badge.svg)](https://codecov.io/gh/spring-cloud/spring-cloud-dataflow-ui/branch/master)
6-
7-
**SauceLabs Status**
8-
9-
[![Sauce Test Status](https://saucelabs.com/buildstatus/ghillert)](https://saucelabs.com/u/ghillert)
10-
11-
[![Sauce Test Status](https://saucelabs.com/browser-matrix/ghillert.svg)](https://saucelabs.com/u/ghillert)
12-
13-
**BrowserStack Status**
14-
15-
[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=T3pKbzdQK2RpVnkxZ2ZwN2tjeGFUSzdOQUJ2cG1GSDBYSlRvT00zZWV1bz0tLVpuMXk0eTJmN01ienhnbkNPbXJTanc9PQ==--b187f26b476b4d3f262b837e13f4be593c41e44c)](https://www.browserstack.com/automate/public-build/T3pKbzdQK2RpVnkxZ2ZwN2tjeGFUSzdOQUJ2cG1GSDBYSlRvT00zZWV1bz0tLVpuMXk0eTJmN01ienhnbkNPbXJTanc9PQ==--b187f26b476b4d3f262b837e13f4be593c41e44c)
16-
17-
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/.
18-
19-
> The Git repository for the main *Spring Cloud Data Flow* project is at: https://github.com/spring-cloud/spring-cloud-dataflow
20-
21-
# Building the Module
22-
23-
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.
24-
25-
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.
26-
27-
## Requirements
28-
29-
Using [Maven][] is also the easiest route for Java developers to get started, as the only requirements are:
30-
31-
* [Maven][]
32-
* [Git][]
33-
34-
## Building the Project using Maven
2+
<p align="center">
3+
<a href="https://cloud.spring.io/spring-cloud-dataflow/">
4+
<img alt="Spring Data Flow Dashboard" title="Spring Data Flow Dashboard" src="http://i.imgur.com/ZfEGBE4.png" width="450">
5+
</a>
6+
</p>
7+
8+
<p align="center">
9+
<a href="http://waffle.io/spring-cloud/spring-cloud-dataflow-ui">
10+
<img src="https://badge.waffle.io/spring-cloud/spring-cloud-dataflow-ui.svg?label=ready&title=Ready"
11+
alt="Stories in Ready">
12+
</a>
13+
<a href="http://waffle.io/spring-cloud/spring-cloud-dataflow-ui">
14+
<img src="https://badge.waffle.io/spring-cloud/spring-cloud-dataflow-ui.svg?label=In%20Progress&title=In%20Progress"
15+
alt="Stories in Progress">
16+
</a>
17+
<br />
18+
<a href="https://travis-ci.org/spring-cloud/spring-cloud-dataflow-ui">
19+
<img src="https://travis-ci.org/spring-cloud/spring-cloud-dataflow-ui.png?branch=master"
20+
alt="Build Status">
21+
</a>
22+
<a href="https://ci.appveyor.com/project/ghillert/spring-cloud-dataflow-ui/branch/master">
23+
<img src="https://ci.appveyor.com/api/projects/status/7pqco2aqjyaphp36/branch/master?svg=true"
24+
alt="Build status">
25+
</a>
26+
<a href="https://codecov.io/gh/spring-cloud/spring-cloud-dataflow-ui/branch/master">
27+
<img src="https://codecov.io/gh/spring-cloud/spring-cloud-dataflow-ui/branch/master/graph/badge.svg"
28+
alt="Code Coverage">
29+
</a>
30+
<a href="https://saucelabs.com/u/ghillert">
31+
<img src="https://saucelabs.com/buildstatus/ghillert"
32+
alt="Sauce Test Status">
33+
</a>
34+
<a href="https://www.browserstack.com/automate/public-build/T3pKbzdQK2RpVnkxZ2ZwN2tjeGFUSzdOQUJ2cG1GSDBYSlRvT00zZWV1bz0tLVpuMXk0eTJmN01ienhnbkNPbXJTanc9PQ==--b187f26b476b4d3f262b837e13f4be593c41e44c">
35+
<img src="https://www.browserstack.com/automate/badge.svg?badge_key=T3pKbzdQK2RpVnkxZ2ZwN2tjeGFUSzdOQUJ2cG1GSDBYSlRvT00zZWV1bz0tLVpuMXk0eTJmN01ienhnbkNPbXJTanc9PQ==--b187f26b476b4d3f262b837e13f4be593c41e44c"
36+
alt="BrowserStack Status">
37+
</a>
38+
</p>
39+
40+
<p align="center">
41+
<a href="#introduction">Introduction</a> •
42+
<a href="#how-to-use">How To Use</a> •
43+
<a href="#acknowledgments">Acknowledgments</a>
44+
</p>
45+
46+
## Introduction
47+
48+
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/.
49+
50+
> The Git repository for the main **Spring Cloud Data Flow** project is at: https://github.com/spring-cloud/spring-cloud-dataflow
51+
52+
---
53+
54+
## Showcase
55+
56+
<center>
57+
<table>
58+
<tr>
59+
<td><a href="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-available-apps-list.png"><img width="120" alt="Spring Cloud Data Flow" src="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-available-apps-list.png"></a></td>
60+
<td><a href="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-bulk-import-applications.png"><img width="120" alt="Spring Cloud Data Flow" src="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-bulk-import-applications.png"></a></td>
61+
<td><a href="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-streams-list-definitions.png"><img width="120" alt="Spring Cloud Data Flow" src="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-streams-list-definitions.png"></a></td>
62+
<td><a href="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-flo-create-stream.png"><img width="120" alt="Spring Cloud Data Flow" src="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-flo-create-stream.png"></a></td>
63+
</tr>
64+
<tr>
65+
<td><a href="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-stream-deploy-builder.png"><img width="120" alt="Spring Cloud Data Flow" src="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-stream-deploy-builder.png"></a></td>
66+
<td><a href="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-task-apps-list.png"><img width="120" alt="Spring Cloud Data Flow" src="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-task-apps-list.png"></a></td>
67+
<td><a href="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-ctr-flo-tab.png"><img width="120" alt="Spring Cloud Data Flow" src="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-ctr-flo-tab.png"></a></td>
68+
<td><a href="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-jobs-job-execution-details.png"><img width="120" alt="Spring Cloud Data Flow" src="https://raw.githubusercontent.com/spring-cloud/spring-cloud-dataflow/master/spring-cloud-dataflow-docs/src/main/asciidoc/images/dataflow-jobs-job-execution-details.png"></a></td>
69+
</tr>
70+
</table>
71+
</center>
72+
73+
---
74+
75+
## How To Use
76+
77+
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.
78+
79+
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.
80+
81+
### Building the Project using Maven
82+
83+
Please ensure that at a minimum [Maven][] and [Git][] are available on your system (Using [Maven][] is also the easiest route for Java developers to get started).
3584

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

4089
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.
4190

42-
## Building the Project using npm
91+
### Building the Project using npm
4392

4493
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:
4594

@@ -48,151 +97,26 @@ For UI development purposes, we recommend using [npm][] directly. Please ensure
4897
$ npm install
4998
$ ng build --prod
5099

51-
**NOTE:** Before building be sure that the `ng-serve` development server has been shutdown.
52-
53-
### Build fails after merging a branch or changing branches
54-
55-
In some cases the npm-modules or other dependencies may become inconsistent during branch changes.
56-
In order to resolve the problem we need to clean out inconsistent dependencies.
57-
The following instructions can be used to do this:
58-
59-
* Shutdown the development server if it is running.
60-
* Commit or stash your changes
61-
* Execute the following:
62-
* `git clean -fx`
63-
* `npm install`
64-
* If you stashed your files execute the following: `git stash pop`
65-
* Now build the application by executing the following: `ng build --prod`
66-
67-
## Important Build-related Configuration Files
68-
69-
* **pom.xml** Maven config file
70-
* ui/**package.json** Node dependencies
71-
72-
# Running Tests - Locally
73-
74-
## Unit Tests
75-
76-
```bash
77-
$ ng test --single-run
78-
```
79-
80-
## E2E Tests
81-
82-
```bash
83-
$ npm run e2e
84-
```
85-
86-
# Running Tests - SauceLabs
87-
88-
Before you can run tests using SauceLabs, please setup your username and password:
89-
90-
```bash
91-
$ export SAUCE_USERNAME=your-username
92-
$ export SAUCE_ACCESS_KEY=your-access-key
93-
```
94-
95-
## Unit Tests
96-
97-
```bash
98-
$ npm run test-saucelabs-local
99-
```
100-
101-
## E2E Tests
102-
103-
For E2E tests, developers should refrain from using `localhost`. Instead, add `dataflow.local` to your local DNS hosts file.
104-
105-
```bash
106-
$ npm run e2e-saucelabs-local
107-
```
108-
109-
## Slow Internet Connection
100+
Before building be sure that the `ng-serve` development server has been shutdown.<br >
110101

111-
By default the tests use an embedded version of Sauce Connect. In case you enounter test failures due to bandwidth constraints,
112-
you may consider establishing a SauceLabs tunnel using the stand-alone **[Sauce Connect](https://wiki.saucelabs.com/display/DOCS/Sauce+Connect+Proxy)**.
102+
**If you want to contribute and help developing the project, please, have a look at the [Developer Guideline](README_DEV.md/#development).**
113103

114-
Setup instructions can be found [here](https://wiki.saucelabs.com/display/DOCS/Basic+Sauce+Connect+Proxy+Setup).
104+
---
115105

116-
Make sure you have at least the following environment variables defined:
106+
## Acknowledgments
117107

118-
export SAUCE_CONNECT_USE_EMBEDDED=false
119-
export SAUCE_USER=
120-
export SAUCE_API_KEY=
108+
Thanks to [Saucelabs](https://saucelabs.com/) and [Browserstack](https://www.browserstack.com/) for supporting us.
109+
This project uses code from several open source packages:
110+
[Angular](https://angular.io),
111+
[Ngx Bootstrap](https://valor-software.com/),
112+
[RxJS](https://github.com/ReactiveX/rxjs),
113+
[Spring Flo](https://github.com/spring-projects/spring-flo),
114+
[Ngx Toastr](https://github.com/scttcper/ngx-toastr),
115+
[Font Awesome](https://fontawesome.com/v4.7.0/icons/) (...).
121116

122-
For a list of further supported configuration options, check the `config_examples/sc_configs` folder in the downloaded Sauce Connect binary.
117+
This project is powered by:
123118

124-
## Thank You
125-
126-
![SauceLabs Logo](master-ui-assets/images/saucelabs-logo-600x315.png)
127-
128-
Cross-browser Testing provided by [SauceLabs](https://saucelabs.com).
129-
130-
# Running Tests - BrowserStack
131-
132-
Before you can run tests using BrowserStack, please setup your username and password:
133-
134-
```bash
135-
$ export BROWSER_STACK_USERNAME=your-username
136-
$ export BROWSER_STACK_ACCESS_KEY=your-access-key
137-
```
138-
139-
## Unit Tests
140-
141-
```bash
142-
$ npm run test-browserstack-local
143-
```
144-
145-
## E2E Tests
146-
147-
For E2E tests, developers should refrain from using `localhost`. Instead, add `dataflow.local` to your local DNS hosts file.
148-
149-
```bash
150-
$ npm run e2e-browserstack-local
151-
```
152-
153-
## Big Thanks
154-
155-
![BrowserStack Logo](master-ui-assets/images/browserstack-logo-600x315.png)
156-
157-
158-
Cross-browser Testing Platform provided by [BrowserStack](https://browserstack.com).
159-
160-
# Development
161-
162-
For development, please ensure that a *Spring Cloud Data Flow* server instance is running at `http://localhost:9393/`.
163-
164-
The execute:
165-
166-
$ npm start
167-
168-
The Dashboard will be running at `http://localhost:4200/`. The browser will automatically reload upon saving any changes to the application sources.
169-
170-
# Dependency Management
171-
172-
[npm][] is used for managing UI dependencies.
173-
174-
## Install Build Dependency
175-
176-
$ npm install --save-dev my-dependency
177-
178-
## How to Update Node.js dependencies in package.json
179-
180-
Use [https://github.com/tjunnone/npm-check-updates](https://github.com/tjunnone/npm-check-updates)
181-
182-
# Project Analytics
183-
184-
## Web Pack Bundle Analyzer
185-
Produces analysis report on the project webpack bundles.
186-
187-
$ ng build --prod --stats-json
188-
$ npm run bundle-report
189-
190-
You can view the results via your browser at: http://127.0.0.1:8888/
191-
192-
## Code Coverage Report
193-
Produces code coverage report.
194-
195-
$ ng test --browsers PhantomJS --watch --code-coverage --reporters=coverage-istanbul
119+
<a href="http://pivotal.io/"><img alt="Pivotal" width="136" title="Pivotal" src="https://i.imgur.com/XPeBw7A.png"></a> <a href="http://spring.io/"><img alt="Spring" title="Spring" src="https://i.imgur.com/az8Xady.png" width="155"></a>
196120

197121
[Angular]: http://angular.io/
198122
[Angular CLI]: https://cli.angular.io/
@@ -202,4 +126,3 @@ Produces code coverage report.
202126
[Node.js]: http://nodejs.org/
203127
[npm]: https://www.npmjs.com/
204128
[Protractor]: https://github.com/angular/protractor
205-

0 commit comments

Comments
 (0)