ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-groups/osd-devices-selection-groups.component.html

   1 <!-- button -->
   2 <div class="form-group row">
   3   <label class="cd-col-form-label"
   4          for="createDeleteButton">
   5     <ng-container i18n>{{ name }} devices</ng-container>
   6     <cd-helper>
   7       <span i18n
   8             *ngIf="type === 'data'">The primary storage devices. These devices contain all OSD data.</span>
   9       <span i18n
  10             *ngIf="type === 'wal'">Write-Ahead-Log devices. These devices are used for BlueStore’s internal journal. It is only useful to use a WAL device if the device is faster than the primary device (e.g. NVME devices or SSDs). If there is only a small amount of fast storage available (e.g., less than a gigabyte), we recommend using it as a WAL device.</span>
  11       <span i18n
  12             *ngIf="type === 'db'">DB devices can be used for storing BlueStore’s internal metadata.  It is only helpful to provision a DB device if it is faster than the primary device (e.g. NVME devices or SSD).</span>
  13     </cd-helper>
  14   </label>
  15   <div class="cd-col-form-input">
  16     <ng-container *ngIf="devices.length === 0; else blockClearDevices">
  17       <button type="button"
  18               class="btn btn-light"
  19               (click)="showSelectionModal()"
  20               data-toggle="tooltip"
  21               [title]="addButtonTooltip"
  22               [disabled]="availDevices.length === 0 || !canSelect || expansionCanSelect">
  23         <i [ngClass]="[icons.add]"></i>
  24         <ng-container i18n>Add</ng-container>
  25       </button>
  26     </ng-container>
  27     <ng-template #blockClearDevices>
  28       <div class="pb-2 my-2 border-bottom">
  29         <span *ngFor="let filter of appliedFilters">
  30           <span class="badge badge-dark mr-2">{{ filter.name }}: {{ filter.value.formatted }}</span>
  31         </span>
  32         <a class="tc_clearSelections"
  33            href=""
  34            (click)="clearDevices(); false">
  35           <i [ngClass]="[icons.clearFilters]"></i>
  36           <ng-container i18n>Clear</ng-container>
  37         </a>
  38       </div>
  39       <div>
  40         <cd-inventory-devices [devices]="devices"
  41                               [hiddenColumns]="['available', 'osd_ids']"
  42                               [filterColumns]="[]">
  43         </cd-inventory-devices>
  44       </div>
  45       <div *ngIf="type === 'data'"
  46            class="float-right">
  47         <span i18n>Raw capacity: {{ capacity | dimlessBinary }}</span>
  48       </div>
  49     </ng-template>
  50   </div>
  51 </div>