fix: model tab not always loading

src/app/app.component.ts

@@ -55,6 +55,10 @@ export class AppComponent implements OnInit {
             }
         });
 
+        this.namespaceTracker.activateNamespaceChanged.subscribe((newNamespace) => {
+            this.checkIfModelsAvailable(newNamespace);
+        });
+
         // Keep track of the current url so we know what part of the app we are in and highlight it in the
         // nav bar accordingly.
         this.router.events

src/app/models/models.component.ts

@@ -17,7 +17,7 @@ interface KfservingMessage {
   styleUrls: ['./models.component.scss']
 })
 export class ModelsComponent implements OnInit {
-    static maxCommunicationAttempts = 10;
+    static maxCommunicationAttempts = 20;
     private communicationAttempts = 0;
 
     // baseUrl is the base path to the kfserving service
@@ -75,7 +75,6 @@ export class ModelsComponent implements OnInit {
         });
 
         window.addEventListener('message', (event) => {
-            console.log(event);
             const payload = event.data as KfservingMessage;
             if (!payload) {
                 return;
@@ -131,6 +130,7 @@ export class ModelsComponent implements OnInit {
 
             this.url = this.domSanitizer.bypassSecurityTrustResourceUrl(this.generateKfservingUrl());
 
+
             this.sendingNamespace = setInterval(() => {
                 if (!this.sendingNamespace) {
                     return;
@@ -141,10 +141,12 @@ export class ModelsComponent implements OnInit {
                     return;
                 }
 
-                const contentWindow = this.modelElement.nativeElement.contentWindow as Window;
-                contentWindow.postMessage(this.namespace, '*');
+                if (this.modelElement) {
+                    const contentWindow = this.modelElement.nativeElement.contentWindow as Window;
+                    contentWindow.postMessage(this.namespace, '*');
 
-                this.communicationAttempts++;
+                    this.communicationAttempts++;
+                }
             }, 350);
         });
     }

src/app/namespace-select/namespace-select.component.ts

@@ -16,6 +16,7 @@ export class NamespaceSelectComponent implements OnInit {
         private appRouter: AppRouter,
         private namespaceService: NamespaceTracker,
         private namespaceApiService: NamespaceServiceService,
+        public namespaceTracker: NamespaceTracker,
         private router: Router,
         private snackbar: MatSnackBar) {
     }
@@ -46,6 +47,7 @@ export class NamespaceSelectComponent implements OnInit {
     }
 
     onNamespaceSelected(namespace: string) {
+        this.namespaceTracker.activeNamespace = namespace;
         return this.appRouter.navigateToNamespaceHomepage(namespace);
     }
 }

src/app/namespace/namespace-tracker.service.ts

@@ -5,10 +5,22 @@ import { Namespace, NamespaceServiceService } from '../../api';
 export class NamespaceTracker {
     private gettingNamespaces = false;
 
-    activeNamespace = 'default';
+    // tslint:disable-next-line:variable-name
+    private _activeNamespace = 'default';
+    get activeNamespace(): string {
+        return this._activeNamespace;
+    }
+
+    set activeNamespace(value: string) {
+        this._activeNamespace = value;
+
+        this.activateNamespaceChanged.emit(value);
+    }
+
     namespaces = new Array<Namespace>();
 
     @Output() namespacesChanged = new EventEmitter();
+    @Output() activateNamespaceChanged = new EventEmitter<string>();
 
     constructor(private namespaceService: NamespaceServiceService) {
     }