import ceph quincy 17.2.6

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / shared / datatable / table / table.component.html

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index d7dd7e5c703ffbbf4b8a69e13fe82200a351cea2..fc7b9f6e54ea291b86d3410521a8621dc6a6a1a9 100644 (file)
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -21,7 +21,8 @@
            placement="bottom-right"
            class="tc_filter_name">
         <button ngbDropdownToggle
-                class="btn btn-light">
+                class="btn btn-light"
+                title="Filter">
           <i [ngClass]="[icons.large, icons.filter]"></i>
           {{ selectedFilter.column.name }}
         </button>
@@ -58,29 +59,28 @@
     <!-- search -->
     <div class="input-group search"
          *ngIf="searchField">
-      <span class="input-group-prepend">
-        <span class="input-group-text">
-          <i [ngClass]="[icons.search]"></i>
-        </span>
+      <span class="input-group-text">
+        <i [ngClass]="[icons.search]"></i>
       </span>
-      <input class="form-control"
+      <input aria-label="search"
+             class="form-control"
              type="text"
              [(ngModel)]="search"
              (keyup)="updateFilter()">
-      <div class="input-group-append">
-        <button type="button"
-                class="btn btn-light"
-                (click)="onClearSearch()">
-          <i class="icon-prepend {{ icons.destroy }}"></i>
-        </button>
-      </div>
+      <button type="button"
+              class="btn btn-light"
+              title="Clear"
+              (click)="onClearSearch()">
+        <i class="icon-prepend {{ icons.destroy }}"></i>
+      </button>
     </div>
     <!-- end search -->
 
     <!-- pagination limit -->
     <div class="input-group dataTables_paginate"
          *ngIf="limit">
-      <input class="form-control"
+      <input aria-label="table pagination"
+             class="form-control"
              type="number"
              min="1"
              max="9999"
@@ -97,7 +97,8 @@
            autoClose="outside"
            class="tc_menuitem">
         <button ngbDropdownToggle
-                class="btn btn-light tc_columnBtn">
+                class="btn btn-light tc_columnBtn"
+                title="toggle columns">
           <i [ngClass]="[icons.large, icons.table]"></i>
         </button>
         <div ngbDropdownMenu>
@@ -109,10 +110,10 @@
                 <input class="custom-control-input"
                        type="checkbox"
                        [name]="column.prop"
-                       [id]="column.prop"
+                       id="{{ column.prop }}{{ tableName }}"
                        [checked]="!column.isHidden">
                 <label class="custom-control-label"
-                       [for]="column.prop">{{ column.name }}</label>
+                       for="{{ column.prop }}{{ tableName }}">{{ column.name }}</label>
               </div>
             </button>
           </ng-container>
@@ -128,7 +129,8 @@
       <button type="button"
               [class]="'btn btn-' + status.type"
               [ngbTooltip]="status.msg"
-              (click)="refreshBtn()">
+              (click)="refreshBtn()"
+              title="Refresh">
         <i [ngClass]="[icons.large, icons.refresh]"
            [class.fa-spin]="updating || loadingIndicator"></i>
       </button>
@@ -141,8 +143,8 @@
     <div class="filter-chips">
       <span *ngFor="let filter of columnFilters">
         <span *ngIf="filter.value"
-              class="badge badge-info mr-2">
-          <span class="mr-2">{{ filter.column.name }}: {{ filter.value.formatted }}</span>
+              class="badge badge-info me-2">
+          <span class="me-2">{{ filter.column.name }}: {{ filter.value.formatted }}</span>
           <a class="badge-remove"
              (click)="onChangeFilter(filter); false">
             <i [ngClass]="[icons.destroy]"
@@ -182,6 +184,17 @@
                  [rowIdentity]="rowIdentity()"
                  [rowHeight]="'auto'">
 
+    <!-- Row Selection Template-->
+    <ng-template #rowSelectionTpl
+                 let-value="value"
+                 let-isSelected="isSelected"
+                 ngx-datatable-cell-template>
+      <input type="checkbox"
+             [attr.aria-label]="isSelected ? 'selected' : 'select'"
+             [checked]="isSelected"
+             class="cd-datatable-checkbox" />
+    </ng-template>
+
     <!-- Row Detail Template -->
     <ngx-datatable-row-detail rowHeight="auto"
                               #detailRow>
@@ -221,16 +234,11 @@
             {{ rowCount }} <ng-container i18n="X total">total</ng-container>
           </ng-template>
         </div>
-        <datatable-pager [pagerLeftArrowIcon]="paginationClasses.pagerPrevious"
-                         [pagerRightArrowIcon]="paginationClasses.pagerNext"
-                         [pagerPreviousIcon]="paginationClasses.pagerLeftArrow"
-                         [pagerNextIcon]="paginationClasses.pagerRightArrow"
-                         [page]="curPage"
-                         [size]="pageSize"
-                         [count]="rowCount"
-                         [hidden]="!((rowCount / pageSize) > 1)"
-                         (change)="table.onFooterPage($event)">
-        </datatable-pager>
+        <cd-table-pagination [page]="curPage"
+                             [size]="pageSize"
+                             [count]="rowCount"
+                             [hidden]="!((rowCount / pageSize) > 1)"
+                             (pageChange)="table.onFooterPage($event)"></cd-table-pagination>
       </ng-template>
     </ngx-datatable-footer>
   </ngx-datatable>