yangjunhan commented on a change in pull request #17619:
URL: https://github.com/apache/flink/pull/17619#discussion_r741735964
##########
File path:
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;
Review comment:
This part of codes can in fact be removed. I was testing the behaviour
of enabling miniMap locally, the miniMap covered the whole editor when I
resized the horizontal space to an extremely small size. But since all editors
disable the miniMap, this issue will not actually happen.
##########
File path:
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>
Review comment:
Yes, nzForceRender is no longer needed.
##########
File path:
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"
Review comment:
Well, switching the tab would not actually destroy the editor. I needed
to manually destroy it through ngIf.
##########
File path:
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"
Review comment:
I just come up with a better way to do this. I would use the lazy
loading feature in
nz-tabset:https://ng.ant.design/components/tabs/en#components-tabs-demo-lazy
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
