feat: show current attached container info below terminal

Author: Leonardo Chaia

src/app/daemon-tools/container-attacher-container/container-attacher-container.component.html

@@ -1,8 +1,13 @@
 <div fxLayout="column"
+     fxLayoutGap="16px"
      style="padding:16px;">
     <div>
         <tim-container-attacher [containerId]="containerId"
                                 [stream]="stream$">
         </tim-container-attacher>
     </div>
+
+    <div>
+        <tim-container-inspect-cards [containerId]="containerId"></tim-container-inspect-cards>
+    </div>
 </div>

src/app/daemon-tools/container-exec-container/container-exec-container.component.html

@@ -10,4 +10,8 @@
   <div *ngIf="execId">
     Exec {{execId}}
   </div>
+
+  <div>
+    <tim-container-inspect-cards [containerId]="containerId"></tim-container-inspect-cards>
+  </div>
 </div>

src/app/daemon-tools/container-inspect-cards/container-inspect-cards.component.html

@@ -0,0 +1,62 @@
+<div *ngIf="containerInfo"
+     fxLayout="column"
+     fxLayoutGap="16px">
+  <mat-card>
+    <h3>
+      <mat-icon class="tim-text-primary">computer</mat-icon>
+      {{containerInfo.Name}} ({{containerInfo.Id | slice:0:12}})
+    </h3>
+    <p>
+      <b>{{containerInfo.Config.Image}}</b>
+    </p>
+
+  </mat-card>
+
+  <mat-card *ngIf="portMappings && portMappings.length">
+    <h3>
+      <mat-icon class="tim-text-primary">network_wifi</mat-icon>
+      Port bindings:
+    </h3>
+    <ul>
+      <li *ngFor="let mapping of portMappings">
+        <span title="Container Port">{{mapping.containerPort}}</span>
+        <mat-icon>arrow_right_alt</mat-icon>
+        <b title="HostPort">{{mapping.hostPort}}</b>
+      </li>
+    </ul>
+  </mat-card>
+
+  <mat-card *ngIf="containerInfo.Mounts && containerInfo.Mounts.length">
+    <h3>
+      <mat-icon class="tim-text-primary">storage</mat-icon>
+      Volumes
+    </h3>
+    <ul>
+      <li *ngFor="let mapping of containerInfo.Mounts">
+        <span title="Container Path">{{mapping.Destination}}</span>
+        <mat-icon>arrow_right_alt</mat-icon>
+        <b title="Volume">{{mapping['Name']}}</b> ({{mapping['Type']}})
+      </li>
+    </ul>
+  </mat-card>
+
+  <mat-card>
+    <h3>
+      <mat-icon class="tim-text-primary">confirmation_number</mat-icon>
+      Environment Variables
+    </h3>
+    <pre><ng-container *ngFor="let env of containerInfo.Config.Env">{{env+"\n"}}</ng-container></pre>
+  </mat-card>
+
+  <mat-card *ngIf="labels && labels.length">
+    <h3>
+      <mat-icon class="tim-text-primary">label</mat-icon>
+      Labels
+    </h3>
+    <ul>
+      <li *ngFor="let label of labels">
+        {{label.key}}: <b>{{label.value}}</b>
+      </li>
+    </ul>
+  </mat-card>
+</div>

src/app/daemon-tools/container-inspect-cards/container-inspect-cards.component.scss

@@ -0,0 +1,51 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { DockerContainerService } from '../docker-container.service';
+import { ContainerInspectInfo } from 'dockerode';
+
+@Component({
+  selector: 'tim-container-inspect-cards',
+  templateUrl: './container-inspect-cards.component.html',
+  styleUrls: ['./container-inspect-cards.component.scss']
+})
+export class ContainerInspectCardsComponent implements OnInit {
+
+  @Input()
+  public containerId: string;
+
+  public containerInfo: ContainerInspectInfo;
+  public portMappings: { containerPort: string, hostPort: string }[] = [];
+  public labels: { key: string, value: string }[] = [];
+
+  constructor(private containerService: DockerContainerService) { }
+
+  public ngOnInit() {
+
+    this.containerService.inspect(this.containerId)
+      .subscribe(info => {
+        this.containerInfo = info;
+        for (const containerPort in info.HostConfig.PortBindings) {
+          if (info.HostConfig.PortBindings.hasOwnProperty(containerPort)) {
+            const portBindings = info.HostConfig.PortBindings[containerPort];
+            for (const iterator of portBindings) {
+              const port = {
+                containerPort: containerPort.slice(0, containerPort.indexOf('/')),
+                hostPort: iterator.HostPort
+              };
+              this.portMappings.push(port);
+            }
+
+            for (const key in info.Config.Labels) {
+              if (info.Config.Labels.hasOwnProperty(key)) {
+                const label = info.Config.Labels[key];
+                this.labels.push({
+                  key: key,
+                  value: label
+                });
+              }
+            }
+          }
+        }
+      });
+  }
+
+}

src/app/daemon-tools/container-inspect-cards/container-inspect-cards.component.ts

@@ -48,6 +48,7 @@ import { ContainerLauncherComponent } from './container-launcher/container-launc
 import { PullImageJobLogsComponent } from './pull-image-job-logs/pull-image-job-logs.component';
 import { JobsModule } from '../jobs/jobs.module';
 import { TimDialogModule } from '../tim-dialog/tim-dialog.module';
+import { ContainerInspectCardsComponent } from './container-inspect-cards/container-inspect-cards.component';
 
 @NgModule({
   imports: [
@@ -101,6 +102,7 @@ import { TimDialogModule } from '../tim-dialog/tim-dialog.module';
     ContainerListContainerComponent,
     PullImageJobLogsComponent,
     ContainerLauncherComponent,
+    ContainerInspectCardsComponent,
   ],
   exports: [
     ContainerListComponent,