import 15.2.0 Octopus source

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / cluster / configuration / configuration-form / configuration-form.component.html

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
index 30acbc054ebf0d3ada07f8ab5c6dbc6823e1e832..3be3ac9789a55ef933fbe7dd3eb60be7a0b02499 100644 (file)
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
@@ -1,22 +1,19 @@
-<div class="col-sm-12 col-lg-6">
+<div class="cd-col-form">
   <form name="configForm"
-        class="form-horizontal"
         #formDir="ngForm"
         [formGroup]="configForm"
         novalidate>
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h3 class="panel-title">
-          <ng-container i18n>Edit</ng-container> {{ configForm.getValue('name') }}
-        </h3>
+    <div class="card">
+      <div class="card-header">
+        <ng-container i18>Edit</ng-container> {{ configForm.getValue('name') }}
       </div>
-      <div class="panel-body">
 
+      <div class="card-body">
         <!-- Name -->
-        <div class="form-group">
+        <div class="form-group row">
           <label i18n
-                 class="control-label col-sm-3">Name</label>
-          <div class="col-sm-9">
+                 class="cd-col-form-label">Name</label>
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    id="name"
@@ -26,11 +23,11 @@
         </div>
 
         <!-- Description -->
-        <div class="form-group"
+        <div class="form-group row"
              *ngIf="configForm.getValue('desc')">
           <label i18n
-                 class="control-label col-sm-3">Description</label>
-          <div class="col-sm-9">
+                 class="cd-col-form-label">Description</label>
+          <div class="cd-col-form-input">
             <textarea class="form-control resize-vertical"
                       id="desc"
                       formControlName="desc"
@@ -40,11 +37,11 @@
         </div>
 
         <!-- Long description -->
-        <div class="form-group"
+        <div class="form-group row"
              *ngIf="configForm.getValue('long_desc')">
           <label i18n
-                 class="control-label col-sm-3">Long description</label>
-          <div class="col-sm-9">
+                 class="cd-col-form-label">Long description</label>
+          <div class="cd-col-form-input">
             <textarea class="form-control resize-vertical"
                       id="long_desc"
                       formControlName="long_desc"
@@ -54,11 +51,11 @@
         </div>
 
         <!-- Default -->
-        <div class="form-group"
+        <div class="form-group row"
              *ngIf="configForm.getValue('default') !== ''">
           <label i18n
-                 class="control-label col-sm-3">Default</label>
-          <div class="col-sm-9">
+                 class="cd-col-form-label">Default</label>
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    id="default"
@@ -68,11 +65,11 @@
         </div>
 
         <!-- Daemon default -->
-        <div class="form-group"
+        <div class="form-group row"
              *ngIf="configForm.getValue('daemon_default') !== ''">
           <label i18n
-                 class="control-label col-sm-3">Daemon default</label>
-          <div class="col-sm-9">
+                 class="cd-col-form-label">Daemon default</label>
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="text"
                    id="daemon_default"
@@ -82,31 +79,29 @@
         </div>
 
         <!-- Services -->
-        <div class="form-group"
+        <div class="form-group row"
              *ngIf="configForm.getValue('services').length > 0">
           <label i18n
-                 class="control-label col-sm-3">Services</label>
-          <div class="col-sm-9">
+                 class="cd-col-form-label">Services</label>
+          <div class="cd-col-form-input">
             <span *ngFor="let service of configForm.getValue('services')"
                   class="form-component-badge">
-              <span class="badge badge-pill badge-primary">{{ service }}</span>
+              <span class="badge badge-dark">{{ service }}</span>
             </span>
           </div>
         </div>
 
         <!-- Values -->
-        <div class="col-sm-12"
-             formGroupName="values">
+        <div formGroupName="values">
           <h2 i18n
-              class="page-header">Values</h2>
-          <div class="row"
-               *ngFor="let section of availSections">
-            <div class="form-group"
+              class="cd-header">Values</h2>
+          <ng-container *ngFor="let section of availSections">
+            <div class="form-group row"
                  *ngIf="type === 'bool'">
-              <label class="control-label col-sm-3"
+              <label class="cd-col-form-label"
                      [for]="section">{{ section }}
               </label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <select id="pool"
                         name="pool"
                         class="form-control custom-select"
@@ -120,43 +115,42 @@
                 </select>
               </div>
             </div>
-            <div class="form-group"
-                 [ngClass]="{'has-error': configForm.showError(section, formDir)}"
+
+            <div class="form-group row"
                  *ngIf="type !== 'bool'">
-              <label class="control-label col-sm-3"
+              <label class="cd-col-form-label"
                      [for]="section">{{ section }}
               </label>
-              <div class="col-sm-9">
+              <div class="cd-col-form-input">
                 <input class="form-control"
                        [type]="inputType"
                        [id]="section"
                        [placeholder]="humanReadableType"
                        [formControlName]="section"
                        [step]="getStep(type, this.configForm.getValue(section))">
-                <span class="help-block"
+                <span class="invalid-feedback"
                       *ngIf="configForm.showError(section, formDir, 'pattern')">
                   {{ patternHelpText }}
                 </span>
-                <span class="help-block"
+                <span class="invalid-feedback"
                       *ngIf="configForm.showError(section, formDir, 'invalidUuid')">
                   {{ patternHelpText }}
                 </span>
-                <span class="help-block"
+                <span class="invalid-feedback"
                       *ngIf="configForm.showError(section, formDir, 'max')"
                       i18n>The entered value is too high! It must not be greater than {{ maxValue }}.</span>
-                <span class="help-block"
+                <span class="invalid-feedback"
                       *ngIf="configForm.showError(section, formDir, 'min')"
                       i18n>The entered value is too low! It must not be lower than {{ minValue }}.</span>
               </div>
             </div>
-          </div>
+          </ng-container>
         </div>
       </div>
       <!-- Footer -->
-      <div class="panel-footer">
+      <div class="card-footer">
         <div class="button-group text-right">
           <cd-submit-button [form]="formDir"
-                            type="button"
                             (submitAction)="submit()">
             <span i18n>Save</span>
           </cd-submit-button>