This is an automated email from the ASF dual-hosted git repository.

chanholee pushed a commit to branch branch-0.12
in repository https://gitbox.apache.org/repos/asf/zeppelin.git


The following commit(s) were added to refs/heads/branch-0.12 by this push:
     new 7941340014 [ZEPPELIN-6287] Fix lint errors in zeppelin-web-angular 
modules
7941340014 is described below

commit 7941340014fa3c22727cefc63e14ed67edb23c72
Author: SeungYoung Oh <seung...@naver.com>
AuthorDate: Fri Aug 22 10:17:14 2025 +0900

    [ZEPPELIN-6287] Fix lint errors in zeppelin-web-angular modules
    
    ### What is this PR for?
    Fix various lint errors in zeppelin-web-angular.
    They were hidden, I think, because lint script was only running on staged 
local files during pre-commit.
    - add prettier check to the lint script
    - add types/webpack-env dependency for type safety
    
    ### What type of PR is it?
    Refactoring
    
    ### Todos
    * [ ] [ZEPPELIN-6286](https://issues.apache.org/jira/browse/ZEPPELIN-6286) 
Add lint check to zeppelin-web-angular CI workflow
    
    ### What is the Jira issue?
    * [ZEPPELIN-6287](https://issues.apache.org/jira/browse/ZEPPELIN-6287)
    
    ### How should this be tested?
    * run `npm run lint`
    
    ### Screenshots (if appropriate)
    
    ### Questions:
    * Does the license files need to update? No
    * Is there breaking changes for older versions? No
    * Does this needs documentation? No
    
    Closes #5036 from seung-00/feature/ZEPPELIN-6287.
    
    Signed-off-by: ChanHo Lee <chanho...@apache.org>
    (cherry picked from commit 7b26f92242390a351ed358d18f505684cc4d58b5)
    Signed-off-by: ChanHo Lee <chanho...@apache.org>
---
 zeppelin-web-angular/angular.json                  |   2 +-
 zeppelin-web-angular/e2e/src/app.e2e-spec.ts       |   4 +-
 zeppelin-web-angular/e2e/src/app.po.ts             |   2 +-
 zeppelin-web-angular/package-lock.json             |  13 +
 zeppelin-web-angular/package.json                  |   3 +-
 .../helium-vis-example/src/json-vis.module.ts      |   2 +-
 .../projects/helium-vis-example/src/test.ts        |  15 +-
 .../projects/zeppelin-helium/src/test.ts           |  12 +-
 zeppelin-web-angular/src/app/app.component.html    |   4 +-
 .../src/app/pages/login/login.component.html       |  10 +-
 .../configuration/configuration.component.html     |  23 +-
 .../app/pages/workspace/home/home.component.html   |  50 +++-
 .../interpreter/interpreter.component.html         |  44 +--
 .../job-manager/job-manager.component.html         |  21 +-
 .../job-status/job-status.component.html           |   4 +-
 .../workspace/job-manager/job/job.component.html   |  42 +--
 .../notebook-repos/item/item.component.html        |  68 ++---
 .../notebook-repos/notebook-repos.component.html   |   8 +-
 .../notebook-search/notebook-search.component.html |  11 +-
 .../result-item/result-item.component.html         |   6 +-
 .../notebook/action-bar/action-bar.component.html  | 306 ++++++++++++---------
 .../add-paragraph/add-paragraph.component.html     |   3 +-
 .../interpreter-binding.component.html             |  25 +-
 .../note-form-block/note-form-block.component.html |  14 +-
 .../workspace/notebook/notebook.component.html     | 127 +++++----
 .../code-editor/code-editor.component.html         |  11 +-
 .../paragraph/control/control.component.html       |  85 +++---
 .../paragraph/footer/footer.component.html         |   4 +-
 .../notebook/paragraph/paragraph.component.html    | 183 ++++++------
 .../paragraph/progress/progress.component.html     |   5 +-
 .../revisions-comparator.component.html            |   3 +-
 .../elastic-input/elastic-input.component.html     |  20 +-
 .../notebook/sidebar/sidebar.component.html        |  27 +-
 .../published/paragraph/paragraph.component.html   |  19 +-
 .../dynamic-forms/dynamic-forms.component.html     |  67 ++---
 .../workspace/share/result/result.component.html   |  57 ++--
 .../about-zeppelin/about-zeppelin.component.html   |  16 +-
 .../folder-rename/folder-rename.component.html     |  13 +-
 .../src/app/share/header/header.component.html     |  37 +--
 .../app/share/node-list/node-list.component.html   | 213 +++++++-------
 .../share/note-create/note-create.component.html   |  14 +-
 .../share/note-import/note-import.component.html   |  17 +-
 .../share/note-rename/note-rename.component.html   |   2 +-
 .../src/app/share/note-toc/note-toc.component.html |   2 +-
 .../resize-handle/resize-handle.component.html     |  24 +-
 .../area-chart-visualization.component.html        |  11 +-
 .../bar-chart-visualization.component.html         |  11 +-
 .../scatter-setting/scatter-setting.component.html | 105 ++++---
 .../x-axis-setting/x-axis-setting.component.html   |  17 +-
 .../line-chart-visualization.component.html        |  33 ++-
 .../pie-chart-visualization.component.html         |   7 +-
 .../scatter-chart-visualization.component.html     |   7 +-
 .../table/table-visualization.component.html       | 159 ++++++-----
 zeppelin-web-angular/src/index.html                |  40 +--
 54 files changed, 1096 insertions(+), 932 deletions(-)

diff --git a/zeppelin-web-angular/angular.json 
b/zeppelin-web-angular/angular.json
index 095c3881d3..7cce21f83b 100644
--- a/zeppelin-web-angular/angular.json
+++ b/zeppelin-web-angular/angular.json
@@ -178,7 +178,7 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
+            "tsConfig": "e2e/tsconfig.json",
             "exclude": [
               "**/node_modules/**"
             ]
diff --git a/zeppelin-web-angular/e2e/src/app.e2e-spec.ts 
b/zeppelin-web-angular/e2e/src/app.e2e-spec.ts
index 1a4bd28e7e..fcdd911b5b 100644
--- a/zeppelin-web-angular/e2e/src/app.e2e-spec.ts
+++ b/zeppelin-web-angular/e2e/src/app.e2e-spec.ts
@@ -10,8 +10,8 @@
  * limitations under the License.
  */
 
-import { AppPage } from './app.po';
 import { browser, logging } from 'protractor';
+import { AppPage } from './app.po';
 
 describe('workspace-project App', () => {
   let page: AppPage;
@@ -29,7 +29,7 @@ describe('workspace-project App', () => {
     // Assert that there are no errors emitted from the browser
     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
     expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
+      level: logging.Level.SEVERE
     } as logging.Entry));
   });
 });
diff --git a/zeppelin-web-angular/e2e/src/app.po.ts 
b/zeppelin-web-angular/e2e/src/app.po.ts
index c6d1c5c065..a88016c116 100644
--- a/zeppelin-web-angular/e2e/src/app.po.ts
+++ b/zeppelin-web-angular/e2e/src/app.po.ts
@@ -14,7 +14,7 @@ import { browser, by, element } from 'protractor';
 
 export class AppPage {
   navigateTo() {
-    return browser.get(browser.baseUrl) as Promise<any>;
+    return browser.get(browser.baseUrl);
   }
 
   getTitleText() {
diff --git a/zeppelin-web-angular/package-lock.json 
b/zeppelin-web-angular/package-lock.json
index a163d7d176..1ca44e5d55 100644
--- a/zeppelin-web-angular/package-lock.json
+++ b/zeppelin-web-angular/package-lock.json
@@ -51,6 +51,7 @@
         "@types/mathjax": "^0.0.35",
         "@types/node": "~12.19.16",
         "@types/parse5": "^5.0.2",
+        "@types/webpack-env": "^1.18.8",
         "codelyzer": "^5.0.0",
         "dotenv": "^8.0.0",
         "https-proxy-agent": "^2.2.1",
@@ -2602,6 +2603,12 @@
       "integrity": 
"sha512-5JcVt1u5HDmlXkwOD2nslZVllBBc7HDuOICfiZah2Z0is8M8g+ddAEawbmd3VjedfDHBzxCaXLs07QEmb7y54g==",
       "dev": true
     },
+    "node_modules/@types/webpack-env": {
+      "version": "1.18.8",
+      "resolved": 
"https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.8.tgz";,
+      "integrity": 
"sha512-G9eAoJRMLjcvN4I08wB5I7YofOb/kaJNd5uoCMX+LbKXTPCF+ZIHuqTnFaK9Jz1rgs035f9JUPUhNFtqgucy/A==",
+      "dev": true
+    },
     "node_modules/@types/webpack-sources": {
       "version": "0.1.12",
       "resolved": 
"https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.12.tgz";,
@@ -24390,6 +24397,12 @@
       "integrity": 
"sha512-5JcVt1u5HDmlXkwOD2nslZVllBBc7HDuOICfiZah2Z0is8M8g+ddAEawbmd3VjedfDHBzxCaXLs07QEmb7y54g==",
       "dev": true
     },
+    "@types/webpack-env": {
+      "version": "1.18.8",
+      "resolved": 
"https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.8.tgz";,
+      "integrity": 
"sha512-G9eAoJRMLjcvN4I08wB5I7YofOb/kaJNd5uoCMX+LbKXTPCF+ZIHuqTnFaK9Jz1rgs035f9JUPUhNFtqgucy/A==",
+      "dev": true
+    },
     "@types/webpack-sources": {
       "version": "0.1.12",
       "resolved": 
"https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.12.tgz";,
diff --git a/zeppelin-web-angular/package.json 
b/zeppelin-web-angular/package.json
index bbbb1e285b..317766254b 100644
--- a/zeppelin-web-angular/package.json
+++ b/zeppelin-web-angular/package.json
@@ -12,7 +12,7 @@
     "build-project:vis": " ng build --project zeppelin-visualization",
     "build-project:helium": "ng build --project zeppelin-helium",
     "test": "ng test",
-    "lint": "ng lint",
+    "lint": "ng lint && prettier --check \"src/**/*.{ts,js,css,html}\"",
     "e2e": "ng e2e"
   },
   "engines": {
@@ -62,6 +62,7 @@
     "@types/mathjax": "^0.0.35",
     "@types/node": "~12.19.16",
     "@types/parse5": "^5.0.2",
+    "@types/webpack-env": "^1.18.8",
     "codelyzer": "^5.0.0",
     "dotenv": "^8.0.0",
     "https-proxy-agent": "^2.2.1",
diff --git 
a/zeppelin-web-angular/projects/helium-vis-example/src/json-vis.module.ts 
b/zeppelin-web-angular/projects/helium-vis-example/src/json-vis.module.ts
index 2578f26df3..caa81eabfd 100644
--- a/zeppelin-web-angular/projects/helium-vis-example/src/json-vis.module.ts
+++ b/zeppelin-web-angular/projects/helium-vis-example/src/json-vis.module.ts
@@ -10,9 +10,9 @@
  * limitations under the License.
  */
 
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { JsonVisComponent } from './json-vis.component';
-import { CommonModule } from '@angular/common';
 
 @NgModule({
   imports: [CommonModule],
diff --git a/zeppelin-web-angular/projects/helium-vis-example/src/test.ts 
b/zeppelin-web-angular/projects/helium-vis-example/src/test.ts
index 9be59f628d..f003001f58 100644
--- a/zeppelin-web-angular/projects/helium-vis-example/src/test.ts
+++ b/zeppelin-web-angular/projects/helium-vis-example/src/test.ts
@@ -12,21 +12,24 @@
 
 // This file is required by karma.conf.js and loads recursively all the .spec 
and framework files
 
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
+  platformBrowserDynamicTesting,
+  BrowserDynamicTestingModule
 } from '@angular/platform-browser-dynamic/testing';
-
-declare const require: any;
+// tslint:disable-next-line:no-import-side-effect
+import 'zone.js/dist/zone';
+// tslint:disable-next-line:no-import-side-effect
+import 'zone.js/dist/zone-testing';
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting()
 );
+
+declare const require: NodeJS.Require;
+
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.
diff --git a/zeppelin-web-angular/projects/zeppelin-helium/src/test.ts 
b/zeppelin-web-angular/projects/zeppelin-helium/src/test.ts
index 9be59f628d..393a159296 100644
--- a/zeppelin-web-angular/projects/zeppelin-helium/src/test.ts
+++ b/zeppelin-web-angular/projects/zeppelin-helium/src/test.ts
@@ -12,15 +12,17 @@
 
 // This file is required by karma.conf.js and loads recursively all the .spec 
and framework files
 
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
+  platformBrowserDynamicTesting,
+  BrowserDynamicTestingModule
 } from '@angular/platform-browser-dynamic/testing';
+// tslint:disable-next-line:no-import-side-effect
+import 'zone.js/dist/zone';
+// tslint:disable-next-line:no-import-side-effect
+import 'zone.js/dist/zone-testing';
 
-declare const require: any;
+declare const require: NodeJS.Require;
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
diff --git a/zeppelin-web-angular/src/app/app.component.html 
b/zeppelin-web-angular/src/app/app.component.html
index d101c77150..e4792e9322 100644
--- a/zeppelin-web-angular/src/app/app.component.html
+++ b/zeppelin-web-angular/src/app/app.component.html
@@ -11,5 +11,5 @@
   -->
 
 <router-outlet></router-outlet>
-<zeppelin-spin *ngIf="loading$| async">Getting Ticket Data ...</zeppelin-spin>
-<zeppelin-spin *ngIf="logout$| async">Logging out ...</zeppelin-spin>
+<zeppelin-spin *ngIf="loading$ | async">Getting Ticket Data ...</zeppelin-spin>
+<zeppelin-spin *ngIf="logout$ | async">Logging out ...</zeppelin-spin>
diff --git a/zeppelin-web-angular/src/app/pages/login/login.component.html 
b/zeppelin-web-angular/src/app/pages/login/login.component.html
index faa16b6718..d2eb18ba08 100644
--- a/zeppelin-web-angular/src/app/pages/login/login.component.html
+++ b/zeppelin-web-angular/src/app/pages/login/login.component.html
@@ -18,7 +18,7 @@
           <nz-form-label nzRequired>User Name</nz-form-label>
           <nz-form-control>
             <nz-input-group nzPrefixIcon="user">
-              <input nz-input [(ngModel)]="userName" placeholder="User Name" 
name="userName" required/>
+              <input nz-input [(ngModel)]="userName" placeholder="User Name" 
name="userName" required />
             </nz-input-group>
           </nz-form-control>
         </nz-form-item>
@@ -26,7 +26,7 @@
           <nz-form-label nzRequired>Password</nz-form-label>
           <nz-form-control>
             <nz-input-group nzPrefixIcon="lock">
-              <input nz-input [(ngModel)]="password" placeholder="Password" 
name="password" type="password" required/>
+              <input nz-input [(ngModel)]="password" placeholder="Password" 
name="password" type="password" required />
             </nz-input-group>
           </nz-form-control>
         </nz-form-item>
@@ -39,8 +39,10 @@
     </div>
     <div class="sidebar">
       <h1>Welcome to Zeppelin!</h1>
-      Zeppelin is web-based notebook that enables interactive data 
analytics.<br/>
-      You can make beautiful data-driven, interactive, collaborative document 
with SQL, code and even more!<br/>
+      Zeppelin is web-based notebook that enables interactive data analytics.
+      <br />
+      You can make beautiful data-driven, interactive, collaborative document 
with SQL, code and even more!
+      <br />
     </div>
   </div>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/configuration/configuration.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/configuration/configuration.component.html
index 6708f34520..b1add8b661 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/configuration/configuration.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/configuration/configuration.component.html
@@ -13,25 +13,22 @@
 <zeppelin-page-header [description]="configDesc" 
title="Configurations"></zeppelin-page-header>
 <ng-template #configDesc>
   Shows current configurations for Zeppelin Server.
-  <br>
+  <br />
   Note: For security reasons, some key/value pairs including passwords would 
not be shown.
 </ng-template>
 <div class="content">
-  <nz-table nzSize="small"
-            [nzData]="configEntries"
-            [nzFrontPagination]="false"
-            [nzShowPagination]="false">
+  <nz-table nzSize="small" [nzData]="configEntries" 
[nzFrontPagination]="false" [nzShowPagination]="false">
     <thead>
-    <tr>
-      <th>Name</th>
-      <th>Value</th>
-    </tr>
+      <tr>
+        <th>Name</th>
+        <th>Value</th>
+      </tr>
     </thead>
     <tbody>
-    <tr *ngFor="let data of configEntries">
-      <td>{{data[0]}}</td>
-      <td>{{data[1]}}</td>
-    </tr>
+      <tr *ngFor="let data of configEntries">
+        <td>{{ data[0] }}</td>
+        <td>{{ data[1] }}</td>
+      </tr>
     </tbody>
   </nz-table>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/home/home.component.html 
b/zeppelin-web-angular/src/app/pages/workspace/home/home.component.html
index 2c837eb38e..82e39adaaa 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/home/home.component.html
+++ b/zeppelin-web-angular/src/app/pages/workspace/home/home.component.html
@@ -15,27 +15,53 @@
     <h1>
       Welcome to Zeppelin!
     </h1>
-    Zeppelin is web-based notebook that enables interactive data 
analytics.<br/>
-    You can make beautiful data-driven, interactive, collaborative document 
with SQL, code and even more!<br/>
+    Zeppelin is web-based notebook that enables interactive data analytics.
+    <br />
+    You can make beautiful data-driven, interactive, collaborative document 
with SQL, code and even more!
+    <br />
   </div>
   <div nz-row class="more-info" [nzGutter]="48">
     <div nz-col [nzSm]="24" [nzLg]="8">
-      <h3>Notebook <a class="refresh-note" nz-tooltip nzTooltipTitle="Reload 
notes from storage" (click)="reloadNoteList()"><i nz-icon nzType="sync" 
nzTheme="outline" [nzSpin]="loading"></i></a></h3>
+      <h3>
+        Notebook
+        <a class="refresh-note" nz-tooltip nzTooltipTitle="Reload notes from 
storage" (click)="reloadNoteList()">
+          <i nz-icon nzType="sync" nzTheme="outline" [nzSpin]="loading"></i>
+        </a>
+      </h3>
       <zeppelin-node-list></zeppelin-node-list>
     </div>
     <div nz-col [nzSm]="24" [nzLg]="12">
       <h3>Help</h3>
-      Get started with <a style="text-decoration: none;" target="_blank"
-                          
href="http://zeppelin.apache.org/docs/{{ticketService.version}}/index.html";>Zeppelin
-      documentation</a><br/>
+      Get started with
+      <a
+        style="text-decoration: none;"
+        target="_blank"
+        href="http://zeppelin.apache.org/docs/{{ ticketService.version 
}}/index.html"
+      >
+        Zeppelin documentation
+      </a>
+      <br />
 
       <h3>Community</h3>
