1 files changed, 110 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html
new file mode 100644
index 000000000..b952ce8d8
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html
@@ -0,0 +1,110 @@
+<div class="cd-col-form"
+     *cdFormLoading="loading">
+  <form name="mgrModuleForm"
+        #frm="ngForm"
+        [formGroup]="mgrModuleForm"
+        novalidate>
+    <div class="card">
+      <div class="card-header"
+           i18n>Edit Manager module</div>
+      <div class="card-body">
+        <div class="form-group row"
+             *ngFor="let moduleOption of moduleOptions | keyvalue">
+
+          <!-- Field label -->
+          <label class="cd-col-form-label"
+                 for="{{ moduleOption.value.name }}">
+            {{ moduleOption.value.name }}
+            <cd-helper *ngIf="moduleOption.value.long_desc || moduleOption.value.desc">
+              {{ moduleOption.value.long_desc || moduleOption.value.desc | upperFirst }}
+            </cd-helper>
+          </label>
+
+          <!-- Field control -->
+          <!-- bool -->
+          <div class="cd-col-form-input"
+               *ngIf="moduleOption.value.type === 'bool'">
+            <div class="custom-control custom-checkbox">
+              <input id="{{ moduleOption.value.name }}"
+                     type="checkbox"
+                     class="custom-control-input"
+                     formControlName="{{ moduleOption.value.name }}">
+              <label class="custom-control-label"
+                     for="{{ moduleOption.value.name }}"></label>
+            </div>
+          </div>
+
+          <!-- addr|str|uuid -->
+          <div class="cd-col-form-input"
+               *ngIf="['addr', 'str', 'uuid'].includes(moduleOption.value.type)">
+            <input id="{{ moduleOption.value.name }}"
+                   class="form-control"
+                   type="text"
+                   formControlName="{{ moduleOption.value.name }}"
+                   *ngIf="moduleOption.value.enum_allowed.length === 0">
+            <select id="{{ moduleOption.value.name }}"
+                    class="form-control"
+                    formControlName="{{ moduleOption.value.name }}"
+                    *ngIf="moduleOption.value.enum_allowed.length > 0">
+              <option *ngFor="let value of moduleOption.value.enum_allowed"
+                      [ngValue]="value">
+                {{ value }}
+              </option>
+            </select>
+            <span class="invalid-feedback"
+                  *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'invalidUuid')"
+                  i18n>The entered value is not a valid UUID, e.g.: 67dcac9f-2c03-4d6c-b7bd-1210b3a259a8</span>
+            <span class="invalid-feedback"
+                  *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'pattern')"
+                  i18n>The entered value needs to be a valid IP address.</span>
+          </div>
+
+          <!-- uint|int|size|secs -->
+          <div class="cd-col-form-input"
+               *ngIf="['uint', 'int', 'size', 'secs'].includes(moduleOption.value.type)">
+            <input id="{{ moduleOption.value.name }}"
+                   class="form-control"
+                   type="number"
+                   formControlName="{{ moduleOption.value.name }}"
+                   min="{{ moduleOption.value.min }}"
+                   max="{{ moduleOption.value.max }}">
+            <span class="invalid-feedback"
+                  *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'required')"
+                  i18n>This field is required.</span>
+            <span class="invalid-feedback"
+                  *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'max')"
+                  i18n>The entered value is too high! It must be lower or equal to {{ moduleOption.value.max }}.</span>
+            <span class="invalid-feedback"
+                  *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'min')"
+                  i18n>The entered value is too low! It must be greater or equal to {{ moduleOption.value.min }}.</span>
+            <span class="invalid-feedback"
+                  *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'pattern')"
+                  i18n>The entered value needs to be a number.</span>
+          </div>
+
+          <!-- float -->
+          <div class="cd-col-form-input"
+               *ngIf="moduleOption.value.type === 'float'">
+            <input id="{{ moduleOption.value.name }}"
+                   class="form-control"
+                   type="number"
+                   formControlName="{{ moduleOption.value.name }}">
+            <span class="invalid-feedback"
+                  *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'required')"
+                  i18n>This field is required.</span>
+            <span class="invalid-feedback"
+                  *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'pattern')"
+                  i18n>The entered value needs to be a number or decimal.</span>
+          </div>
+
+        </div>
+      </div>
+      <div class="card-footer">
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="mgrModuleForm"
+                              [submitText]="actionLabels.UPDATE"
+                              wrappingClass="text-right"></cd-form-button-panel>
+      </div>
+    </div>
+  </form>
+</div>