[UI] Allow assignment of dep policies during host edit

This change applies only for VRA. Screenshot: http://engweb.eng.vmware.com/~mshipkovenski/edit_host_dep_policy.png Change-Id: I77ae5b4dab9abb7fb02fc758a84b536abfe69160 Reviewed-on: http://bellevue-ci.eng.vmware.com:8080/19015 Upgrade-Verified: jenkins <[email protected]> Closures-Verified: jenkins <[email protected]> Bellevue-Verified: jenkins <[email protected]> CS-Verified: jenkins <[email protected]> Reviewed-by: Stanislav Hadjiiski <[email protected]>
dvirtosu · Oct 17, 2017 · 84ea8a0 · 84ea8a0
1 parent 5dc2d28
commit 84ea8a0
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 5 deletions.
diff --git a/ui/ng-app/src/app/components/dropdown/dropdown.component.ts b/ui/ng-app/src/app/components/dropdown/dropdown.component.ts
@@ -103,9 +103,22 @@ export class DropdownComponent implements OnInit, ControlValueAccessor {
   }
 
   writeValue(value: any) {
-    this._value = value;
-    if (this.credentialInput) {
-      this.credentialInput.setSelectedOption(value);
+    if (typeof value === 'string') { // assume it's documentSelfLink
+      if (!this._options) {
+        return;
+      }
+      var option = this._options.filter(option => {
+        return value === option.documentSelfLink;
+      })[0];
+      if (this.credentialInput && option) {
+        this._value = option;
+        this.credentialInput.setSelectedOption(option);
+      }
+    } else {
+      this._value = value;
+      if (this.credentialInput) {
+        this.credentialInput.setSelectedOption(value);
+      }
     }
   }
   registerOnChange(fn: any){

diff --git a/ui/ng-app/src/app/views/clusters/cluster-details/cluster-edit-host.component.html b/ui/ng-app/src/app/views/clusters/cluster-details/cluster-edit-host.component.html
@@ -45,6 +45,14 @@ <h3 class="modal-title">{{ "clusters.resources.editHost.title" | i18n }}</h3>
                         <span class="tooltip-content">{{ "clusters.edit.publicAddressDescription" | i18n }}</span>
                     </a>
                 </div>
+                <div class="form-group">
+                    <label for="deploymentPolicy">{{ "clusters.resources.addHost.deploymentPolicy" | i18n }}</label>
+                    <dropdown id="deploymentPolicy" formControlName="deploymentPolicy" [options]="deploymentPolicies"
+                              [title]="deploymentPoliciesTitle"
+                              [searchPlaceholder]="deploymentPoliciesSearchPlaceholder"
+                              ddClass="top-left">
+                    </dropdown>
+                </div>
             </section>
         </form>
     </div>

diff --git a/ui/ng-app/src/app/views/clusters/cluster-details/cluster-edit-host.component.ts b/ui/ng-app/src/app/views/clusters/cluster-details/cluster-edit-host.component.ts
@@ -32,6 +32,7 @@ export class ClusterEditHostComponent implements OnChanges {
     @Input() visible: boolean;
     @Input() host: any;
     @Input() credentials: any[] = [];
+    @Input() deploymentPolicies: any[] = [];
 
     isSavingHost: boolean;
     isVerifyingHost: boolean;
@@ -46,21 +47,39 @@ export class ClusterEditHostComponent implements OnChanges {
     editHostForm = new FormGroup({
         name: new FormControl(''),
         credentials: new FormControl(''),
-        publicAddress: new FormControl('')
+        publicAddress: new FormControl(''),
+        deploymentPolicy: new FormControl('')
     });
 
+    deploymentPoliciesTitle = I18n.t('dropdownSearchMenu.title', {
+        ns: 'base',
+        entity: I18n.t('app.deploymentPolicy.entity', {ns: 'base'})
+    } as I18n.TranslationOptions );
+
+    deploymentPoliciesSearchPlaceholder = I18n.t('dropdownSearchMenu.searchPlaceholder', {
+        ns: 'base',
+        entity: I18n.t('app.deploymentPolicy.entity', {ns: 'base'})
+    } as I18n.TranslationOptions );
+
     constructor(private ds: DocumentService) { }
 
     ngOnChanges(changes: SimpleChanges) {
         if (this.host) {
+
             this.editHostForm.get('name').setValue(Utils.getHostName(this.host));
+
             var authCredentialsLink = Utils.getCustomPropertyValue(this.host.customProperties, '__authCredentialsLink');
             if (authCredentialsLink) {
                 this.editHostForm.get('credentials').setValue(authCredentialsLink);
             }
+
             var publicAddress = Utils.getCustomPropertyValue(this.host.customProperties,
                 Constants.hosts.customProperties.publicAddress) || "";
             this.editHostForm.get('publicAddress').setValue(publicAddress);
+
+            var deploymentPolicyLink = Utils.getCustomPropertyValue(this.host.customProperties,
+                    Constants.hosts.customProperties.deploymentPolicyLink);
+            this.editHostForm.get('deploymentPolicy').setValue(deploymentPolicyLink);
         }
     }
 
@@ -111,6 +130,13 @@ export class ClusterEditHostComponent implements OnChanges {
         // allow ovewriting with empty value
         hostCopy.customProperties[Constants.hosts.customProperties.publicAddress] = formInput.publicAddress || "";
 
+        if (formInput.deploymentPolicy) {
+            hostCopy.customProperties[Constants.hosts.customProperties.deploymentPolicyLink] =
+                    formInput.deploymentPolicy.documentSelfLink;
+        } else {
+            delete hostCopy.customProperties[Constants.hosts.customProperties.deploymentPolicyLink];
+        }
+
         return hostCopy;
     }
 

diff --git a/ui/ng-app/src/app/views/clusters/cluster-details/cluster-resources.component.html b/ui/ng-app/src/app/views/clusters/cluster-details/cluster-resources.component.html
@@ -104,4 +104,5 @@
                        [visible]="showEditHost"
                        [credentials]="credentialsList"
                        (onCancel)="onEditHostCanceled()"
-                       (onChange)="onHostEdited()"></app-cluster-edit-host>
+                       (onChange)="onHostEdited()"
+                       [deploymentPolicies]="deploymentPolicies"></app-cluster-edit-host>