-      Please feel free to help us to improve Zeppelin, <br/>
-      Any contribution are welcome!<br/><br/>
-      <a href="http://zeppelin.apache.org/community.html"; target="_blank"><i 
nz-icon nzType="mail"></i> Mailing list</a><br/>
-      <a 
href="https://issues.apache.org/jira/projects/ZEPPELIN/issues/filter=allopenissues";
 target="_blank"><i nz-icon nzType="exception"></i> Issues
-        tracking</a><br/>
-      <a href="https://github.com/apache/zeppelin"; target="_blank"><i nz-icon 
nzType="github"></i> Github</a>
+      Please feel free to help us to improve Zeppelin,
+      <br />
+      Any contribution are welcome!
+      <br />
+      <br />
+      <a href="http://zeppelin.apache.org/community.html"; target="_blank">
+        <i nz-icon nzType="mail"></i>
+        Mailing list
+      </a>
+      <br />
+      <a 
href="https://issues.apache.org/jira/projects/ZEPPELIN/issues/filter=allopenissues";
 target="_blank">
+        <i nz-icon nzType="exception"></i>
+        Issues tracking
+      </a>
+      <br />
+      <a href="https://github.com/apache/zeppelin"; target="_blank">
+        <i nz-icon nzType="github"></i>
+        Github
+      </a>
     </div>
   </div>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/interpreter/interpreter.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/interpreter/interpreter.component.html
index 61a81f543f..30d236cce0 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/interpreter/interpreter.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/interpreter/interpreter.component.html
@@ -10,16 +10,19 @@
   ~ limitations under the License.
   -->
 
-<zeppelin-page-header
-  title="Interpreters"
-  [description]="interpreterDescription"
-  [extra]="headerExtra"
->
+<zeppelin-page-header title="Interpreters" 
[description]="interpreterDescription" [extra]="headerExtra">
   <ng-template #interpreterDescription>
-    Manage interpreters settings. You can create / edit / remove settings. 
Note can bind / unbind these interpreter settings.
+    Manage interpreters settings. You can create / edit / remove settings. 
Note can bind / unbind these interpreter
+    settings.
   </ng-template>
   <nz-input-group [nzPrefix]="prefixSearch">
-    <input [(ngModel)]="searchInterpreter" 
(ngModelChange)="onSearchChange($event)" class="search-input" nz-input 
placeholder="Search interpreters..." />
+    <input
+      [(ngModel)]="searchInterpreter"
+      (ngModelChange)="onSearchChange($event)"
+      class="search-input"
+      nz-input
+      placeholder="Search interpreters..."
+    />
   </nz-input-group>
   <ng-template #prefixSearch><i nz-icon nzType="search" 
nzTheme="outline"></i></ng-template>
   <ng-template #headerExtra>
@@ -27,22 +30,25 @@
       class="repository-trigger"
       nz-button
       [nzType]="showRepository ? 'primary' : 'default'"
-      (click)="triggerRepository()">
+      (click)="triggerRepository()"
+    >
       <i nz-icon nzType="database" nzTheme="outline"></i>
       Repository
     </button>
   </ng-template>
-  <div [@collapseMotion]="showRepository ? 'expanded' : 'collapsed' ">
+  <div [@collapseMotion]="showRepository ? 'expanded' : 'collapsed'">
     <nz-divider nzType="horizontal"></nz-divider>
     <h2>Repositories</h2>
     <p>Available repository lists. These repositories are used to resolve 
external dependencies of interpreter.</p>
-    <nz-tag *ngFor="let repo of repositories"
+    <nz-tag
+      *ngFor="let repo of repositories"
       class="repo-item"
       [nz-tooltip]="repo.url"
       nzTooltipPlacement="topLeft"
       [nzMode]="['central', 'local'].indexOf(repo.id) === -1 ? 'closeable' : 
'default'"
-      (nzOnClose)="$event.preventDefault(); removeRepository(repo)">
-      {{repo.id}}
+      (nzOnClose)="$event.preventDefault(); removeRepository(repo)"
+    >
+      {{ repo.id }}
     </nz-tag>
     <nz-tag class="editable-tag" (click)="createRepository()">
       <i nz-icon nzType="plus"></i>
@@ -50,20 +56,14 @@
   </div>
 </zeppelin-page-header>
 <div class="content">
-  <nz-card
-    *ngIf="!showCreateSetting"
-    (click)="showCreateSetting = true"
-    class="create-interpreter" nzHoverable>
+  <nz-card *ngIf="!showCreateSetting" (click)="showCreateSetting = true" 
class="create-interpreter" nzHoverable>
     <i nz-icon nzType="plus"></i>
     Create
   </nz-card>
-  <zeppelin-interpreter-item
-    *ngIf="showCreateSetting"
-    mode="create">
-  </zeppelin-interpreter-item>
+  <zeppelin-interpreter-item *ngIf="showCreateSetting" 
mode="create"></zeppelin-interpreter-item>
   <zeppelin-interpreter-item
     *ngFor="let item of filteredInterpreterSettings"
     mode="view"
-    [interpreter]="item">
-  </zeppelin-interpreter-item>
+    [interpreter]="item"
+  ></zeppelin-interpreter-item>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/job-manager/job-manager.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/job-manager/job-manager.component.html
index c8bfc569b9..beb4b956ab 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/job-manager/job-manager.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/job-manager/job-manager.component.html
@@ -10,10 +10,7 @@
   ~ limitations under the License.
   -->
 
-<zeppelin-page-header
-  title="Job"
-  [description]="jobManagerDescription"
-  [divider]="true">
+<zeppelin-page-header title="Job" [description]="jobManagerDescription" 
[divider]="true">
   <ng-template #jobManagerDescription>
     You can monitor the status of notebook and navigate to note or paragraph.
   </ng-template>
@@ -21,7 +18,7 @@
     <nz-form-item>
       <nz-form-control>
         <nz-input-group [nzPrefix]="prefixSearch">
-          <input formControlName="noteName" nz-input placeholder="Search 
jobs..."/>
+          <input formControlName="noteName" nz-input placeholder="Search 
jobs..." />
         </nz-input-group>
         <ng-template #prefixSearch>
           <i nz-icon nzType="search" nzTheme="outline"></i>
@@ -53,16 +50,18 @@
     </nz-form-item>
     <nz-form-item class="status-legend">
       <nz-form-control>
-        <zeppelin-job-manager-job-status *ngFor="let item of jobStatusKeys" 
[status]="item" [showText]="true">
-        </zeppelin-job-manager-job-status>
+        <zeppelin-job-manager-job-status
+          *ngFor="let item of jobStatusKeys"
+          [status]="item"
+          [showText]="true"
+        ></zeppelin-job-manager-job-status>
       </nz-form-control>
     </nz-form-item>
   </form>
 </zeppelin-page-header>
 <div class="content">
   <nz-card *ngIf="loading; else jobs">
-    <nz-skeleton [nzTitle]="false" [nzLoading]="true" [nzActive]="true">
-    </nz-skeleton>
+    <nz-skeleton [nzTitle]="false" [nzLoading]="true" 
[nzActive]="true"></nz-skeleton>
   </nz-card>
 
   <ng-template #jobs>
@@ -71,8 +70,8 @@
       [note]="item"
       [highlight]="filterString"
       (start)="onStart($event)"
-      (stop)="onStop($event)">
-    </zeppelin-job-manager-job>
+      (stop)="onStop($event)"
+    ></zeppelin-job-manager-job>
     <nz-empty *ngIf="filteredJobs.length === 0" nzNotFoundContent="No Job 
found"></nz-empty>
   </ng-template>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/job-manager/job-status/job-status.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/job-manager/job-status/job-status.component.html
index 2bd375de55..ac946054c2 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/job-manager/job-status/job-status.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/job-manager/job-status/job-status.component.html
@@ -13,5 +13,5 @@
 <nz-badge
   [class.ready]="status === jobStatus.READY"
   [nzText]="showText ? status : null"
-  [nzStatus]="statusMap[status]">
-</nz-badge>
+  [nzStatus]="statusMap[status]"
+></nz-badge>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/job-manager/job/job.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/job-manager/job/job.component.html
index 2b39717b71..284b2cc725 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/job-manager/job/job.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/job-manager/job/job.component.html
@@ -12,38 +12,40 @@
 
 <nz-card class="job-item">
   <div class="job-title">
-    <i nz-icon
-      class="note-icon"
-      [nzType]="icon"
-      nzTheme="outline">
-    </i>
-    <a [routerLink]="['/', 'notebook', note.noteId]" 
[innerHTML]="note.noteName | nzHighlight: highlight: 'gi': 
'mark-highlight'"></a> -
-    <span class="interpreter"
-          [class.unset]="!note.interpreter">
-      {{note.interpreter || 'interpreter is not set'}}
+    <i nz-icon class="note-icon" [nzType]="icon" nzTheme="outline"></i>
+    <a
+      [routerLink]="['/', 'notebook', note.noteId]"
+      [innerHTML]="note.noteName | nzHighlight: 
highlight:'gi':'mark-highlight'"
+    ></a>
+    -
+    <span class="interpreter" [class.unset]="!note.interpreter">
+      {{ note.interpreter || 'interpreter is not set' }}
     </span>
     <span class="right-tools">
-      <small>{{relativeTime}}</small>
-      <span>{{note.isRunningJob ? 'RUNNING' : 'READY'}}</span>
-      <span *ngIf="note.isRunningJob">{{progress | percent: '1.0-0'}}</span>
-      <i class="job-control-btn"
+      <small>{{ relativeTime }}</small>
+      <span>{{ note.isRunningJob ? 'RUNNING' : 'READY' }}</span>
+      <span *ngIf="note.isRunningJob">{{ progress | percent: '1.0-0' }}</span>
+      <i
+        class="job-control-btn"
         nz-icon
         nzTheme="outline"
         [class.running]="note.isRunningJob"
         [nz-tooltip]="note.isRunningJob ? 'Stop All Paragraphs' : 'Start All 
Paragraphs'"
         [nzType]="note.isRunningJob ? 'pause' : 'caret-right'"
-        (click)="note.isRunningJob ? onStopClick() : onStartClick()"></i>
+        (click)="note.isRunningJob ? onStopClick() : onStartClick()"
+      ></i>
     </span>
   </div>
   <div>
-    <a *ngFor="let item of note.paragraphs"
+    <a
+      *ngFor="let item of note.paragraphs"
       [nz-tooltip]="item.name + ' is ' + item.status"
       nzTooltipPlacement="topLeft"
       [nzOverlayStyle]="{ 'margin-left': '-14px' }"
       [routerLink]="['/', 'notebook', note.noteId]"
-      [queryParams]="{paragraph: item.id}">
-      <zeppelin-job-manager-job-status [status]="item.status">
-      </zeppelin-job-manager-job-status>
+      [queryParams]="{ paragraph: item.id }"
+    >
+      <zeppelin-job-manager-job-status 
[status]="item.status"></zeppelin-job-manager-job-status>
     </a>
   </div>
 </nz-card>
@@ -54,5 +56,5 @@
   [nzShowInfo]="false"
   nzStatus="active"
   nzSize="small"
-  nzStrokeLinecap="square">
-</nz-progress>
+  nzStrokeLinecap="square"
+></nz-progress>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.html
index 3f4875a5bc..125c2b3f8d 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.html
@@ -10,31 +10,20 @@
   ~ limitations under the License.
   -->
 
-<nz-card class="repo-item"
-         [class.edit]="editMode"
-         [nzTitle]="repo.name"
-         [nzExtra]="extraTemplate">
+<nz-card class="repo-item" [class.edit]="editMode" [nzTitle]="repo.name" 
[nzExtra]="extraTemplate">
   <ng-template #extraTemplate>
     <div class="extra-wrap" *ngIf="!editMode">
-      <button nz-button
-              nzSize="small"
-              (click)="triggerEditMode()">
+      <button nz-button nzSize="small" (click)="triggerEditMode()">
         <i nz-icon nzType="edit"></i>
         Edit
       </button>
     </div>
     <div class="extra-wrap" *ngIf="editMode">
-      <button nz-button
-              nzType="primary"
-              nzSize="small"
-              [disabled]="!settingFormArray.valid"
-              (click)="save()">
+      <button nz-button nzType="primary" nzSize="small" 
[disabled]="!settingFormArray.valid" (click)="save()">
         <i nz-icon nzType="save" nzTheme="outline"></i>
         Save
       </button>
-      <button nz-button
-              nzSize="small"
-              (click)="cancel()">
+      <button nz-button nzSize="small" (click)="cancel()">
         <i nz-icon nzType="close" nzTheme="outline"></i>
         Cancel
       </button>
@@ -44,36 +33,33 @@
   <form nz-form>
     <nz-table nzTemplateMode nzSize="small">
       <thead>
-      <tr>
-        <th>Name</th>
-        <th>Value</th>
-      </tr>
+        <tr>
+          <th>Name</th>
+          <th>Value</th>
+        </tr>
       </thead>
       <tbody>
-      <tr *ngFor="let setting of repo.settings; index as i">
-        <td>{{setting.name}}</td>
-        <ng-container *ngIf="!editMode">
-          <td>{{setting.selected}}</td>
-        </ng-container>
-        <ng-container *ngIf="editMode">
-          <td>
-            <input *ngIf="setting.type === 'INPUT'"
-                   nzSize="small"
-                   nz-input
-                   [formControl]="settingFormArray.controls[i]">
+        <tr *ngFor="let setting of repo.settings; index as i">
+          <td>{{ setting.name }}</td>
+          <ng-container *ngIf="!editMode">
+            <td>{{ setting.selected }}</td>
+          </ng-container>
+          <ng-container *ngIf="editMode">
+            <td>
+              <input
+                *ngIf="setting.type === 'INPUT'"
+                nzSize="small"
+                nz-input
+                [formControl]="settingFormArray.controls[i]"
+              />
 
-            <nz-select *ngIf="setting.type === 'DROPDOWN'" 
[formControl]="settingFormArray.controls[i]">
-              <nz-option
-                *ngFor="let option of setting.value"
-                [nzLabel]="option"
-                [nzValue]="option">
-              </nz-option>
-            </nz-select>
-          </td>
-        </ng-container>
-      </tr>
+              <nz-select *ngIf="setting.type === 'DROPDOWN'" 
[formControl]="settingFormArray.controls[i]">
+                <nz-option *ngFor="let option of setting.value" 
[nzLabel]="option" [nzValue]="option"></nz-option>
+              </nz-select>
+            </td>
+          </ng-container>
+        </tr>
       </tbody>
     </nz-table>
   </form>
-
 </nz-card>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/notebook-repos.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/notebook-repos.component.html
index c43f5012ea..1a5dfe7513 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/notebook-repos.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/notebook-repos.component.html
@@ -9,8 +9,7 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
-<zeppelin-page-header title="Notebook Repository" 
[description]="notebookReposDescription">
-</zeppelin-page-header>
+<zeppelin-page-header title="Notebook Repository" 
[description]="notebookReposDescription"></zeppelin-page-header>
 <ng-template #notebookReposDescription>
   Manage your Notebook Repositories' settings.
 </ng-template>
@@ -18,7 +17,6 @@
   <zeppelin-notebook-repo-item
     *ngFor="let repo of repositories"
     (repoChange)="updateRepoSetting($event)"
-    [repo]="repo">
-
-  </zeppelin-notebook-repo-item>
+    [repo]="repo"
+  ></zeppelin-notebook-repo-item>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook-search/notebook-search.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook-search/notebook-search.component.html
index 8354477d52..3e1612a1e0 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook-search/notebook-search.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook-search/notebook-search.component.html
@@ -10,13 +10,14 @@
   ~ limitations under the License.
   -->
 <div class="main">
-  <zeppelin-notebook-search-result-item *ngFor="let item of results"
-                                        [result]="item">
-  </zeppelin-notebook-search-result-item>
+  <zeppelin-notebook-search-result-item
+    *ngFor="let item of results"
+    [result]="item"
+  ></zeppelin-notebook-search-result-item>
 
   <div *ngIf="hasNoResults" class="search-no-result-found">
     <i nz-icon nzType="search" nzTheme="outline"></i>
-    We couldn't find any notebook matching <strong>'{{searchTerm}}'</strong>
+    We couldn't find any notebook matching
+    <strong>'{{ searchTerm }}'</strong>
   </div>
 </div>
