-<cd-loading-panel *ngIf="!(info && ecProfiles)"
- i18n>Loading...</cd-loading-panel>
-
-<div class="cd-col-form">
+<div class="cd-col-form"
+ *cdFormLoading="loading">
<form name="form"
- *ngIf="info && ecProfiles"
#formDir="ngForm"
[formGroup]="form"
novalidate>
<button class="btn btn-light"
type="button"
*ngIf="!editing"
- tooltip="This profile can't be deleted as it is in use."
- i18n-tooltip
- triggers=""
- #ecpDeletionBtn="bs-tooltip"
+ 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>
<span class="form-text text-muted"
id="ecp-info-block"
*ngIf="data.erasureInfo && form.getValue('erasureProfile')">
- <tabset #ecpInfoTabs>
- <tab i18n-heading
- heading="Profile"
- class="ecp-info">
- <cd-table-key-value [renderObjects]="true"
- [hideKeys]="['name']"
- [data]="form.getValue('erasureProfile')"
- [autoReload]="false">
- </cd-table-key-value>
- </tab>
- <tab i18n-heading
- heading="Used by pools"
- class="used-by-pools">
- <ng-template #ecpIsNotUsed>
- <span i18n>Profile is not in use.</span>
+ <ul ngbNav
+ #ecpInfoTabs="ngbNav"
+ class="nav-tabs">
+ <li ngbNavItem="ecp-info">
+ <a ngbNavLink
+ i18n>Profile</a>
+ <ng-template ngbNavContent>
+ <cd-table-key-value [renderObjects]="true"
+ [hideKeys]="['name']"
+ [data]="form.getValue('erasureProfile')"
+ [autoReload]="false">
+ </cd-table-key-value>
+ </ng-template>
+ </li>
+ <li ngbNavItem="used-by-pools">
+ <a ngbNavLink
+ i18n>Used by pools</a>
+ <ng-template ngbNavContent>
+ <ng-template #ecpIsNotUsed>
+ <span i18n>Profile is not in use.</span>
+ </ng-template>
+ <ul *ngIf="ecpUsage; else ecpIsNotUsed">
+ <li *ngFor="let pool of ecpUsage">
+ {{ pool }}
+ </li>
+ </ul>
</ng-template>
- <ul *ngIf="ecpUsage; else ecpIsNotUsed">
- <li *ngFor="let pool of ecpUsage">
- {{ pool }}
- </li>
- </ul>
- </tab>
- </tabset>
+ </li>
+ </ul>
+
+ <div [ngbNavOutlet]="ecpInfoTabs"></div>
</span>
</div>
</div>
[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 class="btn btn-light"
*ngIf="isReplicated && !editing"
type="button"
- tooltip="This rule can't be deleted as it is in use."
- i18n-tooltip
- triggers=""
- #crushDeletionBtn="bs-tooltip"
+ 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>
</div>
- <span class="form-text text-muted"
- id="crush-info-block"
- *ngIf="data.crushInfo && form.getValue('crushRule')">
- <tabset #crushInfoTabs>
- <tab i18n-heading
- heading="Crush rule"
- class="crush-rule-info">
- <cd-table-key-value [renderObjects]="false"
- [hideKeys]="['steps', 'ruleset', 'type', 'rule_name']"
- [data]="form.getValue('crushRule')"
- [autoReload]="false">
- </cd-table-key-value>
- </tab>
- <tab i18n-heading
- heading="Crush steps"
- class="crush-rule-steps">
- <ol>
- <li *ngFor="let step of form.get('crushRule').value.steps">
- {{ describeCrushStep(step) }}
- </li>
- </ol>
- </tab>
- <tab i18n-heading
- heading="Used by pools"
- class="used-by-pools">
- <ng-template #ruleIsNotUsed>
- <span i18n>Rule is not in use.</span>
+
+ <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">
+ <a ngbNavLink
+ i18n>Crush rule</a>
+ <ng-template ngbNavContent>
+ <cd-table-key-value [renderObjects]="false"
+ [hideKeys]="['steps', 'ruleset', 'type', 'rule_name']"
+ [data]="form.getValue('crushRule')"
+ [autoReload]="false">
+ </cd-table-key-value>
</ng-template>
- <ul *ngIf="crushUsage; else ruleIsNotUsed">
- <li *ngFor="let pool of crushUsage">
- {{ pool }}
- </li>
- </ul>
- </tab>
- </tabset>
- </span>
+ </li>
+ <li ngbNavItem="crush-rule-steps">
+ <a ngbNavLink
+ i18n>Crush steps</a>
+ <ng-template ngbNavContent>
+ <ol>
+ <li *ngFor="let step of form.get('crushRule').value.steps">
+ {{ describeCrushStep(step) }}
+ </li>
+ </ol>
+ </ng-template>
+ </li>
+ <li ngbNavItem="used-by-pools">
+ <a ngbNavLink
+ i18n>Used by pools</a>
+ <ng-template ngbNavContent>
+
+ <ng-template #ruleIsNotUsed>
+ <span i18n>Rule is not in use.</span>
+ </ng-template>
+ <ul *ngIf="crushUsage; else ruleIsNotUsed">
+ <li *ngFor="let pool of crushUsage">
+ {{ pool }}
+ </li>
+ </ul>
+ </ng-template>
+ </li>
+ </ul>
+
+ <div [ngbNavOutlet]="crushInfoTabs"></div>
+ </div>
<span class="invalid-feedback"
*ngIf="form.showError('crushRule', formDir, 'required')"
i18n>This field is required!</span>
</div>
</div>
<div class="card-footer">
- <div class="button-group text-right">
- <cd-submit-button [form]="formDir"
- i18n="form action button|Example: Create Pool@@formActionButton"
- (submitAction)="submit()">{{ action | titlecase }} {{ resource | upperFirst }}
- </cd-submit-button>
- <cd-back-button></cd-back-button>
- </div>
+ <cd-form-button-panel (submitActionEvent)="submit()"
+ [form]="form"
+ [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+ wrappingClass="text-right"></cd-form-button-panel>
</div>
</div>
projects / ceph.git / blobdiff