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 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 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       <input class="form-control"
  97              type="number"
  98              min="1"
  99              max="9999"
 100              [value]="userConfig.limit"
 101              (click)="setLimit($event)"
 102              (keyup)="setLimit($event)"
 103              (blur)="setLimit($event)">
 104     </div>
 105     <!-- end pagination limit-->
 106
 107     <!-- show hide columns -->
 108     <div class="widget-toolbar">
 109       <div dropdown
 110            [autoClose]="false"
 111            class="dropdown tc_menuitem tc_menuitem_cluster">
 112         <a dropdownToggle
 113            class="btn btn-light dropdown-toggle tc_columnBtn"
 114            data-toggle="dropdown">
 115           <i [ngClass]="[icons.large, icons.table]"></i>
 116         </a>
 117         <ul *dropdownMenu
 118             class="dropdown-menu px-3">
 119           <ng-container *ngFor="let column of columns">
 120             <li *ngIf="column.name !== ''" >
 121               <div class="custom-control custom-checkbox">
 122                 <input class="custom-control-input"
 123                        type="checkbox"
 124                        (change)="toggleColumn($event)"
 125                        [name]="column.prop"
 126                        [id]="column.prop"
 127                        [checked]="!column.isHidden">
 128                 <label class="custom-control-label"
 129                        [for]="column.prop">{{ column.name }}</label>
 130               </div>
 131             </li>
 132           </ng-container>
 133         </ul>
 134       </div>
 135     </div>
 136     <!-- end show hide columns -->
 137
 138     <!-- refresh button -->
 139     <div class="widget-toolbar tc_refreshBtn"
 140          *ngIf="fetchData.observers.length > 0">
 141
 142       <button type="button"
 143               class="btn btn-light"
 144               (click)="refreshBtn()">
 145         <i [ngClass]="[icons.large, icons.refresh]"
 146            [class.fa-spin]="updating || loadingIndicator"></i>
 147       </button>
 148     </div>
 149     <!-- end refresh button -->
 150   </div>
 151   <div class="dataTables_header clearfix"
 152        *ngIf="toolHeader && columnFiltered">
 153     <!-- filter chips for column filters -->
 154     <div class="filter-chips">
 155       <span *ngFor="let filter of columnFilters">
 156         <span *ngIf="filter.value"
 157               class="badge badge-info mr-2">
 158           <span class="mr-2">{{ filter.column.name }}: {{ filter.value.formatted }}</span>
 159           <a class="badge-remove"
 160              (click)="onChangeFilter(filter); false">
 161             <i [ngClass]="[icons.destroy]"
 162                aria-hidden="true"></i>
 163           </a>
 164         </span>
 165       </span>
 166       <a class="tc_clearSelections"
 167          href=""
 168          (click)="onClearFilters(); false">
 169         <ng-container i18n>Clear filters</ng-container>
 170       </a>
 171     </div>
 172     <!-- end filter chips for column filters -->
 173   </div>
 174   <ngx-datatable #table
 175                  class="bootstrap cd-datatable"
 176                  [cssClasses]="paginationClasses"
 177                  [selectionType]="selectionType"
 178                  [selected]="selection.selected"
 179                  (select)="onSelect($event)"
 180                  [sorts]="userConfig.sorts"
 181                  (sort)="changeSorting($event)"
 182                  [columns]="tableColumns"
 183                  [columnMode]="columnMode"
 184                  [rows]="rows"
 185                  [rowClass]="getRowClass()"
 186                  [headerHeight]="header ? 'auto' : 0"
 187                  [footerHeight]="footer ? 'auto' : 0"
 188                  [limit]="userConfig.limit > 0 ? userConfig.limit : undefined"
 189                  [loadingIndicator]="loadingIndicator"
 190                  [rowIdentity]="rowIdentity()"
 191                  [rowHeight]="'auto'">
 192
 193     <!-- Row Detail Template -->
 194     <ngx-datatable-row-detail rowHeight="auto"
 195                               #detailRow>
 196       <ng-template let-row="row"
 197                    let-expanded="expanded"
 198                    ngx-datatable-row-detail-template>
 199         <!-- Table Details -->
 200         <ng-content select="[cdTableDetail]"></ng-content>
 201       </ng-template>
 202     </ngx-datatable-row-detail>
 203
 204     <ngx-datatable-footer>
 205       <ng-template ngx-datatable-footer-template
 206                    let-rowCount="rowCount"
 207                    let-pageSize="pageSize"
 208                    let-selectedCount="selectedCount"
 209                    let-curPage="curPage"
 210                    let-offset="offset"
 211                    let-isVisible="isVisible">
 212         <div class="page-count">
 213           <span *ngIf="selectionType">
 214             {{ selectedCount }} <ng-container i18n="X selected">selected</ng-container> /
 215           </span>
 216           <span *ngIf="rowCount != data?.length">
 217             {{ rowCount }} <ng-container i18n="X found">found</ng-container> /
 218           </span>
 219           <span>
 220             {{ data?.length || 0 }} <ng-container i18n="X total">total</ng-container>
 221           </span>
 222         </div>
 223         <datatable-pager [pagerLeftArrowIcon]="paginationClasses.pagerLeftArrow"
 224                          [pagerRightArrowIcon]="paginationClasses.pagerRightArrow"
 225                          [pagerPreviousIcon]="paginationClasses.pagerPrevious"
 226                          [pagerNextIcon]="paginationClasses.pagerNext"
 227                          [page]="curPage"
 228                          [size]="pageSize"
 229                          [count]="rowCount"
 230                          [hidden]="!((rowCount / pageSize) > 1)"
 231                          (change)="table.onFooterPage($event)">
 232         </datatable-pager>
 233       </ng-template>
 234     </ngx-datatable-footer>
 235   </ngx-datatable>
 236 </div>
 237
 238 <!-- cell templates that can be accessed from outside -->
 239 <ng-template #tableCellBoldTpl
 240              let-value="value">
 241   <strong>{{ value }}</strong>
 242 </ng-template>
 243
 244 <ng-template #sparklineTpl
 245              let-row="row"
 246              let-value="value">
 247   <cd-sparkline [data]="value"
 248                 [isBinary]="row.cdIsBinary"></cd-sparkline>
 249 </ng-template>
 250
 251 <ng-template #routerLinkTpl
 252              let-row="row"
 253              let-value="value">
 254   <a [routerLink]="[row.cdLink]"
 255      [queryParams]="row.cdParams">{{ value }}</a>
 256 </ng-template>
 257
 258 <ng-template #checkIconTpl
 259              let-value="value">
 260   <i [ngClass]="[icons.check]"
 261      [hidden]="!(value | boolean)"></i>
 262 </ng-template>
 263
 264 <ng-template #perSecondTpl
 265              let-row="row"
 266              let-value="value">
 267   {{ value }} /s
 268 </ng-template>
 269
 270 <ng-template #executingTpl
 271              let-row="row"
 272              let-value="value">
 273   <i [ngClass]="[icons.spinner, icons.spin]"
 274      *ngIf="row.cdExecuting"></i>
 275   {{ value }}
 276   <span *ngIf="row.cdExecuting"
 277         class="text-muted italic">({{ row.cdExecuting }})</span>
 278 </ng-template>
 279
 280 <ng-template #classAddingTpl
 281              let-value="value">
 282   <span class="{{useCustomClass(value)}}">{{ value }}</span>
 283 </ng-template>
 284
 285 <ng-template #badgeTpl
 286              let-column="column"
 287              let-value="value">
 288   <span *ngFor="let item of (value | array); last as last">
 289     <span class="badge"
 290           [ngClass]="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.class) ? column.customTemplateConfig.map[item].class : (column?.customTemplateConfig?.class ? column.customTemplateConfig.class : 'badge-primary')"
 291           *ngIf="(column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item">
 292       {{ (column?.customTemplateConfig?.map && column?.customTemplateConfig?.map[item]?.value) ? column.customTemplateConfig.map[item].value : column?.customTemplateConfig?.prefix ? column.customTemplateConfig.prefix + item : item }}
 293     </span>
 294     <span *ngIf="!last">&nbsp;</span>
 295   </span>
 296 </ng-template>
 297
 298 <ng-template #mapTpl
 299              let-column="column"
 300              let-value="value">
 301   <span>{{ value | map:column?.customTemplateConfig }}</span>
 302 </ng-template>
 303
 304 <ng-template #truncateTpl
 305              let-column="column"
 306              let-value="value">
 307   <span data-toggle="tooltip"
 308         [title]="value">{{ value | truncate:column?.customTemplateConfig?.length:column?.customTemplateConfig?.omission }}</span>
 309 </ng-template>
 310
 311 <ng-template #rowDetailsTpl
 312              let-row="row"
 313              let-isExpanded="expanded"
 314              ngx-datatable-cell-template>
 315   <a href="javascript:void(0)"
 316      [class.expand-collapse-icon-right]="!isExpanded"
 317      [class.expand-collapse-icon-down]="isExpanded"
 318      class="expand-collapse-icon tc_expand-collapse"
 319      title="Expand/Collapse Row"
 320      i18n-title
 321      (click)="toggleExpandRow(row, isExpanded)">
 322   </a>
 323 </ng-template>