From: Tiago Melo <tmelo@suse.com>
Date: Tue, 2 Apr 2019 14:43:56 +0000 (+0000)
Subject: mgr/dashboard: Replace awesome-boostrap-checkbox with bootstrap
X-Git-Tag: v15.1.0~2239^2~2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=adaac1f3aca9538a1c6bf44248496d594931148e;p=ceph.git

mgr/dashboard: Replace awesome-boostrap-checkbox with bootstrap

Fixes: http://tracker.ceph.com/issues/36400

Signed-off-by: Tiago Melo <tmelo@suse.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json
index afd2847f93ad..350dee8d7912 100644
--- a/src/pybind/mgr/dashboard/frontend/package-lock.json
+++ b/src/pybind/mgr/dashboard/frontend/package-lock.json
@@ -2997,11 +2997,6 @@
         }
       }
     },
-    "awesome-bootstrap-checkbox": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/awesome-bootstrap-checkbox/-/awesome-bootstrap-checkbox-1.0.1.tgz",
-      "integrity": "sha1-2rEBRrYAESmrCg7B5Uu3fGwwRXo="
-    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json
index 9d17b7b9b110..cc659f667736 100644
--- a/src/pybind/mgr/dashboard/frontend/package.json
+++ b/src/pybind/mgr/dashboard/frontend/package.json
@@ -67,7 +67,6 @@
     "@auth0/angular-jwt": "2.1.0",
     "@ngx-translate/i18n-polyfill": "1.0.0",
     "@swimlane/ngx-datatable": "14.0.0",
-    "awesome-bootstrap-checkbox": "1.0.1",
     "bootstrap": "4.3.1",
     "chart.js": "2.7.3",
     "core-js": "2.6.5",
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
index 9d425899e64d..b3bcb700656a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
@@ -173,12 +173,14 @@
         <!-- acl_enabled -->
         <div class="form-group row">
           <div class="offset-sm-3 col-sm-9">
-            <div class="checkbox checkbox-primary">
+            <div class="custom-control custom-checkbox">
               <input type="checkbox"
+                     class="custom-control-input"
                      formControlName="acl_enabled"
                      name="acl_enabled"
                      id="acl_enabled">
               <label for="acl_enabled"
+                     class="custom-control-label"
                      i18n>ACL authentication</label>
             </div>
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
index 772a4e230de7..17486d74a08d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
@@ -99,12 +99,12 @@
             <div class="form-group row"
                  *ngIf="type === 'bool'">
               <div class="offset-sm-3 col-sm-9">
-                <div class="form-check abc-checkbox abc-checkbox-primary">
-                  <input class="form-check-input"
+                <div class="custom-control custom-checkbox">
+                  <input type="checkbox"
+                         class="custom-control-input"
                          [id]="section"
-                         type="checkbox"
                          [formControlName]="section">
-                  <label class="form-check-label"
+                  <label class="custom-control-label"
                          [for]="section">{{ section }}
                   </label>
                 </div>
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
index 788ca1fb247f..39c82bc20afb 100644
--- 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
@@ -30,11 +30,13 @@
           <!-- bool -->
           <div class="col-sm-7"
                *ngIf="moduleOption.value.type === 'bool'">
-            <div class="checkbox checkbox-primary">
+            <div class="custom-control custom-checkbox">
               <input id="{{ moduleOption.value.name }}"
                      type="checkbox"
+                     class="custom-control-input"
                      formControlName="{{ moduleOption.value.name }}">
-              <label for="{{ moduleOption.value.name }}"></label>
+              <label class="custom-control-label"
+                     for="{{ moduleOption.value.name }}"></label>
             </div>
           </div>
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
index 659aae6a89e6..8b769a4ad565 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
@@ -8,16 +8,16 @@
           [formGroup]="osdFlagsForm"
           novalidate>
       <div class="modal-body osd-modal">
-        <div class="form-check abc-checkbox  abc-checkbox-primary"
+        <div class="custom-control custom-checkbox"
              *ngFor="let flag of flags; let last = last">
-          <input class="form-check-input"
+          <input class="custom-control-input"
                  type="checkbox"
                  [checked]="flag.value"
                  (change)="flag.value = !flag.value"
                  [name]="flag.code"
                  [id]="flag.code"
                  [disabled]="flag.disabled">
