Merge pull request #6 from StatCan/2-facilitate-local-development

Resolve: Facilitate local development

frontend/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "format": "prettier --write './**/*.{ts,html,css}'",
-    "start": "ng serve --base-href /jupyter/ --deploy-url /jupyter/",
+    "start": "ng serve --base-href /jupyter/ --deploy-url /jupyter/ --proxy-config proxy.config.js",
     "build": "ng build --base-href /jupyter/ --deploy-url /jupyter/",
     "test": "ng test",
     "lint": "ng lint",

frontend/proxy.config.js

@@ -0,0 +1,16 @@
+const PROXY_CONFIG = {
+  '/api/*': {
+    target: 'http://localhost:5000',
+    secure: false,
+    changeOrigin: true,
+    logLevel: 'debug',
+    bypass: function (req) {
+      const uidHeader = process.env.KF_USER_ID;
+      if (uidHeader) {
+        req.headers['kubeflow-userid'] = uidHeader;
+      }
+    },
+  },
+};
+
+module.exports = PROXY_CONFIG;

frontend/src/app/app.module.ts

@@ -4,8 +4,7 @@ import { HttpClientModule } from "@angular/common/http";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 
-import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
-import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeModule, FaIconLibrary } from "@fortawesome/angular-fontawesome";
 import {
   faCogs,
   faHdd,
@@ -94,8 +93,8 @@ import { FormGpusComponent } from "./resource-form/form-gpus/form-gpus.component
   entryComponents: [SnackBarComponent, ConfirmDialogComponent]
 })
 export class AppModule {
-  constructor() {
-    library.add(
+  constructor(library: FaIconLibrary) {
+    library.addIcons(
       faCogs,
       faHdd,
       faBook,

frontend/src/app/main-table/namespace-select/namespace-select.component.html

@@ -1,13 +1,18 @@
 <!-- Namespaces Selector -->
 <mat-form-field>
   <mat-label>Select Namespace</mat-label>
-  <mat-select
+  <input
+    matInput
     [(ngModel)]="currNamespace"
     name="namespacesSelect"
-    (selectionChange)="namespaceChanged($event.value)"
-  >
-    <mat-option *ngFor="let namespace of namespaces" [value]="namespace">
-      {{ namespace }}
-    </mat-option>
-  </mat-select>
+    (keyup.enter)="namespaceChanged(currNamespace)"
+  />
 </mat-form-field>
+<button
+  mat-button
+  color="accent"
+  class="margin"
+  (click)="namespaceChanged(currNamespace)"
+>
+  Update
+</button>

frontend/src/app/main-table/namespace-select/namespace-select.component.ts

@@ -1,8 +1,5 @@
 import { Component, OnInit, OnDestroy } from "@angular/core";
-import { first } from "rxjs/operators";
 import { NamespaceService } from "src/app/services/namespace.service";
-import { KubernetesService } from "src/app/services/kubernetes.service";
-import { ExponentialBackoff } from "src/app/utils/polling";
 import { Subscription } from "rxjs";
 
 @Component({
@@ -11,51 +8,26 @@ import { Subscription } from "rxjs";
   styleUrls: ["./namespace-select.component.scss"]
 })
 export class NamespaceSelectComponent implements OnInit, OnDestroy {
-  namespaces = [];
   currNamespace: string;
-  private poller: ExponentialBackoff;
-  private subscriptions = new Subscription();
 
-  constructor(
-    private namespaceService: NamespaceService,
-    private k8s: KubernetesService
-  ) {
-    this.poller = new ExponentialBackoff();
-  }
-
-  ngOnInit() {
-    // Keep track of the selected namespace
-    this.namespaceService.getSelectedNamespace().subscribe(namespace => {
-      this.currNamespace = namespace;
-    });
-
-    // Poll untill you get existing Namespaces
-    const nsSub = this.poller.start().subscribe(() => {
-      this.k8s.getNamespaces().subscribe(namespaces => {
-        this.namespaces = namespaces;
-
-        if (
-          this.currNamespace === undefined ||
-          this.currNamespace.length === 0
-        ) {
-          return;
-        }
-
-        // stop polling
-        this.namespaceService.updateSelectedNamespace(this.currNamespace);
-        this.poller.stop();
-        this.subscriptions.unsubscribe();
-      });
-    });
+  private currNamespaceSub: Subscription;
 
-    this.subscriptions.add(nsSub);
-  }
+  constructor(private namespaceService: NamespaceService) { }
 
-  ngOnDestroy() {
-    this.subscriptions.unsubscribe();
+  ngOnInit() {
+    this.currNamespaceSub = this.namespaceService
+      .getSelectedNamespace()
+      .subscribe(namespace => this.currNamespace = namespace);
   }
 
   namespaceChanged(namespace: string) {
+    if ("string" !== typeof namespace) {
+      return;
+    }
     this.namespaceService.updateSelectedNamespace(namespace);
   }
+
+  ngOnDestroy() {
+    this.currNamespaceSub.unsubscribe();
+  }
 }

frontend/src/app/main-table/resource-table/resource-table.component.ts

@@ -52,7 +52,7 @@ export class ResourceTableComponent implements OnInit {
     this.dataSource.sort = this.sort;
 
     // Create the exponential backoff poller
-    this.poller = new ExponentialBackoff({ interval: 1000, retries: 3 });
+    this.poller = new ExponentialBackoff({ interval: 2000, retries: 3 });
     const resourcesSub = this.poller.start().subscribe(() => {
       // NOTE: We are using both the 'trackBy' feature in the Table for performance
       // and also detecting with lodash if the new data is different from the old

frontend/src/app/services/namespace.service.ts

@@ -30,8 +30,6 @@ export class NamespaceService {
             cdeh.onNamespaceSelected = this.updateSelectedNamespace.bind(this);
           }
         );
-      } else {
-        this.updateSelectedNamespace("kubeflow");
       }
     });
   }

frontend/src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: "http://localhost:5000",
+  apiUrl: "",
   resource: "notebooks",
   ui: "default",
   rokUrl: ""

go.mod

@@ -3,28 +3,34 @@ module github.com/StatCan/jupyter-apis
 go 1.14
 
 require (
+	github.com/Azure/go-autorest/autorest v0.11.4 // indirect
+	github.com/Azure/go-autorest/autorest/adal v0.9.2 // indirect
 	github.com/StatCan/kubeflow-controller v0.0.0-20200811133651-33215007413e
 	github.com/andanhm/go-prettytime v1.0.0
 	github.com/golang/groupcache v0.0.0-20190129154638-5b532d6fd5ef // indirect
 	github.com/golang/protobuf v1.4.2 // indirect
+	github.com/google/gofuzz v1.2.0 // indirect
 	github.com/gorilla/handlers v1.4.2
 	github.com/gorilla/mux v1.7.4
 	github.com/hashicorp/golang-lru v0.5.4 // indirect
 	github.com/imdario/mergo v0.3.10 // indirect
 	github.com/json-iterator/go v1.1.10 // indirect
 	github.com/kr/pretty v0.2.0 // indirect
-	golang.org/x/crypto v0.0.0-20200709230013-948cd5f35899 // indirect
-	golang.org/x/net v0.0.0-20200707034311-ab3426394381 // indirect
+	golang.org/x/crypto v0.0.0-20200728195943-123391ffb6de // indirect
+	golang.org/x/net v0.0.0-20200813134508-3edf25e44fcc // indirect
 	golang.org/x/oauth2 v0.0.0-20200107190931-bf48bf16ab8d // indirect
+	golang.org/x/sys v0.0.0-20200817155316-9781c653f443 // indirect
 	golang.org/x/text v0.3.3 // indirect
 	golang.org/x/time v0.0.0-20200630173020-3af7569d3a1e // indirect
+	google.golang.org/appengine v1.6.6 // indirect
+	google.golang.org/protobuf v1.25.0 // indirect
 	gopkg.in/check.v1 v1.0.0-20190902080502-41f04d3bba15 // indirect
 	gopkg.in/inf.v0 v0.9.1
 	gopkg.in/yaml.v2 v2.3.0
 	k8s.io/api v0.18.6
-	k8s.io/apimachinery v0.18.6
+	k8s.io/apimachinery v0.18.8
 	k8s.io/client-go v11.0.1-0.20190409021438-1a26190bd76a+incompatible
-	k8s.io/utils v0.0.0-20200603063816-c1c6865ac451 // indirect
+	k8s.io/utils v0.0.0-20200815180417-3bc9d57fc792 // indirect
 )
 
 replace k8s.io/client-go => k8s.io/client-go v0.18.6