[FLINK-23990][runtime-web] Replace custom monaco editor with nz-code-…

…editor

flink-runtime-web/web-dashboard/angular.json

@@ -48,7 +48,7 @@
  {
  "glob": "**/*",
  "input": "./node_modules/monaco-editor/min/vs",
- "output": "libs/vs"
+ "output": "/assets/vs/"
  }
  ],
  "styles": [

flink-runtime-web/web-dashboard/src/app/app.component.ts

@@ -20,8 +20,6 @@ import { Component } from '@angular/core';
 import { fromEvent, merge } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 
-import { MonacoEditorService } from 'share/common/monaco-editor/monaco-editor.service';
-
 import { StatusService } from 'services';
 
 @Component({
@@ -52,8 +50,7 @@ export class AppComponent {
 
  toggleCollapse(): void {
  this.collapsed = !this.collapsed;
- this.monacoEditorService.layout();
  }
 
- constructor(public statusService: StatusService, private monacoEditorService: MonacoEditorService) {}
+ constructor(public statusService: StatusService) {}
 }

flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.component.less

@@ -18,9 +18,11 @@
 @import "theme";
 
 :host {
- position: relative;
- display: block;
+ display: flex;
+ flex: 1;
+ flex-flow: column nowrap;
  box-sizing: border-box;
+ height: 100%;
  border: 1px solid @border-color-split;
  border-radius: 2px;
  background: @body-background;

flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.module.ts

@@ -18,9 +18,11 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor';
 import { NzGridModule } from 'ng-zorro-antd/grid';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzProgressModule } from 'ng-zorro-antd/progress';
@@ -48,7 +50,9 @@ import { JobManagerStdoutComponent } from './stdout/job-manager-stdout.component
  NzGridModule,
  NzIconModule,
  NzToolTipModule,
- NzBreadCrumbModule
+ NzBreadCrumbModule,
+ NzCodeEditorModule,
+ FormsModule
  ],
  declarations: [
  JobManagerComponent,

flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.html

@@ -36,4 +36,11 @@
  (fullScreen)="toggleFullScreen($event)"
  ></flink-refresh-download>
 </div>
-<flink-monaco-editor [value]="logs"></flink-monaco-editor>
+<div class="editor-container">
+ <nz-code-editor
+ flinkAutoResize
+ [nzLoading]="isLoading"
+ [ngModel]="logs"
+ [nzEditorOption]="editorOptions"
+ ></nz-code-editor>
+</div>

flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.less

@@ -18,13 +18,10 @@
 
 @import "theme";
 
-flink-monaco-editor {
- height: calc(~"100vh - 205px");
-}
-
 :host {
- display: block;
- height: 100%;
+ display: flex;
+ flex: 1;
+ flex-flow: column nowrap;
 
  &.full-screen {
  position: fixed;
@@ -34,23 +31,34 @@ flink-monaco-editor {
  left: 0;
  z-index: 99;
  background: @component-background;
+ }
 
- flink-monaco-editor {
- height: calc(~"100vh - 46px");
+ .editor-container {
+ position: relative;
+ flex: 1;
+
+ nz-code-editor {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
  }
  }
-}
 
-.breadcrumb {
- position: relative;
- padding: 12px 24px;
- border-bottom: 1px solid @border-color-split;
- background: @component-background;
-}
+ .breadcrumb {
+ position: relative;
+ display: flex;
+ flex-flow: row nowrap;
+ padding: 12px 24px;
+ border-bottom: 1px solid @border-color-split;
+ background: @component-background;
 
-flink-refresh-download {
- position: absolute;
- top: 0;
- right: 12px;
- line-height: 47px;
+ flink-refresh-download {
+ position: absolute;
+ top: 0;
+ right: 12px;
+ line-height: 47px;
+ }
+ }
 }

flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.ts

@@ -16,11 +16,13 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { finalize } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { finalize, takeUntil } from 'rxjs/operators';
 
-import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.component';
+import { EditorOptions } from 'ng-zorro-antd/code-editor/typings';
+import { flinkEditorOptions } from 'share/common/editor/editor-config';
 
 import { JobManagerService } from 'services';
 
@@ -33,13 +35,15 @@ import { JobManagerService } from 'services';
  },
  styleUrls: ['./job-manager-log-detail.component.less']
 })
-export class JobManagerLogDetailComponent implements OnInit {
+export class JobManagerLogDetailComponent implements OnInit, OnDestroy {
  logs = '';
  logName = '';
  downloadUrl = '';
  isLoading = false;
  isFullScreen = false;
- @ViewChild(MonacoEditorComponent, { static: true }) monacoEditorComponent: MonacoEditorComponent;
+ editorOptions: EditorOptions = flinkEditorOptions;
+ private destroy$ = new Subject<void>();
+
  constructor(
  private jobManagerService: JobManagerService,
  private cdr: ChangeDetectorRef,
@@ -54,27 +58,27 @@ export class JobManagerLogDetailComponent implements OnInit {
  .pipe(
  finalize(() => {
  this.isLoading = false;
- this.layoutEditor();
  this.cdr.markForCheck();
- })
+ }),
+ takeUntil(this.destroy$)
  )
  .subscribe(data => {
  this.logs = data.data;
  this.downloadUrl = data.url;
  });
  }
 
- layoutEditor(): void {
- setTimeout(() => this.monacoEditorComponent.layout());
- }
-
  toggleFullScreen(fullScreen: boolean): void {
  this.isFullScreen = fullScreen;
- this.layoutEditor();
  }
 
  ngOnInit(): void {
  this.logName = this.activatedRoute.snapshot.params.logName;
  this.reload();
  }
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
 }

flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.html

@@ -25,21 +25,25 @@
  [nzShowPagination]="false"
  [nzVirtualItemSize]="39"
  [nzVirtualForTrackBy]="trackByName"
- [nzScroll]="{ y: '700px' }"
+ [nzVirtualMinBufferPx]="480"
+ [nzVirtualMaxBufferPx]="480"
+ [nzScroll]="{ y: '650px' }"
  >
  <thead>
  <tr>
- <th>Log Name</th>
- <th>Size (KB)</th>
+ <th nzWidth="50%">Log Name</th>
+ <th nzWidth="50%">Size (KB)</th>
  </tr>
  </thead>
  <tbody>
- <tr *ngFor="let log of listOfLog">
- <td>
- <a [routerLink]="[log.name]">{{ log.name }}</a>
- </td>
- <td>{{ log.size / 1024 | number: '1.0-2' }}</td>
- </tr>
+ <ng-template nz-virtual-scroll let-data>
+ <tr>
+ <td>
+ <a [routerLink]="[data.name]">{{ data.name }}</a>
+ </td>
+ <td>{{ data.size / 1024 | number: '1.0-2' }}</td>
+ </tr>
+ </ng-template>
  </tbody>
  </nz-table>
 </nz-card>

flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.html

@@ -16,5 +16,10 @@
  ~ limitations under the License.
  -->
 
-<flink-monaco-editor [value]="logs"></flink-monaco-editor>
+<nz-code-editor
+ flinkAutoResize
+ [nzLoading]="loading"
+ [ngModel]="logs"
+ [nzEditorOption]="editorOptions"
+></nz-code-editor>
 <flink-refresh-download [compactMode]="true" [downloadHref]="'jobmanager/log'" [downloadName]="'jobmanager_log'" (reload)="reload()"></flink-refresh-download>

flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.less

@@ -16,11 +16,16 @@
  * limitations under the License.
  */
 
-flink-monaco-editor {
- height: calc(~"100vh - 160px");
-}
-
 :host {
  position: relative;
- display: block;
+ display: flex;
+ flex: 1;
+
+ nz-code-editor {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
 }

flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.ts

@@ -16,31 +16,46 @@
  * limitations under the License.
  */
 
-import { ChangeDetectorRef, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
 import { JobManagerService } from 'services';
-import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.component';
+import { EditorOptions } from 'ng-zorro-antd/code-editor/typings';
+import { flinkEditorOptions } from 'share/common/editor/editor-config';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
  selector: 'flink-job-manager-logs',
  templateUrl: './job-manager-logs.component.html',
  styleUrls: ['./job-manager-logs.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class JobManagerLogsComponent implements OnInit {
+export class JobManagerLogsComponent implements OnInit, OnDestroy {
  logs = '';
- @ViewChild(MonacoEditorComponent, { static: true }) monacoEditorComponent: MonacoEditorComponent;
+ loading = true;
+ editorOptions: EditorOptions = flinkEditorOptions;
+ private destroy$ = new Subject<void>();
 
  reload() {
- this.jobManagerService.loadLogs().subscribe(data => {
- this.monacoEditorComponent.layout();
- this.logs = data;
- this.cdr.markForCheck();
- });
+ this.loading = true;
+ this.cdr.markForCheck();
+ this.jobManagerService
+ .loadLogs()
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(data => {
+ this.loading = false;
+ this.logs = data;
+ this.cdr.markForCheck();
+ });
  }
 
  constructor(private jobManagerService: JobManagerService, private cdr: ChangeDetectorRef) {}
 
  ngOnInit() {
  this.reload();
  }
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
 }

flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.html

@@ -16,7 +16,12 @@
  ~ limitations under the License.
  -->
 
-<flink-monaco-editor [value]="stdout"></flink-monaco-editor>
+<nz-code-editor
+ flinkAutoResize
+ [nzLoading]="loading"
+ [ngModel]="stdout"
+ [nzEditorOption]="editorOptions"
+></nz-code-editor>
 <flink-refresh-download
  [compactMode]="true"
  [downloadHref]="'jobmanager/stdout'"

flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.less

@@ -16,11 +16,16 @@
  * limitations under the License.
  */
 
-flink-monaco-editor {
- height: calc(~"100vh - 160px");
-}
-
 :host {
  position: relative;
- display: block;
+ display: flex;
+ flex: 1;
+
+ nz-code-editor {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
 }