mgr/dashboard: carbonize Cluster > Hosts form

Fixes: https://tracker.ceph.com/issues/68264

Signed-off-by: Dnyaneshwari Talwekar <[email protected]>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts

@@ -9,7 +9,9 @@ import {
   CheckboxModule,
   ButtonModule,
   GridModule,
-  ProgressIndicatorModule
+  ProgressIndicatorModule,
+  InputModule,
+  ModalModule
 } from 'carbon-components-angular';
 
 import { TreeModule } from '@circlon/angular-tree-component';
@@ -102,7 +104,9 @@ import { MultiClusterDetailsComponent } from './multi-cluster/multi-cluster-deta
     CheckboxModule,
     GridModule,
     ProgressIndicatorModule,
-    ButtonModule
+    ButtonModule,
+    InputModule,
+    ModalModule
   ],
   declarations: [
     HostsComponent,

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html

@@ -1,108 +1,104 @@
-<cd-modal [pageURL]="pageURL"
-          [modalRef]="activeModal">
-  <span class="modal-title"
-        i18n>{{ action | titlecase }} {{ resource | upperFirst }}</span>
-
-  <ng-container class="modal-content">
-
-    <div *cdFormLoading="loading">
-      <form name="hostForm"
-            #formDir="ngForm"
-            [formGroup]="hostForm"
-            novalidate>
-
-        <div class="modal-body">
-
-          <!-- Hostname -->
-          <div class="form-group row">
-            <label class="cd-col-form-label required"
-                   for="hostname">
-            <ng-container i18n>Hostname</ng-container>
-            <cd-helper>
-              <p i18n>To add multiple hosts at once, you can enter:</p>
-              <ul>
-                <li i18n>a comma-separated list of hostnames <samp>(e.g.: example-01,example-02,example-03)</samp>,</li>
-                <li i18n>a range expression <samp>(e.g.: example-[01-03].ceph)</samp>,</li>
-                <li i18n>a comma separated range expression <samp>(e.g.: example-[01-05].lab.com,example2-[1-4].lab.com,example3-[001-006].lab.com)</samp></li>
-              </ul>
-            </cd-helper>
-            </label>
-            <div class="cd-col-form-input">
-              <input class="form-control"
-                     type="text"
-                     placeholder="mon-123"
-                     id="hostname"
-                     name="hostname"
-                     formControlName="hostname"
-                     autofocus
-                     (keyup)="checkHostNameValue()">
-              <span class="invalid-feedback"
-                    *ngIf="hostForm.showError('hostname', formDir, 'required')"
-                    i18n>This field is required.</span>
-              <span class="invalid-feedback"
-                    *ngIf="hostForm.showError('hostname', formDir, 'uniqueName')"
-                    i18n>The chosen hostname is already in use.</span>
-            </div>
-          </div>
-
-          <!-- Address -->
-          <div class="form-group row"
-               *ngIf="!hostPattern">
-            <label class="cd-col-form-label"
-                   for="addr"
-                   i18n>Network address</label>
-            <div class="cd-col-form-input">
-              <input class="form-control"
-                     type="text"
-                     placeholder="192.168.0.1"
-                     id="addr"
-                     name="addr"
-                     formControlName="addr">
-              <span class="invalid-feedback"
-                    *ngIf="hostForm.showError('addr', formDir, 'pattern')"
-                    i18n>The value is not a valid IP address.</span>
-            </div>
-          </div>
-
-          <!-- Labels -->
-          <div class="form-group row">
-            <label i18n
-                   for="labels"
-                   class="cd-col-form-label">Labels</label>
-            <div class="cd-col-form-input">
-              <cd-select-badges id="labels"
-                                [data]="hostForm.controls.labels.value"
-                                [options]="labelsOption"
-                                [customBadges]="true"
-                                [messages]="messages">
-              </cd-select-badges>
-            </div>
-          </div>
-
-          <!-- Maintenance Mode -->
-          <div class="form-group row"
-               *ngIf="!hideMaintenance">
-            <div class="cd-col-form-offset">
-              <div class="custom-control custom-checkbox">
-                <input class="custom-control-input"
-                       id="maintenance"
-                       type="checkbox"
-                       formControlName="maintenance">
-                <label class="custom-control-label"
-                       for="maintenance"
-                       i18n>Maintenance Mode</label>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="modal-footer">
-          <cd-form-button-panel (submitActionEvent)="submit()"
-                                [form]="hostForm"
-                                [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
-                                wrappingClass="text-right"></cd-form-button-panel>
-        </div>
-      </form>
+<cds-modal size="md"
+           [open]="open"
+           [hasScrollingContent]="true"
+           (overlaySelected)="closeModal()">
+  <cds-modal-header (closeSelect)="closeModal()">
+    <h3 cdsModalHeaderHeading
+        i18n>{{ action | titlecase }} {{ resource | upperFirst }}</h3>
+  </cds-modal-header>
+  <ng-container *cdFormLoading="loading">
+  <form name="hostForm"
+        #formDir="ngForm"
+        [formGroup]="hostForm"
+        novalidate>
+    <div cdsModalContent>
+      <!-- Hostname -->
+      <div class="form-item">
+        <cds-text-label label="Hostname"
+                        for="hostname"
+                        cdRequiredField="Hostname"
+                        [invalid]="!hostForm.controls.hostname.valid && hostForm.controls.hostname.dirty"
+                        [invalidText]="hostnameError"
+                        i18n>Hostname
+          <input cdsText
+                 type="text"
+                 placeholder="mon-123"
+                 id="hostname"
+                 name="hostname"
+                 formControlName="hostname"
+                 autofocus
+                 (keyup)="checkHostNameValue()">
+        </cds-text-label>
+        <ng-template #hostnameError>
+          <span *ngIf="hostForm.showError('hostname', formDir, 'required')"
+                class="invalid-feedback">
+            <ng-container i18n> This field is required. </ng-container>
+          </span>
+          <span *ngIf="hostForm.showError('hostname', formDir, 'uniqueName')"
+                class="invalid-feedback">
+            <ng-container i18n> The chosen hostname is already in use. </ng-container>
+          </span>
+        </ng-template>
+        <cd-help-text>
+          To add multiple hosts at once, you can enter:
+          <ul>
+            <li>a comma-separated list of hostnames <samp>(e.g.: example-01,example-02,example-03)</samp>,</li>
+            <li>a range expression <samp>(e.g.: example-[01-03].ceph)</samp>,</li>
+            <li>a comma separated range expression <samp>(e.g.: example-[01-05].lab.com,example2-[1-4].lab.com,example3-[001-006].lab.com)</samp></li>
+          </ul>
+        </cd-help-text>
+      </div>
+      <!-- Address -->
+      <div class="form-item"
+           *ngIf="!hostPattern">
+        <cds-text-label label="Network address"
+                        for="addr"
+                        i18n>Network address
+          <input cdsText
+                 type="text"
+                 placeholder="192.168.0.1"
+                 id="addr"
+                 name="addr"
+                 formControlName="addr"/>
+        </cds-text-label>
+        <ng-template #hostaddrError>
+          <span *ngIf="hostForm.showError('addr', formDir, 'pattern')">
+            <ng-container i18n> The value is not a valid IP address. </ng-container>
+          </span>
+        </ng-template>
+      </div>
+      <!-- Labels -->
+      <div class="form-item">
+        <cds-combo-box label="Labels"
+                       type="multi"
+                       selectionFeedback="top-after-reopen"
+                       for="labels"
+                       name="labels"
+                       formControlName="labels"
+                       placeholder="Select Labels..."
+                       i18n-placeholder
+                       [appendInline]="true"
+                       [items]="labelsOption"
+                       itemValueKey="value"
+                       id="labels"
+                       i18n>
+          <cds-dropdown-list></cds-dropdown-list>
+        </cds-combo-box>
+      </div>
+      <!-- Maintenance Mode -->
+      <div *ngIf="!hideMaintenance">
+        <cds-checkbox id="maintenance"
+                      type="checkbox"
+                      formControlName="maintenance"
+                      i18n>Maintenance Mode
+        </cds-checkbox>
+      </div>
     </div>
-  </ng-container>
-</cd-modal>
+    <cd-form-button-panel (submitActionEvent)="submit()"
+                          [form]="hostForm"
+                          [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                          [modalForm]="true">
+    </cd-form-button-panel>
+  </form>
+</ng-container>
+</cds-modal>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.spec.ts

@@ -10,6 +10,7 @@ import { LoadingPanelComponent } from '~/app/shared/components/loading-panel/loa
 import { SharedModule } from '~/app/shared/shared.module';
 import { configureTestBed, FormHelper } from '~/testing/unit-test-helper';
 import { HostFormComponent } from './host-form.component';
+import { InputModule, ModalModule } from 'carbon-components-angular';
 
 describe('HostFormComponent', () => {
   let component: HostFormComponent;
@@ -23,7 +24,9 @@ describe('HostFormComponent', () => {
         HttpClientTestingModule,
         RouterTestingModule,
         ReactiveFormsModule,
-        ToastrModule.forRoot()
+        ToastrModule.forRoot(),
+        InputModule,
+        ModalModule
       ],
       declarations: [HostFormComponent],
       providers: [NgbActiveModal]
@@ -45,7 +48,7 @@ describe('HostFormComponent', () => {
 
   it('should open the form in a modal', () => {
     const nativeEl = fixture.debugElement.nativeElement;
-    expect(nativeEl.querySelector('cd-modal')).not.toBe(null);
+    expect(nativeEl.querySelector('cds-modal')).not.toBe(null);
   });
 
   it('should validate the network address is valid', fakeAsync(() => {

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.ts

@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { UntypedFormControl, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
-
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ActivatedRoute, Router } from '@angular/router';
 import expand from 'brace-expansion';
 
 import { HostService } from '~/app/shared/api/host.service';
@@ -15,13 +13,15 @@ import { CdValidators } from '~/app/shared/forms/cd-validators';
 import { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
 import { FinishedTask } from '~/app/shared/models/finished-task';
 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'cd-host-form',
   templateUrl: './host-form.component.html',
   styleUrls: ['./host-form.component.scss']
 })
 export class HostFormComponent extends CdForm implements OnInit {
+  open: boolean = false;
   hostForm: CdFormGroup;
   action: string;
   resource: string;
@@ -46,17 +46,16 @@ export class HostFormComponent extends CdForm implements OnInit {
     private actionLabels: ActionLabelsI18n,
     private hostService: HostService,
     private taskWrapper: TaskWrapperService,
-    public activeModal: NgbActiveModal
+    private route: ActivatedRoute,
+    private location: Location
   ) {
     super();
     this.resource = $localize`host`;
     this.action = this.actionLabels.ADD;
   }
 
   ngOnInit() {
-    if (this.router.url.includes('hosts')) {
-      this.pageURL = 'hosts';
-    }
+    this.open = this.route.outlet === 'modal';
     this.createForm();
     const hostContext = new CdTableFetchDataContext(() => undefined);
     this.hostService.list(hostContext.toParams(), 'false').subscribe((resp: any[]) => {
@@ -69,7 +68,7 @@ export class HostFormComponent extends CdForm implements OnInit {
     this.hostService.getLabels().subscribe((resp: string[]) => {
       const uniqueLabels = new Set(resp.concat(this.hostService.predefinedLabels));
       this.labelsOption = Array.from(uniqueLabels).map((label) => {
-        return { enabled: true, name: label, selected: false, description: null };
+        return { enabled: true, name: label, content: label, selected: false, description: null };
       });
     });
   }
@@ -94,7 +93,7 @@ export class HostFormComponent extends CdForm implements OnInit {
         validators: [CdValidators.ip()]
       }),
       labels: new UntypedFormControl([]),
-      maintenance: new UntypedFormControl(false)
+      maintenance: new UntypedFormControl()
     });
   }
 
@@ -166,9 +165,13 @@ export class HostFormComponent extends CdForm implements OnInit {
           complete: () => {
             this.pageURL === 'hosts'
               ? this.router.navigate([this.pageURL, { outlets: { modal: null } }])
-              : this.activeModal.close();
+              : this.location.back();
           }
         });
     });
   }
+
+  closeModal(): void {
+    this.location.back();
+  }
 }

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts

@@ -29,7 +29,6 @@ import { Permissions } from '~/app/shared/models/permissions';
 import { EmptyPipe } from '~/app/shared/pipes/empty.pipe';
 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
 import { CdTableServerSideService } from '~/app/shared/services/cd-table-server-side.service';
-import { ModalService } from '~/app/shared/services/modal.service';
 import { NotificationService } from '~/app/shared/services/notification.service';
 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
 import { URLBuilderService } from '~/app/shared/services/url-builder.service';
@@ -125,7 +124,6 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
     private emptyPipe: EmptyPipe,
     private hostService: HostService,
     private actionLabels: ActionLabelsI18n,
-    private modalService: ModalService,
     private taskWrapper: TaskWrapperService,
     private router: Router,
     private notificationService: NotificationService,
@@ -153,7 +151,7 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
         click: () =>
           this.router.url.includes('/hosts')
             ? this.router.navigate([BASE_URL, { outlets: { modal: [URLVerbs.ADD] } }])
-            : (this.bsModalRef = this.modalService.show(HostFormComponent, {
+            : (this.bsModalRef = this.cdsModalService.show(HostFormComponent, {
                 hideMaintenance: this.hideMaintenance
               })),
         disable: (selection: CdTableSelection) => this.getDisable('add', selection)