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"> </div> + <div *ngFor="let _ of Arr(row.level)" class="toc-indent"> </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>