]> git.apps.os.sepia.ceph.com Git - ceph.git/commitdiff
mgr/dashboard: fix minor issues in carbon tables 59765/head
authorNizamudeen A <nia@redhat.com>
Thu, 12 Sep 2024 13:21:13 +0000 (18:51 +0530)
committerNizamudeen A <nia@redhat.com>
Tue, 17 Sep 2024 11:48:55 +0000 (17:18 +0530)
- 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>
src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-detail/cephfs-detail.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolume-list/cephfs-subvolume-list.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/services.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-overview-dashboard/rgw-overview-dashboard.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/device-list/device-list.component.html
src/pybind/mgr/dashboard/frontend/src/app/shared/components/doc/doc.component.html
src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
src/pybind/mgr/dashboard/frontend/src/styles.scss
src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss

index 2578d18ab17b5ae1989706127df568c5f481dd13..cbc11db138fb78458f6bca77e2d9ee488b5d9ef9 100644 (file)
@@ -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>
index da6386c350688a456e2c9a5f172a6b1c06abb997..bfe66c864b3785bec641d9176ac8923071da4d13 100644 (file)
@@ -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"
index 40c2e95d1e013936ec169c33f558a98140dc1f4e..9242ab635aa1b9e4eb5b42ffbacc1c25162bc6ec 100644 (file)
@@ -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;
       },
       () => {
index 31c54e59ebff97a0b6062bb9e8253e2c30044111..ddc202152b9f4e5f3d860b8b4f085d1d12be6e23 100644 (file)
                 <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>
index 66f3ec5a5a7ab88a5ceedf61b05c05b45fcf6410..519782b52990a61d1bd0a06ea240d47055d5b5a0 100644 (file)
           <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>
index e9e2b5f663bd6972c7012e860517a243a3dadbd8..373ecfa4620677e1ac330fcbce6b5a1f9a737975 100644 (file)
 
 <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
index b90fedc0cf15fb93807f3baad46260e60b148ad8..199fe27e62d0d9f2caa9b6f47c0244a1439196da 100644 (file)
@@ -1,2 +1,2 @@
 <a href="{{ docUrl }}"
-   target="_blank">{{ docText }}</a>
+   target="_blank">&nbsp;{{ docText }}</a>
index deb705d1fff98c582961512a7a619c932816c538..4d4325724d7e73ad628aa0733d7cb984a47a8b43 100644 (file)
@@ -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>
                   (selectPage)="onPageChange($event)"
                   [disabled]="limit === 0"
                   [skeleton]="loadingIndicator"
-                  [pageInputDisabled]="limit === 0">
+                  [pageInputDisabled]="limit === 0"
+                  *ngIf="footer">
   </cds-pagination>
 </cds-table-container>
 
index 5b2bd777dc7a00a9855f0197baf0a6672ac262e4..1c6cca5782f6b9896e83a51aaf39cd22a278f631 100644 (file)
@@ -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
index f4cdd7981f5489b5293527b633d369bb4d7fff70..9ca6f60b744236f8bbe56dc3c06c759852dfc912 100644 (file)
@@ -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;
 }
index c9ee32770d059fafff40a8a087f3fe587c575cbe..1d12facaf6a2f9151cc993ea4f3791c3764c4b57 100644 (file)
@@ -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;
 }