for="poolType"
i18n>Pool type</label>
<div class="cd-col-form-input">
- <select class="form-control custom-select"
+ <select class="form-select"
id="poolType"
formControlName="poolType"
name="poolType">
class="cd-col-form-label"
for="pgAutoscaleMode">PG Autoscale</label>
<div class="cd-col-form-input">
- <select class="form-control custom-select"
+ <select class="form-select"
id="pgAutoscaleMode"
name="pgAutoscaleMode"
formControlName="pgAutoscaleMode">
[selectionLimit]="4"
(selection)="appSelection()">
</cd-select-badges>
+ <i *ngIf="data.applications.selected <= 0"
+ i18n-title
+ title="Pools should be associated with an application tag"
+ class="{{icons.warning}} icon-warning-color">
+ </i>
</div>
</div>
-
<!-- CRUSH -->
<div *ngIf="isErasure || isReplicated">
class="cd-col-form-label"
for="erasureProfile">Erasure code profile</label>
<div class="cd-col-form-input">
- <div class="input-group">
- <select class="form-control custom-select"
+ <div class="input-group mb-1">
+ <select class="form-select"
id="erasureProfile"
name="erasureProfile"
formControlName="erasureProfile">
{{ ecp.name }}
</option>
</select>
- <span class="input-group-append">
- <button class="btn btn-light"
- [ngClass]="{'active': data.erasureInfo}"
- id="ecp-info-button"
- type="button"
- (click)="data.erasureInfo = !data.erasureInfo">
- <i [ngClass]="[icons.questionCircle]"
- aria-hidden="true"></i>
- </button>
- <button class="btn btn-light"
- type="button"
- *ngIf="!editing"
- (click)="addErasureCodeProfile()">
- <i [ngClass]="[icons.add]"
- aria-hidden="true"></i>
- </button>
- <button class="btn btn-light"
- type="button"
- *ngIf="!editing"
- ngbTooltip="This profile can't be deleted as it is in use."
- i18n-ngbTooltip
- triggers="manual"
- #ecpDeletionBtn="ngbTooltip"
- (click)="deleteErasureCodeProfile()">
- <i [ngClass]="[icons.trash]"
- aria-hidden="true"></i>
- </button>
- </span>
+ <button class="btn btn-light"
+ [ngClass]="{'active': data.erasureInfo}"
+ id="ecp-info-button"
+ type="button"
+ (click)="data.erasureInfo = !data.erasureInfo">
+ <i [ngClass]="[icons.questionCircle]"
+ aria-hidden="true"></i>
+ </button>
+ <button class="btn btn-light"
+ type="button"
+ *ngIf="!editing"
+ (click)="addErasureCodeProfile()">
+ <i [ngClass]="[icons.add]"
+ aria-hidden="true"></i>
+ </button>
+ <button class="btn btn-light"
+ type="button"
+ *ngIf="!editing"
+ ngbTooltip="This profile can't be deleted as it is in use."
+ i18n-ngbTooltip
+ triggers="manual"
+ #ecpDeletionBtn="ngbTooltip"
+ (click)="deleteErasureCodeProfile()">
+ <i [ngClass]="[icons.trash]"
+ aria-hidden="true"></i>
+ </button>
</div>
<span class="form-text text-muted"
id="ecp-info-block"
*ngIf="data.erasureInfo && form.getValue('erasureProfile')">
- <ul ngbNav
- #ecpInfoTabs="ngbNav"
- class="nav-tabs">
- <li ngbNavItem="ecp-info">
+ <nav ngbNav
+ #ecpInfoTabs="ngbNav"
+ class="nav-tabs">
+ <ng-container ngbNavItem="ecp-info">
<a ngbNavLink
i18n>Profile</a>
<ng-template ngbNavContent>
[autoReload]="false">
</cd-table-key-value>
</ng-template>
- </li>
- <li ngbNavItem="used-by-pools">
+ </ng-container>
+ <ng-container ngbNavItem="used-by-pools">
<a ngbNavLink
i18n>Used by pools</a>
<ng-template ngbNavContent>
</li>
</ul>
</ng-template>
- </li>
- </ul>
+ </ng-container>
+ </nav>
<div [ngbNavOutlet]="ecpInfoTabs"></div>
</span>
</ng-template>
<div *ngIf="current.rules.length > 0; else noRules">
<div class="input-group">
- <select class="form-control custom-select"
+ <select class="form-select"
id="crushRule"
formControlName="crushRule"
name="crushSet">
{{ rule.rule_name }}
</option>
</select>
- <span class="input-group-append">
- <button class="btn btn-light"
- [ngClass]="{'active': data.crushInfo}"
- id="crush-info-button"
- type="button"
- ngbTooltip="Placement and
- replication strategies or distribution policies that allow to
- specify how CRUSH places data replicas."
- i18n-ngbTooltip
- (click)="data.crushInfo = !data.crushInfo">
- <i [ngClass]="[icons.questionCircle]"
- aria-hidden="true"></i>
- </button>
- <button class="btn btn-light"
- type="button"
- *ngIf="isReplicated && !editing"
- (click)="addCrushRule()">
- <i [ngClass]="[icons.add]"
- aria-hidden="true"></i>
- </button>
- <button class="btn btn-light"
- *ngIf="isReplicated && !editing"
- type="button"
- ngbTooltip="This rule can't be deleted as it is in use."
- i18n-ngbTooltip
- triggers="manual"
- #crushDeletionBtn="ngbTooltip"
- (click)="deleteCrushRule()">
- <i [ngClass]="[icons.trash]"
- aria-hidden="true"></i>
- </button>
- </span>
+ <button class="btn btn-light"
+ [ngClass]="{'active': data.crushInfo}"
+ id="crush-info-button"
+ type="button"
+ ngbTooltip="Placement and
+ replication strategies or distribution policies that allow to
+ specify how CRUSH places data replicas."
+ i18n-ngbTooltip
+ (click)="data.crushInfo = !data.crushInfo">
+ <i [ngClass]="[icons.questionCircle]"
+ aria-hidden="true"></i>
+ </button>
+ <button class="btn btn-light"
+ type="button"
+ *ngIf="isReplicated && !editing"
+ (click)="addCrushRule()">
+ <i [ngClass]="[icons.add]"
+ aria-hidden="true"></i>
+ </button>
+ <button class="btn btn-light"
+ *ngIf="isReplicated && !editing"
+ type="button"
+ ngbTooltip="This rule can't be deleted as it is in use."
+ i18n-ngbTooltip
+ triggers="manual"
+ #crushDeletionBtn="ngbTooltip"
+ (click)="deleteCrushRule()">
+ <i [ngClass]="[icons.trash]"
+ aria-hidden="true"></i>
+ </button>
</div>
<div class="form-text text-muted"
id="crush-info-block"
*ngIf="data.crushInfo && form.getValue('crushRule')">
- <ul ngbNav
- #crushInfoTabs="ngbNav"
- class="nav-tabs">
- <li ngbNavItem="crush-rule-info">
+ <nav ngbNav
+ #crushInfoTabs="ngbNav"
+ class="nav-tabs">
+ <ng-container ngbNavItem="crush-rule-info">
<a ngbNavLink
i18n>Crush rule</a>
<ng-template ngbNavContent>
<cd-table-key-value [renderObjects]="false"
- [hideKeys]="['steps', 'ruleset', 'type', 'rule_name']"
+ [hideKeys]="['steps', 'type', 'rule_name']"
[data]="form.getValue('crushRule')"
[autoReload]="false">
</cd-table-key-value>
</ng-template>
- </li>
- <li ngbNavItem="crush-rule-steps">
+ </ng-container>
+ <ng-container ngbNavItem="crush-rule-steps">
<a ngbNavLink
i18n>Crush steps</a>
<ng-template ngbNavContent>
</li>
</ol>
</ng-template>
- </li>
- <li ngbNavItem="used-by-pools">
+ </ng-container>
+ <ng-container ngbNavItem="used-by-pools">
<a ngbNavLink
i18n>Used by pools</a>
<ng-template ngbNavContent>
</li>
</ul>
</ng-template>
- </li>
- </ul>
+ </ng-container>
+ </nav>
<div [ngbNavOutlet]="crushInfoTabs"></div>
</div>
class="cd-col-form-label"
for="mode">Mode</label>
<div class="cd-col-form-input">
- <select class="form-control custom-select"
+ <select class="form-select"
id="mode"
name="mode"
formControlName="mode">
class="cd-col-form-label"
for="algorithm">Algorithm</label>
<div class="cd-col-form-input">
- <select class="form-control custom-select"
+ <select class="form-select"
id="algorithm"
name="algorithm"
formControlName="algorithm">