Added dropdown for fqdn and ip address. (#5724)

* Added dropdown for fqdn and ip address. Signed-off-by: Himanshi Chhabra <hchhabra@progress.com> * Added review comments changes. Signed-off-by: Himanshi Chhabra <hchhabra@progress.com> * Added dropdown in update server tab. Signed-off-by: Himanshi Chhabra <hchhabra@progress.com> * Added review comments changes. Signed-off-by: Himanshi Chhabra <hchhabra@progress.com> * Added css changes for dropdown. Signed-off-by: Himanshi Chhabra <hchhabra@progress.com> * Added css changes. Signed-off-by: Himanshi Chhabra <hchhabra@progress.com>
chef · Sep 17, 2021 · 44b930f · 44b930f
1 parent d010a66
commit 44b930f
Show file tree

Hide file tree

Showing 15 changed files with 317 additions and 115 deletions.
diff --git a/components/automate-ui/src/app/entities/servers/server.effects.ts b/components/automate-ui/src/app/entities/servers/server.effects.ts
@@ -99,10 +99,14 @@ export class ServerEffects {
     this.actions$.pipe(
     ofType(ServerActionTypes.CREATE_FAILURE),
     filter(({ payload }: CreateServerFailure) => payload.status !== HttpStatus.CONFLICT),
-    map(({ payload }: CreateServerFailure) => new CreateNotification({
+    map(({ payload }: CreateServerFailure) => {
+      const msg = payload.status ===
+        HttpStatus.TIME_OUT_ERROR ? 'Gateway Time out ' : payload.error.error;
+      return new CreateNotification({
         type: Type.error,
-        message: `Could not create server: ${payload.error.error || payload}`
-      }))));
+        message: `Could not create server: ${msg || payload}`
+      });
+    })));
 
   updateServer$ = createEffect(() =>
     this.actions$.pipe(

diff --git a/...ate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.html b/...ate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.html
@@ -63,52 +63,75 @@
               Name is required.
             </chef-error>
           </chef-form-field>
-          <chef-form-field>
-            <label>
-              <span class="label">FQDN <span aria-hidden="true">*</span></span>
-              <input
-                chefInput
-                formControlName="fqdn"
-                type="text"
-                [resetOrigin]="saveSuccessful"
-                autocomplete="off"
-                data-cy="update-server-fqdn">
-            </label>
-            <chef-error
-              *ngIf="updateServerForm.get('fqdn').hasError('required') && updateServerForm.get('fqdn').dirty">
-              FQDN is required.
-            </chef-error>
-            <chef-error
-              *ngIf="updateServerForm.get('fqdn').hasError('pattern') && updateServerForm.get('fqdn').dirty">
-              FQDN is invalid.
-            </chef-error>
-          </chef-form-field>
-          <chef-form-field>
+        </form>
+        <div class="input-margin">
+          <chef-form-field id="create-type">
             <label>
-              <span class="label">IP Address <span aria-hidden="true">*</span></span>
-              <input
-                chefInput
-                formControlName="ip_address"
-                type="text"
-                [resetOrigin]="saveSuccessful"
-                autocomplete="off"
-                data-cy="update-server-ip-address">
+              <span class="label">Type <span aria-hidden="true">*</span></span>
+              <div class="version-dropdown">
+                <chef-select #li [value]="selected" (change)="updateFormDisplay(li.value)" data-cy="type">
+                  <chef-option value="fqdn">FQDN</chef-option>
+                  <chef-option value="ip">IP Address</chef-option>
+                </chef-select>
+              </div>
             </label>
-            <chef-error
-              *ngIf="updateServerForm.get('ip_address').hasError('required') && updateServerForm.get('ip_address').dirty">
-              IP Address is required.
-            </chef-error>
-            <chef-error
-              *ngIf="updateServerForm.get('ip_address').hasError('pattern') && updateServerForm.get('ip_address').dirty">
-              IP Address is invalid.
-            </chef-error>
           </chef-form-field>
+        </div>
+        <form [formGroup]="fqdnForm">
+          <div class="input-margin" *ngIf="selected === 'fqdn'">
+            <chef-form-field>
+              <label>
+                <span class="label">FQDN <span aria-hidden="true">*</span></span>
+                <input
+                  chefInput
+                  formControlName="fqdn"
+                  type="text"
+                  [resetOrigin]="saveSuccessful"
+                  autocomplete="off"
+                  data-cy="update-server-fqdn"
+                  placeholder="FQDN">
+              </label>
+              <chef-error
+                *ngIf="selected === 'fqdn' && fqdnForm.get('fqdn').hasError('required') && fqdnForm.get('fqdn').dirty">
+                FQDN is required.
+              </chef-error>
+              <chef-error
+                *ngIf="fqdnForm.get('fqdn').hasError('pattern') ">
+                FQDN is invalid.
+              </chef-error>
+            </chef-form-field>
+          </div>
+        </form>
+        <form [formGroup]="ipForm">
+          <div class="input-margin" *ngIf="selected === 'ip'">
+            <chef-form-field>
+              <label>
+                <span class="label">IP Address <span aria-hidden="true">*</span></span>
+                <input
+                  chefInput
+                  formControlName="ip_address"
+                  type="text"
+                  [resetOrigin]="saveSuccessful"
+                  autocomplete="off"
+                  data-cy="update-server-ip-address"
+                  placeholder="IP Address">
+              </label>
+              <chef-error
+                *ngIf="ipForm.get('ip_address').hasError('required') && ipForm.get('ip_address').dirty">
+                IP Address is required.
+              </chef-error>
+              <chef-error
+                *ngIf="ipForm.get('ip_address').hasError('pattern')">
+                IP Address is invalid.
+              </chef-error>
+            </chef-form-field>
+          </div>
           <div id="button-bar">
             <chef-button
               primary
               inline
               data-cy="save-button"
-              [disabled]="isLoading || !updateServerForm.valid || !updateServerForm.dirty || saveInProgress"
+              [disabled]="isLoading || !updateServerForm.valid || saveInProgress || (selected === 'fqdn') ? !fqdnForm?.valid : !ipForm?.valid"
               (click)="saveServer()">
               <chef-loading-spinner *ngIf="saveInProgress"></chef-loading-spinner>
               <span *ngIf="saveInProgress">Saving...</span>

diff --git a/...ate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.scss b/...ate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.scss
@@ -99,3 +99,47 @@ img {
 ::ng-deep chef-button button:focus {
   outline: none;
 }
+
+.version-dropdown {
+  color: $chef-primary-dark;
+  margin-bottom: 30px;
+
+  ::ng-deep label {
+    display: inline;
+    color: $chef-primary-dark;
+    font-size: 15px;
+    margin-right: 15px;
+  }
+
+  chef-select {
+    font-size: 14px;
+    font-weight: normal;
+  }
+
+  ::ng-deep chef-select .selected-value {
+    height: 45px;
+    width: 309px;
+    background: $chef-white;
+    padding: 1em;
+    border: 1px solid $chef-form-input;
+    box-sizing: border-box;
+    border-radius: 4px;
+  }
+
+  ::ng-deep chef-select chef-dropdown {
+    border: 1px solid $chef-key-tab;
+    box-sizing: border-box;
+    border-radius: 4px;
+  }
+
+  ::ng-deep chef-select chef-option {
+    height: 32px;
+    padding: 0.4em;
+  }
+
+  ::ng-deep chef-select .selected {
+    background: $chef-primary-bright;
+    border-radius: 4px;
+  }
+}
+
diff --git a/...-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.spec.ts b/...-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.spec.ts
@@ -199,8 +199,8 @@ describe('ChefServerDetailsComponent', () => {
 
     it('when all details are valid, it should update successfully', () => {
       component.updateServerForm.controls['name'].setValue(VALID_NAME);
-      component.updateServerForm.controls['fqdn'].setValue(VALID_FQDN);
-      component.updateServerForm.controls['ip_address'].setValue(VALID_IP);
+      component.fqdnForm.controls['fqdn'].setValue(VALID_FQDN);
+      component.ipForm.controls['ip_address'].setValue(VALID_IP);
 
       expect(component.updateServerForm.valid).toBeTrue();
       component.saveServer();
@@ -227,12 +227,12 @@ describe('ChefServerDetailsComponent', () => {
       ], function (description: string, input: string) {
         it(('when the fqdn ' + description), () => {
           component.updateServerForm.controls['name'].setValue('test');
-          component.updateServerForm.controls['ip_address'].setValue('1.2.3.4');
+          component.ipForm.controls['ip_address'].setValue('1.2.3.4');
 
-          component.updateServerForm.controls['fqdn'].setValue(input);
-          errors = component.updateServerForm.controls['fqdn'].errors || {};
+          component.fqdnForm.controls['fqdn'].setValue(input);
+          errors = component.fqdnForm.controls['fqdn'].errors || {};
 
-          expect(component.updateServerForm.valid).toBeFalsy();
+          expect(component.fqdnForm.valid).toBeFalsy();
           expect(errors['pattern']).toBeTruthy();
         });
       });
@@ -248,12 +248,12 @@ describe('ChefServerDetailsComponent', () => {
       ], function (description: string, input: string) {
         it(('when the ip address ' + description), () => {
           component.updateServerForm.controls['name'].setValue('test');
-          component.updateServerForm.controls['fqdn'].setValue('chef.internal');
+          component.fqdnForm.controls['fqdn'].setValue('chef.internal');
 
-          component.updateServerForm.controls['ip_address'].setValue(input);
-          errors = component.updateServerForm.controls['ip_address'].errors || {};
+          component.ipForm.controls['ip_address'].setValue(input);
+          errors = component.ipForm.controls['ip_address'].errors || {};
 
-          expect(component.updateServerForm.valid).toBeFalsy();
+          expect(component.ipForm.valid).toBeFalsy();
           expect(errors['pattern']).toBeTruthy();
         });
       });

diff --git a/...omate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.ts b/...omate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.ts
@@ -42,6 +42,8 @@ export class ChefServerDetailsComponent implements OnInit, OnDestroy {
   public tabValue: ChefServerTabName = 'orgs';
   public url: string;
   public updateServerForm: FormGroup;
+  public fqdnForm: FormGroup;
+  public ipForm: FormGroup;
   public orgForm: FormGroup;
   public createModalVisible = false;
   public creatingServerOrg = false;
@@ -56,6 +58,7 @@ export class ChefServerDetailsComponent implements OnInit, OnDestroy {
   public isLoading = true;
   private isDestroyed = new Subject<boolean>();
   public unassigned = ProjectConstants.UNASSIGNED_PROJECT_ID;
+  public selected = 'fqdn';
 
   constructor(
     private fb: FormBuilder,
@@ -86,11 +89,16 @@ export class ChefServerDetailsComponent implements OnInit, OnDestroy {
     });
 
     this.updateServerForm = this.fb.group({
-      name: ['', [Validators.required, Validators.pattern(Regex.patterns.NON_BLANK)]],
+      name: ['', [Validators.required, Validators.pattern(Regex.patterns.NON_BLANK)]]
+    });
+
+    this.fqdnForm = this.fb.group({
       fqdn: ['', [Validators.required,
         Validators.pattern(Regex.patterns.NON_BLANK),
         Validators.pattern(Regex.patterns.VALID_FQDN)
-      ]],
+      ]]
+    });
+    this.ipForm = this.fb.group({
       ip_address: ['', [Validators.required,
         Validators.pattern(Regex.patterns.NON_BLANK),
         Validators.pattern(Regex.patterns.VALID_IP_ADDRESS)
@@ -133,8 +141,8 @@ export class ChefServerDetailsComponent implements OnInit, OnDestroy {
       this.server = { ...ServerState };
       this.orgs = allOrgsState;
       this.updateServerForm.controls['name'].setValue(this.server.name);
-      this.updateServerForm.controls['fqdn'].setValue(this.server.fqdn);
-      this.updateServerForm.controls['ip_address'].setValue(this.server.ip_address);
+      this.fqdnForm.controls['fqdn'].setValue(this.server.fqdn);
+      this.ipForm.controls['ip_address'].setValue(this.server.ip_address);
       this.creatingServerOrg = false;
       this.orgsListLoading = false;
       this.closeCreateModal();
@@ -173,6 +181,8 @@ export class ChefServerDetailsComponent implements OnInit, OnDestroy {
       this.saveSuccessful = (state === EntityStatus.loadingSuccess);
       if (this.saveSuccessful) {
         this.updateServerForm.markAsPristine();
+        this.fqdnForm.markAsPristine();
+        this.ipForm.markAsPristine();
       }
     });
   }
@@ -187,6 +197,10 @@ export class ChefServerDetailsComponent implements OnInit, OnDestroy {
     this.router.navigate([this.url.split('#')[0]], { fragment: event.target.value });
   }
 
+  updateFormDisplay(id: string): void {
+    this.selected = id;
+  }
+
   public openCreateModal(): void {
     this.createModalVisible = true;
   }
@@ -237,8 +251,8 @@ export class ChefServerDetailsComponent implements OnInit, OnDestroy {
     const updatedServer = {
       id: this.server.id,
       name: this.updateServerForm.controls.name.value.trim(),
-      fqdn: this.updateServerForm.controls.fqdn.value.trim(),
-      ip_address: this.updateServerForm.controls.ip_address.value.trim()
+      fqdn: this.fqdnForm.controls.fqdn.value?.trim() || '',
+      ip_address: this.ipForm.controls.ip_address.value?.trim() || ''
     };
     this.store.dispatch(new UpdateServer({server: updatedServer}));
   }

diff --git a/...utomate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.html b/...utomate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.html
@@ -9,7 +9,9 @@
       <app-create-chef-server-modal 
         [visible]="createModalVisible" 
         [creating]="creatingChefServer"
-        [createForm]="createChefServerForm" 
+        [createForm]="createChefServerForm"
+        [fqdnForm]="fqdnForm"
+        [ipForm]="ipForm"
         (close)="closeCreateModal()" 
         [conflictErrorEvent]="conflictErrorEvent"
         (createClicked)="createChefServer()">

diff --git a/...mate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.spec.ts b/...mate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.spec.ts
@@ -135,20 +135,20 @@ describe('ChefServersListComponent', () => {
     it('opening create modal resets id, name, fqdn and ip_address to empty string', () => {
       component.createChefServerForm.controls['id'].setValue('any');
       component.createChefServerForm.controls['name'].setValue('any');
-      component.createChefServerForm.controls['fqdn'].setValue('any');
-      component.createChefServerForm.controls['ip_address'].setValue('any');
+      component.fqdnForm.controls['fqdn'].setValue('any');
+      component.ipForm.controls['ip_address'].setValue('any');
       component.openCreateModal();
       expect(component.createChefServerForm.controls['id'].value).toBe(null);
       expect(component.createChefServerForm.controls['name'].value).toBe(null);
-      expect(component.createChefServerForm.controls['fqdn'].value).toBe(null);
-      expect(component.createChefServerForm.controls['ip_address'].value).toBe(null);
+      expect(component.fqdnForm.controls['fqdn'].value).toBe(null);
+      expect(component.ipForm.controls['ip_address'].value).toBe(null);
     });
 
     it('on success, closes modal and adds new server', () => {
       component.createChefServerForm.controls['id'].setValue(server.id);
       component.createChefServerForm.controls['name'].setValue(server.name);
-      component.createChefServerForm.controls['fqdn'].setValue(server.fqdn);
-      component.createChefServerForm.controls['ip_address'].setValue(server.ip_address);
+      component.fqdnForm.controls['fqdn'].setValue(server.fqdn);
+      component.ipForm.controls['ip_address'].setValue(server.ip_address);
       component.createChefServer();
 
       store.dispatch(new CreateServerSuccess({ 'server': server }));
@@ -161,8 +161,8 @@ describe('ChefServersListComponent', () => {
       component.openCreateModal();
       component.createChefServerForm.controls['id'].setValue(server.id);
       component.createChefServerForm.controls['name'].setValue(server.name);
-      component.createChefServerForm.controls['fqdn'].setValue(server.fqdn);
-      component.createChefServerForm.controls['ip_address'].setValue(server.ip_address);
+      component.fqdnForm.controls['fqdn'].setValue(server.fqdn);
+      component.ipForm.controls['ip_address'].setValue(server.ip_address);
       component.createChefServer();
 
       const conflict = <HttpErrorResponse>{
@@ -180,8 +180,8 @@ describe('ChefServersListComponent', () => {
       component.openCreateModal();
       component.createChefServerForm.controls['id'].setValue(server.id);
       component.createChefServerForm.controls['name'].setValue(server.name);
-      component.createChefServerForm.controls['fqdn'].setValue(server.fqdn);
-      component.createChefServerForm.controls['ip_address'].setValue(server.ip_address);
+      component.fqdnForm.controls['fqdn'].setValue(server.fqdn);
+      component.ipForm.controls['ip_address'].setValue(server.ip_address);
       component.createChefServer();
 
       const error = <HttpErrorResponse>{
@@ -202,7 +202,7 @@ describe('ChefServersListComponent', () => {
       component.openCreateModal();
 
       let errors = {};
-      const fqdn = component.createChefServerForm.controls['fqdn'];
+      const fqdn = component.fqdnForm.controls['fqdn'];
       expect(fqdn.valid).toBeFalsy();
 
       // FQDN field is required