Skip to content

Latest commit

 

History

History
276 lines (199 loc) · 9.36 KB

README.md

File metadata and controls

276 lines (199 loc) · 9.36 KB
Raw

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

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

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