Reload logs and shell on container change (#3986)

* Reload logs and shell on container change

* Fix shell

* Update shell path params on container change

src/app/frontend/chrome/routing.ts

@@ -132,13 +132,32 @@ const routes: Routes = [
       },
 
       // Others
-      {path: 'settings', loadChildren: 'settings/module#SettingsModule'},
-      {path: 'about', loadChildren: 'about/module#AboutModule'},
+      {
+        path: 'settings',
+        loadChildren: 'settings/module#SettingsModule',
+      },
+      {
+        path: 'about',
+        loadChildren: 'about/module#AboutModule',
+      },
 
-      {path: 'create', loadChildren: 'create/module#CreateModule'},
-      {path: 'log', loadChildren: 'logs/module#LogsModule'},
-      {path: 'shell', loadChildren: 'shell/module#ShellModule'},
-      {path: 'search', loadChildren: 'search/module#SearchModule'},
+      {
+        path: 'create',
+        loadChildren: 'create/module#CreateModule',
+      },
+      {
+        path: 'log',
+        loadChildren: 'logs/module#LogsModule',
+      },
+      {
+        path: 'shell',
+        loadChildren: 'shell/module#ShellModule',
+      },
+      {
+        path: 'search',
+        loadChildren: 'search/module#SearchModule',
+        runGuardsAndResolvers: 'always',
+      },
     ],
   },
 ];

src/app/frontend/index.module.ts

@@ -20,7 +20,6 @@ import {RouterModule} from '@angular/router';
 import {ChromeModule} from './chrome/module';
 import {CoreModule} from './core.module';
 import {GlobalErrorHandler} from './error/handler';
-import {ErrorModule} from './error/module';
 import {RootComponent} from './index.component';
 import {routes} from './index.routing';
 import {LoginModule} from './login/module';
@@ -33,7 +32,10 @@ import {LoginModule} from './login/module';
     CoreModule,
     ChromeModule,
     LoginModule,
-    RouterModule.forRoot(routes, {useHash: true}),
+    RouterModule.forRoot(routes, {
+      useHash: true,
+      onSameUrlNavigation: 'reload',
+    }),
   ],
   providers: [{provide: ErrorHandler, useClass: GlobalErrorHandler}],
   declarations: [RootComponent],

src/app/frontend/index.routing.ts

@@ -13,7 +13,6 @@
 // limitations under the License.
 
 import {Routes} from '@angular/router';
-import {AuthGuard} from './common/services/guard/auth';
 import {LoginGuard} from './common/services/guard/login';
 import {LoginComponent} from './login/component';
 

src/app/frontend/logs/component.ts

