frontend: Show message in case of uncompleted trial instead of the gr…

…aph (#2063) * frontend: Show message in case of uncompleted trial instead of the graph Signed-off-by: Elena Zioga <[email protected]> * build: Update COMMIT file Signed-off-by: Elena Zioga <[email protected]> * frontend: Define the spinner text Signed-off-by: Elena Zioga <[email protected]> Signed-off-by: Elena Zioga <[email protected]>
kubeflow · Jan 16, 2023 · 2a6497f · 2a6497f
1 parent 1a128ae
commit 2a6497f
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 15 deletions.
diff --git a/pkg/new-ui/v1beta1/frontend/COMMIT b/pkg/new-ui/v1beta1/frontend/COMMIT
@@ -1 +1 @@
-2b4cc42e
+b931a7f8
diff --git a/...ew-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.html b/...ew-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.html
@@ -11,7 +11,9 @@
   <div class="page-padding lib-flex-grow lib-overflow-auto">
     <!--spinner-->
     <ng-container *ngIf="pageLoading; else content">
-      <lib-loading-spinner></lib-loading-spinner>
+      <lib-loading-spinner
+        message="Fetching Experiment details..."
+      ></lib-loading-spinner>
     </ng-container>
     <!--the tabs-->
   </div>

diff --git a/...ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.spec.ts b/...ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.spec.ts
@@ -8,7 +8,6 @@ import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTabsModule } from '@angular/material/tabs';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import {
   ConfirmDialogService,
   NamespaceService,
@@ -63,7 +62,6 @@ describe('ExperimentDetailsComponent', () => {
           PanelModule,
           ExperimentOverviewModule,
           ExperimentDetailsTabModule,
-          MatProgressSpinnerModule,
           ExperimentYamlModule,
           TitleActionsToolbarModule,
           TrialsGraphEchartsModule,

diff --git a/.../src/app/pages/experiment-details/trials-table/trial-details/trial-details.component.html b/.../src/app/pages/experiment-details/trials-table/trial-details/trial-details.component.html
@@ -8,7 +8,7 @@
 
   <div class="page-padding lib-flex-grow lib-overflow-auto">
     <div *ngIf="dataLoaded; else loading">
-      <div class="graph-div-outer">
+      <div *ngIf="showTrialGraph" class="graph-div-outer">
         <div class="graph-div-inner">
           <ngx-charts-line-chart
             [animations]="animations"
@@ -32,6 +32,12 @@
         </div>
       </div>
 
+      <div *ngIf="!showTrialGraph">
+        <lib-panel icon="info" color="primary" class="panel">
+          Trial is not completed yet.
+        </lib-panel>
+      </div>
+
       <div class="tab-height-fix">
         <mat-tab-group dynamicHeight animationDuration="0ms">
           <mat-tab label="OVERVIEW">
@@ -56,7 +62,9 @@
     <ng-template #loading>
       <div class="graph-div-outer">
         <div class="graph-div-inner">
-          <mat-spinner></mat-spinner>
+          <lib-loading-spinner
+            message="Fetching Trial details..."
+          ></lib-loading-spinner>
         </div>
       </div>
     </ng-template>

diff --git a/...c/app/pages/experiment-details/trials-table/trial-details/trial-details.component.spec.ts b/...c/app/pages/experiment-details/trials-table/trial-details/trial-details.component.spec.ts
@@ -2,14 +2,17 @@ import { HttpClientModule } from '@angular/common/http';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 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';
 import { ActivatedRoute, Router } from '@angular/router';
-import { NamespaceService, TitleActionsToolbarModule } from 'kubeflow';
+import {
+  LoadingSpinnerModule,
+  NamespaceService,
+  TitleActionsToolbarModule,
+} from 'kubeflow';
 
 let KWABackendServiceStub: Partial<KWABackendService>;
 let NamespaceServiceStub: Partial<NamespaceService>;
@@ -43,9 +46,9 @@ describe('TrialDetailsComponent', () => {
           HttpClientModule,
           ReactiveFormsModule,
           MatSnackBarModule,
-          MatProgressSpinnerModule,
           BrowserAnimationsModule,
           TitleActionsToolbarModule,
+          LoadingSpinnerModule,
         ],
         declarations: [TrialDetailsComponent],
         providers: [

diff --git a/...nd/src/app/pages/experiment-details/trials-table/trial-details/trial-details.component.ts b/...nd/src/app/pages/experiment-details/trials-table/trial-details/trial-details.component.ts
@@ -27,6 +27,7 @@ export class TrialDetailsComponent implements OnInit, OnDestroy {
   dataLoaded: boolean;
   trialDetails: TrialK8s;
   experimentName: string;
+  showTrialGraph: boolean = false;
 
   // chart's options
   view = [700, 500];
@@ -122,9 +123,12 @@ export class TrialDetailsComponent implements OnInit, OnDestroy {
       .getTrialInfo(this.trialName, this.namespace)
       .subscribe((response: TrialK8s) => {
         this.trialDetails = response;
-
         const status = this.trialStatus(response);
 
+        if (status && status === StatusEnum.SUCCEEDED) {
+          this.showTrialGraph = true;
+        }
+
         if (
           status &&
           !(status === StatusEnum.FAILED || status === StatusEnum.SUCCEEDED)
@@ -183,6 +187,11 @@ export class TrialDetailsComponent implements OnInit, OnDestroy {
           .getTrialInfo(this.trialName, this.namespace)
           .subscribe(response => {
             this.trialDetails = response;
+            const status = this.trialStatus(response);
+
+            if (status && status === StatusEnum.SUCCEEDED) {
+              this.showTrialGraph = true;
+            }
           });
       }),
     );

diff --git a/...ta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.spec.ts b/...ta1/frontend/src/app/pages/experiment-details/trials-table/trials-table.component.spec.ts
@@ -4,18 +4,23 @@ import { MatTableModule } from '@angular/material/table';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDialogModule } from '@angular/material/dialog';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatButtonModule } from '@angular/material/button';
 import { TrialsTableComponent } from './trials-table.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { SimpleChange } from '@angular/core';
-import { PropertyValue, StatusValue, ComponentValue } from 'kubeflow';
+import {
+  PropertyValue,
+  StatusValue,
+  ComponentValue,
+  KubeflowModule,
+} from 'kubeflow';
 import { parseStatus } from '../../experiments/utils';
 import lowerCase from 'lodash-es/lowerCase';
 import { KfpRunComponent } from './kfp-run/kfp-run.component';
+import { MatIconTestingModule } from '@angular/material/icon/testing';
 
 describe('TrialsTableComponent', () => {
   let component: TrialsTableComponent;
@@ -27,14 +32,15 @@ describe('TrialsTableComponent', () => {
         imports: [
           CommonModule,
           MatTableModule,
-          MatProgressSpinnerModule,
           MatDialogModule,
           MatIconModule,
           NgxChartsModule,
           MatTooltipModule,
           MatButtonModule,
           RouterTestingModule,
           BrowserAnimationsModule,
+          KubeflowModule,
+          MatIconTestingModule,
         ],
         declarations: [TrialsTableComponent],
       }).compileComponents();

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
@@ -4,7 +4,6 @@ import { MatTableModule } from '@angular/material/table';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDialogModule } from '@angular/material/dialog';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 import { TrialsTableComponent } from './trials-table.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -18,7 +17,6 @@ import { TrialDetailsModule } from './trial-details/trial-details.module';
   imports: [
     CommonModule,
     MatTableModule,
-    MatProgressSpinnerModule,
     MatDialogModule,
     MatIconModule,
     NgxChartsModule,