KF1.9 notebook page update

frontend/jupyter/src/app/pages/notebook-page/notebook-mock.ts

@@ -3,6 +3,7 @@ import {
   V1ObjectMeta,
   V1PodSpec,
 } from '@kubernetes/client-node';
+import { STATUS_TYPE } from 'kubeflow';
 import { Condition } from 'src/app/types/condition';
 import { NotebookRawObject } from 'src/app/types/notebook';
 
@@ -92,10 +93,17 @@ const statusObject = {
   readyReplicas: 1,
 };
 
+const statusProcessedObject = {
+  phase: STATUS_TYPE.READY,
+  state: '',
+  message: 'Running',
+};
+
 export const mockNotebook: NotebookRawObject = {
   apiVersion: 'kubeflow.org/v1beta1',
   kind: 'Notebook',
   metadata: metadataObject,
   spec: specObject,
   status: statusObject,
+  processed_status: statusProcessedObject,
 };

frontend/jupyter/src/app/pages/notebook-page/notebook-page.component.html

@@ -15,10 +15,13 @@
       <div class="details-page-inner">
         <div class="details-page-inner-2">
           <lib-status-icon
-            [stateChanging]="notebookStateChanging"
-            [status]="status"
+            class="small-padding-right"
+            [phase]="status.phase"
           ></lib-status-icon>
-          <div class="title notebook-name">{{ notebookName }}</div>
+          <div class="mat-title notebook-name">{{ notebookName }}</div>
+        </div>
+        <div class="small-padding-up">
+          <lib-status-info [status]="status"></lib-status-info>
         </div>
       </div>
       <mat-tab-group

frontend/jupyter/src/app/pages/notebook-page/notebook-page.component.scss

@@ -0,0 +1,7 @@
+.small-padding-right {
+  padding-right: 8px;
+}
+
+.small-padding-up {
+  margin-top: 5px;
+}

frontend/jupyter/src/app/pages/notebook-page/notebook-page.component.spec.ts

