feat: clone containers

Author: Leonardo Chaia

src/app/daemon-tools/container-action-buttons/container-action-buttons.component.html

@@ -2,14 +2,12 @@
   <tim-loading></tim-loading>
 </ng-template>
 <div *ngIf="!loading; else loadingTemplate"
-     fxLayout="row">
+     fxLayout="row"
+     fxLayoutAlign="start center"
+     fxLayoutGap="8px">
 
-  <div fxFlex="grow"
-       fxLayout="row"
-       fxLayoutAlign="start center"
-       fxLayoutGap="4px">
-
-    <ng-container *ngIf="containerState === 'running'; else notRunningTemplate">
+  <ng-container *ngIf="containerState === 'running'; else notRunningTemplate">
+    <div>
       <button type="button"
               *ngIf="isButtonVisible('attach')"
               (click)="attach()"
@@ -18,18 +16,20 @@
         <mat-icon>code</mat-icon>
         Attach
       </button>
-
+    </div>
+    <div>
       <button type="button"
               *ngIf="isButtonVisible('exec')"
               (click)="exec()"
               mat-raised-button>
         <mat-icon>settings_ethernet</mat-icon>
         Exec
       </button>
+    </div>
+  </ng-container>
 
-    </ng-container>
-
-    <ng-template #notRunningTemplate>
+  <ng-template #notRunningTemplate>
+    <div>
       <button type="button"
               *ngIf="isButtonVisible('start')"
               (click)="start()"
@@ -38,26 +38,38 @@
         <mat-icon>play_arrow</mat-icon>
         Start
       </button>
-    </ng-template>
-
+    </div>
+  </ng-template>
+  <div>
     <button type="button"
             *ngIf="isButtonVisible('logs')"
             (click)="logs()"
             mat-raised-button>
       <mat-icon>subject</mat-icon>
       Logs
     </button>
+  </div>
 
-    <ng-container *ngIf="containerState === 'running'">
-      <button type="button"
-              *ngIf="isButtonVisible('stop')"
-              (click)="stop()"
-              mat-raised-button>
-        <mat-icon>stop</mat-icon>
-        Stop
-      </button>
-    </ng-container>
+  <div *ngIf="containerState === 'running'">
+    <button type="button"
+            *ngIf="isButtonVisible('stop')"
+            (click)="stop()"
+            mat-raised-button>
+      <mat-icon>stop</mat-icon>
+      Stop
+    </button>
+  </div>
+
+  <div fxFlex="grow"></div>
 
+  <div>
+    <button type="button"
+            *ngIf="isButtonVisible('clone')"
+            (click)="clone()"
+            mat-raised-button>
+      <mat-icon>add_to_photos</mat-icon>
+      Clone
+    </button>
   </div>
 
   <div>

src/app/daemon-tools/container-action-buttons/container-action-buttons.component.ts

@@ -2,9 +2,10 @@ import { Component, Input } from '@angular/core';
 import { TabService } from '../../tabs/tab.service';
 import { TimoneerTabs } from '../../timoneer-tabs';
 import { Observable, throwError } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
+import { catchError, map, take } from 'rxjs/operators';
 import { DockerContainerService } from '../docker-container.service';
 import { NotificationService } from '../../shared/notification.service';
+import { ContainerCreateBody } from 'dockerode';
 
 @Component({
   selector: 'tim-container-action-buttons',
@@ -75,11 +76,24 @@ export class ContainerActionButtonsComponent {
       });
   }
 
+  public clone() {
+    this.bindLoading(this.containerService.inspect(this.containerId))
+      .pipe(take(1))
+      .subscribe((containerInfo) => {
+        this.tabService.add(TimoneerTabs.DOCKER_CONTAINER_NEW, {
+          params: {
+            ...containerInfo.Config,
+            HostConfig: containerInfo.HostConfig
+          } as ContainerCreateBody
+        });
+      });
+  }
+
   public isButtonVisible(key: string) {
     return !this.hiddenButtons || !this.hiddenButtons.includes(key);
   }
 
-  private bindLoading(obs: Observable<any>) {
+  private bindLoading<T>(obs: Observable<T>) {
     this.loading = true;
     return obs.pipe(
       catchError((e) => {

src/app/daemon-tools/container-create-port-mapping/container-create-port-mapping.component.ts

@@ -56,14 +56,6 @@ export class ContainerCreatePortMappingComponent implements OnInit, OnChanges {
       const exposedPorts = Object.keys(this.image.Config.ExposedPorts || {})
         .map(k => parseInt(k.split('/')[0], 10));
 
-      // Remove bindings that are not in the new image
-      for (const control of this.portBindingsArray.controls) {
-        const value = control.value as PortBinding;
-        if (!exposedPorts.includes(value.containerPort)) {
-          this.containerForm.removePortBinding(this.portBindingsArray, control);
-        }
-      }
-
       const out = this.suggestedPorts || [];
       this.availablePorts = out.concat(exposedPorts.filter(p => !out.some(o => o.containerPort === p))
         .map(p => ({ containerPort: p })));