[ZEPPELIN-4321] Rework Zeppelin with Latest Angular

[hsuanxyz]

What is this PR for?

The old version of zeppelin was written with AngularJS, there exist many issues related to the zeppelin-web and could not resolve due to the low version of AngularJS.

So we rework the zeppelin-web with the latest Angular (8.0).

What type of PR is it?

Feature

Implementation progress

Pages

Name	Route	Module	UI
Home	/	HomeModule	Y
Login	/login	LoginModule	Y
Job Manager	/jobmanager	JobManagerModule	Y
Interpreter Setting	/interpreter	InterpreterModule	Y
Notebook	/notebook/{id}	NotebookModule	Y
Notebook Repos	/notebookRepos
Credential	/credential
Helium	/helium		WIP
Configuration	/configuration

Notebook Features

Feature	Description	Status
Files System	Create/ Rename/ Import etc.	Y
Toolbar Actions	The top toolbar actions	Y

Paragraph Features

Feature	Description	Status
Grid layout and resizable		Y
Code Editor		Y
Actions	The Corresponding actions of the drop-down menu in the setting button	Y
Actions(hot-keys)	Support hot-keys for the actions	WIP
Publishable	publish paragraphs
Stream

Result Display

Type	Status
Dynamic Form	Y
Text	Y
Html	Y
Table	Y
Network

Table Visualization

Type	State
Line Chart	Y
Bard Chart	Y
Pie Chart	Y
Area Chart	Y
Scatter Chart	Y

Helium Visualization

Type	Description	Status
Prototype	To verify the implementable prototype	Y
Publish Dependencies	Just like zeppelin-vis	WIP
Example Projects		Y
Development Documents		WIP

What is the Jira issue?

https://issues.apache.org/jira/browse/ZEPPELIN-4321
https://issues.apache.org/jira/browse/ZEPPELIN-4215

How should this be tested?

Prerequisites

• Node.js version 10.9.0 or later or use creationix/nvm.
• NPM package manager (which is installed with Node.js by default).
• Angular CLI version 8.3.0 or later.

Install

$ cd zeppelin-frontend
$ npm install

Install dependencies in the project directory.

Start Zeppelin server

Run Zeppelin server on http://localhost:8080.

If you are using a custom port instead of the default(http://localhost:8080) or other network address, you can create .env file in the project directory and set SERVER_PROXY.

.env

SERVER_PROXY=http://localhost:8080

Development server

$ npm start

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run npm build to build the project. The build artifacts will be stored in the dist/ directory.

Screenshots (if appropriate)

Login

Home

Interpreter

Job Manager

Dynamic Form

Frontend API(latest Angular)

** Visualization**

Questions:

• Does the licenses files need update? No
• Is there breaking changes for older versions? Maybe
• Does this needs documentation? YES

[zjffdu]

@hsuanxyz Could you add apache license header ?

[hsuanxyz]

@zjffdu Ok, I will add a tslint rule that will automatically be added the license header when each time commit.

Finally used IDE to add the license header, because the tslint is only works for *.ts files.

[zjffdu]

Thanks @hsuanxyz . Here's my comments:

1. In the PR description, the Note column in table should be renamed to Description
2. Does package-lock.json need to be committed ? https://stackoverflow.com/questions/44206782/do-i-commit-the-package-lock-json-file-created-by-npm-5

Besides that, could you list your plan after this PR ? One important task is adding this into travis build so and add integration test ? The examples you listed in PR description is pretty helpful, especially when we could add them into integration instead of manually tested them each time.

[zjffdu]

@prabhjyotsingh Could you help review this ?

[conker84]

@hsuanxyz why is the network visualization not implemented?

[hsuanxyz]

@conker84 We plan to continue development after this PR review is done. All tasks in the list will be completed.

[hsuanxyz]

@zjffdu

1. In the PR description, the Note column in table should be renamed to Description

• Done

2. Does package-lock.json need to be committed ?

• Added

I have added the pom.xml configuration file, now build and test will run in CI. We will add more tests after the project is relatively stable.

[zjffdu]

I have merged it, could you close this PR ? @hsuanxyz

[hsuanxyz]

I have merged it, could you close this PR ?

@zjffdu Thank your.