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                  [count]="count"
 176                  [externalPaging]="serverSide"
 177                  [externalSorting]="serverSide"
 178                  [limit]="userConfig.limit > 0 ? userConfig.limit : undefined"
 179                  [offset]="userConfig.offset >= 0 ? userConfig.offset : 0"
 180                  (page)="changePage($event)"
 181                  [loadingIndicator]="loadingIndicator"
 182                  [rowIdentity]="rowIdentity()"
 183                  [rowHeight]="'auto'">
 184
 185     <!-- Row Detail Template -->
 186     <ngx-datatable-row-detail rowHeight="auto"
 187                               #detailRow>
 188       <ng-template let-row="row"
 189                    let-expanded="expanded"
 190                    ngx-datatable-row-detail-template>
 191         <!-- Table Details -->
 192         <ng-content select="[cdTableDetail]"></ng-content>
 193       </ng-template>
 194     </ngx-datatable-row-detail>
 195
 196     <ngx-datatable-footer>
 197       <ng-template ngx-datatable-footer-template
 198                    let-rowCount="rowCount"
 199                    let-pageSize="pageSize"
 200                    let-selectedCount="selectedCount"
 201                    let-curPage="curPage"
 202                    let-offset="offset"
 203                    let-isVisible="isVisible">
 204         <div class="page-count">
 205           <span *ngIf="selectionType">
 206             {{ selectedCount }} <ng-container i18n="X selected">selected</ng-container> /
 207           </span>
 208
 209           <!-- rowCount might have different semantics with or without serverSide.
 210             We treat serverSide (backend-driven tables) as a specific case.
 211           -->
 212           <span *ngIf="!serverSide else serverSideTpl">
 213             <span *ngIf="rowCount != data?.length">
 214               {{ rowCount }} <ng-container i18n="X found">found</ng-container> /
 215             </span>
 216             {{ data?.length || 0 }} <ng-container i18n="X total">total</ng-container>
 217           </span>
 218
 219           <ng-template #serverSideTpl>
 220             {{ data?.length || 0 }} <ng-container i18n="X found">found</ng-container> /
 221             {{ rowCount }} <ng-container i18n="X total">total</ng-container>
 222           </ng-template>
 223         </div>
 224         <datatable-pager [pagerLeftArrowIcon]="paginationClasses.pagerPrevious"
 225                          [pagerRightArrowIcon]="paginationClasses.pagerNext"
 226                          [pagerPreviousIcon]="paginationClasses.pagerLeftArrow"
 227                          [pagerNextIcon]="paginationClasses.pagerRightArrow"
 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 | dimless }} /s
 269 </ng-template>
 270
 271 <ng-template #executingTpl
 272              let-column="column"
 273              let-row="row"
 274              let-value="value">
 275   <i [ngClass]="[icons.spinner, icons.spin]"
 276      *ngIf="row.cdExecuting"></i>
 277   <span [ngClass]="column?.customTemplateConfig?.valueClass">
 278     {{ value }}
 279   </span>
 280   <span *ngIf="row.cdExecuting"
 281         [ngClass]="column?.customTemplateConfig?.executingClass ? column.customTemplateConfig.executingClass : 'text-muted italic'">({{ row.cdExecuting }})</span>
 282 </ng-template>
 283
 284 <ng-template #classAddingTpl
 285              let-value="value">
 286   <span class="{{ value | pipeFunction:useCustomClass:this }}">{{ value }}</span>
 287 </ng-template>
 288
 289 <ng-template #badgeTpl
 290              let-column="column"
 291              let-value="value">
 292   <span *ngFor="let item of (value | array); last as last">
 293     <span class="badge"
 294           [ngClass]="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.class) ? column.customTemplateConfig.map[item].class : (column?.customTemplateConfig?.class ? column.customTemplateConfig.class : 'badge-primary')"
 295           *ngIf="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item">
 296       {{ (column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item }}
 297     </span>
 298     <span *ngIf="!last">&nbsp;</span>
 299   </span>
 300 </ng-template>
 301
 302 <ng-template #mapTpl
 303              let-column="column"
 304              let-value="value">
 305   <span>{{ value | map:column?.customTemplateConfig }}</span>
 306 </ng-template>
 307
 308 <ng-template #truncateTpl
 309              let-column="column"
 310              let-value="value">
 311   <span data-toggle="tooltip"
 312         [title]="value">{{ value | truncate:column?.customTemplateConfig?.length:column?.customTemplateConfig?.omission }}</span>
 313 </ng-template>
 314
 315 <ng-template #rowDetailsTpl
 316              let-row="row"
 317              let-isExpanded="expanded"
 318              ngx-datatable-cell-template>
 319   <a href="javascript:void(0)"
 320      [class.expand-collapse-icon-right]="!isExpanded"
 321      [class.expand-collapse-icon-down]="isExpanded"
 322      class="expand-collapse-icon tc_expand-collapse"
 323      title="Expand/Collapse Row"
 324      i18n-title
 325      (click)="toggleExpandRow(row, isExpanded, $event)">
 326   </a>
 327 </ng-template>
 328
 329 <ng-template #timeAgoTpl
 330              let-value="value">
 331   <span data-toggle="tooltip"
 332         [title]="value | cdDate">{{ value | relativeDate }}</span>
 333 </ng-template>