-          <label class="form-check-label"
+          <label class="custom-control-label"
                  [for]="flag.code"
                  ng-class="['tc_' + key]">
             <strong>{{ flag.name }}</strong>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.scss
index f7737e2368cd..df12ae46d918 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.scss
@@ -3,7 +3,3 @@
     margin: 5px;
   }
 }
-
-.abc-checkbox label::before {
-  margin-top: 3px;
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html
index cdd52bb3a1e4..3371496a50d8 100755
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html
@@ -34,14 +34,14 @@
         <!-- Customize priority -->
         <div class="form-group row">
           <div class="offset-sm-6 col-sm-6">
-            <div class="form-check abc-checkbox abc-checkbox-primary">
+            <div class="custom-control custom-checkbox">
               <input formControlName="customizePriority"
-                     class="form-check-input"
+                     class="custom-control-input"
                      id="customizePriority"
                      name="customizePriority"
                      type="checkbox"
                      (change)="onCustomizePriorityChange()">
-              <label class="form-check-label"
+              <label class="custom-control-label"
                      for="customizePriority"
                      i18n>Customize priority values</label>
             </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
index a22f42d0dbe3..966dc3d02e19 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
@@ -226,12 +226,14 @@
           </label>
 
           <div class="col-sm-9">
-            <div class="checkbox checkbox-primary">
+            <div class="custom-control custom-checkbox">
               <input type="checkbox"
+                     class="custom-control-input"
                      formControlName="security_label"
                      name="security_label"
                      id="security_label">
               <label for="security_label"
+                     class="custom-control-label"
                      i18n>Enable security label</label>
             </div>
 
@@ -323,20 +325,24 @@
             <span class="required"></span>
           </label>
           <div class="col-sm-9">
-            <div class="checkbox checkbox-primary">
+            <div class="custom-control custom-checkbox">
               <input type="checkbox"
+                     class="custom-control-input"
                      id="protocolNfsv3"
                      name="protocolNfsv3"
                      formControlName="protocolNfsv3">
               <label i18n
+                     class="custom-control-label"
                      for="protocolNfsv3">NFSv3</label>
             </div>
-            <div class="checkbox checkbox-primary">
+            <div class="custom-control custom-checkbox">
               <input type="checkbox"
+                     class="custom-control-input"
                      formControlName="protocolNfsv4"
                      name="protocolNfsv4"
                      id="protocolNfsv4">
               <label i18n
+                     class="custom-control-label"
                      for="protocolNfsv4">NFSv4</label>
             </div>
             <span class="form-text text-muted"
@@ -472,20 +478,24 @@
             <span class="required"></span>
           </label>
           <div class="col-sm-9">
-            <div class="checkbox checkbox-primary">
+            <div class="custom-control custom-checkbox">
               <input type="checkbox"
+                     class="custom-control-input"
                      formControlName="transportUDP"
                      name="transportUDP"
                      id="transportUDP">
               <label for="transportUDP"
+                     class="custom-control-label"
                      i18n>UDP</label>
             </div>
-            <div class="checkbox checkbox-primary">
+            <div class="custom-control custom-checkbox">
               <input type="checkbox"
+                     class="custom-control-input"
                      formControlName="transportTCP"
                      name="transportTCP"
                      id="transportTCP">
               <label for="transportTCP"
+                     class="custom-control-label"
                      i18n>TCP</label>
             </div>
             <span class="form-text text-muted"
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 b8515ca47c20..5e433619cc2e 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
@@ -103,7 +103,7 @@
               <span class="form-text text-muted"
                     *ngIf="externalPgChange"
                     i18n>The current PGs settings were calculated for you, you
-                    should make sure the values suit your needs before submit.</span>
+                should make sure the values suit your needs before submit.</span>
             </div>
           </div>
 
@@ -267,12 +267,12 @@
             <label i18n
                    class="col-form-label col-sm-3">Flags</label>
             <div class="col-sm-9">
-              <div class="form-check abc-checkbox abc-checkbox-primary">
-                <input class="form-check-input"
+              <div class="custom-control custom-checkbox">
+                <input type="checkbox"
+                       class="custom-control-input"
                        id="ec-overwrites"
-                       type="checkbox"
                        formControlName="ecOverwrites">
-                <label class="form-check-label"
+                <label class="custom-control-label"
                        for="ec-overwrites"
                        i18n>EC Overwrites</label>
               </div>
@@ -298,53 +298,53 @@
           </div>
         </div>
 
-          <!-- Compression -->
-          <div *ngIf="info.is_all_bluestore"
-               formGroupName="compression">
-            <legend i18n>Compression</legend>
+        <!-- Compression -->
+        <div *ngIf="info.is_all_bluestore"
+             formGroupName="compression">
+          <legend i18n>Compression</legend>
 
-            <!-- Compression Mode -->
-            <div class="form-group row">
+          <!-- Compression Mode -->
+          <div class="form-group row">
+            <label i18n
+                   class="col-form-label col-sm-3"
+                   for="mode">Mode</label>
+            <div class="col-sm-9">
+              <select class="form-control"
+                      id="mode"
+                      name="mode"
+                      formControlName="mode">
+                <option *ngFor="let mode of info.compression_modes"
+                        [value]="mode">
+                  {{ mode }}
+                </option>
+              </select>
+            </div>
+          </div>
+          <div *ngIf="hasCompressionEnabled()">
+            <!-- Compression algorithm selection -->
+            <div class="form-group row"
+                 [ngClass]="{':invalid': form.showError('algorithm', formDir)}">
               <label i18n
                      class="col-form-label col-sm-3"
-                     for="mode">Mode</label>
+                     for="algorithm">Algorithm</label>
               <div class="col-sm-9">
                 <select class="form-control"
-                        id="mode"
-                        name="mode"
-                        formControlName="mode">
-                  <option *ngFor="let mode of info.compression_modes"
-                          [value]="mode">
-                    {{ mode }}
+                        id="algorithm"
+                        name="algorithm"
+                        formControlName="algorithm">
+                  <option *ngIf="!info.compression_algorithms"
+                          ngValue=""
+                          i18n>Loading...</option>
+                  <option *ngIf="info.compression_algorithms && info.compression_algorithms.length === 0"
+                          i18n
+                          ngValue="">-- No erasure compression algorithm available --</option>
+                  <option *ngFor="let algorithm of info.compression_algorithms"
+                          [value]="algorithm">
+                    {{ algorithm }}
                   </option>
                 </select>
               </div>
             </div>
-            <div *ngIf="hasCompressionEnabled()">
-              <!-- Compression algorithm selection -->
-              <div class="form-group row"
-                   [ngClass]="{':invalid': form.showError('algorithm', formDir)}">
-                <label i18n
-                       class="col-form-label col-sm-3"
-                       for="algorithm">Algorithm</label>
-                <div class="col-sm-9">
-                  <select class="form-control"
-                          id="algorithm"
-                          name="algorithm"
-                          formControlName="algorithm">
-                    <option *ngIf="!info.compression_algorithms"
-                            ngValue=""
-                            i18n>Loading...</option>
-                    <option *ngIf="info.compression_algorithms && info.compression_algorithms.length === 0"
-                            i18n
-                            ngValue="">-- No erasure compression algorithm available --</option>
-                    <option *ngFor="let algorithm of info.compression_algorithms"
-                            [value]="algorithm">
-                      {{ algorithm }}
-                    </option>
-                  </select>
-                </div>
-              </div>
 
               <!-- Compression min blob size -->
               <div class="form-group row"
@@ -369,59 +369,59 @@
                   <span class="form-text text-muted"
                         *ngIf="form.showError('minBlobSize', formDir, 'maximum')"
                         i18n>Value should be less than the maximum blob size</span>
-                </div>
               </div>
+            </div>
 
-              <!-- Compression max blob size -->
-              <div class="form-group row"
-                   [ngClass]="{':invalid': form.showError('maxBlobSize', formDir)}">
-                <label i18n
-                       class="col-form-label col-sm-3"
-                       for="maxBlobSize">Maximum blob size</label>
-                <div class="col-sm-9">
-                  <input id="maxBlobSize"
-                         type="text"
-                         min="0"
-                         formControlName="maxBlobSize"
-                         class="form-control"
-                         i18n-placeholder
-                         placeholder="e.g., 512KiB"
-                         defaultUnit="KiB"
-                         cdDimlessBinary>
-                  <span class="form-text text-muted"
-                        *ngIf="form.showError('maxBlobSize', formDir, 'min')"
-                        i18n>Value should be greater than 0</span>
-                  <span class="form-text text-muted"
-                        *ngIf="form.showError('maxBlobSize', formDir, 'minimum')"
-                        i18n>Value should be greater than the minimum blob size</span>
-                </div>
+            <!-- Compression max blob size -->
+            <div class="form-group row"
+                 [ngClass]="{':invalid': form.showError('maxBlobSize', formDir)}">
+              <label i18n
+                     class="col-form-label col-sm-3"
+                     for="maxBlobSize">Maximum blob size</label>
+              <div class="col-sm-9">
+                <input id="maxBlobSize"
+                       type="text"
+                       min="0"
+                       formControlName="maxBlobSize"
+                       class="form-control"
+                       i18n-placeholder
+                       placeholder="e.g., 512KiB"
+                       defaultUnit="KiB"
+                       cdDimlessBinary>
+                <span class="form-text text-muted"
+                      *ngIf="form.showError('maxBlobSize', formDir, 'min')"
+                      i18n>Value should be greater than 0</span>
+                <span class="form-text text-muted"
+                      *ngIf="form.showError('maxBlobSize', formDir, 'minimum')"
+                      i18n>Value should be greater than the minimum blob size</span>
               </div>
+            </div>
 
-              <!-- Compression ratio -->
-              <div class="form-group row"
-                   [ngClass]="{':invalid': form.showError('ratio', formDir)}">
-                <label i18n
-                       class="col-form-label col-sm-3"
-                       for="ratio">Ratio</label>
-                <div class="col-sm-9">
-                  <input id="ratio"
-                         name="ratio"
-                         formControlName="ratio"
-                         type="number"
-                         min="0"
-                         max="1"
-                         step="0.1"
-                         class="form-control"
-                         i18n-placeholder
-                         placeholder="Compression ratio">
-                  <span class="form-text text-muted"
-                        *ngIf="form.showError('ratio', formDir, 'min') || form.showError('ratio', formDir, 'max')"
-                        i18n>Value should be between 0.0 and 1.0</span>
-                </div>
+            <!-- Compression ratio -->
+            <div class="form-group row"
+                 [ngClass]="{':invalid': form.showError('ratio', formDir)}">
+              <label i18n
+                     class="col-form-label col-sm-3"
+                     for="ratio">Ratio</label>
+              <div class="col-sm-9">
+                <input id="ratio"
+                       name="ratio"
+                       formControlName="ratio"
+                       type="number"
+                       min="0"
+                       max="1"
+                       step="0.1"
+                       class="form-control"
+                       i18n-placeholder
+                       placeholder="Compression ratio">
+                <span class="form-text text-muted"
+                      *ngIf="form.showError('ratio', formDir, 'min') || form.showError('ratio', formDir, 'max')"
+                      i18n>Value should be between 0.0 and 1.0</span>
               </div>
-
             </div>
+
           </div>
+        </div>
 
         <!-- Quotas -->
         <div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
index 2c191a72e4c5..70479815cc53 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
@@ -106,12 +106,12 @@
         <!-- Suspended -->
         <div class="form-group row">
           <div class="offset-sm-3 col-sm-9">
-            <div class="form-check abc-checkbox abc-checkbox-primary">
-              <input class="form-check-input"
+            <div class="custom-control custom-checkbox">
+              <input class="custom-control-input"
                      id="suspended"
                      type="checkbox"
                      formControlName="suspended">
-              <label class="form-check-label"
+              <label class="custom-control-label"
                      for="suspended"
                      i18n>Suspended</label>
             </div>
@@ -125,12 +125,12 @@
           <!-- Auto-generate key -->
           <div class="form-group row">
             <div class="offset-sm-3 col-sm-9">
-              <div class="form-check abc-checkbox abc-checkbox-primary">
-                <input class="form-check-input"
+              <div class="custom-control custom-checkbox">
+                <input class="custom-control-input"
                        id="generate_key"
                        type="checkbox"
                        formControlName="generate_key">
-                <label class="form-check-label"
+                <label class="custom-control-label"
                        for="generate_key"
                        i18n>Auto-generate key</label>
               </div>
@@ -439,12 +439,12 @@
           <!-- Enabled -->
           <div class="form-group row">
             <div class="offset-sm-3 col-sm-9">
-              <div class="form-check abc-checkbox abc-checkbox-primary">
-                <input class="form-check-input"
+              <div class="custom-control custom-checkbox">
+                <input class="custom-control-input"
                        id="user_quota_enabled"
                        type="checkbox"
                        formControlName="user_quota_enabled">
-                <label class="form-check-label"
+                <label class="custom-control-label"
                        for="user_quota_enabled"
                        i18n>Enabled</label>
               </div>
@@ -455,12 +455,12 @@
           <div class="form-group row"
                *ngIf="userForm.controls.user_quota_enabled.value">
             <div class="offset-sm-3 col-sm-9">
-              <div class="form-check abc-checkbox abc-checkbox-primary">
-                <input class="form-check-input"
+              <div class="custom-control custom-checkbox">
+                <input class="custom-control-input"
                        id="user_quota_max_size_unlimited"
                        type="checkbox"
                        formControlName="user_quota_max_size_unlimited">
-                <label class="form-check-label"
+                <label class="custom-control-label"
                        for="user_quota_max_size_unlimited"
                        i18n>Unlimited size</label>
               </div>
@@ -495,12 +495,12 @@
           <div class="form-group row"
                *ngIf="userForm.controls.user_quota_enabled.value">
             <div class="offset-sm-3 col-sm-9">
-              <div class="form-check abc-checkbox abc-checkbox-primary">
-                <input class="form-check-input"
+              <div class="custom-control custom-checkbox">
+                <input class="custom-control-input"
                        id="user_quota_max_objects_unlimited"
                        type="checkbox"
                        formControlName="user_quota_max_objects_unlimited">
-                <label class="form-check-label"
+                <label class="custom-control-label"
                        for="user_quota_max_objects_unlimited"
                        i18n>Unlimited objects</label>
               </div>
@@ -538,12 +538,12 @@
           <!-- Enabled -->
           <div class="form-group row">
             <div class="offset-sm-3 col-sm-9">
-              <div class="form-check abc-checkbox abc-checkbox-primary">
-                <input class="form-check-input"
+              <div class="custom-control custom-checkbox">
+                <input class="custom-control-input"
                        id="bucket_quota_enabled"
                        type="checkbox"
                        formControlName="bucket_quota_enabled">
-                <label class="form-check-label"
+                <label class="custom-control-label"
                        for="bucket_quota_enabled"
                        i18n>Enabled</label>
               </div>
@@ -554,12 +554,12 @@
           <div class="form-group row"
                *ngIf="userForm.controls.bucket_quota_enabled.value">
             <div class="offset-sm-3 col-sm-9">
-              <div class="form-check abc-checkbox abc-checkbox-primary">
-                <input class="form-check-input"
+              <div class="custom-control custom-checkbox">
+                <input class="custom-control-input"
                        id="bucket_quota_max_size_unlimited"
                        type="checkbox"
                        formControlName="bucket_quota_max_size_unlimited">
-                <label class="form-check-label"
+                <label class="custom-control-label"
                        for="bucket_quota_max_size_unlimited"
                        i18n>Unlimited size</label>
               </div>
@@ -594,12 +594,12 @@
           <div class="form-group row"
                *ngIf="userForm.controls.bucket_quota_enabled.value">
             <div class="offset-sm-3 col-sm-9">
-              <div class="form-check abc-checkbox abc-checkbox-primary">
-                <input class="form-check-input"
+              <div class="custom-control custom-checkbox">
+                <input class="custom-control-input"
                        id="bucket_quota_max_objects_unlimited"
                        type="checkbox"
                        formControlName="bucket_quota_max_objects_unlimited">
-                <label class="form-check-label"
+                <label class="custom-control-label"
                        for="bucket_quota_max_objects_unlimited"
                        i18n>Unlimited objects</label>
               </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
index f9cecf0bada6..5ea36e7bcb21 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
@@ -52,12 +52,12 @@
     <div class="form-group row"
          *ngIf="!viewing">
       <div class="offset-sm-3 col-sm-9">
-        <div class="form-check abc-checkbox abc-checkbox-primary">
-          <input class="form-check-input"
+        <div class="custom-control custom-checkbox">
+          <input class="custom-control-input"
                  id="generate_key"
                  type="checkbox"
                  formControlName="generate_key">
-          <label class="form-check-label"
+          <label class="custom-control-label"
                  for="generate_key"
                  i18n>Auto-generate key</label>
         </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
index c6be54f62cf5..1885c1091b1f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
@@ -90,12 +90,12 @@
       <!-- Auto-generate key -->
       <div class="form-group row">
         <div class="offset-sm-3 col-sm-9">
-          <div class="form-check abc-checkbox abc-checkbox-primary">
-            <input class="form-check-input"
+          <div class="custom-control custom-checkbox">
+            <input class="custom-control-input"
                    id="generate_secret"
                    type="checkbox"
                    formControlName="generate_secret">
-            <label class="form-check-label"
+            <label class="custom-control-label"
                    for="generate_secret"
                    i18n>Auto-generate secret</label>
           </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
index 1a80d2a0b5cd..c857f027a186 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
@@ -86,13 +86,13 @@
              let-column="column"
              let-row="row"
              let-value="value">
-  <div class="form-check abc-checkbox abc-checkbox-primary">
-    <input class="form-check-input"
+  <div class="custom-control custom-checkbox">
+    <input class="custom-control-input"
            id="scope_{{ row.scope }}"
            type="checkbox"
            [checked]="isRowChecked(row.scope)"
            (change)="onClickCellCheckbox(row.scope, column.prop, $event)">
-    <label class="datatable-permissions-scope-cell-label form-check-label"
+    <label class="datatable-permissions-scope-cell-label custom-control-label"
            for="scope_{{ row.scope }}">{{ value }}</label>
   </div>
 </ng-template>
@@ -101,26 +101,26 @@
              let-column="column"
              let-row="row"
              let-value="value">
-  <div class="form-check abc-checkbox abc-checkbox-primary">
-    <input class="form-check-input"
+  <div class="custom-control custom-checkbox">
+    <input class="custom-control-input"
            type="checkbox"
            [checked]="value"
            [id]="row.scope + '-' + column.prop"
            (change)="onClickCellCheckbox(row.scope, column.prop, $event)">
-    <label class="form-check-label"
+    <label class="custom-control-label"
            [for]="row.scope + '-' + column.prop"></label>
   </div>
 </ng-template>
 
 <ng-template #headerPermissionCheckboxTpl
              let-column="column">
-  <div class="form-check abc-checkbox abc-checkbox-primary">
-    <input class="form-check-input"
+  <div class="custom-control custom-checkbox">
+    <input class="custom-control-input"
            id="header_{{ column.prop }}"
            type="checkbox"
            [checked]="isHeaderChecked(column.prop)"
            (change)="onClickHeaderCheckbox(column.prop, $event)">
-    <label class="datatable-permissions-header-cell-label form-check-label"
+    <label class="datatable-permissions-header-cell-label custom-control-label"
            for="header_{{ column.prop }}">{{ column.name }}</label>
   </div>
 </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html
index 40578d03c881..ba73fe1492fa 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html
@@ -16,16 +16,16 @@
             {{ actionDescription | lowercase }} the selected {{ itemDescription }}?</p>
           <div class="form-group"
                [ngClass]="{':invalid': deletionForm.showError('confirmation', formDir)}">
-            <div class="form-check abc-checkbox abc-checkbox-primary">
-              <input class="form-check-input"
-                     type="checkbox"
+            <div class="custom-control custom-checkbox">
+              <input type="checkbox"
+                     class="custom-control-input"
                      name="confirmation"
                      id="confirmation"
                      formControlName="confirmation"
                      autofocus>
-              <label class="form-check-label"
-                     i18n
-                     for="confirmation">Yes, I am sure.</label>
+              <label class="custom-control-label"
+                     for="confirmation"
+                     i18n>Yes, I am sure.</label>
             </div>
           </div>
         </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 9e8443505cec..902d89328ba0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -62,14 +62,14 @@
             class="dropdown-menu px-3">
           <li *ngFor="let column of columns">
 
-            <div class="form-check abc-checkbox abc-checkbox-primary">
-              <input class="form-check-input"
+            <div class="custom-control custom-checkbox">
+              <input class="custom-control-input"
                      type="checkbox"
                      (change)="toggleColumn($event)"
                      [name]="column.prop"
                      [id]="column.prop"
                      [checked]="!column.isHidden">
-              <label class="form-check-label"
+              <label class="custom-control-label"
                      [for]="column.prop">{{ column.name }}</label>
             </div>
           </li>