ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html

   1 <cd-modal [pageURL]="pageURL"
   2           [modalRef]="activeModal">
   3   <span class="modal-title"
   4         i18n>{{ action | titlecase }} {{ resource | upperFirst }}</span>
   5   <ng-container class="modal-content">
   6     <form #frm="ngForm"
   7           [formGroup]="serviceForm"
   8           novalidate>
   9       <div class="modal-body">
  10
  11         <!-- Service type -->
  12         <div class="form-group row">
  13           <label class="cd-col-form-label required"
  14                  for="service_type"
  15                  i18n>Type</label>
  16           <div class="cd-col-form-input">
  17             <select id="service_type"
  18                     name="service_type"
  19                     class="form-control"
  20                     formControlName="service_type"
  21                     (change)="getServiceIds($event.target.value)">
  22               <option i18n
  23                       [ngValue]="null">-- Select a service type --</option>
  24               <option *ngFor="let serviceType of serviceTypes"
  25                       [value]="serviceType">
  26                 {{ serviceType }}
  27               </option>
  28             </select>
  29             <span class="invalid-feedback"
  30                   *ngIf="serviceForm.showError('service_type', frm, 'required')"
  31                   i18n>This field is required.</span>
  32           </div>
  33         </div>
  34
  35         <!-- backend_service -->
  36           <div *ngIf="serviceForm.controls.service_type.value === 'ingress'"
  37                class="form-group row">
  38             <label i18n
  39                    class="cd-col-form-label"
  40                    [ngClass]="{'required': ['ingress'].includes(serviceForm.controls.service_type.value)}"
  41                    for="backend_service">Backend Service</label>
  42             <div class="cd-col-form-input">
  43               <select id="backend_service"
  44                       name="backend_service"
  45                       class="form-control"
  46                       formControlName="backend_service"
  47                       (change)="prePopulateId()">
  48                 <option *ngIf="services === null"
  49                         [ngValue]="null"
  50                         i18n>Loading...</option>
  51                 <option *ngIf="services !== null && services.length === 0"
  52                         [ngValue]="null"
  53                         i18n>-- No service available --</option>
  54                 <option *ngIf="services !== null && services.length > 0"
  55                         [ngValue]="null"
  56                         i18n>-- Select an existing service --</option>
  57                 <option *ngFor="let service of services"
  58                         [value]="service.service_name">{{ service.service_name }}</option>
  59               </select>
  60               <span class="invalid-feedback"
  61                     *ngIf="serviceForm.showError('backend_service', frm, 'required')"
  62                     i18n>This field is required.</span>
  63             </div>
  64           </div>
  65
  66         <!-- Service id -->
  67         <div class="form-group row"
  68              *ngIf="serviceForm.controls.service_type.value !== 'snmp-gateway'">
  69           <label i18n
  70                  class="cd-col-form-label"
  71                  [ngClass]="{'required': ['mds', 'rgw', 'nfs', 'iscsi', 'ingress'].includes(serviceForm.controls.service_type.value)}"
  72                  for="service_id">Id</label>
  73           <div class="cd-col-form-input">
  74             <input id="service_id"
  75                    class="form-control"
  76                    type="text"
  77                    formControlName="service_id">
  78             <span class="invalid-feedback"
  79                   *ngIf="serviceForm.showError('service_id', frm, 'required')"
  80                   i18n>This field is required.</span>
  81             <span class="invalid-feedback"
  82                   *ngIf="serviceForm.showError('service_id', frm, 'uniqueName')"
  83                   i18n>This service id is already in use.</span>
  84             <span class="invalid-feedback"
  85                   *ngIf="serviceForm.showError('service_id', frm, 'rgwPattern')"
  86                   i18n>The value does not match the pattern <strong>&lt;service_id&gt;[.&lt;realm_name&gt;.&lt;zone_name&gt;]</strong>.</span>
  87           </div>
  88         </div>
  89
  90         <!-- unmanaged -->
  91         <div class="form-group row">
  92           <div class="cd-col-form-offset">
  93             <div class="custom-control custom-checkbox">
  94               <input class="custom-control-input"
  95                      id="unmanaged"
  96                      type="checkbox"
  97                      formControlName="unmanaged">
  98               <label class="custom-control-label"
  99                      for="unmanaged"
 100                      i18n>Unmanaged</label>
 101             </div>
 102           </div>
 103         </div>
 104
 105         <!-- Placement -->
 106         <div *ngIf="!serviceForm.controls.unmanaged.value"
 107              class="form-group row">
 108           <label class="cd-col-form-label"
 109                  for="placement"
 110                  i18n>Placement</label>
 111           <div class="cd-col-form-input">
 112             <select id="placement"
 113                     class="form-control"
 114                     formControlName="placement">
 115               <option i18n
 116                       value="hosts">Hosts</option>
 117               <option i18n
 118                       value="label">Label</option>
 119             </select>
 120           </div>
 121         </div>
 122
 123         <!-- Label -->
 124         <div *ngIf="!serviceForm.controls.unmanaged.value && serviceForm.controls.placement.value === 'label'"
 125              class="form-group row">
 126           <label i18n
 127                  class="cd-col-form-label"
 128                  for="label">Label</label>
 129           <div class="cd-col-form-input">
 130             <input id="label"
 131                    class="form-control"
 132                    type="text"
 133                    formControlName="label"
 134                    [ngbTypeahead]="searchLabels"
 135                    (focus)="labelFocus.next($any($event).target.value)"
 136                    (click)="labelClick.next($any($event).target.value)">
 137             <span class="invalid-feedback"
 138                   *ngIf="serviceForm.showError('label', frm, 'required')"
 139                   i18n>This field is required.</span>
 140           </div>
 141         </div>
 142
 143         <!-- Hosts -->
 144         <div *ngIf="!serviceForm.controls.unmanaged.value && serviceForm.controls.placement.value === 'hosts'"
 145              class="form-group row">
 146           <label class="cd-col-form-label"
 147                  for="hosts"
 148                  i18n>Hosts</label>
 149           <div class="cd-col-form-input">
 150             <cd-select-badges id="hosts"
 151                               [data]="serviceForm.controls.hosts.value"
 152                               [options]="hosts.options"
 153                               [messages]="hosts.messages">
 154             </cd-select-badges>
 155           </div>
 156         </div>
 157
 158         <!-- count -->
 159         <div *ngIf="!serviceForm.controls.unmanaged.value"
 160              class="form-group row">
 161           <label class="cd-col-form-label"
 162                  for="count">
 163             <span i18n>Count</span>
 164             <cd-helper i18n>Only that number of daemons will be created.</cd-helper>
 165           </label>
 166           <div class="cd-col-form-input">
 167             <input id="count"
 168                    class="form-control"
 169                    type="number"
 170                    formControlName="count"
 171                    min="1">
 172             <span class="invalid-feedback"
 173                   *ngIf="serviceForm.showError('count', frm, 'min')"
 174                   i18n>The value must be at least 1.</span>
 175             <span class="invalid-feedback"
 176                   *ngIf="serviceForm.showError('count', frm, 'pattern')"
 177                   i18n>The entered value needs to be a number.</span>
 178           </div>
 179         </div>
 180
 181         <!-- RGW -->
 182         <ng-container *ngIf="!serviceForm.controls.unmanaged.value && serviceForm.controls.service_type.value === 'rgw'">
 183           <!-- rgw_frontend_port -->
 184           <div class="form-group row">
 185             <label i18n
 186                    class="cd-col-form-label"
 187                    for="rgw_frontend_port">Port</label>
 188             <div class="cd-col-form-input">
 189               <input id="rgw_frontend_port"
 190                      class="form-control"
 191                      type="number"
 192                      formControlName="rgw_frontend_port"
 193                      min="1"
 194                      max="65535">
 195               <span class="invalid-feedback"
 196                     *ngIf="serviceForm.showError('rgw_frontend_port', frm, 'pattern')"
 197                     i18n>The entered value needs to be a number.</span>
 198               <span class="invalid-feedback"
 199                     *ngIf="serviceForm.showError('rgw_frontend_port', frm, 'min')"
 200                     i18n>The value must be at least 1.</span>
 201               <span class="invalid-feedback"
 202                     *ngIf="serviceForm.showError('rgw_frontend_port', frm, 'max')"
 203                     i18n>The value cannot exceed 65535.</span>
 204             </div>
 205           </div>
 206         </ng-container>
 207
 208         <!-- iSCSI -->
 209         <!-- pool -->
 210         <div class="form-group row"
 211              *ngIf="serviceForm.controls.service_type.value === 'iscsi'">
 212           <label i18n
 213                  class="cd-col-form-label required"
 214                  for="pool">Pool</label>
 215           <div class="cd-col-form-input">
 216             <select id="pool"
 217                     name="pool"
 218                     class="form-control"
 219                     formControlName="pool">
 220               <option *ngIf="pools === null"
 221                       [ngValue]="null"
 222                       i18n>Loading...</option>
 223               <option *ngIf="pools && pools.length === 0"
 224                       [ngValue]="null"
 225                       i18n>-- No pools available --</option>
 226               <option *ngIf="pools && pools.length > 0"
 227                       [ngValue]="null"
 228                       i18n>-- Select a pool --</option>
 229               <option *ngFor="let pool of pools"
 230                       [value]="pool.pool_name">{{ pool.pool_name }}</option>
 231             </select>
 232             <span class="invalid-feedback"
 233                   *ngIf="serviceForm.showError('pool', frm, 'required')"
 234                   i18n>This field is required.</span>
 235           </div>
 236         </div>
 237
 238         <!-- fields in iSCSI which are hidden when unmanaged is true -->
 239         <ng-container *ngIf="!serviceForm.controls.unmanaged.value && serviceForm.controls.service_type.value === 'iscsi'">
 240           <!-- trusted_ip_list -->
 241           <div class="form-group row">
 242             <label class="cd-col-form-label"
 243                    for="trusted_ip_list">
 244               <span i18n>Trusted IPs</span>
 245               <cd-helper>
 246                 <span i18n>Comma separated list of IP addresses.</span>
 247                 <br>
 248                 <span i18n>Please add the <b>Ceph Manager</b> IP addresses here, otherwise the iSCSI gateways can't be reached.</span>
 249               </cd-helper>
 250             </label>
 251             <div class="cd-col-form-input">
 252               <input id="trusted_ip_list"
 253                      class="form-control"
 254                      type="text"
 255                      formControlName="trusted_ip_list">
 256             </div>
 257           </div>
 258
 259           <!-- api_port -->
 260           <div class="form-group row">
 261             <label i18n
 262                    class="cd-col-form-label"
 263                    for="api_port">Port</label>
 264             <div class="cd-col-form-input">
 265               <input id="api_port"
 266                      class="form-control"
 267                      type="number"
 268                      formControlName="api_port"
 269                      min="1"
 270                      max="65535">
 271               <span class="invalid-feedback"
 272                     *ngIf="serviceForm.showError('api_port', frm, 'pattern')"
 273                     i18n>The entered value needs to be a number.</span>
 274               <span class="invalid-feedback"
 275                     *ngIf="serviceForm.showError('api_port', frm, 'min')"
 276                     i18n>The value must be at least 1.</span>
 277               <span class="invalid-feedback"
 278                     *ngIf="serviceForm.showError('api_port', frm, 'max')"
 279                     i18n>The value cannot exceed 65535.</span>
 280             </div>
 281           </div>
 282
 283           <!-- api_user -->
 284           <div class="form-group row">
 285             <label i18n
 286                    class="cd-col-form-label"
 287                    [ngClass]="{'required': ['iscsi'].includes(serviceForm.controls.service_type.value)}"
 288                    for="api_user">User</label>
 289             <div class="cd-col-form-input">
 290               <input id="api_user"
 291                      class="form-control"
 292                      type="text"
 293                      formControlName="api_user">
 294               <span class="invalid-feedback"
 295                     *ngIf="serviceForm.showError('api_user', frm, 'required')"
 296                     i18n>This field is required.</span>
 297             </div>
 298           </div>
 299
 300           <!-- api_password -->
 301           <div class="form-group row">
 302             <label i18n
 303                    class="cd-col-form-label"
 304                    [ngClass]="{'required': ['iscsi'].includes(serviceForm.controls.service_type.value)}"
 305                    for="api_password">Password</label>
 306             <div class="cd-col-form-input">
 307               <div class="input-group">
 308                 <input id="api_password"
 309                        class="form-control"
 310                        type="password"
 311                        autocomplete="new-password"
 312                        formControlName="api_password">
 313                 <span class="input-group-append">
 314                   <button type="button"
 315                           class="btn btn-light"
 316                           cdPasswordButton="api_password">
 317                   </button>
 318                   <cd-copy-2-clipboard-button source="api_password">
 319                   </cd-copy-2-clipboard-button>
 320                 </span>
 321                 <span class="invalid-feedback"
 322                       *ngIf="serviceForm.showError('api_password', frm, 'required')"
 323                       i18n>This field is required.</span>
 324               </div>
 325             </div>
 326           </div>
 327         </ng-container>
 328
 329         <!-- Ingress -->
 330         <ng-container *ngIf="serviceForm.controls.service_type.value === 'ingress'">
 331           <!-- virtual_ip -->
 332           <div class="form-group row">
 333             <label class="cd-col-form-label"
 334                    [ngClass]="{'required': ['ingress'].includes(serviceForm.controls.service_type.value)}"
 335                    for="virtual_ip">
 336               <span i18n>Virtual IP</span>
 337               <cd-helper>
 338                 <span i18n>The virtual IP address and subnet (in CIDR notation) where the ingress service will be available.</span>
 339               </cd-helper>
 340             </label>
 341             <div class="cd-col-form-input">
 342               <input id="virtual_ip"
 343                      class="form-control"
 344                      type="text"
 345                      formControlName="virtual_ip">
 346               <span class="invalid-feedback"
 347                     *ngIf="serviceForm.showError('virtual_ip', frm, 'required')"
 348                     i18n>This field is required.</span>
 349             </div>
 350           </div>
 351
 352           <!-- frontend_port -->
 353           <div class="form-group row">
 354             <label class="cd-col-form-label"
 355                    [ngClass]="{'required': ['ingress'].includes(serviceForm.controls.service_type.value)}"
 356                    for="frontend_port">
 357               <span i18n>Frontend Port</span>
 358               <cd-helper>
 359                 <span i18n>The port used to access the ingress service.</span>
 360               </cd-helper>
 361             </label>
 362             <div class="cd-col-form-input">
 363               <input id="frontend_port"
 364                      class="form-control"
 365                      type="number"
 366                      formControlName="frontend_port"
 367                      min="1"
 368                      max="65535">
 369               <span class="invalid-feedback"
 370                     *ngIf="serviceForm.showError('frontend_port', frm, 'pattern')"
 371                     i18n>The entered value needs to be a number.</span>
 372               <span class="invalid-feedback"
 373                     *ngIf="serviceForm.showError('frontend_port', frm, 'min')"
 374                     i18n>The value must be at least 1.</span>
 375               <span class="invalid-feedback"
 376                     *ngIf="serviceForm.showError('frontend_port', frm, 'max')"
 377                     i18n>The value cannot exceed 65535.</span>
 378               <span class="invalid-feedback"
 379                     *ngIf="serviceForm.showError('frontend_port', frm, 'required')"
 380                     i18n>This field is required.</span>
 381             </div>
 382           </div>
 383
 384           <!-- monitor_port -->
 385           <div class="form-group row">
 386             <label class="cd-col-form-label"
 387                    [ngClass]="{'required': ['ingress'].includes(serviceForm.controls.service_type.value)}"
 388                    for="monitor_port">
 389               <span i18n>Monitor Port</span>
 390               <cd-helper>
 391                 <span i18n>The port used by haproxy for load balancer status.</span>
 392               </cd-helper>
 393             </label>
 394             <div class="cd-col-form-input">
 395               <input id="monitor_port"
 396                      class="form-control"
 397                      type="number"
 398                      formControlName="monitor_port"
 399                      min="1"
 400                      max="65535">
 401               <span class="invalid-feedback"
 402                     *ngIf="serviceForm.showError('monitor_port', frm, 'pattern')"
 403                     i18n>The entered value needs to be a number.</span>
 404               <span class="invalid-feedback"
 405                     *ngIf="serviceForm.showError('monitor_port', frm, 'min')"
 406                     i18n>The value must be at least 1.</span>
 407               <span class="invalid-feedback"
 408                     *ngIf="serviceForm.showError('monitor_port', frm, 'max')"
 409                     i18n>The value cannot exceed 65535.</span>
 410               <span class="invalid-feedback"
 411                     *ngIf="serviceForm.showError('monitor_port', frm, 'required')"
 412                     i18n>This field is required.</span>
 413             </div>
 414           </div>
 415           <!-- virtual_interface_networks -->
 416           <div class="form-group row"
 417                *ngIf="!serviceForm.controls.unmanaged.value">
 418             <label class="cd-col-form-label"
 419                    for="virtual_interface_networks">
 420               <span i18n>CIDR Networks</span>
 421               <cd-helper>
 422                 <span i18n>A list of networks to identify which network interface to use for the virtual IP address.</span>
 423               </cd-helper>
 424             </label>
 425             <div class="cd-col-form-input">
 426               <input id="virtual_interface_networks"
 427                      class="form-control"
 428                      type="text"
 429                      formControlName="virtual_interface_networks">
 430             </div>
 431           </div>
 432         </ng-container>
 433
 434         <!-- SNMP-Gateway -->
 435         <ng-container *ngIf="serviceForm.controls.service_type.value === 'snmp-gateway'">
 436           <!-- snmp-version -->
 437           <div class="form-group row">
 438             <label class="cd-col-form-label required"
 439                    for="snmp_version"
 440                    i18n>Version</label>
 441             <div class="cd-col-form-input">
 442               <select id="snmp_version"
 443                       name="snmp_version"
 444                       class="form-control"
 445                       formControlName="snmp_version"
 446                       (change)="clearValidations()">
 447                 <option i18n
 448                         [ngValue]="null">-- Select SNMP version --</option>
 449                 <option *ngFor="let snmpVersion of ['V2c', 'V3']"
 450                         [value]="snmpVersion">{{ snmpVersion }}</option>
 451               </select>
 452               <span class="invalid-feedback"
 453                     *ngIf="serviceForm.showError('snmp_version', frm, 'required')"
 454                     i18n>This field is required.</span>
 455             </div>
 456           </div>
 457           <!-- Destination -->
 458           <div class="form-group row">
 459             <label class="cd-col-form-label required"
 460                    for="snmp_destination">
 461               <span i18n>Destination</span>
 462               <cd-helper>
 463                 <span i18n>Must be of the format hostname:port.</span>
 464               </cd-helper>
 465             </label>
 466             <div class="cd-col-form-input">
 467               <input id="snmp_destination"
 468                      class="form-control"
 469                      type="text"
 470                      formControlName="snmp_destination">
 471               <span class="invalid-feedback"
 472                     *ngIf="serviceForm.showError('snmp_destination', frm, 'required')"
 473                     i18n>This field is required.</span>
 474               <span class="invalid-feedback"
 475                     *ngIf="serviceForm.showError('snmp_destination', frm, 'snmpDestinationPattern')"
 476                     i18n>The value does not match the pattern: <strong>hostname:port</strong></span>
 477             </div>
 478           </div>
 479           <!-- Engine id for snmp V3 -->
 480           <div class="form-group row"
 481                *ngIf="serviceForm.controls.snmp_version.value === 'V3'">
 482             <label class="cd-col-form-label required"
 483                    for="engine_id">
 484               <span i18n>Engine Id</span>
 485               <cd-helper>
 486                 <span i18n>Unique identifier for the device (in hex).</span>
 487               </cd-helper>
 488             </label>
 489             <div class="cd-col-form-input">
 490               <input id="engine_id"
 491                      class="form-control"
 492                      type="text"
 493                      formControlName="engine_id">
 494               <span class="invalid-feedback"
 495                     *ngIf="serviceForm.showError('engine_id', frm, 'required')"
 496                     i18n>This field is required.</span>
 497               <span class="invalid-feedback"
 498                     *ngIf="serviceForm.showError('engine_id', frm, 'snmpEngineIdPattern')"
 499                     i18n>The value does not match the pattern: <strong>Must be in hexadecimal and length must be multiple of 2 with min value = 10 amd max value = 64.</strong></span>
 500             </div>
 501           </div>
 502           <!-- Auth protocol for snmp V3 -->
 503           <div class="form-group row"
 504                *ngIf="serviceForm.controls.snmp_version.value === 'V3'">
 505             <label class="cd-col-form-label required"
 506                    for="auth_protocol"
 507                    i18n>Auth Protocol</label>
 508             <div class="cd-col-form-input">
 509               <select id="auth_protocol"
 510                       name="auth_protocol"
 511                       class="form-control"
 512                       formControlName="auth_protocol">
 513                 <option i18n
 514                         [ngValue]="null">-- Select auth protocol --</option>
 515                 <option *ngFor="let authProtocol of ['SHA', 'MD5']"
 516                         [value]="authProtocol">
 517                   {{ authProtocol }}
 518                 </option>
 519               </select>
 520               <span class="invalid-feedback"
 521                     *ngIf="serviceForm.showError('auth_protocol', frm, 'required')"
 522                     i18n>This field is required.</span>
 523             </div>
 524           </div>
 525           <!-- Privacy protocol for snmp V3 -->
 526           <div class="form-group row"
 527                *ngIf="serviceForm.controls.snmp_version.value === 'V3'">
 528             <label class="cd-col-form-label"
 529                    for="privacy_protocol"
 530                    i18n>Privacy Protocol</label>
 531             <div class="cd-col-form-input">
 532               <select id="privacy_protocol"
 533                       name="privacy_protocol"
 534                       class="form-control"
 535                       formControlName="privacy_protocol">
 536                 <option i18n
 537                         [ngValue]="null">-- Select privacy protocol --</option>
 538                 <option *ngFor="let privacyProtocol of ['DES', 'AES']"
 539                         [value]="privacyProtocol">
 540                   {{ privacyProtocol }}
 541                 </option>
 542               </select>
 543             </div>
 544           </div>
 545           <!-- Credentials -->
 546           <fieldset>
 547             <legend i18n>Credentials</legend>
 548             <!-- snmp v2c snmp_community -->
 549             <div class="form-group row"
 550                  *ngIf="serviceForm.controls.snmp_version.value === 'V2c'">
 551               <label class="cd-col-form-label required"
 552                      for="snmp_community">
 553                 <span i18n>SNMP Community</span>
 554               </label>
 555               <div class="cd-col-form-input">
 556                 <input id="snmp_community"
 557                        class="form-control"
 558                        type="text"
 559                        formControlName="snmp_community">
 560                 <span class="invalid-feedback"
 561                       *ngIf="serviceForm.showError('snmp_community', frm, 'required')"
 562                       i18n>This field is required.</span>
 563               </div>
 564             </div>
 565             <!-- snmp v3 auth username -->
 566             <div class="form-group row"
 567                  *ngIf="serviceForm.controls.snmp_version.value === 'V3'">
 568               <label class="cd-col-form-label required"
 569                      for="snmp_v3_auth_username">
 570                 <span i18n>Username</span>
 571               </label>
 572               <div class="cd-col-form-input">
 573                 <input id="snmp_v3_auth_username"
 574                        class="form-control"
 575                        type="text"
 576                        formControlName="snmp_v3_auth_username">
 577                 <span class="invalid-feedback"
 578                       *ngIf="serviceForm.showError('snmp_v3_auth_username', frm, 'required')"
 579                       i18n>This field is required.</span>
 580               </div>
 581             </div>
 582             <!-- snmp v3 auth password -->
 583             <div class="form-group row"
 584                  *ngIf="serviceForm.controls.snmp_version.value === 'V3'">
 585               <label class="cd-col-form-label required"
 586                      for="snmp_v3_auth_password">
 587                 <span i18n>Password</span>
 588               </label>
 589               <div class="cd-col-form-input">
 590                 <input id="snmp_v3_auth_password"
 591                        class="form-control"
 592                        type="password"
 593                        formControlName="snmp_v3_auth_password">
 594                 <span class="invalid-feedback"
 595                       *ngIf="serviceForm.showError('snmp_v3_auth_password', frm, 'required')"
 596                       i18n>This field is required.</span>
 597               </div>
 598             </div>
 599             <!-- snmp v3 priv password -->
 600             <div class="form-group row"
 601                  *ngIf="serviceForm.controls.snmp_version.value === 'V3' && serviceForm.controls.privacy_protocol.value !== null && serviceForm.controls.privacy_protocol.value !== undefined">
 602               <label class="cd-col-form-label required"
 603                      for="snmp_v3_priv_password">
 604                 <span i18n>Encryption</span>
 605               </label>
 606               <div class="cd-col-form-input">
 607                 <input id="snmp_v3_priv_password"
 608                        class="form-control"
 609                        type="password"
 610                        formControlName="snmp_v3_priv_password">
 611                 <span class="invalid-feedback"
 612                       *ngIf="serviceForm.showError('snmp_v3_priv_password', frm, 'required')"
 613                       i18n>This field is required.</span>
 614               </div>
 615             </div>
 616           </fieldset>
 617         </ng-container>
 618         <!-- RGW, Ingress & iSCSI -->
 619         <ng-container *ngIf="!serviceForm.controls.unmanaged.value && ['rgw', 'iscsi', 'ingress'].includes(serviceForm.controls.service_type.value)">
 620           <!-- ssl -->
 621           <div class="form-group row">
 622             <div class="cd-col-form-offset">
 623               <div class="custom-control custom-checkbox">
 624                 <input class="custom-control-input"
 625                        id="ssl"
 626                        type="checkbox"
 627                        formControlName="ssl">
 628                 <label class="custom-control-label"
 629                        for="ssl"
 630                        i18n>SSL</label>
 631               </div>
 632             </div>
 633           </div>
 634
 635           <!-- ssl_cert -->
 636           <div *ngIf="serviceForm.controls.ssl.value"
 637                class="form-group row">
 638             <label class="cd-col-form-label"
 639                    for="ssl_cert">
 640               <span i18n>Certificate</span>
 641               <cd-helper i18n>The SSL certificate in PEM format.</cd-helper>
 642             </label>
 643             <div class="cd-col-form-input">
 644               <textarea id="ssl_cert"
 645                         class="form-control resize-vertical text-monospace text-pre"
 646                         formControlName="ssl_cert"
 647                         rows="5">
 648               </textarea>
 649               <input type="file"
 650                      (change)="fileUpload($event.target.files, 'ssl_cert')">
 651               <span class="invalid-feedback"
 652                     *ngIf="serviceForm.showError('ssl_cert', frm, 'required')"
 653                     i18n>This field is required.</span>
 654               <span class="invalid-feedback"
 655                     *ngIf="serviceForm.showError('ssl_cert', frm, 'pattern')"
 656                     i18n>Invalid SSL certificate.</span>
 657             </div>
 658           </div>
 659
 660           <!-- ssl_key -->
 661           <div *ngIf="serviceForm.controls.ssl.value && !(['rgw', 'ingress'].includes(serviceForm.controls.service_type.value))"
 662                class="form-group row">
 663             <label class="cd-col-form-label"
 664                    for="ssl_key">
 665               <span i18n>Private key</span>
 666               <cd-helper i18n>The SSL private key in PEM format.</cd-helper>
 667             </label>
 668             <div class="cd-col-form-input">
 669               <textarea id="ssl_key"
 670                         class="form-control resize-vertical text-monospace text-pre"
 671                         formControlName="ssl_key"
 672                         rows="5">
 673               </textarea>
 674               <input type="file"
 675                      (change)="fileUpload($event.target.files,'ssl_key')">
 676               <span class="invalid-feedback"
 677                     *ngIf="serviceForm.showError('ssl_key', frm, 'required')"
 678                     i18n>This field is required.</span>
 679               <span class="invalid-feedback"
 680                     *ngIf="serviceForm.showError('ssl_key', frm, 'pattern')"
 681                     i18n>Invalid SSL private key.</span>
 682             </div>
 683           </div>
 684         </ng-container>
 685       </div>
 686
 687       <div class="modal-footer">
 688         <div class="text-right">
 689           <cd-form-button-panel (submitActionEvent)="onSubmit()"
 690                                 [form]="serviceForm"
 691                                 [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
 692         </div>
 693       </div>
 694     </form>
 695   </ng-container>
 696 </cd-modal>