Automated cherry pick of kubeflow#2101: Create the LOGS tab of Trial'…

…s details page in KWA

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

---------

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

pkg/new-ui/v1beta1/backend.go

@@ -729,9 +729,9 @@ func fetchMasterPodName(clientset *kubernetes.Clientset, trial *trialsv1beta1.Tr
 	}
 
 	if len(podList.Items) == 0 {
-		return "", errors.New(`Logs for the trial could not be found.
-Was 'retain: true' specified in the Experiment definition?
-An example can be found here: https://github.com/kubeflow/katib/blob/7bf39225f7235ee4ba6cf285ecc2c455c6471234/examples/v1beta1/argo/argo-workflow.yaml#L33`)
+		return "", errors.New(`Failed to find logs for this Trial. Make sure you've set "spec.trialTemplate.retain"
+		field to "true" in the Experiment definition. If this error persists then the Pod's logs are not currently
+		persisted in the cluster.`)
 	}
 	if len(podList.Items) > 1 {
 		return "", errors.New("More than one master replica found")

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 = null;
+      },
+      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">
+    {{ 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,21 @@
+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;
+    }
+
+    this.logs = trialLogs.split('\n');
+  }
+}

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,25 @@ 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)));
+  }
+
+  // ---------------------------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.log ? error.error.log : error.error;
+    }
+  }
 }