<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>
<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"
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;
},
() => {
<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>
<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> on how to configure and enable the multi-site functionality.
</cd-alert-panel>
</span>
</ng-template>
<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">> {{value.min | i18nPlural: translationMapping}}</span>
- <span *ngIf="value.max && !value.min">< {{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">> {{value.min | i18nPlural: translationMapping}}</span>
+ <span *ngIf="value?.max && !value?.min">< {{value.max | i18nPlural: translationMapping}}</span>
+ <span *ngIf="value?.max && value?.min">{{value.min}} to {{value.max | i18nPlural: translationMapping}}</span>
</ng-template>
<ng-template #lifeExpectancyTimestamp
<a href="{{ docUrl }}"
- target="_blank">{{ docText }}</a>
+ target="_blank"> {{ docText }}</a>
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>
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
})
// 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
// Overriding legend css due to change in bootstrap v5 and setting it to none;
legend {
float: none;
+ margin-top: 1rem;
}
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;
}