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

   1 <cd-alert-panel type="error"
   2                 *ngIf="loadingError"
   3                 i18n>Failed to load data.</cd-alert-panel>
   4
   5 <div class="dataTables_wrapper">
   6
   7   <div *ngIf="onlyActionHeader"
   8        class="dataTables_header clearfix">
   9     <div class="cd-datatable-actions">
  10       <ng-content select=".only-table-actions"></ng-content>
  11     </div>
  12   </div>
  13   <div class="dataTables_header clearfix"
  14        *ngIf="toolHeader">
  15     <!-- actions -->
  16     <div class="cd-datatable-actions">
  17       <ng-content select=".table-actions"></ng-content>
  18     </div>
  19     <!-- end actions -->
  20
  21     <!-- filters -->
  22     <ng-content select=".table-filters"></ng-content>
  23     <!-- end filters -->
  24
  25     <!-- column filters -->
  26     <div *ngIf="columnFilters.length !== 0"
  27          class="btn-group widget-toolbar">
  28       <div dropdown
  29            class="btn-group tc_filter_name">
  30         <a dropdownToggle
  31            class="btn btn-light dropdown-toggle"
  32            data-toggle="dropdown">
  33           <i [ngClass]="[icons.large, icons.filter]"></i>
  34           {{ selectedFilter.column.name }}
  35         </a>
  36         <ul *dropdownMenu
  37             class="dropdown-menu dropdown-menu-right px-1"
  38             role="menu">
  39           <li *ngFor="let filter of columnFilters"
  40               role="menuitem">
  41             <a href=""
  42                class="dropdown-item"
  43                (click)="onSelectFilter(filter); false">{{ filter.column.name }}</a>
  44           </li>
  45         </ul>
  46       </div>
  47       <div dropdown
  48            class="btn-group tc_filter_option">
  49         <a dropdownToggle
  50            class="btn btn-light dropdown-toggle"
  51            [class.disabled]="selectedFilter.options.length === 0"
  52            data-toggle="dropdown">
  53            {{ selectedFilter.value ? selectedFilter.value.formatted: 'Any' }}
  54         </a>
  55         <ul *dropdownMenu
  56             class="dropdown-menu dropdown-menu-right px-1"
  57             role="menu">
  58           <li *ngFor="let option of selectedFilter.options"
  59               role="menuitem">
  60             <a href=""
  61                class="dropdown-item"
  62                (click)="onChangeFilter(selectedFilter, option); false">{{ option.formatted }}
  63               <i *ngIf="selectedFilter.value !== undefined && (selectedFilter.value.raw === option.raw)"
  64                  [ngClass]="[icons.check]"></i>
  65             </a>
  66           </li>
  67         </ul>
  68       </div>
  69     </div>
  70     <!-- end column filters -->
  71
  72     <!-- search -->
  73     <div class="input-group search"
  74          *ngIf="searchField">
  75       <span class="input-group-prepend">
  76         <span class="input-group-text">
  77         <i [ngClass]="[icons.search]"></i>
  78         </span>
  79       </span>
  80       <input class="form-control"
  81              type="text"
  82              [(ngModel)]="search"
  83              (keyup)="updateFilter()">
  84       <div class="input-group-append">
  85         <button type="button"
  86                 class="btn btn-light"
  87                 (click)="onClearSearch()">
  88           <i class="icon-prepend {{ icons.destroy }}"></i>
  89         </button>
  90       </div>
  91     </div>
  92     <!-- end search -->
  93
  94     <!-- pagination limit -->
  95     <div class="input-group dataTables_paginate"
  96          *ngIf="limit">
  97       <input class="form-control"
  98              type="number"
  99              min="1"
 100              max="9999"
 101              [value]="userConfig.limit"
 102              (click)="setLimit($event)"
 103              (keyup)="setLimit($event)"
 104              (blur)="setLimit($event)">
 105     </div>
 106     <!-- end pagination limit-->
 107
 108     <!-- show hide columns -->
 109     <div class="widget-toolbar">
 110       <div dropdown
 111            [insideClick]="true"
 112            class="dropdown tc_menuitem tc_menuitem_cluster">
 113         <a dropdownToggle
 114            class="btn btn-light dropdown-toggle tc_columnBtn"
 115            data-toggle="dropdown">
 116           <i [ngClass]="[icons.large, icons.table]"></i>
 117         </a>
 118         <ul *dropdownMenu
 119             class="dropdown-menu px-3">
 120           <ng-container *ngFor="let column of columns">
 121             <li *ngIf="column.name !== ''" >
 122               <div class="custom-control custom-checkbox">
 123                 <input class="custom-control-input"
 124                        type="checkbox"
 125                        (change)="toggleColumn($event)"
 126                        [name]="column.prop"
 127                        [id]="column.prop"
 128                        [checked]="!column.isHidden">
 129                 <label class="custom-control-label"
 130                        [for]="column.prop">{{ column.name }}</label>
 131               </div>
 132             </li>
 133           </ng-container>
 134         </ul>
 135       </div>
 136     </div>
 137     <!-- end show hide columns -->
 138
 139     <!-- refresh button -->
 140     <div class="widget-toolbar tc_refreshBtn"
 141          *ngIf="fetchData.observers.length > 0">
 142
 143       <button type="button"
 144               class="btn btn-light"
 145               (click)="refreshBtn()">
 146         <i [ngClass]="[icons.large, icons.refresh]"
 147            [class.fa-spin]="updating || loadingIndicator"></i>
 148       </button>
 149     </div>
 150     <!-- end refresh button -->
 151   </div>
 152   <div class="dataTables_header clearfix"
 153        *ngIf="toolHeader && columnFiltered">
 154     <!-- filter chips for column filters -->
 155     <div class="filter-chips">
 156       <span *ngFor="let filter of columnFilters">
 157         <span *ngIf="filter.value"
 158               class="badge badge-info mr-2">
 159           <span class="mr-2">{{ filter.column.name }}: {{ filter.value.formatted }}</span>
 160           <a class="badge-remove"
 161              (click)="onChangeFilter(filter); false">
 162             <i [ngClass]="[icons.destroy]"
 163                aria-hidden="true"></i>
 164           </a>
 165         </span>
 166       </span>
 167       <a class="tc_clearSelections"
 168          href=""
 169          (click)="onClearFilters(); false">
 170         <ng-container i18n>Clear filters</ng-container>
 171       </a>
 172     </div>
 173     <!-- end filter chips for column filters -->
 174   </div>
 175   <ngx-datatable #table
 176                  class="bootstrap cd-datatable"
 177                  [cssClasses]="paginationClasses"
 178                  [selectionType]="selectionType"
 179                  [selected]="selection.selected"
 180                  (select)="onSelect($event)"
 181                  [sorts]="userConfig.sorts"
 182                  (sort)="changeSorting($event)"
 183                  [columns]="tableColumns"
 184                  [columnMode]="columnMode"
 185                  [rows]="rows"
 186                  [rowClass]="getRowClass()"
 187                  [headerHeight]="header ? 'auto' : 0"
 188                  [footerHeight]="footer ? 'auto' : 0"
 189                  [limit]="userConfig.limit > 0 ? userConfig.limit : undefined"
 190                  [loadingIndicator]="loadingIndicator"
 191                  [rowIdentity]="rowIdentity()"
 192                  [rowHeight]="'auto'">
 193
 194     <!-- Row Detail Template -->
 195     <ngx-datatable-row-detail rowHeight="auto"
 196                               #detailRow>
 197       <ng-template let-row="row"
 198                    let-expanded="expanded"
 199                    ngx-datatable-row-detail-template>
 200         <!-- Table Details -->
 201         <ng-content select="[cdTableDetail]"></ng-content>
 202       </ng-template>
 203     </ngx-datatable-row-detail>
 204
 205     <ngx-datatable-footer>
 206       <ng-template ngx-datatable-footer-template
 207                    let-rowCount="rowCount"
 208                    let-pageSize="pageSize"
 209                    let-selectedCount="selectedCount"
 210                    let-curPage="curPage"
 211                    let-offset="offset"
 212                    let-isVisible="isVisible">
 213         <div class="page-count">
 214           <span *ngIf="selectionType">
 215             {{ selectedCount }} <ng-container i18n="X selected">selected</ng-container> /
 216           </span>
 217           <span *ngIf="rowCount != data?.length">
 218             {{ rowCount }} <ng-container i18n="X found">found</ng-container> /
 219           </span>
 220           <span>
 221             {{ data?.length || 0 }} <ng-container i18n="X total">total</ng-container>
 222           </span>
 223         </div>
 224         <datatable-pager [pagerLeftArrowIcon]="paginationClasses.pagerLeftArrow"
 225                          [pagerRightArrowIcon]="paginationClasses.pagerRightArrow"
 226                          [pagerPreviousIcon]="paginationClasses.pagerPrevious"
 227                          [pagerNextIcon]="paginationClasses.pagerNext"
 228                          [page]="curPage"
 229                          [size]="pageSize"
 230                          [count]="rowCount"
 231                          [hidden]="!((rowCount / pageSize) > 1)"
 232                          (change)="table.onFooterPage($event)">
 233         </datatable-pager>
 234       </ng-template>
 235     </ngx-datatable-footer>
 236   </ngx-datatable>
 237 </div>
 238
 239 <!-- cell templates that can be accessed from outside -->
 240 <ng-template #tableCellBoldTpl
 241              let-value="value">
 242   <strong>{{ value }}</strong>
 243 </ng-template>
 244
 245 <ng-template #sparklineTpl
 246              let-row="row"
 247              let-value="value">
 248   <cd-sparkline [data]="value"
 249                 [isBinary]="row.cdIsBinary"></cd-sparkline>
 250 </ng-template>
 251
 252 <ng-template #routerLinkTpl
 253              let-row="row"
 254              let-value="value">
 255   <a [routerLink]="[row.cdLink]"
 256      [queryParams]="row.cdParams">{{ value }}</a>
 257 </ng-template>
 258
 259 <ng-template #checkIconTpl
 260              let-value="value">
 261   <i [ngClass]="[icons.check]"
 262      [hidden]="!(value | boolean)"></i>
 263 </ng-template>
 264
 265 <ng-template #perSecondTpl
 266              let-row="row"
 267              let-value="value">
 268   {{ value }} /s
 269 </ng-template>
 270
 271 <ng-template #executingTpl
 272              let-row="row"
 273              let-value="value">
 274   <i [ngClass]="[icons.spinner, icons.spin]"
 275      *ngIf="row.cdExecuting"></i>
 276   {{ value }}
 277   <span *ngIf="row.cdExecuting"
 278         class="text-muted italic">({{ row.cdExecuting }})</span>
 279 </ng-template>
 280
 281 <ng-template #classAddingTpl
 282              let-value="value">
 283   <span class="{{useCustomClass(value)}}">{{ value }}</span>
 284 </ng-template>
 285
 286 <ng-template #badgeTpl
 287              let-column="column"
 288              let-value="value">
 289   <span *ngFor="let item of (value | array); last as last">
 290     <span class="badge"
 291           [ngClass]="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.class) ? column.customTemplateConfig.map[item].class : (column?.customTemplateConfig?.class ? column.customTemplateConfig.class : 'badge-primary')"
 292           *ngIf="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item">
 293       {{ (column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item }}
 294     </span>
 295     <span *ngIf="!last">&nbsp;</span>
 296   </span>
 297 </ng-template>
 298
 299 <ng-template #mapTpl
 300              let-column="column"
 301              let-value="value">
 302   <span>{{ value | map:column?.customTemplateConfig }}</span>
 303 </ng-template>
 304
 305 <ng-template #truncateTpl
 306              let-column="column"
 307              let-value="value">
 308   <span data-toggle="tooltip"
 309         [title]="value">{{ value | truncate:column?.customTemplateConfig?.length:column?.customTemplateConfig?.omission }}</span>
 310 </ng-template>
 311
 312 <ng-template #rowDetailsTpl
 313              let-row="row"
 314              let-isExpanded="expanded"
 315              ngx-datatable-cell-template>
 316   <a href="javascript:void(0)"
 317      [class.expand-collapse-icon-right]="!isExpanded"
 318      [class.expand-collapse-icon-down]="isExpanded"
 319      class="expand-collapse-icon tc_expand-collapse"
 320      title="Expand/Collapse Row"
 321      i18n-title
 322      (click)="toggleExpandRow(row, isExpanded)">
 323   </a>
 324 </ng-template>