feat(jupyter): Init update of jupyter frontend to kf1.9

frontend/jupyter/.gitignore

@@ -46,9 +46,6 @@ testem.log
 .DS_Store
 Thumbs.db
 
-# Rok files
-**/browse-in-rok*
-
 # Fonts Files
 /src/assets/fonts
 

frontend/jupyter/angular.json

@@ -69,52 +69,6 @@
                 "fr"
               ]
             },
-            "rok": {
-              "budgets": [
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.rok.ts"
-                }
-              ]
-            },
-            "rok-prod": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.rok.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": {
-                "scripts": true,
-                "styles": true,
-                "hidden": false,
-                "vendor": true
-              },
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
-            },
             "production": {
               "fileReplacements": [
                 {
@@ -159,9 +113,6 @@
             "production": {
               "buildTarget": "frontend:build:production"
             },
-            "rok": {
-              "buildTarget": "frontend:build:rok"
-            },
             "fr": {
               "proxyConfig": "src/proxy.conf.json",
               "buildTarget": "frontend:build:fr"

frontend/jupyter/package.json

@@ -7,9 +7,7 @@
     "build": "npm run copyLibAssets && ng build --base-href /jupyter/ --deploy-url static/ --configuration production",
     "build:fr": "npm run copyLibAssets && ng build --base-href /jupyter/ --deploy-url static/ --configuration production,fr",
     "build:watch": "npm run copyLibAssets && ng build --watch --deploy-url static/ --outputPath ../backend/apps/default/static/ --outputHashing all",
-    "build:watch:rok": "npm run copyLibAssets && ng build --watch --deploy-url static/ --outputPath ../backend/apps/rok/static/ --outputHashing all --configuration=rok",
     "serve": "npm run copyLibAssets && ng serve --proxy-config=src/proxy.conf.json",
-    "serve:rok": "npm run copyLibAssets && ng serve --configuration=rok --proxy-config=src/proxy.conf.rok.json",
     "copyLibAssets": "cp -r ./node_modules/kubeflow/assets/* ./src/assets/",
     "format:check": "prettier --check 'src/**/*.{js,ts,html,scss,css}' || node scripts/check-format-error.js",
     "format:write": "prettier --write 'src/**/*.{js,ts,html,scss,css}'",

frontend/jupyter/src/app/app-routing.module.ts

@@ -1,13 +1,14 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { IndexComponent } from './pages/index/index.component';
 import { FormNewComponent } from './pages/form/form-new/form-new.component';
+import { IndexDefaultComponent } from './pages/index/index-default/index-default.component';
 import { NotebookPageComponent } from './pages/notebook-page/notebook-page.component';
 import { VolumeDetailsPageComponent } from './pages/volume-details-page/volume-details-page.component';
 import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
 
 const routes: Routes = [
+  { path: '', component: IndexDefaultComponent },
   { path: 'new', component: FormNewComponent },
   {
     path: 'notebook/details/:namespace/:notebookName',
@@ -17,7 +18,6 @@ const routes: Routes = [
     path: 'volume/details/:namespace/:pvcName',
     component: VolumeDetailsPageComponent,
   },
-  { path: '', component: IndexComponent },
   { path: '**', component: PageNotFoundComponent },
 ];
 

frontend/jupyter/src/app/app.module.ts

@@ -5,7 +5,6 @@ import { CommonModule } from '@angular/common';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
-import { IndexModule } from './pages/index/index.module';
 import {
   KubeflowModule,
   ResourceTableModule,
@@ -26,6 +25,20 @@ import { ColumnsModule } from './pages/index/columns/columns.module';
 
 import { ErrorStateMatcher } from '@angular/material/core';
 import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
+import {
+  MatSnackBarConfig,
+  MAT_SNACK_BAR_DEFAULT_OPTIONS,
+} from '@angular/material/snack-bar';
+import { IndexDefaultModule } from './pages/index/index-default/index-default.module';
+
+/**
+ * MAT_SNACK_BAR_DEFAULT_OPTIONS values can be found
+ * here
+ * https://github.com/angular/components/blob/main/src/material/snack-bar/snack-bar-config.ts#L25-L58
+ */
+const JwaSnackBarConfig: MatSnackBarConfig = {
+  duration: 3000,
+};
 
 @NgModule({
   declarations: [AppComponent, VolumeFormComponent, PageNotFoundComponent],
@@ -35,7 +48,6 @@ import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.com
     AppRoutingModule,
     CommonModule,
     KubeflowModule,
-    IndexModule,
     NotebookPageModule,
     FormNewModule,
     ResourceTableModule,
@@ -44,10 +56,12 @@ import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.com
     FormModule,
     VolumeDetailsPageModule,
     ColumnsModule,
+    IndexDefaultModule,
   ],
   providers: [
     KubecostService,
     { provide: ErrorStateMatcher, useClass: ImmediateErrorStateMatcher },
+    { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: JwaSnackBarConfig },
   ],
   bootstrap: [AppComponent],
 })

frontend/jupyter/src/app/services/actions.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import {
   ConfirmDialogService,
   DIALOG_RESP,
+  SnackBarConfig,
   SnackBarService,
   SnackType,
   DialogConfig,
@@ -36,7 +37,14 @@ export class ActionsService {
             ref.close(DIALOG_RESP.ACCEPT);
             const object = `${namespace}/${name}`;
             const message = $localize`Delete request was sent.`;
-            this.snackBar.open(`${object}: ${message}`, SnackType.Info, 5000);
+            const config: SnackBarConfig = {
+              data: {
+                msg: `${object}: ${message}`,
+                snackType: SnackType.Info,
+              },
+              duration: 5000,
+            };
+            this.snackBar.open(config);
           },
           error: err => {
             const errorMsg = $localize`Error ${err}`;
@@ -64,11 +72,13 @@ export class ActionsService {
   startNotebook(namespace: string, name: string): Observable<string> {
     return new Observable(subscriber => {
       this.backend.startNotebook(namespace, name).subscribe(response => {
-        this.snackBar.open(
-          $localize`Starting Notebook server '${name}'...`,
-          SnackType.Info,
-          3000,
-        );
+        const config: SnackBarConfig = {
+          data: {
+            msg: $localize`Starting Notebook server '${name}'...`,
+            snackType: SnackType.Info,
+          },
+        };
+        this.snackBar.open(config);
 
         subscriber.next(response);
         subscriber.complete();
@@ -90,11 +100,13 @@ export class ActionsService {
           next: _ => {
             ref.close(DIALOG_RESP.ACCEPT);
 
-            this.snackBar.open(
-              $localize`Stopping Notebook server '${name}'...`,
-              SnackType.Info,
-              3000,
-            );
+            const config: SnackBarConfig = {
+              data: {
+                msg: $localize`Stopping Notebook server '${name}'...`,
+                snackType: SnackType.Info,
+              },
+            };
+            this.snackBar.open(config);
           },
           error: err => {
             const errorMsg = $localize`Error ${err}`;

frontend/jupyter/src/app/shared/utils/volumes/panel.ts

@@ -18,14 +18,6 @@ function getVolumeType(pvc: V1PersistentVolumeClaim): NEW_VOLUME_TYPE {
     return NEW_VOLUME_TYPE.CUSTOM;
   }
 
-  try {
-    if ('rok/origin' in pvc.metadata.annotations) {
-      return NEW_VOLUME_TYPE.ROK_SNAPSHOT;
-    }
-  } catch (error) {
-    return NEW_VOLUME_TYPE.EMPTY;
-  }
-
   return NEW_VOLUME_TYPE.EMPTY;
 }
 

frontend/jupyter/src/app/types/notebook.ts

@@ -81,4 +81,5 @@ export interface NotebookRawObject {
     containerState: V1ContainerState;
     readyReplicas: number;
   };
+  processed_status: Status;
 }

frontend/jupyter/src/app/types/volume/enums.ts

@@ -3,7 +3,6 @@
  */
 export enum NEW_VOLUME_TYPE {
   EMPTY = 'Empty',
-  ROK_SNAPSHOT = 'Rok snapshot',
   CUSTOM = 'Custom',
 }
 

frontend/jupyter/src/environments/environment.prod.ts

@@ -12,8 +12,6 @@ export const environment = {
   groupThreeLogo: 'assets/logos/group-three-logo.svg',
   groupThreeIcon: 'assets/logos/group-three-icon.svg',
 
-  // Rok
-  rokUrl: '',
   //AAW: from upstream volumes crud-web-app
   viewerUrl: '',
 };

frontend/jupyter/src/environments/environment.ts

@@ -16,8 +16,6 @@ export const environment = {
   groupThreeLogo: 'assets/logos/group-three-logo.svg',
   groupThreeIcon: 'assets/logos/group-three-icon.svg',
 
-  // Rok specifics
-  rokUrl: '',
   //AAW: from upstream volumes crud-web-app
   viewerUrl: '//localhost:8081',
 };

frontend/jupyter/src/index.html

@@ -8,7 +8,8 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <script defer src="/dashboard_lib.bundle.js"></script>
   </head>
-  <body>
+
+  <body class="mat-typography">
     <app-root></app-root>
   </body>
 </html>

frontend/jupyter/src/proxy.conf.rok.json

@@ -7,17 +7,5 @@
     "target": "http://localhost:4200",
     "pathRewrite": { "^/static": "" },
     "secure": false
-  },
-  "/rok": {
-    "target": "http://localhost:8000",
-    "secure": false,
-    "pathRewrite": {
-      "^/rok": ""
-    },
-    "headers": {
-      "kubeflow-userid": "user",
-      "x-forwarded-prefix": "/rok/",
-      "x-forwarded-host": "localhost:4200"
-    }
   }
 }

frontend/jupyter/src/styles.scss

@@ -1,6 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
-@import 'node_modules/kubeflow/styles.scss';
-@import 'node_modules/kubeflow/lib/fonts.scss';
+@import 'node_modules/kubeflow/styles/styles.scss';
+@import 'node_modules/kubeflow/styles/fonts.scss';
 
 // Give some space after each input
 mat-form-field {