-
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.html
index 14d6ee6bac..19e3ccb6ba 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.html
@@ -12,11 +12,11 @@
 
 <nz-card [nzTitle]="titleTemplateRef">
   <ng-template #titleTemplateRef>
-    <a [routerLink]="routerLink" 
[queryParams]="queryParams">{{displayName}}</a>
+    <a [routerLink]="routerLink" [queryParams]="queryParams">{{ displayName 
}}</a>
   </ng-template>
   <zeppelin-code-editor
     [style.height.px]="height"
     [nzEditorOption]="editorOption"
-    (nzEditorInitialized)="initializedEditor($event)">
-  </zeppelin-code-editor>
+    (nzEditorInitialized)="initializedEditor($event)"
+  ></zeppelin-code-editor>
 </nz-card>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
index e7026d6873..ffea598632 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
@@ -12,142 +12,166 @@
 
 <div class="bar" [class.simple]="looknfeel !== 'default'">
   <div class="title">
-    <zeppelin-elastic-input nz-tooltip
-                            [nzTooltipTitle]="note.path"
-                            [readonly]="revisionView"
-                            [value]="note.name"
-                            
(valueUpdate)="updateNoteName($event)"></zeppelin-elastic-input>
+    <zeppelin-elastic-input
+      nz-tooltip
+      [nzTooltipTitle]="note.path"
+      [readonly]="revisionView"
+      [value]="note.name"
+      (valueUpdate)="updateNoteName($event)"
+    ></zeppelin-elastic-input>
   </div>
   <div class="control">
     <nz-button-group nzSize="small">
-      <button nz-button
-              nz-popconfirm
-              nzPopconfirmTitle="Run all paragraphs?"
-              nz-tooltip
-              nzTooltipTitle="Run all paragraphs"
-              (nzOnConfirm)="runAllParagraphs()"
-              [disabled]="revisionView || isNoteParagraphRunning">
+      <button
+        nz-button
+        nz-popconfirm
+        nzPopconfirmTitle="Run all paragraphs?"
+        nz-tooltip
+        nzTooltipTitle="Run all paragraphs"
+        (nzOnConfirm)="runAllParagraphs()"
+        [disabled]="revisionView || isNoteParagraphRunning"
+      >
         <i nz-icon nzType="play-circle" nzTheme="outline"></i>
       </button>
-      <button nz-button
-              nz-tooltip
-              nzTooltipTitle="Show/hide the code"
-              (click)="toggleAllEditor()"
-              *ngIf="!viewOnly"
-              [disabled]="revisionView">
+      <button
+        nz-button
+        nz-tooltip
+        nzTooltipTitle="Show/hide the code"
+        (click)="toggleAllEditor()"
+        *ngIf="!viewOnly"
+        [disabled]="revisionView"
+      >
         <i nz-icon [nzType]="editorHide ? 'fullscreen' : 'fullscreen-exit'" 
nzTheme="outline"></i>
       </button>
-      <button nz-button
-              nz-tooltip
-              nzTooltipTitle="Show/hide the output"
-              (click)="toggleAllTable()"
-              *ngIf="!viewOnly"
-              [disabled]="revisionView">
+      <button
+        nz-button
+        nz-tooltip
+        nzTooltipTitle="Show/hide the output"
+        (click)="toggleAllTable()"
+        *ngIf="!viewOnly"
+        [disabled]="revisionView"
+      >
         <i nz-icon [nzType]="tableHide ? 'book' : 'read'" 
nzTheme="outline"></i>
       </button>
-      <button nz-button
-              nz-popconfirm
-              nzPopconfirmTitle="Do you want to clear all output?"
-              nz-tooltip
-              nzTooltipTitle="Clear all output"
-              *ngIf="!viewOnly"
-              [disabled]="revisionView"
-              (nzOnConfirm)="clearAllParagraphOutput()">
+      <button
+        nz-button
+        nz-popconfirm
+        nzPopconfirmTitle="Do you want to clear all output?"
+        nz-tooltip
+        nzTooltipTitle="Clear all output"
+        *ngIf="!viewOnly"
+        [disabled]="revisionView"
+        (nzOnConfirm)="clearAllParagraphOutput()"
+      >
         <i nz-icon nzType="fire" nzTheme="outline"></i>
       </button>
-      <button nz-button
-              nz-tooltip
-              nzTooltipTitle="Clone this note"
-              (click)="cloneNote()"
-              *ngIf="!viewOnly"
-              [disabled]="revisionView">
+      <button
+        nz-button
+        nz-tooltip
+        nzTooltipTitle="Clone this note"
+        (click)="cloneNote()"
+        *ngIf="!viewOnly"
+        [disabled]="revisionView"
+      >
         <i nz-icon nzType="copy" nzTheme="outline"></i>
       </button>
-      <button nz-button
-              nz-tooltip
-              nzTooltipTitle="Export this note"
-              (click)="exportNote()"
-              *ngIf="!viewOnly"
-              [disabled]="revisionView">
+      <button
+        nz-button
+        nz-tooltip
+        nzTooltipTitle="Export this note"
+        (click)="exportNote()"
+        *ngIf="!viewOnly"
+        [disabled]="revisionView"
+      >
         <i nz-icon nzType="download" nzTheme="outline"></i>
       </button>
-      <button nz-button
-              nz-tooltip
-              nzTooltipTitle="Reload from note file"
-              (click)="reloadNote()"
-              *ngIf="!viewOnly"
-              [disabled]="revisionView">
+      <button
+        nz-button
+        nz-tooltip
+        nzTooltipTitle="Reload from note file"
+        (click)="reloadNote()"
+        *ngIf="!viewOnly"
+        [disabled]="revisionView"
+      >
         <i nz-icon nzType="reload" nzTheme="outline"></i>
       </button>
       <ng-container *ngIf="principal && principal !== 'anonymous' && 
!viewOnly">
         <ng-container [ngSwitch]="note.config.personalizedMode">
-          <button *ngSwitchCase="'true'"
-                  nz-tooltip
-                  nzTooltipTitle="Switch to collaboration mode"
-                  [disabled]="revisionView || !isOwner || 
isNoteParagraphRunning"
-                  nz-button
-                  nzType="primary"
-                  (click)="toggleNotePersonalizedMode()">
+          <button
+            *ngSwitchCase="'true'"
+            nz-tooltip
+            nzTooltipTitle="Switch to collaboration mode"
+            [disabled]="revisionView || !isOwner || isNoteParagraphRunning"
+            nz-button
+            nzType="primary"
+            (click)="toggleNotePersonalizedMode()"
+          >
             <i nz-icon nzType="user" nzTheme="outline"></i>
           </button>
-          <button *ngSwitchDefault
-                  nz-tooltip
-                  nzTooltipTitle="Switch to personal mode"
-                  nz-button
-                  [disabled]="revisionView || !isOwner || 
isNoteParagraphRunning"
-                  (click)="toggleNotePersonalizedMode()">
+          <button
+            *ngSwitchDefault
+            nz-tooltip
+            nzTooltipTitle="Switch to personal mode"
+            nz-button
+            [disabled]="revisionView || !isOwner || isNoteParagraphRunning"
+            (click)="toggleNotePersonalizedMode()"
+          >
             <i nz-icon nzType="team" nzTheme="outline"></i>
           </button>
         </ng-container>
       </ng-container>
     </nz-button-group>
     <nz-button-group nzSize="small" *ngIf="isRevisionSupported">
-      <button nz-button
-              nz-popover
-              *ngIf="!viewOnly"
-              [disabled]="revisionView"
-              [(nzPopoverVisible)]="commitVisible"
-              [nzPopoverPlacement]="'right'"
-              [nzPopoverContent]="commitTpl"
-              nzPopoverTrigger="click">
+      <button
+        nz-button
+        nz-popover
+        *ngIf="!viewOnly"
+        [disabled]="revisionView"
+        [(nzPopoverVisible)]="commitVisible"
+        [nzPopoverPlacement]="'right'"
+        [nzPopoverContent]="commitTpl"
+        nzPopoverTrigger="click"
+      >
         <i nz-icon nzType="to-top" nzTheme="outline"></i>
       </button>
       <ng-template #commitTpl>
         <nz-input-group nzSearch nzSize="small" [nzAddOnAfter]="suffixButton">
-          <input nzSize="small" autofocus nz-input #inputElement 
placeholder="commit message">
+          <input nzSize="small" autofocus nz-input #inputElement 
placeholder="commit message" />
         </nz-input-group>
         <ng-template #suffixButton>
-          <button nz-button
-                  nzSize="small"
-                  nzType="primary"
-                  (click)="checkpointNote(inputElement.value,$event)">commit
+          <button nz-button nzSize="small" nzType="primary" 
(click)="checkpointNote(inputElement.value, $event)">
+            commit
           </button>
         </ng-template>
       </ng-template>
-      <button nz-button
-              nz-tooltip
-              *ngIf="!viewOnly"
-              [disabled]="!revisionView"
-              nzTooltipTitle="Set revision"
-              (click)="setNoteRevision()">
+      <button
+        nz-button
+        nz-tooltip
+        *ngIf="!viewOnly"
+        [disabled]="!revisionView"
+        nzTooltipTitle="Set revision"
+        (click)="setNoteRevision()"
+      >
         <i nz-icon nzType="rollback" nzTheme="outline"></i>
       </button>
-      <button nz-button
-              nz-tooltip
-              nzTooltipTitle="Compare revisions"
-              [nzType]="activatedExtension === 'revisions'? 'primary' : 
'default'"
-              (click)="toggleExtension('revisions')">
+      <button
+        nz-button
+        nz-tooltip
+        nzTooltipTitle="Compare revisions"
+        [nzType]="activatedExtension === 'revisions' ? 'primary' : 'default'"
+        (click)="toggleExtension('revisions')"
+      >
         <i nz-icon nzType="swap" nzTheme="outline"></i>
       </button>
       <button nz-button nz-dropdown [nzDropdownMenu]="revisionsMenu" 
nzTrigger="click">
-        {{currentRevision}}
+        {{ currentRevision }}
       </button>
       <nz-dropdown-menu #revisionsMenu="nzDropdownMenu">
         <ul nz-menu>
           <li nz-menu-item *ngFor="let r of noteRevisions" 
(click)="visitRevision(r)">
-            <strong>{{r.message}}</strong>
+            <strong>{{ r.message }}</strong>
             <nz-divider nzType="vertical"></nz-divider>
