import ceph quincy 17.2.6

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / pool / pool-form / pool-form.component.html

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
index 2df480edab26af314ef8bdcf3f11204304ead428..b159f12530d04d28383d7fc82414c03ff0140aad 100644 (file)
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
@@ -45,7 +45,7 @@
                  for="poolType"
                  i18n>Pool type</label>
           <div class="cd-col-form-input">
-            <select class="form-control"
+            <select class="form-select"
                     id="poolType"
                     formControlName="poolType"
                     name="poolType">
@@ -69,7 +69,7 @@
                    class="cd-col-form-label"
                    for="pgAutoscaleMode">PG Autoscale</label>
             <div class="cd-col-form-input">
-              <select class="form-control"
+              <select class="form-select"
                       id="pgAutoscaleMode"
                       name="pgAutoscaleMode"
                       formControlName="pgAutoscaleMode">
@@ -203,8 +203,8 @@
                    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"
+              <div class="input-group mb-1">
+                <select class="form-select"
                         id="erasureProfile"
                         name="erasureProfile"
                         formControlName="erasureProfile">
@@ -222,42 +222,40 @@
                     {{ 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>
@@ -267,8 +265,8 @@
                                           [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>
@@ -281,8 +279,8 @@
                         </li>
                       </ul>
                     </ng-template>
-                  </li>
-                </ul>
+                  </ng-container>
+                </nav>
 
                 <div [ngbNavOutlet]="ecpInfoTabs"></div>
               </span>
@@ -313,7 +311,7 @@
               </ng-template>
               <div *ngIf="current.rules.length > 0; else noRules">
                 <div class="input-group">
-                  <select class="form-control"
+                  <select class="form-select"
                           id="crushRule"
                           formControlName="crushRule"
                           name="crushSet">
@@ -324,47 +322,45 @@
                       {{ 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>
@@ -374,8 +370,8 @@
                                             [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>
@@ -385,8 +381,8 @@
                           </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>
@@ -400,8 +396,8 @@
                           </li>
                         </ul>
                       </ng-template>
-                    </li>
-                  </ul>
+                    </ng-container>
+                  </nav>
 
                   <div [ngbNavOutlet]="crushInfoTabs"></div>
                 </div>
@@ -429,7 +425,7 @@
                    class="cd-col-form-label"
                    for="mode">Mode</label>
             <div class="cd-col-form-input">
-              <select class="form-control"
+              <select class="form-select"
                       id="mode"
                       name="mode"
                       formControlName="mode">
@@ -447,7 +443,7 @@
                      class="cd-col-form-label"
                      for="algorithm">Algorithm</label>
               <div class="cd-col-form-input">
-                <select class="form-control"
+                <select class="form-select"
                         id="algorithm"
                         name="algorithm"
                         formControlName="algorithm">