tree: 21ec9f0ce95dd64a0c079f4adba674eba32b6c1b [path history] [tgz]
  1. e2e/
  2. projects/
  3. src/
  4. WEB-INF/
  5. .editorconfig
  6. .gitignore
  7. .prettierignore
  8. .prettierrc
  9. angular.json
  10. browserslist
  11. karma.conf.js
  12. package-lock.json
  13. package.json
  14. pom.xml
  15. proxy.conf.js
  16. README.md
  17. screenshot.png
  18. tsconfig.app.json
  19. tsconfig.json
  20. tsconfig.spec.json
  21. tslint.json
  22. webpack.partial.js
zeppelin-web-angular/README.md

Zeppelin WEB

Zeppelin notebooks front-end built with Angular.

screenshot

Setup

Prerequisites

Install

Run the npm install command to 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

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.

Build

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

Running unit tests

Run ng test to execute the unit tests via Karma.

Implementation Progress

Pages

NameRouteModuleUI
Home/HomeModuleY
Login/loginLoginModuleY
Job Manager/jobmanagerJobManagerModuleY
Interpreter Setting/interpreterInterpreterModuleY
Notebook/notebook/{id}NotebookModuleY
Notebook Repos/notebookRepos
Credential/credential
Helium/heliumWIP
Configuration/configuration

Notebook Features

FeatureDescriptionStatus
Files SystemCreate/ Rename/ Import etc.Y
Toolbar ActionsThe top toolbar actionsY

Paragraph Features

FeatureDescriptionStatus
Grid layout and resizableY
Code EditorY
ActionsThe Corresponding actions of the drop-down menu in the setting buttonY
Actions(hot-keys)Support hot-keys for the actionsWIP
Publishablepublish paragraphs
Stream

Result Display

TypeStatus
Dynamic FormY
TextY
HtmlY
TableY
Network

Table Visualization

TypeState
Line ChartY
Bard ChartY
Pie ChartY
Area ChartY
Scatter ChartY

Helium Visualization

TypeDescriptionStatus
PrototypeTo verify the implementable prototypeY
Publish DependenciesJust like zeppelin-visWIP
Example ProjectsY
Development DocumentsWIP

Contributing

Dev Mode

Follow the Setup steps to starting the frontend service. The app will automatically reload if you change any of the source files.

Technologies

Zeppelin-WEB-Angular is using Angular as the main Framework, before developing we hope highly recommended to have a good knowledge of Angular and RxJs.

In addition:

Coding style

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.

Folder Structure

We follow mainly the Workspace and project file structure to organize the folder structure and files.

Src Folder Structure

src folder contains the source code for Zeppelin-WEB-Angular.

├── 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

Import Path Rules

We specify path mapping in the tsconfig.json file to get a clear import path.

So please follow the rules following:

  • Add public-api.ts and index.ts to the folder where want to export the modules
  • public-api.ts File only included you wish to export modules
  • index.ts File only export ./public-api.ts
  • Use relative paths instead of mapped paths when the same level to prevent circular references

Good Practices

The following guide for this project only. Most of the time you only need to follow Angular's guide.

Change Detection Strategy

Use OnPush as the change detection strategy for components.

WebSocket Listen and Send

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
  }
}

Theming

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
});

Imports order

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