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