mgr/dashboard: carbon datatables impr and cleanups

Fixes: https://tracker.ceph.com/issues/67544,
https://tracker.ceph.com/issues/67538,
https://tracker.ceph.com/issues/67542, https://tracker.ceph.com/issues/67545, https://tracker.ceph.com/issues/67546

Signed-off-by: Ivo Almeida <[email protected]>

Author: ivoalmeida

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html

@@ -114,7 +114,7 @@
          *ngIf="metadata">
       <legend>{{ metadataTitle }}</legend>
       <div>
-        <cd-table-key-value cdTableDetail
+        <cd-table-key-value *cdTableDetail
                             [data]="metadata">
         </cd-table-key-value>
       </div>

src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/crud-table/crud-table.component.html

@@ -29,9 +29,9 @@
                         [tableActions]="meta.actions">
       </cd-table-actions>
     </div>
-    <ng-container [ngIf]="expandedRow && meta.detail_columns.length > 0"
-                  *cdTableDetail>
-      <table class="table table-striped table-bordered">
+    <ng-container *ngIf="expandedRow && meta.detail_columns.length > 0">
+      <table *cdTableDetail
+             class="table table-striped table-bordered">
         <tbody>
           <tr *ngFor="let column of meta.detail_columns">
             <td i18n

src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts

@@ -363,6 +363,29 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
         }
       ];
     }
+
+    const tableHeadersSubscription = this._tableHeaders
+      .pipe(
+        map((values: CdTableColumn[]) =>
+          values.map(
+            (col: CdTableColumn) =>
+              new TableHeaderItem({
+                data: col?.headerTemplate ? { ...col } : col.name,
+                title: col.name,
+                template: col?.headerTemplate,
+                // if cellClass is a function it cannot be called here as it requires table data to execute
+                // instead if cellClass is a function it will be called and applied while parsing the data
+                className: _.isString(col?.cellClass) ? col?.cellClass : col?.className,
+                visible: !col.isHidden,
+                sortable: _.isNil(col.sortable) ? true : col.sortable
+              })
+          )
+        )
+      )
+      .subscribe({
+        next: (values: TableHeaderItem[]) => (this.model.header = values)
+      });
+
     const datasetSubscription = this._dataset
       .pipe(
         filter((values: any[]) => {
@@ -419,28 +442,6 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
         }
       });
 
-    const tableHeadersSubscription = this._tableHeaders
-      .pipe(
-        map((values: CdTableColumn[]) =>
-          values.map(
-            (col: CdTableColumn) =>
-              new TableHeaderItem({
-                data: col?.headerTemplate ? { ...col } : col.name,
-                title: col.name,
-                template: col?.headerTemplate,
-                // if cellClass is a function it cannot be called here as it requires table data to execute
-                // instead if cellClass is a function it will be called and applied while parsing the data
-                className: _.isString(col?.cellClass) ? col?.cellClass : col?.className,
-                visible: !col.isHidden,
-                sortable: _.isNil(col.sortable) ? true : col.sortable
-              })
-          )
-        )
-      )
-      .subscribe({
-        next: (values: TableHeaderItem[]) => (this.model.header = values)
-      });
-
     const rowsExpandedSubscription = this.model.rowsExpandedChange.subscribe({
       next: (index: number) => {
         if (this.model.rowsExpanded.every((x) => !x)) {
@@ -454,9 +455,9 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
       }
     });
 
+    this._subscriptions.add(tableHeadersSubscription);
     this._subscriptions.add(datasetSubscription);
     this._subscriptions.add(rowsExpandedSubscription);
-    this._subscriptions.add(tableHeadersSubscription);
   }
 
   ngOnInit() {

src/pybind/mgr/dashboard/frontend/src/styles/themes/_content.scss

@@ -28,10 +28,10 @@ $content-theme: map-merge(
     focus-inverse: lighten(vv.$primary, 25%),
     text-inverse: vv.$dark,
     support-info: vv.$info,
-    layer-01: vv.$secondary,
-    layer-hover-01: vv.$gray-600,
+    layer-01: vv.$light,
+    layer-hover-01: colors.$gray-20,
     text-primary: vv.$dark,
-    text-secondary: vv.$body-bg-alt,
+    text-secondary: vv.$dark,
     text-disabled: vv.$gray-500,
     icon-secondary: vv.$body-bg-alt
   )