From 3d1b5e55bbe327446fbbbd0e417fc800e6703c99 Mon Sep 17 00:00:00 2001
From: avanthakkar <avanjohn@gmail.com>
Date: Fri, 19 May 2023 17:07:28 +0530
Subject: [PATCH] mgr/dashboard: add helpers for compression in pool form

Fixes: https://tracker.ceph.com/issues/61297
Signed-off-by: avanthakkar <avanjohn@gmail.com>

Adding helpers for compression mode, algorithm, min/max blob size and
compression ratio which is set to 0.875 as default.
---
 .../pool/pool-form/pool-form.component.html   | 72 +++++++++++--------
 .../pool/pool-form/pool-form.component.ts     |  3 +-
 .../pool/pool-list/pool-list.component.ts     |  2 +-
 3 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
index 13103da324aab..6a37c6a0e58c1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
+++ b/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>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
index c91ca76536725..a3f6b6fd16e4b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
+++ b/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'
       })
     });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.ts
index ba2d9cbe521b1..d86689c12142b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.ts
+++ b/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
       },
       {
-- 
2.39.5