[FLINK-16741][web] Add TM log list and TM log detail page

This closes apache#11498.

flink-runtime-web/web-dashboard/src/app/interfaces/task-manager.ts

@@ -31,6 +31,10 @@ export interface TaskManagerDetailInterface {
  metrics: Metrics;
 }
 
+export interface TaskManagerLogInterface {
+ logs: { name: string; size: number }[];
+}
+
 export interface TaskmanagersItemInterface {
  id: string;
  path: string;

flink-runtime-web/web-dashboard/src/app/pages/job-manager/logs/job-manager-logs.component.html

@@ -17,4 +17,4 @@
  -->
 
 <flink-monaco-editor [value]="logs"></flink-monaco-editor>
-<flink-refresh-download [downloadHref]="'jobmanager/log'" [downloadName]="'jobmanager_log'" (reload)="reload()"></flink-refresh-download>
+<flink-refresh-download [compactMode]="true" [downloadHref]="'jobmanager/log'" [downloadName]="'jobmanager_log'" (reload)="reload()"></flink-refresh-download>

flink-runtime-web/web-dashboard/src/app/pages/job-manager/stdout/job-manager-stdout.component.html

@@ -17,4 +17,4 @@
  -->
 
 <flink-monaco-editor [value]="stdout"></flink-monaco-editor>
-<flink-refresh-download [downloadHref]="'jobmanager/stdout'" [downloadName]="'jobmanager_stdout'" (reload)="reload()"></flink-refresh-download>
+<flink-refresh-download [compactMode]="true" [downloadHref]="'jobmanager/stdout'" [downloadName]="'jobmanager_stdout'" (reload)="reload()"></flink-refresh-download>

flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.html

@@ -0,0 +1,36 @@
+<!--
+ ~ 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: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.
+ -->
+
+<div class="breadcrumb">
+ <nz-breadcrumb>
+ <nz-breadcrumb-item>
+ <a *ngIf="taskManagerDetail" [routerLink]="['/','task-manager',this.taskManagerDetail.id,'log-list']">
+ <i nz-icon type="rollback" theme="outline"></i> Log List
+ </a>
+ </nz-breadcrumb-item>
+ <nz-breadcrumb-item>
+ {{ logName }}
+ </nz-breadcrumb-item>
+ </nz-breadcrumb>
+ <flink-refresh-download
+ [isLoading]="isLoading"
+ [downloadHref]="downloadUrl"
+ [downloadName]="logName"
+ (reload)="reloadLog()"
+ (fullScreen)="toggleFullScreen($event)">
+ </flink-refresh-download>
+</div>
+<flink-monaco-editor [value]="logs"></flink-monaco-editor>

flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.less

@@ -0,0 +1,54 @@
+/*
+ * 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: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";
+
+:host {
+ display: block;
+ height: 100%;
+ &.full-screen {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ background: @component-background;
+ z-index: 99;
+ flink-monaco-editor {
+ height: calc(~"100vh - 65px");
+ }
+ }
+}
+
+flink-monaco-editor {
+ height: calc(~"100vh - 386px");
+ border: 1px solid @border-color-split;
+}
+
+.breadcrumb {
+ background: @component-background;
+ border: 1px solid @border-color-split;
+ margin-bottom: 16px;
+ padding: 12px 24px;
+ position: relative;
+}
+
+flink-refresh-download {
+ position: absolute;
+ right: 12px;
+ top: 0;
+ line-height: 47px;
+}

flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-detail/task-manager-log-detail.component.ts

@@ -0,0 +1,89 @@
+/*
+ * 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: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 { ActivatedRoute } from '@angular/router';
+import { TaskManagerDetailInterface } from 'interfaces';
+import { TaskManagerService } from 'services';
+import { first } from 'rxjs/operators';
+import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.component';
+
+@Component({
+ selector: 'flink-task-manager-log-detail',
+ templateUrl: './task-manager-log-detail.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ host: {
+ '[class.full-screen]': 'isFullScreen'
+ },
+ styleUrls: ['./task-manager-log-detail.component.less']
+})
+export class TaskManagerLogDetailComponent implements OnInit {
+ logs = '';
+ logName = '';
+ downloadUrl = '';
+ isLoading = false;
+ taskManagerDetail: TaskManagerDetailInterface;
+ isFullScreen = false;
+ hasLogName = false;
+ @ViewChild(MonacoEditorComponent) monacoEditorComponent: MonacoEditorComponent;
+
+ constructor(
+ private taskManagerService: TaskManagerService,
+ private cdr: ChangeDetectorRef,
+ private activatedRoute: ActivatedRoute
+ ) {}
+
+ reloadLog() {
+ this.isLoading = true;
+ this.cdr.markForCheck();
+ this.taskManagerService.loadLog(this.taskManagerDetail.id, this.logName, this.hasLogName).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();
+ }
+ );
+ }
+
+ toggleFullScreen(fullScreen: boolean) {
+ this.isFullScreen = fullScreen;
+ this.layoutEditor();
+ }
+
+ layoutEditor(): void {
+ setTimeout(() => this.monacoEditorComponent.layout());
+ }
+
+ 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.reloadLog();
+ });
+ }
+}

flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.html

@@ -0,0 +1,39 @@
+<!--
+ ~ 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: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.
+ -->
+
+<nz-card>
+ <nz-table
+ [nzSize]="'small'"
+ [nzData]="listOfLog"
+ [nzLoading]="isLoading"
+ [nzFrontPagination]="false"
+ [nzShowPagination]="false">
+ <thead>
+ <tr>
+ <th>Log Name</th>
+ <th>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>
+ </tbody>
+ </nz-table>
+</nz-card>

flink-runtime-web/web-dashboard/src/app/pages/task-manager/log-list/task-manager-log-list.component.ts

@@ -0,0 +1,50 @@
+/*
+ * 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: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 } from '@angular/core';
+import { first, flatMap } from 'rxjs/operators';
+import { TaskManagerService } from 'services';
+
+@Component({
+ selector: 'flink-task-manager-log-list',
+ templateUrl: './task-manager-log-list.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TaskManagerLogListComponent implements OnInit {
+ listOfLog: { name: string; size: number }[] = [];
+ isLoading = true;
+
+ constructor(private taskManagerService: TaskManagerService, private cdr: ChangeDetectorRef) {}
+
+ ngOnInit() {
+ this.taskManagerService.taskManagerDetail$
+ .pipe(
+ first(),
+ flatMap(data => this.taskManagerService.loadLogList(data.id))
+ )
+ .subscribe(
+ data => {
+ this.listOfLog = data;
+ this.isLoading = false;
+ this.cdr.markForCheck();
+ },
+ () => {
+ this.isLoading = false;
+ this.cdr.markForCheck();
+ }
+ );
+ }
+}