-            <em class="font-sm opacity-05"> {{(r.time * 1000 | date: 'MMMM dd 
yyyy, h:mm:ss a') || 'Current'}}</em>
+            <em class="font-sm opacity-05">{{ (r.time * 1000 | date: 'MMMM dd 
yyyy, h:mm:ss a') || 'Current' }}</em>
           </li>
         </ul>
       </nz-dropdown-menu>
@@ -158,71 +182,85 @@
       </button>
     </nz-button-group>
     <nz-button-group nzSize="small" *ngIf="!viewOnly">
-      <button nz-button
-              nz-popconfirm
-              nzPopconfirmTitle="Remove this note permanently?"
-              *ngIf="isTrash"
-              [disabled]="isNoteParagraphRunning"
-              (nzOnConfirm)="deleteNote()">
+      <button
+        nz-button
+        nz-popconfirm
+        nzPopconfirmTitle="Remove this note permanently?"
+        *ngIf="isTrash"
+        [disabled]="isNoteParagraphRunning"
+        (nzOnConfirm)="deleteNote()"
+      >
         <i nz-icon nzType="delete" nzTheme="outline"></i>
       </button>
-      <button nz-button
-              nz-popconfirm
-              nzPopconfirmTitle="Move this note to trash?"
-              *ngIf="!isTrash"
-              [disabled]="isNoteParagraphRunning"
-              (nzOnConfirm)="moveNoteToTrash()">
+      <button
+        nz-button
+        nz-popconfirm
+        nzPopconfirmTitle="Move this note to trash?"
+        *ngIf="!isTrash"
+        [disabled]="isNoteParagraphRunning"
+        (nzOnConfirm)="moveNoteToTrash()"
+      >
         <i nz-icon nzType="delete" nzTheme="outline"></i>
       </button>
     </nz-button-group>
     <nz-button-group nzSize="small" *ngIf="collaborativeMode">
-      <button nz-button
-              nz-tooltip
-              [nzType]="collaborativeModeUsers.length? 'primary' : 'default'"
-              [nzTooltipTitle]="'Users who watch this note:'+ 
collaborativeModeUsers.join(', ')">
+      <button
+        nz-button
+        nz-tooltip
+        [nzType]="collaborativeModeUsers.length ? 'primary' : 'default'"
+        [nzTooltipTitle]="'Users who watch this note:' + 
collaborativeModeUsers.join(', ')"
+      >
         <i nz-icon nzType="eye" nzTheme="outline"></i>
-        {{collaborativeModeUsers.length}}</button>
+        {{ collaborativeModeUsers.length }}
+      </button>
     </nz-button-group>
     <nz-button-group nzSize="small" 
*ngIf="note.config.isZeppelinNotebookCronEnable && !viewOnly">
-      <button nz-button
-              nz-dropdown
-              nz-tooltip
-              nzSize="small"
-              nzTooltipTitle="Run scheduler"
-              nzTrigger="click"
-              [nzDropdownMenu]="menu"
-              [disabled]="isTrash || revisionView"
-              [nzType]="note.config.cron ? 'primary' : (note.info.cron ? 
'danger' : 'default')">
+      <button
+        nz-button
+        nz-dropdown
+        nz-tooltip
+        nzSize="small"
+        nzTooltipTitle="Run scheduler"
+        nzTrigger="click"
+        [nzDropdownMenu]="menu"
+        [disabled]="isTrash || revisionView"
+        [nzType]="note.config.cron ? 'primary' : note.info.cron ? 'danger' : 
'default'"
+      >
         <i nz-icon nzType="clock-circle" nzTheme="outline"></i>
-        {{getCronOptionNameFromValue}}
+        {{ getCronOptionNameFromValue }}
       </button>
       <nz-dropdown-menu #menu="nzDropdownMenu">
         <div class="ant-dropdown-menu padding-sm scheduler">
-          Run note with cron scheduler.
-          Either choose from preset or write your own
-          <a 
href="https://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/tutorial-lesson-06.html";
-             target="_blank">
+          Run note with cron scheduler. Either choose from preset or write 
your own
+          <a
+            
href="https://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/tutorial-lesson-06.html";
+            target="_blank"
+          >
             cron expression
           </a>
           .
           <div>
             <span>- Preset</span>
-            <a class="cron-preset"
-               [class.selected]="cr.value === note.config.cron"
-               *ngFor="let cr of cronOption"
-               (click)="setCronScheduler(cr.value)">{{cr.name}}</a>
+            <a
+              class="cron-preset"
+              [class.selected]="cr.value === note.config.cron"
+              *ngFor="let cr of cronOption"
+              (click)="setCronScheduler(cr.value)"
+            >
+              {{ cr.name }}
+            </a>
           </div>
           <div>
             <span>- Preset</span>
-            <input nz-input nzSize="small" [(ngModel)]="note.config.cron">
+            <input nz-input nzSize="small" [(ngModel)]="note.config.cron" />
             <p *ngIf="note.info.cron">
-              {{note.info.cron}}
+              {{ note.info.cron }}
             </p>
           </div>
           <div>
-            <label nz-checkbox
-                   [ngModel]="note.config.releaseresource"
-                   (ngModelChange)="setReleaseResource($event)">After 
execution stop the interpreter</label>
+            <label nz-checkbox [ngModel]="note.config.releaseresource" 
(ngModelChange)="setReleaseResource($event)">
+              After execution stop the interpreter
+            </label>
           </div>
         </div>
       </nz-dropdown-menu>
@@ -234,18 +272,18 @@
         <i nz-icon nzType="info-circle" nzTheme="outline"></i>
       </button>
       <button nz-button nzNoAnimation *ngIf="!revisionView" 
(click)="toggleExtension('interpreter')">
-        <i nz-icon nzType="setting" [nzTheme]="activatedExtension 
==='interpreter' ? 'fill' : 'outline'"></i>
+        <i nz-icon nzType="setting" [nzTheme]="activatedExtension === 
'interpreter' ? 'fill' : 'outline'"></i>
       </button>
       <button nz-button nzNoAnimation (click)="togglePermissions()">
         <i nz-icon nzType="lock" [nzTheme]="activatedExtension === 
'permissions' ? 'fill' : 'outline'"></i>
       </button>
-      <button [nzDropdownMenu]="menu" nz-button nzNoAnimation nzSize="small" 
nz-dropdown
-              nzTrigger="click">{{note.config.looknfeel}}
+      <button [nzDropdownMenu]="menu" nz-button nzNoAnimation nzSize="small" 
nz-dropdown nzTrigger="click">
+        {{ note.config.looknfeel }}
         <i nz-icon nzType="down"></i>
       </button>
       <nz-dropdown-menu #menu="nzDropdownMenu">
         <ul nz-menu>
-          <li nz-menu-item *ngFor="let lf of lfOption" 
(click)="setLookAndFeel(lf)">{{lf}}</li>
+          <li nz-menu-item *ngFor="let lf of lfOption" 
(click)="setLookAndFeel(lf)">{{ lf }}</li>
         </ul>
       </nz-dropdown-menu>
     </nz-button-group>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/add-paragraph/add-paragraph.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/add-paragraph/add-paragraph.component.html
index 76d6475a7c..5c4cf37445 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/add-paragraph/add-paragraph.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/add-paragraph/add-paragraph.component.html
@@ -12,6 +12,7 @@
 
 <div class="add-paragraph">
   <a class="inner" (click)="clickAdd()" [class.disabled]="disabled">
-    <i nz-icon nzType="plus" nzTheme="outline"></i> Add Paragraph
+    <i nz-icon nzType="plus" nzTheme="outline"></i>
+    Add Paragraph
   </a>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/interpreter-binding/interpreter-binding.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/interpreter-binding/interpreter-binding.component.html
index 263390cbce..b01baa43d6 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/interpreter-binding/interpreter-binding.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/interpreter-binding/interpreter-binding.component.html
@@ -18,9 +18,8 @@
   <div>
     <h3>Interpreter binding</h3>
     <p>
-      Bind interpreter for this note.
-      Click to Bind/Unbind interpreter.
-      Drag and drop to reorder interpreters. <br/>
+      Bind interpreter for this note. Click to Bind/Unbind interpreter. Drag 
and drop to reorder interpreters.
+      <br />
       The first interpreter on the list becomes default. To create/remove 
interpreters, go to
       <a href="#/interpreter">Interpreter</a>
       menu.
@@ -28,20 +27,22 @@
   </div>
   <div class="interpreter-settings">
     <div cdkDropList class="interpreter-list" 
(cdkDropListDropped)="drop($event)">
-      <div class="interpreter-box" *ngFor="let item of interpreterBindings;let 
pFirst = first" cdkDrag>
+      <div class="interpreter-box" *ngFor="let item of interpreterBindings; 
let pFirst = first" cdkDrag>
         <a class="refresh" (click)="restartInterpreter(item)">
           <i nz-icon nzType="sync" nzTheme="outline"></i>
         </a>
         <div class="interpreter-name">
-          <button nz-button [nzType]="item.selected ? 'primary' : 'default' " 
(click)="item.selected = !item.selected">
-            <span class="main-name">{{item.name}}</span>
+          <button nz-button [nzType]="item.selected ? 'primary' : 'default'" 
(click)="item.selected = !item.selected">
+            <span class="main-name">{{ item.name }}</span>
             <small>
-            <span class="child-name" *ngFor="let inter of 
item.interpreters;let first = first">
-              <span *ngIf="!first">, </span>
-              %<span *ngIf="!pFirst || first">{{item.name}}</span><span 
*ngIf="(!pFirst || first) && !first">.</span>
-              <span *ngIf="!first">{{inter.name}}</span>
-              <span *ngIf="pFirst && first">(default)</span>
-            </span>
+              <span class="child-name" *ngFor="let inter of item.interpreters; 
let first = first">
+                <span *ngIf="!first">,</span>
+                %
+                <span *ngIf="!pFirst || first">{{ item.name }}</span>
+                <span *ngIf="(!pFirst || first) && !first">.</span>
+                <span *ngIf="!first">{{ inter.name }}</span>
+                <span *ngIf="pFirst && first">(default)</span>
+              </span>
             </small>
           </button>
         </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.html
index 2ca58518f7..d23cd58e22 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.html
@@ -10,16 +10,18 @@
   ~ limitations under the License.
   -->
 <div class="forms-wrap">
-  <zeppelin-elastic-input [value]="noteTitle"
-                          defaultTitle="Untitled Form"
-                          [min]="true"
-                          
(valueUpdate)="setTitle($event)"></zeppelin-elastic-input>
+  <zeppelin-elastic-input
+    [value]="noteTitle"
+    defaultTitle="Untitled Form"
+    [min]="true"
+    (valueUpdate)="setTitle($event)"
+  ></zeppelin-elastic-input>
   <zeppelin-notebook-paragraph-dynamic-forms
     [runOnChange]="true"
     [removable]="true"
     [paramDefs]="paramDefs"
     [formDefs]="formDefs"
     (formRemove)="onFormRemove($event)"
-    (formChange)="onFormChange()">
-  </zeppelin-notebook-paragraph-dynamic-forms>
+    (formChange)="onFormChange()"
+  ></zeppelin-notebook-paragraph-dynamic-forms>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html
index 2c3a682d56..9cca1743d2 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html
@@ -11,70 +11,83 @@
   -->
 
 <div class="notebook-container" *ngIf="note" 
[class.simple]="note.config.looknfeel !== 'default'">
-  <zeppelin-notebook-action-bar [note]="note"
-                                [looknfeel]="note.config.looknfeel"
-                                [revisionView]="revisionView"
-                                [isOwner]="isOwner"
-                                [(activatedExtension)]="activatedExtension"
-                                [collaborativeMode]="collaborativeMode"
-                                
[collaborativeModeUsers]="collaborativeModeUsers"
-                                [noteRevisions]="noteRevisions"
-                                [currentRevision]="currentRevision"
-                                
(tableHideChange)="setAllParagraphTableHide($event)"
-                                
(editorHideChange)="setAllParagraphEditorHide($event)"></zeppelin-notebook-action-bar>
+  <zeppelin-notebook-action-bar
+    [note]="note"
+    [looknfeel]="note.config.looknfeel"
+    [revisionView]="revisionView"
+    [isOwner]="isOwner"
+    [(activatedExtension)]="activatedExtension"
+    [collaborativeMode]="collaborativeMode"
+    [collaborativeModeUsers]="collaborativeModeUsers"
+    [noteRevisions]="noteRevisions"
+    [currentRevision]="currentRevision"
+    (tableHideChange)="setAllParagraphTableHide($event)"
+    (editorHideChange)="setAllParagraphEditorHide($event)"
+  ></zeppelin-notebook-action-bar>
   <div class="flex-container">
-    <div class="sidebar-area"
-        nz-resizable
-        [nzMaxWidth]="!isSidebarOpen ? 40 : 800"
-        [nzMinWidth]="!isSidebarOpen ? 40 : 280"
-        (nzResize)="onResizeSidebar($event)"
-        [style.min-width.px]="!isSidebarOpen ? 40 : sidebarWidth">
-      <zeppelin-notebook-sidebar [note]="note"
-                                
(isSidebarOpenChange)="onSidebarOpenChange($event)"
-                                
(scrollToParagraph)="onParagraphScrolled($event)"></zeppelin-notebook-sidebar>
-      <nz-resize-handle  *ngIf="isSidebarOpen" nzDirection="right"><div 
class="sidebar-resize"></div></nz-resize-handle>
+    <div
+      class="sidebar-area"
+      nz-resizable
+      [nzMaxWidth]="!isSidebarOpen ? 40 : 800"
+      [nzMinWidth]="!isSidebarOpen ? 40 : 280"
+      (nzResize)="onResizeSidebar($event)"
+      [style.min-width.px]="!isSidebarOpen ? 40 : sidebarWidth"
+    >
+      <zeppelin-notebook-sidebar
+        [note]="note"
+        (isSidebarOpenChange)="onSidebarOpenChange($event)"
+        (scrollToParagraph)="onParagraphScrolled($event)"
+      ></zeppelin-notebook-sidebar>
+      <nz-resize-handle *ngIf="isSidebarOpen" nzDirection="right"><div 
class="sidebar-resize"></div></nz-resize-handle>
     </div>
     <div class="notebook-area">
-      <div class="extension-area" [ngSwitch]="activatedExtension" 
*ngIf="activatedExtension!=='hide'">
-        <zeppelin-notebook-interpreter-binding *ngSwitchCase="'interpreter'"
-                                              [noteId]="note.id"
-                                              
[(activatedExtension)]="activatedExtension"
-                                              
[interpreterBindings]="interpreterBindings"></zeppelin-notebook-interpreter-binding>
-        <zeppelin-notebook-permissions *ngSwitchCase="'permissions'"
-                                      [noteId]="note.id"
-                                      
[(activatedExtension)]="activatedExtension"
-                                      
[permissions]="permissions"></zeppelin-notebook-permissions>
+      <div class="extension-area" [ngSwitch]="activatedExtension" 
*ngIf="activatedExtension !== 'hide'">
+        <zeppelin-notebook-interpreter-binding
+          *ngSwitchCase="'interpreter'"
+          [noteId]="note.id"
+          [(activatedExtension)]="activatedExtension"
+          [interpreterBindings]="interpreterBindings"
+        ></zeppelin-notebook-interpreter-binding>
+        <zeppelin-notebook-permissions
+          *ngSwitchCase="'permissions'"
+          [noteId]="note.id"
+          [(activatedExtension)]="activatedExtension"
+          [permissions]="permissions"
+        ></zeppelin-notebook-permissions>
         <zeppelin-notebook-revisions-comparator 
*ngSwitchCase="'revisions'"></zeppelin-notebook-revisions-comparator>
       </div>
       <div class="paragraph-area">
-        <zeppelin-note-form-block *ngIf="isShowNoteForms"
-                                  [formDefs]="note.noteForms"
-                                  [paramDefs]="note.noteParams"
-                                  [noteTitle]="note.config?.noteFormTitle"
-                                  (noteFormChange)="onNoteFormChange($event)"
-                                  
(noteFormNameRemove)="onFormNameRemove($event)"
-                                  
(noteTitleChange)="onNoteTitleChange($event)">
-        </zeppelin-note-form-block>
+        <zeppelin-note-form-block
+          *ngIf="isShowNoteForms"
+          [formDefs]="note.noteForms"
+          [paramDefs]="note.noteParams"
+          [noteTitle]="note.config?.noteFormTitle"
+          (noteFormChange)="onNoteFormChange($event)"
+          (noteFormNameRemove)="onFormNameRemove($event)"
+          (noteTitleChange)="onNoteTitleChange($event)"
+        ></zeppelin-note-form-block>
         <div class="paragraph-inner" nz-row>
-          <zeppelin-notebook-paragraph nz-col
-                                      *ngFor="let p of note.paragraphs;let 
first = first; let last = last; index as i"
-                                      [nzSpan]="p.config.colWidth * 2"
-                                      [select]="p.id === selectId"
-                                      [scrolled]="p.id === scrolledId"
-                                      [index]="i"
-                                      [paragraph]="p"
-                                      [note]="note"
-                                      [looknfeel]="note.config.looknfeel"
-                                      
[interpreterBindings]="interpreterBindings"
-                                      [collaborativeMode]="collaborativeMode"
-                                      [viewOnly]="viewOnly"
-                                      [revisionView]="revisionView"
-                                      [first]="first"
-                                      [last]="last"
-                                      (selectAtIndex)="onSelectAtIndex($event)"
-                                      (selected)="onParagraphSelect($event)"
-                                      
(triggerSaveParagraph)="saveParagraph($event)"
-                                      
(saveNoteTimer)="startSaveTimer()"></zeppelin-notebook-paragraph>
+          <zeppelin-notebook-paragraph
+            nz-col
+            *ngFor="let p of note.paragraphs; let first = first; let last = 
last; index as i"
+            [nzSpan]="p.config.colWidth * 2"
+            [select]="p.id === selectId"
+            [scrolled]="p.id === scrolledId"
+            [index]="i"
+            [paragraph]="p"
+            [note]="note"
+            [looknfeel]="note.config.looknfeel"
+            [interpreterBindings]="interpreterBindings"
+            [collaborativeMode]="collaborativeMode"
+            [viewOnly]="viewOnly"
+            [revisionView]="revisionView"
+            [first]="first"
+            [last]="last"
+            (selectAtIndex)="onSelectAtIndex($event)"
+            (selected)="onParagraphSelect($event)"
+            (triggerSaveParagraph)="saveParagraph($event)"
+            (saveNoteTimer)="startSaveTimer()"
+          ></zeppelin-notebook-paragraph>
         </div>
       </div>
     </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/code-editor/code-editor.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/code-editor/code-editor.component.html
index d543e670d4..fbab454549 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/code-editor/code-editor.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/code-editor/code-editor.component.html
@@ -10,8 +10,9 @@
   ~ limitations under the License.
   -->
 
-<zeppelin-code-editor [style.height.px]="height"
-                      [class.focused]="focus"
-                      [class.dirty]="dirty"
-                      (nzEditorInitialized)="initializedEditor($event)">
-</zeppelin-code-editor>
+<zeppelin-code-editor
+  [style.height.px]="height"
+  [class.focused]="focus"
+  [class.dirty]="dirty"
+  (nzEditorInitialized)="initializedEditor($event)"
+></zeppelin-code-editor>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/control/control.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/control/control.component.html
index a9ffe445fa..fdf2626b30 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/control/control.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/control/control.component.html
@@ -11,34 +11,40 @@
   -->
 
 <div class="job-link" *ngIf="runtimeInfos && runtimeInfos.jobUrl">
-  <a [attr.href]="runtimeInfos.jobUrl.values[0].jobUrl"
-     target="_blank"
-     nz-tooltip
-     [nzTooltipTitle]="runtimeInfos.jobUrl.tooltip">
+  <a
+    [attr.href]="runtimeInfos.jobUrl.values[0].jobUrl"
+    target="_blank"
+    nz-tooltip
+    [nzTooltipTitle]="runtimeInfos.jobUrl.tooltip"
+  >
     <i nz-icon nzType="build" nzTheme="fill"></i>
-    {{runtimeInfos.jobUrl.label}}
+    {{ runtimeInfos.jobUrl.label }}
   </a>
 </div>
-<div class="status">{{status}}</div>
-<div class="progress" *ngIf="status === 'RUNNING'">{{progress}}%</div>
+<div class="status">{{ status }}</div>
+<div class="progress" *ngIf="status === 'RUNNING'">{{ progress }}%</div>
 <ng-container *ngIf="!revisionView">
   <a class="operate">
-    <i nz-icon
-       *ngIf="status!=='RUNNING' && status!=='PENDING' && enabled"
-       (click)="runParagraph.emit()"
-       nzType="play-circle"
-       class="run-para"
-       nzTheme="outline"
-       nz-tooltip
-       nzTooltipTitle="Run paragraph"></i>
-    <i nz-icon
-       *ngIf="status=='RUNNING' || status=='PENDING'"
-       (click)="cancelParagraph.emit()"
-       class="cancel-para"
-       nzType="pause-circle"
-       nzTheme="outline"
-       nz-tooltip
-       nzTooltipTitle="Cancel paragraph"></i>
+    <i
+      nz-icon
+      *ngIf="status !== 'RUNNING' && status !== 'PENDING' && enabled"
+      (click)="runParagraph.emit()"
+      nzType="play-circle"
+      class="run-para"
+      nzTheme="outline"
+      nz-tooltip
+      nzTooltipTitle="Run paragraph"
+    ></i>
+    <i
+      nz-icon
+      *ngIf="status == 'RUNNING' || status == 'PENDING'"
+      (click)="cancelParagraph.emit()"
+      class="cancel-para"
+      nzType="pause-circle"
+      nzTheme="outline"
+      nz-tooltip
+      nzTooltipTitle="Cancel paragraph"
+    ></i>
   </a>
   <a (click)="toggleEditor()" nz-tooltip nzTooltipTitle="Show/hide the code">
     <i nz-icon [nzType]="editorHide ? 'fullscreen' : 'fullscreen-exit'" 
nzTheme="outline"></i>
@@ -58,13 +64,23 @@
       </li>
       <li nz-menu-divider></li>
       <li nz-menu-item *ngIf="runOnSelectionChange == true || 
runOnSelectionChange == false" class="list-item">
-        <span><i nz-icon nzType="filter" nzTheme="outline"></i> Run on 
selection change</span>
-        <span><nz-switch nzSize="small"
-                         [ngModel]="runOnSelectionChange"
-                         
(ngModelChange)="toggleRunOnSelectionChange()"></nz-switch></span>
+        <span>
+          <i nz-icon nzType="filter" nzTheme="outline"></i>
+          Run on selection change
+        </span>
+        <span>
+          <nz-switch
+            nzSize="small"
+            [ngModel]="runOnSelectionChange"
+            (ngModelChange)="toggleRunOnSelectionChange()"
+          ></nz-switch>
+        </span>
       </li>
       <li nz-menu-item class="list-item">
-        <span><i nz-icon nzType="gateway" nzTheme="outline"></i> Width</span>
+        <span>
+          <i nz-icon nzType="gateway" nzTheme="outline"></i>
+          Width
+        </span>
         <span>
           <select [ngModel]="colWidth" 
(ngModelChange)="changeColWidth($event)">
             <option [value]="col" [label]="col" *ngFor="let col of 
colWidthOption"></option>
@@ -72,7 +88,10 @@
         </span>
       </li>
       <li nz-menu-item class="list-item">
-        <span><i nz-icon nzType="font-size" nzTheme="outline"></i> Font 
size</span>
+        <span>
+          <i nz-icon nzType="font-size" nzTheme="outline"></i>
+          Font size
+        </span>
         <span>
           <select [ngModel]="fontSize" 
(ngModelChange)="changeFontSize($event)">
             <option [value]="size" [label]="size" *ngFor="let size of 
fontSizeOption"></option>
@@ -81,9 +100,11 @@
       </li>
       <ng-container *ngFor="let menu of listOfMenu">
         <li nz-menu-item class="list-item" [nzDisabled]="menu.disabled" 
*ngIf="menu.show" (click)="menu.trigger()">
-          <span><i nz-icon [nzType]="menu.icon" nzTheme="outline"></i>
-            {{menu.label}}</span>
-          <span class="short-cut">{{menu.shortCut}}</span>
+          <span>
+            <i nz-icon [nzType]="menu.icon" nzTheme="outline"></i>
+            {{ menu.label }}
+          </span>
+          <span class="short-cut">{{ menu.shortCut }}</span>
         </li>
       </ng-container>
     </ul>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/footer/footer.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/footer/footer.component.html
index 677356b1d5..fe5dbfb6af 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/footer/footer.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/footer/footer.component.html
@@ -11,6 +11,6 @@
   -->
 
 <div class="footer">
-  <div class="execution-time" *ngIf="showExecutionTime">{{executionTime}}</div>
-  <div class="elapsed-time" *ngIf="showElapsedTime">{{elapsedTime}}</div>
+  <div class="execution-time" *ngIf="showExecutionTime">{{ executionTime 
}}</div>
+  <div class="elapsed-time" *ngIf="showElapsedTime">{{ elapsedTime }}</div>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.html
index e2866272e9..5892aee551 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.html
@@ -11,95 +11,112 @@
   -->
 
 <div class="paragraph-container" *ngIf="paragraph" 
(dblclick)="doubleClickParagraph()">
-  <zeppelin-notebook-add-paragraph *ngIf="!revisionView && looknfeel !== 
'report'"
-                                   [disabled]="isEntireNoteRunning"
-                                   
(addParagraph)="insertParagraph('above')"></zeppelin-notebook-add-paragraph>
-  <div class="paragraph"
-       [class.focused]="select"
-       [class.simple]="looknfeel !== 'default'"
-       [class.report]="looknfeel === 'report'">
-    <zeppelin-elastic-input *ngIf="paragraph.config.title"
-                            [value]="paragraph.title"
-                            [min]="true"
-                            
(valueUpdate)="setTitle($event)"></zeppelin-elastic-input>
-    <zeppelin-notebook-paragraph-control #paragraphControl="paragraphControl"
-                                         [status]="paragraph.status"
-                                         [progress]="progress"
-                                         [first]="first"
-                                         [last]="last"
-                                         
[runtimeInfos]="paragraph.runtimeInfos"
-                                         
[paragraphLength]="note.paragraphs.length"
-                                         [revisionView]="revisionView"
-                                         [colWidthOption]="colWidthOption"
-                                         [pid]="paragraph.id"
-                                         
[isEntireNoteRunning]="isEntireNoteRunning"
-                                         [(enabled)]="paragraph.config.enabled"
-                                         
[(tableHide)]="paragraph.config.tableHide"
-                                         
[(colWidth)]="paragraph.config.colWidth"
-                                         [(title)]="paragraph.config.title"
-                                         
[(fontSize)]="paragraph.config.fontSize"
-                                         
[(lineNumbers)]="paragraph.config.lineNumbers"
-                                         
[(editorHide)]="paragraph.config.editorHide"
-                                         
[(runOnSelectionChange)]="paragraph.config.runOnSelectionChange"
-                                         (tableHideChange)="commitParagraph()"
-                                         (removeParagraph)="removeParagraph()"
-                                         
(colWidthChange)="changeColWidth(true)"
-                                         (fontSizeChange)="commitParagraph()"
-                                         (editorHideChange)="commitParagraph()"
-                                         (enabledChange)="commitParagraph()"
-                                         (titleChange)="commitParagraph()"
-                                         
(openSingleParagraph)="openSingleParagraph($event)"
-                                         
(runOnSelectionChangeChange)="commitParagraph()"
-                                         (runParagraph)="runParagraph()"
-                                         (moveUp)="moveUpParagraph()"
-                                         (moveDown)="moveDownParagraph()"
-                                         (insertNew)="insertParagraph('below')"
-                                         (runAllAbove)="runAllAbove()"
-                                         
(runAllBelowAndCurrent)="runAllBelowAndCurrent()"
-                                         (cloneParagraph)="cloneParagraph()"
-                                         
(cancelParagraph)="cancelParagraph()"></zeppelin-notebook-paragraph-control>
-    <zeppelin-notebook-paragraph-code-editor 
*ngIf="!paragraph.config.editorHide && !viewOnly"
-                                             [text]="paragraph.text"
-                                             
[paragraphControl]="paragraphControl"
-                                             [dirty]="dirtyText !== 
originalText && dirtyText !== undefined"
-                                             
[collaborativeMode]="collaborativeMode"
-                                             [focus]="paragraph.focus"
-                                             [pid]="paragraph.id"
-                                             
[fontSize]="paragraph.config.fontSize"
-                                             
[interpreterBindings]="interpreterBindings"
-                                             
[lineNumbers]="paragraph.config.lineNumbers"
-                                             [readOnly]="isEntireNoteRunning 
|| isParagraphRunning || revisionView"
-                                             
[language]="paragraph.config.editorSetting?.language"
-                                             (editorBlur)="onEditorBlur()"
-                                             (editorFocus)="onEditorFocus()"
-                                             
(textChanged)="textChanged($event)"></zeppelin-notebook-paragraph-code-editor>
-    <zeppelin-notebook-paragraph-progress *ngIf="paragraph.status === 
'RUNNING'"
-                                          
[progress]="progress"></zeppelin-notebook-paragraph-progress>
+  <zeppelin-notebook-add-paragraph
+    *ngIf="!revisionView && looknfeel !== 'report'"
+    [disabled]="isEntireNoteRunning"
+    (addParagraph)="insertParagraph('above')"
+  ></zeppelin-notebook-add-paragraph>
+  <div
+    class="paragraph"
+    [class.focused]="select"
+    [class.simple]="looknfeel !== 'default'"
+    [class.report]="looknfeel === 'report'"
+  >
+    <zeppelin-elastic-input
+      *ngIf="paragraph.config.title"
+      [value]="paragraph.title"
+      [min]="true"
+      (valueUpdate)="setTitle($event)"
+    ></zeppelin-elastic-input>
+    <zeppelin-notebook-paragraph-control
+      #paragraphControl="paragraphControl"
+      [status]="paragraph.status"
+      [progress]="progress"
+      [first]="first"
+      [last]="last"
+      [runtimeInfos]="paragraph.runtimeInfos"
+      [paragraphLength]="note.paragraphs.length"
+      [revisionView]="revisionView"
+      [colWidthOption]="colWidthOption"
+      [pid]="paragraph.id"
+      [isEntireNoteRunning]="isEntireNoteRunning"
+      [(enabled)]="paragraph.config.enabled"
+      [(tableHide)]="paragraph.config.tableHide"
+      [(colWidth)]="paragraph.config.colWidth"
+      [(title)]="paragraph.config.title"
+      [(fontSize)]="paragraph.config.fontSize"
+      [(lineNumbers)]="paragraph.config.lineNumbers"
+      [(editorHide)]="paragraph.config.editorHide"
+      [(runOnSelectionChange)]="paragraph.config.runOnSelectionChange"
+      (tableHideChange)="commitParagraph()"
+      (removeParagraph)="removeParagraph()"
+      (colWidthChange)="changeColWidth(true)"
+      (fontSizeChange)="commitParagraph()"
+      (editorHideChange)="commitParagraph()"
+      (enabledChange)="commitParagraph()"
+      (titleChange)="commitParagraph()"
+      (openSingleParagraph)="openSingleParagraph($event)"
+      (runOnSelectionChangeChange)="commitParagraph()"
+      (runParagraph)="runParagraph()"
+      (moveUp)="moveUpParagraph()"
+      (moveDown)="moveDownParagraph()"
+      (insertNew)="insertParagraph('below')"
+      (runAllAbove)="runAllAbove()"
+      (runAllBelowAndCurrent)="runAllBelowAndCurrent()"
+      (cloneParagraph)="cloneParagraph()"
+      (cancelParagraph)="cancelParagraph()"
+    ></zeppelin-notebook-paragraph-control>
+    <zeppelin-notebook-paragraph-code-editor
+      *ngIf="!paragraph.config.editorHide && !viewOnly"
+      [text]="paragraph.text"
+      [paragraphControl]="paragraphControl"
+      [dirty]="dirtyText !== originalText && dirtyText !== undefined"
+      [collaborativeMode]="collaborativeMode"
+      [focus]="paragraph.focus"
+      [pid]="paragraph.id"
+      [fontSize]="paragraph.config.fontSize"
+      [interpreterBindings]="interpreterBindings"
+      [lineNumbers]="paragraph.config.lineNumbers"
+      [readOnly]="isEntireNoteRunning || isParagraphRunning || revisionView"
+      [language]="paragraph.config.editorSetting?.language"
+      (editorBlur)="onEditorBlur()"
+      (editorFocus)="onEditorFocus()"
+      (textChanged)="textChanged($event)"
+    ></zeppelin-notebook-paragraph-code-editor>
+    <zeppelin-notebook-paragraph-progress
+      *ngIf="paragraph.status === 'RUNNING'"
+      [progress]="progress"
+    ></zeppelin-notebook-paragraph-progress>
     <ng-container *ngIf="!paragraph.config.tableHide">
       <zeppelin-notebook-paragraph-dynamic-forms
         [disable]="paragraph.status == 'RUNNING' || paragraph.status == 
'PENDING'"
         [paramDefs]="paragraph.settings.params"
         [formDefs]="paragraph.settings.forms"
         [runOnChange]="paragraph.config.runOnSelectionChange"
-        (formChange)="runParagraph()">
-      </zeppelin-notebook-paragraph-dynamic-forms>
-      <zeppelin-notebook-paragraph-result *ngFor="let result of results; index 
as i; trackBy: trackByIndexFn"
-                                          [id]="paragraph.id"
-                                          
[currentCol]="paragraph.config.colWidth"
-                                          [config]="configs[i]"
-                                          (sizeChange)="onSizeChange($event)"
-                                          
(configChange)="onConfigChange($event, i)"
-                                          [result]="result">
-      </zeppelin-notebook-paragraph-result>
+        (formChange)="runParagraph()"
+      ></zeppelin-notebook-paragraph-dynamic-forms>
+      <zeppelin-notebook-paragraph-result
+        *ngFor="let result of results; index as i; trackBy: trackByIndexFn"
+        [id]="paragraph.id"
+        [currentCol]="paragraph.config.colWidth"
+        [config]="configs[i]"
+        (sizeChange)="onSizeChange($event)"
+        (configChange)="onConfigChange($event, i)"
+        [result]="result"
+      ></zeppelin-notebook-paragraph-result>
     </ng-container>
-    <zeppelin-notebook-paragraph-footer 
[showExecutionTime]="!paragraph.config.tableHide && !viewOnly"
-                                        [showElapsedTime]="paragraph.status 
=== 'RUNNING'"
-                                        [user]="paragraph.user"
-                                        [dateUpdated]="paragraph.dateUpdated"
-                                        [dateStarted]="paragraph.dateStarted"
-                                        
[dateFinished]="paragraph.dateFinished"></zeppelin-notebook-paragraph-footer>
+    <zeppelin-notebook-paragraph-footer
+      [showExecutionTime]="!paragraph.config.tableHide && !viewOnly"
+      [showElapsedTime]="paragraph.status === 'RUNNING'"
+      [user]="paragraph.user"
+      [dateUpdated]="paragraph.dateUpdated"
+      [dateStarted]="paragraph.dateStarted"
+      [dateFinished]="paragraph.dateFinished"
+    ></zeppelin-notebook-paragraph-footer>
   </div>
-  <zeppelin-notebook-add-paragraph *ngIf="!viewOnly && !revisionView && last 
&& looknfeel !== 'report'"
-                                   [disabled]="isEntireNoteRunning"
-                                   
(addParagraph)="insertParagraph('below')"></zeppelin-notebook-add-paragraph>
+  <zeppelin-notebook-add-paragraph
+    *ngIf="!viewOnly && !revisionView && last && looknfeel !== 'report'"
+    [disabled]="isEntireNoteRunning"
+    (addParagraph)="insertParagraph('below')"
+  ></zeppelin-notebook-add-paragraph>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/progress/progress.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/progress/progress.component.html
index 07c886a22d..c98cdbe2ba 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/progress/progress.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/progress/progress.component.html
@@ -10,7 +10,4 @@
   ~ limitations under the License.
   -->
 
-<nz-progress [nzPercent]="displayProgress"
-             [nzSize]="'small'"
-             [nzShowInfo]="false"
-             [nzStatus]="'active'"></nz-progress>
+<nz-progress [nzPercent]="displayProgress" [nzSize]="'small'" 
[nzShowInfo]="false" [nzStatus]="'active'"></nz-progress>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/revisions-comparator/revisions-comparator.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/revisions-comparator/revisions-comparator.component.html
index 6f0e1be83f..c8099d6f33 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/revisions-comparator/revisions-comparator.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/revisions-comparator/revisions-comparator.component.html
@@ -15,6 +15,5 @@
     <h2>Revisions comparator</h2>
   </div>
   <nz-divider></nz-divider>
-  <div>
-  </div>
+  <div></div>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/share/elastic-input/elastic-input.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/share/elastic-input/elastic-input.component.html
index aa7b5e777b..4311075f5f 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/share/elastic-input/elastic-input.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/share/elastic-input/elastic-input.component.html
@@ -11,13 +11,15 @@
   -->
 
 <div class="elastic" #elasticElement [class.min]="min">
-  <input #inputElement
-         [ngModel]="editValue"
-         (ngModelChange)="updateValue($event)"
-         *ngIf="showEditor"
-         (blur)="setEditorState(false)"
-         (keydown.esc)="cancelEdit()"
-         (keydown.enter)="setEditorState(false)"
-         (input)="updateInputWidth()">
-  <p #pElement *ngIf="!showEditor" (click)="setEditorState(true)">{{value || 
defaultTitle}}</p>
+  <input
+    #inputElement
+    [ngModel]="editValue"
+    (ngModelChange)="updateValue($event)"
+    *ngIf="showEditor"
+    (blur)="setEditorState(false)"
+    (keydown.esc)="cancelEdit()"
+    (keydown.enter)="setEditorState(false)"
+    (input)="updateInputWidth()"
+  />
+  <p #pElement *ngIf="!showEditor" (click)="setEditorState(true)">{{ value || 
defaultTitle }}</p>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/sidebar/sidebar.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/sidebar/sidebar.component.html
index 66e2bbd552..9acfe35efa 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/notebook/sidebar/sidebar.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/notebook/sidebar/sidebar.component.html
@@ -12,14 +12,18 @@
 
 <div class="sidebar" [class.simple]="note.config.looknfeel !== 'default'">
   <div class="sidebar-nav">
-    <button [class.sidebar-button-active]="sidebarState === SidebarState.TOC"
-            class="sidebar-button"
-            (click)="setOrToggleSidebarState(SidebarState.TOC)">
+    <button
+      [class.sidebar-button-active]="sidebarState === SidebarState.TOC"
+      class="sidebar-button"
+      (click)="setOrToggleSidebarState(SidebarState.TOC)"
+    >
       <i nz-icon nzType="unordered-list" nzTheme="outline"></i>
     </button>
-    <button [class.sidebar-button-active]="sidebarState === 
SidebarState.FILE_TREE"
-            class="sidebar-button"
-            (click)="setOrToggleSidebarState(SidebarState.FILE_TREE)">
+    <button
+      [class.sidebar-button-active]="sidebarState === SidebarState.FILE_TREE"
+      class="sidebar-button"
+      (click)="setOrToggleSidebarState(SidebarState.FILE_TREE)"
+    >
       <i nz-icon nzType="folder" nzTheme="outline"></i>
     </button>
   </div>
@@ -28,8 +32,11 @@
   </button>
   <div class="sidebar-main" *ngIf="sidebarState !== SidebarState.CLOSED">
     <zeppelin-node-list *ngIf="sidebarState === 
SidebarState.FILE_TREE"></zeppelin-node-list>
-    <zeppelin-note-toc *ngIf="sidebarState === SidebarState.TOC"
-                      [note]="note"
-                      
(scrollToParagraph)="onScrollToParagraph($event)"></zeppelin-note-toc>
+    <zeppelin-note-toc
+      *ngIf="sidebarState === SidebarState.TOC"
+      [note]="note"
+      (scrollToParagraph)="onScrollToParagraph($event)"
+    ></zeppelin-note-toc>
   </div>
-<div>
+  <div></div>
+</div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/published/paragraph/paragraph.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/published/paragraph/paragraph.component.html
index 4423ddafd7..4be27e236f 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/published/paragraph/paragraph.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/published/paragraph/paragraph.component.html
@@ -15,12 +15,13 @@
   [paramDefs]="paragraph.settings.params"
   [formDefs]="paragraph.settings.forms"
   [runOnChange]="paragraph.config.runOnSelectionChange"
-  (formChange)="runParagraph()">
-</zeppelin-notebook-paragraph-dynamic-forms>
-<zeppelin-notebook-paragraph-result *ngFor="let result of results; index as i; 
trackBy: trackByIndexFn"
-                                    [id]="paragraph.id"
-                                    [published]="true"
-                                    [currentCol]="paragraph.config.colWidth"
-                                    [config]="configs[i]"
-                                    [result]="result">
-</zeppelin-notebook-paragraph-result>
+  (formChange)="runParagraph()"
+></zeppelin-notebook-paragraph-dynamic-forms>
+<zeppelin-notebook-paragraph-result
+  *ngFor="let result of results; index as i; trackBy: trackByIndexFn"
+  [id]="paragraph.id"
+  [published]="true"
+  [currentCol]="paragraph.config.colWidth"
+  [config]="configs[i]"
+  [result]="result"
+></zeppelin-notebook-paragraph-result>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.html
index 0ad4a91821..3774f1ac26 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.html
@@ -19,42 +19,47 @@
     nzXl="8"
     nzLg="8"
     nzMd="12"
-    nzSm="24">
+    nzSm="24"
+  >
     <div nz-row nzType="flex">
-      <label class="item-label" *ngIf="form.displayName" nz-col 
nzSpan="6">{{form.displayName}}: </label>
+      <label class="item-label" *ngIf="form.displayName" nz-col nzSpan="6">{{ 
form.displayName }}:</label>
       <div class="control-wrap" nz-col [nzSpan]="form.displayName ? 16 : 24">
         <ng-container [ngSwitch]="form.type">
-          <input *ngSwitchCase="formType.TextBox"
-                 nz-input
-                 [(ngModel)]="paramDefs[form.name]"
-                 [disabled]="disable"
-                 (ngModelChange)="onFormChange()">
-          <input *ngSwitchCase="formType.Password"
-                 nz-input
-                 type="password"
-                 [(ngModel)]="paramDefs[form.name]"
-                 [disabled]="disable"
-                 (ngModelChange)="onFormChange()">
-          <nz-select *ngSwitchCase="formType.Select"
-                     [nzDisabled]="disable"
-                     [(ngModel)]="paramDefs[form.name]"
-                     (ngModelChange)="onFormChange()">
-            <nz-option *ngFor="let opt of form.options"
-                       [nzLabel]="opt.displayName || opt.value"
-                       [nzValue]="opt.value">
-            </nz-option>
+          <input
+            *ngSwitchCase="formType.TextBox"
+            nz-input
+            [(ngModel)]="paramDefs[form.name]"
+            [disabled]="disable"
+            (ngModelChange)="onFormChange()"
+          />
+          <input
+            *ngSwitchCase="formType.Password"
+            nz-input
+            type="password"
+            [(ngModel)]="paramDefs[form.name]"
+            [disabled]="disable"
+            (ngModelChange)="onFormChange()"
+          />
+          <nz-select
+            *ngSwitchCase="formType.Select"
+            [nzDisabled]="disable"
+            [(ngModel)]="paramDefs[form.name]"
+            (ngModelChange)="onFormChange()"
+          >
+            <nz-option
+              *ngFor="let opt of form.options"
+              [nzLabel]="opt.displayName || opt.value"
+              [nzValue]="opt.value"
+            ></nz-option>
           </nz-select>
-          <nz-checkbox-group *ngSwitchCase="formType.CheckBox"
-                             [nzDisabled]="disable"
-                             [(ngModel)]="checkboxGroups[form.name]"
-                             (ngModelChange)="checkboxChange($event, 
form.name)">
-          </nz-checkbox-group>
+          <nz-checkbox-group
+            *ngSwitchCase="formType.CheckBox"
+            [nzDisabled]="disable"
+            [(ngModel)]="checkboxGroups[form.name]"
+            (ngModelChange)="checkboxChange($event, form.name)"
+          ></nz-checkbox-group>
         </ng-container>
