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:27 UTC
[flink] 02/02: [FLINK-23990][runtime-web] Lazy load exception
editors and add strong typed
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;
+}