Merge pull request #303 from Vafilor/feat/full.node.resources

feat: move capture node checkbox next to node pool

src/app/app.module.ts

@@ -139,6 +139,7 @@ import { PrefixFileInputComponent } from './files/prefix-file-input/prefix-file-
 import { YamlComponent } from './fields/yaml/yaml.component';
 import { MarkdownModule } from 'ngx-markdown';
 import { ModelsComponent } from './models/models.component';
+import { CheckboxComponent } from './fields/checkbox/checkbox.component';
 
 @NgModule({
     declarations: [
@@ -247,6 +248,7 @@ import { ModelsComponent } from './models/models.component';
         PrefixFileInputComponent,
         YamlComponent,
         ModelsComponent,
+        CheckboxComponent,
     ],
     entryComponents: [
         WorkflowExecuteDialogComponent,

src/app/fields/checkbox/checkbox.component.html

@@ -0,0 +1 @@
+<mat-checkbox [formControl]="inputControl">{{data.displayName}}</mat-checkbox>

src/app/fields/checkbox/checkbox.component.spec.ts

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

src/app/fields/checkbox/checkbox.component.ts

@@ -0,0 +1,69 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Parameter } from '../../../api';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-checkbox',
+  templateUrl: './checkbox.component.html',
+  styleUrls: ['./checkbox.component.scss']
+})
+export class CheckboxComponent implements OnInit {
+  // tslint:disable-next-line:variable-name
+  private _data: Parameter;
+
+  @Input() set errors(errors: any) {
+    if (!this._data || !this.inputControl) {
+      return;
+    }
+
+    const hasError = errors[this.data.name] && errors[this.data.name] === 'conflict';
+    if (hasError) {
+      this.inputControl.setErrors({
+        conflict: true,
+      });
+
+      this.inputControl.markAllAsTouched();
+    }
+  }
+
+  @Input() set data(value: Parameter) {
+    this._data = value;
+    this.inputControl.setValue(value.value === 'true');
+  }
+
+  get data(): Parameter {
+    return this._data;
+  }
+
+  @Input() form: FormGroup;
+  inputControl: FormControl;
+
+  constructor() {
+    this.inputControl = new FormControl();
+    this.inputControl.valueChanges.subscribe(newValue => {
+      if (this._data) {
+        this._data.value = newValue;
+      }
+    });
+  }
+
+  ngOnInit() {
+    this.setupForm();
+  }
+
+  setupForm() {
+    if (this.data.required) {
+      this.inputControl.setValidators([
+        Validators.required
+      ]);
+    }
+
+    this.form.addControl(this.data.name, this.inputControl);
+  }
+
+  setDataValue(value: string) {
+    setTimeout(() => {
+      this._data.value = value;
+    });
+  }
+}

src/app/fields/form/form.component.html

@@ -4,6 +4,11 @@
             <app-textarea class="form-item fix-mat-overflow" *ngSwitchCase="'textarea.textarea'" [data]="fieldDatum" [form]="form" [class.extraBottomSpace]="!last && !!fieldDatum.hint"></app-textarea>
             <app-yaml class="form-item fix-mat-overflow" *ngSwitchCase="'editor.yaml'" [data]="fieldDatum" [form]="form" [class.extraBottomSpace]="!last && !!fieldDatum.hint"></app-yaml>
             <app-select class="form-item fix-mat-overflow" *ngSwitchCase="'select.select'" [data]="fieldDatum" [form]="form" [disabled]="disabled" [class.extraBottomSpace]="!last && !!fieldDatum.hint"></app-select>
+            <app-checkbox class="form-item fix-mat-overflow mt-0 mb-2" *ngSwitchCase="'input.checkbox'" [data]="fieldDatum" [form]="form" [class.extraBottomSpace]="!last && !!fieldDatum.hint"></app-checkbox>
+            <div class="form-item d-flex align-items-baseline mt-0 mb-2" *ngSwitchCase="'nodeInfo'">
+                <app-select class="fix-mat-overflow flex-grow-1" [data]="fieldDatum.nodePool" [form]="form" [disabled]="disabled"></app-select>
+                <app-checkbox class="fix-mat-overflow mt-0 ml-3" style="position: relative; bottom: 6px;" [data]="fieldDatum.captureNode" [form]="form"></app-checkbox>
+            </div>
             <app-radio class="form-item fix-mat-overflow" *ngSwitchCase="'input.radio'" [data]="fieldDatum" [form]="form" [class.extraBottomSpace]="!last && !!fieldDatum.hint"></app-radio>
             <app-select class="form-item fix-mat-overflow" *ngSwitchCase="'select.nodepool'" [data]="fieldDatum" [form]="form" [disabled]="disabled" [class.extraBottomSpace]="!last && !!fieldDatum.hint"></app-select>
             <ng-container *ngSwitchDefault>

