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

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