build dialog

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

@@ -67,6 +67,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';
 
 export function getHighlightLanguages() {
   return {
@@ -103,7 +104,8 @@ export function getHighlightLanguages() {
     GlobalDialogComponent,
     RecipeComponent,
     DialogPublishRecipe,
-    DialogRecipeDetails
+    DialogRecipeDetails,
+    BuildDialogComponent
   ],
   imports: [
     BrowserModule,

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

@@ -28,6 +28,9 @@
     <button mat-icon-button aria-label="Remove" (click)="removeService()">
       <mat-icon>delete</mat-icon>
     </button>
+    <button mat-icon-button aria-label="Build" (click)="buildDialogOpen()">
+      <span class="material-icons">build</span>
+    </button>
     <button mat-icon-button aria-label="Manage" (click)="manageProjectService()">
       <mat-icon>create</mat-icon>
     </button>

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

@@ -6,6 +6,7 @@ import { RestService } from 'src/app/core/services/rest.service'
 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 * as ProjectActions from './../../../../store/project.actions'
 import { NodeService } from '../node.service'
 import { EventEmitterService } from 'src/app/core/services/event-emitter.service'
@@ -126,6 +127,14 @@ export class NodeComponent implements AfterViewInit, OnDestroy {
       })
   }
 
+  buildDialogOpen() {
+    this.dialog.open(BuildDialogComponent, {
+      width: '50%',
+      minWidth: '740px',
+      data: this.currentService,
+    })
+  }
+
   ngOnDestroy() {
     this.unSubscribe$.next(true)
     this.unSubscribe$.complete()

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

@@ -0,0 +1,62 @@
+<h1 mat-dialog-title><span>Build 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>Build</mat-label>
+          <input matInput formControlName="build" />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Context</mat-label>
+          <input matInput formControlName="context" />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Dockerfile</mat-label>
+          <input matInput formControlName="dockerfile" />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Network</mat-label>
+          <input matInput formControlName="network" />
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>SHM size</mat-label>
+          <input matInput formControlName="shm_size" />
+        </mat-form-field>
+  
+        <mat-form-field appearance="outline">
+          <mat-label>Target</mat-label>
+          <input matInput formControlName="target" />
+        </mat-form-field>
+      </form>
+    </mat-tab>
+    <mat-tab label="Arguments">
+      <h2 mat-dialog-title>Arguments</h2>
+      <key-value #args [keyValueArray]="currentArgs"></key-value>
+    </mat-tab>
+    
+    <mat-tab label="Cache from">
+      <h2 mat-dialog-title>Cache from</h2>
+      <key-value #cache_from [keyValueArray]="currentCacheFrom"></key-value>
+    </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)="dialogRef.close()">
+    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/build-dialog/build-dialog.component.spec.ts

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

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

@@ -0,0 +1,47 @@
+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, Project, Volume, ServicePort, Network } from '../../../store/models'
+import { CheckCircleComponent } from '../../widgets/check-circle/check-circle.component'
+
+@Component({
+  selector: 'app-build-dialog',
+  templateUrl: './build-dialog.component.html',
+  styleUrls: ['./build-dialog.component.scss']
+})
+export class BuildDialogComponent implements OnInit {
+  @ViewChild(CheckCircleComponent) checkCircle: CheckCircleComponent
+  @ViewChild('args') args: KeyValueComponent
+  @ViewChild('cache_from') cache_from: KeyValueComponent
+  @ViewChild('labels') labels: KeyValueComponent
+
+  formGeneral: FormGroup
+  currentArgs: [] = []
+  currentCacheFrom: [] = []
+  currentLabels: [] = []
+  constructor(public dialogRef: MatDialogRef<BuildDialogComponent>, private formBuilder: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: Service) { }
+
+  ngOnInit(): void {
+    this.formGeneral = this.formBuilder.group({
+      build: new FormControl(''),
+      context: new FormControl(''),
+      dockerfile: new FormControl(''),
+      network: new FormControl(''),
+      shm_size: new FormControl(''),
+      target: new FormControl(''),
+    })
+  }
+
+  onSave() {
+    const fields = {
+      ...this.formGeneral.getRawValue(),
+      args: this.args.getKeyValuePaies(),
+      cache_from: this.cache_from.getKeyValuePaies(),
+      labels: this.labels.getKeyValuePaies()
+    }
+    this.checkCircle.showCircle()
+    console.log(fields)
+  }
+
+}