ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html

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