1 files changed, 107 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html
new file mode 100644
index 000000000..66fe42f7f
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html
@@ -0,0 +1,107 @@
+<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">
+            <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>
+    </div>
+  </ng-container>
+</cd-modal>