-        <button *ngIf="removable"
-                nz-button
-                nzType="link"
-                class="remove-button"
-                (click)="remove(form)">
+        <button *ngIf="removable" nz-button nzType="link" 
class="remove-button" (click)="remove(form)">
           <i nz-icon nzType="close" nzTheme="outline"></i>
         </button>
       </div>
diff --git 
a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html
 
b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html
index 5391aea1d6..c261960131 100644
--- 
a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html
+++ 
b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html
@@ -13,10 +13,7 @@
 <div class="setting-bar" *ngIf="result.type === datasetType.TABLE && 
!published">
   <div class="visualization-selector">
     <nz-radio-group [(ngModel)]="config?.graph.mode" 
(ngModelChange)="switchMode($event)" nzButtonStyle="solid">
-      <label *ngFor="let item of visualizations"
-             nz-radio-button
-             [nz-tooltip]="item.name"
-             [nzValue]="item.id">
+      <label *ngFor="let item of visualizations" nz-radio-button 
[nz-tooltip]="item.name" [nzValue]="item.id">
         <i nz-icon [nzType]="item.icon"></i>
       </label>
     </nz-radio-group>
@@ -26,11 +23,17 @@
     <button nz-button (click)="exportFile('csv')">
       <i nz-icon nzType="download" nz-tooltip="Download Data as CSV"></i>
     </button>
