mgr/dashboard: Reduce size of component styles

Fixes: https://tracker.ceph.com/issues/44811
Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
index d8b1b8de4982087dbee93adc906a86ec9116b314..8e0f19a41169470a62275957f29099f84c9048f3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
@@ -1,4 +1,4 @@
-@import 'styles';
+@import 'defaults.scss';
 
 p {
   font-family: monospace;
@@ -47,15 +47,6 @@ p {
   }
 }
 
-label {
-  @extend .mr-2;
-}
-
-.form-group {
-  @extend .mr-3;
-  @extend .mb-3;
-}
-
 .middle {
   padding-top: 7px;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
index 9c7684a5c6f69e70c64462c55c892cc121c03f4f..f765ac5e8a21315ca7c610d6be9b4b78ee6a6ac0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
@@ -1,10 +1,7 @@
-@import 'styles';
+@import 'defaults.scss';
 
 cd-info-card {
   padding: 0 0.5vw 0 0.5vw;
-  @extend .d-flex;
-  @extend .flex-column;
-  @extend .mb-4;
 }
 
 ::ng-deep .pg-status-popover-wrapper {
@@ -42,19 +39,3 @@ cd-info-card {
 .popover-info:hover {
   cursor: pointer;
 }
-
-::ng-deep cd-info-card {
-  @extend .col-12;
-  @extend .col-sm-12;
-  @extend .col-md-6;
-  @extend .col-lg-4;
-
-  &.cd-status-card {
-    @extend .col-xl-3;
-  }
-
-  &.cd-performance-card,
-  &.cd-capacity-card {
-    @extend .col-xl;
-  }
-}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
index f5cfcb708ff3a8802ca92f19691766da0b144b25..07732f3edc87117eb48edeed5a2ed403b92686f3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
@@ -1,4 +1,4 @@
-@import 'styles';
+@import 'defaults.scss';
 
 $card-font-min-width: 320px;
 $card-font-max-width: 2048px;
@@ -7,7 +7,6 @@ $card-font-max-size: 21px;
 
 .card {
   height: 100%;
-  @extend .pb-2;
   border: 0.5px solid $color-info-card-border;
   border-radius: 3px;
   box-shadow: 0 1px 1px $color-shadow-gray;
@@ -26,10 +25,6 @@ $card-font-max-size: 21px;
       left: 0;
       top: 0;
     }
-
-    .card-text {
-      @extend .pt-2;
-    }
   }
 }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss
index 58ba9a31abd148c54b6038c33dfd8b6a16f32a3c..e3c3492a403ea3d21017fd3a717b959a1338ab14 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.scss
@@ -1,10 +1,4 @@
-@import '~bootstrap/scss/bootstrap-grid';
-
 .dropdown-menu > .disabled > a {
   pointer-events: auto;
   cursor: default !important;
 }
-
-::ng-deep .btn-toolbar .btn-group {
-  @extend .mr-1;
-}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
index e358a9d2fa766d1565233750cfe3d761fb9501b3..9dccecba61f66e541cd8c32d118ee90b5a5af34b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
@@ -1,4 +1,4 @@
-@import 'styles';
+@import 'defaults.scss';
 
 .dataTables_wrapper {
   margin-bottom: 25px;
@@ -13,14 +13,8 @@
 
   .widget-toolbar {
     float: right;
-    // width: auto;
-    // height: 30px;
-    // line-height: 28px;
-    // position: relative;
     border-left: 1px solid $color-table-seperator-border;
-    // cursor: pointer;
     padding: 0 8px;
-    // text-align: center;
 
     .form-check {
       padding-left: 0;
@@ -237,27 +231,11 @@
     }
   }
   .datatable-footer {
-    @extend .p-2;
-
     .selected-count,
     .page-count {
       font-style: italic;
       padding-left: 5px;
     }
-    .datatable-pager {
-      // .pager
-      ul {
-        @extend .pagination;
-
-        li {
-          @extend .page-item;
-
-          a {
-            @extend .page-link;
-          }
-        }
-      }
-    }
   }
 
   .cd-datatable-checkbox {

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 79367b7191343a54ab7f6ce12307b88c3079d20f..bb883e43ec0126abc01e14a55f3d529062eaa62e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -25,6 +25,7 @@ $popover-max-width: 350px;
 @import '~bootstrap/scss/bootstrap';
 @import '~fork-awesome/scss/fork-awesome';
 @import 'app/ceph/dashboard/info-card/info-card-popover.scss';
+@import 'bootstrap-extends';
 
 /* Reset checkbox success color */
 .was-validated .custom-control-input:valid,

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss b/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss
new file mode 100644 (file)
index 0000000..b04131d
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss
@@ -0,0 +1,76 @@
+/*
+ * Include here all styles from components that extend from bootstrap.
+ * This removes the need to @import bootstrap into those componenet,
+ * thus reducing the final css size.
+*/
+
+cd-info-card {
+  .card {
+    @extend .pb-2;
+
+    .card-body {
+      .card-text {
+        @extend .pt-2;
+      }
+    }
+  }
+}
+
+.btn-toolbar cd-table-actions.btn-group {
+  @extend .mr-2;
+}
+
+cd-table {
+  .cd-datatable {
+    .datatable-footer {
+      @extend .p-2;
+
+      .datatable-pager {
+        ul {
+          @extend .pagination;
+
+          li {
+            @extend .page-item;
+
+            a {
+              @extend .page-link;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+cd-health {
+  cd-info-card {
+    @extend .d-flex;
+    @extend .flex-column;
+    @extend .mb-4;
+
+    @extend .col-12;
+    @extend .col-sm-12;
+    @extend .col-md-6;
+    @extend .col-lg-4;
+
+    &.cd-status-card {
+      @extend .col-xl-3;
+    }
+
+    &.cd-performance-card,
+    &.cd-capacity-card {
+      @extend .col-xl;
+    }
+  }
+}
+
+cd-logs {
+  label {
+    @extend .mr-2;
+  }
+
+  .form-inline > .form-group {
+    @extend .mr-3;
+    @extend .mb-3;
+  }
+}