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