UI: Make KWA's main table responsive and add toolbar (#1982)

* UI: Make KWA's main table responsive and add toolbar

* Add a top row toolbar with the title of the app and the button to
  create a new Experiment.
* Replace the card with a responsive table that shows the items. The
  component also has a paginator.

Signed-off-by: Elena Zioga <[email protected]>

* build: Update Dockerfile and README file

Update Dockerfile and README file to check out to the commit in master
branch from the Kubeflow repository that includes the corresponding
changes.

Signed-off-by: Elena Zioga <[email protected]>

Signed-off-by: Elena Zioga <[email protected]>

Author: elenzio9

cmd/new-ui/v1beta1/Dockerfile

@@ -6,7 +6,7 @@ RUN apt-get update && apt-get install git -y
 WORKDIR /kf
 RUN git clone https://github.com/kubeflow/kubeflow.git && \
     cd kubeflow && \
-    git checkout ecb72c2
+    git checkout c4ca7a9
 
 # --- Build the frontend kubeflow library ---
 FROM node:12 AS frontend-kubeflow-lib

pkg/new-ui/v1beta1/README.md

@@ -42,7 +42,7 @@ You can build the common library with:
 ```bash
 cd /tmp && git clone https://github.com/kubeflow/kubeflow.git \
   && cd kubeflow \
-  && git checkout ecb72c2 \
+  && git checkout c4ca7a9 \
   && cd components/crud-web-apps/common/frontend/kubeflow-common-lib
 
 # build the common library module

pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/config.ts

@@ -19,8 +19,6 @@ import {
 import { ExperimentOptimalTrialComponent } from './optimal-trial/experiment-optimal-trial.component';
 
 export const experimentsTableConfig: TableConfig = {
-  title: 'Experiments',
-  newButtonText: 'NEW EXPERIMENT',
   columns: [
     {
       matHeaderCellDef: 'Status',

pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.html

@@ -1,11 +1,18 @@
-<lib-namespace-select
-  *ngIf="(ns.dashboardConnected$ | async) === dashboardDisconnectedState"
-  namespacesUrl="/katib/fetch_namespaces"
-></lib-namespace-select>
+<div class="lib-content-wrapper">
+  <lib-title-actions-toolbar title="Experiments" [buttons]="buttons" i18n-title>
+    <lib-namespace-select
+      *ngIf="(ns.dashboardConnected$ | async) === dashboardDisconnectedState"
+      namespacesUrl="/katib/fetch_namespaces"
+    ></lib-namespace-select>
+  </lib-title-actions-toolbar>
 
-<lib-resource-table
-  [config]="config"
-  [data]="experiments"
-  [trackByFn]="trackByFn"
-  (actionsEmitter)="reactToAction($event)"
-></lib-resource-table>
+  <div class="page-padding lib-flex-grow lib-overflow-auto">
+    <lib-table
+      [config]="config"
+      [data]="experiments"
+      [trackByFn]="trackByFn"
+      (actionsEmitter)="reactToAction($event)"
+    >
+    </lib-table>
+  </div>
+</div>

pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.component.ts

@@ -18,6 +18,7 @@ import {
   TemplateValue,
   ActionEvent,
   DashboardState,
+  ToolbarButton,
 } from 'kubeflow';
 
 import { KWABackendService } from 'src/app/services/backend.service';
@@ -42,6 +43,17 @@ export class ExperimentsComponent implements OnInit, OnDestroy {
   private subs = new Subscription();
   private poller: ExponentialBackoff;
 
+  buttons: ToolbarButton[] = [
+    new ToolbarButton({
+      text: `New Experiment`,
+      icon: 'add',
+      stroked: true,
+      fn: () => {
+        this.router.navigate(['/new']);
+      },
+    }),
+  ];
+
   constructor(
     private backend: KWABackendService,
     private confirmDialog: ConfirmDialogService,
@@ -73,9 +85,6 @@ export class ExperimentsComponent implements OnInit, OnDestroy {
   reactToAction(a: ActionEvent) {
     const exp = a.data as Experiment;
     switch (a.action) {
-      case 'newResourceButton': // TODO: could also use enums here
-        this.router.navigate(['/new']);
-        break;
       case 'name:link':
         this.router.navigate([`/experiment/${exp.name}`]);
         break;

pkg/new-ui/v1beta1/frontend/src/app/pages/experiments/experiments.module.ts

@@ -1,28 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatCardModule } from '@angular/material/card';
-import {
-  NamespaceSelectModule,
-  ResourceTableModule,
-  ConfirmDialogModule,
-} from 'kubeflow';
-
+import { KubeflowModule } from 'kubeflow';
 import { ExperimentsComponent } from './experiments.component';
 import { ExperimentOptimalTrialModule } from './optimal-trial/experiment-optimal-trial.module';
 
 @NgModule({
   declarations: [ExperimentsComponent],
-  imports: [
-    CommonModule,
-    NamespaceSelectModule,
-    ResourceTableModule,
-
-    ConfirmDialogModule,
-    ExperimentOptimalTrialModule,
-    MatCardModule,
-    ConfirmDialogModule,
-    MatCardModule,
-  ],
+  imports: [CommonModule, ExperimentOptimalTrialModule, KubeflowModule],
   exports: [ExperimentsComponent],
 })
 export class ExperimentsModule {}