You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flink.apache.org by ar...@apache.org on 2021/11/12 12:50:26 UTC
[flink] 01/02: [FLINK-23990][runtime-web] Replace custom monaco
editor with nz-code-editor
This is an automated email from the ASF dual-hosted git repository.
arvid pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/flink.git
commit 1ccf8c46ec0c7de04419490acf76f52f4bdda1ae
Author: yangjunhan <ya...@sina.com>
AuthorDate: Mon Nov 1 17:42:12 2021 +0800
[FLINK-23990][runtime-web] Replace custom monaco editor with nz-code-editor
---
flink-runtime-web/web-dashboard/angular.json | 2 +-
.../web-dashboard/src/app/app.component.ts | 5 +-
.../pages/job-manager/job-manager.component.less | 6 +-
.../app/pages/job-manager/job-manager.module.ts | 6 +-
.../job-manager-log-detail.component.html | 9 +-
.../job-manager-log-detail.component.less | 48 +++++----
.../log-detail/job-manager-log-detail.component.ts | 28 +++---
.../log-list/job-manager-log-list.component.html | 22 ++--
.../logs/job-manager-logs.component.html | 7 +-
.../logs/job-manager-logs.component.less | 15 ++-
.../job-manager/logs/job-manager-logs.component.ts | 33 ++++--
.../stdout/job-manager-stdout.component.html | 7 +-
.../stdout/job-manager-stdout.component.less | 15 ++-
.../stdout/job-manager-stdout.component.ts | 34 +++++--
.../job/exceptions/job-exceptions.component.html | 28 ++++--
.../job/exceptions/job-exceptions.component.less | 42 +++++---
.../job/exceptions/job-exceptions.component.ts | 23 ++++-
.../src/app/pages/job/job.component.less | 37 ++++---
.../web-dashboard/src/app/pages/job/job.module.ts | 4 +-
.../pages/job/overview/job-overview.component.less | 8 +-
.../overview/list/job-overview-list.component.less | 3 +-
.../task-manager-log-detail.component.html | 9 +-
.../task-manager-log-detail.component.less | 55 +++++-----
.../task-manager-log-detail.component.ts | 54 +++++-----
.../log-list/task-manager-log-list.component.html | 22 ++--
.../logs/task-manager-logs.component.html | 7 +-
.../logs/task-manager-logs.component.less | 14 ++-
.../logs/task-manager-logs.component.ts | 46 ++++++---
.../metrics/task-manager-metrics.component.less | 1 +
.../stdout/task-manager-stdout.component.html | 7 +-
.../stdout/task-manager-stdout.component.less | 14 ++-
.../stdout/task-manager-stdout.component.ts | 46 ++++++---
.../pages/task-manager/task-manager.component.html | 2 +-
.../pages/task-manager/task-manager.component.less | 24 +++--
.../app/pages/task-manager/task-manager.module.ts | 6 +-
.../task-manager-thread-dump.component.html | 7 +-
.../task-manager-thread-dump.component.less | 14 ++-
.../task-manager-thread-dump.component.ts | 46 ++++++---
.../share/common/editor/auto-resize.directive.ts | 76 ++++++++++++++
.../src/app/share/common/editor/editor-config.ts | 12 +++
.../monaco-editor/monaco-editor.component.less | 25 -----
.../monaco-editor/monaco-editor.component.ts | 112 ---------------------
.../common/monaco-editor/monaco-editor.service.ts | 34 -------
.../web-dashboard/src/app/share/share.module.ts | 10 +-
.../web-dashboard/src/styles/index.less | 1 +
45 files changed, 583 insertions(+), 443 deletions(-)
diff --git a/flink-runtime-web/web-dashboard/angular.json b/flink-runtime-web/web-dashboard/angular.json
index 8784e25..0f4992b 100644
--- a/flink-runtime-web/web-dashboard/angular.json
+++ b/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": [
diff --git a/flink-runtime-web/web-dashboard/src/app/app.component.ts b/flink-runtime-web/web-dashboard/src/app/app.component.ts
index b371020..58ee07f 100644
--- a/flink-runtime-web/web-dashboard/src/app/app.component.ts
+++ b/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) {}
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.component.less b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.component.less
index 17becf5..f977f7d 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.component.less
+++ b/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;
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.module.ts b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.module.ts
index b00ce67..92537b0 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/job-manager.module.ts
+++ b/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,
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.html
index aa96ca1..e23669d 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.html
+++ b/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>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.less b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.less
index 6ff14b8..7a16baf 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.less
+++ b/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;
+ }
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.ts
index e89cb7b..3983148e 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-detail/job-manager-log-detail.component.ts
+++ b/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,9 +58,9 @@ export class JobManagerLogDetailComponent implements OnInit {
.pipe(
finalize(() => {
this.isLoading = false;
- this.layoutEditor();
this.cdr.markForCheck();
- })
+ }),
+ takeUntil(this.destroy$)
)
.subscribe(data => {
this.logs = data.data;
@@ -64,17 +68,17 @@ export class JobManagerLogDetailComponent implements OnInit {
});
}
- 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();
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.html
index 079b4bd..aea2be3 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.html
+++ b/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>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.html
index f2f9461..f89ca75 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.html
+++ b/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>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.less b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.less
index 805c75d..fb7b221 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.less
+++ b/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;
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.ts
index 24bde4b..f65e8dd 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.ts
@@ -16,9 +16,12 @@
* 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',
@@ -26,16 +29,23 @@ import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.
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) {}
@@ -43,4 +53,9 @@ export class JobManagerLogsComponent implements OnInit {
ngOnInit() {
this.reload();
}
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.html
index 4114e50..1a6393a 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.html
+++ b/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'"
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.less b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.less
index 805c75d..fb7b221 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.less
+++ b/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;
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.ts
index 16ff756..20ab2af 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.ts
@@ -16,9 +16,12 @@
* limitations under the License.
*/
-import { ChangeDetectorRef, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { 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';
@@ -28,16 +31,24 @@ import { JobManagerService } from 'services';
styleUrls: ['./job-manager-stdout.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class JobManagerStdoutComponent implements OnInit {
- @ViewChild(MonacoEditorComponent, { static: true }) monacoEditorComponent: MonacoEditorComponent;
+export class JobManagerStdoutComponent implements OnInit, OnDestroy {
stdout = '';
+ loading = true;
+ editorOptions: EditorOptions = flinkEditorOptions;
+ private destroy$ = new Subject<void>();
reload(): void {
- this.jobManagerService.loadStdout().subscribe(data => {
- this.monacoEditorComponent.layout();
- this.stdout = data;
- this.cdr.markForCheck();
- });
+ this.loading = true;
+ this.cdr.markForCheck();
+ this.jobManagerService
+ .loadStdout()
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(data => {
+ // this.monacoEditorComponent.layout();
+ this.loading = false;
+ this.stdout = data;
+ this.cdr.markForCheck();
+ });
}
constructor(private jobManagerService: JobManagerService, private cdr: ChangeDetectorRef) {}
@@ -45,4 +56,9 @@ export class JobManagerStdoutComponent implements OnInit {
ngOnInit(): void {
this.reload();
}
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.html
index 079bdb5..89c1df3 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.html
@@ -16,11 +16,21 @@
~ limitations under the License.
-->
-<nz-tabset [nzSize]="'small'" [nzAnimated]="{ inkBar: true, tabPane: false }">
- <nz-tab nzTitle="Root Exception" nzForceRender>
- <flink-monaco-editor [value]="rootException"></flink-monaco-editor>
+<nz-tabset
+ [nzSize]="'small'"
+ [nzAnimated]="{ inkBar: true, tabPane: false }"
+ [(nzSelectedIndex)]="index"
+>
+ <nz-tab nzTitle="Root Exception">
+ <nz-code-editor
+ *ngIf="index === 0"
+ flinkAutoResize
+ [nzLoading]="isLoading"
+ [ngModel]="rootException"
+ [nzEditorOption]="editorOptions"
+ ></nz-code-editor>
</nz-tab>
- <nz-tab nzTitle="Exception History" nzForceRender>
+ <nz-tab nzTitle="Exception History">
<nz-table
class="no-border small"
[nzSize]="'small'"
@@ -74,11 +84,13 @@
</tr>
<tr [nzExpand]="item.expand">
<td colspan="5" class="expand-td">
- <flink-monaco-editor
- *ngIf="item.expand"
+ <nz-code-editor
+ *ngIf="index === 1 && item.expand"
+ flinkAutoResize
class="subtask"
- [value]="item.selected.stacktrace"
- ></flink-monaco-editor>
+ [ngModel]="item.selected.stacktrace"
+ [nzEditorOption]="editorOptions"
+ ></nz-code-editor>
</td>
</tr>
</ng-container>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.less b/flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.less
index 967b2be..ebda788 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.less
@@ -19,30 +19,42 @@
@import "theme";
:host {
+ display: flex;
+ flex: 1;
+ flex-flow: column nowrap;
+
::ng-deep {
.ant-tabs-nav-list {
padding: 4px 16px;
}
}
-}
-nz-table {
- margin-top: -@margin-md;
-}
+ nz-tabset {
+ position: relative;
+ flex: 1;
+ }
-flink-monaco-editor {
- height: calc(~"100vh - 346px");
+ nz-code-editor {
+ position: relative;
+ height: calc(~"100vh - 310px");
- &.subtask {
- height: 300px;
+ &.subtask {
+ position: relative;
+ top: 0;
+ height: 300px;
+ }
}
-}
-.expand-td {
- display: block;
- padding: 0 !important;
-}
+ nz-table {
+ margin-top: -@margin-md;
+ }
-.exception-select {
- width: 300px;
+ .expand-td {
+ display: block;
+ padding: 0 !important;
+ }
+
+ .exception-select {
+ width: 300px;
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.ts
index 64c79d2..1c84bcd 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/exceptions/job-exceptions.component.ts
@@ -17,8 +17,12 @@
*/
import { formatDate } from '@angular/common';
-import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { distinctUntilChanged, flatMap, tap } from 'rxjs/operators';
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { distinctUntilChanged, mergeMap, takeUntil, tap } from 'rxjs/operators';
+
+import { EditorOptions } from 'ng-zorro-antd/code-editor/typings';
+import { flinkEditorOptions } from 'share/common/editor/editor-config';
import { ExceptionInfoInterface, RootExceptionInfoInterface } from 'interfaces';
import { JobService } from 'services';
@@ -58,13 +62,16 @@ const markGlobalFailure = function(exception: ExceptionInfoInterface): Exception
styleUrls: ['./job-exceptions.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class JobExceptionsComponent implements OnInit {
+export class JobExceptionsComponent implements OnInit, OnDestroy {
rootException = '';
exceptionHistory: ExceptionHistoryItem[] = [];
truncated = false;
isLoading = false;
maxExceptions = 0;
total = 0;
+ index = 0;
+ editorOptions: EditorOptions = flinkEditorOptions;
+ private destroy$ = new Subject<void>();
trackExceptionBy(_: number, node: ExceptionInfoInterface): number {
return node.timestamp;
@@ -75,11 +82,12 @@ export class JobExceptionsComponent implements OnInit {
this.jobService.jobDetail$
.pipe(
distinctUntilChanged((pre, next) => pre.jid === next.jid),
- flatMap(job => this.jobService.loadExceptions(job.jid, this.maxExceptions)),
+ mergeMap(job => this.jobService.loadExceptions(job.jid, this.maxExceptions)),
tap(() => {
this.isLoading = false;
this.cdr.markForCheck();
- })
+ }),
+ takeUntil(this.destroy$)
)
.subscribe(data => {
// @ts-ignore
@@ -109,4 +117,9 @@ export class JobExceptionsComponent implements OnInit {
ngOnInit(): void {
this.loadMore();
}
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/job.component.less b/flink-runtime-web/web-dashboard/src/app/pages/job/job.component.less
index 87f453e..3a04187 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/job.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/job.component.less
@@ -17,20 +17,27 @@
*/
@import "theme";
-.content {
- position: relative;
- box-sizing: border-box;
- margin-top: 16px;
- padding: 0;
- border: 1px solid @border-color-split;
- border-radius: 2px;
- background: @component-background;
- list-style: none;
- font-size: 14px;
- line-height: 1.5;
-}
-
-.router {
- width: 100%;
+:host {
+ display: flex;
+ flex-flow: column nowrap;
height: 100%;
+
+ .content {
+ flex: 0 1 auto;
+ box-sizing: border-box;
+ margin-top: 16px;
+ padding: 0;
+ border: 1px solid @border-color-split;
+ border-radius: 2px;
+ background: @component-background;
+ list-style: none;
+ font-size: 14px;
+ line-height: 1.5;
+
+ .router {
+ display: flex;
+ flex: 1;
+ flex-flow: column nowrap;
+ }
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/job.module.ts b/flink-runtime-web/web-dashboard/src/app/pages/job/job.module.ts
index ec4d036..3c1ca15 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/job.module.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/job.module.ts
@@ -23,6 +23,7 @@ import { FormsModule } from '@angular/forms';
import { NzAlertModule } from 'ng-zorro-antd/alert';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor';
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzEmptyModule } from 'ng-zorro-antd/empty';
@@ -63,7 +64,8 @@ import { JobTimelineComponent } from './timeline/job-timeline.component';
NzPopconfirmModule,
NzIconModule,
NzSelectModule,
- NzToolTipModule
+ NzToolTipModule,
+ NzCodeEditorModule
],
declarations: [
JobComponent,
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.component.less b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.component.less
index 9912d9c..f7ab50e 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.component.less
@@ -20,9 +20,8 @@
.container {
position: relative;
- overflow: hidden;
+ flex: 0 1 auto;
width: 100%;
- height: 500px;
border-bottom: solid 1px @border-color-split;
}
@@ -57,6 +56,7 @@ flink-job-overview-drawer {
:host {
position: relative;
- display: block;
- height: 100%;
+ display: flex;
+ flex: 1;
+ flex-flow: column nowrap;
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.less b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.less
index a624703..a3a10ad 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.less
@@ -19,7 +19,8 @@
:host {
position: relative;
- display: block;
+ display: flex;
+ flex: 1;
}
.name {
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.html b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.html
index edf9302..e1700cb 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.html
@@ -37,4 +37,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>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.less b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.less
index 819f6aa..82b4e11 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.less
@@ -16,22 +16,10 @@
@import "theme";
-flink-monaco-editor {
- height: calc(~"100vh - 386px");
- border: 1px solid @border-color-split;
-}
-
-.breadcrumb {
- position: relative;
- margin-bottom: 16px;
- padding: 12px 24px;
- border: 1px solid @border-color-split;
- background: @component-background;
-}
-
:host {
- display: block;
- height: 100%;
+ display: flex;
+ flex: 1;
+ flex-flow: column nowrap;
&.full-screen {
position: fixed;
@@ -41,23 +29,32 @@ flink-monaco-editor {
left: 0;
z-index: 99;
background: @component-background;
+ }
- .breadcrumb {
- margin-bottom: 0;
- border-top: 0;
- }
+ .editor-container {
+ position: relative;
+ flex: 1;
- flink-monaco-editor {
- height: calc(~"100vh - 46px");
- border-top: 0;
- border-bottom: 0;
+ nz-code-editor {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
}
}
-}
-flink-refresh-download {
- position: absolute;
- top: 0;
- right: 12px;
- line-height: 47px;
+ .breadcrumb {
+ position: relative;
+ 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;
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.ts
index 41a2219..86edd8a 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.ts
@@ -14,11 +14,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 { first } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { first, 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 { TaskManagerDetailInterface } from 'interfaces';
import { TaskManagerService } from 'services';
@@ -32,14 +34,15 @@ import { TaskManagerService } from 'services';
},
styleUrls: ['./task-manager-log-detail.component.less']
})
-export class TaskManagerLogDetailComponent implements OnInit {
+export class TaskManagerLogDetailComponent implements OnInit, OnDestroy {
logs = '';
logName = '';
downloadUrl = '';
isLoading = false;
taskManagerDetail: TaskManagerDetailInterface;
isFullScreen = false;
- @ViewChild(MonacoEditorComponent, { static: true }) monacoEditorComponent: MonacoEditorComponent;
+ editorOptions: EditorOptions = flinkEditorOptions;
+ private destroy$ = new Subject<void>();
constructor(
private taskManagerService: TaskManagerService,
@@ -50,36 +53,37 @@ export class TaskManagerLogDetailComponent implements OnInit {
reloadLog(): void {
this.isLoading = true;
this.cdr.markForCheck();
- this.taskManagerService.loadLog(this.taskManagerDetail.id, this.logName).subscribe(
- data => {
- this.logs = data.data;
- this.downloadUrl = data.url;
- this.isLoading = false;
- this.layoutEditor();
- this.cdr.markForCheck();
- },
- () => {
- this.isLoading = false;
- this.layoutEditor();
- this.cdr.markForCheck();
- }
- );
+ this.taskManagerService
+ .loadLog(this.taskManagerDetail.id, this.logName)
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(
+ data => {
+ this.logs = data.data;
+ this.downloadUrl = data.url;
+ this.isLoading = false;
+ this.cdr.markForCheck();
+ },
+ () => {
+ this.isLoading = false;
+ this.cdr.markForCheck();
+ }
+ );
}
toggleFullScreen(fullScreen: boolean): void {
this.isFullScreen = fullScreen;
- this.layoutEditor();
- }
-
- layoutEditor(): void {
- setTimeout(() => this.monacoEditorComponent.layout());
}
ngOnInit(): void {
- this.taskManagerService.taskManagerDetail$.pipe(first()).subscribe(data => {
+ this.taskManagerService.taskManagerDetail$.pipe(first(), takeUntil(this.destroy$)).subscribe(data => {
this.taskManagerDetail = data;
this.logName = this.activatedRoute.snapshot.params.logName;
this.reloadLog();
});
}
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.html b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.html
index 3506ec6..0323ab4 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.html
@@ -24,21 +24,25 @@
[nzShowPagination]="false"
[nzVirtualItemSize]="39"
[nzVirtualForTrackBy]="trackByName"
- [nzScroll]="{ y: '570px' }"
+ [nzVirtualMinBufferPx]="480"
+ [nzVirtualMaxBufferPx]="480"
+ [nzScroll]="{ y: '440px' }"
>
<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>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.html b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.html
index 8c07727..ba41b0a 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.html
@@ -16,6 +16,11 @@
~ 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]="'taskmanagers/'+taskManagerDetail?.id+'/log'" [downloadName]="'taskmanager_'+taskManagerDetail?.id+'_log'" (reload)="reload()"></flink-refresh-download>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.less b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.less
index df80525..6c0746e 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.less
@@ -17,12 +17,16 @@
*/
@import "theme";
-flink-monaco-editor {
- height: calc(~"100vh - 310px");
-}
-
:host {
position: relative;
- display: block;
+ flex: 1;
border: 1px solid @border-color-split;
+
+ nz-code-editor {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.ts
index 57ccd20..1b78bc8 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.ts
@@ -16,11 +16,13 @@
* limitations under the License.
*/
-import { ChangeDetectorRef, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
import { TaskManagerDetailInterface } from 'interfaces';
-import { first } from 'rxjs/operators';
+import { first, takeUntil } from 'rxjs/operators';
import { TaskManagerService } 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';
@Component({
selector: 'flink-task-manager-logs',
@@ -28,33 +30,45 @@ import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.
styleUrls: ['./task-manager-logs.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class TaskManagerLogsComponent implements OnInit {
- @ViewChild(MonacoEditorComponent, { static: true }) monacoEditorComponent: MonacoEditorComponent;
+export class TaskManagerLogsComponent implements OnInit, OnDestroy {
logs = '';
+ loading = true;
+ editorOptions: EditorOptions = flinkEditorOptions;
taskManagerDetail: TaskManagerDetailInterface;
+ private destroy$ = new Subject<void>();
reload() {
+ this.loading = true;
+ this.cdr.markForCheck();
if (this.taskManagerDetail) {
- this.taskManagerService.loadLogs(this.taskManagerDetail.id).subscribe(
- data => {
- this.monacoEditorComponent.layout();
- this.logs = data;
- this.cdr.markForCheck();
- },
- () => {
- this.cdr.markForCheck();
- }
- );
+ this.taskManagerService
+ .loadLogs(this.taskManagerDetail.id)
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(
+ data => {
+ this.loading = false;
+ this.logs = data;
+ this.cdr.markForCheck();
+ },
+ () => {
+ this.cdr.markForCheck();
+ }
+ );
}
}
constructor(private taskManagerService: TaskManagerService, private cdr: ChangeDetectorRef) {}
ngOnInit() {
- this.taskManagerService.taskManagerDetail$.pipe(first()).subscribe(data => {
+ this.taskManagerService.taskManagerDetail$.pipe(first(), takeUntil(this.destroy$)).subscribe(data => {
this.taskManagerDetail = data;
this.reload();
this.cdr.markForCheck();
});
}
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/metrics/task-manager-metrics.component.less b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/metrics/task-manager-metrics.component.less
index b08f355..3b54d93 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/metrics/task-manager-metrics.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/metrics/task-manager-metrics.component.less
@@ -30,6 +30,7 @@ nz-progress {
:host {
display: block;
+ flex: 1;
margin-bottom: 16px;
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.html b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.html
index b802439..d9a2d40 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-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]="'taskmanagers/' + taskManagerDetail?.id + '/stdout'"
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.less b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.less
index df80525..6c0746e 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.less
@@ -17,12 +17,16 @@
*/
@import "theme";
-flink-monaco-editor {
- height: calc(~"100vh - 310px");
-}
-
:host {
position: relative;
- display: block;
+ flex: 1;
border: 1px solid @border-color-split;
+
+ nz-code-editor {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.ts
index 781cf00..2383547 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.ts
@@ -16,10 +16,12 @@
* limitations under the License.
*/
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
-import { first } from 'rxjs/operators';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { first, 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 { TaskManagerDetailInterface } from 'interfaces';
import { TaskManagerService } from 'services';
@@ -30,33 +32,45 @@ import { TaskManagerService } from 'services';
styleUrls: ['./task-manager-stdout.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class TaskManagerStdoutComponent implements OnInit {
- @ViewChild(MonacoEditorComponent, { static: true }) monacoEditorComponent: MonacoEditorComponent;
+export class TaskManagerStdoutComponent implements OnInit, OnDestroy {
stdout = '';
+ loading = true;
+ editorOptions: EditorOptions = flinkEditorOptions;
taskManagerDetail: TaskManagerDetailInterface;
+ private destroy$ = new Subject<void>();
reload(): void {
+ this.loading = true;
+ this.cdr.markForCheck();
if (this.taskManagerDetail) {
- this.taskManagerService.loadStdout(this.taskManagerDetail.id).subscribe(
- data => {
- this.monacoEditorComponent.layout();
- this.stdout = data;
- this.cdr.markForCheck();
- },
- () => {
- this.cdr.markForCheck();
- }
- );
+ this.taskManagerService
+ .loadStdout(this.taskManagerDetail.id)
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(
+ data => {
+ this.loading = false;
+ this.stdout = data;
+ this.cdr.markForCheck();
+ },
+ () => {
+ this.cdr.markForCheck();
+ }
+ );
}
}
constructor(private taskManagerService: TaskManagerService, private cdr: ChangeDetectorRef) {}
ngOnInit(): void {
- this.taskManagerService.taskManagerDetail$.pipe(first()).subscribe(data => {
+ this.taskManagerService.taskManagerDetail$.pipe(first(), takeUntil(this.destroy$)).subscribe(data => {
this.taskManagerDetail = data;
this.reload();
this.cdr.markForCheck();
});
}
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager.component.html b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager.component.html
index 57d4ac3..2c66091 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager.component.html
@@ -19,7 +19,7 @@
<flink-task-manager-status [isLoading]="isLoading"></flink-task-manager-status>
<div class="content">
<nz-skeleton [nzActive]="true" *ngIf="isLoading"></nz-skeleton>
- <div class="router" [style.display]="isLoading ? 'none' : 'block'">
+ <div class="router" [class.hide]="isLoading">
<router-outlet></router-outlet>
</div>
</div>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager.component.less b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager.component.less
index 111f938..0adbac1 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager.component.less
@@ -18,11 +18,23 @@
@import "theme";
-.content {
- margin-top: @margin-md;
-}
-
-.router {
- width: 100%;
+:host {
+ display: flex;
+ flex-flow: column nowrap;
height: 100%;
+
+ .content {
+ display: flex;
+ flex: 1;
+ margin-top: @margin-md;
+
+ .router {
+ display: flex;
+ flex: 1;
+
+ &.hide {
+ display: none;
+ }
+ }
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager.module.ts b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager.module.ts
index e17925d8..59cce72 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager.module.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-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 { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -54,7 +56,9 @@ import { TaskManagerThreadDumpComponent } from './thread-dump/task-manager-threa
NzProgressModule,
NzGridModule,
NzDividerModule,
- NzSkeletonModule
+ NzSkeletonModule,
+ NzCodeEditorModule,
+ FormsModule
],
declarations: [
TaskManagerListComponent,
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.html b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.html
index b992a2d..1203414 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.html
@@ -16,7 +16,12 @@
~ limitations under the License.
-->
-<flink-monaco-editor [value]="dump"></flink-monaco-editor>
+<nz-code-editor
+ flinkAutoResize
+ [nzLoading]="loading"
+ [ngModel]="dump"
+ [nzEditorOption]="editorOptions"
+></nz-code-editor>
<flink-refresh-download
[compactMode]="true"
[downloadHref]="'taskmanagers/' + taskManagerDetail?.id + '/thread-dump'"
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.less b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.less
index b83acfc..fb011b9 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.less
@@ -16,11 +16,15 @@
* limitations under the License.
*/
-flink-monaco-editor {
- height: calc(~"100vh - 304px");
-}
-
:host {
position: relative;
- display: block;
+ flex: 1;
+
+ nz-code-editor {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.ts
index 7c06898..6455893 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.ts
@@ -16,10 +16,12 @@
* limitations under the License.
*/
-import { ChangeDetectorRef, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
-import { first } from 'rxjs/operators';
+import { ChangeDetectorRef, Component, OnInit, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { first, 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 { TaskManagerDetailInterface } from 'interfaces';
import { TaskManagerService } from 'services';
@@ -30,33 +32,45 @@ import { TaskManagerService } from 'services';
styleUrls: ['./task-manager-thread-dump.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class TaskManagerThreadDumpComponent implements OnInit {
- @ViewChild(MonacoEditorComponent, { static: true }) monacoEditorComponent: MonacoEditorComponent;
+export class TaskManagerThreadDumpComponent implements OnInit, OnDestroy {
dump = '';
+ loading = true;
+ editorOptions: EditorOptions = flinkEditorOptions;
taskManagerDetail: TaskManagerDetailInterface;
+ private destroy$ = new Subject<void>();
reload(): void {
+ this.loading = true;
+ this.cdr.markForCheck();
if (this.taskManagerDetail) {
- this.taskManagerService.loadThreadDump(this.taskManagerDetail.id).subscribe(
- data => {
- this.monacoEditorComponent.layout();
- this.dump = data;
- this.cdr.markForCheck();
- },
- () => {
- this.cdr.markForCheck();
- }
- );
+ this.taskManagerService
+ .loadThreadDump(this.taskManagerDetail.id)
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(
+ data => {
+ this.loading = false;
+ this.dump = data;
+ this.cdr.markForCheck();
+ },
+ () => {
+ this.cdr.markForCheck();
+ }
+ );
}
}
constructor(private taskManagerService: TaskManagerService, private cdr: ChangeDetectorRef) {}
ngOnInit(): void {
- this.taskManagerService.taskManagerDetail$.pipe(first()).subscribe(data => {
+ this.taskManagerService.taskManagerDetail$.pipe(first(), takeUntil(this.destroy$)).subscribe(data => {
this.taskManagerDetail = data;
this.reload();
this.cdr.markForCheck();
});
}
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
}
diff --git a/flink-runtime-web/web-dashboard/src/app/share/common/editor/auto-resize.directive.ts b/flink-runtime-web/web-dashboard/src/app/share/common/editor/auto-resize.directive.ts
new file mode 100644
index 0000000..fa0a9c0
--- /dev/null
+++ b/flink-runtime-web/web-dashboard/src/app/share/common/editor/auto-resize.directive.ts
@@ -0,0 +1,76 @@
+import { Directive, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { animationFrameScheduler, interval, Observable, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+
+import { NzCodeEditorComponent } from 'ng-zorro-antd/code-editor';
+
+@Directive({
+ selector: 'nz-code-editor[flinkAutoResize]'
+})
+export class AutoResizeDirective implements OnDestroy, OnInit {
+ private destroy$ = new Subject();
+ hiddenMinimap = false;
+
+ constructor(
+ private elementRef: ElementRef<HTMLElement>,
+ private nzCodeEditorComponent: NzCodeEditorComponent,
+ private renderer: Renderer2
+ ) {}
+
+ public ngOnInit(): void {
+ this.createResizeObserver()
+ .pipe(
+ distinctUntilChanged((prev, curr) => {
+ const { width: prevWidth, height: prevHeight } = prev;
+ const { width: currWidth, height: currHeight } = curr;
+ return prevWidth === currWidth && prevHeight === currHeight;
+ }),
+ debounceTime(50, animationFrameScheduler),
+ takeUntil(this.destroy$)
+ )
+ .subscribe(curr => {
+ const curWidth = curr.width;
+ this.hiddenMinimap = curWidth <= 65;
+ this.setHostClass();
+ this.nzCodeEditorComponent.layout();
+ });
+ }
+
+ private setHostClass(): void {
+ if (this.hiddenMinimap) {
+ this.renderer.addClass(this.elementRef.nativeElement, 'hidden-minimap');
+ } else {
+ this.renderer.removeClass(this.elementRef.nativeElement, 'hidden-minimap');
+ }
+ }
+
+ public ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+
+ private createResizeObserver(): Observable<DOMRectReadOnly> {
+ const stream = new Subject<DOMRectReadOnly>();
+ const ResizeObserver = window.ResizeObserver;
+ if (ResizeObserver) {
+ // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+ // ResizeObserver is supported except IE
+ const resizeObserver = new ResizeObserver(entries => {
+ for (const entry of entries) {
+ if (entry.target === this.elementRef.nativeElement) {
+ stream.next(entry.contentRect);
+ }
+ }
+ });
+ resizeObserver.observe(this.elementRef.nativeElement);
+ this.destroy$.subscribe(() => resizeObserver.disconnect());
+ } else if (typeof this.elementRef.nativeElement?.getBoundingClientRect === 'function') {
+ interval(500)
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(() => {
+ stream.next(this.elementRef.nativeElement.getBoundingClientRect());
+ });
+ }
+ return stream.asObservable();
+ }
+}
diff --git a/flink-runtime-web/web-dashboard/src/app/share/common/editor/editor-config.ts b/flink-runtime-web/web-dashboard/src/app/share/common/editor/editor-config.ts
new file mode 100644
index 0000000..3e4bfb4
--- /dev/null
+++ b/flink-runtime-web/web-dashboard/src/app/share/common/editor/editor-config.ts
@@ -0,0 +1,12 @@
+import { EditorOptions } from 'ng-zorro-antd/code-editor/typings';
+
+export const flinkEditorOptions: EditorOptions = {
+ scrollBeyondLastLine: false,
+ glyphMargin: true,
+ language: 'apex',
+ wordWrap: 'on',
+ readOnly: true,
+ minimap: {
+ enabled: false
+ }
+};
diff --git a/flink-runtime-web/web-dashboard/src/app/share/common/monaco-editor/monaco-editor.component.less b/flink-runtime-web/web-dashboard/src/app/share/common/monaco-editor/monaco-editor.component.less
deleted file mode 100644
index 9845347..0000000
--- a/flink-runtime-web/web-dashboard/src/app/share/common/monaco-editor/monaco-editor.component.less
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-:host {
- position: relative;
- display: block;
- overflow: hidden;
- width: 100%;
- height: 100%;
-}
diff --git a/flink-runtime-web/web-dashboard/src/app/share/common/monaco-editor/monaco-editor.component.ts b/flink-runtime-web/web-dashboard/src/app/share/common/monaco-editor/monaco-editor.component.ts
deleted file mode 100644
index 570fe68..0000000
--- a/flink-runtime-web/web-dashboard/src/app/share/common/monaco-editor/monaco-editor.component.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/// <reference path="../../../../../node_modules/monaco-editor/monaco.d.ts" />
-
-import { AfterViewInit, Component, ElementRef, ChangeDetectionStrategy, Input, OnDestroy } from '@angular/core';
-import { fromEvent, merge, Subject } from 'rxjs';
-import { debounceTime, takeUntil } from 'rxjs/operators';
-
-import { MonacoEditorService } from 'share/common/monaco-editor/monaco-editor.service';
-
-import { SafeAny } from 'interfaces';
-
-import IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
-
-@Component({
- selector: 'flink-monaco-editor',
- template: ``,
- styleUrls: ['./monaco-editor.component.less'],
- changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class MonacoEditorComponent implements AfterViewInit, OnDestroy {
- private innerValue = '';
- private editor: IStandaloneCodeEditor;
- private destroy$ = new Subject();
-
- @Input()
- set value(value) {
- this.innerValue = value;
- if (this.editor) {
- this.editor.getModel()!.setValue(this.innerValue);
- }
- }
-
- get value(): string {
- return this.innerValue;
- }
-
- setupMonaco(): void {
- const hostElement = this.elementRef.nativeElement;
- this.editor = monaco.editor.create(hostElement, {
- scrollBeyondLastLine: false,
- glyphMargin: true,
- language: 'apex',
- wordWrap: 'on',
- readOnly: true,
- minimap: {
- enabled: false
- }
- });
- if (this.value) {
- this.editor.getModel()!.setValue(this.value);
- }
- }
-
- layout(): void {
- if (this.editor) {
- this.editor.layout();
- }
- }
-
- constructor(private elementRef: ElementRef, private monacoEditorService: MonacoEditorService) {}
-
- ngAfterViewInit(): void {
- if ((window as SafeAny).monaco) {
- // TODO: temporary solution, the editor should render depending on its own dimension
- setTimeout(() => this.setupMonaco());
- } else {
- const script = document.createElement('script');
- script.type = 'text/javascript';
- script.src = 'libs/vs/loader.js';
- script.onload = () => {
- const onGotAmdLoader = (): void => {
- // Load monaco
- (window as SafeAny).require.config({ paths: { vs: 'libs/vs' } });
- (window as SafeAny).require(['vs/editor/editor.main'], () => {
- setTimeout(() => this.setupMonaco());
- });
- };
- onGotAmdLoader();
- };
- // Add the script tag to the page in order to start loading monaco
- document.body.appendChild(script);
- }
- merge(fromEvent(window, 'resize'), this.monacoEditorService.layout$)
- .pipe(takeUntil(this.destroy$), debounceTime(200))
- .subscribe(() => {
- this.layout();
- });
- }
-
- ngOnDestroy(): void {
- this.destroy$.next();
- this.destroy$.complete();
- this.editor?.dispose();
- }
-}
diff --git a/flink-runtime-web/web-dashboard/src/app/share/common/monaco-editor/monaco-editor.service.ts b/flink-runtime-web/web-dashboard/src/app/share/common/monaco-editor/monaco-editor.service.ts
deleted file mode 100644
index 79d3f14..0000000
--- a/flink-runtime-web/web-dashboard/src/app/share/common/monaco-editor/monaco-editor.service.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
-
-@Injectable({
- providedIn: 'root'
-})
-export class MonacoEditorService {
- layout$ = new Subject();
-
- /**
- * Recalculate monaco editor layout manually
- */
- layout(): void {
- this.layout$.next();
- }
-}
diff --git a/flink-runtime-web/web-dashboard/src/app/share/share.module.ts b/flink-runtime-web/web-dashboard/src/app/share/share.module.ts
index 51586e3..94c16e7 100644
--- a/flink-runtime-web/web-dashboard/src/app/share/share.module.ts
+++ b/flink-runtime-web/web-dashboard/src/app/share/share.module.ts
@@ -29,7 +29,6 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { DagreModule } from 'share/common/dagre/dagre.module';
import { FileReadDirective } from 'share/common/file-read/file-read.directive';
-import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.component';
import { NavigationComponent } from 'share/common/navigation/navigation.component';
import { ResizeComponent } from 'share/common/resize/resize.component';
import { CheckpointBadgeComponent } from 'share/customize/checkpoint-badge/checkpoint-badge.component';
@@ -40,6 +39,7 @@ import { RefreshDownloadComponent } from 'share/customize/refresh-download/refre
import { TaskBadgeComponent } from 'share/customize/task-badge/task-badge.component';
import { PipeModule } from 'share/pipes/pipe.module';
+import { AutoResizeDirective } from './common/editor/auto-resize.directive';
import { BackpressureBadgeComponent } from './customize/backpressure-badge/backpressure-badge.component';
import { FlameGraphComponent } from './customize/flame-graph/flame-graph.component';
@@ -62,21 +62,20 @@ import { FlameGraphComponent } from './customize/flame-graph/flame-graph.compone
TaskBadgeComponent,
JobListComponent,
FileReadDirective,
- MonacoEditorComponent,
NavigationComponent,
RefreshDownloadComponent,
ResizeComponent,
JobChartComponent,
CheckpointBadgeComponent,
BackpressureBadgeComponent,
- FlameGraphComponent
+ FlameGraphComponent,
+ AutoResizeDirective
],
exports: [
JobListComponent,
PipeModule,
DagreModule,
FileReadDirective,
- MonacoEditorComponent,
NavigationComponent,
RefreshDownloadComponent,
JobBadgeComponent,
@@ -85,7 +84,8 @@ import { FlameGraphComponent } from './customize/flame-graph/flame-graph.compone
JobChartComponent,
CheckpointBadgeComponent,
BackpressureBadgeComponent,
- FlameGraphComponent
+ FlameGraphComponent,
+ AutoResizeDirective
]
})
export class ShareModule {}
diff --git a/flink-runtime-web/web-dashboard/src/styles/index.less b/flink-runtime-web/web-dashboard/src/styles/index.less
index 457c858..e7bbe88 100644
--- a/flink-runtime-web/web-dashboard/src/styles/index.less
+++ b/flink-runtime-web/web-dashboard/src/styles/index.less
@@ -17,6 +17,7 @@
*/
@import "../../node_modules/d3-flame-graph/dist/d3-flamegraph.css";
+@import "../../node_modules/ng-zorro-antd/code-editor/style/entry.less";
@import "../../node_modules/ng-zorro-antd/ng-zorro-antd.less";
@import "./base";
@import "./global";