-    <button class="export-dropdown-icon-btn" nz-button nz-dropdown 
[nzDropdownMenu]="exportMenu" nzPlacement="bottomRight">
+    <button
+      class="export-dropdown-icon-btn"
+      nz-button
+      nz-dropdown
+      [nzDropdownMenu]="exportMenu"
+      nzPlacement="bottomRight"
+    >
       <i nz-icon nzType="down"></i>
     </button>
   </nz-button-group>
-  <nz-dropdown-menu  #exportMenu="nzDropdownMenu">
+  <nz-dropdown-menu #exportMenu="nzDropdownMenu">
     <ul nz-menu>
       <li nz-menu-item (click)="exportFile('csv')">CSV</li>
       <li nz-menu-item (click)="exportFile('tsv')">TSV</li>
@@ -39,36 +42,36 @@
 
   <a class="setting-trigger" tabindex="-1" (click)="switchSetting()">
     Setting
-    <i
-      nz-icon
-      nzType="caret-down"
-      [nzRotate]="config?.graph.optionOpen ? 180 : 0"
-      class="setting-icon"
-      nz-dropdown
-    ></i>
+    <i nz-icon nzType="caret-down" [nzRotate]="config?.graph.optionOpen ? 180 
: 0" class="setting-icon" nz-dropdown></i>
   </a>
 </div>
-<div nz-resizable
-     nzPreview
-     (nzResizeEnd)="onResize($event)"
-     [nzGridColumnCount]="12"
-     [nzMinColumn]="1">
+<div nz-resizable nzPreview (nzResizeEnd)="onResize($event)" 
[nzGridColumnCount]="12" [nzMinColumn]="1">
   <nz-resize-handle nzDirection="bottomRight" *ngIf="!published">
     <zeppelin-resize-handle></zeppelin-resize-handle>
   </nz-resize-handle>
   <ng-template cdkPortalOutlet></ng-template>
   <ng-container [ngSwitch]="result?.type">
-    <div *ngSwitchCase="datasetType.HTML"
-         class="inner-html"
-         zeppelinMathJax
-         zeppelinRunScripts
-         [scriptsContent]="innerHTML"
-         [innerHTML]="innerHTML"></div>
+    <div
+      *ngSwitchCase="datasetType.HTML"
+      class="inner-html"
+      zeppelinMathJax
+      zeppelinRunScripts
+      [scriptsContent]="innerHTML"
+      [innerHTML]="innerHTML"
+    ></div>
     <div *ngSwitchCase="datasetType.TEXT" class="text-plain"><pre 
[innerHTML]="plainText"></pre></div>
-    <div *ngSwitchCase="datasetType.IMG" class="img"><img [src]="imgData" 
alt="img"></div>
+    <div *ngSwitchCase="datasetType.IMG" class="img"><img [src]="imgData" 
alt="img" /></div>
   </ng-container>
-  <div *ngIf="frontEndError" 
class="text-plain"><pre>{{frontEndError}}</pre></div>
+  <div *ngIf="frontEndError" class="text-plain">
+    <pre>{{ frontEndError }}</pre>
+  </div>
   <div *ngIf="angularComponent">
-    <ng-container 
*ngComponentOutlet="angularComponent.component;ngModuleFactory: 
angularComponent.moduleFactory;injector: injector"></ng-container>
+    <ng-container
+      *ngComponentOutlet="
+        angularComponent.component;
+        ngModuleFactory: angularComponent.moduleFactory;
+        injector: injector
+      "
+    ></ng-container>
   </div>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/share/about-zeppelin/about-zeppelin.component.html
 
b/zeppelin-web-angular/src/app/share/about-zeppelin/about-zeppelin.component.html
index 33a5d87ee6..b27f4ac6fb 100644
--- 
a/zeppelin-web-angular/src/app/share/about-zeppelin/about-zeppelin.component.html
+++ 
b/zeppelin-web-angular/src/app/share/about-zeppelin/about-zeppelin.component.html
@@ -12,17 +12,19 @@
 
 <div nz-row class="modal">
   <div nz-col [nzSm]="8" [nzXs]="0" class="about-logo">
-    <img src="assets/images/zeppelin_svg_logo.svg" alt="Apache Zeppelin" 
title="Apache Zeppelin"/>
+    <img src="assets/images/zeppelin_svg_logo.svg" alt="Apache Zeppelin" 
title="Apache Zeppelin" />
   </div>
   <div nz-col [nzSm]="16" [nzXs]="24" class="content">
     <h3>Apache Zeppelin</h3>
-    <br/>
+    <br />
     <span>Version</span>
-    <span class="about-version"> {{ticketService.version}} </span>
-    <br/>
-    <br/>
+    <span class="about-version">{{ ticketService.version }}</span>
+    <br />
+    <br />
     <a href="http://zeppelin.apache.org/"; target="_blank"><span>Get 
involved!</span></a>
-    <br/>
-    <a href="http://www.apache.org/licenses/LICENSE-2.0"; 
target="_blank"><span>Licensed under the Apache License, Version 2.0</span></a>
+    <br />
+    <a href="http://www.apache.org/licenses/LICENSE-2.0"; target="_blank">
+      <span>Licensed under the Apache License, Version 2.0</span>
+    </a>
   </div>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/share/folder-rename/folder-rename.component.html 
b/zeppelin-web-angular/src/app/share/folder-rename/folder-rename.component.html
index 71c4eac1a7..1de07e9906 100644
--- 
a/zeppelin-web-angular/src/app/share/folder-rename/folder-rename.component.html
+++ 
b/zeppelin-web-angular/src/app/share/folder-rename/folder-rename.component.html
@@ -14,7 +14,14 @@
   <nz-form-item>
     <nz-form-label>Please enter a new name</nz-form-label>
     <nz-form-control>
-      <input nz-input [(ngModel)]="newFolderPath" 
(ngModelChange)="checkMerged()" placeholder="Insert New Name" 
name="newFolderPath" required/>
+      <input
+        nz-input
+        [(ngModel)]="newFolderPath"
+        (ngModelChange)="checkMerged()"
+        placeholder="Insert New Name"
+        name="newFolderPath"
+        required
+      />
     </nz-form-control>
   </nz-form-item>
   <nz-form-item *ngIf="willMerged">
@@ -28,5 +35,7 @@
 </form>
 
 <ng-template #desTpl>
-  The folder will be merged into <strong>{{newFolderPath}}</strong>. Are you 
sure?
+  The folder will be merged into
+  <strong>{{ newFolderPath }}</strong>
+  . Are you sure?
 </ng-template>
diff --git a/zeppelin-web-angular/src/app/share/header/header.component.html 
b/zeppelin-web-angular/src/app/share/header/header.component.html
index 65376b617d..f22da904a1 100644
--- a/zeppelin-web-angular/src/app/share/header/header.component.html
+++ b/zeppelin-web-angular/src/app/share/header/header.component.html
@@ -20,13 +20,22 @@
   <div class="nav">
     <ul nz-menu [nzMode]="'horizontal'">
       <li nz-menu-item [class.ant-menu-item-selected]="noteListVisible">
-        <a nz-dropdown class="node-list-trigger" [nzDropdownMenu]="list" 
[nzTrigger]="'click'" [(nzVisible)]="noteListVisible">Notebook
+        <a
+          nz-dropdown
+          class="node-list-trigger"
+          [nzDropdownMenu]="list"
+          [nzTrigger]="'click'"
+          [(nzVisible)]="noteListVisible"
+        >
+          Notebook
           <i class="small-icon" nz-icon nzType="caret-down"></i>
         </a>
         <nz-dropdown-menu #list="nzDropdownMenu">
-          <zeppelin-node-list [headerMode]="true"
-                              class="ant-dropdown-menu padding-sm"
-                              *ngIf="noteListVisible"></zeppelin-node-list>
+          <zeppelin-node-list
+            [headerMode]="true"
+            class="ant-dropdown-menu padding-sm"
+            *ngIf="noteListVisible"
+          ></zeppelin-node-list>
         </nz-dropdown-menu>
       </li>
       <li nz-menu-item routerLinkActive="ant-menu-item-selected">
@@ -47,18 +56,14 @@
           <a [routerLink]="['/interpreter']">Interpreter</a>
         </li>
         <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
-          <a [routerLink]="['/notebook-repos']">Notebook
-                                               Repos
-          </a>
+          <a [routerLink]="['/notebook-repos']">Notebook Repos</a>
         </li>
         <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
-          <a
-            [routerLink]="['/credential']">Credential
-          </a>
+          <a [routerLink]="['/credential']">Credential</a>
         </li>
-<!--        <li nz-menu-item 
routerLinkActive="ant-dropdown-menu-item-selected">-->
-<!--          <a [routerLink]="['/helium']">Helium</a>-->
-<!--        </li>-->
+        <!--        <li nz-menu-item 
routerLinkActive="ant-dropdown-menu-item-selected">-->
+        <!--          <a [routerLink]="['/helium']">Helium</a>-->
+        <!--        </li>-->
         <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
           <a [routerLink]="['/configuration']">Configuration</a>
         </li>
@@ -73,11 +78,7 @@
   </div>
   <div class="search">
     <nz-input-group [nzPrefixIcon]="'search'">
-      <input type="text"
-             nz-input
-             placeholder="Search"
-             (keyup.enter)="onSearch()"
-             [(ngModel)]="queryStr"/>
+      <input type="text" nz-input placeholder="Search" 
(keyup.enter)="onSearch()" [(ngModel)]="queryStr" />
     </nz-input-group>
   </div>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/share/node-list/node-list.component.html 
b/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
index 5e636e161b..0674090b7b 100644
--- a/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
+++ b/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
@@ -24,116 +24,129 @@
     </a>
   </h4>
   <nz-input-group [nzPrefixIcon]="'search'" nzSize="small">
-    <input type="text" nz-input placeholder="Filter" nzSize="small" 
[(ngModel)]="searchValue"/>
+    <input type="text" nz-input placeholder="Filter" nzSize="small" 
[(ngModel)]="searchValue" />
   </nz-input-group>
   <nz-tree [nzData]="nodes" [nzSearchValue]="searchValue" 
[nzTreeTemplate]="treeTpl"></nz-tree>
   <ng-template #treeTpl let-node>
-      <span class="node"
-            [ngSwitch]="node.origin.nodeType"
-            [class.not-matched]="searchValue && !node.isMatched"
-            [class.active]="activatedId === node.origin.id"
-            (click)="activeNote(node.origin.id)">
-        <span class="folder" *ngSwitchCase="'folder'">
-          <a class="name" (click)="toggleFolder(node)">
-            <i nz-icon
-               [nzType]="node.isExpanded ? 'folder-open':'folder'"
-               nzTheme="fill"></i>
-            {{ node.title }}
-          </a>
-          <span class="operation">
-            <ng-container *ngIf="!node.origin.isTrash;else trashFolderTpl">
-              <a nz-tooltip nzTooltipTitle="Create new note">
-                <i nz-icon nzType="file-add" 
(click)="createNote(node.origin.id)"></i>
-              </a>
-              <a nz-tooltip nzTooltipTitle="Rename folder">
-                <i nz-icon nzType="edit" 
(click)="renameFolder(node.origin.id)"></i>
-              </a>
-              <a nz-tooltip nzTooltipTitle="Move folder to Trash">
-                <i nz-icon
-                   nzType="delete"
-                   nz-popconfirm
-                   nzPopconfirmTitle="This folder will be moved to trash."
-                   (nzOnConfirm)="moveFolderToTrash(node.origin.id)"></i>
-              </a>
-            </ng-container>
-            <ng-template #trashFolderTpl>
-              <a nz-tooltip nzTooltipTitle="Restore folder">
-                <i nz-icon nzType="undo" 
(click)="restoreFolder(node.origin.id)"></i>
-              </a>
-              <a nz-tooltip nzTooltipTitle="Remove folder permanently">
-                <i nz-icon
-                   nzType="delete"
-                   nz-popconfirm
-                   nzPopconfirmTitle="This cannot be undone. Are you sure?"
-                   (nzOnConfirm)="removeFolder(node.origin.id)"></i>
-              </a>
-            </ng-template>
-          </span>
-        </span>
-        <span class="file" *ngSwitchCase="'note'">
-          <a class="name">
-            <i nz-icon nzType="file" nzTheme="outline"></i>
-            <a [routerLink]="['/notebook',node.origin.id]">
-              {{ node.title }}
+    <span
+      class="node"
+      [ngSwitch]="node.origin.nodeType"
+      [class.not-matched]="searchValue && !node.isMatched"
+      [class.active]="activatedId === node.origin.id"
+      (click)="activeNote(node.origin.id)"
+    >
+      <span class="folder" *ngSwitchCase="'folder'">
+        <a class="name" (click)="toggleFolder(node)">
+          <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'" 
nzTheme="fill"></i>
+          {{ node.title }}
+        </a>
+        <span class="operation">
+          <ng-container *ngIf="!node.origin.isTrash; else trashFolderTpl">
+            <a nz-tooltip nzTooltipTitle="Create new note">
+              <i nz-icon nzType="file-add" 
(click)="createNote(node.origin.id)"></i>
             </a>
