From 528f09c04eb10d20cc2b69aa806b2ee498d87fca Mon Sep 17 00:00:00 2001
From: Nizamudeen A <nia@redhat.com>
Date: Thu, 12 Sep 2024 18:51:13 +0530
Subject: [PATCH] mgr/dashboard: fix minor issues in carbon tables

- fixes table in table structure's unusual padding
- fixes the ceph fs details page where table was getting hidden
- improving the subvolume list page by changing the spacings there
- hide the refresh button where it shouldn't be shown.

Fixes: https://tracker.ceph.com/issues/68050
Signed-off-by: Nizamudeen A <nia@redhat.com>
---
 .../cephfs-detail.component.html              | 14 +++----
 .../cephfs-subvolume-list.component.html      |  4 +-
 .../cluster/services/services.component.ts    |  2 +-
 .../rgw-bucket-details.component.html         | 38 +++++++++----------
 .../rgw-overview-dashboard.component.html     |  2 +-
 .../device-list/device-list.component.html    |  8 ++--
 .../shared/components/doc/doc.component.html  |  2 +-
 .../datatable/table/table.component.html      |  6 ++-
 .../shared/datatable/table/table.component.ts | 12 +++---
 .../mgr/dashboard/frontend/src/styles.scss    |  1 +
 .../frontend/src/styles/_carbon-defaults.scss | 12 ++++++
 11 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
index 2578d18ab17b5..cbc11db138fb7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
@@ -1,23 +1,23 @@
 <div class="row">
-  <div class="col-sm-6">
+  <div class="col-sm-8">
     <legend i18n>Ranks</legend>
     <cd-table [data]="data.ranks"
               [columns]="columns.ranks"
               [toolHeader]="false">
     </cd-table>
 
-    <legend i18n>Standbys</legend>
-    <cd-table-key-value [data]="standbys">
-    </cd-table-key-value>
-  </div>
-
-  <div class="col-sm-6">
     <legend i18n>Pools</legend>
     <cd-table [data]="data.pools"
               [columns]="columns.pools"
               [toolHeader]="false">
     </cd-table>
   </div>
+
+  <div class="col-sm-4">
+    <legend i18n>Standbys</legend>
+    <cd-table-key-value [data]="standbys">
+    </cd-table-key-value>
+  </div>
 </div>
 
 <legend i18n>MDS performance counters</legend>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-list/cephfs-subvolume-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-list/cephfs-subvolume-list.component.html
index da6386c350688..bfe66c864b378 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-list/cephfs-subvolume-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-list/cephfs-subvolume-list.component.html
@@ -1,12 +1,12 @@
 <div class="row">
-  <div class="col-sm-1"
+  <div class="col-sm-2"
        *ngIf="subVolumeGroups$ | async as subVolumeGroups">
     <cd-vertical-navigation title="Groups"
                             [items]="subvolumeGroupList"
                             inputIdentifier="group-filter"
                             (emitActiveItem)="selectSubVolumeGroup($event)"></cd-vertical-navigation>
   </div>
-  <div class="col-11 vertical-line">
+  <div class="col-10 vertical-line">
     <cd-table [data]="subVolumes$ | async"
               columnMode="flex"
               [columns]="columns"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts
