SUBMARINE-710. Frontend support for tensorboard

submarine-workbench/workbench-web/src/app/interfaces/tensorboard-info.ts

@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export interface TensorboardInfo {
+  available: boolean;
+  url: string;
+}

submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.html

@@ -24,11 +24,18 @@
       <label nz-radio-button nzValue="Own">Owned By Me</label>
       <label nz-radio-button nzValue="Access">Accessible By Me</label>
     </nz-radio-group>
-    <nz-input-group
-      nzSearch
-      style="width: 300px; margin-top: 15px; margin-left: 10px; margin-right: 5px"
-      [nzAddOnAfter]="suffixIconButton"
+    <a
+      nz-button
+      nzType="primary"
+      style="margin: 0px 4px 0px 4px"
+      [nzLoading]="isTensorboardLoading"
+      [href]="tensorboardUrl"
     >
+      <i nz-icon nzType="area-chart"></i>
+      TensorBoard
+    </a>
+    <br />
+    <nz-input-group nzSearch style="width: 300px; margin: 10px 4px 10px 4px" [nzAddOnAfter]="suffixIconButton">
       <input type="text" nz-input placeholder="input search text" />
     </nz-input-group>
     <ng-template #suffixIconButton>
@@ -39,29 +46,31 @@
       nz-button
       id="openExperiment"
       nzType="primary"
-      style="margin-right: 5px; margin-bottom: 15px; margin-top: 15px"
+      style="margin: 10px 4px 10px 4px"
       (click)="form.initModal('create')"
     >
       <i nz-icon nzType="plus"></i>
       New Experiment
     </button>
+
     <button
       nz-button
       nzType="primary"
-      style="margin-bottom: 15px; margin-top: 15px"
+      style="margin: 10px 4px 10px 4px"
       nz-popconfirm
       nzTitle="Confirm to delete?"
       nzCancelText="Cancel"
       nzOkText="Ok"
       (nzOnConfirm)="deleteExperiments()"
     >
+      <i nz-icon nzType="delete"></i>
       Delete
     </button>
   </div>
   <submarine-experiment-list
     [experimentList]="experimentList"
     [checkedList]="checkedList"
-    [isLoading]="isLoading"
+    [isLoading]="isListLoading"
     (deleteExperiment)="onDeleteExperiment($event, true)"
     (initModal)="onInitModal($event)"
     [(selectAllChecked)]="selectAllChecked"

submarine-workbench/workbench-web/src/app/pages/workbench/experiment/experiment-home/experiment-home.component.ts

@@ -22,6 +22,8 @@ import { ExperimentInfo } from '@submarine/interfaces/experiment-info';
 import { ExperimentFormService } from '@submarine/services/experiment.form.service';
 import { ExperimentService } from '@submarine/services/experiment.service';
 import { NzMessageService } from 'ng-zorro-antd';
+import { interval } from 'rxjs';
+import { filter, mergeMap, take, tap, timeout } from 'rxjs/operators';
 import { ExperimentFormComponent } from './experiment-form/experiment-form.component';
 
 @Component({
@@ -37,10 +39,14 @@ export class ExperimentHomeComponent implements OnInit {
     the modification will be sync to parent.
   */
   experimentList: ExperimentInfo[];
-  isLoading: boolean = true;
+  isListLoading: boolean = true;
   checkedList: boolean[];
   selectAllChecked: boolean = false;
 
+  // tensorboard
+  isTensorboardLoading: boolean = true;
+  tensorboardUrl: string = '';
+
   @ViewChild('form', { static: true }) form: ExperimentFormComponent;
 
   constructor(
@@ -55,12 +61,13 @@ export class ExperimentHomeComponent implements OnInit {
     });
 
     this.experimentService.emitInfo(null);
+    this.getTensorboardInfo(1000, 50000);
   }
 
   fetchExperimentList() {
     this.experimentService.fetchExperimentList().subscribe(
       (list) => {
-        this.isLoading = false;
+        this.isListLoading = false;
         this.experimentList = list;
         const currentTime = new Date();
         this.experimentList.forEach((item) => {
@@ -114,4 +121,28 @@ export class ExperimentHomeComponent implements OnInit {
   onInitModal(obj) {
     this.form.initModal(obj.initMode, obj.initFormType, obj.id, obj.spec);
   }
+
+  getTensorboardInfo(period: number, due: number) {
+    /*
+      It will keep polling every ${period} msec, and stop polling whenever
+        1. The tensorboard status turns from unavailble to available
+        2. It takes over ${due} msec
+    */
+
+    interval(period)
+      .pipe(
+        mergeMap(() => this.experimentService.getTensorboardInfo()), // map interval observable to tensorboardInfo observable
+        tap((x) => console.log(x)), // monitoring the process
+        filter((res) => res.available), // only emit the success ones
+        take(1), // if succeed, stop emitting new value from source observable
+        timeout(due) // if timeout, it will throw an error
+      )
+      .subscribe(
+        (res) => {
+          this.isTensorboardLoading = !res.available;
+          this.tensorboardUrl = res.url;
+        },
+        (err) => console.log(err)
+      );
+  }
 }

submarine-workbench/workbench-web/src/app/services/experiment.service.ts

@@ -24,6 +24,7 @@ import { ExperimentInfo } from '@submarine/interfaces/experiment-info';
 import { ExperimentSpec } from '@submarine/interfaces/experiment-spec';
 import { ExperimentTemplate } from '@submarine/interfaces/experiment-template';
 import { ExperimentTemplateSubmit } from '@submarine/interfaces/experiment-template-submit';
+import { TensorboardInfo } from '@submarine/interfaces/tensorboard-info';
 import { BaseApiService } from '@submarine/services/base-api.service';
 import { of, throwError, Observable, Subject } from 'rxjs';
 import { catchError, map, switchMap } from 'rxjs/operators';
@@ -211,6 +212,19 @@ export class ExperimentService {
     );
   }
 
+  getTensorboardInfo(): Observable<TensorboardInfo> {
+    const apiUrl = this.baseApi.getRestApi('/v1/experiment/tensorboard');
+    return this.httpClient.get<Rest<TensorboardInfo>>(apiUrl).pipe(
+      switchMap((res) => {
+        if (res.success) {
+          return of(res.result);
+        } else {
+          throw this.baseApi.createRequestError(res.message, res.code, apiUrl, 'get');
+        }
+      })
+    );
+  }
+
   durationHandle(secs: number) {
     const hr = Math.floor(secs / 3600);
     const min = Math.floor((secs - hr * 3600) / 60);