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 <[email protected]>

Author: nizamial09

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>

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"

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;
       },
       () => {

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>

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

@@ -102,7 +102,7 @@ <h1>{{ averageObjectSize | dimlessBinary}}</h1>
           <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>

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

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>

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>
 

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

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;
 }