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

   1 <div class="cd-col-form">
   2   <form #frm="ngForm"
   3         [formGroup]="serviceForm"
   4         novalidate>
   5     <div class="card">
   6       <div i18n="form title|Example: Create Pool@@formTitle"
   7            class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
   8
   9       <div class="card-body">
  10         <!-- Service type -->
  11         <div class="form-group row">
  12           <label class="cd-col-form-label required"
  13                  for="service_type"
  14                  i18n>Type</label>
  15           <div class="cd-col-form-input">
  16             <select id="service_type"
  17                     name="service_type"
  18                     class="form-control custom-select"
  19                     formControlName="service_type">
  20               <option i18n
  21                       [ngValue]="null">-- Select a service type --</option>
  22               <option *ngFor="let serviceType of serviceTypes"
  23                       [value]="serviceType">
  24                 {{ serviceType }}
  25               </option>
  26             </select>
  27             <span class="invalid-feedback"
  28                   *ngIf="serviceForm.showError('service_type', frm, 'required')"
  29                   i18n>This field is required.</span>
  30           </div>
  31         </div>
  32
  33         <!-- backend_service -->
  34           <div *ngIf="serviceForm.controls.service_type.value === 'ingress'"
  35                class="form-group row">
  36             <label i18n
  37                    class="cd-col-form-label"
  38                    [ngClass]="{'required': ['ingress'].includes(serviceForm.controls.service_type.value)}"
  39                    for="backend_service">Backend Service</label>
  40             <div class="cd-col-form-input">
  41               <select id="backend_service"
  42                       name="backend_service"
  43                       class="form-control custom-select"
  44                       formControlName="backend_service">
  45                 <option *ngIf="services === null"
  46                         [ngValue]="null"
  47                         i18n>Loading...</option>
  48                 <option *ngIf="services !== null && services.length === 0"
  49                         [ngValue]="null"
  50                         i18n>-- No service available --</option>
  51                 <option *ngIf="services !== null && services.length > 0"
  52                         [ngValue]="null"
  53                         i18n>-- Select an existing RGW service --</option>
  54                 <option *ngFor="let service of services"
  55                         [value]="service.service_name">{{ service.service_name }}</option>
  56               </select>
  57               <span class="invalid-feedback"
  58                     *ngIf="serviceForm.showError('backend_service', frm, 'required')"
  59                     i18n>This field is required.</span>
  60             </div>
  61           </div>
  62
  63         <!-- Service id -->
  64         <div class="form-group row">
  65           <label i18n
  66                  class="cd-col-form-label"
  67                  [ngClass]="{'required': ['mds', 'rgw', 'nfs', 'iscsi', 'ingress'].includes(serviceForm.controls.service_type.value)}"
  68                  for="service_id">Id</label>
  69           <div class="cd-col-form-input">
  70             <input id="service_id"
  71                    class="form-control"
  72                    type="text"
  73                    formControlName="service_id">
  74             <span class="invalid-feedback"
  75                   *ngIf="serviceForm.showError('service_id', frm, 'required')"
  76                   i18n>This field is required.</span>
  77             <span class="invalid-feedback"
  78                   *ngIf="serviceForm.showError('service_id', frm, 'rgwPattern')"
  79                   i18n>The value does not match the pattern <strong>&lt;realm_name&gt;.&lt;zone_name&gt;[.&lt;subcluster&gt;]</strong>.</span>
  80           </div>
  81         </div>
  82
  83         <!-- unmanaged -->
  84         <div class="form-group row">
  85           <div class="cd-col-form-offset">
  86             <div class="custom-control custom-checkbox">
  87               <input class="custom-control-input"
  88                      id="unmanaged"
  89                      type="checkbox"
  90                      formControlName="unmanaged">
  91               <label class="custom-control-label"
  92                      for="unmanaged"
  93                      i18n>Unmanaged</label>
  94             </div>
  95           </div>
  96         </div>
  97
  98         <!-- Placement -->
  99         <div *ngIf="!serviceForm.controls.unmanaged.value"
 100              class="form-group row">
 101           <label class="cd-col-form-label"
 102                  for="placement"
 103                  i18n>Placement</label>
 104           <div class="cd-col-form-input">
 105             <select id="placement"
 106                     class="form-control custom-select"
 107                     formControlName="placement">
 108               <option i18n
 109                       value="hosts">Hosts</option>
 110               <option i18n
 111                       value="label">Label</option>
 112             </select>
 113           </div>
 114         </div>
 115
 116         <!-- Label -->
 117         <div *ngIf="!serviceForm.controls.unmanaged.value && serviceForm.controls.placement.value === 'label'"
 118              class="form-group row">
 119           <label i18n
 120                  class="cd-col-form-label"
 121                  for="label">Label</label>
 122           <div class="cd-col-form-input">
 123             <input id="label"
 124                    class="form-control"
 125                    type="text"
 126                    formControlName="label"
 127                    [ngbTypeahead]="searchLabels"
 128                    (focus)="labelFocus.next($any($event).target.value)"
 129                    (click)="labelClick.next($any($event).target.value)">
 130             <span class="invalid-feedback"
 131                   *ngIf="serviceForm.showError('label', frm, 'required')"
 132                   i18n>This field is required.</span>
 133           </div>
 134         </div>
 135
 136         <!-- Hosts -->
 137         <div *ngIf="!serviceForm.controls.unmanaged.value && serviceForm.controls.placement.value === 'hosts'"
 138              class="form-group row">
 139           <label class="cd-col-form-label"
 140                  for="hosts"
 141                  i18n>Hosts</label>
 142           <div class="cd-col-form-input">
 143             <cd-select-badges id="hosts"
 144                               [data]="serviceForm.controls.hosts.value"
 145                               [options]="hosts.options"
 146                               [messages]="hosts.messages">
 147             </cd-select-badges>
 148           </div>
 149         </div>
 150
 151         <!-- count -->
 152         <div *ngIf="!serviceForm.controls.unmanaged.value"
 153              class="form-group row">
 154           <label class="cd-col-form-label"
 155                  for="count">
 156             <span i18n>Count</span>
 157             <cd-helper i18n>Only that number of daemons will be created.</cd-helper>
 158           </label>
 159           <div class="cd-col-form-input">
 160             <input id="count"
 161                    class="form-control"
 162                    type="number"
 163                    formControlName="count"
 164                    min="1">
 165             <span class="invalid-feedback"
 166                   *ngIf="serviceForm.showError('count', frm, 'min')"
 167                   i18n>The value must be at least 1.</span>
 168             <span class="invalid-feedback"
 169                   *ngIf="serviceForm.showError('count', frm, 'pattern')"
 170                   i18n>The entered value needs to be a number.</span>
 171           </div>
 172         </div>
 173
 174         <!-- NFS -->
 175         <ng-container *ngIf="!serviceForm.controls.unmanaged.value && serviceForm.controls.service_type.value === 'nfs'">
 176           <!-- pool -->
 177           <div class="form-group row">
 178             <label i18n
 179                    class="cd-col-form-label required"
 180                    for="pool">Pool</label>
 181             <div class="cd-col-form-input">
 182               <select id="pool"
 183                       name="pool"
 184                       class="form-control custom-select"
 185                       formControlName="pool">
 186                 <option *ngIf="pools === null"
 187                         [ngValue]="null"
 188                         i18n>Loading...</option>
 189                 <option *ngIf="pools !== null && pools.length === 0"
 190                         [ngValue]="null"
 191                         i18n>-- No pools available --</option>
 192                 <option *ngIf="pools !== null && pools.length > 0"
 193                         [ngValue]="null"
 194                         i18n>-- Select a pool --</option>
 195                 <option *ngFor="let pool of pools"
 196                         [value]="pool.pool_name">{{ pool.pool_name }}</option>
 197               </select>
 198               <span class="invalid-feedback"
 199                     *ngIf="serviceForm.showError('pool', frm, 'required')"
 200                     i18n>This field is required.</span>
 201             </div>
 202           </div>
 203
 204           <!-- namespace -->
 205           <div class="form-group row">
 206             <label i18n
 207                    class="cd-col-form-label"
 208                    for="namespace">Namespace</label>
 209             <div class="cd-col-form-input">
 210               <input id="namespace"
 211                      class="form-control"
 212                      type="text"
 213                      formControlName="namespace">
 214             </div>
 215           </div>
 216         </ng-container>
 217
 218         <!-- RGW -->
 219         <ng-container *ngIf="!serviceForm.controls.unmanaged.value && serviceForm.controls.service_type.value === 'rgw'">
 220           <!-- rgw_frontend_port -->
 221           <div class="form-group row">
 222             <label i18n
 223                    class="cd-col-form-label"
 224                    for="rgw_frontend_port">Port</label>
 225             <div class="cd-col-form-input">
 226               <input id="rgw_frontend_port"
 227                      class="form-control"
 228                      type="number"
 229                      formControlName="rgw_frontend_port"
 230                      min="1"
 231                      max="65535">
 232               <span class="invalid-feedback"
 233                     *ngIf="serviceForm.showError('rgw_frontend_port', frm, 'pattern')"
 234                     i18n>The entered value needs to be a number.</span>
 235               <span class="invalid-feedback"
 236                     *ngIf="serviceForm.showError('rgw_frontend_port', frm, 'min')"
 237                     i18n>The value must be at least 1.</span>
 238               <span class="invalid-feedback"
 239                     *ngIf="serviceForm.showError('rgw_frontend_port', frm, 'max')"
 240                     i18n>The value cannot exceed 65535.</span>
 241             </div>
 242           </div>
 243         </ng-container>
 244
 245         <!-- iSCSI -->
 246         <ng-container *ngIf="!serviceForm.controls.unmanaged.value && serviceForm.controls.service_type.value === 'iscsi'">
 247           <!-- pool -->
 248           <div class="form-group row">
 249             <label i18n
 250                    class="cd-col-form-label required"
 251                    for="pool">Pool</label>
 252             <div class="cd-col-form-input">
 253               <select id="pool"
 254                       name="pool"
 255                       class="form-control custom-select"
 256                       formControlName="pool">
 257                 <option *ngIf="pools === null"
 258                         [ngValue]="null"
 259                         i18n>Loading...</option>
 260                 <option *ngIf="pools !== null && pools.length === 0"
 261                         [ngValue]="null"
 262                         i18n>-- No pools available --</option>
 263                 <option *ngIf="pools !== null && pools.length > 0"
 264                         [ngValue]="null"
 265                         i18n>-- Select a pool --</option>
 266                 <option *ngFor="let pool of pools"
 267                         [value]="pool.pool_name">{{ pool.pool_name }}</option>
 268               </select>
 269               <span class="invalid-feedback"
 270                     *ngIf="serviceForm.showError('pool', frm, 'required')"
 271                     i18n>This field is required.</span>
 272             </div>
 273           </div>
 274
 275           <!-- trusted_ip_list -->
 276           <div class="form-group row">
 277             <label class="cd-col-form-label"
 278                    for="trusted_ip_list">
 279               <span i18n>Trusted IPs</span>
 280               <cd-helper>
 281                 <span i18n>Comma separated list of IP addresses.</span>
 282                 <br>
 283                 <span i18n>Please add the <b>Ceph Manager</b> IP addresses here, otherwise the iSCSI gateways can't be reached.</span>
 284               </cd-helper>
 285             </label>
 286             <div class="cd-col-form-input">
 287               <input id="trusted_ip_list"
 288                      class="form-control"
 289                      type="text"
 290                      formControlName="trusted_ip_list">
 291             </div>
 292           </div>
 293
 294           <!-- api_port -->
 295           <div class="form-group row">
 296             <label i18n
 297                    class="cd-col-form-label"
 298                    for="api_port">Port</label>
 299             <div class="cd-col-form-input">
 300               <input id="api_port"
 301                      class="form-control"
 302                      type="number"
 303                      formControlName="api_port"
 304                      min="1"
 305                      max="65535">
 306               <span class="invalid-feedback"
 307                     *ngIf="serviceForm.showError('api_port', frm, 'pattern')"
 308                     i18n>The entered value needs to be a number.</span>
 309               <span class="invalid-feedback"
 310                     *ngIf="serviceForm.showError('api_port', frm, 'min')"
 311                     i18n>The value must be at least 1.</span>
 312               <span class="invalid-feedback"
 313                     *ngIf="serviceForm.showError('api_port', frm, 'max')"
 314                     i18n>The value cannot exceed 65535.</span>
 315             </div>
 316           </div>
 317
 318           <!-- api_user -->
 319           <div class="form-group row">
 320             <label i18n
 321                    class="cd-col-form-label"
 322                    [ngClass]="{'required': ['iscsi'].includes(serviceForm.controls.service_type.value)}"
 323                    for="api_user">User</label>
 324             <div class="cd-col-form-input">
 325               <input id="api_user"
 326                      class="form-control"
 327                      type="text"
 328                      formControlName="api_user">
 329               <span class="invalid-feedback"
 330                     *ngIf="serviceForm.showError('api_user', frm, 'required')"
 331                     i18n>This field is required.</span>
 332             </div>
 333           </div>
 334
 335           <!-- api_password -->
 336           <div class="form-group row">
 337             <label i18n
 338                    class="cd-col-form-label"
 339                    [ngClass]="{'required': ['iscsi'].includes(serviceForm.controls.service_type.value)}"
 340                    for="api_password">Password</label>
 341             <div class="cd-col-form-input">
 342               <div class="input-group">
 343                 <input id="api_password"
 344                        class="form-control"
 345                        type="password"
 346                        autocomplete="new-password"
 347                        formControlName="api_password">
 348                 <span class="input-group-append">
 349                   <button type="button"
 350                           class="btn btn-light"
 351                           cdPasswordButton="api_password">
 352                   </button>
 353                   <cd-copy-2-clipboard-button source="api_password">
 354                   </cd-copy-2-clipboard-button>
 355                 </span>
 356                 <span class="invalid-feedback"
 357                       *ngIf="serviceForm.showError('api_password', frm, 'required')"
 358                       i18n>This field is required.</span>
 359               </div>
 360             </div>
 361           </div>
 362         </ng-container>
 363
 364         <!-- Ingress -->
 365         <ng-container *ngIf="!serviceForm.controls.unmanaged.value && serviceForm.controls.service_type.value === 'ingress'">
 366           <!-- virtual_ip -->
 367           <div class="form-group row">
 368             <label class="cd-col-form-label"
 369                    [ngClass]="{'required': ['ingress'].includes(serviceForm.controls.service_type.value)}"
 370                    for="virtual_ip">
 371               <span i18n>Virtual IP</span>
 372               <cd-helper>
 373                 <span i18n>The virtual IP address and subnet (in CIDR notation) where the ingress service will be available.</span>
 374               </cd-helper>
 375             </label>
 376             <div class="cd-col-form-input">
 377               <input id="virtual_ip"
 378                      class="form-control"
 379                      type="text"
 380                      formControlName="virtual_ip">
 381               <span class="invalid-feedback"
 382                     *ngIf="serviceForm.showError('virtual_ip', frm, 'required')"
 383                     i18n>This field is required.</span>
 384             </div>
 385           </div>
 386
 387           <!-- frontend_port -->
 388           <div class="form-group row">
 389             <label class="cd-col-form-label"
 390                    [ngClass]="{'required': ['ingress'].includes(serviceForm.controls.service_type.value)}"
 391                    for="frontend_port">
 392               <span i18n>Frontend Port</span>
 393               <cd-helper>
 394                 <span i18n>The port used to access the ingress service.</span>
 395               </cd-helper>
 396             </label>
 397             <div class="cd-col-form-input">
 398               <input id="frontend_port"
 399                      class="form-control"
 400                      type="number"
 401                      formControlName="frontend_port"
 402                      min="1"
 403                      max="65535">
 404               <span class="invalid-feedback"
 405                     *ngIf="serviceForm.showError('frontend_port', frm, 'pattern')"
 406                     i18n>The entered value needs to be a number.</span>
 407               <span class="invalid-feedback"
 408                     *ngIf="serviceForm.showError('frontend_port', frm, 'min')"
 409                     i18n>The value must be at least 1.</span>
 410               <span class="invalid-feedback"
 411                     *ngIf="serviceForm.showError('frontend_port', frm, 'max')"
 412                     i18n>The value cannot exceed 65535.</span>
 413               <span class="invalid-feedback"
 414                     *ngIf="serviceForm.showError('frontend_port', frm, 'required')"
 415                     i18n>This field is required.</span>
 416             </div>
 417           </div>
 418
 419           <!-- monitor_port -->
 420           <div class="form-group row">
 421             <label class="cd-col-form-label"
 422                    [ngClass]="{'required': ['ingress'].includes(serviceForm.controls.service_type.value)}"
 423                    for="monitor_port">
 424               <span i18n>Monitor Port</span>
 425               <cd-helper>
 426                 <span i18n>The port used by haproxy for load balancer status.</span>
 427               </cd-helper>
 428             </label>
 429             <div class="cd-col-form-input">
 430               <input id="monitor_port"
 431                      class="form-control"
 432                      type="number"
 433                      formControlName="monitor_port"
 434                      min="1"
 435                      max="65535">
 436               <span class="invalid-feedback"
 437                     *ngIf="serviceForm.showError('monitor_port', frm, 'pattern')"
 438                     i18n>The entered value needs to be a number.</span>
 439               <span class="invalid-feedback"
 440                     *ngIf="serviceForm.showError('monitor_port', frm, 'min')"
 441                     i18n>The value must be at least 1.</span>
 442               <span class="invalid-feedback"
 443                     *ngIf="serviceForm.showError('monitor_port', frm, 'max')"
 444                     i18n>The value cannot exceed 65535.</span>
 445               <span class="invalid-feedback"
 446                     *ngIf="serviceForm.showError('monitor_port', frm, 'required')"
 447                     i18n>This field is required.</span>
 448             </div>
 449           </div>
 450           <!-- virtual_interface_networks -->
 451           <div class="form-group row">
 452             <label class="cd-col-form-label"
 453                    for="virtual_interface_networks">
 454               <span i18n>CIDR Networks</span>
 455               <cd-helper>
 456                 <span i18n>A list of networks to identify which network interface to use for the virtual IP address.</span>
 457               </cd-helper>
 458             </label>
 459             <div class="cd-col-form-input">
 460               <input id="virtual_interface_networks"
 461                      class="form-control"
 462                      type="text"
 463                      formControlName="virtual_interface_networks">
 464             </div>
 465           </div>
 466         </ng-container>
 467         <!-- RGW, Ingress & iSCSI -->
 468         <ng-container *ngIf="!serviceForm.controls.unmanaged.value && ['rgw', 'iscsi', 'ingress'].includes(serviceForm.controls.service_type.value)">
 469           <!-- ssl -->
 470           <div class="form-group row">
 471             <div class="cd-col-form-offset">
 472               <div class="custom-control custom-checkbox">
 473                 <input class="custom-control-input"
 474                        id="ssl"
 475                        type="checkbox"
 476                        formControlName="ssl">
 477                 <label class="custom-control-label"
 478                        for="ssl"
 479                        i18n>SSL</label>
 480               </div>
 481             </div>
 482           </div>
 483
 484           <!-- ssl_cert -->
 485           <div *ngIf="serviceForm.controls.ssl.value"
 486                class="form-group row">
 487             <label class="cd-col-form-label"
 488                    for="ssl_cert">
 489               <span i18n>Certificate</span>
 490               <cd-helper i18n>The SSL certificate in PEM format.</cd-helper>
 491             </label>
 492             <div class="cd-col-form-input">
 493               <textarea id="ssl_cert"
 494                         class="form-control resize-vertical text-monospace text-pre"
 495                         formControlName="ssl_cert"
 496                         rows="5">
 497               </textarea>
 498               <input type="file"
 499                      (change)="fileUpload($event.target.files, 'ssl_cert')">
 500               <span class="invalid-feedback"
 501                     *ngIf="serviceForm.showError('ssl_cert', frm, 'required')"
 502                     i18n>This field is required.</span>
 503               <span class="invalid-feedback"
 504                     *ngIf="serviceForm.showError('ssl_cert', frm, 'pattern')"
 505                     i18n>Invalid SSL certificate.</span>
 506             </div>
 507           </div>
 508
 509           <!-- ssl_key -->
 510           <div *ngIf="serviceForm.controls.ssl.value"
 511                class="form-group row">
 512             <label class="cd-col-form-label"
 513                    for="ssl_key">
 514               <span i18n>Private key</span>
 515               <cd-helper i18n>The SSL private key in PEM format.</cd-helper>
 516             </label>
 517             <div class="cd-col-form-input">
 518               <textarea id="ssl_key"
 519                         class="form-control resize-vertical text-monospace text-pre"
 520                         formControlName="ssl_key"
 521                         rows="5">
 522               </textarea>
 523               <input type="file"
 524                      (change)="fileUpload($event.target.files,'ssl_key')">
 525               <span class="invalid-feedback"
 526                     *ngIf="serviceForm.showError('ssl_key', frm, 'required')"
 527                     i18n>This field is required.</span>
 528               <span class="invalid-feedback"
 529                     *ngIf="serviceForm.showError('ssl_key', frm, 'pattern')"
 530                     i18n>Invalid SSL private key.</span>
 531             </div>
 532           </div>
 533         </ng-container>
 534       </div>
 535
 536       <div class="card-footer">
 537         <div class="text-right">
 538           <cd-form-button-panel (submitActionEvent)="onSubmit()"
 539                                 [form]="serviceForm"
 540                                 [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
 541         </div>
 542       </div>
 543     </div>
 544   </form>
 545 </div>