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