feat: added Tabs support

Author: Leonardo Chaia

package.json

@@ -57,7 +57,6 @@
     "@angular/material": "^6.4.1",
     "@angular/platform-browser": "6.1.0",
     "@angular/platform-browser-dynamic": "6.1.0",
-    "@angular/router": "6.1.0",
     "@angularclass/hmr": "^2.1.3",
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.1",

src/app/app-routing-module.ts

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<tim-navigation-container></tim-navigation-container>

src/app/app.component.html

@@ -2,13 +2,24 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app-routing-module';
+import { NavigationModule } from './navigation/navigation.module';
+import { HomeModule } from './home/home.module';
+import { DaemonToolsModule } from './daemon-tools/daemon-tools.module';
+import { RegistryModule } from './registry/registry.module';
+import { SettingsModule } from './settings/settings.module';
+import { ApplicationTemplatesModule } from './application-templates/application-templates.module';
 
 @NgModule({
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    AppRoutingModule,
+
+    HomeModule,
+    DaemonToolsModule,
+    RegistryModule,
+    SettingsModule,
+    NavigationModule,
+    ApplicationTemplatesModule,
   ],
   declarations: [
     AppComponent,

src/app/app.module.ts

@@ -1,36 +1,15 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { ApplicationService } from '../application.service';
+import { Component, Inject } from '@angular/core';
 import { Application } from '../application.model';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { TAB_DATA } from '../../navigation/tab.model';
 
 @Component({
   selector: 'tim-application-launch-container',
   templateUrl: './application-launch-container.component.html',
   styleUrls: ['./application-launch-container.component.scss']
 })
-export class ApplicationLaunchContainerComponent implements OnInit, OnDestroy {
-  public application: Application;
+export class ApplicationLaunchContainerComponent {
+  constructor(
+    @Inject(TAB_DATA)
+    public application: Application) { }
 
-  private componetDestroyed = new Subject();
-
-  constructor(private route: ActivatedRoute,
-    private applicationService: ApplicationService) { }
-
-  public ngOnInit() {
-    this.route.paramMap.subscribe(params => {
-      const appId = params.get('appId');
-      this.applicationService.getApplication(appId)
-        .pipe(takeUntil(this.componetDestroyed))
-        .subscribe(app => {
-          this.application = app;
-        });
-    });
-  }
-
-  public ngOnDestroy() {
-    this.componetDestroyed.next();
-    this.componetDestroyed.unsubscribe();
-  }
 }

src/app/application-templates/application-launch-container/application-launch-container.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Application } from '../application.model';
-import { Router } from '@angular/router';
+import { TimoneerTabsService } from '../../navigation/timoneer-tabs.service';
 
 @Component({
   selector: 'tim-application-launch',
@@ -12,12 +12,12 @@ export class ApplicationLaunchComponent implements OnInit {
   @Input()
   public application: Application;
 
-  constructor(private router: Router) { }
+  constructor(private tabService: TimoneerTabsService) { }
 
   public ngOnInit() {
   }
 
   public containerCreated(id: string) {
-    this.router.navigate(['/docker/containers/', id, 'attach']);
+    this.tabService.attach(id, true);
   }
 }

src/app/application-templates/application-launch/application-launch.component.ts

@@ -9,7 +9,7 @@ export class ApplicationListContainerComponent implements OnInit {
 
   constructor() { }
 
-  ngOnInit() {
+  public ngOnInit() {
   }
 
 }

src/app/application-templates/application-list-container/application-list-container.component.ts

@@ -18,7 +18,7 @@ <h2>
   <a fxFlex
      mat-raised-button
      color="primary"
-     [routerLink]="['/applications/', app.id, 'launch']">
+     (click)="openAppTab(app)">
     Launch
   </a>
 </mat-card>

src/app/application-templates/application-list/application-list.component.html

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { ApplicationService } from '../application.service';
+import { Application } from '../application.model';
+import { TabService } from '../../navigation/tab.service';
+import { ApplicationLaunchContainerComponent } from '../application-launch-container/application-launch-container.component';
 
 @Component({
   selector: 'tim-application-list',
@@ -8,7 +11,8 @@ import { ApplicationService } from '../application.service';
 })
 export class ApplicationListComponent implements OnInit {
 
-  constructor(private applicationService: ApplicationService) { }
+  constructor(private applicationService: ApplicationService,
+    private tabService: TabService) { }
 
   public get applications$() {
     return this.applicationService.getApplications();
@@ -17,4 +21,12 @@ export class ApplicationListComponent implements OnInit {
   public ngOnInit() {
   }
 
+  public openAppTab(app: Application) {
+    this.tabService.addTab({
+      title: `Launch ${app.title}`,
+      component: ApplicationLaunchContainerComponent,
+      params: app
+    });
+  }
+
 }

src/app/application-templates/application-list/application-list.component.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { ApplicationListComponent } from './application-list/application-list.component';
 import { MatIconModule, MatCardModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatDividerModule } from '@angular/material';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { RouterModule } from '@angular/router';
 import { ApplicationListContainerComponent } from './application-list-container/application-list-container.component';
 import { ApplicationLaunchContainerComponent } from './application-launch-container/application-launch-container.component';
 import { ApplicationLaunchComponent } from './application-launch/application-launch.component';
@@ -14,7 +13,6 @@ import { DaemonToolsModule } from '../daemon-tools/daemon-tools.module';
 @NgModule({
   imports: [
     CommonModule,
-    RouterModule,
     FormsModule,
     ReactiveFormsModule,
     MatInputModule,
@@ -38,6 +36,10 @@ import { DaemonToolsModule } from '../daemon-tools/daemon-tools.module';
   exports: [
     ApplicationListComponent,
     ApplicationListContainerComponent,
+  ],
+  entryComponents: [
+    ApplicationListContainerComponent,
+    ApplicationLaunchContainerComponent,
   ]
 })
 export class ApplicationTemplatesModule { }

src/app/application-templates/application-templates.module.ts

@@ -10,17 +10,15 @@ <h1>
 </p>
 <mat-nav-list>
 
-  <a [routerLink]="['/docker/containers/', container.Id, 'attach']"
-     mat-list-item
-     (click)="dismiss()">
+  <a mat-list-item
+     (click)="attach()">
     <mat-icon mat-list-icon>folder</mat-icon>
     <h4 mat-line>Attach</h4>
     <p mat-line>Attach to the container's process</p>
   </a>
 
-  <a [routerLink]="['/docker/containers/', container.Id, 'exec']"
-     mat-list-item
-     (click)="dismiss()">
+  <a mat-list-item
+     (click)="exec()">
     <mat-icon mat-list-icon>folder</mat-icon>
     <h4 mat-line>Exec</h4>
     <p mat-line>Execute a command inside the container</p>

src/app/daemon-tools/container-actions-sheet/container-actions-sheet.component.html

@@ -5,6 +5,7 @@ import { catchError } from 'rxjs/operators';
 import { throwError, Observable } from 'rxjs';
 import { ContainerInfo } from 'dockerode';
 import { DockerContainerService } from '../docker-container.service';
+import { TimoneerTabsService } from '../../navigation/timoneer-tabs.service';
 
 @Component({
   selector: 'tim-container-actions-sheet',
@@ -22,7 +23,8 @@ export class ContainerActionsSheetComponent {
     public container: ContainerInfo,
     private bottomSheetRef: MatBottomSheetRef<ContainerActionsSheetComponent>,
     private notificationService: NotificationService,
-    private containerService: DockerContainerService) { }
+    private containerService: DockerContainerService,
+    private tabService: TimoneerTabsService) { }
 
   public dismiss() {
     this.bottomSheetRef.dismiss();
@@ -44,6 +46,16 @@ export class ContainerActionsSheetComponent {
       });
   }
 
+  public attach() {
+    this.dismiss();
+    this.tabService.attach(this.container.Id);
+  }
+
+  public exec() {
+    this.dismiss();
+    this.tabService.exec(this.container.Id);
+  }
+
   private bindLoading(obs: Observable<any>) {
     this.loading = true;
     return obs.pipe(catchError((e) => {