UI: Modify graph's wrapper component (kubeflow#1879)

* Make the wrapper component use the new graph. * Show the graph when at least one trial is completed. Signed-off-by: Elena Zioga <elena@arrikto.com>
arrikto · Oct 19, 2022 · 577adb5 · 577adb5
1 parent c5ab5f7
commit 577adb5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
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
@@ -13,22 +13,21 @@
     <ng-container *ngIf="pageLoading; else content">
       <lib-loading-spinner></lib-loading-spinner>
     </ng-container>
-
     <!--the tabs-->
   </div>
 </div>
 
 <ng-template #content>
-  <app-trials-graph
+  <app-trials-graph-echarts
     *ngIf="showGraph; else emptyGraph"
     [experimentTrialsCsv]="experimentTrialsCsv"
-    [hoveredTrial]="hoveredTrial"
+    [experiment]="experimentDetails"
     class="graph"
-  ></app-trials-graph>
+  ></app-trials-graph-echarts>
 
   <ng-template #emptyGraph>
     <lib-panel icon="info" color="primary" class="panel">
-      Couldn't find information for the underlying Trials.
+      Couldn't find any successful Trial.
     </lib-panel>
   </ng-template>
 

diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.ts
@@ -110,7 +110,7 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
         const data = transformStringResponses(response);
         this.columns = data.types;
         this.details = this.parseTrialsDetails(data.details);
-        this.showGraph = true;
+        this.showGraph = this.showGraphF(response);
       });
     this.backendService
       .getExperiment(this.name, this.namespace)
@@ -184,7 +184,7 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
             const data = transformStringResponses(trials);
             this.columns = data.types;
             this.details = this.parseTrialsDetails(data.details);
-            this.showGraph = trials.split(/\r\n|\r|\n/).length > 1;
+            this.showGraph = this.showGraphF(trials);
           });
       }),
     );
@@ -253,4 +253,10 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
       return StatusEnum.CREATED;
     }
   }
+
+  private showGraphF(response: string): boolean {
+    if (!response.includes(',,') && response.includes('\n')) {
+      return true;
+    }
+  }
 }
diff --git a/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.module.ts b/pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.module.ts
@@ -15,6 +15,7 @@ import { TrialsTableModule } from './trials-table/trials-table.module';
 import { ExperimentOverviewModule } from './overview/experiment-overview.module';
 import { ExperimentDetailsTabModule } from './details/experiment-details-tab.module';
 import { ExperimentYamlModule } from './yaml/experiment-yaml.module';
+import { TrialsGraphEchartsModule } from './trials-graph-echarts/trials-graph-echarts.module';
 
 @NgModule({
   declarations: [ExperimentDetailsComponent],
@@ -31,6 +32,7 @@ import { ExperimentYamlModule } from './yaml/experiment-yaml.module';
     MatProgressSpinnerModule,
     ExperimentYamlModule,
     TitleActionsToolbarModule,
+    TrialsGraphEchartsModule
   ],
   exports: [ExperimentDetailsComponent],
 })