-          </a>
-            <span class="operation">
-              <ng-container *ngIf="!node.origin.isTrash;else trashFileTpl">
-                <a nz-tooltip nzTooltipTitle="Rename note">
-                  <i nz-icon nzType="edit" 
(click)="renameNote(node.origin.id,node.origin.path,node.origin.name)"></i>
-                </a>
-                <a nz-tooltip nzTooltipTitle="Clear output">
-                  <i nz-icon
-                     nzType="fire"
-                     nz-popconfirm
-                     nzPopconfirmTitle="Do you want to clear all output?"
-                     
(nzOnConfirm)="paragraphClearAllOutput(node.origin.id)"></i>
-                </a>
-                <a nz-tooltip nzTooltipTitle="Move note to Trash">
-                  <i nz-icon
-                     nzType="delete"
-                     nz-popconfirm
-                     nzPopconfirmTitle="This note will be moved to trash."
-                     (nzOnConfirm)="moveNoteToTrash(node.origin.id)"></i>
-                </a>
-              </ng-container>
-              <ng-template #trashFileTpl>
-                <a nz-tooltip nzTooltipTitle="Restore note">
-                  <i nz-icon nzType="undo" 
(click)="restoreNote(node.origin.id)"></i>
-                </a>
-                <a nz-tooltip nzTooltipTitle="Remove note permanently">
-                  <i nz-icon
-                     nzType="delete"
-                     nz-popconfirm
-                     nzPopconfirmTitle="This cannot be undone. Are you sure?"
-                     (nzOnConfirm)="deleteNote(node.origin.id)"></i>
-                </a>
-              </ng-template>
-            </span>
+            <a nz-tooltip nzTooltipTitle="Rename folder">
+              <i nz-icon nzType="edit" 
(click)="renameFolder(node.origin.id)"></i>
+            </a>
+            <a nz-tooltip nzTooltipTitle="Move folder to Trash">
+              <i
+                nz-icon
+                nzType="delete"
+                nz-popconfirm
+                nzPopconfirmTitle="This folder will be moved to trash."
+                (nzOnConfirm)="moveFolderToTrash(node.origin.id)"
+              ></i>
+            </a>
+          </ng-container>
+          <ng-template #trashFolderTpl>
+            <a nz-tooltip nzTooltipTitle="Restore folder">
+              <i nz-icon nzType="undo" 
(click)="restoreFolder(node.origin.id)"></i>
+            </a>
+            <a nz-tooltip nzTooltipTitle="Remove folder permanently">
+              <i
+                nz-icon
+                nzType="delete"
+                nz-popconfirm
+                nzPopconfirmTitle="This cannot be undone. Are you sure?"
+                (nzOnConfirm)="removeFolder(node.origin.id)"
+              ></i>
+            </a>
+          </ng-template>
         </span>
-        <span class="folder" *ngSwitchCase="'trash'">
-          <a class="name" (click)="toggleFolder(node)">
-            <i nz-icon nzType="delete" nzTheme="fill"></i>
+      </span>
+      <span class="file" *ngSwitchCase="'note'">
+        <a class="name">
+          <i nz-icon nzType="file" nzTheme="outline"></i>
+          <a [routerLink]="['/notebook', node.origin.id]">
             {{ node.title }}
           </a>
-          <span class="operation">
-            <a nz-tooltip nzTooltipTitle="Restore all">
-              <i nz-icon
-                 nzType="undo"
-                 nz-popconfirm
-                 nzPopconfirmTitle="Folders and notes in the trash will be 
merged into their original position."
-                 (nzOnConfirm)="restoreAll()"></i>
+        </a>
+        <span class="operation">
+          <ng-container *ngIf="!node.origin.isTrash; else trashFileTpl">
+            <a nz-tooltip nzTooltipTitle="Rename note">
+              <i nz-icon nzType="edit" (click)="renameNote(node.origin.id, 
node.origin.path, node.origin.name)"></i>
             </a>
-            <a nz-tooltip nzTooltipTitle="Empty all">
-              <i nz-icon
-                 nzType="delete"
-                 nz-popconfirm
-                 nzPopconfirmTitle="This cannot be undone. Are you sure?"
-                 (nzOnConfirm)="emptyTrash()"></i>
+            <a nz-tooltip nzTooltipTitle="Clear output">
+              <i
+                nz-icon
+                nzType="fire"
+                nz-popconfirm
+                nzPopconfirmTitle="Do you want to clear all output?"
+                (nzOnConfirm)="paragraphClearAllOutput(node.origin.id)"
+              ></i>
             </a>
-          </span>
+            <a nz-tooltip nzTooltipTitle="Move note to Trash">
+              <i
+                nz-icon
+                nzType="delete"
+                nz-popconfirm
+                nzPopconfirmTitle="This note will be moved to trash."
+                (nzOnConfirm)="moveNoteToTrash(node.origin.id)"
+              ></i>
+            </a>
+          </ng-container>
+          <ng-template #trashFileTpl>
+            <a nz-tooltip nzTooltipTitle="Restore note">
+              <i nz-icon nzType="undo" 
(click)="restoreNote(node.origin.id)"></i>
+            </a>
+            <a nz-tooltip nzTooltipTitle="Remove note permanently">
+              <i
+                nz-icon
+                nzType="delete"
+                nz-popconfirm
+                nzPopconfirmTitle="This cannot be undone. Are you sure?"
+                (nzOnConfirm)="deleteNote(node.origin.id)"
+              ></i>
+            </a>
+          </ng-template>
+        </span>
+      </span>
+      <span class="folder" *ngSwitchCase="'trash'">
+        <a class="name" (click)="toggleFolder(node)">
+          <i nz-icon nzType="delete" nzTheme="fill"></i>
+          {{ node.title }}
+        </a>
+        <span class="operation">
+          <a nz-tooltip nzTooltipTitle="Restore all">
+            <i
+              nz-icon
+              nzType="undo"
+              nz-popconfirm
+              nzPopconfirmTitle="Folders and notes in the trash will be merged 
into their original position."
+              (nzOnConfirm)="restoreAll()"
+            ></i>
+          </a>
+          <a nz-tooltip nzTooltipTitle="Empty all">
+            <i
+              nz-icon
+              nzType="delete"
+              nz-popconfirm
+              nzPopconfirmTitle="This cannot be undone. Are you sure?"
+              (nzOnConfirm)="emptyTrash()"
+            ></i>
+          </a>
         </span>
       </span>
+    </span>
   </ng-template>
-
 </div>
diff --git 
a/zeppelin-web-angular/src/app/share/note-create/note-create.component.html 
b/zeppelin-web-angular/src/app/share/note-create/note-create.component.html
index 4633f5dbaf..b9da5f0a04 100644
--- a/zeppelin-web-angular/src/app/share/note-create/note-create.component.html
+++ b/zeppelin-web-angular/src/app/share/note-create/note-create.component.html
@@ -13,17 +13,22 @@
 <form nz-form nzLayout="vertical">
   <nz-form-item>
     <nz-form-label>
-      <ng-container *ngIf="cloneNote;else importTpl">Clone Note</ng-container>
+      <ng-container *ngIf="cloneNote; else importTpl">Clone Note</ng-container>
       <ng-template #importTpl>Note Name</ng-template>
     </nz-form-label>
     <nz-form-control>
-      <input nz-input [(ngModel)]="noteName" autofocus placeholder="Insert 
Note Name" name="noteName"/>
+      <input nz-input [(ngModel)]="noteName" autofocus placeholder="Insert 
Note Name" name="noteName" />
     </nz-form-control>
   </nz-form-item>
   <nz-form-item *ngIf="!cloneNote">
     <nz-form-label>Default Interpreter</nz-form-label>
     <nz-form-control>
-      <nz-select [(ngModel)]="defaultInterpreter" name="defaultInterpreter" 
nzPlaceHolder="Insert Default Interpreter" nzShowSearch>
+      <nz-select
+        [(ngModel)]="defaultInterpreter"
+        name="defaultInterpreter"
+        nzPlaceHolder="Insert Default Interpreter"
+        nzShowSearch
+      >
         <nz-option *ngFor="let i of listOfInterpreter" [nzValue]="i.name" 
[nzLabel]="i.name"></nz-option>
       </nz-select>
     </nz-form-control>
@@ -36,9 +41,8 @@
 
   <div class="modal-footer ant-modal-footer">
     <button nz-button nzType="primary" (click)="createNote()">
-      <ng-container *ngIf="cloneNote;else importTpl">Clone</ng-container>
+      <ng-container *ngIf="cloneNote; else importTpl">Clone</ng-container>
       <ng-template #importTpl>Create</ng-template>
     </button>
   </div>
 </form>
-
diff --git 
a/zeppelin-web-angular/src/app/share/note-import/note-import.component.html 
b/zeppelin-web-angular/src/app/share/note-import/note-import.component.html
index 8a16dde922..dfe25a7e6e 100644
--- a/zeppelin-web-angular/src/app/share/note-import/note-import.component.html
+++ b/zeppelin-web-angular/src/app/share/note-import/note-import.component.html
@@ -14,7 +14,7 @@
   <nz-form-item>
     <nz-form-label>Import As</nz-form-label>
     <nz-form-control>
-      <input nz-input [(ngModel)]="noteImportName" placeholder="Insert Note 
Name" name="noteImportName"/>
+      <input nz-input [(ngModel)]="noteImportName" placeholder="Insert Note 
Name" name="noteImportName" />
     </nz-form-control>
   </nz-form-item>
 </form>
@@ -27,7 +27,8 @@
       </p>
       <p class="ant-upload-text">Click or drag JSON file to this area to 
upload</p>
       <p class="ant-upload-hint">
-        JSON file size cannot exceed <strong class="tips warning">{{maxLimit | 
humanizeBytes}}</strong>
+        JSON file size cannot exceed
+        <strong class="tips warning">{{ maxLimit | humanizeBytes }}</strong>
       </p>
     </nz-upload>
   </nz-tab>
@@ -36,12 +37,20 @@
       <nz-form-item>
         <nz-form-label>URL</nz-form-label>
         <nz-form-control nzErrorTip="URL is Required" #control="nzFormControl">
-          <input nz-input [(ngModel)]="importUrl" placeholder="Note URL" 
name="importUrl" required/>
+          <input nz-input [(ngModel)]="importUrl" placeholder="Note URL" 
name="importUrl" required />
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
         <nz-form-control>
-          <button nz-button nzType="primary" (click)="importNote()" 
[disabled]="control.status === 'error'" [nzLoading]="importLoading">Import 
Note</button>
+          <button
+            nz-button
+            nzType="primary"
+            (click)="importNote()"
+            [disabled]="control.status === 'error'"
+            [nzLoading]="importLoading"
+          >
+            Import Note
+          </button>
         </nz-form-control>
       </nz-form-item>
     </form>
diff --git 
a/zeppelin-web-angular/src/app/share/note-rename/note-rename.component.html 
b/zeppelin-web-angular/src/app/share/note-rename/note-rename.component.html
index f37415e04c..029054222b 100644
--- a/zeppelin-web-angular/src/app/share/note-rename/note-rename.component.html
+++ b/zeppelin-web-angular/src/app/share/note-rename/note-rename.component.html
@@ -14,7 +14,7 @@
   <nz-form-item>
     <nz-form-label>Please enter a new name</nz-form-label>
     <nz-form-control>
-      <input nz-input [(ngModel)]="newName" placeholder="Insert New Name" 
name="newName" required/>
+      <input nz-input [(ngModel)]="newName" placeholder="Insert New Name" 
name="newName" required />
     </nz-form-control>
   </nz-form-item>
   <div class="modal-footer ant-modal-footer">
diff --git 
a/zeppelin-web-angular/src/app/share/note-toc/note-toc.component.html 
b/zeppelin-web-angular/src/app/share/note-toc/note-toc.component.html
index 6f62ea50a0..7a1e9cd12e 100644
--- a/zeppelin-web-angular/src/app/share/note-toc/note-toc.component.html
+++ b/zeppelin-web-angular/src/app/share/note-toc/note-toc.component.html
@@ -17,7 +17,7 @@
     <span class="toc-message">Headings in the output show up here</span>
   </div>
   <div class="toc-row" *ngFor="let row of rows" 
(click)="onRowClick(row.paragraphId)">
-    <div *ngFor="let _ of Arr(row.level)" class="toc-indent">&nbsp;</div> 
+    <div *ngFor="let _ of Arr(row.level)" class="toc-indent">&nbsp;</div>
     <span [class.toc-top-level-heading]="row.level === 1">{{ row.title 
}}</span>
   </div>
 </div>
diff --git 
a/zeppelin-web-angular/src/app/share/resize-handle/resize-handle.component.html 
b/zeppelin-web-angular/src/app/share/resize-handle/resize-handle.component.html
index 72092e3932..d44d80aeec 100644
--- 
a/zeppelin-web-angular/src/app/share/resize-handle/resize-handle.component.html
+++ 
b/zeppelin-web-angular/src/app/share/resize-handle/resize-handle.component.html
@@ -10,14 +10,18 @@
   ~ limitations under the License.
   -->
 
-<svg t="1562061848995"
-     class="icon"
-     viewBox="0 0 1024 1024"
-     version="1.1"
-     xmlns="http://www.w3.org/2000/svg";
-     width="24"
-     height="24">
-  <path d="M938.666667 
938.666667h-85.333334v-85.333334h85.333334v85.333334m0-170.666667h-85.333334v-85.333333h85.333334v85.333333m-170.666667
 
170.666667h-85.333333v-85.333334h85.333333v85.333334m0-170.666667h-85.333333v-85.333333h85.333333v85.333333m-170.666667
 
170.666667h-85.333333v-85.333334h85.333333v85.333334m341.333334-341.333334h-85.333334v-85.333333h85.333334v85.333333z"
-        fill="currentColor"
-        p-id="2599"></path>
+<svg
+  t="1562061848995"
+  class="icon"
+  viewBox="0 0 1024 1024"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg";
+  width="24"
+  height="24"
+>
+  <path
+    d="M938.666667 
938.666667h-85.333334v-85.333334h85.333334v85.333334m0-170.666667h-85.333334v-85.333333h85.333334v85.333333m-170.666667
 
170.666667h-85.333333v-85.333334h85.333333v85.333334m0-170.666667h-85.333333v-85.333333h85.333333v85.333333m-170.666667
 
170.666667h-85.333333v-85.333334h85.333333v85.333334m341.333334-341.333334h-85.333334v-85.333333h85.333334v85.333333z"
+    fill="currentColor"
+    p-id="2599"
+  ></path>
 </svg>
diff --git 
a/zeppelin-web-angular/src/app/visualizations/area-chart/area-chart-visualization.component.html
 
b/zeppelin-web-angular/src/app/visualizations/area-chart/area-chart-visualization.component.html
index 4b4caf1d14..3b060de790 100644
--- 
a/zeppelin-web-angular/src/app/visualizations/area-chart/area-chart-visualization.component.html
+++ 
b/zeppelin-web-angular/src/app/visualizations/area-chart/area-chart-visualization.component.html
@@ -11,13 +11,11 @@
   -->
 
 <div [hidden]="!config?.optionOpen" class="vis-tools">
-  <zeppelin-visualization-pivot-setting
-    [visualization]="visualization">
-  </zeppelin-visualization-pivot-setting>
+  <zeppelin-visualization-pivot-setting 
[visualization]="visualization"></zeppelin-visualization-pivot-setting>
   <zeppelin-visualization-x-axis-setting
     [visualization]="visualization"
-    mode="stackedAreaChart">
-  </zeppelin-visualization-x-axis-setting>
+    mode="stackedAreaChart"
+  ></zeppelin-visualization-x-axis-setting>
 </div>
 <div nz-form nzLayout="inline" class="area-chart-setting">
   <nz-form-item>
@@ -31,5 +29,4 @@
     </nz-form-control>
   </nz-form-item>
 </div>
-<div #container>
-</div>
+<div #container></div>
diff --git 
a/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.html
 
b/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.html
index eb79866821..3bcbb71f60 100644
--- 
a/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.html
+++ 
b/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.html
@@ -11,13 +11,11 @@
   -->
 
 <div [hidden]="!config?.optionOpen" class="vis-tools">
-  <zeppelin-visualization-pivot-setting
-    [visualization]="visualization">
-  </zeppelin-visualization-pivot-setting>
+  <zeppelin-visualization-pivot-setting 
[visualization]="visualization"></zeppelin-visualization-pivot-setting>
   <zeppelin-visualization-x-axis-setting
     [visualization]="visualization"
-    mode="multiBarChart">
-  </zeppelin-visualization-x-axis-setting>
+    mode="multiBarChart"
+  ></zeppelin-visualization-x-axis-setting>
   <div nz-form nzLayout="inline" class="bar-chart-setting">
     <nz-form-item>
       <nz-form-label>View</nz-form-label>
@@ -30,5 +28,4 @@
     </nz-form-item>
   </div>
 </div>
-<div #container>
-</div>
+<div #container></div>
diff --git 
a/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.html
 
b/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.html
index 7333cee57b..fedb2a5ad0 100644
--- 
a/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.html
+++ 
b/zeppelin-web-angular/src/app/visualizations/common/scatter-setting/scatter-setting.component.html
@@ -11,88 +11,75 @@
   -->
 
 <nz-card id="fields-drop-group" nzTitle="Available Fields" nzSize="small" 
cdkDropListGroup>
-  <div cdkDropList
-       id="columns-list"
-       [cdkDropListData]="columns"
-       [cdkDropListEnterPredicate]="noReturnPredicate">
-    <span class="drag-tag field-item"
-          *ngFor="let item of columns"
-          cdkDrag
-          cdkDragBoundary="#fields-drop-group">{{item.name}}</span>
+  <div cdkDropList id="columns-list" [cdkDropListData]="columns" 
[cdkDropListEnterPredicate]="noReturnPredicate">
+    <span class="drag-tag field-item" *ngFor="let item of columns" cdkDrag 
cdkDragBoundary="#fields-drop-group">
+      {{ item.name }}
+    </span>
   </div>
   <div class="field-setting-wrap" nz-row [nzGutter]="8">
     <div nz-col [nzSpan]="6">
-      <nz-card nzTitle="XAxis"
-               nzSize="small">
-        <div class="drag-wrap"
-             cdkDropList
-             (cdkDropListDropped)="drop($event)"
-             [cdkDropListData]="field.xAxis">
-          <span class="drag-tag field-item"
-                *ngFor="let item of field.xAxis; index as i"
-                [cdkDragDisabled]="true"
-                cdkDrag
-                cdkDragBoundary="#fields-drop-group">
-            {{item.name}}
+      <nz-card nzTitle="XAxis" nzSize="small">
+        <div class="drag-wrap" cdkDropList (cdkDropListDropped)="drop($event)" 
[cdkDropListData]="field.xAxis">
+          <span
+            class="drag-tag field-item"
+            *ngFor="let item of field.xAxis; index as i"
+            [cdkDragDisabled]="true"
+            cdkDrag
+            cdkDragBoundary="#fields-drop-group"
+          >
+            {{ item.name }}
             <i nz-icon nzType="close" (click)="clean(field.xAxis)"></i>
           </span>
         </div>
       </nz-card>
     </div>
     <div nz-col [nzSpan]="6">
