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

   1 import { Component, OnDestroy, OnInit } from '@angular/core';
   2 import { FormControl, Validators } from '@angular/forms';
   3 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
   4 import _ from 'lodash';
   5 import { Subscription } from 'rxjs';
   6 import { MultiClusterService } from '~/app/shared/api/multi-cluster.service';
   7 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
   8 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
   9 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
  10 import { CdValidators } from '~/app/shared/forms/cd-validators';
  11 import { NotificationService } from '~/app/shared/services/notification.service';
  12
  13 @Component({
  14   selector: 'cd-multi-cluster-form',
  15   templateUrl: './multi-cluster-form.component.html',
  16   styleUrls: ['./multi-cluster-form.component.scss']
  17 })
  18 export class MultiClusterFormComponent implements OnInit, OnDestroy {
  19   readonly endpoints = /^((https?:\/\/)|(www.))(?:([a-zA-Z]+)|(\d+\.\d+.\d+.\d+)):\d{2,5}\/?$/;
  20   readonly ipv4Rgx = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/i;
  21   readonly ipv6Rgx = /^(?:[a-f0-9]{1,4}:){7}[a-f0-9]{1,4}$/i;
  22   remoteClusterForm: CdFormGroup;
  23   showToken = false;
  24   connectionVerified: boolean;
  25   connectionMessage = '';
  26   private subs = new Subscription();
  27   showCrossOriginError = false;
  28   crossOriginCmd: string;
  29
  30   constructor(
  31     public activeModal: NgbActiveModal,
  32     public actionLabels: ActionLabelsI18n,
  33     public notificationService: NotificationService,
  34     private multiClusterService: MultiClusterService
  35   ) {
  36     this.createForm();
  37   }
  38   ngOnInit(): void {}
  39
  40   createForm() {
  41     this.remoteClusterForm = new CdFormGroup({
  42       showToken: new FormControl(false),
  43       username: new FormControl('', [
  44         CdValidators.requiredIf({
  45           showToken: false
  46         })
  47       ]),
  48       password: new FormControl('', [
  49         CdValidators.requiredIf({
  50           showToken: false
  51         })
  52       ]),
  53       remoteClusterUrl: new FormControl(null, {
  54         validators: [
  55           CdValidators.custom('endpoint', (value: string) => {
  56             if (_.isEmpty(value)) {
  57               return false;
  58             } else {
  59               return (
  60                 !this.endpoints.test(value) &&
  61                 !this.ipv4Rgx.test(value) &&
  62                 !this.ipv6Rgx.test(value)
  63               );
  64             }
  65           }),
  66           Validators.required
  67         ]
  68       }),
  69       apiToken: new FormControl('', [
  70         CdValidators.requiredIf({
  71           showToken: true
  72         })
  73       ]),
  74       clusterAlias: new FormControl('', {
  75         validators: [Validators.required]
  76       })
  77     });
  78   }
  79
  80   ngOnDestroy() {
  81     this.subs.unsubscribe();
  82   }
  83
  84   onSubmit() {
  85     const url = this.remoteClusterForm.getValue('remoteClusterUrl');
  86     const clusterAlias = this.remoteClusterForm.getValue('clusterAlias');
  87     const username = this.remoteClusterForm.getValue('username');
  88     const password = this.remoteClusterForm.getValue('password');
  89     const token = this.remoteClusterForm.getValue('apiToken');
  90
  91     this.subs.add(
  92       this.multiClusterService
  93         .addCluster(url, clusterAlias, username, password, token, window.location.origin)
  94         .subscribe({
  95           error: () => {
  96             this.remoteClusterForm.setErrors({ cdSubmitButton: true });
  97           },
  98           complete: () => {
  99             this.notificationService.show(
 100               NotificationType.success,
 101               $localize`Cluster added successfully`
 102             );
 103             this.activeModal.close();
 104           }
 105         })
 106     );
 107   }
 108
 109   verifyConnection() {
 110     const url = this.remoteClusterForm.getValue('remoteClusterUrl');
 111     const username = this.remoteClusterForm.getValue('username');
 112     const password = this.remoteClusterForm.getValue('password');
 113     const token = this.remoteClusterForm.getValue('apiToken');
 114
 115     this.subs.add(
 116       this.multiClusterService
 117         .verifyConnection(url, username, password, token)
 118         .subscribe((resp: string) => {
 119           switch (resp) {
 120             case 'Connection successful':
 121               this.connectionVerified = true;
 122               this.connectionMessage = 'Connection Verified Successfully';
 123               this.notificationService.show(
 124                 NotificationType.success,
 125                 $localize`Connection Verified Successfully`
 126               );
 127               break;
 128
 129             case 'Connection refused':
 130               this.connectionVerified = false;
 131               this.showCrossOriginError = true;
 132               this.connectionMessage = resp;
 133               this.crossOriginCmd = `ceph config set mgr mgr/dashboard/cross_origin_url ${window.location.origin} `;
 134               this.notificationService.show(
 135                 NotificationType.error,
 136                 $localize`Connection to the cluster failed`
 137               );
 138               break;
 139
 140             default:
 141               this.connectionVerified = false;
 142               this.connectionMessage = resp;
 143               this.notificationService.show(
 144                 NotificationType.error,
 145                 $localize`Connection to the cluster failed`
 146               );
 147               break;
 148           }
 149         })
 150     );
 151   }
 152 }