Skip to content

Commit

Permalink
[FLINK-17608][web] Add TM log and stdout page/tab back
Browse files Browse the repository at this point in the history
This closes apache#12085.
  • Loading branch information
vthinkxie authored and GJL committed May 11, 2020
1 parent 3561adf commit 7cfcd33
Show file tree
Hide file tree
Showing 12 changed files with 276 additions and 26 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ export class TaskManagerLogDetailComponent implements OnInit {
isLoading = false;
taskManagerDetail: TaskManagerDetailInterface;
isFullScreen = false;
hasLogName = false;
@ViewChild(MonacoEditorComponent) monacoEditorComponent: MonacoEditorComponent;

constructor(
Expand All @@ -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;
Expand Down Expand Up @@ -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();
});
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!--
~ 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
~
~ https://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.
-->

<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>

Original file line number Diff line number Diff line change
@@ -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
*
* https://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;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/*
* 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
*
* https://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 { ChangeDetectorRef, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { TaskManagerDetailInterface } from 'interfaces';
import { first } from 'rxjs/operators';
import { TaskManagerService } from 'services';
import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.component';

@Component({
selector: 'flink-task-manager-logs',
templateUrl: './task-manager-logs.component.html',
styleUrls: ['./task-manager-logs.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TaskManagerLogsComponent implements OnInit {
@ViewChild(MonacoEditorComponent) monacoEditorComponent: MonacoEditorComponent;
logs = '';
taskManagerDetail: TaskManagerDetailInterface;

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() {
this.taskManagerService.taskManagerDetail$.pipe(first()).subscribe(data => {
this.taskManagerDetail = data;
this.reload();
this.cdr.markForCheck();
});
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!--
~ 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
~
~ https://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.
-->

<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>
Original file line number Diff line number Diff line change
@@ -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
*
* https://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;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/*
* 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
*
* https://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 { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { TaskManagerDetailInterface } from 'interfaces';
import { first } from 'rxjs/operators';
import { TaskManagerService } from 'services';
import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.component';

@Component({
selector: 'flink-task-manager-stdout',
templateUrl: './task-manager-stdout.component.html',
styleUrls: ['./task-manager-stdout.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TaskManagerStdoutComponent implements OnInit {
@ViewChild(MonacoEditorComponent) monacoEditorComponent: MonacoEditorComponent;
stdout = '';
taskManagerDetail: TaskManagerDetailInterface;

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() {
this.taskManagerService.taskManagerDetail$.pipe(first()).subscribe(data => {
this.taskManagerDetail = data;
this.reload();
this.cdr.markForCheck();
});
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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'
}
},
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand All @@ -38,7 +40,9 @@ import { TaskManagerThreadDumpComponent } from './thread-dump/task-manager-threa
TaskManagerStatusComponent,
TaskManagerLogListComponent,
TaskManagerLogDetailComponent,
TaskManagerThreadDumpComponent
TaskManagerThreadDumpComponent,
TaskManagerLogsComponent,
TaskManagerStdoutComponent
]
})
export class TaskManagerModule {}
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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(
Expand All @@ -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) {}
Expand Down

0 comments on commit 7cfcd33

Please sign in to comment.