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="card"
   4      *cdFormLoading="loading">
   5   <div i18n="form title|Example: Create Pool@@formTitle"
   6        class="card-header"
   7        *ngIf="!hideTitle">{{ action | titlecase }} {{ resource | upperFirst }}</div>
   8   <div class="card-body ml-2">
   9     <form name="form"
  10           #formDir="ngForm"
  11           [formGroup]="form"
  12           novalidate>
  13       <div class="accordion">
  14         <div class="card">
  15           <div class="card-header">
  16             <h2 class="mb-0">
  17               <button class="btn btn-link btn-block text-left dropdown-toggle"
  18                       data-toggle="collapse"
  19                       aria-label="toggle deployment options"
  20                       [attr.aria-expanded]="simpleDeployment"
  21                       (click)="emitDeploymentMode()"
  22                       i18n>Deployment Options</button>
  23             </h2>
  24           </div>
  25         </div>
  26         <div class="collapse"
  27              [ngClass]="{show: simpleDeployment}">
  28           <div class="card-body d-flex flex-column">
  29             <div class="pt-3 pb-3"
  30                  *ngFor="let optionName of optionNames">
  31               <div class="custom-control custom-radio custom-control-inline">
  32                 <input class="custom-control-input"
  33                        type="radio"
  34                        name="deploymentOption"
  35                        [id]="optionName"
  36                        [value]="optionName"
  37                        formControlName="deploymentOption"
  38                        (change)="emitDeploymentSelection()"
  39                        [attr.disabled]="!deploymentOptions?.options[optionName].available ? true : null">
  40                 <label class="custom-control-label"
  41                        [id]="'label_' + optionName"
  42                        [for]="optionName"
  43                        i18n>{{ deploymentOptions?.options[optionName].title }}
  44                        {{ deploymentOptions.recommended_option === optionName ? "(Recommended)" : "" }}
  45                   <cd-helper>
  46                     <span>{{ deploymentOptions?.options[optionName].desc }}</span>
  47                   </cd-helper>
  48                 </label>
  49               </div>
  50             </div>
  51             <!-- @TODO: Visualize the storage used on a chart -->
  52             <!-- <div class="pie-chart">
  53               <h4 class="text-center">Selected Capacity</h4>
  54               <h5 class="margin text-center">10 Hosts | 30 NVMes </h5>
  55               <div class="char-i-contain">
  56                 <cd-health-pie [data]="data"
  57                                [config]="rawCapacityChartConfig"
  58                                [isBytesData]="true"
  59                                (prepareFn)="prepareRawUsage($event[0], $event[1])">
  60                 </cd-health-pie>
  61               </div>
  62             </div> -->
  63           </div>
  64         </div>
  65         <div class="card">
  66           <div class="card-header">
  67             <h2 class="mb-0">
  68               <button class="btn btn-link btn-block text-left dropdown-toggle"
  69                       data-toggle="collapse"
  70                       aria-label="toggle advanced mode"
  71                       [attr.aria-expanded]="!simpleDeployment"
  72                       (click)="emitDeploymentMode()"
  73                       i18n>Advanced Mode</button>
  74             </h2>
  75           </div>
  76         </div>
  77         <div class="collapse"
  78              [ngClass]="{show: !simpleDeployment}">
  79           <div class="card-body">
  80             <div class="card-body">
  81               <fieldset>
  82                 <cd-osd-devices-selection-groups #dataDeviceSelectionGroups
  83                                                  name="Primary"
  84                                                  type="data"
  85                                                  [availDevices]="availDevices"
  86                                                  [canSelect]="availDevices.length !== 0"
  87                                                  (selected)="onDevicesSelected($event)"
  88                                                  (cleared)="onDevicesCleared($event)">
  89                 </cd-osd-devices-selection-groups>
  90               </fieldset>
  91
  92               <!-- Shared devices -->
  93               <fieldset>
  94                 <legend i18n>Shared devices</legend>
  95
  96                 <!-- WAL devices button and table -->
  97                 <cd-osd-devices-selection-groups #walDeviceSelectionGroups
  98                                                  name="WAL"
  99                                                  type="wal"
 100                                                  [availDevices]="availDevices"
 101                                                  [canSelect]="dataDeviceSelectionGroups.devices.length !== 0"
 102                                                  (selected)="onDevicesSelected($event)"
 103                                                  (cleared)="onDevicesCleared($event)">
 104                 </cd-osd-devices-selection-groups>
 105
 106                 <!-- WAL slots -->
 107                 <div class="form-group row"
 108                      *ngIf="walDeviceSelectionGroups.devices.length !== 0">
 109                   <label class="cd-col-form-label"
 110                          for="walSlots">
 111                     <ng-container i18n>WAL slots</ng-container>
 112                     <cd-helper>
 113                       <span i18n>How many OSDs per WAL device.</span>
 114                       <br>
 115                       <span i18n>Specify 0 to let Orchestrator backend decide it.</span>
 116                     </cd-helper>
 117                   </label>
 118                   <div class="cd-col-form-input">
 119                     <input class="form-control"
 120                            id="walSlots"
 121                            name="walSlots"
 122                            type="number"
 123                            min="0"
 124                            formControlName="walSlots">
 125                     <span class="invalid-feedback"
 126                           *ngIf="form.showError('walSlots', formDir, 'min')"
 127                           i18n>Value should be greater than or equal to 0</span>
 128                   </div>
 129                 </div>
 130
 131                 <!-- DB devices button and table -->
 132                 <cd-osd-devices-selection-groups #dbDeviceSelectionGroups
 133                                                  name="DB"
 134                                                  type="db"
 135                                                  [availDevices]="availDevices"
 136                                                  [canSelect]="dataDeviceSelectionGroups.devices.length !== 0"
 137                                                  (selected)="onDevicesSelected($event)"
 138                                                  (cleared)="onDevicesCleared($event)">
 139                 </cd-osd-devices-selection-groups>
 140
 141                 <!-- DB slots -->
 142                 <div class="form-group row"
 143                      *ngIf="dbDeviceSelectionGroups.devices.length !== 0">
 144                   <label class="cd-col-form-label"
 145                          for="dbSlots">
 146                     <ng-container i18n>DB slots</ng-container>
 147                     <cd-helper>
 148                       <span i18n>How many OSDs per DB device.</span>
 149                       <br>
 150                       <span i18n>Specify 0 to let Orchestrator backend decide it.</span>
 151                     </cd-helper>
 152                   </label>
 153                   <div class="cd-col-form-input">
 154                     <input class="form-control"
 155                            id="dbSlots"
 156                            name="dbSlots"
 157                            type="number"
 158                            min="0"
 159                            formControlName="dbSlots">
 160                     <span class="invalid-feedback"
 161                           *ngIf="form.showError('dbSlots', formDir, 'min')"
 162                           i18n>Value should be greater than or equal to 0</span>
 163                   </div>
 164                 </div>
 165               </fieldset>
 166             </div>
 167           </div>
 168         </div>
 169
 170         <!-- Features -->
 171         <div class="card">
 172           <div class="card-header">
 173             <h2 class="mb-0">
 174               <button class="btn btn-link btn-block text-left dropdown-toggle"
 175                       data-toggle="collapse"
 176                       aria-label="features"
 177                       aria-expanded="true"
 178                       i18n>Features</button>
 179             </h2>
 180           </div>
 181         </div>
 182         <div class="collapse show">
 183           <div class="card-body d-flex flex-column">
 184             <div class="pt-3 pb-3"
 185                  formGroupName="features">
 186               <div class="custom-control custom-checkbox"
 187                    *ngFor="let feature of featureList">
 188                 <input type="checkbox"
 189                        class="custom-control-input"
 190                        id="{{ feature.key }}"
 191                        name="{{ feature.key }}"
 192                        formControlName="{{ feature.key }}"
 193                        (change)="emitDeploymentSelection()">
 194                 <label class="custom-control-label"
 195                        for="{{ feature.key }}">{{ feature.desc }}</label>
 196               </div>
 197             </div>
 198           </div>
 199         </div>
 200       </div>
 201     </form>
 202   </div>
 203
 204   <div class="card-footer"
 205        *ngIf="!hideSubmitBtn">
 206     <cd-form-button-panel #previewButtonPanel
 207                           (submitActionEvent)="submit()"
 208                           [form]="form"
 209                           [disabled]="dataDeviceSelectionGroups.devices.length === 0 && !simpleDeployment"
 210                           [submitText]="simpleDeployment ? 'Create OSDs' : actionLabels.PREVIEW"
 211                           wrappingClass="text-right"></cd-form-button-panel>
 212   </div>
 213 </div>