Zeppelin notebooks front-end built with Angular.
- Jira issue ZEPPELIN-4321
- Design Document: Zeppelin Notebook Rework Proposal
- 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.
Run the npm install command to install dependencies in the project directory.
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
Run npm start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run npm build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Karma.
| 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 |
| Feature | Note | Status |
|---|---|---|
| Files System | Create/ Rename/ Import etc. | Y |
| Toolbar Actions | The top toolbar actions | Y |
| Feature | Note | 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 |
| Type | Status |
|---|---|
| Dynamic Form | Y |
| Text | Y |
| Html | Y |
| Table | Y |
| Network |
| Type | State |
|---|---|
| Line Chart | Y |
| Bard Chart | Y |
| Pie Chart | Y |
| Area Chart | Y |
| Scatter Chart | Y |
| Type | Note | Status |
|---|---|---|
| Prototype | To verify the implementable prototype | Y |
| Publish Dependencies | Just like zeppelin-vis | WIP |
| Example Projects | WIP | |
| Development Documents | WIP |
Follow the Setup steps to starting the frontend service. The app will automatically reload if you change any of the source files.
Zeppelin-Frontend-Next is using Angular as the main Framework, before developing we hope highly recommended to have a good knowledge of Angular and RxJs.
In addition:
- We use G2 visualization
- We use Lodash to process complex data
- We use Monaco Editor to make code editor
- We follow mainly the Angular Style Guide
- We use a 2 spaces indentation
- We use single quotes
But don't worry, TSLint and prettier will make you remember it for the most part. Git hooks will automatically check and fix it when commit.
We follow mainly the Workspace and project file structure to organize the folder structure and files.
src folder contains the source code for Zeppelin-Frontend-Next.
├── app
│ ├── core
│ │ └── message-listener # handle WebSocket message
│ ├── interfaces # interfaces
│ ├── pages
│ │ ├── login # login module
│ │ └── workspace
│ │ ├── home # welcome module
│ │ ├── interpreter # interpreter settings
│ │ ├── job-manager # job manager module
│ │ └── notebook # notebook module
│ │ ├── action-bar # notebook settings
│ │ ├── interpreter-binding # interpreter binding
│ │ ├── permissions # permissions
│ │ └── paragraph # paragraph module
│ │ ├── code-editor # code editor module
│ │ ├── control # paragraph controls
│ │ ├── dynamic-forms # dynamic forms
│ │ └── result # display result
│ ├── sdk # Zeppelin API Frontend SDK
│ ├── share # Share Components
│ ├── services # API Service
│ └── visualization
│ ├── area-chart # Area Chart Component
│ ├── bar-chart # Bar Chart Component
│ ├── line-chart # Line Chart Component
│ ├── pie-chart # Pie Chart Component
│ ├── scatter-chart # Scatter Chart Component
│ └── table # Data Table Component
├── assets # Assets
└── styles
└── theme # Theme Files
├── dark
└── light
We specify path mapping in the tsconfig.json file to get a clear import path.
So please follow the rules following:
- Add
public-api.tsandindex.tsto the folder where want to export the modules public-api.tsFile only included you wish to export modulesindex.tsFile only export./public-api.ts- Use relative paths instead of mapped paths when the same level to prevent circular references
The following guide for this project only. Most of the time you only need to follow Angular's guide.
Use OnPush as the change detection strategy for components.
Send Message: Inject the MessageService and then use its instance methods.
import { MessageService } from '@zeppelin/services';
export class SomeComponent {
constructor(public messageService: MessageService) { }
fun() {
// Do something
this.messageService.listNoteJobs();
}
}Listen to Message
Make sure the class extends from MessageListenersManager and inject the MessageService and ensures that it is public.
After that, you can use the @MessageListener decorator to decorate the corresponding message method.
import { MessageListener, MessageListenersManager } from '@zeppelin/core';
import { MessageService } from '@zeppelin/services';
import { OP, ListNoteJobs } from '@zeppelin/sdk';
export class SomeComponent extends MessageListenersManager {
constructor(public messageService: MessageService) { }
@MessageListener(OP.LIST_NOTE_JOBS)
fun(data: ListNoteJobs) {
// Do something
}
}Use we provide the function to wrap component styles to implement theming. You can find the theme variables in the src/styles/theme/ folder.
@import "theme-mixin";
.themeMixin({
// component styles
});Follow of the following imports order:
import * from '@angular/*' // Angular modules
import * from 'rxjs/*' // Rxjs modules
// BLANK LINE
import * from '*' // Other third party modules
// BLANK LINE
import * from '@zeppelin/*' // This project modules
// BLANK LINE
import * from './*' // Same level modules