frontend: Create a yaml tab for Trials (#2011)

* Create a dedicated yaml tab for Trials.

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

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

@@ -35,11 +35,19 @@
       <div class="tab-height-fix">
         <mat-tab-group dynamicHeight animationDuration="0ms">
           <mat-tab label="OVERVIEW">
-            <app-trial-modal-overview
-              [trialName]="trialName"
-              [experimentName]="experimentName"
-              [trial]="trialDetails"
-            ></app-trial-modal-overview>
+            <ng-template matTabContent>
+              <app-trial-modal-overview
+                [trialName]="trialName"
+                [experimentName]="experimentName"
+                [trial]="trialDetails"
+              ></app-trial-modal-overview>
+            </ng-template>
+          </mat-tab>
+
+          <mat-tab label="YAML">
+            <ng-template matTabContent>
+              <app-trial-yaml [trialJson]="trialDetails"></app-trial-yaml>
+            </ng-template>
           </mat-tab>
         </mat-tab-group>
       </div>

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

@@ -9,6 +9,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTabsModule } from '@angular/material/tabs';
 import { TrialModalOverviewModule } from './overview/trial-modal-overview.module';
 import { TrialModalComponent } from './trial-modal.component';
+import { TrialYamlModule } from './trial-yaml/trial-yaml.module';
 
 import {
   TitleActionsToolbarModule,
@@ -32,6 +33,7 @@ import {
     LoadingSpinnerModule,
     PanelModule,
     TitleActionsToolbarModule,
+    TrialYamlModule,
   ],
   exports: [TrialModalComponent],
 })

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

@@ -0,0 +1,6 @@
+<lib-monaco-editor
+  [(text)]="yaml"
+  [language]="'yaml'"
+  [readOnly]="true"
+  [height]="500"
+></lib-monaco-editor>

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

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  overflow: auto;
+}

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

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { CommonModule } from '@angular/common';
+
+import { EditorModule } from 'kubeflow';
+import { TrialYamlComponent } from './trial-yaml.component';
+
+describe('TrialYamlComponent', () => {
+  let component: TrialYamlComponent;
+  let fixture: ComponentFixture<TrialYamlComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [CommonModule, NoopAnimationsModule, EditorModule],
+        declarations: [TrialYamlComponent],
+      }).compileComponents();
+    }),
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TrialYamlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { TrialK8s } from 'src/app/models/trial.k8s.model';
+import { dump } from 'js-yaml';
+
+@Component({
+  selector: 'app-trial-yaml',
+  templateUrl: './trial-yaml.component.html',
+  styleUrls: ['./trial-yaml.component.scss'],
+})
+export class TrialYamlComponent {
+  public yaml = '';
+
+  @Input()
+  set trialJson(trial: TrialK8s) {
+    this.yaml = dump(trial);
+  }
+}

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TrialYamlComponent } from './trial-yaml.component';
+import { EditorModule } from 'kubeflow';
+
+@NgModule({
+  declarations: [TrialYamlComponent],
+  imports: [CommonModule, EditorModule],
+  exports: [TrialYamlComponent],
+})
+export class TrialYamlModule {}