Custom adapters for docker

src/app/cartography/models/node.ts

@@ -64,7 +64,7 @@ export class Node {
   console_auto_start: boolean;
   console_host: string;
   console_type: string;
-  custom_adapters?: CustomAdapter[];
+  custom_adapters?: any[];
   ethernet_adapters?: any;
   serial_adapters?: any;
   first_port_name: string;

src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.html

@@ -1,12 +1,28 @@
 <h1 mat-dialog-title>Configure custom adapters for node {{node.name}}</h1>
 
-<div class="modal-form-container">
+<div *ngIf="node" class="modal-form-container">
-    <div class="content">
+    <div class="header">
-        <div class="default-content">
+        <span class="column">
-            <mat-card class="matCard">
+            Adapter number
-
+        </span>
-            </mat-card>
+        <span class="column">
+            Port name
+        </span>
     </div>
+
+    <div>
+        <mat-list>
+            <mat-list-item *ngFor="let adapter of adapters; index as i">
+                <div class="header">
+                    <span class="column">
+                        Adapter {{adapter.adapter_number}}
+                    </span>
+                    <span class="column">
+                        <input matInput type="text" [(ngModel)]="adapter.port_name" placeholder="Edit port name">
+                    </span>
+                </div>
+            </mat-list-item>
+        </mat-list>
     </div>
 </div>
 

src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.scss

@@ -0,0 +1,21 @@
+th {
+    border: 0px!important;
+}
+
+th.mat-header-cell {
+    padding-bottom: 15px;
+}
+
+td.mat-cell {
+    padding-top: 15px;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.column {
+    width: 50%;
+}

src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.ts

@@ -11,11 +11,13 @@ import { DockerConfigurationService } from '../../../../../../services/docker-co
 @Component({
     selector: 'app-configure-custom-adapters',
     templateUrl: './configure-custom-adapters.component.html',
-    styleUrls: ['../../configurator.component.scss']
+    styleUrls: ['./configure-custom-adapters.component.scss']
 })
 export class ConfigureCustomAdaptersDialogComponent implements OnInit {
     server: Server;
     node: Node;
+    displayedColumns: string[] = ['adapter_number', 'port_name'];
+    adapters: CustomAdapter[] = [];
 
     constructor(
         public dialogRef: MatDialogRef<ConfigureCustomAdaptersDialogComponent>,
@@ -26,16 +28,33 @@ export class ConfigureCustomAdaptersDialogComponent implements OnInit {
     ) {}
 
     ngOnInit() {
-
+        let i: number = 0;
+        if (!this.node.custom_adapters) {
+            this.node.ports.forEach((port) => {
+                this.adapters.push({
+                    adapter_number: i,
+                    port_name: ''
+                });
+            });
+        } else {
+            this.adapters = this.node.custom_adapters;
+        }
     }
 
-    getConfiguration() {}
-
     onSaveClick() {
-        
+        this.node.custom_adapters = this.adapters;
+        this.nodeService.updateNodeWithCustomAdapters(this.server, this.node).subscribe(() => {
+            this.onCancelClick();
+            this.toasterService.success(`Configuration saved for node ${this.node.name}`);
+        });
     }
 
     onCancelClick() {
         this.dialogRef.close();
     }
 }
+
+export class CustomAdapter {
+    adapter_number: number;
+    port_name: string;
+}