frontend: Add LOGS tab in Trial details page

Signed-off-by: Elena Zioga <elena@arrikto.com>

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-details/trial-details.component.html

@@ -46,6 +46,16 @@
           ></app-trial-overview>
         </ng-template>
       </mat-tab>
+
+      <mat-tab label="LOGS">
+        <ng-template matTabContent>
+          <app-trial-logs
+            [trialLogs]="trialLogs"
+            [logsRequestError]="logsRequestError"
+          ></app-trial-logs>
+        </ng-template>
+      </mat-tab>
+
       <mat-tab label="YAML">
         <ng-template matTabContent>
           <app-trial-yaml [trialJson]="trialDetails"></app-trial-yaml>

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-details/trial-details.component.spec.ts

@@ -21,6 +21,7 @@ let NamespaceServiceStub: Partial<NamespaceService>;
 KWABackendServiceStub = {
   getTrial: () => of([]),
   getTrialInfo: () => of(),
+  getTrialLogs: () => of(),
 };
 
 NamespaceServiceStub = {

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-details/trial-details.component.ts

@@ -30,6 +30,8 @@ export class TrialDetailsComponent implements OnInit, OnDestroy {
   experimentName: string;
   showTrialGraph: boolean = false;
   options: {};
+  trialLogs: string;
+  logsRequestError: string;
   chartData: ChartPoint[] = [];
   yScaleMax = 0;
   yScaleMin = 1;
@@ -133,6 +135,17 @@ export class TrialDetailsComponent implements OnInit, OnDestroy {
         }
         this.pageLoading = false;
       });
+
+    this.backendService.getTrialLogs(this.trialName, this.namespace).subscribe(
+      logs => {
+        this.trialLogs = logs;
+        this.logsRequestError = '';
+      },
+      error => {
+        this.trialLogs = null;
+        this.logsRequestError = error;
+      },
+    );
   }
 
   private trialStatus(trial: TrialK8s): StatusEnum {

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-details/trial-details.module.ts

@@ -16,6 +16,7 @@ import {
   PanelModule,
 } from 'kubeflow';
 import { NgxEchartsModule } from 'ngx-echarts';
+import { TrialLogsModule } from './trial-logs/trial-logs.module';
 
 @NgModule({
   declarations: [TrialDetailsComponent],
@@ -36,6 +37,7 @@ import { NgxEchartsModule } from 'ngx-echarts';
     NgxEchartsModule.forRoot({
       echarts: () => import('echarts'),
     }),
+    TrialLogsModule,
   ],
   exports: [TrialDetailsComponent],
 })

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-details/trial-logs/trial-logs.component.html

@@ -0,0 +1,15 @@
+<!--if no logs are present at all then show a warning message-->
+<ng-container *ngIf="logsRequestError">
+  <lib-panel icon="error" color="warn">
+    Error: {{ logsRequestError }}
+  </lib-panel>
+</ng-container>
+
+<ng-container *ngIf="!logsRequestError">
+  <lib-logs-viewer
+    class="logs-viewer"
+    heading="Trial Logs"
+    [subHeading]="''"
+    [logs]="logs"
+  ></lib-logs-viewer>
+</ng-container>

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-details/trial-logs/trial-logs.component.scss

@@ -0,0 +1,9 @@
+lib-panel {
+  display: block;
+  margin-top: 1rem;
+}
+
+.logs-viewer {
+  margin-bottom: 2rem;
+  margin-top: 1rem;
+}

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-details/trial-logs/trial-logs.component.spec.ts

@@ -0,0 +1,36 @@
+import { CommonModule } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  HeadingSubheadingRowModule,
+  KubeflowModule,
+  LogsViewerModule,
+} from 'kubeflow';
+
+import { TrialLogsComponent } from './trial-logs.component';
+
+describe('TrialLogsComponent', () => {
+  let component: TrialLogsComponent;
+  let fixture: ComponentFixture<TrialLogsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TrialLogsComponent],
+      imports: [
+        CommonModule,
+        KubeflowModule,
+        HeadingSubheadingRowModule,
+        LogsViewerModule,
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TrialLogsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-details/trial-logs/trial-logs.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-trial-logs',
+  templateUrl: './trial-logs.component.html',
+  styleUrls: ['./trial-logs.component.scss'],
+})
+export class TrialLogsComponent {
+  public logs: string[];
+
+  @Input() logsRequestError: string;
+
+  @Input()
+  set trialLogs(trialLogs: string) {
+    if (!trialLogs) {
+      return;
+    }
+
+    let arrayOfLogs = trialLogs.split('\n');
+    this.logs = arrayOfLogs;
+  }
+}

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trial-details/trial-logs/trial-logs.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TrialLogsComponent } from './trial-logs.component';
+import {
+  HeadingSubheadingRowModule,
+  KubeflowModule,
+  LogsViewerModule,
+} from 'kubeflow';
+
+@NgModule({
+  declarations: [TrialLogsComponent],
+  imports: [
+    CommonModule,
+    KubeflowModule,
+    HeadingSubheadingRowModule,
+    LogsViewerModule,
+  ],
+  exports: [TrialLogsComponent],
+})
+export class TrialLogsModule {}

pkg/new-ui/v1beta1/frontend/src/app/services/backend.service.ts

@@ -102,4 +102,52 @@ export class KWABackendService extends BackendService {
       .post(url, { postData: exp })
       .pipe(catchError(error => this.parseError(error)));
   }
+
+  getTrialLogs(name: string, namespace: string): Observable<any> {
+    const url = `/katib/fetch_trial_logs/?trialName=${name}&namespace=${namespace}`;
+
+    return this.http.get(url).pipe(
+      catchError(error => this.handleError(error, false)),
+      map((resp: any) => {
+        return resp;
+      }),
+    );
+  }
+
+  // ---------------------------Error Handling---------------------------------
+
+  // Override common service's getBackendErrorLog
+  // in order to properly show the message the backend has sent
+  public getBackendErrorLog(error: HttpErrorResponse): string {
+    if (error.error === null) {
+      return error.message;
+    } else {
+      // Show the message the backend has sent
+      return error.error;
+    }
+  }
+
+  // Override common service's getErrorMessage
+  // in order to include the error.status in error message
+  public getErrorMessage(
+    error: HttpErrorResponse | ErrorEvent | string,
+  ): string {
+    if (typeof error === 'string') {
+      return error;
+    }
+
+    if (error instanceof HttpErrorResponse) {
+      if (this.getBackendErrorLog(error) !== undefined) {
+        return `[${error.status}] ${this.getBackendErrorLog(error)}`;
+      }
+
+      return `${error.status}: ${error.message}`;
+    }
+
+    if (error instanceof ErrorEvent) {
+      return error.message;
+    }
+
+    return `Unexpected error encountered`;
+  }
 }