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:25 UTC
[flink] branch master updated (76fdff9 -> 21caabc)
This is an automated email from the ASF dual-hosted git repository.
arvid pushed a change to branch master
in repository https://gitbox.apache.org/repos/asf/flink.git.
from 76fdff9 [FLINK-24724][build] Update japicmp jaxb dependencies
new 1ccf8c4 [FLINK-23990][runtime-web] Replace custom monaco editor with nz-code-editor
new 21caabc [FLINK-23990][runtime-web] Lazy load exception editors and add strong typed
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
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 | 24 ++-
.../log-list/job-manager-log-list.component.ts | 3 +
.../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 | 33 +++-
.../job/exceptions/job-exceptions.component.html | 183 +++++++++++----------
.../job/exceptions/job-exceptions.component.less | 42 +++--
.../job/exceptions/job-exceptions.component.ts | 22 ++-
.../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 | 24 ++-
.../log-list/task-manager-log-list.component.ts | 3 +
.../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 | 61 +++++++
.../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/app/utils/strong-type.ts | 3 +
.../web-dashboard/src/styles/index.less | 1 +
48 files changed, 656 insertions(+), 521 deletions(-)
create mode 100644 flink-runtime-web/web-dashboard/src/app/share/common/editor/auto-resize.directive.ts
create mode 100644 flink-runtime-web/web-dashboard/src/app/share/common/editor/editor-config.ts
delete mode 100644 flink-runtime-web/web-dashboard/src/app/share/common/monaco-editor/monaco-editor.component.less
delete mode 100644 flink-runtime-web/web-dashboard/src/app/share/common/monaco-editor/monaco-editor.component.ts
delete mode 100644 flink-runtime-web/web-dashboard/src/app/share/common/monaco-editor/monaco-editor.service.ts
create mode 100644 flink-runtime-web/web-dashboard/src/app/utils/strong-type.ts
[flink] 02/02: [FLINK-23990][runtime-web] Lazy load exception
editors and add strong typed
Posted by ar...@apache.org.
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 21caabc97c3fee25126ad108ed0ab2874b517a61
Author: yangjunhan <ya...@sina.com>
AuthorDate: Wed Nov 3 17:43:31 2021 +0800
[FLINK-23990][runtime-web] Lazy load exception editors and add strong typed
---
.../log-list/job-manager-log-list.component.html | 14 +-
.../log-list/job-manager-log-list.component.ts | 3 +
.../stdout/job-manager-stdout.component.ts | 1 -
.../job/exceptions/job-exceptions.component.html | 193 ++++++++++-----------
.../job/exceptions/job-exceptions.component.ts | 1 -
.../log-list/task-manager-log-list.component.html | 14 +-
.../log-list/task-manager-log-list.component.ts | 3 +
.../share/common/editor/auto-resize.directive.ts | 23 +--
.../web-dashboard/src/app/utils/strong-type.ts | 3 +
9 files changed, 125 insertions(+), 130 deletions(-)
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 aea2be3..5ccf395 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
@@ -37,12 +37,14 @@
</thead>
<tbody>
<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-container *ngIf="narrowLogData(data) as narrowData">
+ <tr>
+ <td>
+ <a [routerLink]="[narrowData.name]">{{ narrowData.name }}</a>
+ </td>
+ <td>{{ narrowData.size / 1024 | number: '1.0-2' }}</td>
+ </tr>
+ </ng-container>
</ng-template>
</tbody>
</nz-table>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.ts
index b7af2c6..7f2a3ed 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/log-list/job-manager-log-list.component.ts
@@ -21,6 +21,8 @@ import { finalize } from 'rxjs/operators';
import { JobManagerService } from 'services';
+import { typeDefinition } from '../../../utils/strong-type';
+
@Component({
selector: 'flink-job-manager-log-list',
templateUrl: './job-manager-log-list.component.html',
@@ -32,6 +34,7 @@ export class JobManagerLogListComponent implements OnInit {
isLoading = true;
trackByName = (_: number, log: { name: string; size: number }): string => log.name;
+ readonly narrowLogData = typeDefinition<{ name: string; size: number }>();
constructor(private jobManagerService: JobManagerService, private cdr: ChangeDetectorRef) {}
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 20ab2af..c92f89a 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
@@ -44,7 +44,6 @@ export class JobManagerStdoutComponent implements OnInit, OnDestroy {
.loadStdout()
.pipe(takeUntil(this.destroy$))
.subscribe(data => {
- // this.monacoEditorComponent.layout();
this.loading = false;
this.stdout = data;
this.cdr.markForCheck();
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 89c1df3..954d91d 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,112 +16,111 @@
~ limitations under the License.
-->
-<nz-tabset
- [nzSize]="'small'"
- [nzAnimated]="{ inkBar: true, tabPane: false }"
- [(nzSelectedIndex)]="index"
->
+<nz-tabset [nzSize]="'small'" [nzAnimated]="{ inkBar: true, tabPane: false }">
<nz-tab nzTitle="Root Exception">
- <nz-code-editor
- *ngIf="index === 0"
- flinkAutoResize
- [nzLoading]="isLoading"
- [ngModel]="rootException"
- [nzEditorOption]="editorOptions"
- ></nz-code-editor>
+ <ng-template nz-tab>
+ <nz-code-editor
+ flinkAutoResize
+ [nzLoading]="isLoading"
+ [ngModel]="rootException"
+ [nzEditorOption]="editorOptions"
+ ></nz-code-editor>
+ </ng-template>
</nz-tab>
<nz-tab nzTitle="Exception History">
- <nz-table
- class="no-border small"
- [nzSize]="'small'"
- [nzData]="exceptionHistory"
- [nzShowPagination]="false"
- [nzFrontPagination]="false"
- >
- <thead>
- <tr>
- <th nzWidth="60px"></th>
- <th>Time</th>
- <th>Exception</th>
- <th>Task Name</th>
- <th>Location</th>
- </tr>
- </thead>
- <tbody>
- <ng-container *ngFor="let item of exceptionHistory; trackBy: trackExceptionBy">
+ <ng-template nz-tab>
+ <nz-table
+ class="no-border small"
+ [nzSize]="'small'"
+ [nzData]="exceptionHistory"
+ [nzShowPagination]="false"
+ [nzFrontPagination]="false"
+ >
+ <thead>
<tr>
- <td nzShowExpand [(nzExpand)]="item.expand"></td>
- <td>{{ item.selected.timestamp | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
- <td>
- <div class="name">{{ item.selected.exceptionName }}</div>
- </td>
- <td class="select-td">
- <nz-select
- class="exception-select"
- nzSize="small"
- [nzDisabled]="item.exceptions.length === 1"
- nzShowSearch
- [(ngModel)]="item.selected"
- >
- <nz-option
- *ngFor="let ex of item.exceptions"
- nzCustomContent
- [nzLabel]="ex.taskName"
- [nzValue]="ex"
+ <th nzWidth="60px"></th>
+ <th>Time</th>
+ <th>Exception</th>
+ <th>Task Name</th>
+ <th>Location</th>
+ </tr>
+ </thead>
+ <tbody>
+ <ng-container *ngFor="let item of exceptionHistory; trackBy: trackExceptionBy">
+ <tr>
+ <td nzShowExpand [(nzExpand)]="item.expand"></td>
+ <td>{{ item.selected.timestamp | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
+ <td>
+ <div class="name">{{ item.selected.exceptionName }}</div>
+ </td>
+ <td class="select-td">
+ <nz-select
+ class="exception-select"
+ nzSize="small"
+ [nzDisabled]="item.exceptions.length === 1"
+ nzShowSearch
+ [(ngModel)]="item.selected"
>
- <span
- nz-tooltip
- [nzTooltipTitle]="ex.taskName"
- nzTooltipMouseEnterDelay="0.5"
- nzTooltipPlacement="left"
+ <nz-option
+ *ngFor="let ex of item.exceptions"
+ nzCustomContent
+ [nzLabel]="ex.taskName"
+ [nzValue]="ex"
>
- {{ ex.taskName }}
- </span>
- </nz-option>
- </nz-select>
+ <span
+ nz-tooltip
+ [nzTooltipTitle]="ex.taskName"
+ nzTooltipMouseEnterDelay="0.5"
+ nzTooltipPlacement="left"
+ >
+ {{ ex.taskName }}
+ </span>
+ </nz-option>
+ </nz-select>
+ </td>
+ <td>{{ item.selected.location || '(unassigned)' }}</td>
+ </tr>
+ <tr [nzExpand]="item.expand">
+ <td colspan="5" class="expand-td">
+ <nz-code-editor
+ *ngIf="item.expand"
+ flinkAutoResize
+ class="subtask"
+ [ngModel]="item.selected.stacktrace"
+ [nzEditorOption]="editorOptions"
+ ></nz-code-editor>
+ </td>
+ </tr>
+ </ng-container>
+ <tr *ngIf="exceptionHistory.length > 0">
+ <td colspan="5">
+ <i nz-icon nzType="info-circle" nzTheme="fill"></i>
+
+ <i>
+ The exception history is limited to the most recent failures that caused parts of
+ the job or the entire job to restart. The maximum history size can be configured via
+ the Flink configuration property
+ <b>web.exception-history-size</b>
+ .
+ </i>
</td>
- <td>{{ item.selected.location || '(unassigned)' }}</td>
</tr>
- <tr [nzExpand]="item.expand">
- <td colspan="5" class="expand-td">
- <nz-code-editor
- *ngIf="index === 1 && item.expand"
- flinkAutoResize
- class="subtask"
- [ngModel]="item.selected.stacktrace"
- [nzEditorOption]="editorOptions"
- ></nz-code-editor>
+ <tr *ngIf="truncated">
+ <td colspan="5">
+ <button
+ nz-button
+ nzBlock
+ nzType="primary"
+ nzGhost
+ (click)="loadMore()"
+ [nzLoading]="isLoading"
+ >
+ Load More
+ </button>
</td>
</tr>
- </ng-container>
- <tr *ngIf="exceptionHistory.length > 0">
- <td colspan="5">
- <i nz-icon nzType="info-circle" nzTheme="fill"></i>
-
- <i>
- The exception history is limited to the most recent failures that caused parts of the
- job or the entire job to restart. The maximum history size can be configured via the
- Flink configuration property
- <b>web.exception-history-size</b>
- .
- </i>
- </td>
- </tr>
- <tr *ngIf="truncated">
- <td colspan="5">
- <button
- nz-button
- nzBlock
- nzType="primary"
- nzGhost
- (click)="loadMore()"
- [nzLoading]="isLoading"
- >
- Load More
- </button>
- </td>
- </tr>
- </tbody>
- </nz-table>
+ </tbody>
+ </nz-table>
+ </ng-template>
</nz-tab>
</nz-tabset>
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 1c84bcd..f85a750 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
@@ -69,7 +69,6 @@ export class JobExceptionsComponent implements OnInit, OnDestroy {
isLoading = false;
maxExceptions = 0;
total = 0;
- index = 0;
editorOptions: EditorOptions = flinkEditorOptions;
private destroy$ = new Subject<void>();
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 0323ab4..71253e7 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
@@ -36,12 +36,14 @@
</thead>
<tbody>
<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-container *ngIf="narrowLogData(data) as narrowData">
+ <tr>
+ <td>
+ <a [routerLink]="[narrowData.name]">{{ narrowData.name }}</a>
+ </td>
+ <td>{{ narrowData.size / 1024 | number: '1.0-2' }}</td>
+ </tr>
+ </ng-container>
</ng-template>
</tbody>
</nz-table>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.ts
index 01e7048..c78bb95 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.ts
@@ -19,6 +19,8 @@ import { first, flatMap } from 'rxjs/operators';
import { TaskManagerService } from 'services';
+import { typeDefinition } from '../../../utils/strong-type';
+
@Component({
selector: 'flink-task-manager-log-list',
templateUrl: './task-manager-log-list.component.html',
@@ -29,6 +31,7 @@ export class TaskManagerLogListComponent implements OnInit {
isLoading = true;
trackByName = (_: number, log: { name: string; size: number }): string => log.name;
+ readonly narrowLogData = typeDefinition<{ name: string; size: number }>();
constructor(private taskManagerService: TaskManagerService, private cdr: ChangeDetectorRef) {}
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
index fa0a9c0..9fb364d 100644
--- 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
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { animationFrameScheduler, interval, Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
@@ -8,14 +8,10 @@ import { NzCodeEditorComponent } from 'ng-zorro-antd/code-editor';
selector: 'nz-code-editor[flinkAutoResize]'
})
export class AutoResizeDirective implements OnDestroy, OnInit {
- private destroy$ = new Subject();
+ private destroy$ = new Subject<void>();
hiddenMinimap = false;
- constructor(
- private elementRef: ElementRef<HTMLElement>,
- private nzCodeEditorComponent: NzCodeEditorComponent,
- private renderer: Renderer2
- ) {}
+ constructor(private elementRef: ElementRef<HTMLElement>, private nzCodeEditorComponent: NzCodeEditorComponent) {}
public ngOnInit(): void {
this.createResizeObserver()
@@ -28,22 +24,11 @@ export class AutoResizeDirective implements OnDestroy, OnInit {
debounceTime(50, animationFrameScheduler),
takeUntil(this.destroy$)
)
- .subscribe(curr => {
- const curWidth = curr.width;
- this.hiddenMinimap = curWidth <= 65;
- this.setHostClass();
+ .subscribe(() => {
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();
diff --git a/flink-runtime-web/web-dashboard/src/app/utils/strong-type.ts b/flink-runtime-web/web-dashboard/src/app/utils/strong-type.ts
new file mode 100644
index 0000000..161ed66
--- /dev/null
+++ b/flink-runtime-web/web-dashboard/src/app/utils/strong-type.ts
@@ -0,0 +1,3 @@
+export function typeDefinition<T>(): (item: unknown) => T {
+ return item => item as T;
+}
[flink] 01/02: [FLINK-23990][runtime-web] Replace custom monaco
editor with nz-code-editor
Posted by ar...@apache.org.
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";