Merge pull request #7 from IvashchenkoCW/feature/deploy-dialog

rewrite ServiceDeploy interface

src/composer/src/app/core/components/dialogs/deploy-dialog/deploy-dialog.component.html

@@ -67,11 +67,6 @@
           <mat-label>Endpoint mode</mat-label>
           <input matInput formControlName="endpoint_mode" />
         </mat-form-field>
-  
-        <mat-form-field appearance="outline">
-          <mat-label>Max replicas per node</mat-label>
-          <input matInput formControlName="max_replicas_per_node" />
-        </mat-form-field>
 
         <div [formGroup]="formGeneral['controls']['resources']['controls']['limits']" fxLayout="column" fxGrap="10px">
           <h3><span>Limits</span></h3>
@@ -101,15 +96,21 @@
       </form>
     </mat-tab>
     <mat-tab label="Placement" [formGroup]="formGeneral">
-      <div fxLayout="column">
+      <div fxLayout="column" [formGroup]="formGeneral['controls']['placement']">
+        <mat-form-field appearance="outline">
+          <mat-label>Max replicas per node</mat-label>
+          <input matInput formControlName="max_replicas_per_node" />
+        </mat-form-field>
+
         <mat-form-field fxFill appearance="outline">
           <mat-label>Constraints</mat-label>
           <textarea 
-            matInput 
+            matInput
             cdkTextareaAutosize
             #autosize="cdkTextareaAutosize"
-            formControlName="placement"></textarea>
+            formControlName="constraints"></textarea>
         </mat-form-field>
+
         <h2 mat-dialog-title>Preferences</h2>
         <key-value #preferences [keyValueArray]="currentPreferences"></key-value>
       </div>

src/composer/src/app/core/components/dialogs/deploy-dialog/deploy-dialog.component.ts

@@ -40,8 +40,10 @@ export class DeployDialogComponent implements OnInit {
         window: new FormControl(''),
       }),
       endpoint_mode: new FormControl(''),
-      placement: new FormControl(''),
+      placement: this.formBuilder.group({
-      max_replicas_per_node:  new FormControl('', [Validators.pattern('^[0-9]+$')]),
+        constraints: new FormControl(''),
+        max_replicas_per_node:  new FormControl('', [Validators.pattern('^[0-9]+$')])
+      }),
       resources: this.formBuilder.group({
         limits: this.formBuilder.group({
           cpus: new FormControl(''),
@@ -60,7 +62,10 @@ export class DeployDialogComponent implements OnInit {
 
       this.formGeneral.patchValue({
         ...this.data.deploy,
-        placement: this.data.deploy.placement.constraints.join(',')
+        placement: {
+          max_replicas_per_node: this.data.deploy.placement.max_replicas_per_node,
+          constraints: this.data.deploy.placement.constraints.join(',')
+        }
       })
     }
   }
@@ -69,7 +74,8 @@ export class DeployDialogComponent implements OnInit {
     const fields: ServiceDeploy = {
       ...this.formGeneral.getRawValue(),
       placement: {
-        constraints: this.formGeneral.get('placement').value.split(','),
+        max_replicas_per_node: this.formGeneral.get('placement').value.max_replicas_per_node,
+        constraints: this.formGeneral.get('placement').value.constraints.split(','),
         preferences: this.preferences.getKeyValuePaies()
       },
       labels: this.labels.getKeyValuePaies(),

src/composer/src/app/core/store/models.ts

@@ -56,10 +56,10 @@ export interface ServiceDeploy {
   }
   endpoint_mode: string
   placement: {
+    max_replicas_per_node: number
     constraints: []
     preferences: KeyValuePair[]
   }
-  max_replicas_per_node: number
   resources: {
     limits: {
       cpus: string