ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html

   1 <cd-orchestrator-doc-panel *ngIf="!hasOrchestrator"></cd-orchestrator-doc-panel>
   2 <div class="cd-col-form"
   3      *ngIf="!loading && hasOrchestrator">
   4   <form name="form"
   5         #formDir="ngForm"
   6         [formGroup]="form"
   7         novalidate>
   8     <div class="card">
   9       <div i18n="form title|Example: Create Pool@@formTitle"
  10            class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
  11       <div class="card-body">
  12         <fieldset>
  13           <cd-osd-devices-selection-groups #dataDeviceSelectionGroups
  14                                            name="Primary"
  15                                            type="data"
  16                                            [availDevices]="availDevices"
  17                                            [canSelect]="availDevices.length !== 0"
  18                                            (selected)="onDevicesSelected($event)"
  19                                            (cleared)="onDevicesCleared($event)">
  20           </cd-osd-devices-selection-groups>
  21         </fieldset>
  22
  23         <!-- Shared devices -->
  24         <fieldset>
  25           <legend i18n>Shared devices</legend>
  26
  27           <!-- WAL devices button and table -->
  28           <cd-osd-devices-selection-groups #walDeviceSelectionGroups
  29                                            name="WAL"
  30                                            type="wal"
  31                                            [availDevices]="availDevices"
  32                                            [canSelect]="dataDeviceSelectionGroups.devices.length !== 0"
  33                                            (selected)="onDevicesSelected($event)"
  34                                            (cleared)="onDevicesCleared($event)">
  35           </cd-osd-devices-selection-groups>
  36
  37           <!-- WAL slots -->
  38           <div class="form-group row"
  39                *ngIf="walDeviceSelectionGroups.devices.length !== 0">
  40             <label class="cd-col-form-label"
  41                    for="walSlots">
  42               <ng-container i18n>WAL slots</ng-container>
  43               <cd-helper>
  44                 <span i18n>How many OSDs per WAL device.</span>
  45                 <br>
  46                 <span i18n>Specify 0 to let Orchestrator backend decide it.</span>
  47               </cd-helper>
  48             </label>
  49             <div class="cd-col-form-input">
  50               <input class="form-control"
  51                      id="walSlots"
  52                      name="walSlots"
  53                      type="number"
  54                      min="0"
  55                      formControlName="walSlots">
  56               <span class="invalid-feedback"
  57                     *ngIf="form.showError('walSlots', formDir, 'min')"
  58                     i18n>Value should be greater than or equal to 0</span>
  59             </div>
  60           </div>
  61
  62           <!-- DB devices button and table -->
  63           <cd-osd-devices-selection-groups #dbDeviceSelectionGroups
  64                                            name="DB"
  65                                            type="db"
  66                                            [availDevices]="availDevices"
  67                                            [canSelect]="dataDeviceSelectionGroups.devices.length !== 0"
  68                                            (selected)="onDevicesSelected($event)"
  69                                            (cleared)="onDevicesCleared($event)">
  70           </cd-osd-devices-selection-groups>
  71
  72           <!-- DB slots -->
  73           <div class="form-group row"
  74                *ngIf="dbDeviceSelectionGroups.devices.length !== 0">
  75             <label class="cd-col-form-label"
  76                    for="dbSlots">
  77               <ng-container i18n>DB slots</ng-container>
  78               <cd-helper>
  79                 <span i18n>How many OSDs per DB device.</span>
  80                 <br>
  81                 <span i18n>Specify 0 to let Orchestrator backend decide it.</span>
  82               </cd-helper>
  83             </label>
  84             <div class="cd-col-form-input">
  85               <input class="form-control"
  86                      id="dbSlots"
  87                      name="dbSlots"
  88                      type="number"
  89                      min="0"
  90                      formControlName="dbSlots">
  91               <span class="invalid-feedback"
  92                     *ngIf="form.showError('dbSlots', formDir, 'min')"
  93                     i18n>Value should be greater than or equal to 0</span>
  94             </div>
  95           </div>
  96         </fieldset>
  97
  98         <!-- Configuration -->
  99         <fieldset>
 100           <legend i18n>Configuration</legend>
 101
 102           <!-- Features -->
 103           <div class="form-group row"
 104                formGroupName="features">
 105             <label i18n
 106                    class="cd-col-form-label"
 107                    for="features">Features</label>
 108             <div class="cd-col-form-input">
 109               <div class="custom-control custom-checkbox"
 110                    *ngFor="let feature of featureList">
 111                 <input type="checkbox"
 112                        class="custom-control-input"
 113                        id="{{ feature.key }}"
 114                        name="{{ feature.key }}"
 115                        formControlName="{{ feature.key }}">
 116                 <label class="custom-control-label"
 117                        for="{{ feature.key }}">{{ feature.desc }}</label>
 118               </div>
 119             </div>
 120           </div>
 121         </fieldset>
 122       </div>
 123       <div class="card-footer">
 124         <div class="button-group text-right">
 125           <cd-submit-button #previewButton
 126                             (submitAction)="submit()"
 127                             i18n
 128                             [form]="formDir"
 129                             [disabled]="dataDeviceSelectionGroups.devices.length === 0">Preview</cd-submit-button>
 130           <cd-back-button></cd-back-button>
 131         </div>
 132       </div>
 133     </div>
 134   </form>
 135 </div>