@@ -148,27 +148,32 @@ describe('NotebookPageComponent', () => {
 
   it('updateButtons should disable buttons according to notebook status', () => {
     fixture.detectChanges();
-    component.notebook.status.readyReplicas = 1;
-    component.notebook.metadata.annotations['kubeflow-resource-stopped'] =
-      'date now';
-    expect(component.status).toEqual(STATUS_TYPE.TERMINATING);
+    component.notebook.processed_status = {
+      phase: STATUS_TYPE.TERMINATING,
+      state: '',
+      message: 'Terminating',
+    };
+
+    // check the initial state of the buttons
     for (const button of component.buttonsConfig) {
       expect(button.disabled).toBeFalse();
     }
 
     const updateButtons = 'updateButtons';
     component[updateButtons]();
+    // check the buttons state after updateButton() is called
     for (const button of component.buttonsConfig) {
       expect(button.disabled).toBeTrue();
     }
   });
 
   it('updateButtons should update Start/Stop button according to notebook status ', () => {
     fixture.detectChanges();
-    component.notebook.status.readyReplicas = 0;
-    component.notebook.metadata.annotations['kubeflow-resource-stopped'] =
-      Date.now.toString();
-    expect(component.status).toEqual(STATUS_TYPE.STOPPED);
+    component.notebook.processed_status = {
+      phase: STATUS_TYPE.STOPPED,
+      state: '',
+      message: 'No Pods are currently running for this Notebook Server.',
+    };
 
     let flag = component.buttonsConfig
       .map(button => button.text)

frontend/jupyter/src/app/pages/notebook-page/notebook-page.component.ts

@@ -4,6 +4,7 @@ import {
   STATUS_TYPE,
   ToolbarButton,
   PollerService,
+  Status,
 } from 'kubeflow';
 import { JWABackendService } from 'src/app/services/backend.service';
 import { Subscription } from 'rxjs';
@@ -24,7 +25,6 @@ export class NotebookPageComponent implements OnInit, OnDestroy {
   public notebook: NotebookRawObject;
   public notebookPod: V1Pod;
   public notebookInfoLoaded = false;
-  public notebookStateChanging = false;
   public podRequestCompleted = false;
   public podRequestError = '';
   public selectedTab = { index: 0, name: 'overview' };
@@ -139,69 +139,8 @@ export class NotebookPageComponent implements OnInit, OnDestroy {
     this.router.navigate(['/']);
   }
 
-  get status(): STATUS_TYPE {
-    const [status, state] = this.getStatusAndState(this.notebook);
-    this.notebookStateChanging = state;
-    return status;
-  }
-
-  getStatusAndState(
-    notebook: NotebookRawObject,
-  ): [status: STATUS_TYPE, state: boolean] {
-    if (!notebook) {
-      console.warn('warning');
-      return [STATUS_TYPE.WARNING, null];
-    }
-    // Although containerState has a field called terminated,
-    // field Waiting is set even when the Notebook is stopped.
-    // and we need to check in the .annotations too
-
-    // Check if the Notebook is terminating right now
-    if (
-      'kubeflow-resource-stopped' in notebook.metadata.annotations &&
-      notebook.status.readyReplicas > 0
-    ) {
-      this.notebookStateChanging = true;
-      return [STATUS_TYPE.TERMINATING, true];
-    }
-
-    // Check if the Notebook is stopped
-    if ('kubeflow-resource-stopped' in notebook.metadata.annotations) {
-      this.notebookStateChanging = false;
-      return [STATUS_TYPE.STOPPED, false];
-    }
-
-    // Check if the Notebook is running
-    if (notebook.status?.containerState?.running) {
-      this.notebookStateChanging = false;
-      return [STATUS_TYPE.READY, false];
-    }
-
-    if (notebook.status?.containerState?.waiting) {
-      this.notebookStateChanging = true;
-      return [STATUS_TYPE.WAITING, true];
-    }
-
-    return [STATUS_TYPE.UNINITIALIZED, true];
-  }
-
-  get statusIcon(): string {
-    return this.getStatusIcon(this.status);
-  }
-
-  getStatusIcon(status: STATUS_TYPE): string {
-    if (status === STATUS_TYPE.WARNING) {
-      return 'warning';
-    }
-    if (status === STATUS_TYPE.WAITING || status === STATUS_TYPE.TERMINATING) {
-      return 'timelapse';
-    } else if (status === STATUS_TYPE.READY) {
-      return 'check_circle';
-    } else if (status === STATUS_TYPE.STOPPED) {
-      return 'stop_circle';
-    } else {
-      return STATUS_TYPE.UNINITIALIZED;
-    }
+  get status(): Status {
+    return this.notebook.processed_status;
   }
 
   private updateButtons() {
@@ -210,14 +149,14 @@ export class NotebookPageComponent implements OnInit, OnDestroy {
       new ToolbarButton({
         text: $localize`CONNECT`,
         icon: 'developer_board',
-        disabled: this.status === STATUS_TYPE.READY ? false : true,
+        disabled: this.status.phase === STATUS_TYPE.READY ? false : true,
         tooltip: $localize`Connect to this notebook`,
         fn: () => {
           this.connectToNotebook();
         },
       }),
     );
-    if (this.status === 'stopped') {
+    if (this.status.phase === 'stopped') {
       buttons.push(
         new ToolbarButton({
           text: $localize`START`,
@@ -233,7 +172,8 @@ export class NotebookPageComponent implements OnInit, OnDestroy {
         new ToolbarButton({
           text: $localize`STOP`,
           icon: 'stop',
-          disabled: this.status === STATUS_TYPE.TERMINATING ? true : false,
+          disabled:
+            this.status.phase === STATUS_TYPE.TERMINATING ? true : false,
           tooltip: $localize`Stop this notebook`,
           fn: () => {
             this.stopNotebook();
@@ -245,7 +185,7 @@ export class NotebookPageComponent implements OnInit, OnDestroy {
       new ToolbarButton({
         text: $localize`DELETE`,
         icon: 'delete',
-        disabled: this.status === STATUS_TYPE.TERMINATING ? true : false,
+        disabled: this.status.phase === STATUS_TYPE.TERMINATING ? true : false,
         tooltip: $localize`Delete this notebook`,
         fn: () => {
           this.deleteNotebook();

frontend/jupyter/src/app/pages/notebook-page/overview/overview.component.html

@@ -11,6 +11,10 @@
   {{ sharedMemory }}
 </lib-details-list-item>
 
+<lib-details-list-item *ngIf="notebookCreator" key="Notebook creator">
+  {{ notebookCreator }}
+</lib-details-list-item>
+
 <lib-content-list-item class="configurations" key="Configurations" i18n-key>
   <app-configurations [configurations]="configurations">
     {{ podDefaultsMessage }}

frontend/jupyter/src/app/pages/notebook-page/overview/overview.component.ts

@@ -151,6 +151,17 @@ export class OverviewComponent implements OnDestroy {
     }
   }
 
+  get notebookCreator(): string {
+    return this.getNotebookCreator(this.notebook);
+  }
+
+  getNotebookCreator(notebook: NotebookRawObject): string {
+    if (!notebook?.metadata?.annotations) {
+      return null;
+    }
+    return notebook.metadata.annotations['notebooks.kubeflow.org/creator'];
+  }
+
   get cpuRequests(): string {
     return this.getCpuRequest(this.notebook);
   }