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

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