git.apps.os.sepia.ceph.com Git - ceph.git/blob

   1 <div class="col-sm-12 col-lg-6">
   2   <form name="targetForm"
   3         #formDir="ngForm"
   4         [formGroup]="targetForm"
   5         novalidate
   6         *ngIf="targetForm">
   7     <div class="card">
   8       <div i18n="form title|Example: Create Pool@@formTitle"
   9            class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
  10
  11       <div class="card-body">
  12         <!-- Target IQN -->
  13         <div class="form-group row">
  14           <label class="col-form-label col-sm-3"
  15                  for="target_iqn">
  16             <ng-container i18n>Target IQN</ng-container>
  17             <span class="required"></span>
  18           </label>
  19           <div class="col-sm-9">
  20             <div class="input-group">
  21               <input class="form-control"
  22                      type="text"
  23                      id="target_iqn"
  24                      name="target_iqn"
  25                      formControlName="target_iqn" />
  26               <span class="input-group-append">
  27                 <button class="btn btn-light"
  28                         id="ecp-info-button"
  29                         type="button"
  30                         (click)="targetSettingsModal()">
  31                   <i [ngClass]="[icons.deepCheck]"
  32                      aria-hidden="true"></i>
  33                 </button>
  34               </span>
  35             </div>
  36
  37             <span class="invalid-feedback"
  38                   *ngIf="targetForm.showError('target_iqn', formDir, 'required')"
  39                   i18n>This field is required.</span>
  40
  41             <span class="invalid-feedback"
  42                   *ngIf="targetForm.showError('target_iqn', formDir, 'pattern')"
  43                   i18n>IQN has wrong pattern.</span>
  44
  45             <span class="invalid-feedback"
  46                   *ngIf="targetForm.showError('target_iqn', formDir, 'iqn')">
  47               <ng-container i18n>An IQN has the following notation
  48                 'iqn.$year-$month.$reversedAddress:$definedName'</ng-container>
  49               <br>
  50               <ng-container i18n>For example: iqn.2016-06.org.dashboard:storage:disk.sn-a8675309</ng-container>
  51               <br>
  52               <a target="_blank"
  53                  href="https://en.wikipedia.org/wiki/ISCSI#Addressing"
  54                  i18n>More information</a>
  55             </span>
  56
  57             <span class="form-text text-muted"
  58                   *ngIf="hasAdvancedSettings(targetForm.getValue('target_controls'))"
  59                   i18n>This target has modified advanced settings.</span>
  60             <hr />
  61           </div>
  62         </div>
  63
  64         <!-- Portals -->
  65         <div class="form-group row">
  66           <label class="col-form-label col-sm-3"
  67                  for="portals">
  68             <ng-container i18n>Portals</ng-container>
  69             <span class="required"></span>
  70           </label>
  71           <div class="col-sm-9">
  72
  73             <ng-container *ngFor="let portal of portals.value; let i = index">
  74               <div class="input-group cd-mb">
  75                 <input class="cd-form-control"
  76                        type="text"
  77                        [value]="portal"
  78                        disabled />
  79                 <span class="input-group-append">
  80                   <button class="btn btn-light"
  81                           type="button"
  82                           (click)="removePortal(i, portal)">
  83                     <i [ngClass]="[icons.destroy]"
  84                        aria-hidden="true"></i>
  85                   </button>
  86                 </span>
  87               </div>
  88             </ng-container>
  89
  90             <span class="invalid-feedback"
  91                   *ngIf="targetForm.showError('portals', formDir, 'minGateways')"
  92                   i18n>At least {{ minimum_gateways }} gateways are required.</span>
  93
  94             <div class="row">
  95               <div class="col-md-12">
  96                 <cd-select [data]="portals.value"
  97                            [options]="portalsSelections"
  98                            [messages]="messages.portals"
  99                            (selection)="onPortalSelection($event)"
 100                            elemClass="btn btn-light float-right">
 101                   <i [ngClass]="[icons.add]"></i>
 102                   <ng-container i18n>Add portal</ng-container>
 103                 </cd-select>
 104               </div>
 105             </div>
 106
 107             <hr />
 108           </div>
 109         </div>
 110
 111         <!-- Images -->
 112         <div class="form-group row">
 113           <label class="col-form-label col-sm-3"
 114                  for="disks"
 115                  i18n>Images</label>
 116           <div class="col-sm-9">
 117             <ng-container *ngFor="let image of targetForm.getValue('disks'); let i = index">
 118               <div class="input-group cd-mb">
 119                 <input class="cd-form-control"
 120                        type="text"
 121                        [value]="image"
 122                        disabled />
 123                 <span class="input-group-append">
 124                   <button class="btn btn-light"
 125                           type="button"
 126                           (click)="imageSettingsModal(image)">
 127                     <i [ngClass]="[icons.deepCheck]"
 128                        aria-hidden="true"></i>
 129                   </button>
 130                   <button class="btn btn-light"
 131                           type="button"
 132                           (click)="removeImage(i, image)">
 133                     <i [ngClass]="[icons.destroy]"
 134                        aria-hidden="true"></i>
 135                   </button>
 136                 </span>
 137
 138               </div>
 139
 140               <span class="form-text text-muted">
 141                 <ng-container *ngIf="backstores.length > 1"
 142                               i18n>Backstore: {{ imagesSettings[image].backstore | iscsiBackstore }}.&nbsp;</ng-container>
 143
 144                 <ng-container *ngIf="hasAdvancedSettings(imagesSettings[image][imagesSettings[image].backstore])"
 145                               i18n>This image has modified settings.</ng-container>
 146               </span>
 147             </ng-container>
 148
 149             <span class="invalid-feedback"
 150                   *ngIf="targetForm.showError('disks', formDir, 'required')"
 151                   i18n>At least 1 image is required.</span>
 152
 153             <div class="row">
 154               <div class="col-md-12">
 155                 <cd-select [data]="disks.value"
 156                            [options]="imagesSelections"
 157                            [messages]="messages.images"
 158                            (selection)="onImageSelection($event)"
 159                            elemClass="btn btn-light float-right">
 160                   <i [ngClass]="[icons.add]"></i>
 161                   <ng-container i18n>Add image</ng-container>
 162                 </cd-select>
 163               </div>
 164             </div>
 165
 166             <hr />
 167           </div>
 168         </div>
 169
 170         <!-- acl_enabled -->
 171         <div class="form-group row">
 172           <div class="offset-sm-3 col-sm-9">
 173             <div class="custom-control custom-checkbox">
 174               <input type="checkbox"
 175                      class="custom-control-input"
 176                      formControlName="acl_enabled"
 177                      name="acl_enabled"
 178                      id="acl_enabled">
 179               <label for="acl_enabled"
 180                      class="custom-control-label"
 181                      i18n>ACL authentication</label>
 182             </div>
 183
 184             <hr />
 185           </div>
 186         </div>
 187
 188         <!-- Initiators -->
 189         <div class="form-group row"
 190              *ngIf="targetForm.getValue('acl_enabled')">
 191           <label class="col-form-label col-sm-3"
 192                  for="initiators"
 193                  i18n>Initiators</label>
 194           <div class="col-sm-9"
 195                formArrayName="initiators">
 196             <div class="card mb-2"
 197                  *ngFor="let initiator of initiators.controls; let ii = index"
 198                  [formGroupName]="ii">
 199               <div class="card-header">
 200                 <ng-container i18n>Initiator</ng-container>: {{ initiator.getValue('client_iqn') }}
 201                 <button type="button"
 202                         class="close"
 203                         (click)="removeInitiator(ii)">
 204                   <i [ngClass]="[icons.deepCheck]"></i>
 205                 </button>
 206               </div>
 207               <div class="card-body">
 208                 <!-- Initiator: Name -->
 209                 <div class="form-group row">
 210                   <label class="col-form-label col-sm-3"
 211                          for="client_iqn">
 212                     <ng-container i18n>Client IQN</ng-container>
 213                     <span class="required"></span>
 214                   </label>
 215                   <div class="col-sm-9">
 216                     <input class="form-control"
 217                            type="text"
 218                            formControlName="client_iqn"
 219                            (blur)="updatedInitiatorSelector()">
 220
 221                     <span class="invalid-feedback"
 222                           *ngIf="initiator.showError('client_iqn', formDir, 'notUnique')"
 223                           i18n>Initiator IQN needs to be unique.</span>
 224
 225                     <span class="invalid-feedback"
 226                           *ngIf="initiator.showError('client_iqn', formDir, 'required')"
 227                           i18n>This field is required.</span>
 228
 229                     <span class="invalid-feedback"
 230                           *ngIf="initiator.showError('client_iqn', formDir, 'pattern')"
 231                           i18n>IQN has wrong pattern.</span>
 232                   </div>
 233                 </div>
 234
 235                 <ng-container formGroupName="auth">
 236                   <!-- Initiator: User -->
 237                   <div class="form-group row">
 238                     <label class="col-form-label col-sm-3"
 239                            for="user"
 240                            i18n>User</label>
 241                     <div class="col-sm-9">
 242                       <input [id]="'user' + ii"
 243                              class="form-control"
 244                              formControlName="user"
 245                              type="text">
 246                       <span class="invalid-feedback"
 247                             *ngIf="initiator.showError('user', formDir, 'required')"
 248                             i18n>This field is required.</span>
 249
 250                       <span class="invalid-feedback"
 251                             *ngIf="initiator.showError('user', formDir, 'pattern')"
 252                             i18n>Usernames must have a length of 8 to 64 characters and
 253                         can only contain letters, '.', '@', '-', '_' or ':'.</span>
 254                     </div>
 255                   </div>
 256
 257                   <!-- Initiator: Password -->
 258                   <div class="form-group row">
 259                     <label class="col-form-label col-sm-3"
 260                            for="password"
 261                            i18n>Password</label>
 262                     <div class="col-sm-9">
 263                       <div class="input-group">
 264                         <input [id]="'password' + ii"
 265                                class="form-control"
 266                                formControlName="password"
 267                                type="password">
 268
 269                         <span class="input-group-append">
 270                           <button type="button"
 271                                   class="btn btn-light"
 272                                   [cdPasswordButton]="'password' + ii">
 273                           </button>
 274                           <button type="button"
 275                                   class="btn btn-light"
 276                                   [cdCopy2ClipboardButton]="'password' + ii">
 277                           </button>
 278                         </span>
 279                       </div>
 280                       <span class="invalid-feedback"
 281                             *ngIf="initiator.showError('password', formDir, 'required')"
 282                             i18n>This field is required.</span>
 283
 284                       <span class="invalid-feedback"
 285                             *ngIf="initiator.showError('password', formDir, 'pattern')"
 286                             i18n>Passwords must have a length of 12 to 16 characters
 287                         and can only contain letters, '@', '-', '_' or '/'.</span>
 288                     </div>
 289                   </div>
 290
 291
 292                   <!-- Initiator: mutual_user -->
 293                   <div class="form-group row">
 294                     <label class="col-form-label col-sm-3"
 295                            for="mutual_user">
 296                       <ng-container i18n>Mutual User</ng-container>
 297                     </label>
 298                     <div class="col-sm-9">
 299                       <input [id]="'mutual_user' + ii"
 300                              class="form-control"
 301                              formControlName="mutual_user"
 302                              type="text">
 303
 304                       <span class="invalid-feedback"
 305                             *ngIf="initiator.showError('mutual_user', formDir, 'required')"
 306                             i18n>This field is required.</span>
 307
 308                       <span class="invalid-feedback"
 309                             *ngIf="initiator.showError('mutual_user', formDir, 'pattern')"
 310                             i18n>Usernames must have a length of 8 to 64 characters and
 311                         can only contain letters, '.', '@', '-', '_' or ':'.</span>
 312                     </div>
 313                   </div>
 314
 315                   <!-- Initiator: mutual_password -->
 316                   <div class="form-group row">
 317                     <label class="col-form-label col-sm-3"
 318                            for="mutual_password"
 319                            i18n>Mutual Password</label>
 320                     <div class="col-sm-9">
 321                       <div class="input-group">
 322                         <input [id]="'mutual_password' + ii"
 323                                class="form-control"
 324                                formControlName="mutual_password"
 325                                type="password">
 326
 327                         <span class="input-group-append">
 328                           <button type="button"
 329                                   class="btn btn-light"
 330                                   [cdPasswordButton]="'mutual_password' + ii">
 331                           </button>
 332                           <button type="button"
 333                                   class="btn btn-light"
 334                                   [cdCopy2ClipboardButton]="'mutual_password' + ii">
 335                           </button>
 336                         </span>
 337                       </div>
 338                       <span class="invalid-feedback"
 339                             *ngIf="initiator.showError('mutual_password', formDir, 'required')"
 340                             i18n>This field is required.</span>
 341
 342                       <span class="invalid-feedback"
 343                             *ngIf="initiator.showError('mutual_password', formDir, 'pattern')"
 344                             i18n>Passwords must have a length of 12 to 16 characters and
 345                         can only contain letters, '@', '-', '_' or '/'.</span>
 346                     </div>
 347                   </div>
 348                 </ng-container>
 349
 350                 <!-- Initiator: Images -->
 351                 <div class="form-group row">
 352                   <label class="col-form-label col-sm-3"
 353                          for="luns"
 354                          i18n>Images</label>
 355                   <div class="col-sm-9">
 356                     <ng-container *ngFor="let image of initiator.getValue('luns'); let li = index">
 357                       <div class="input-group cd-mb">
 358                         <input class="cd-form-control"
 359                                type="text"
 360                                [value]="image"
 361                                disabled />
 362                         <span class="input-group-append">
 363                           <button class="btn btn-light"
 364                                   type="button"
 365                                   (click)="removeInitiatorImage(initiator, li, ii, image)">
 366                             <i [ngClass]="[icons.destroy]"
 367                                aria-hidden="true"></i>
 368                           </button>
 369                         </span>
 370                       </div>
 371                     </ng-container>
 372
 373                     <span *ngIf="initiator.getValue('cdIsInGroup')"
 374                           i18n>Initiator belongs to a group. Images will be configure in the group.</span>
 375
 376                     <div class="row"
 377                          *ngIf="!initiator.getValue('cdIsInGroup')">
 378                       <div class="col-md-12">
 379                         <cd-select [data]="initiator.getValue('luns')"
 380                                    [options]="imagesInitiatorSelections[ii]"
 381                                    [messages]="messages.initiatorImage"
 382                                    elemClass="btn btn-light float-right">
 383                           <i [ngClass]="[icons.add]"></i>
 384                           <ng-container i18n>Add image</ng-container>
 385                         </cd-select>
 386                       </div>
 387                     </div>
 388                   </div>
 389                 </div>
 390               </div>
 391             </div>
 392
 393             <div class="row">
 394               <div class="col-md-12">
 395                 <span class="form-text text-muted"
 396                       *ngIf="initiators.controls.length === 0"
 397                       i18n>No items added.</span>
 398
 399                 <button (click)="addInitiator(); false"
 400                         class="btn btn-light float-right">
 401                   <i [ngClass]="[icons.add]"></i>
 402                   <ng-container i18n>Add initiator</ng-container>
 403                 </button>
 404               </div>
 405             </div>
 406
 407             <hr />
 408           </div>
 409         </div>
 410
 411         <!-- Groups -->
 412         <div class="form-group row"
 413              *ngIf="targetForm.getValue('acl_enabled')">
 414           <label class="col-form-label col-sm-3"
 415                  for="initiators"
 416                  i18n>Groups</label>
 417           <div class="col-sm-9"
 418                formArrayName="groups">
 419             <div class="card mb-2"
 420                  *ngFor="let group of groups.controls; let gi = index"
 421                  [formGroupName]="gi">
 422               <div class="card-header">
 423                 <ng-container i18n>Group</ng-container>: {{ group.getValue('group_id') }}
 424                 <button type="button"
 425                         class="close"
 426                         (click)="groups.removeAt(gi)">
 427                   <i [ngClass]="[icons.destroy]"></i>
 428                 </button>
 429               </div>
 430               <div class="card-body">
 431                 <!-- Group: group_id -->
 432                 <div class="form-group row">
 433                   <label class="col-form-label col-sm-3"
 434                          for="group_id">
 435                     <ng-container i18n>Name</ng-container>
 436                     <span class="required"></span>
 437                   </label>
 438                   <div class="col-sm-9">
 439                     <input class="form-control"
 440                            type="text"
 441                            formControlName="group_id">
 442                   </div>
 443                 </div>
 444
 445                 <!-- Group: members -->
 446                 <div class="form-group row">
 447                   <label class="col-form-label col-sm-3"
 448                          for="members">
 449                     <ng-container i18n>Initiators</ng-container>
 450                   </label>
 451                   <div class="col-sm-9">
 452                     <ng-container *ngFor="let member of group.getValue('members'); let i = index">
 453                       <div class="input-group cd-mb">
 454                         <input class="cd-form-control"
 455                                type="text"
 456                                [value]="member"
 457                                disabled />
 458                         <span class="input-group-append">
 459                           <button class="btn btn-light"
 460                                   type="button"
 461                                   (click)="removeGroupInitiator(group, i, gi)">
 462                             <i [ngClass]="[icons.destroy]"
 463                                aria-hidden="true"></i>
 464                           </button>
 465                         </span>
 466                       </div>
 467                     </ng-container>
 468
 469                     <div class="row">
 470                       <div class="col-md-12">
 471                         <cd-select [data]="group.getValue('members')"
 472                                    [options]="groupMembersSelections[gi]"
 473                                    [messages]="messages.groupInitiator"
 474                                    (selection)="onGroupMemberSelection($event)"
 475                                    elemClass="btn btn-light float-right">
 476                           <i [ngClass]="[icons.add]"></i>
 477                           <ng-container i18n>Add initiator</ng-container>
 478                         </cd-select>
 479                       </div>
 480                     </div>
 481
 482                     <hr />
 483                   </div>
 484                 </div>
 485
 486                 <!-- Group: disks -->
 487                 <div class="form-group row">
 488                   <label class="col-form-label col-sm-3"
 489                          for="disks">
 490                     <ng-container i18n>Images</ng-container>
 491                   </label>
 492                   <div class="col-sm-9">
 493                     <ng-container *ngFor="let disk of group.getValue('disks'); let i = index">
 494                       <div class="input-group cd-mb">
 495                         <input class="cd-form-control"
 496                                type="text"
 497                                [value]="disk"
 498                                disabled />
 499                         <span class="input-group-append">
 500                           <button class="btn btn-light"
 501                                   type="button"
 502                                   (click)="removeGroupDisk(group, i, gi)">
 503                             <i [ngClass]="[icons.destroy]"
 504                                aria-hidden="true"></i>
 505                           </button>
 506                         </span>
 507                       </div>
 508                     </ng-container>
 509
 510                     <div class="row">
 511                       <div class="col-md-12">
 512                         <cd-select [data]="group.getValue('disks')"
 513                                    [options]="groupDiskSelections[gi]"
 514                                    [messages]="messages.initiatorImage"
 515                                    elemClass="btn btn-light float-right">
 516                           <i [ngClass]="[icons.add]"></i>
 517                           <ng-container i18n>Add image</ng-container>
 518                         </cd-select>
 519                       </div>
 520                     </div>
 521
 522                     <hr />
 523                   </div>
 524                 </div>
 525               </div>
 526             </div>
 527
 528             <div class="row">
 529               <div class="col-md-12">
 530                 <span class="form-text text-muted"
 531                       *ngIf="groups.controls.length === 0"
 532                       i18n>No items added.</span>
 533
 534                 <button (click)="addGroup(); false"
 535                         class="btn btn-light float-right">
 536                   <i [ngClass]="[icons.add]"></i>
 537                   <ng-container i18n>Add group</ng-container>
 538                 </button>
 539               </div>
 540             </div>
 541           </div>
 542         </div>
 543
 544       </div>
 545       <div class="card-footer">
 546         <div class="button-group text-right">
 547           <cd-submit-button (submitAction)="submit()"
 548                             i18n="form action button|Example: Create Pool@@formActionButton"
 549                             [form]="formDir">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
 550           <cd-back-button></cd-back-button>
 551         </div>
 552       </div>
 553     </div>
 554   </form>
 555 </div>