src/app/fields/form/form.component.ts

@@ -9,7 +9,7 @@ import { Parameter } from '../../../api';
 })
 export class FormComponent implements OnInit {
     // tslint:disable-next-line:variable-name
-    _fieldData = new Array<Parameter>();
+    _fieldData = new Array<Parameter|any>();
 
     form: FormGroup;
 

src/app/workspace/workspace-execute-dialog/workspace-execute-dialog.component.html

@@ -3,7 +3,6 @@
 
 <form [formGroup]="form">
     <div class="mr-12">
-
         <app-alert [alert]="alert" [autoDismiss]="false" class="d-block mt-3"></app-alert>
 
         <mat-form-field *ngIf="state !== 'no-templates'" class="mt-7 fix-mat-overflow w-100" appearance="outline">
@@ -24,7 +23,6 @@
                 [errors]="errors"
                 class="parameters mb-3 d-block">
         </app-form>
-        <mat-checkbox *ngIf="parameters" [formControl]="captureNode">Request all node resources</mat-checkbox>
         <div class="environment bg-primary-light op-rounded-regular mt-5">
             <div class="font-roboto-bold font-weight-bold font-size-regular">Environment variables</div>
             <div class="mt-1 font-roboto font-size-regular color-black">

src/app/workspace/workspace-execute-dialog/workspace-execute-dialog.component.ts

@@ -93,7 +93,19 @@ export class WorkspaceExecuteDialogComponent implements OnInit {
 
   createAndRun() {
     const formattedParameters = [];
+
     for (const parameter of this.parameters) {
+      if (parameter.name === 'nodeInfo') {
+        const fakeParam = parameter as any;
+
+        fakeParam.nodePool.value = fakeParam.nodePool.value.toString();
+        formattedParameters.push(fakeParam.nodePool);
+
+        this.captureNode.setValue(fakeParam.captureNode.value);
+
+        continue;
+      }
+
       // convert all the parameters to string
       parameter.value = parameter.value.toString();
       formattedParameters.push(parameter);
@@ -139,7 +151,28 @@ export class WorkspaceExecuteDialogComponent implements OnInit {
 
           this.workspaceTemplateService.generateWorkspaceTemplateWorkflowTemplate(namespace, 'generated', res)
               .subscribe(generatedRes => {
-                this.parameters = WorkflowExecuteDialogComponent.pluckParameters(generatedRes.manifest);
+                const parameters = WorkflowExecuteDialogComponent.pluckParameters(generatedRes.manifest);
+                const nodePoolIndex = parameters.findIndex((value => value.name === 'sys-node-pool'));
+
+                const nodePoolParameter = parameters[nodePoolIndex];
+                const captureNodeParamter: Parameter = {
+                  name: 'captureNode',
+                  displayName: 'Request all node resources',
+                  type: 'input.checkbox',
+                  value: 'true',
+                };
+
+                const combinedParameter = {
+                  name: 'nodeInfo',
+                  displayName: 'Node information',
+                  type: 'nodeInfo',
+                  nodePool: nodePoolParameter,
+                  captureNode: captureNodeParamter
+                };
+
+                parameters.splice(nodePoolIndex, 1, combinedParameter);
+
+                this.parameters = parameters;
               });
         });
   }

src/styles/flex-styles.scss

@@ -52,6 +52,10 @@
   flex-shrink: 0;
 }
 
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
 .flex-row-reverse {
   flex-direction: row-reverse;
 }

src/styles/styles.scss

@@ -74,6 +74,10 @@ $spacer: 0.25rem;
   }
 }
 
+.mt-0 {
+  margin-top: 0 !important;
+}
+
 .mb-0 {
   margin-bottom: 0 !important;
 }