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

Feature/deploy dialog

src/composer/src/app/app.module.ts

@@ -68,6 +68,7 @@ import { GlobalDialogComponent } from './core/components/dialogs/global-dialog/g
 import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 import { RecipeComponent, DialogPublishRecipe, DialogRecipeDetails } from './core/components/recipe/recipe.component';
 import { BuildDialogComponent } from './core/components/dialogs/build-dialog/build-dialog.component';
+import { DeployDialogComponent } from './core/components/dialogs/deploy-dialog/deploy-dialog.component';
 
 export function getHighlightLanguages() {
   return {
@@ -105,7 +106,8 @@ export function getHighlightLanguages() {
     RecipeComponent,
     DialogPublishRecipe,
     DialogRecipeDetails,
-    BuildDialogComponent
+    BuildDialogComponent,
+    DeployDialogComponent
   ],
   imports: [
     BrowserModule,

src/composer/src/app/core/components/canvas/jsplumb/node/node.component.html

@@ -25,14 +25,19 @@
 
   </div>
   <div fxLayout="row" fxLayoutAlign="space-between center" class="node-actions">
-    <button mat-icon-button aria-label="Remove" (click)="removeService()">
+    <button mat-icon-button matTooltip="Deploy" aria-label="Build" (click)="deployDialogOpen()">
-      <mat-icon>delete</mat-icon>
+      <span class="material-icons">cloud_upload</span>
     </button>
-    <button mat-icon-button aria-label="Build" (click)="buildDialogOpen()">
+    <button mat-icon-button matTooltip="Build" aria-label="Build" (click)="buildDialogOpen()">
       <span class="material-icons">build</span>
     </button>
-    <button mat-icon-button aria-label="Manage" (click)="manageProjectService()">
+    <button fxFlexAlign="center" mat-icon-button matTooltip="Manage" aria-label="Manage" (click)="manageProjectService()">
       <mat-icon>create</mat-icon>
     </button>
   </div>
+  <div fxLayout="row" fxLayoutAlign="center center" class="node-actions">
+    <button mat-icon-button matTooltip="Remove" aria-label="Remove" (click)="removeService()">
+      <mat-icon>delete</mat-icon>
+    </button>
+  </div>
 </div>

src/composer/src/app/core/components/canvas/jsplumb/node/node.component.scss

@@ -1,7 +1,7 @@
 .node {
   position: absolute;
   width: 135px;
-  height: 125px;
+  height: 135px;
   padding: 4px;
   background: white;
   box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);

src/composer/src/app/core/components/canvas/jsplumb/node/node.component.ts

@@ -7,6 +7,7 @@ import { MatDialog } from '@angular/material/dialog'
 import { ManageProjectDialogComponent } from '../../../dialogs/manage-project-dialog/manage-project-dialog.component'
 import { ConfirmDialogComponent } from '../../../dialogs/confirm-dialog/confirm-dialog.component'
 import { BuildDialogComponent } from '../../../dialogs/build-dialog/build-dialog.component'
+import { DeployDialogComponent } from '../../../dialogs/deploy-dialog/deploy-dialog.component'
 import * as ProjectActions from './../../../../store/project.actions'
 import { NodeService } from '../node.service'
 import { EventEmitterService } from 'src/app/core/services/event-emitter.service'
@@ -135,6 +136,14 @@ export class NodeComponent implements AfterViewInit, OnDestroy {
     })
   }
 
+  deployDialogOpen() {
+    this.dialog.open(DeployDialogComponent, {
+      width: '50%',
+      minWidth: '740px',
+      data: this.currentService,
+    })
+  }
+
   ngOnDestroy() {
     this.unSubscribe$.next(true)
     this.unSubscribe$.complete()

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

@@ -0,0 +1,133 @@
+<h1 mat-dialog-title><span>Deploy Config</span></h1>
+<mat-dialog-content>
+  <mat-tab-group animationDuration="0ms">
+    <mat-tab label="General">
+      <form [formGroup]="formGeneral" fxLayout="column">
+        <mat-form-field appearance="outline">
+          <mat-label>Mode</mat-label>
+          <input matInput formControlName="mode" />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Replicas</mat-label>
+          <input matInput formControlName="replicas" />
+        </mat-form-field>
+
+        <div [formGroup]="formGeneral['controls']['update_config']" fxLayout="column" fxGrap="10px">
+            <h3><span>Update config</span></h3>
+            <mat-form-field appearance="outline">
+                <mat-label>Parallelism</mat-label>
+                <input matInput formControlName="parallelism" />
+            </mat-form-field>
+            
+            <mat-form-field appearance="outline">
+                <mat-label>Delay</mat-label>
+                <input matInput formControlName="delay" />
+            </mat-form-field>
+            
+            <mat-form-field appearance="outline">
+                <mat-label>Order</mat-label>
+                <input matInput formControlName="order" />
+            </mat-form-field>
+        </div>
+
+        <div class="splitter mg-b-15"></div>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Rollback config</mat-label>
+          <input matInput formControlName="rollback_config" />
+        </mat-form-field>
+
+        <div [formGroup]="formGeneral['controls']['restart_policy']" fxLayout="column" fxGrap="10px">
+            <h3><span>Restart policy</span></h3>
+            <mat-form-field appearance="outline">
+                <mat-label>Condition</mat-label>
+                <input matInput formControlName="condition" />
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+                <mat-label>Delay</mat-label>
+                <input matInput formControlName="delay" />
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+                <mat-label>Parallelism</mat-label>
+                <input matInput formControlName="parallelism" />
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Window</mat-label>
+              <input matInput formControlName="window" />
+            </mat-form-field>
+        </div>
+
+        <div class="splitter mg-b-15"></div>
+
+        <mat-form-field appearance="outline">
+          <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>
+          <mat-form-field appearance="outline">
+            <mat-label>Cpus</mat-label>
+            <input matInput formControlName="cpus" />
+          </mat-form-field>
+
+          <mat-form-field appearance="outline">
+              <mat-label>Memory</mat-label>
+              <input matInput formControlName="memory" />
+          </mat-form-field>
+        </div>
+
+        <div [formGroup]="formGeneral['controls']['resources']['controls']['reservations']" fxLayout="column" fxGrap="10px">
+          <h3><span>Limits</span></h3>
+          <mat-form-field appearance="outline">
+            <mat-label>Cpus</mat-label>
+            <input matInput formControlName="cpus" />
+          </mat-form-field>
+
+          <mat-form-field appearance="outline">
+              <mat-label>Memory</mat-label>
+              <input matInput formControlName="memory" />
+          </mat-form-field>
+        </div>
+      </form>
+    </mat-tab>
+    <mat-tab label="Placement" [formGroup]="formGeneral">
+      <div fxLayout="column">
+        <mat-form-field fxFill appearance="outline">
+          <mat-label>Constraints</mat-label>
+          <textarea 
+            matInput 
+            cdkTextareaAutosize
+            #autosize="cdkTextareaAutosize"
+            formControlName="placement"></textarea>
+        </mat-form-field>
+        <h2 mat-dialog-title>Preferences</h2>
+        <key-value #preferences [keyValueArray]="currentPreferences"></key-value>
+      </div>
+    </mat-tab>
+
+    <mat-tab label="Labels">
+      <h2 mat-dialog-title>Labels</h2>
+      <key-value #labels [keyValueArray]="currentLabels"></key-value>
+    </mat-tab>
+  </mat-tab-group>
+</mat-dialog-content>
+
+<mat-dialog-actions class="dialog-actions">
+  <check-circle></check-circle>
+  <button mat-button (click)="closeModal()">
+    Cancel
+  </button>
+  <button mat-raised-button color="success" (click)="onSave()" [disabled]="formGeneral.invalid">
+    Save
+  </button>
+</mat-dialog-actions>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeployDialogComponent } from './deploy-dialog.component';
+
+describe('DeployDialogComponent', () => {
+  let component: DeployDialogComponent;
+  let fixture: ComponentFixture<DeployDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeployDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeployDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,87 @@
+import { Component, OnInit, ViewChild, Inject } from '@angular/core'
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'
+import { FormControl, Validators, FormGroup, FormBuilder, AbstractControl } from '@angular/forms'
+import { KeyValueComponent } from '../../common/key-value/key-value/key-value.component'
+import { Service, ServiceDeploy } from '../../../store/models'
+import { CheckCircleComponent } from '../../widgets/check-circle/check-circle.component'
+import { Store } from '@ngrx/store'
+import * as ProjectActions from './../../../store/project.actions'
+import { EventEmitterService } from 'src/app/core/services/event-emitter.service'
+
+@Component({
+  selector: 'app-deploy-dialog',
+  templateUrl: './deploy-dialog.component.html',
+  styleUrls: ['./deploy-dialog.component.scss']
+})
+export class DeployDialogComponent implements OnInit {
+  @ViewChild(CheckCircleComponent) checkCircle: CheckCircleComponent
+  @ViewChild('preferences') preferences: KeyValueComponent
+  @ViewChild('labels') labels: KeyValueComponent
+
+  formGeneral: FormGroup
+  currentPreferences: [] = []
+  currentLabels: [] = []
+  constructor(public dialogRef: MatDialogRef<DeployDialogComponent>, private formBuilder: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: Service, private store: Store, private eventEmitterService: EventEmitterService,) { }
+
+  ngOnInit(): void {
+    this.formGeneral = this.formBuilder.group({
+      mode: new FormControl(''),
+      replicas: new FormControl(''),
+      update_config: this.formBuilder.group({
+          parallelism:  new FormControl('', [Validators.pattern('^[0-9]+$')]),
+          delay: new FormControl(''),
+          order: new FormControl('')
+      }),
+      rollback_config: new FormControl(''),
+      restart_policy: this.formBuilder.group({
+        condition: new FormControl(''),
+        delay: new FormControl(''),
+        parallelism:  new FormControl('', [Validators.pattern('^[0-9]+$')]),
+        window: new FormControl(''),
+      }),
+      endpoint_mode: new FormControl(''),
+      placement: new FormControl(''),
+      max_replicas_per_node:  new FormControl('', [Validators.pattern('^[0-9]+$')]),
+      resources: this.formBuilder.group({
+        limits: this.formBuilder.group({
+          cpus: new FormControl(''),
+          memory: new FormControl('')
+        }),
+        reservations: this.formBuilder.group({
+          cpus: new FormControl(''),
+          memory: new FormControl('')
+        })
+      })
+    })
+    
+    if(this.data.deploy) {
+      this.data.deploy.labels.forEach(val => this.currentLabels.push(val))
+      this.data.deploy.placement.preferences.forEach(val => this.currentPreferences.push(val))
+
+      this.formGeneral.patchValue({
+        ...this.data.deploy,
+        placement: this.data.deploy.placement.constraints.join(',')
+      })
+    }
+  }
+
+  onSave(): void {
+    const fields: ServiceDeploy = {
+      ...this.formGeneral.getRawValue(),
+      placement: {
+        constraints: this.formGeneral.get('placement').value.split(','),
+        preferences: this.preferences.getKeyValuePaies()
+      },
+      labels: this.labels.getKeyValuePaies(),
+    }
+
+    this.store.dispatch(ProjectActions.UpdateService({data: {...this.data, deploy: fields}}))
+    this.checkCircle.showCircle()
+    this.eventEmitterService.broadcast('save:project', {})
+  }
+
+  closeModal(): void {
+    this.dialogRef.close()
+  }
+
+}

src/composer/src/app/core/components/repo-search/repo-search.component.scss

@@ -20,10 +20,6 @@
     }
   }
 
-  .splitter {
-    border-bottom: 1px solid #e8e8e8;
-  }
-
   .search-results {
     padding: 20px;
     position: relative;

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

@@ -47,6 +47,7 @@ export interface ServiceDeploy {
     delay: string
     order: string
   }
+  rollback_config: string
   restart_policy: {
     condition: string
     delay: string
@@ -88,7 +89,7 @@ export interface Service {
   init: boolean
   isolation: string
   container_name?: string
-  deploy: object
+  deploy: ServiceDeploy
   build: ServiceBuildObject
   image: string
   restart: string

src/composer/src/styles.scss

@@ -261,3 +261,7 @@ as-split > .code-viewer {
     }
   }
 }
+
+.splitter {
+  border-bottom: 1px solid #e8e8e8;
+}