You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flink.apache.org by ga...@apache.org on 2020/05/11 20:49:21 UTC
[flink] branch master updated: [FLINK-17608][web] Add TM log and
stdout page/tab back
This is an automated email from the ASF dual-hosted git repository.
gary pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/flink.git
The following commit(s) were added to refs/heads/master by this push:
new 7cfcd33 [FLINK-17608][web] Add TM log and stdout page/tab back
7cfcd33 is described below
commit 7cfcd33e983c6e07eedf8c0d5514450a565710ff
Author: vthinkxie <ya...@alibaba-inc.com>
AuthorDate: Mon May 11 20:06:13 2020 +0800
[FLINK-17608][web] Add TM log and stdout page/tab back
This closes #12085.
---
.../task-manager-log-detail.component.ts | 10 +----
.../task-manager-logs.component.html} | 5 ++-
.../logs/task-manager-logs.component.less | 28 ++++++++++++++
.../task-manager-logs.component.ts} | 44 +++++++++++++---------
.../status/task-manager-status.component.ts | 8 +++-
.../task-manager-stdout.component.html} | 4 +-
.../stdout/task-manager-stdout.component.less | 28 ++++++++++++++
.../task-manager-stdout.component.ts} | 44 +++++++++++++---------
.../task-manager/task-manager-routing.module.ts | 17 ++++++---
.../app/pages/task-manager/task-manager.module.ts | 6 ++-
.../task-manager-thread-dump.component.html | 2 +-
.../src/app/services/task-manager.service.ts | 42 ++++++++++++++++-----
12 files changed, 174 insertions(+), 64 deletions(-)
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 f589122..4226a87 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
@@ -37,7 +37,6 @@ export class TaskManagerLogDetailComponent implements OnInit {
isLoading = false;
taskManagerDetail: TaskManagerDetailInterface;
isFullScreen = false;
- hasLogName = false;
@ViewChild(MonacoEditorComponent) monacoEditorComponent: MonacoEditorComponent;
constructor(
@@ -49,7 +48,7 @@ export class TaskManagerLogDetailComponent implements OnInit {
reloadLog() {
this.isLoading = true;
this.cdr.markForCheck();
- this.taskManagerService.loadLog(this.taskManagerDetail.id, this.logName, this.hasLogName).subscribe(
+ this.taskManagerService.loadLog(this.taskManagerDetail.id, this.logName).subscribe(
data => {
this.logs = data.data;
this.downloadUrl = data.url;
@@ -77,12 +76,7 @@ export class TaskManagerLogDetailComponent implements OnInit {
ngOnInit() {
this.taskManagerService.taskManagerDetail$.pipe(first()).subscribe(data => {
this.taskManagerDetail = data;
- this.hasLogName = this.activatedRoute.snapshot.data.hasLogName;
- if (this.hasLogName) {
- this.logName = this.activatedRoute.snapshot.params.logName;
- } else {
- this.logName = `taskmanager_${data.id}_log`;
- }
+ this.logName = this.activatedRoute.snapshot.params.logName;
this.reloadLog();
});
}
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/logs/task-manager-logs.component.html
similarity index 75%
copy from flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.html
copy to flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.html
index 096b6b9..8c07727 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/logs/task-manager-logs.component.html
@@ -16,5 +16,6 @@
~ limitations under the License.
-->
-<flink-monaco-editor [value]="dump"></flink-monaco-editor>
-<flink-refresh-download [downloadHref]="'taskmanagers/'+taskManagerDetail?.id+'/thread-dump'" [downloadName]="'taskmanager_'+taskManagerDetail?.id+'_thread_dump'" (reload)="reload()"></flink-refresh-download>
+<flink-monaco-editor [value]="logs"></flink-monaco-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
new file mode 100644
index 0000000..df80525
--- /dev/null
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.less
@@ -0,0 +1,28 @@
+/*
+ * 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 "theme";
+
+flink-monaco-editor {
+ height: calc(~"100vh - 310px");
+}
+
+:host {
+ position: relative;
+ display: block;
+ border: 1px solid @border-color-split;
+}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/status/task-manager-status.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.ts
similarity index 55%
copy from flink-runtime-web/web-dashboard/src/app/pages/task-manager/status/task-manager-status.component.ts
copy to flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.ts
index b77592e..90f0893 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/status/task-manager-status.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/logs/task-manager-logs.component.ts
@@ -16,35 +16,45 @@
* limitations under the License.
*/
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { TaskManagerDetailInterface } from 'interfaces';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { first } from 'rxjs/operators';
import { TaskManagerService } from 'services';
+import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.component';
@Component({
- selector: 'flink-task-manager-status',
- templateUrl: './task-manager-status.component.html',
- styleUrls: ['./task-manager-status.component.less'],
+ selector: 'flink-task-manager-logs',
+ templateUrl: './task-manager-logs.component.html',
+ styleUrls: ['./task-manager-logs.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class TaskManagerStatusComponent implements OnInit, OnDestroy {
- @Input() isLoading = true;
- listOfNavigation = [{ path: 'metrics', title: 'Metrics' }, { path: 'log-list', title: 'Log' }, { path: 'thread-dump', title: 'Thread Dump' }];
+export class TaskManagerLogsComponent implements OnInit {
+ @ViewChild(MonacoEditorComponent) monacoEditorComponent: MonacoEditorComponent;
+ logs = '';
taskManagerDetail: TaskManagerDetailInterface;
- private destroy$ = new Subject();
+
+ reload() {
+ if (this.taskManagerDetail) {
+ this.taskManagerService.loadLogs(this.taskManagerDetail.id).subscribe(
+ data => {
+ this.monacoEditorComponent.layout();
+ this.logs = data;
+ this.cdr.markForCheck();
+ },
+ () => {
+ this.cdr.markForCheck();
+ }
+ );
+ }
+ }
constructor(private taskManagerService: TaskManagerService, private cdr: ChangeDetectorRef) {}
- ngOnInit(): void {
- this.taskManagerService.taskManagerDetail$.pipe(takeUntil(this.destroy$)).subscribe(data => {
+ ngOnInit() {
+ this.taskManagerService.taskManagerDetail$.pipe(first()).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/status/task-manager-status.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/status/task-manager-status.component.ts
index b77592e..054c4b1 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/status/task-manager-status.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/status/task-manager-status.component.ts
@@ -30,7 +30,13 @@ import { TaskManagerService } from 'services';
})
export class TaskManagerStatusComponent implements OnInit, OnDestroy {
@Input() isLoading = true;
- listOfNavigation = [{ path: 'metrics', title: 'Metrics' }, { path: 'log-list', title: 'Log' }, { path: 'thread-dump', title: 'Thread Dump' }];
+ listOfNavigation = [
+ { path: 'metrics', title: 'Metrics' },
+ { path: 'logs', title: 'Logs' },
+ { path: 'stdout', title: 'Stdout' },
+ { path: 'log-list', title: 'Log List' },
+ { path: 'thread-dump', title: 'Thread Dump' }
+ ];
taskManagerDetail: TaskManagerDetailInterface;
private destroy$ = new Subject();
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/stdout/task-manager-stdout.component.html
similarity index 74%
copy from flink-runtime-web/web-dashboard/src/app/pages/task-manager/thread-dump/task-manager-thread-dump.component.html
copy to flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.html
index 096b6b9..3bb6282 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/stdout/task-manager-stdout.component.html
@@ -16,5 +16,5 @@
~ limitations under the License.
-->
-<flink-monaco-editor [value]="dump"></flink-monaco-editor>
-<flink-refresh-download [downloadHref]="'taskmanagers/'+taskManagerDetail?.id+'/thread-dump'" [downloadName]="'taskmanager_'+taskManagerDetail?.id+'_thread_dump'" (reload)="reload()"></flink-refresh-download>
+<flink-monaco-editor [value]="stdout"></flink-monaco-editor>
+<flink-refresh-download [compactMode]="true" [downloadHref]="'taskmanagers/'+taskManagerDetail?.id+'/stdout'" [downloadName]="'taskmanager_'+taskManagerDetail?.id+'_stdout'" (reload)="reload()"></flink-refresh-download>
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
new file mode 100644
index 0000000..df80525
--- /dev/null
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.less
@@ -0,0 +1,28 @@
+/*
+ * 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 "theme";
+
+flink-monaco-editor {
+ height: calc(~"100vh - 310px");
+}
+
+:host {
+ position: relative;
+ display: block;
+ border: 1px solid @border-color-split;
+}
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/status/task-manager-status.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.ts
similarity index 57%
copy from flink-runtime-web/web-dashboard/src/app/pages/task-manager/status/task-manager-status.component.ts
copy to flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.ts
index b77592e..a674f09 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/status/task-manager-status.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/stdout/task-manager-stdout.component.ts
@@ -16,35 +16,45 @@
* limitations under the License.
*/
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { TaskManagerDetailInterface } from 'interfaces';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { first } from 'rxjs/operators';
import { TaskManagerService } from 'services';
+import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.component';
@Component({
- selector: 'flink-task-manager-status',
- templateUrl: './task-manager-status.component.html',
- styleUrls: ['./task-manager-status.component.less'],
+ selector: 'flink-task-manager-stdout',
+ templateUrl: './task-manager-stdout.component.html',
+ styleUrls: ['./task-manager-stdout.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class TaskManagerStatusComponent implements OnInit, OnDestroy {
- @Input() isLoading = true;
- listOfNavigation = [{ path: 'metrics', title: 'Metrics' }, { path: 'log-list', title: 'Log' }, { path: 'thread-dump', title: 'Thread Dump' }];
+export class TaskManagerStdoutComponent implements OnInit {
+ @ViewChild(MonacoEditorComponent) monacoEditorComponent: MonacoEditorComponent;
+ stdout = '';
taskManagerDetail: TaskManagerDetailInterface;
- private destroy$ = new Subject();
+
+ reload() {
+ if (this.taskManagerDetail) {
+ this.taskManagerService.loadStdout(this.taskManagerDetail.id).subscribe(
+ data => {
+ this.monacoEditorComponent.layout();
+ this.stdout = data;
+ this.cdr.markForCheck();
+ },
+ () => {
+ this.cdr.markForCheck();
+ }
+ );
+ }
+ }
constructor(private taskManagerService: TaskManagerService, private cdr: ChangeDetectorRef) {}
- ngOnInit(): void {
- this.taskManagerService.taskManagerDetail$.pipe(takeUntil(this.destroy$)).subscribe(data => {
+ ngOnInit() {
+ this.taskManagerService.taskManagerDetail$.pipe(first()).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-routing.module.ts b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager-routing.module.ts
index 7642d3a..7301fe3 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager-routing.module.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/task-manager/task-manager-routing.module.ts
@@ -22,7 +22,9 @@ import { TaskManagerLogDetailComponent } from './log-detail/task-manager-log-det
import { TaskManagerLogListComponent } from './log-list/task-manager-log-list.component';
import { TaskManagerComponent } from './task-manager.component';
import { TaskManagerListComponent } from './list/task-manager-list.component';
+import { TaskManagerLogsComponent } from './logs/task-manager-logs.component';
import { TaskManagerMetricsComponent } from './metrics/task-manager-metrics.component';
+import { TaskManagerStdoutComponent } from './stdout/task-manager-stdout.component';
import { TaskManagerThreadDumpComponent } from './thread-dump/task-manager-thread-dump.component';
const routes: Routes = [
@@ -59,16 +61,21 @@ const routes: Routes = [
path: 'log-list/:logName',
component: TaskManagerLogDetailComponent,
data: {
- path: 'log-list',
- hasLogName: true
+ path: 'log-list'
}
},
{
path: 'logs',
- component: TaskManagerLogDetailComponent,
+ component: TaskManagerLogsComponent,
+ data: {
+ path: 'logs'
+ }
+ },
+ {
+ path: 'stdout',
+ component: TaskManagerStdoutComponent,
data: {
- path: 'log-list',
- hasLogName: false
+ path: 'stdout'
}
},
{
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 3c75d3d..9f3ab6d 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
@@ -28,6 +28,8 @@ import { TaskManagerMetricsComponent } from './metrics/task-manager-metrics.comp
import { TaskManagerComponent } from './task-manager.component';
import { TaskManagerStatusComponent } from './status/task-manager-status.component';
import { TaskManagerThreadDumpComponent } from './thread-dump/task-manager-thread-dump.component';
+import { TaskManagerLogsComponent } from './logs/task-manager-logs.component';
+import { TaskManagerStdoutComponent } from './stdout/task-manager-stdout.component';
@NgModule({
imports: [CommonModule, ShareModule, TaskManagerRoutingModule],
@@ -38,7 +40,9 @@ import { TaskManagerThreadDumpComponent } from './thread-dump/task-manager-threa
TaskManagerStatusComponent,
TaskManagerLogListComponent,
TaskManagerLogDetailComponent,
- TaskManagerThreadDumpComponent
+ TaskManagerThreadDumpComponent,
+ TaskManagerLogsComponent,
+ TaskManagerStdoutComponent
]
})
export class TaskManagerModule {}
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 096b6b9..35c7f7c 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
@@ -17,4 +17,4 @@
-->
<flink-monaco-editor [value]="dump"></flink-monaco-editor>
-<flink-refresh-download [downloadHref]="'taskmanagers/'+taskManagerDetail?.id+'/thread-dump'" [downloadName]="'taskmanager_'+taskManagerDetail?.id+'_thread_dump'" (reload)="reload()"></flink-refresh-download>
+<flink-refresh-download [compactMode]="true" [downloadHref]="'taskmanagers/'+taskManagerDetail?.id+'/thread-dump'" [downloadName]="'taskmanager_'+taskManagerDetail?.id+'_thread_dump'" (reload)="reload()"></flink-refresh-download>
diff --git a/flink-runtime-web/web-dashboard/src/app/services/task-manager.service.ts b/flink-runtime-web/web-dashboard/src/app/services/task-manager.service.ts
index 54a5b26..c21125a 100644
--- a/flink-runtime-web/web-dashboard/src/app/services/task-manager.service.ts
+++ b/flink-runtime-web/web-dashboard/src/app/services/task-manager.service.ts
@@ -21,7 +21,12 @@ import { Injectable } from '@angular/core';
import { EMPTY, of, ReplaySubject } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { BASE_URL } from 'config';
-import { TaskManagerListInterface, TaskManagerDetailInterface, TaskManagerLogInterface, TaskManagerThreadDumpInterface } from 'interfaces';
+import {
+ TaskManagerListInterface,
+ TaskManagerDetailInterface,
+ TaskManagerLogInterface,
+ TaskManagerThreadDumpInterface
+} from 'interfaces';
@Injectable({
providedIn: 'root'
@@ -63,15 +68,9 @@ export class TaskManagerService {
* Load TM log
* @param taskManagerId
* @param logName
- * @param hasLogName
*/
- loadLog(taskManagerId: string, logName: string, hasLogName: boolean) {
- let url = '';
- if (hasLogName) {
- url = `${BASE_URL}/taskmanagers/${taskManagerId}/logs/${logName}`;
- } else {
- url = `${BASE_URL}/taskmanagers/${taskManagerId}/log`;
- }
+ loadLog(taskManagerId: string, logName: string) {
+ const url = `${BASE_URL}/taskmanagers/${taskManagerId}/logs/${logName}`;
return this.httpClient
.get(url, { responseType: 'text', headers: new HttpHeaders().append('Cache-Control', 'no-cache') })
.pipe(
@@ -93,7 +92,30 @@ export class TaskManagerService {
.pipe(
map(taskManagerThreadDump => {
return taskManagerThreadDump.threadInfos.map(threadInfo => threadInfo.stringifiedThreadInfo).join('');
- }));
+ })
+ );
+ }
+
+ /**
+ * Load TM logs
+ * @param taskManagerId
+ */
+ loadLogs(taskManagerId: string) {
+ return this.httpClient.get(`${BASE_URL}/taskmanagers/${taskManagerId}/log`, {
+ responseType: 'text',
+ headers: new HttpHeaders().append('Cache-Control', 'no-cache')
+ });
+ }
+
+ /**
+ * Load TM stdout
+ * @param taskManagerId
+ */
+ loadStdout(taskManagerId: string) {
+ return this.httpClient.get(`${BASE_URL}/taskmanagers/${taskManagerId}/stdout`, {
+ responseType: 'text',
+ headers: new HttpHeaders().append('Cache-Control', 'no-cache')
+ });
}
constructor(private httpClient: HttpClient) {}