index 40c2e95d1e013..9242ab635aa1b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts
@@ -232,13 +232,13 @@ export class ServicesComponent extends ListWithDetails implements OnChanges, OnI
     pagination_obs.observable.subscribe(
       (services: CephServiceSpec[]) => {
         this.services = services;
-        this.count = pagination_obs.count;
         this.services = this.services.filter((col: any) => {
           if (col.service_type === 'mgmt-gateway' && col.status.running) {
             this.isMgmtGateway = true;
           }
           return !this.hiddenServices.includes(col.service_name);
         });
+        this.count = this.services.length;
         this.isLoadingServices = false;
       },
       () => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html
index 31c54e59ebff9..ddc202152b9f4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html
@@ -139,26 +139,24 @@
                 <td><pre>{{ selection.bucket_policy | json}}</pre></td>
               </tr>
               <tr>
-                <div>
-                  <td i18n
-                      class="bold w-25">Lifecycle
-                    <div *ngIf="(selection.lifecycle | json) !== '{}'"
-                         class="input-group">
-                      <button type="button"
-                              class="btn btn-light"
-                              [ngClass]="{'active': lifecycleFormat === 'json'}"
-                              (click)="lifecycleFormat = 'json'">
-                            JSON
-                      </button>
-                      <button type="button"
-                              class="btn btn-light"
-                              [ngClass]="{'active': lifecycleFormat === 'xml'}"
-                              (click)="lifecycleFormat = 'xml'">
-                            XML
-                      </button>
-                    </div>
-                  </td>
-                </div>
+                <td i18n
+                    class="bold w-25">Lifecycle
+                  <div *ngIf="(selection.lifecycle | json) !== '{}'"
+                       class="input-group">
+                    <button type="button"
+                            class="btn btn-light"
+                            [ngClass]="{'active': lifecycleFormat === 'json'}"
+                            (click)="lifecycleFormat = 'json'">
+                          JSON
+                    </button>
+                    <button type="button"
+                            class="btn btn-light"
+                            [ngClass]="{'active': lifecycleFormat === 'xml'}"
+                            (click)="lifecycleFormat = 'xml'">
+                          XML
+                    </button>
+                  </div>
+                </td>
                 <td>
                   <pre *ngIf="lifecycleFormat === 'json'">{{selection.lifecycle | json}}</pre>
                   <pre *ngIf="lifecycleFormat === 'xml'">{{ (selection.lifecycle | xml) || '-'}}</pre>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.html
index 66f3ec5a5a7ab..519782b52990a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.html
@@ -102,7 +102,7 @@
           <cd-alert-panel type="info"
                           i18n>
             Multi-site needs to be configured in order to see the multi-site sync status.
-            Please consult the <cd-doc section="multisite"></cd-doc> on how to configure and enable the multi-site functionality.
+            Please consult the <cd-doc section="multisite"></cd-doc>&nbsp;on how to configure and enable the multi-site functionality.
           </cd-alert-panel>
         </span>
       </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.html
index e9e2b5f663bd6..373ecfa462067 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.html
@@ -40,11 +40,11 @@
 
 <ng-template #lifeExpectancy
              let-value="data.value">
-  <span *ngIf="!value.life_expectancy_enabled"
+  <span *ngIf="!value?.life_expectancy_enabled"
         i18n>{{ "" | notAvailable }}</span>
-  <span *ngIf="value.min && !value.max">&gt; {{value.min | i18nPlural: translationMapping}}</span>
-  <span *ngIf="value.max && !value.min">&lt; {{value.max | i18nPlural: translationMapping}}</span>
-  <span *ngIf="value.max && value.min">{{value.min}} to {{value.max | i18nPlural: translationMapping}}</span>
+  <span *ngIf="value?.min && !value?.max">&gt; {{value.min | i18nPlural: translationMapping}}</span>
+  <span *ngIf="value?.max && !value?.min">&lt; {{value.max | i18nPlural: translationMapping}}</span>
+  <span *ngIf="value?.max && value?.min">{{value.min}} to {{value.max | i18nPlural: translationMapping}}</span>
 </ng-template>
 
 <ng-template #lifeExpectancyTimestamp
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/doc/doc.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/doc/doc.component.html
index b90fedc0cf15f..199fe27e62d0d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/doc/doc.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/doc/doc.component.html
@@ -1,2 +1,2 @@
 <a href="{{ docUrl }}"
-   target="_blank">{{ docText }}</a>
+   target="_blank">&nbsp;{{ docText }}</a>
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 deb705d1fff98..4d4325724d7e7 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
@@ -72,7 +72,8 @@
               i18n-title
               i18n-description
               class="toolbar-action"
-              placement="bottom">
+              placement="bottom"
+              *ngIf="fetchData?.observers?.length > 0">
         <svg cdsIcon="renew"
              size="16"
              [ngClass]="{ 'cds--toolbar-action__icon': true, 'reload': loadingIndicator }"></svg>
@@ -195,7 +196,8 @@
                   (selectPage)="onPageChange($event)"
                   [disabled]="limit === 0"
                   [skeleton]="loadingIndicator"
-                  [pageInputDisabled]="limit === 0">
+                  [pageInputDisabled]="limit === 0"
+                  *ngIf="footer">
   </cds-pagination>
 </cds-table-container>
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
index 5b2bd777dc7a0..1c6cca5782f6b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
@@ -411,7 +411,7 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
                 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,
+                className: _.isString(col?.cellClass) ? `${col?.cellClass}` : `${col?.className}`,
                 visible: !col.isHidden,
                 sortable: _.isNil(col.sortable) ? true : col.sortable
               })
@@ -553,12 +553,12 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
     // this method was triggered by ngOnChanges().
     if (this.fetchData.observers.length > 0) {
       this.loadingIndicator = true;
+      const loadingSubscription = this.fetchData.subscribe(() => {
+        this.loadingIndicator = false;
+        this.cdRef.detectChanges();
+      });
+      this._subscriptions.add(loadingSubscription);
     }
-    const loadingSubscription = this.fetchData.subscribe(() => {
-      this.loadingIndicator = false;
-      this.cdRef.detectChanges();
-    });
-    this._subscriptions.add(loadingSubscription);
 
     if (_.isInteger(this.autoReload) && this.autoReload > 0) {
       this.reloadSubscriber = this.timerService
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index f4cdd7981f548..9ca6f60b74423 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -237,4 +237,5 @@ formly-form {
 // Overriding legend css due to change in bootstrap v5 and setting it to none;
 legend {
   float: none;
+  margin-top: 1rem;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
index c9ee32770d059..1d12facaf6a2f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss
@@ -46,6 +46,18 @@ tr.cds--expandable-row > td:first-of-type {
   padding-inline-start: 1rem !important;
 }
 
+tr.cds--expandable-row {
+  th,
+  tr td {
+    padding-inline-start: 0;
+  }
+}
+
+tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td,
+tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
+  padding-inline-start: 1rem;
+}
+
 th {
   padding-block: 0 !important;
 }
-- 
2.39.5