@@ -15,7 +15,7 @@
 import {HttpParams} from '@angular/common/http';
 import {Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
 import {MatDialog} from '@angular/material';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {LogDetails, LogLine, LogSelection, LogSources} from '@api/backendapi';
 import {GlobalSettingsService} from 'common/services/global/globalsettings';
 import {LogService} from 'common/services/global/logs';
@@ -23,6 +23,8 @@ import {NotificationSeverity, NotificationsService,} from 'common/services/globa
 import {Observable, Subscription} from 'rxjs';
 
 import {LogsDownloadDialog} from '../common/dialogs/download/dialog';
+import {NAMESPACE_STATE_PARAM} from '../common/params/params';
+import {CONFIG} from '../index.config';
 
 const logsPerView = 100;
 const maxLogSize = 2e9;
@@ -68,7 +70,7 @@ export class LogsComponent implements OnDestroy {
   constructor(
       logService: LogService, private readonly activatedRoute_: ActivatedRoute,
       private readonly settingsService_: GlobalSettingsService, private readonly dialog_: MatDialog,
-      private readonly notifications_: NotificationsService) {
+      private readonly notifications_: NotificationsService, private readonly _router: Router) {
     this.logService = logService;
     this.refreshInterval = this.settingsService_.getAutoRefreshTimeInterval() * 1000;
     this.isLoading = true;
@@ -76,7 +78,7 @@ export class LogsComponent implements OnDestroy {
     const namespace = this.activatedRoute_.snapshot.params.resourceNamespace;
     const resourceType = this.activatedRoute_.snapshot.params.resourceType;
     const resourceName = this.activatedRoute_.snapshot.params.resourceName;
-    const containerName = this.activatedRoute_.snapshot.params.container;
+    const containerName = this.activatedRoute_.snapshot.queryParams.container;
 
     this.sourceSubscription =
         logService.getResource(`source/${namespace}/${resourceName}/${resourceType}`)
@@ -98,6 +100,11 @@ export class LogsComponent implements OnDestroy {
   }
 
   ngOnDestroy(): void {
+    this._router.navigate([], {
+      queryParams: {['container']: null},
+      queryParamsHandling: 'merge',
+    });
+
     if (this.intervalSubscription) {
       this.intervalSubscription.unsubscribe();
     }
@@ -143,7 +150,10 @@ export class LogsComponent implements OnDestroy {
   }
 
   appendContainerParam() {
-    // this.state_.go('.', {container: this.container}, {notify: false, location: 'replace'});
+    this._router.navigate([], {
+      queryParams: {['container']: this.container},
+      queryParamsHandling: 'merge',
+    });
   }
 
   onContainerChange() {

src/app/frontend/shell/component.ts

@@ -12,9 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild,} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnDestroy, ViewChild,} from '@angular/core';
 import {MatSnackBar} from '@angular/material';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {PodContainerList, ShellFrame, SJSCloseEvent, SJSMessageEvent, TerminalResponse,} from '@api/backendapi';
 import {debounce} from 'lodash';
 import {ReplaySubject, Subject, Subscription} from 'rxjs';
@@ -32,7 +32,7 @@ declare let SockJS: any;
   templateUrl: './template.html',
   styleUrls: ['./styles.scss'],
 })
-export class ShellComponent implements OnInit, AfterViewInit, OnDestroy {
+export class ShellComponent implements AfterViewInit, OnDestroy {
   @ViewChild('anchor', {static: true}) anchorRef: ElementRef;
   term: Terminal;
   podName: string;
@@ -45,23 +45,17 @@ export class ShellComponent implements OnInit, AfterViewInit, OnDestroy {
   private conn_: WebSocket;
   private connected_ = false;
   private debouncedFit_: Function;
+  private connSubject_ = new ReplaySubject<ShellFrame>(100);
+  private incommingMessage$_ = new Subject<ShellFrame>();
   private readonly endpoint_ = EndpointManager.resource(Resource.pod, true);
   private readonly subscriptions_: Subscription[] = [];
   private readonly keyEvent$_ = new ReplaySubject<KeyboardEvent>(2);
-  private readonly connSubject_ = new ReplaySubject<ShellFrame>(100);
-  private readonly incommingMessage$_ = new Subject<ShellFrame>();
 
   constructor(
       private readonly containers_: NamespacedResourceService<PodContainerList>,
       private readonly terminal_: NamespacedResourceService<TerminalResponse>,
       private readonly activatedRoute_: ActivatedRoute, private readonly matSnackBar_: MatSnackBar,
-      private readonly cdr_: ChangeDetectorRef) {}
-
-  onPodContainerChange(podContainer: string): void {
-    this.selectedContainer = podContainer;
-  }
-
-  ngOnInit(): void {
+      private readonly cdr_: ChangeDetectorRef, private readonly _router: Router) {
     this.namespace_ = this.activatedRoute_.snapshot.params.resourceNamespace;
     this.podName = this.activatedRoute_.snapshot.params.resourceName;
     this.selectedContainer = this.activatedRoute_.snapshot.params.containerName;
@@ -80,6 +74,57 @@ export class ShellComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit(): void {
+    this.initTerm();
+  }
+
+  ngOnDestroy(): void {
+    if (this.conn_) {
+      this.conn_.close();
+    }
+
+    if (this.connSubject_) {
+      this.connSubject_.complete();
+    }
+
+    for (const sub of this.subscriptions_) {
+      sub.unsubscribe();
+    }
+
+    if (this.term) {
+      this.term.dispose();
+    }
+
+    this.incommingMessage$_.complete();
+  }
+
+  onPodContainerChange(podContainer: string): void {
+    if (this.conn_) {
+      this.conn_.close();
+    }
+
+    if (this.connSubject_) {
+      this.connSubject_.complete();
+      this.connSubject_ = new ReplaySubject<ShellFrame>(100);
+    }
+
+    if (this.term) {
+      this.term.dispose();
+    }
+
+    this.incommingMessage$_.complete();
+    this.incommingMessage$_ = new Subject<ShellFrame>();
+
+    this.selectedContainer = podContainer;
+
+    this._router.navigate([`/shell/${this.namespace_}/${this.podName}/${this.selectedContainer}`], {
+      queryParamsHandling: 'preserve',
+    });
+
+    this.setupConnection();
+    this.initTerm();
+  }
+
+  initTerm(): void {
     this.term = new Terminal({
       fontSize: 14,
       fontFamily: 'Consolas, "Courier New", monospace',
@@ -108,28 +153,6 @@ export class ShellComponent implements OnInit, AfterViewInit, OnDestroy {
     this.cdr_.markForCheck();
   }
 
-  ngOnDestroy(): void {
-    if (this.conn_ && this.connected_) {
-      this.conn_.close();
-    }
-
-    if (this.connSubject_) {
-      this.connSubject_.complete();
-    }
-
-    if (this.subscriptions_.length > 0) {
-      for (const sub of this.subscriptions_) {
-        sub.unsubscribe();
-      }
-    }
-
-    if (this.term) {
-      this.term.dispose();
-    }
-
-    this.incommingMessage$_.complete();
-  }
-
   private async setupConnection(): Promise<void> {
     if (!(this.selectedContainer && this.podName && this.namespace_ && !this.connecting_)) {
       return;