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

   1 import { HttpParams } from '@angular/common/http';
   2 import { Component, Input, OnInit, ViewChild } from '@angular/core';
   3 import { AbstractControl, Validators } from '@angular/forms';
   4 import { ActivatedRoute, Router } from '@angular/router';
   5
   6 import { NgbActiveModal, NgbModalRef, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
   7 import _ from 'lodash';
   8 import { forkJoin, merge, Observable, Subject, Subscription } from 'rxjs';
   9 import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
  10 import { CreateRgwServiceEntitiesComponent } from '~/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component';
  11 import { RgwRealm, RgwZonegroup, RgwZone } from '~/app/ceph/rgw/models/rgw-multisite';
  12
  13 import { CephServiceService } from '~/app/shared/api/ceph-service.service';
  14 import { HostService } from '~/app/shared/api/host.service';
  15 import { PoolService } from '~/app/shared/api/pool.service';
  16 import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service';
  17 import { RgwRealmService } from '~/app/shared/api/rgw-realm.service';
  18 import { RgwZoneService } from '~/app/shared/api/rgw-zone.service';
  19 import { RgwZonegroupService } from '~/app/shared/api/rgw-zonegroup.service';
  20 import { SelectMessages } from '~/app/shared/components/select/select-messages.model';
  21 import { SelectOption } from '~/app/shared/components/select/select-option.model';
  22 import {
  23   ActionLabelsI18n,
  24   TimerServiceInterval,
  25   URLVerbs
  26 } from '~/app/shared/constants/app.constants';
  27 import { CdForm } from '~/app/shared/forms/cd-form';
  28 import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
  29 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
  30 import { CdValidators } from '~/app/shared/forms/cd-validators';
  31 import { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
  32 import { FinishedTask } from '~/app/shared/models/finished-task';
  33 import { CephServiceSpec } from '~/app/shared/models/service.interface';
  34 import { ModalService } from '~/app/shared/services/modal.service';
  35 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
  36 import { TimerService } from '~/app/shared/services/timer.service';
  37
  38 @Component({
  39   selector: 'cd-service-form',
  40   templateUrl: './service-form.component.html',
  41   styleUrls: ['./service-form.component.scss']
  42 })
  43 export class ServiceFormComponent extends CdForm implements OnInit {
  44   public sub = new Subscription();
  45
  46   readonly MDS_SVC_ID_PATTERN = /^[a-zA-Z_.-][a-zA-Z0-9_.-]*$/;
  47   readonly SNMP_DESTINATION_PATTERN = /^[^\:]+:[0-9]/;
  48   readonly SNMP_ENGINE_ID_PATTERN = /^[0-9A-Fa-f]{10,64}/g;
  49   readonly INGRESS_SUPPORTED_SERVICE_TYPES = ['rgw', 'nfs'];
  50   @ViewChild(NgbTypeahead, { static: false })
  51   typeahead: NgbTypeahead;
  52
  53   @Input() hiddenServices: string[] = [];
  54
  55   @Input() editing = false;
  56
  57   @Input() serviceName: string;
  58
  59   @Input() serviceType: string;
  60
  61   serviceForm: CdFormGroup;
  62   action: string;
  63   resource: string;
  64   serviceTypes: string[] = [];
  65   serviceIds: string[] = [];
  66   hosts: any;
  67   labels: string[];
  68   labelClick = new Subject<string>();
  69   labelFocus = new Subject<string>();
  70   pools: Array<object>;
  71   services: Array<CephServiceSpec> = [];
  72   pageURL: string;
  73   serviceList: CephServiceSpec[];
  74   multisiteInfo: object[] = [];
  75   defaultRealmId = '';
  76   defaultZonegroupId = '';
  77   defaultZoneId = '';
  78   realmList: RgwRealm[] = [];
  79   zonegroupList: RgwZonegroup[] = [];
  80   zoneList: RgwZone[] = [];
  81   bsModalRef: NgbModalRef;
  82   defaultZonegroup: RgwZonegroup;
  83   showRealmCreationForm = false;
  84   defaultsInfo: { defaultRealmName: string; defaultZonegroupName: string; defaultZoneName: string };
  85   realmNames: string[];
  86   zonegroupNames: string[];
  87   zoneNames: string[];
  88
  89   constructor(
  90     public actionLabels: ActionLabelsI18n,
  91     private cephServiceService: CephServiceService,
  92     private formBuilder: CdFormBuilder,
  93     private hostService: HostService,
  94     private poolService: PoolService,
  95     private router: Router,
  96     private taskWrapperService: TaskWrapperService,
  97     public timerService: TimerService,
  98     public timerServiceVariable: TimerServiceInterval,
  99     public rgwRealmService: RgwRealmService,
 100     public rgwZonegroupService: RgwZonegroupService,
 101     public rgwZoneService: RgwZoneService,
 102     public rgwMultisiteService: RgwMultisiteService,
 103     private route: ActivatedRoute,
 104     public activeModal: NgbActiveModal,
 105     public modalService: ModalService
 106   ) {
 107     super();
 108     this.resource = $localize`service`;
 109     this.hosts = {
 110       options: [],
 111       messages: new SelectMessages({
 112         empty: $localize`There are no hosts.`,
 113         filter: $localize`Filter hosts`
 114       })
 115     };
 116     this.createForm();
 117   }
 118
 119   createForm() {
 120     this.serviceForm = this.formBuilder.group({
 121       // Global
 122       service_type: [null, [Validators.required]],
 123       service_id: [
 124         null,
 125         [
 126           CdValidators.composeIf(
 127             {
 128               service_type: 'mds'
 129             },
 130             [
 131               Validators.required,
 132               CdValidators.custom('mdsPattern', (value: string) => {
 133                 if (_.isEmpty(value)) {
 134                   return false;
 135                 }
 136                 return !this.MDS_SVC_ID_PATTERN.test(value);
 137               })
 138             ]
 139           ),
 140           CdValidators.requiredIf({
 141             service_type: 'nfs'
 142           }),
 143           CdValidators.requiredIf({
 144             service_type: 'iscsi'
 145           }),
 146           CdValidators.requiredIf({
 147             service_type: 'ingress'
 148           }),
 149           CdValidators.composeIf(
 150             {
 151               service_type: 'rgw'
 152             },
 153             [Validators.required]
 154           ),
 155           CdValidators.custom('uniqueName', (service_id: string) => {
 156             return this.serviceIds && this.serviceIds.includes(service_id);
 157           })
 158         ]
 159       ],
 160       placement: ['hosts'],
 161       label: [
 162         null,
 163         [
 164           CdValidators.requiredIf({
 165             placement: 'label',
 166             unmanaged: false
 167           })
 168         ]
 169       ],
 170       hosts: [[]],
 171       count: [null, [CdValidators.number(false)]],
 172       unmanaged: [false],
 173       // iSCSI
 174       pool: [
 175         null,
 176         [
 177           CdValidators.requiredIf({
 178             service_type: 'iscsi'
 179           })
 180         ]
 181       ],
 182       // RGW
 183       rgw_frontend_port: [null, [CdValidators.number(false)]],
 184       realm_name: [null],
 185       zonegroup_name: [null],
 186       zone_name: [null],
 187       // iSCSI
 188       trusted_ip_list: [null],
 189       api_port: [null, [CdValidators.number(false)]],
 190       api_user: [
 191         null,
 192         [
 193           CdValidators.requiredIf({
 194             service_type: 'iscsi',
 195             unmanaged: false
 196           })
 197         ]
 198       ],
 199       api_password: [
 200         null,
 201         [
 202           CdValidators.requiredIf({
 203             service_type: 'iscsi',
 204             unmanaged: false
 205           })
 206         ]
 207       ],
 208       // Ingress
 209       backend_service: [
 210         null,
 211         [
 212           CdValidators.requiredIf({
 213             service_type: 'ingress'
 214           })
 215         ]
 216       ],
 217       virtual_ip: [
 218         null,
 219         [
 220           CdValidators.requiredIf({
 221             service_type: 'ingress'
 222           })
 223         ]
 224       ],
 225       frontend_port: [
 226         null,
 227         [
 228           CdValidators.number(false),
 229           CdValidators.requiredIf({
 230             service_type: 'ingress'
 231           })
 232         ]
 233       ],
 234       monitor_port: [
 235         null,
 236         [
 237           CdValidators.number(false),
 238           CdValidators.requiredIf({
 239             service_type: 'ingress'
 240           })
 241         ]
 242       ],
 243       virtual_interface_networks: [null],
 244       // RGW, Ingress & iSCSI
 245       ssl: [false],
 246       ssl_cert: [
 247         '',
 248         [
 249           CdValidators.composeIf(
 250             {
 251               service_type: 'rgw',
 252               unmanaged: false,
 253               ssl: true
 254             },
 255             [Validators.required, CdValidators.pemCert()]
 256           ),
 257           CdValidators.composeIf(
 258             {
 259               service_type: 'iscsi',
 260               unmanaged: false,
 261               ssl: true
 262             },
 263             [Validators.required, CdValidators.sslCert()]
 264           ),
 265           CdValidators.composeIf(
 266             {
 267               service_type: 'ingress',
 268               unmanaged: false,
 269               ssl: true
 270             },
 271             [Validators.required, CdValidators.pemCert()]
 272           )
 273         ]
 274       ],
 275       ssl_key: [
 276         '',
 277         [
 278           CdValidators.composeIf(
 279             {
 280               service_type: 'iscsi',
 281               unmanaged: false,
 282               ssl: true
 283             },
 284             [Validators.required, CdValidators.sslPrivKey()]
 285           )
 286         ]
 287       ],
 288       // snmp-gateway
 289       snmp_version: [
 290         null,
 291         [
 292           CdValidators.requiredIf({
 293             service_type: 'snmp-gateway'
 294           })
 295         ]
 296       ],
 297       snmp_destination: [
 298         null,
 299         {
 300           validators: [
 301             CdValidators.requiredIf({
 302               service_type: 'snmp-gateway'
 303             }),
 304             CdValidators.custom('snmpDestinationPattern', (value: string) => {
 305               if (_.isEmpty(value)) {
 306                 return false;
 307               }
 308               return !this.SNMP_DESTINATION_PATTERN.test(value);
 309             })
 310           ]
 311         }
 312       ],
 313       engine_id: [
 314         null,
 315         [
 316           CdValidators.requiredIf({
 317             service_type: 'snmp-gateway'
 318           }),
 319           CdValidators.custom('snmpEngineIdPattern', (value: string) => {
 320             if (_.isEmpty(value)) {
 321               return false;
 322             }
 323             return !this.SNMP_ENGINE_ID_PATTERN.test(value);
 324           })
 325         ]
 326       ],
 327       auth_protocol: [
 328         'SHA',
 329         [
 330           CdValidators.requiredIf({
 331             service_type: 'snmp-gateway'
 332           })
 333         ]
 334       ],
 335       privacy_protocol: [null],
 336       snmp_community: [
 337         null,
 338         [
 339           CdValidators.requiredIf({
 340             snmp_version: 'V2c'
 341           })
 342         ]
 343       ],
 344       snmp_v3_auth_username: [
 345         null,
 346         [
 347           CdValidators.requiredIf({
 348             service_type: 'snmp-gateway'
 349           })
 350         ]
 351       ],
 352       snmp_v3_auth_password: [
 353         null,
 354         [
 355           CdValidators.requiredIf({
 356             service_type: 'snmp-gateway'
 357           })
 358         ]
 359       ],
 360       snmp_v3_priv_password: [
 361         null,
 362         [
 363           CdValidators.requiredIf({
 364             privacy_protocol: { op: '!empty' }
 365           })
 366         ]
 367       ],
 368       grafana_port: [null, [CdValidators.number(false)]],
 369       grafana_admin_password: [null]
 370     });
 371   }
 372
 373   ngOnInit(): void {
 374     this.action = this.actionLabels.CREATE;
 375     if (this.router.url.includes('services/(modal:create')) {
 376       this.pageURL = 'services';
 377     } else if (this.router.url.includes('services/(modal:edit')) {
 378       this.editing = true;
 379       this.pageURL = 'services';
 380       this.route.params.subscribe((params: { type: string; name: string }) => {
 381         this.serviceName = params.name;
 382         this.serviceType = params.type;
 383       });
 384     }
 385
 386     this.cephServiceService
 387       .list(new HttpParams({ fromObject: { limit: -1, offset: 0 } }))
 388       .observable.subscribe((services: CephServiceSpec[]) => {
 389         this.serviceList = services;
 390         this.services = services.filter((service: any) =>
 391           this.INGRESS_SUPPORTED_SERVICE_TYPES.includes(service.service_type)
 392         );
 393       });
 394
 395     this.cephServiceService.getKnownTypes().subscribe((resp: Array<string>) => {
 396       // Remove service types:
 397       // osd       - This is deployed a different way.
 398       // container - This should only be used in the CLI.
 399       this.hiddenServices.push('osd', 'container');
 400
 401       this.serviceTypes = _.difference(resp, this.hiddenServices).sort();
 402     });
 403     const hostContext = new CdTableFetchDataContext(() => undefined);
 404     this.hostService.list(hostContext.toParams(), 'false').subscribe((resp: object[]) => {
 405       const options: SelectOption[] = [];
 406       _.forEach(resp, (host: object) => {
 407         if (_.get(host, 'sources.orchestrator', false)) {
 408           const option = new SelectOption(false, _.get(host, 'hostname'), '');
 409           options.push(option);
 410         }
 411       });
 412       this.hosts.options = [...options];
 413     });
 414     this.hostService.getLabels().subscribe((resp: string[]) => {
 415       this.labels = resp;
 416     });
 417     this.poolService.getList().subscribe((resp: Array<object>) => {
 418       this.pools = resp;
 419     });
 420
 421     if (this.editing) {
 422       this.action = this.actionLabels.EDIT;
 423       this.disableForEditing(this.serviceType);
 424       this.cephServiceService
 425         .list(new HttpParams({ fromObject: { limit: -1, offset: 0 } }), this.serviceName)
 426         .observable.subscribe((response: CephServiceSpec[]) => {
 427           const formKeys = ['service_type', 'service_id', 'unmanaged'];
 428           formKeys.forEach((keys) => {
 429             this.serviceForm.get(keys).setValue(response[0][keys]);
 430           });
 431           if (!response[0]['unmanaged']) {
 432             const placementKey = Object.keys(response[0]['placement'])[0];
 433             let placementValue: string;
 434             ['hosts', 'label'].indexOf(placementKey) >= 0
 435               ? (placementValue = placementKey)
 436               : (placementValue = 'hosts');
 437             this.serviceForm.get('placement').setValue(placementValue);
 438             this.serviceForm.get('count').setValue(response[0]['placement']['count']);
 439             if (response[0]?.placement[placementValue]) {
 440               this.serviceForm.get(placementValue).setValue(response[0]?.placement[placementValue]);
 441             }
 442           }
 443           switch (this.serviceType) {
 444             case 'iscsi':
 445               const specKeys = ['pool', 'api_password', 'api_user', 'trusted_ip_list', 'api_port'];
 446               specKeys.forEach((key) => {
 447                 this.serviceForm.get(key).setValue(response[0].spec[key]);
 448               });
 449               this.serviceForm.get('ssl').setValue(response[0].spec?.api_secure);
 450               if (response[0].spec?.api_secure) {
 451                 this.serviceForm.get('ssl_cert').setValue(response[0].spec?.ssl_cert);
 452                 this.serviceForm.get('ssl_key').setValue(response[0].spec?.ssl_key);
 453               }
 454               break;
 455             case 'rgw':
 456               this.serviceForm
 457                 .get('rgw_frontend_port')
 458                 .setValue(response[0].spec?.rgw_frontend_port);
 459               this.getServiceIds(
 460                 'rgw',
 461                 response[0].spec?.rgw_realm,
 462                 response[0].spec?.rgw_zonegroup,
 463                 response[0].spec?.rgw_zone
 464               );
 465               this.serviceForm.get('ssl').setValue(response[0].spec?.ssl);
 466               if (response[0].spec?.ssl) {
 467                 this.serviceForm
 468                   .get('ssl_cert')
 469                   .setValue(response[0].spec?.rgw_frontend_ssl_certificate);
 470               }
 471               break;
 472             case 'ingress':
 473               const ingressSpecKeys = [
 474                 'backend_service',
 475                 'virtual_ip',
 476                 'frontend_port',
 477                 'monitor_port',
 478                 'virtual_interface_networks',
 479                 'ssl'
 480               ];
 481               ingressSpecKeys.forEach((key) => {
 482                 this.serviceForm.get(key).setValue(response[0].spec[key]);
 483               });
 484               if (response[0].spec?.ssl) {
 485                 this.serviceForm.get('ssl_cert').setValue(response[0].spec?.ssl_cert);
 486                 this.serviceForm.get('ssl_key').setValue(response[0].spec?.ssl_key);
 487               }
 488               break;
 489             case 'snmp-gateway':
 490               const snmpCommonSpecKeys = ['snmp_version', 'snmp_destination'];
 491               snmpCommonSpecKeys.forEach((key) => {
 492                 this.serviceForm.get(key).setValue(response[0].spec[key]);
 493               });
 494               if (this.serviceForm.getValue('snmp_version') === 'V3') {
 495                 const snmpV3SpecKeys = [
 496                   'engine_id',
 497                   'auth_protocol',
 498                   'privacy_protocol',
 499                   'snmp_v3_auth_username',
 500                   'snmp_v3_auth_password',
 501                   'snmp_v3_priv_password'
 502                 ];
 503                 snmpV3SpecKeys.forEach((key) => {
 504                   if (key !== null) {
 505                     if (
 506                       key === 'snmp_v3_auth_username' ||
 507                       key === 'snmp_v3_auth_password' ||
 508                       key === 'snmp_v3_priv_password'
 509                     ) {
 510                       this.serviceForm.get(key).setValue(response[0].spec['credentials'][key]);
 511                     } else {
 512                       this.serviceForm.get(key).setValue(response[0].spec[key]);
 513                     }
 514                   }
 515                 });
 516               } else {
 517                 this.serviceForm
 518                   .get('snmp_community')
 519                   .setValue(response[0].spec['credentials']['snmp_community']);
 520               }
 521               break;
 522             case 'grafana':
 523               this.serviceForm.get('grafana_port').setValue(response[0].spec.port);
 524               this.serviceForm
 525                 .get('grafana_admin_password')
 526                 .setValue(response[0].spec.initial_admin_password);
 527               break;
 528           }
 529         });
 530     }
 531   }
 532
 533   getDefaultsEntities(
 534     defaultRealmId: string,
 535     defaultZonegroupId: string,
 536     defaultZoneId: string
 537   ): { defaultRealmName: string; defaultZonegroupName: string; defaultZoneName: string } {
 538     const defaultRealm = this.realmList.find((x: { id: string }) => x.id === defaultRealmId);
 539     const defaultZonegroup = this.zonegroupList.find(
 540       (x: { id: string }) => x.id === defaultZonegroupId
 541     );
 542     const defaultZone = this.zoneList.find((x: { id: string }) => x.id === defaultZoneId);
 543     const defaultRealmName = defaultRealm !== undefined ? defaultRealm.name : null;
 544     const defaultZonegroupName = defaultZonegroup !== undefined ? defaultZonegroup.name : 'default';
 545     const defaultZoneName = defaultZone !== undefined ? defaultZone.name : 'default';
 546     if (defaultZonegroupName === 'default' && !this.zonegroupNames.includes(defaultZonegroupName)) {
 547       const defaultZonegroup = new RgwZonegroup();
 548       defaultZonegroup.name = 'default';
 549       this.zonegroupList.push(defaultZonegroup);
 550     }
 551     if (defaultZoneName === 'default' && !this.zoneNames.includes(defaultZoneName)) {
 552       const defaultZone = new RgwZone();
 553       defaultZone.name = 'default';
 554       this.zoneList.push(defaultZone);
 555     }
 556     return {
 557       defaultRealmName: defaultRealmName,
 558       defaultZonegroupName: defaultZonegroupName,
 559       defaultZoneName: defaultZoneName
 560     };
 561   }
 562
 563   getServiceIds(
 564     selectedServiceType: string,
 565     realm_name?: string,
 566     zonegroup_name?: string,
 567     zone_name?: string
 568   ) {
 569     this.serviceIds = this.serviceList
 570       ?.filter((service) => service['service_type'] === selectedServiceType)
 571       .map((service) => service['service_id']);
 572
 573     if (selectedServiceType === 'rgw') {
 574       const observables = [
 575         this.rgwRealmService.getAllRealmsInfo(),
 576         this.rgwZonegroupService.getAllZonegroupsInfo(),
 577         this.rgwZoneService.getAllZonesInfo()
 578       ];
 579       this.sub = forkJoin(observables).subscribe(
 580         (multisiteInfo: [object, object, object]) => {
 581           this.multisiteInfo = multisiteInfo;
 582           this.realmList =
 583             this.multisiteInfo[0] !== undefined && this.multisiteInfo[0].hasOwnProperty('realms')
 584               ? this.multisiteInfo[0]['realms']
 585               : [];
 586           this.zonegroupList =
 587             this.multisiteInfo[1] !== undefined &&
 588             this.multisiteInfo[1].hasOwnProperty('zonegroups')
 589               ? this.multisiteInfo[1]['zonegroups']
 590               : [];
 591           this.zoneList =
 592             this.multisiteInfo[2] !== undefined && this.multisiteInfo[2].hasOwnProperty('zones')
 593               ? this.multisiteInfo[2]['zones']
 594               : [];
 595           this.realmNames = this.realmList.map((realm) => {
 596             return realm['name'];
 597           });
 598           this.zonegroupNames = this.zonegroupList.map((zonegroup) => {
 599             return zonegroup['name'];
 600           });
 601           this.zoneNames = this.zoneList.map((zone) => {
 602             return zone['name'];
 603           });
 604           this.defaultRealmId = multisiteInfo[0]['default_realm'];
 605           this.defaultZonegroupId = multisiteInfo[1]['default_zonegroup'];
 606           this.defaultZoneId = multisiteInfo[2]['default_zone'];
 607           this.defaultsInfo = this.getDefaultsEntities(
 608             this.defaultRealmId,
 609             this.defaultZonegroupId,
 610             this.defaultZoneId
 611           );
 612           if (!this.editing) {
 613             this.serviceForm.get('realm_name').setValue(this.defaultsInfo['defaultRealmName']);
 614             this.serviceForm
 615               .get('zonegroup_name')
 616               .setValue(this.defaultsInfo['defaultZonegroupName']);
 617             this.serviceForm.get('zone_name').setValue(this.defaultsInfo['defaultZoneName']);
 618           } else {
 619             if (realm_name && !this.realmNames.includes(realm_name)) {
 620               const realm = new RgwRealm();
 621               realm.name = realm_name;
 622               this.realmList.push(realm);
 623             }
 624             if (zonegroup_name && !this.zonegroupNames.includes(zonegroup_name)) {
 625               const zonegroup = new RgwZonegroup();
 626               zonegroup.name = zonegroup_name;
 627               this.zonegroupList.push(zonegroup);
 628             }
 629             if (zone_name && !this.zoneNames.includes(zone_name)) {
 630               const zone = new RgwZone();
 631               zone.name = zone_name;
 632               this.zoneList.push(zone);
 633             }
 634             if (zonegroup_name === undefined && zone_name === undefined) {
 635               zonegroup_name = 'default';
 636               zone_name = 'default';
 637             }
 638             this.serviceForm.get('realm_name').setValue(realm_name);
 639             this.serviceForm.get('zonegroup_name').setValue(zonegroup_name);
 640             this.serviceForm.get('zone_name').setValue(zone_name);
 641           }
 642           if (this.realmList.length === 0) {
 643             this.showRealmCreationForm = true;
 644           } else {
 645             this.showRealmCreationForm = false;
 646           }
 647         },
 648         (_error) => {
 649           const defaultZone = new RgwZone();
 650           defaultZone.name = 'default';
 651           const defaultZonegroup = new RgwZonegroup();
 652           defaultZonegroup.name = 'default';
 653           this.zoneList.push(defaultZone);
 654           this.zonegroupList.push(defaultZonegroup);
 655         }
 656       );
 657     }
 658   }
 659
 660   disableForEditing(serviceType: string) {
 661     const disableForEditKeys = ['service_type', 'service_id'];
 662     disableForEditKeys.forEach((key) => {
 663       this.serviceForm.get(key).disable();
 664     });
 665     switch (serviceType) {
 666       case 'ingress':
 667         this.serviceForm.get('backend_service').disable();
 668     }
 669   }
 670
 671   searchLabels = (text$: Observable<string>) => {
 672     return merge(
 673       text$.pipe(debounceTime(200), distinctUntilChanged()),
 674       this.labelFocus,
 675       this.labelClick.pipe(filter(() => !this.typeahead.isPopupOpen()))
 676     ).pipe(
 677       map((value) =>
 678         this.labels
 679           .filter((label: string) => label.toLowerCase().indexOf(value.toLowerCase()) > -1)
 680           .slice(0, 10)
 681       )
 682     );
 683   };
 684
 685   fileUpload(files: FileList, controlName: string) {
 686     const file: File = files[0];
 687     const reader = new FileReader();
 688     reader.addEventListener('load', (event: ProgressEvent<FileReader>) => {
 689       const control: AbstractControl = this.serviceForm.get(controlName);
 690       control.setValue(event.target.result);
 691       control.markAsDirty();
 692       control.markAsTouched();
 693       control.updateValueAndValidity();
 694     });
 695     reader.readAsText(file, 'utf8');
 696   }
 697
 698   prePopulateId() {
 699     const control: AbstractControl = this.serviceForm.get('service_id');
 700     const backendService = this.serviceForm.getValue('backend_service');
 701     // Set Id as read-only
 702     control.reset({ value: backendService, disabled: true });
 703   }
 704
 705   onSubmit() {
 706     const self = this;
 707     const values: object = this.serviceForm.getRawValue();
 708     const serviceType: string = values['service_type'];
 709     let taskUrl = `service/${URLVerbs.CREATE}`;
 710     if (this.editing) {
 711       taskUrl = `service/${URLVerbs.EDIT}`;
 712     }
 713     const serviceSpec: object = {
 714       service_type: serviceType,
 715       placement: {},
 716       unmanaged: values['unmanaged']
 717     };
 718     let svcId: string;
 719     if (serviceType === 'rgw') {
 720       serviceSpec['rgw_realm'] = values['realm_name'] ? values['realm_name'] : null;
 721       serviceSpec['rgw_zonegroup'] =
 722         values['zonegroup_name'] !== 'default' ? values['zonegroup_name'] : null;
 723       serviceSpec['rgw_zone'] = values['zone_name'] !== 'default' ? values['zone_name'] : null;
 724       svcId = values['service_id'];
 725     } else {
 726       svcId = values['service_id'];
 727     }
 728     const serviceId: string = svcId;
 729     let serviceName: string = serviceType;
 730     if (_.isString(serviceId) && !_.isEmpty(serviceId)) {
 731       serviceName = `${serviceType}.${serviceId}`;
 732       serviceSpec['service_id'] = serviceId;
 733     }
 734
 735     // These services has some fields to be
 736     // filled out even if unmanaged is true
 737     switch (serviceType) {
 738       case 'ingress':
 739         serviceSpec['backend_service'] = values['backend_service'];
 740         serviceSpec['service_id'] = values['backend_service'];
 741         if (_.isNumber(values['frontend_port']) && values['frontend_port'] > 0) {
 742           serviceSpec['frontend_port'] = values['frontend_port'];
 743         }
 744         if (_.isString(values['virtual_ip']) && !_.isEmpty(values['virtual_ip'])) {
 745           serviceSpec['virtual_ip'] = values['virtual_ip'].trim();
 746         }
 747         if (_.isNumber(values['monitor_port']) && values['monitor_port'] > 0) {
 748           serviceSpec['monitor_port'] = values['monitor_port'];
 749         }
 750         break;
 751
 752       case 'iscsi':
 753         serviceSpec['pool'] = values['pool'];
 754         break;
 755
 756       case 'snmp-gateway':
 757         serviceSpec['credentials'] = {};
 758         serviceSpec['snmp_version'] = values['snmp_version'];
 759         serviceSpec['snmp_destination'] = values['snmp_destination'];
 760         if (values['snmp_version'] === 'V3') {
 761           serviceSpec['engine_id'] = values['engine_id'];
 762           serviceSpec['auth_protocol'] = values['auth_protocol'];
 763           serviceSpec['credentials']['snmp_v3_auth_username'] = values['snmp_v3_auth_username'];
 764           serviceSpec['credentials']['snmp_v3_auth_password'] = values['snmp_v3_auth_password'];
 765           if (values['privacy_protocol'] !== null) {
 766             serviceSpec['privacy_protocol'] = values['privacy_protocol'];
 767             serviceSpec['credentials']['snmp_v3_priv_password'] = values['snmp_v3_priv_password'];
 768           }
 769         } else {
 770           serviceSpec['credentials']['snmp_community'] = values['snmp_community'];
 771         }
 772         break;
 773     }
 774
 775     if (!values['unmanaged']) {
 776       switch (values['placement']) {
 777         case 'hosts':
 778           if (values['hosts'].length > 0) {
 779             serviceSpec['placement']['hosts'] = values['hosts'];
 780           }
 781           break;
 782         case 'label':
 783           serviceSpec['placement']['label'] = values['label'];
 784           break;
 785       }
 786       if (_.isNumber(values['count']) && values['count'] > 0) {
 787         serviceSpec['placement']['count'] = values['count'];
 788       }
 789       switch (serviceType) {
 790         case 'rgw':
 791           if (_.isNumber(values['rgw_frontend_port']) && values['rgw_frontend_port'] > 0) {
 792             serviceSpec['rgw_frontend_port'] = values['rgw_frontend_port'];
 793           }
 794           serviceSpec['ssl'] = values['ssl'];
 795           if (values['ssl']) {
 796             serviceSpec['rgw_frontend_ssl_certificate'] = values['ssl_cert']?.trim();
 797           }
 798           break;
 799         case 'iscsi':
 800           if (_.isString(values['trusted_ip_list']) && !_.isEmpty(values['trusted_ip_list'])) {
 801             serviceSpec['trusted_ip_list'] = values['trusted_ip_list'].trim();
 802           }
 803           if (_.isNumber(values['api_port']) && values['api_port'] > 0) {
 804             serviceSpec['api_port'] = values['api_port'];
 805           }
 806           serviceSpec['api_user'] = values['api_user'];
 807           serviceSpec['api_password'] = values['api_password'];
 808           serviceSpec['api_secure'] = values['ssl'];
 809           if (values['ssl']) {
 810             serviceSpec['ssl_cert'] = values['ssl_cert']?.trim();
 811             serviceSpec['ssl_key'] = values['ssl_key']?.trim();
 812           }
 813           break;
 814         case 'ingress':
 815           serviceSpec['ssl'] = values['ssl'];
 816           if (values['ssl']) {
 817             serviceSpec['ssl_cert'] = values['ssl_cert']?.trim();
 818             serviceSpec['ssl_key'] = values['ssl_key']?.trim();
 819           }
 820           serviceSpec['virtual_interface_networks'] = values['virtual_interface_networks'];
 821           break;
 822         case 'grafana':
 823           serviceSpec['port'] = values['grafana_port'];
 824           serviceSpec['initial_admin_password'] = values['grafana_admin_password'];
 825       }
 826     }
 827
 828     this.taskWrapperService
 829       .wrapTaskAroundCall({
 830         task: new FinishedTask(taskUrl, {
 831           service_name: serviceName
 832         }),
 833         call: this.editing
 834           ? this.cephServiceService.update(serviceSpec)
 835           : this.cephServiceService.create(serviceSpec)
 836       })
 837       .subscribe({
 838         error() {
 839           self.serviceForm.setErrors({ cdSubmitButton: true });
 840         },
 841         complete: () => {
 842           this.pageURL === 'services'
 843             ? this.router.navigate([this.pageURL, { outlets: { modal: null } }])
 844             : this.activeModal.close();
 845         }
 846       });
 847   }
 848
 849   clearValidations() {
 850     const snmpVersion = this.serviceForm.getValue('snmp_version');
 851     const privacyProtocol = this.serviceForm.getValue('privacy_protocol');
 852     if (snmpVersion === 'V3') {
 853       this.serviceForm.get('snmp_community').clearValidators();
 854     } else {
 855       this.serviceForm.get('engine_id').clearValidators();
 856       this.serviceForm.get('auth_protocol').clearValidators();
 857       this.serviceForm.get('privacy_protocol').clearValidators();
 858       this.serviceForm.get('snmp_v3_auth_username').clearValidators();
 859       this.serviceForm.get('snmp_v3_auth_password').clearValidators();
 860     }
 861     if (privacyProtocol === null) {
 862       this.serviceForm.get('snmp_v3_priv_password').clearValidators();
 863     }
 864   }
 865
 866   createMultisiteSetup() {
 867     this.bsModalRef = this.modalService.show(CreateRgwServiceEntitiesComponent, {
 868       size: 'lg'
 869     });
 870     this.bsModalRef.componentInstance.submitAction.subscribe(() => {
 871       this.getServiceIds('rgw');
 872     });
 873   }
 874 }