Dedicated yaml tab for Trials (#2034)

* frontend: Create a yaml tab for Trials (#2011) * Create a dedicated yaml tab for Trials. Signed-off-by: Elena Zioga <elena@arrikto.com> * frontend: Rename components * Rename trial-modal component to trial-details. * Rename trial-modal-overview component to trial-overview. Signed-off-by: Elena Zioga <elena@arrikto.com> Signed-off-by: Elena Zioga <elena@arrikto.com>
kubeflow · Nov 28, 2022 · 7f4eb27 · 7f4eb27
1 parent b123dbf
commit 7f4eb27
Show file tree

Hide file tree

Showing 23 changed files with 142 additions and 63 deletions.
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/app-routing.module.ts b/pkg/new-ui/v1beta1/frontend/src/app/app-routing.module.ts
@@ -3,7 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { ExperimentsComponent } from './pages/experiments/experiments.component';
 import { ExperimentDetailsComponent } from './pages/experiment-details/experiment-details.component';
 import { ExperimentCreationComponent } from './pages/experiment-creation/experiment-creation.component';
-import { TrialModalComponent } from './pages/experiment-details/trials-table/trial-modal/trial-modal.component';
+import { TrialDetailsComponent } from './pages/experiment-details/trials-table/trial-details/trial-details.component';
 
 const routes: Routes = [
   { path: '', component: ExperimentsComponent },
@@ -14,7 +14,7 @@ const routes: Routes = [
   { path: 'new', component: ExperimentCreationComponent },
   {
     path: 'experiment/:experimentName/trial/:trialName',
-    component: TrialModalComponent,
+    component: TrialDetailsComponent,
   },
 ];
 

diff --git a/...le/trial-modal/trial-modal.component.html → ...rial-details/trial-details.component.html b/...le/trial-modal/trial-modal.component.html → ...rial-details/trial-details.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-overview
+                [trialName]="trialName"
+                [experimentName]="experimentName"
+                [trial]="trialDetails"
+              ></app-trial-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>

diff --git a/...le/trial-modal/trial-modal.component.scss → ...rial-details/trial-details.component.scss b/...le/trial-modal/trial-modal.component.scss → ...rial-details/trial-details.component.scss
diff --git a/...trial-modal/trial-modal.component.spec.ts → ...l-details/trial-details.component.spec.ts b/...trial-modal/trial-modal.component.spec.ts → ...l-details/trial-details.component.spec.ts
@@ -4,7 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
-import { TrialModalComponent } from './trial-modal.component';
+import { TrialDetailsComponent } from './trial-details.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { KWABackendService } from 'src/app/services/backend.service';
 import { of } from 'rxjs';
@@ -23,9 +23,9 @@ NamespaceServiceStub = {
   getSelectedNamespace: () => of(),
 };
 
-describe('TrialModalComponent', () => {
-  let component: TrialModalComponent;
-  let fixture: ComponentFixture<TrialModalComponent>;
+describe('TrialDetailsComponent', () => {
+  let component: TrialDetailsComponent;
+  let fixture: ComponentFixture<TrialDetailsComponent>;
   let activatedRouteSpy;
 
   beforeEach(
@@ -47,7 +47,7 @@ describe('TrialModalComponent', () => {
           BrowserAnimationsModule,
           TitleActionsToolbarModule,
         ],
-        declarations: [TrialModalComponent],
+        declarations: [TrialDetailsComponent],
         providers: [
           { provide: ActivatedRoute, useValue: activatedRouteSpy },
           { provide: Router, useValue: {} },
@@ -59,7 +59,7 @@ describe('TrialModalComponent', () => {
   );
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TrialModalComponent);
+    fixture = TestBed.createComponent(TrialDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

diff --git a/...able/trial-modal/trial-modal.component.ts → .../trial-details/trial-details.component.ts b/...able/trial-modal/trial-modal.component.ts → .../trial-details/trial-details.component.ts
@@ -17,11 +17,11 @@ interface ChartPoint {
 }
 
 @Component({
-  selector: 'app-trial-modal',
-  templateUrl: './trial-modal.component.html',
-  styleUrls: ['./trial-modal.component.scss'],
+  selector: 'app-trial-details',
+  templateUrl: './trial-details.component.html',
+  styleUrls: ['./trial-details.component.scss'],
 })
-export class TrialModalComponent implements OnInit {
+export class TrialDetailsComponent implements OnInit {
   trialName: string;
   namespace: string;
   dataLoaded: boolean;

diff --git a/...s-table/trial-modal/trial-modal.module.ts → ...ble/trial-details/trial-details.module.ts b/...s-table/trial-modal/trial-modal.module.ts → ...ble/trial-details/trial-details.module.ts
@@ -7,8 +7,9 @@ import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 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 { TrialOverviewModule } from './trial-overview/trial-overview.module';
+import { TrialDetailsComponent } from './trial-details.component';
+import { TrialYamlModule } from './trial-yaml/trial-yaml.module';
 
 import {
   TitleActionsToolbarModule,
@@ -17,9 +18,9 @@ import {
 } from 'kubeflow';
 
 @NgModule({
-  declarations: [TrialModalComponent],
+  declarations: [TrialDetailsComponent],
   imports: [
-    TrialModalOverviewModule,
+    TrialOverviewModule,
     CommonModule,
     MatTableModule,
     MatProgressSpinnerModule,
@@ -32,7 +33,8 @@ import {
     LoadingSpinnerModule,
     PanelModule,
     TitleActionsToolbarModule,
+    TrialYamlModule,
   ],
-  exports: [TrialModalComponent],
+  exports: [TrialDetailsComponent],
 })
-export class TrialModalModule {}
+export class TrialDetailsModule {}
diff --git a/...l/overview/metrics/metrics.component.html → ...l-overview/metrics/metrics.component.html b/...l/overview/metrics/metrics.component.html → ...l-overview/metrics/metrics.component.html
diff --git a/...ent-details/trials-table/trial-details/trial-overview/metrics/metrics.component.module.ts b/...ent-details/trials-table/trial-details/trial-overview/metrics/metrics.component.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { ConditionsTableModule, DetailsListModule } from 'kubeflow';
+import { TrialMetricsComponent } from './metrics.component';
+
+@NgModule({
+  declarations: [TrialMetricsComponent],
+  imports: [ConditionsTableModule, DetailsListModule],
+  exports: [TrialMetricsComponent],
+})
+export class TrialMetricsModule {}
diff --git a/...verview/metrics/metrics.component.spec.ts → ...verview/metrics/metrics.component.spec.ts b/...verview/metrics/metrics.component.spec.ts → ...verview/metrics/metrics.component.spec.ts
@@ -2,21 +2,21 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { ConditionsTableModule, DetailsListModule } from 'kubeflow';
 
-import { TrialModalMetricsComponent } from './metrics.component';
+import { TrialMetricsComponent } from './metrics.component';
 
-describe('TrialModalMetricsComponent', () => {
-  let component: TrialModalMetricsComponent;
-  let fixture: ComponentFixture<TrialModalMetricsComponent>;
+describe('TrialMetricsComponent', () => {
+  let component: TrialMetricsComponent;
+  let fixture: ComponentFixture<TrialMetricsComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [TrialModalMetricsComponent],
+      declarations: [TrialMetricsComponent],
       imports: [ConditionsTableModule, DetailsListModule, MatSnackBarModule],
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TrialModalMetricsComponent);
+    fixture = TestBed.createComponent(TrialMetricsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

diff --git a/...dal/overview/metrics/metrics.component.ts → ...ial-overview/metrics/metrics.component.ts b/...dal/overview/metrics/metrics.component.ts → ...ial-overview/metrics/metrics.component.ts
@@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core';
   selector: 'app-metrics-overview',
   templateUrl: './metrics.component.html',
 })
-export class TrialModalMetricsComponent {
+export class TrialMetricsComponent {
   @Input() name: string;
   @Input() latest: string;
   @Input() max: string;

diff --git a/...rview/trial-modal-overview.component.html → ...al-overview/trial-overview.component.html b/...rview/trial-modal-overview.component.html → ...al-overview/trial-overview.component.html
diff --git a/...ew/trial-modal-overview.component.spec.ts → ...overview/trial-overview.component.spec.ts b/...ew/trial-modal-overview.component.spec.ts → ...overview/trial-overview.component.spec.ts
@@ -6,30 +6,30 @@ import {
   DetailsListModule,
   HeadingSubheadingRowModule,
 } from 'kubeflow';
-import { TrialModalMetricsModule } from './metrics/metrics.component.module';
+import { TrialMetricsModule } from './metrics/metrics.component.module';
 
-import { TrialModalOverviewComponent } from './trial-modal-overview.component';
+import { TrialOverviewComponent } from './trial-overview.component';
 
-describe('TrialModalOverviewComponent', () => {
-  let component: TrialModalOverviewComponent;
-  let fixture: ComponentFixture<TrialModalOverviewComponent>;
+describe('TrialOverviewComponent', () => {
+  let component: TrialOverviewComponent;
+  let fixture: ComponentFixture<TrialOverviewComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [TrialModalOverviewComponent],
+      declarations: [TrialOverviewComponent],
       imports: [
         CommonModule,
         ConditionsTableModule,
         DetailsListModule,
         HeadingSubheadingRowModule,
-        TrialModalMetricsModule,
+        TrialMetricsModule,
         MatSnackBarModule,
       ],
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TrialModalOverviewComponent);
+    fixture = TestBed.createComponent(TrialOverviewComponent);
     component = fixture.componentInstance;
     component.trial = {
       status: {

diff --git a/...verview/trial-modal-overview.component.ts → ...rial-overview/trial-overview.component.ts b/...verview/trial-modal-overview.component.ts → ...rial-overview/trial-overview.component.ts
@@ -10,11 +10,11 @@ import { TrialK8s } from 'src/app/models/trial.k8s.model';
 import { numberToExponential } from 'src/app/shared/utils';
 
 @Component({
-  selector: 'app-trial-modal-overview',
-  templateUrl: './trial-modal-overview.component.html',
+  selector: 'app-trial-overview',
+  templateUrl: './trial-overview.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TrialModalOverviewComponent implements OnChanges {
+export class TrialOverviewComponent implements OnChanges {
   status: string;
   statusIcon: string;
   completionTime: string;

diff --git a/...l/overview/trial-modal-overview.module.ts → ...s/trial-overview/trial-overview.module.ts b/...l/overview/trial-modal-overview.module.ts → ...s/trial-overview/trial-overview.module.ts
@@ -5,18 +5,18 @@ import {
   DetailsListModule,
   HeadingSubheadingRowModule,
 } from 'kubeflow';
-import { TrialModalMetricsModule } from './metrics/metrics.component.module';
-import { TrialModalOverviewComponent } from './trial-modal-overview.component';
+import { TrialMetricsModule } from './metrics/metrics.component.module';
+import { TrialOverviewComponent } from './trial-overview.component';
 
 @NgModule({
-  declarations: [TrialModalOverviewComponent],
+  declarations: [TrialOverviewComponent],
   imports: [
     CommonModule,
     ConditionsTableModule,
     DetailsListModule,
     HeadingSubheadingRowModule,
-    TrialModalMetricsModule,
+    TrialMetricsModule,
   ],
-  exports: [TrialModalOverviewComponent],
+  exports: [TrialOverviewComponent],
 })
-export class TrialModalOverviewModule {}
+export class TrialOverviewModule {}
diff --git a/.../pages/experiment-details/trials-table/trial-details/trial-yaml/trial-yaml.component.html b/.../pages/experiment-details/trials-table/trial-details/trial-yaml/trial-yaml.component.html
@@ -0,0 +1,6 @@
+<lib-monaco-editor
+  [(text)]="yaml"
+  [language]="'yaml'"
+  [readOnly]="true"
+  [height]="500"
+></lib-monaco-editor>
diff --git a/.../pages/experiment-details/trials-table/trial-details/trial-yaml/trial-yaml.component.scss b/.../pages/experiment-details/trials-table/trial-details/trial-yaml/trial-yaml.component.scss
@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  overflow: auto;
+}
diff --git a/...ges/experiment-details/trials-table/trial-details/trial-yaml/trial-yaml.component.spec.ts b/...ges/experiment-details/trials-table/trial-details/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();
+  });
+});
diff --git a/...pp/pages/experiment-details/trials-table/trial-details/trial-yaml/trial-yaml.component.ts b/...pp/pages/experiment-details/trials-table/trial-details/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);
+  }
+}
diff --git a/...c/app/pages/experiment-details/trials-table/trial-details/trial-yaml/trial-yaml.module.ts b/...c/app/pages/experiment-details/trials-table/trial-details/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 {}
diff --git a/.../experiment-details/trials-table/trial-modal/overview/metrics/metrics.component.module.ts b/.../experiment-details/trials-table/trial-modal/overview/metrics/metrics.component.module.ts
diff --git a/...1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.html b/...1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.html
@@ -23,7 +23,7 @@
       </span>
 
       <span
-        (click)="openTrialModal(element[i])"
+        (click)="openTrialDetails(element[i])"
         *ngIf="column === 'Trial name'"
         class="name"
         >{{ element[i] }}

diff --git a/.../v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.ts b/.../v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.ts
@@ -57,7 +57,7 @@ export class TrialsTableComponent implements OnChanges {
     }
   }
 
-  openTrialModal(name: string) {
+  openTrialDetails(name: string) {
     this.router.navigate([`/experiment/${this.experimentName}/trial/${name}`]);
   }
 

diff --git a/...-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.module.ts b/...-ui/v1beta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.module.ts
@@ -8,8 +8,8 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 import { TrialsTableComponent } from './trials-table.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { TrialModalComponent } from './trial-modal/trial-modal.component';
-import { TrialModalModule } from './trial-modal/trial-modal.module';
+import { TrialDetailsComponent } from './trial-details/trial-details.component';
+import { TrialDetailsModule } from './trial-details/trial-details.module';
 
 @NgModule({
   declarations: [TrialsTableComponent],
@@ -21,9 +21,9 @@ import { TrialModalModule } from './trial-modal/trial-modal.module';
     MatIconModule,
     NgxChartsModule,
     MatTooltipModule,
-    TrialModalModule,
+    TrialDetailsModule,
   ],
-  entryComponents: [TrialModalComponent],
+  entryComponents: [TrialDetailsComponent],
   exports: [TrialsTableComponent],
 })
 export class TrialsTableModule {}