Skip to content

Commit

Permalink
[FLINK-17130][web] Enable listing JM Logs and displaying Logs by file…
Browse files Browse the repository at this point in the history
…name
  • Loading branch information
vthinkxie committed Apr 14, 2020
1 parent 8127339 commit a68b809
Show file tree
Hide file tree
Showing 13 changed files with 215 additions and 146 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { JobManagerConfigurationComponent } from './configuration/job-manager-configuration.component';
import { JobManagerComponent } from './job-manager.component';
import { JobManagerLogsComponent } from './logs/job-manager-logs.component';
import { JobManagerStdoutComponent } from './stdout/job-manager-stdout.component';
import { JobManagerLogDetailComponent } from './log-detail/job-manager-log-detail.component';
import { JobManagerLogListComponent } from './log-list/job-manager-log-list.component';

const routes: Routes = [
{
Expand All @@ -36,17 +36,17 @@ const routes: Routes = [
}
},
{
path: 'logs',
component: JobManagerLogsComponent,
path: 'log',
component: JobManagerLogListComponent,
data: {
path: 'logs'
path: 'log'
}
},
{
path: 'stdout',
component: JobManagerStdoutComponent,
path: 'log/:logName',
component: JobManagerLogDetailComponent,
data: {
path: 'stdout'
path: 'log'
}
},
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
changeDetection: ChangeDetectionStrategy.OnPush
})
export class JobManagerComponent {
listOfNavigation = [
{ path: 'config', title: 'Configuration' },
{ path: 'logs', title: 'Logs' },
{ path: 'stdout', title: 'Stdout' }
];
listOfNavigation = [{ path: 'config', title: 'Configuration' }, { path: 'log', title: 'Log' }];
}
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ import { ShareModule } from 'share/share.module';
import { JobManagerRoutingModule } from './job-manager-routing.module';
import { JobManagerComponent } from './job-manager.component';
import { JobManagerConfigurationComponent } from './configuration/job-manager-configuration.component';
import { JobManagerLogsComponent } from './logs/job-manager-logs.component';
import { JobManagerStdoutComponent } from './stdout/job-manager-stdout.component';
import { JobManagerLogDetailComponent } from './log-detail/job-manager-log-detail.component';
import { JobManagerLogListComponent } from './log-list/job-manager-log-list.component';

@NgModule({
imports: [CommonModule, ShareModule, JobManagerRoutingModule],
declarations: [
JobManagerComponent,
JobManagerConfigurationComponent,
JobManagerLogsComponent,
JobManagerStdoutComponent
JobManagerLogListComponent,
JobManagerLogDetailComponent
]
})
export class JobManagerModule {}
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,21 @@
~ limitations under the License.
-->

<div class="breadcrumb">
<nz-breadcrumb>
<nz-breadcrumb-item>
<a [routerLink]="['../']"><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)="reload()"
(fullScreen)="toggleFullScreen($event)">
</flink-refresh-download>
</div>
<flink-monaco-editor [value]="logs"></flink-monaco-editor>
<flink-refresh-download [compactMode]="true" [downloadHref]="'jobmanager/log'" [downloadName]="'jobmanager_log'" (reload)="reload()"></flink-refresh-download>
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,40 @@
* 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 - 160px");
height: calc(~"100vh - 220px");
}

:host {
.breadcrumb {
background: @component-background;
border-bottom: 1px solid @border-color-split;
margin-bottom: 16px;
padding: 12px 24px;
position: relative;
display: block;
}

flink-refresh-download {
position: absolute;
right: 12px;
top: 0;
line-height: 47px;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/*
* 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 { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { finalize } from 'rxjs/operators';
import { JobManagerService } from 'services';
import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.component';

@Component({
selector: 'flink-job-manager-log-detail',
templateUrl: './job-manager-log-detail.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class.full-screen]': 'isFullScreen'
},
styleUrls: ['./job-manager-log-detail.component.less']
})
export class JobManagerLogDetailComponent implements OnInit {
logs = '';
logName = '';
downloadUrl = '';
isLoading = false;
isFullScreen = false;
@ViewChild(MonacoEditorComponent) monacoEditorComponent: MonacoEditorComponent;
constructor(
private jobManagerService: JobManagerService,
private cdr: ChangeDetectorRef,
private activatedRoute: ActivatedRoute
) {}

reload() {
this.isLoading = true;
this.cdr.markForCheck();
this.jobManagerService
.loadLog(this.logName)
.pipe(
finalize(() => {
this.isLoading = false;
this.layoutEditor();
this.cdr.markForCheck();
})
)
.subscribe(data => {
this.logs = data.data;
this.downloadUrl = data.url;
});
}

layoutEditor(): void {
setTimeout(() => this.monacoEditorComponent.layout());
}

toggleFullScreen(fullScreen: boolean) {
this.isFullScreen = fullScreen;
this.layoutEditor();
}

ngOnInit() {
this.logName = this.activatedRoute.snapshot.params.logName;
this.reload();
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,26 @@
~ limitations under the License.
-->

<flink-monaco-editor [value]="stdout"></flink-monaco-editor>
<flink-refresh-download [compactMode]="true" [downloadHref]="'jobmanager/stdout'" [downloadName]="'jobmanager_stdout'" (reload)="reload()"></flink-refresh-download>
<nz-card [nzBordered]="false">
<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>
Original file line number Diff line number Diff line change
Expand Up @@ -16,31 +16,32 @@
* limitations under the License.
*/

import { ChangeDetectorRef, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { finalize } from 'rxjs/operators';
import { JobManagerService } from 'services';
import { MonacoEditorComponent } from 'share/common/monaco-editor/monaco-editor.component';

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

reload() {
this.jobManagerService.loadLogs().subscribe(data => {
this.monacoEditorComponent.layout();
this.logs = data;
this.cdr.markForCheck();
});
}
export class JobManagerLogListComponent implements OnInit {
listOfLog: { name: string; size: number }[] = [];
isLoading = true;

constructor(private jobManagerService: JobManagerService, private cdr: ChangeDetectorRef) {}

ngOnInit() {
this.reload();
this.jobManagerService
.loadLogList()
.pipe(
finalize(() => {
this.isLoading = false;
this.cdr.markForCheck();
})
)
.subscribe(data => {
this.listOfLog = data;
});
}
}

This file was deleted.

This file was deleted.

Loading

0 comments on commit a68b809

Please sign in to comment.