Merge pull request ceph#51591 from rhcs-dashboard/add-helpers-pool-compression

mgr/dashboard: add helpers for compression in pool form

Reviewed-by: Pedro Gonzalez Gomez <[email protected]>
Reviewed-by: afreen23 <NOT@FOUND>
Reviewed-by: Ankush Behl <[email protected]>
Reviewed-by: Nizamudeen A <[email protected]>
Reviewed-by: Pere Diaz Bou <[email protected]>

Author: avanthakkar

src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html

@@ -421,9 +421,10 @@
 
           <!-- Compression Mode -->
           <div class="form-group row">
-            <label i18n
-                   class="cd-col-form-label"
-                   for="mode">Mode</label>
+            <label class="cd-col-form-label"
+                   for="mode"
+                   i18n>Mode
+            </label>
             <div class="cd-col-form-input">
               <select class="form-select"
                       id="mode"
@@ -434,14 +435,16 @@
                   {{ mode }}
                 </option>
               </select>
+              <cd-help-text>Policy used for compression algorithm</cd-help-text>
             </div>
           </div>
           <div *ngIf="hasCompressionEnabled()">
             <!-- Compression algorithm selection -->
             <div class="form-group row">
-              <label i18n
-                     class="cd-col-form-label"
-                     for="algorithm">Algorithm</label>
+              <label class="cd-col-form-label"
+                     for="algorithm">
+                <ng-container i18n>Algorithm</ng-container>
+              </label>
               <div class="cd-col-form-input">
                 <select class="form-select"
                         id="algorithm"
@@ -458,14 +461,18 @@
                     {{ algorithm }}
                   </option>
                 </select>
+                <cd-help-text>
+                  <span i18n>Compression algorithm used</span>
+                </cd-help-text>
               </div>
             </div>
 
             <!-- Compression min blob size -->
             <div class="form-group row">
-              <label i18n
-                     class="cd-col-form-label"
-                     for="minBlobSize">Minimum blob size</label>
+              <label class="cd-col-form-label"
+                     for="minBlobSize">
+                <ng-container i18n>Minimum blob size</ng-container>
+              </label>
               <div class="cd-col-form-input">
                 <input id="minBlobSize"
                        name="minBlobSize"
@@ -477,6 +484,9 @@
                        placeholder="e.g., 128KiB"
                        defaultUnit="KiB"
                        cdDimlessBinary>
+                <cd-help-text>
+                  <span i18n>Chunks smaller than Minimum blob size are never compressed</span>
+                </cd-help-text>
                 <span class="invalid-feedback"
                       *ngIf="form.showError('minBlobSize', formDir, 'min')"
                       i18n>Value should be greater than 0</span>
@@ -491,9 +501,10 @@
 
             <!-- Compression max blob size -->
             <div class="form-group row">
-              <label i18n
-                     class="cd-col-form-label"
-                     for="maxBlobSize">Maximum blob size</label>
+              <label class="cd-col-form-label"
+                     for="maxBlobSize">
+                <ng-container i18n>Maximum blob size</ng-container>
+              </label>
               <div class="cd-col-form-input">
                 <input id="maxBlobSize"
                        type="text"
@@ -504,6 +515,9 @@
                        placeholder="e.g., 512KiB"
                        defaultUnit="KiB"
                        cdDimlessBinary>
+                <cd-help-text>
+                  <span i18n>Chunks larger than `Maximum Blob Size` are broken into smaller blobs of size mentioned before being compressed.</span>
+                </cd-help-text>
                 <span class="invalid-feedback"
                       *ngIf="form.showError('maxBlobSize', formDir, 'min')"
                       i18n>Value should be greater than 0</span>
@@ -518,9 +532,10 @@
 
             <!-- Compression ratio -->
             <div class="form-group row">
-              <label i18n
-                     class="cd-col-form-label"
-                     for="ratio">Ratio</label>
+              <label class="cd-col-form-label"
+                     for="ratio">
+                <ng-container i18n>Ratio</ng-container>
+              </label>
               <div class="cd-col-form-input">
                 <input id="ratio"
                        name="ratio"
@@ -529,9 +544,10 @@
                        min="0"
                        max="1"
                        step="0.1"
-                       class="form-control"
-                       i18n-placeholder
-                       placeholder="Compression ratio">
+                       class="form-control">
+                <cd-help-text>
+                  <span i18n>The ratio of the size of the data chunk after compression relative to the original size must be at least this small in order to store the compressed version</span>
+                </cd-help-text>
                 <span class="invalid-feedback"
                       *ngIf="form.showError('ratio', formDir, 'min') || form.showError('ratio', formDir, 'max')"
                       i18n>Value should be between 0.0 and 1.0</span>
@@ -550,11 +566,6 @@
             <label class="cd-col-form-label"
                    for="max_bytes">
               <ng-container i18n>Max bytes</ng-container>
-              <cd-helper>
-                <span i18n>Leave it blank or specify 0 to disable this quota.</span>
-                <br>
-                <span i18n>A valid quota should be greater than 0.</span>
-              </cd-helper>
             </label>
             <div class="cd-col-form-input">
               <input class="form-control"
@@ -566,6 +577,11 @@
                      placeholder="e.g., 10GiB"
                      defaultUnit="GiB"
                      cdDimlessBinary>
+              <cd-help-text>
+                <span i18n>Leave it blank or specify 0 to disable this quota.</span>
+                <br>
+                <span i18n>A valid quota should be greater than 0.</span>
+              </cd-help-text>
               <span *ngIf="form.showError('max_bytes', formDir, 'pattern')"
                     class="invalid-feedback"
                     i18n>Size must be a number or in a valid format. eg: 5 GiB</span>
@@ -577,11 +593,6 @@
             <label class="cd-col-form-label"
                    for="max_objects">
               <ng-container i18n>Max objects</ng-container>
-              <cd-helper>
-                <span i18n>Leave it blank or specify 0 to disable this quota.</span>
-                <br>
-                <span i18n>A valid quota should be greater than 0.</span>
-              </cd-helper>
             </label>
             <div class="cd-col-form-input">
               <input class="form-control"
@@ -590,6 +601,11 @@
                      name="max_objects"
                      type="number"
                      formControlName="max_objects">
+              <cd-help-text>
+                <span i18n>Leave it blank or specify 0 to disable this quota.</span>
+                <br>
+                <span i18n>A valid quota should be greater than 0.</span>
+              </cd-help-text>
               <span class="invalid-feedback"
                     *ngIf="form.showError('max_objects', formDir, 'min')"
                     i18n>The value should be greater or equal to 0</span>

src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts

@@ -83,6 +83,7 @@ export class PoolFormComponent extends CdForm implements OnInit {
   crushUsage: string[] = undefined; // Will only be set if a rule is used by some pool
   ecpUsage: string[] = undefined; // Will only be set if a rule is used by some pool
   crushRuleMaxSize = 10;
+  DEFAULT_RATIO = 0.875;
 
   private modalSubscription: Subscription;
 
@@ -128,7 +129,7 @@ export class PoolFormComponent extends CdForm implements OnInit {
       maxBlobSize: new UntypedFormControl('', {
         updateOn: 'blur'
       }),
-      ratio: new UntypedFormControl('', {
+      ratio: new UntypedFormControl(this.DEFAULT_RATIO, {
         updateOn: 'blur'
       })
     });

src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.ts

@@ -121,7 +121,7 @@ export class PoolListComponent extends ListWithDetails implements OnInit {
       {
         prop: 'pool_name',
         name: $localize`Name`,
-        flexGrow: 4,
+        flexGrow: 2,
         cellTransformation: CellTemplate.executing
       },
       {