-      <nz-card nzTitle="YAxis"
-               nzSize="small">
-        <div class="drag-wrap"
-             cdkDropList
-             (cdkDropListDropped)="drop($event)"
-             [cdkDropListData]="field.yAxis">
-          <span class="drag-tag field-item"
-                *ngFor="let item of field.yAxis; index as i"
-                [cdkDragDisabled]="true"
-                cdkDrag
-                cdkDragBoundary="#fields-drop-group">
-            {{item.name}}
+      <nz-card nzTitle="YAxis" nzSize="small">
+        <div class="drag-wrap" cdkDropList (cdkDropListDropped)="drop($event)" 
[cdkDropListData]="field.yAxis">
+          <span
+            class="drag-tag field-item"
+            *ngFor="let item of field.yAxis; index as i"
+            [cdkDragDisabled]="true"
+            cdkDrag
+            cdkDragBoundary="#fields-drop-group"
+          >
+            {{ item.name }}
             <i nz-icon nzType="close" (click)="clean(field.yAxis)"></i>
           </span>
         </div>
       </nz-card>
     </div>
     <div nz-col [nzSpan]="6">
-      <nz-card nzTitle="Group"
-               nzSize="small">
-        <div class="drag-wrap"
-             cdkDropList
-             (cdkDropListDropped)="drop($event)"
-             [cdkDropListData]="field.group">
-            <span class="drag-tag field-item"
-                  *ngFor="let item of field.group; index as i"
-                  [cdkDragDisabled]="true"
-                  cdkDrag
-                  cdkDragBoundary="#fields-drop-group">
-            {{item.name}}
-              <i nz-icon nzType="close" (click)="clean(field.group)"></i>
+      <nz-card nzTitle="Group" nzSize="small">
+        <div class="drag-wrap" cdkDropList (cdkDropListDropped)="drop($event)" 
[cdkDropListData]="field.group">
+          <span
+            class="drag-tag field-item"
+            *ngFor="let item of field.group; index as i"
+            [cdkDragDisabled]="true"
+            cdkDrag
+            cdkDragBoundary="#fields-drop-group"
+          >
+            {{ item.name }}
+            <i nz-icon nzType="close" (click)="clean(field.group)"></i>
           </span>
         </div>
       </nz-card>
     </div>
     <div nz-col [nzSpan]="6">
-      <nz-card nzTitle="Size"
-               nzSize="small">
-        <div class="drag-wrap"
-             cdkDropList
-             (cdkDropListDropped)="drop($event)"
-             [cdkDropListData]="field.size">
-            <span class="drag-tag field-item"
-                  *ngFor="let item of field.size; index as i"
-                  [cdkDragDisabled]="true"
-                  cdkDrag
-                  cdkDragBoundary="#fields-drop-group">
-            {{item.name}}
-              <i nz-icon nzType="close" (click)="clean(field.size)"></i>
+      <nz-card nzTitle="Size" nzSize="small">
+        <div class="drag-wrap" cdkDropList (cdkDropListDropped)="drop($event)" 
[cdkDropListData]="field.size">
+          <span
+            class="drag-tag field-item"
+            *ngFor="let item of field.size; index as i"
+            [cdkDragDisabled]="true"
+            cdkDrag
+            cdkDragBoundary="#fields-drop-group"
+          >
+            {{ item.name }}
+            <i nz-icon nzType="close" (click)="clean(field.size)"></i>
           </span>
         </div>
       </nz-card>
     </div>
-
   </div>
 </nz-card>
diff --git 
a/zeppelin-web-angular/src/app/visualizations/common/x-axis-setting/x-axis-setting.component.html
 
b/zeppelin-web-angular/src/app/visualizations/common/x-axis-setting/x-axis-setting.component.html
index cd11081ab0..8c8c3702a3 100644
--- 
a/zeppelin-web-angular/src/app/visualizations/common/x-axis-setting/x-axis-setting.component.html
+++ 
b/zeppelin-web-angular/src/app/visualizations/common/x-axis-setting/x-axis-setting.component.html
@@ -24,15 +24,14 @@
   <nz-form-item *ngIf="xLabelStatus === 'rotate'">
     <nz-form-label>degree</nz-form-label>
     <nz-form-control>
-      <input nz-input
-             style="width: 50px"
-             placeholder="degree"
-             [(ngModel)]="degree"
-             (keydown.enter)="onDegreeChange()"
-             (blur)="onDegreeChange()" />
+      <input
+        nz-input
+        style="width: 50px"
+        placeholder="degree"
+        [(ngModel)]="degree"
+        (keydown.enter)="onDegreeChange()"
+        (blur)="onDegreeChange()"
+      />
     </nz-form-control>
   </nz-form-item>
-
-
-
 </div>
diff --git 
a/zeppelin-web-angular/src/app/visualizations/line-chart/line-chart-visualization.component.html
 
b/zeppelin-web-angular/src/app/visualizations/line-chart/line-chart-visualization.component.html
index cb8faab7ed..c5552c8baa 100644
--- 
a/zeppelin-web-angular/src/app/visualizations/line-chart/line-chart-visualization.component.html
+++ 
b/zeppelin-web-angular/src/app/visualizations/line-chart/line-chart-visualization.component.html
@@ -11,11 +11,9 @@
   -->
 
 <div [hidden]="!config?.optionOpen" class="vis-tools">
-  <zeppelin-visualization-pivot-setting
-    [visualization]="visualization">
-  </zeppelin-visualization-pivot-setting>
+  <zeppelin-visualization-pivot-setting 
[visualization]="visualization"></zeppelin-visualization-pivot-setting>
   <div class="line-setting">
-    <label nz-checkbox [(ngModel)]="forceY" 
(ngModelChange)="settingChange()">Force Y to 0 </label>
+    <label nz-checkbox [(ngModel)]="forceY" 
(ngModelChange)="settingChange()">Force Y to 0</label>
     <br />
     <label nz-checkbox [(ngModel)]="lineWithFocus" 
(ngModelChange)="settingChange()">
       Zoom
@@ -24,21 +22,22 @@
     <br />
     <label nz-checkbox [(ngModel)]="isDateFormat" 
(ngModelChange)="settingChange()">
       Date Format
-      <input class="format-input"
-             *ngIf="isDateFormat"
-             (click)="$event.stopPropagation()"
-             (blur)="settingChange()"
-             (keydown.enter)="settingChange()"
-             nz-input
-             nzSize="small"
-             placeholder="YYYY-MM-DD HH:mm"
-             [(ngModel)]="dateFormat" />
+      <input
+        class="format-input"
+        *ngIf="isDateFormat"
+        (click)="$event.stopPropagation()"
+        (blur)="settingChange()"
+        (keydown.enter)="settingChange()"
+        nz-input
+        nzSize="small"
+        placeholder="YYYY-MM-DD HH:mm"
+        [(ngModel)]="dateFormat"
+      />
     </label>
   </div>
   <zeppelin-visualization-x-axis-setting
     [visualization]="visualization"
-    mode="lineChart">
-  </zeppelin-visualization-x-axis-setting>
-</div>
-<div #container>
+    mode="lineChart"
+  ></zeppelin-visualization-x-axis-setting>
 </div>
+<div #container></div>
diff --git 
a/zeppelin-web-angular/src/app/visualizations/pie-chart/pie-chart-visualization.component.html
 
b/zeppelin-web-angular/src/app/visualizations/pie-chart/pie-chart-visualization.component.html
index 5ddf300130..667f6de8bc 100644
--- 
a/zeppelin-web-angular/src/app/visualizations/pie-chart/pie-chart-visualization.component.html
+++ 
b/zeppelin-web-angular/src/app/visualizations/pie-chart/pie-chart-visualization.component.html
@@ -11,9 +11,6 @@
   -->
 
 <div [hidden]="!config?.optionOpen" class="vis-tools">
-  <zeppelin-visualization-pivot-setting
-    [visualization]="visualization">
-  </zeppelin-visualization-pivot-setting>
-</div>
-<div #container>
+  <zeppelin-visualization-pivot-setting 
[visualization]="visualization"></zeppelin-visualization-pivot-setting>
 </div>
+<div #container></div>
diff --git 
a/zeppelin-web-angular/src/app/visualizations/scatter-chart/scatter-chart-visualization.component.html
 
b/zeppelin-web-angular/src/app/visualizations/scatter-chart/scatter-chart-visualization.component.html
index ea1e3792c2..ff18da9f58 100644
--- 
a/zeppelin-web-angular/src/app/visualizations/scatter-chart/scatter-chart-visualization.component.html
+++ 
b/zeppelin-web-angular/src/app/visualizations/scatter-chart/scatter-chart-visualization.component.html
@@ -11,9 +11,6 @@
   -->
 
 <div [hidden]="!config?.optionOpen" class="vis-tools">
-  <zeppelin-visualization-scatter-setting
-    [visualization]="visualization">
-  </zeppelin-visualization-scatter-setting>
-</div>
-<div #container>
+  <zeppelin-visualization-scatter-setting 
[visualization]="visualization"></zeppelin-visualization-scatter-setting>
 </div>
+<div #container></div>
diff --git 
a/zeppelin-web-angular/src/app/visualizations/table/table-visualization.component.html
 
b/zeppelin-web-angular/src/app/visualizations/table/table-visualization.component.html
index 0aed77a5b7..a3aa5f4693 100644
--- 
a/zeppelin-web-angular/src/app/visualizations/table/table-visualization.component.html
+++ 
b/zeppelin-web-angular/src/app/visualizations/table/table-visualization.component.html
@@ -10,11 +10,7 @@
   ~ limitations under the License.
   -->
 
-<button class="export-dropdown"
-        nz-button
-        nz-dropdown
-        nzSize="small"
-        [nzDropdownMenu]="menu">
+<button class="export-dropdown" nz-button nz-dropdown nzSize="small" 
[nzDropdownMenu]="menu">
   <span>Export</span>
   <i nz-icon nzType="down"></i>
 </button>
@@ -34,91 +30,106 @@
     </li>
   </ul>
 </nz-dropdown-menu>
-<nz-table #table
-          nzSize="small"
-          nzShowSizeChanger
-          [nzScroll]="{ x: '1300px' }"
-          [nzData]="rows"
-          [nzFooter]="aggregatesFooter">
+<nz-table
+  #table
+  nzSize="small"
+  nzShowSizeChanger
+  [nzScroll]="{ x: '1300px' }"
+  [nzData]="rows"
+  [nzFooter]="aggregatesFooter"
+>
   <thead>
-  <tr>
-    <th *ngFor="let col of columns"
+    <tr>
+      <th
+        *ngFor="let col of columns"
         nzWidth="200px"
         nzShowSort
         nzCustomFilter
         [nzSortKey]="col"
-        (nzSortChange)="onSortChange($event, col)">
-      {{col}}
-      <i
-        #dropdown="nzDropdown"
-        nz-icon
-        nzType="down"
-        nzTrigger="click"
-        nzPlacement="bottomRight"
-        [nzClickHide]="false"
-        [nzDropdownMenu]="filterMenu"
-        nzTableFilter
-        [nzRotate]="dropdown.nzVisible ? 180 : 0"
-        class="ant-table-filter-icon filter-icon"
-        [class.ant-table-filter-open]="dropdown.nzVisible"
-        nz-dropdown
-      ></i>
-      <nz-dropdown-menu #filterMenu="nzDropdownMenu">
-        <ul nz-menu class="th-dropdown">
-          <li nz-menu-group class="search-bar">
-            <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
-              <input type="text" nz-input placeholder="Search..."
-                     (blur)="onSearch()"
-                     (keydown.enter)="onSearch()"
-                     [(ngModel)]="colOptions.get(col).term"/>
-            </nz-input-group>
-            <ng-template #suffixIconButton>
-              <button nz-button nzSearch nzType="primary" (click)="onSearch()">
-                <i nz-icon nzType="search" nzTheme="outline"></i>
-              </button>
-            </ng-template>
-          </li>
-          <li nz-menu-divider></li>
-          <li nz-menu-group>
-            <span title>Type</span>
-            <ul>
-              <li *ngFor="let type of types"
+        (nzSortChange)="onSortChange($event, col)"
+      >
+        {{ col }}
+        <i
+          #dropdown="nzDropdown"
+          nz-icon
+          nzType="down"
+          nzTrigger="click"
+          nzPlacement="bottomRight"
+          [nzClickHide]="false"
+          [nzDropdownMenu]="filterMenu"
+          nzTableFilter
+          [nzRotate]="dropdown.nzVisible ? 180 : 0"
+          class="ant-table-filter-icon filter-icon"
+          [class.ant-table-filter-open]="dropdown.nzVisible"
+          nz-dropdown
+        ></i>
+        <nz-dropdown-menu #filterMenu="nzDropdownMenu">
+          <ul nz-menu class="th-dropdown">
+            <li nz-menu-group class="search-bar">
+              <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
+                <input
+                  type="text"
+                  nz-input
+                  placeholder="Search..."
+                  (blur)="onSearch()"
+                  (keydown.enter)="onSearch()"
+                  [(ngModel)]="colOptions.get(col).term"
+                />
+              </nz-input-group>
+              <ng-template #suffixIconButton>
+                <button nz-button nzSearch nzType="primary" 
(click)="onSearch()">
+                  <i nz-icon nzType="search" nzTheme="outline"></i>
+                </button>
+              </ng-template>
+            </li>
+            <li nz-menu-divider></li>
+            <li nz-menu-group>
+              <span title>Type</span>
+              <ul>
+                <li
+                  *ngFor="let type of types"
                   nz-menu-item
                   [nzSelected]="colOptions.get(col).type === type"
-                  (click)="onChangeType(type, col)">
-                {{type | titlecase}}
-              </li>
-            </ul>
-          </li>
-          <li nz-menu-divider></li>
-          <li nz-menu-group>
-            <span title>Aggregation</span>
-            <ul>
-              <li *ngFor="let aggregation of aggregations"
+                  (click)="onChangeType(type, col)"
+                >
+                  {{ type | titlecase }}
+                </li>
+              </ul>
+            </li>
+            <li nz-menu-divider></li>
+            <li nz-menu-group>
+              <span title>Aggregation</span>
+              <ul>
+                <li
+                  *ngFor="let aggregation of aggregations"
                   nz-menu-item
                   [nzSelected]="colOptions.get(col).aggregation === 
aggregation"
-                  (click)="onChangeAggregation(aggregation, col)">
-                {{aggregation | titlecase}}
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </nz-dropdown-menu>
-    </th>
-  </tr>
+                  (click)="onChangeAggregation(aggregation, col)"
+                >
+                  {{ aggregation | titlecase }}
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nz-dropdown-menu>
+      </th>
+    </tr>
   </thead>
   <tbody>
-  <tr *ngFor="let data of table.data">
-    <td *ngFor="let col of columns">{{data[col]}}</td>
-  </tr>
+    <tr *ngFor="let data of table.data">
+      <td *ngFor="let col of columns">{{ data[col] }}</td>
+    </tr>
   </tbody>
 </nz-table>
 <ng-template #aggregatesFooter>
   <div class="aggregation-wrap">
     <span *ngFor="let col of columns">
-    <span class="aggregation-item" *ngIf="colOptions.get(col).aggregation as 
aggregation">
-      {{aggregation}}(<strong>{{col}}</strong>): 
<span>{{colOptions.get(col).aggregationValue}} </span>
-    </span>
+      <span class="aggregation-item" *ngIf="colOptions.get(col).aggregation as 
aggregation">
+        {{ aggregation }}(
+        <strong>{{ col }}</strong>
+        ):
+        <span>{{ colOptions.get(col).aggregationValue }}</span>
+      </span>
     </span>
   </div>
 </ng-template>
diff --git a/zeppelin-web-angular/src/index.html 
b/zeppelin-web-angular/src/index.html
index f0c70594df..0e2b2a1604 100644
--- a/zeppelin-web-angular/src/index.html
+++ b/zeppelin-web-angular/src/index.html
@@ -12,26 +12,26 @@
 
 <!DOCTYPE html>
 <html lang="en" class="light">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" href="./assets/images/zeppelin.png" type="image/x-icon">
-  <title>Zeppelin</title>
-</head>
-<body>
-<zeppelin-root>
-  <section class="spin">
-    <div>
-      <div class="logo"></div>
-      <div class="spin-text">
-        <h1 class="brand-title" style="display: none">Zeppelin</h1>
-        <span class="status" style="display: none">Booting ...</span>
-      </div>
-    </div>
-  </section>
-</zeppelin-root>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="./assets/images/zeppelin.png" type="image/x-icon" />
+    <title>Zeppelin</title>
+  </head>
+  <body>
+    <zeppelin-root>
+      <section class="spin">
+        <div>
+          <div class="logo"></div>
+          <div class="spin-text">
+            <h1 class="brand-title" style="display: none">Zeppelin</h1>
+            <span class="status" style="display: none">Booting ...</span>
+          </div>
+        </div>
+      </section>
+    </zeppelin-root>
 
-  <script type="text/x-mathjax-config">
+    <script type="text/x-mathjax-config">
       var config = {
         extensions: ["tex2jax.js"],
         jax: ["input/TeX", "output/HTML-CSS"],
@@ -53,5 +53,5 @@
       );
       MathJax.Hub.Config(config);
     </script>
-</body>
+  </body>
 </html>


Reply via email to