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

   1 import { Component, Input, OnInit, ViewChild } from '@angular/core';
   2 import { AbstractControl, Validators } from '@angular/forms';
   3 import { ActivatedRoute, Router } from '@angular/router';
   4
   5 import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
   6 import _ from 'lodash';
   7 import { merge, Observable, Subject } from 'rxjs';
   8 import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
   9
  10 import { CephServiceService } from '~/app/shared/api/ceph-service.service';
  11 import { HostService } from '~/app/shared/api/host.service';
  12 import { PoolService } from '~/app/shared/api/pool.service';
  13 import { SelectMessages } from '~/app/shared/components/select/select-messages.model';
  14 import { SelectOption } from '~/app/shared/components/select/select-option.model';
  15 import { ActionLabelsI18n, URLVerbs } from '~/app/shared/constants/app.constants';
  16 import { CdForm } from '~/app/shared/forms/cd-form';
  17 import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
  18 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
  19 import { CdValidators } from '~/app/shared/forms/cd-validators';
  20 import { FinishedTask } from '~/app/shared/models/finished-task';
  21 import { CephServiceSpec } from '~/app/shared/models/service.interface';
  22 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
  23
  24 @Component({
  25   selector: 'cd-service-form',
  26   templateUrl: './service-form.component.html',
  27   styleUrls: ['./service-form.component.scss']
  28 })
  29 export class ServiceFormComponent extends CdForm implements OnInit {
  30   readonly RGW_SVC_ID_PATTERN = /^([^.]+)(\.([^.]+)\.([^.]+))?$/;
  31   readonly SNMP_DESTINATION_PATTERN = /^[^\:]+:[0-9]/;
  32   readonly SNMP_ENGINE_ID_PATTERN = /^[0-9A-Fa-f]{10,64}/g;
  33   readonly INGRESS_SUPPORTED_SERVICE_TYPES = ['rgw', 'nfs'];
  34   @ViewChild(NgbTypeahead, { static: false })
  35   typeahead: NgbTypeahead;
  36
  37   @Input() hiddenServices: string[] = [];
  38
  39   @Input() editing = false;
  40
  41   @Input() serviceName: string;
  42
  43   @Input() serviceType: string;
  44
  45   serviceForm: CdFormGroup;
  46   action: string;
  47   resource: string;
  48   serviceTypes: string[] = [];
  49   serviceIds: string[] = [];
  50   hosts: any;
  51   labels: string[];
  52   labelClick = new Subject<string>();
  53   labelFocus = new Subject<string>();
  54   pools: Array<object>;
  55   services: Array<CephServiceSpec> = [];
  56   pageURL: string;
  57   serviceList: CephServiceSpec[];
  58
  59   constructor(
  60     public actionLabels: ActionLabelsI18n,
  61     private cephServiceService: CephServiceService,
  62     private formBuilder: CdFormBuilder,
  63     private hostService: HostService,
  64     private poolService: PoolService,
  65     private router: Router,
  66     private taskWrapperService: TaskWrapperService,
  67     private route: ActivatedRoute,
  68     public activeModal: NgbActiveModal
  69   ) {
  70     super();
  71     this.resource = $localize`service`;
  72     this.hosts = {
  73       options: [],
  74       messages: new SelectMessages({
  75         empty: $localize`There are no hosts.`,
  76         filter: $localize`Filter hosts`
  77       })
  78     };
  79     this.createForm();
  80   }
  81
  82   createForm() {
  83     this.serviceForm = this.formBuilder.group({
  84       // Global
  85       service_type: [null, [Validators.required]],
  86       service_id: [
  87         null,
  88         [
  89           CdValidators.requiredIf({
  90             service_type: 'mds'
  91           }),
  92           CdValidators.requiredIf({
  93             service_type: 'nfs'
  94           }),
  95           CdValidators.requiredIf({
  96             service_type: 'iscsi'
  97           }),
  98           CdValidators.requiredIf({
  99             service_type: 'ingress'
 100           }),
 101           CdValidators.composeIf(
 102             {
 103               service_type: 'rgw'
 104             },
 105             [
 106               Validators.required,
 107               CdValidators.custom('rgwPattern', (value: string) => {
 108                 if (_.isEmpty(value)) {
 109                   return false;
 110                 }
 111                 return !this.RGW_SVC_ID_PATTERN.test(value);
 112               })
 113             ]
 114           ),
 115           CdValidators.custom('uniqueName', (service_id: string) => {
 116             return this.serviceIds && this.serviceIds.includes(service_id);
 117           })
 118         ]
 119       ],
 120       placement: ['hosts'],
 121       label: [
 122         null,
 123         [
 124           CdValidators.requiredIf({
 125             placement: 'label',
 126             unmanaged: false
 127           })
 128         ]
 129       ],
 130       hosts: [[]],
 131       count: [null, [CdValidators.number(false)]],
 132       unmanaged: [false],
 133       // iSCSI
 134       pool: [
 135         null,
 136         [
 137           CdValidators.requiredIf({
 138             service_type: 'iscsi'
 139           })
 140         ]
 141       ],
 142       // RGW
 143       rgw_frontend_port: [null, [CdValidators.number(false)]],
 144       // iSCSI
 145       trusted_ip_list: [null],
 146       api_port: [null, [CdValidators.number(false)]],
 147       api_user: [
 148         null,
 149         [
 150           CdValidators.requiredIf({
 151             service_type: 'iscsi',
 152             unmanaged: false
 153           })
 154         ]
 155       ],
 156       api_password: [
 157         null,
 158         [
 159           CdValidators.requiredIf({
 160             service_type: 'iscsi',
 161             unmanaged: false
 162           })
 163         ]
 164       ],
 165       // Ingress
 166       backend_service: [
 167         null,
 168         [
 169           CdValidators.requiredIf({
 170             service_type: 'ingress'
 171           })
 172         ]
 173       ],
 174       virtual_ip: [
 175         null,
 176         [
 177           CdValidators.requiredIf({
 178             service_type: 'ingress'
 179           })
 180         ]
 181       ],
 182       frontend_port: [
 183         null,
 184         [
 185           CdValidators.number(false),
 186           CdValidators.requiredIf({
 187             service_type: 'ingress'
 188           })
 189         ]
 190       ],
 191       monitor_port: [
 192         null,
 193         [
 194           CdValidators.number(false),
 195           CdValidators.requiredIf({
 196             service_type: 'ingress'
 197           })
 198         ]
 199       ],
 200       virtual_interface_networks: [null],
 201       // RGW, Ingress & iSCSI
 202       ssl: [false],
 203       ssl_cert: [
 204         '',
 205         [
 206           CdValidators.composeIf(
 207             {
 208               service_type: 'rgw',
 209               unmanaged: false,
 210               ssl: true
 211             },
 212             [Validators.required, CdValidators.pemCert()]
 213           ),
 214           CdValidators.composeIf(
 215             {
 216               service_type: 'iscsi',
 217               unmanaged: false,
 218               ssl: true
 219             },
 220             [Validators.required, CdValidators.sslCert()]
 221           ),
 222           CdValidators.composeIf(
 223             {
 224               service_type: 'ingress',
 225               unmanaged: false,
 226               ssl: true
 227             },
 228             [Validators.required, CdValidators.pemCert()]
 229           )
 230         ]
 231       ],
 232       ssl_key: [
 233         '',
 234         [
 235           CdValidators.composeIf(
 236             {
 237               service_type: 'iscsi',
 238               unmanaged: false,
 239               ssl: true
 240             },
 241             [Validators.required, CdValidators.sslPrivKey()]
 242           )
 243         ]
 244       ],
 245       // snmp-gateway
 246       snmp_version: [
 247         null,
 248         [
 249           CdValidators.requiredIf({
 250             service_type: 'snmp-gateway'
 251           })
 252         ]
 253       ],
 254       snmp_destination: [
 255         null,
 256         {
 257           validators: [
 258             CdValidators.requiredIf({
 259               service_type: 'snmp-gateway'
 260             }),
 261             CdValidators.custom('snmpDestinationPattern', (value: string) => {
 262               if (_.isEmpty(value)) {
 263                 return false;
 264               }
 265               return !this.SNMP_DESTINATION_PATTERN.test(value);
 266             })
 267           ]
 268         }
 269       ],
 270       engine_id: [
 271         null,
 272         [
 273           CdValidators.requiredIf({
 274             service_type: 'snmp-gateway'
 275           }),
 276           CdValidators.custom('snmpEngineIdPattern', (value: string) => {
 277             if (_.isEmpty(value)) {
 278               return false;
 279             }
 280             return !this.SNMP_ENGINE_ID_PATTERN.test(value);
 281           })
 282         ]
 283       ],
 284       auth_protocol: [
 285         'SHA',
 286         [
 287           CdValidators.requiredIf({
 288             service_type: 'snmp-gateway'
 289           })
 290         ]
 291       ],
 292       privacy_protocol: [null],
 293       snmp_community: [
 294         null,
 295         [
 296           CdValidators.requiredIf({
 297             snmp_version: 'V2c'
 298           })
 299         ]
 300       ],
 301       snmp_v3_auth_username: [
 302         null,
 303         [
 304           CdValidators.requiredIf({
 305             service_type: 'snmp-gateway'
 306           })
 307         ]
 308       ],
 309       snmp_v3_auth_password: [
 310         null,
 311         [
 312           CdValidators.requiredIf({
 313             service_type: 'snmp-gateway'
 314           })
 315         ]
 316       ],
 317       snmp_v3_priv_password: [
 318         null,
 319         [
 320           CdValidators.requiredIf({
 321             privacy_protocol: { op: '!empty' }
 322           })
 323         ]
 324       ]
 325     });
 326   }
 327
 328   ngOnInit(): void {
 329     this.action = this.actionLabels.CREATE;
 330     if (this.router.url.includes('services/(modal:create')) {
 331       this.pageURL = 'services';
 332     } else if (this.router.url.includes('services/(modal:edit')) {
 333       this.editing = true;
 334       this.pageURL = 'services';
 335       this.route.params.subscribe((params: { type: string; name: string }) => {
 336         this.serviceName = params.name;
 337         this.serviceType = params.type;
 338       });
 339     }
 340
 341     this.cephServiceService.list().subscribe((services: CephServiceSpec[]) => {
 342       this.serviceList = services;
 343       this.services = services.filter((service: any) =>
 344         this.INGRESS_SUPPORTED_SERVICE_TYPES.includes(service.service_type)
 345       );
 346     });
 347
 348     this.cephServiceService.getKnownTypes().subscribe((resp: Array<string>) => {
 349       // Remove service types:
 350       // osd       - This is deployed a different way.
 351       // container - This should only be used in the CLI.
 352       this.hiddenServices.push('osd', 'container');
 353
 354       this.serviceTypes = _.difference(resp, this.hiddenServices).sort();
 355     });
 356     this.hostService.list('false').subscribe((resp: object[]) => {
 357       const options: SelectOption[] = [];
 358       _.forEach(resp, (host: object) => {
 359         if (_.get(host, 'sources.orchestrator', false)) {
 360           const option = new SelectOption(false, _.get(host, 'hostname'), '');
 361           options.push(option);
 362         }
 363       });
 364       this.hosts.options = [...options];
 365     });
 366     this.hostService.getLabels().subscribe((resp: string[]) => {
 367       this.labels = resp;
 368     });
 369     this.poolService.getList().subscribe((resp: Array<object>) => {
 370       this.pools = resp;
 371     });
 372
 373     if (this.editing) {
 374       this.action = this.actionLabels.EDIT;
 375       this.disableForEditing(this.serviceType);
 376       this.cephServiceService.list(this.serviceName).subscribe((response: CephServiceSpec[]) => {
 377         const formKeys = ['service_type', 'service_id', 'unmanaged'];
 378         formKeys.forEach((keys) => {
 379           this.serviceForm.get(keys).setValue(response[0][keys]);
 380         });
 381         if (!response[0]['unmanaged']) {
 382           const placementKey = Object.keys(response[0]['placement'])[0];
 383           let placementValue: string;
 384           ['hosts', 'label'].indexOf(placementKey) >= 0
 385             ? (placementValue = placementKey)
 386             : (placementValue = 'hosts');
 387           this.serviceForm.get('placement').setValue(placementValue);
 388           this.serviceForm.get('count').setValue(response[0]['placement']['count']);
 389           if (response[0]?.placement[placementValue]) {
 390             this.serviceForm.get(placementValue).setValue(response[0]?.placement[placementValue]);
 391           }
 392         }
 393         switch (this.serviceType) {
 394           case 'iscsi':
 395             const specKeys = ['pool', 'api_password', 'api_user', 'trusted_ip_list', 'api_port'];
 396             specKeys.forEach((key) => {
 397               this.serviceForm.get(key).setValue(response[0].spec[key]);
 398             });
 399             this.serviceForm.get('ssl').setValue(response[0].spec?.api_secure);
 400             if (response[0].spec?.api_secure) {
 401               this.serviceForm.get('ssl_cert').setValue(response[0].spec?.ssl_cert);
 402               this.serviceForm.get('ssl_key').setValue(response[0].spec?.ssl_key);
 403             }
 404             break;
 405           case 'rgw':
 406             this.serviceForm.get('rgw_frontend_port').setValue(response[0].spec?.rgw_frontend_port);
 407             this.serviceForm.get('ssl').setValue(response[0].spec?.ssl);
 408             if (response[0].spec?.ssl) {
 409               this.serviceForm
 410                 .get('ssl_cert')
 411                 .setValue(response[0].spec?.rgw_frontend_ssl_certificate);
 412             }
 413             break;
 414           case 'ingress':
 415             const ingressSpecKeys = [
 416               'backend_service',
 417               'virtual_ip',
 418               'frontend_port',
 419               'monitor_port',
 420               'virtual_interface_networks',
 421               'ssl'
 422             ];
 423             ingressSpecKeys.forEach((key) => {
 424               this.serviceForm.get(key).setValue(response[0].spec[key]);
 425             });
 426             if (response[0].spec?.ssl) {
 427               this.serviceForm.get('ssl_cert').setValue(response[0].spec?.ssl_cert);
 428               this.serviceForm.get('ssl_key').setValue(response[0].spec?.ssl_key);
 429             }
 430             break;
 431           case 'snmp-gateway':
 432             const snmpCommonSpecKeys = ['snmp_version', 'snmp_destination'];
 433             snmpCommonSpecKeys.forEach((key) => {
 434               this.serviceForm.get(key).setValue(response[0].spec[key]);
 435             });
 436             if (this.serviceForm.getValue('snmp_version') === 'V3') {
 437               const snmpV3SpecKeys = [
 438                 'engine_id',
 439                 'auth_protocol',
 440                 'privacy_protocol',
 441                 'snmp_v3_auth_username',
 442                 'snmp_v3_auth_password',
 443                 'snmp_v3_priv_password'
 444               ];
 445               snmpV3SpecKeys.forEach((key) => {
 446                 if (key !== null) {
 447                   if (
 448                     key === 'snmp_v3_auth_username' ||
 449                     key === 'snmp_v3_auth_password' ||
 450                     key === 'snmp_v3_priv_password'
 451                   ) {
 452                     this.serviceForm.get(key).setValue(response[0].spec['credentials'][key]);
 453                   } else {
 454                     this.serviceForm.get(key).setValue(response[0].spec[key]);
 455                   }
 456                 }
 457               });
 458             } else {
 459               this.serviceForm
 460                 .get('snmp_community')
 461                 .setValue(response[0].spec['credentials']['snmp_community']);
 462             }
 463             break;
 464         }
 465       });
 466     }
 467   }
 468
 469   getServiceIds(selectedServiceType: string) {
 470     this.serviceIds = this.serviceList
 471       .filter((service) => service['service_type'] === selectedServiceType)
 472       .map((service) => service['service_id']);
 473   }
 474
 475   disableForEditing(serviceType: string) {
 476     const disableForEditKeys = ['service_type', 'service_id'];
 477     disableForEditKeys.forEach((key) => {
 478       this.serviceForm.get(key).disable();
 479     });
 480     switch (serviceType) {
 481       case 'ingress':
 482         this.serviceForm.get('backend_service').disable();
 483     }
 484   }
 485
 486   searchLabels = (text$: Observable<string>) => {
 487     return merge(
 488       text$.pipe(debounceTime(200), distinctUntilChanged()),
 489       this.labelFocus,
 490       this.labelClick.pipe(filter(() => !this.typeahead.isPopupOpen()))
 491     ).pipe(
 492       map((value) =>
 493         this.labels
 494           .filter((label: string) => label.toLowerCase().indexOf(value.toLowerCase()) > -1)
 495           .slice(0, 10)
 496       )
 497     );
 498   };
 499
 500   fileUpload(files: FileList, controlName: string) {
 501     const file: File = files[0];
 502     const reader = new FileReader();
 503     reader.addEventListener('load', (event: ProgressEvent<FileReader>) => {
 504       const control: AbstractControl = this.serviceForm.get(controlName);
 505       control.setValue(event.target.result);
 506       control.markAsDirty();
 507       control.markAsTouched();
 508       control.updateValueAndValidity();
 509     });
 510     reader.readAsText(file, 'utf8');
 511   }
 512
 513   prePopulateId() {
 514     const control: AbstractControl = this.serviceForm.get('service_id');
 515     const backendService = this.serviceForm.getValue('backend_service');
 516     // Set Id as read-only
 517     control.reset({ value: backendService, disabled: true });
 518   }
 519
 520   onSubmit() {
 521     const self = this;
 522     const values: object = this.serviceForm.getRawValue();
 523     const serviceType: string = values['service_type'];
 524     let taskUrl = `service/${URLVerbs.CREATE}`;
 525     if (this.editing) {
 526       taskUrl = `service/${URLVerbs.EDIT}`;
 527     }
 528     const serviceSpec: object = {
 529       service_type: serviceType,
 530       placement: {},
 531       unmanaged: values['unmanaged']
 532     };
 533     let svcId: string;
 534     if (serviceType === 'rgw') {
 535       const svcIdMatch = values['service_id'].match(this.RGW_SVC_ID_PATTERN);
 536       svcId = svcIdMatch[1];
 537       if (svcIdMatch[3]) {
 538         serviceSpec['rgw_realm'] = svcIdMatch[3];
 539         serviceSpec['rgw_zone'] = svcIdMatch[4];
 540       }
 541     } else {
 542       svcId = values['service_id'];
 543     }
 544     const serviceId: string = svcId;
 545     let serviceName: string = serviceType;
 546     if (_.isString(serviceId) && !_.isEmpty(serviceId)) {
 547       serviceName = `${serviceType}.${serviceId}`;
 548       serviceSpec['service_id'] = serviceId;
 549     }
 550
 551     // These services has some fields to be
 552     // filled out even if unmanaged is true
 553     switch (serviceType) {
 554       case 'ingress':
 555         serviceSpec['backend_service'] = values['backend_service'];
 556         serviceSpec['service_id'] = values['backend_service'];
 557         if (_.isNumber(values['frontend_port']) && values['frontend_port'] > 0) {
 558           serviceSpec['frontend_port'] = values['frontend_port'];
 559         }
 560         if (_.isString(values['virtual_ip']) && !_.isEmpty(values['virtual_ip'])) {
 561           serviceSpec['virtual_ip'] = values['virtual_ip'].trim();
 562         }
 563         if (_.isNumber(values['monitor_port']) && values['monitor_port'] > 0) {
 564           serviceSpec['monitor_port'] = values['monitor_port'];
 565         }
 566         break;
 567
 568       case 'iscsi':
 569         serviceSpec['pool'] = values['pool'];
 570         break;
 571
 572       case 'snmp-gateway':
 573         serviceSpec['credentials'] = {};
 574         serviceSpec['snmp_version'] = values['snmp_version'];
 575         serviceSpec['snmp_destination'] = values['snmp_destination'];
 576         if (values['snmp_version'] === 'V3') {
 577           serviceSpec['engine_id'] = values['engine_id'];
 578           serviceSpec['auth_protocol'] = values['auth_protocol'];
 579           serviceSpec['credentials']['snmp_v3_auth_username'] = values['snmp_v3_auth_username'];
 580           serviceSpec['credentials']['snmp_v3_auth_password'] = values['snmp_v3_auth_password'];
 581           if (values['privacy_protocol'] !== null) {
 582             serviceSpec['privacy_protocol'] = values['privacy_protocol'];
 583             serviceSpec['credentials']['snmp_v3_priv_password'] = values['snmp_v3_priv_password'];
 584           }
 585         } else {
 586           serviceSpec['credentials']['snmp_community'] = values['snmp_community'];
 587         }
 588         break;
 589     }
 590
 591     if (!values['unmanaged']) {
 592       switch (values['placement']) {
 593         case 'hosts':
 594           if (values['hosts'].length > 0) {
 595             serviceSpec['placement']['hosts'] = values['hosts'];
 596           }
 597           break;
 598         case 'label':
 599           serviceSpec['placement']['label'] = values['label'];
 600           break;
 601       }
 602       if (_.isNumber(values['count']) && values['count'] > 0) {
 603         serviceSpec['placement']['count'] = values['count'];
 604       }
 605       switch (serviceType) {
 606         case 'rgw':
 607           if (_.isNumber(values['rgw_frontend_port']) && values['rgw_frontend_port'] > 0) {
 608             serviceSpec['rgw_frontend_port'] = values['rgw_frontend_port'];
 609           }
 610           serviceSpec['ssl'] = values['ssl'];
 611           if (values['ssl']) {
 612             serviceSpec['rgw_frontend_ssl_certificate'] = values['ssl_cert']?.trim();
 613           }
 614           break;
 615         case 'iscsi':
 616           if (_.isString(values['trusted_ip_list']) && !_.isEmpty(values['trusted_ip_list'])) {
 617             serviceSpec['trusted_ip_list'] = values['trusted_ip_list'].trim();
 618           }
 619           if (_.isNumber(values['api_port']) && values['api_port'] > 0) {
 620             serviceSpec['api_port'] = values['api_port'];
 621           }
 622           serviceSpec['api_user'] = values['api_user'];
 623           serviceSpec['api_password'] = values['api_password'];
 624           serviceSpec['api_secure'] = values['ssl'];
 625           if (values['ssl']) {
 626             serviceSpec['ssl_cert'] = values['ssl_cert']?.trim();
 627             serviceSpec['ssl_key'] = values['ssl_key']?.trim();
 628           }
 629           break;
 630         case 'ingress':
 631           serviceSpec['ssl'] = values['ssl'];
 632           if (values['ssl']) {
 633             serviceSpec['ssl_cert'] = values['ssl_cert']?.trim();
 634             serviceSpec['ssl_key'] = values['ssl_key']?.trim();
 635           }
 636           serviceSpec['virtual_interface_networks'] = values['virtual_interface_networks'];
 637           break;
 638       }
 639     }
 640
 641     this.taskWrapperService
 642       .wrapTaskAroundCall({
 643         task: new FinishedTask(taskUrl, {
 644           service_name: serviceName
 645         }),
 646         call: this.editing
 647           ? this.cephServiceService.update(serviceSpec)
 648           : this.cephServiceService.create(serviceSpec)
 649       })
 650       .subscribe({
 651         error() {
 652           self.serviceForm.setErrors({ cdSubmitButton: true });
 653         },
 654         complete: () => {
 655           this.pageURL === 'services'
 656             ? this.router.navigate([this.pageURL, { outlets: { modal: null } }])
 657             : this.activeModal.close();
 658         }
 659       });
 660   }
 661
 662   clearValidations() {
 663     const snmpVersion = this.serviceForm.getValue('snmp_version');
 664     const privacyProtocol = this.serviceForm.getValue('privacy_protocol');
 665     if (snmpVersion === 'V3') {
 666       this.serviceForm.get('snmp_community').clearValidators();
 667     } else {
 668       this.serviceForm.get('engine_id').clearValidators();
 669       this.serviceForm.get('auth_protocol').clearValidators();
 670       this.serviceForm.get('privacy_protocol').clearValidators();
 671       this.serviceForm.get('snmp_v3_auth_username').clearValidators();
 672       this.serviceForm.get('snmp_v3_auth_password').clearValidators();
 673     }
 674     if (privacyProtocol === null) {
 675       this.serviceForm.get('snmp_v3_priv_password').clearValidators();
 676     }
 677   }
 678 }