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

   1 <div class="custom-modal-content">
   2   <cd-modal [modalRef]="activeModal"
   3             [pageURL]="pageURL">
   4     <ng-container i18n="form title"
   5                   class="modal-title">Set up Multi-site Replication</ng-container>
   6     <ng-container class="modal-content">
   7       <div class="card">
   8         <div class="container-fluid">
   9           <cd-wizard [stepsTitle]="stepTitles"></cd-wizard>
  10           <div class="card-body vertical-line">
  11             <form [formGroup]="multisiteSetupForm"
  12                   #formDir="ngForm"
  13                   novalidate>
  14               <ng-container [ngSwitch]="currentStep?.stepIndex">
  15                 <cd-alert-panel *ngIf="loading"
  16                                 spacingClass="mb-3"
  17                                 type="info">
  18                   <span i18n>Please note that this process can take some time. During this period, do not click the back button or close the wizard. Thank you for your patience.</span>
  19                 </cd-alert-panel>
  20                 <div *ngSwitchCase="'1'"
  21                      class="ms-5">
  22                   <h4 class="title"
  23                       i18n>Create Realm & Zonegroup</h4>
  24                   <br>
  25                   <div class="modal-body">
  26                     <div class="form-group row">
  27                       <label class="cd-col-form-label required"
  28                              for="realmName"
  29                              i18n>Realm Name</label>
  30                       <div class="cd-col-form-input">
  31                         <input class="form-control"
  32                                type="text"
  33                                placeholder="Realm name..."
  34                                id="realmName"
  35                                name="realmName"
  36                                formControlName="realmName">
  37                         <cd-help-text>
  38                           <span i18n>Enter a unique name for the Realm. The Realm is a logical grouping of all your Zonegroups.</span>
  39                         </cd-help-text>
  40                         <span class="invalid-feedback"
  41                               *ngIf="multisiteSetupForm.showError('realmName', formDir, 'required')"
  42                               i18n>This field is required.</span>
  43                         <span class="invalid-feedback"
  44                               *ngIf="multisiteSetupForm.showError('realmName', formDir, 'uniqueName')"
  45                               i18n>The chosen realm name is already in use.</span>
  46                       </div>
  47                     </div>
  48                     <div class="form-group row">
  49                       <label class="cd-col-form-label required"
  50                              for="zonegroupName"
  51                              i18n>Zone Group Name</label>
  52                       <div class="cd-col-form-input">
  53                         <input class="form-control"
  54                                type="text"
  55                                placeholder="Zone group name..."
  56                                id="zonegroupName"
  57                                name="zonegroupName"
  58                                formControlName="zonegroupName">
  59                         <cd-help-text>
  60                           <span i18n>Enter a name for the Zonegroup. Zonegroup will help you identify and manage the group of zones.</span>
  61                         </cd-help-text>
  62                         <span class="invalid-feedback"
  63                               *ngIf="multisiteSetupForm.showError('zonegroupName', formDir, 'required')"
  64                               i18n>This field is required.</span>
  65                         <span class="invalid-feedback"
  66                               *ngIf="multisiteSetupForm.showError('zonegroupName', formDir, 'uniqueName')"
  67                               i18n>The chosen zone group name is already in use.</span>
  68                       </div>
  69                     </div>
  70                     <div class="form-group row">
  71                       <label class="cd-col-form-label required"
  72                              for="zonegroup_endpoints"
  73                              i18n>Zonegroup Endpoints</label>
  74                       <div class="cd-col-form-input">
  75                         <cd-select-badges id="zonegroup_endpoints"
  76                                           [data]="rgwEndpoints.value"
  77                                           [options]="rgwEndpoints.options"
  78                                           [customBadges]="true">
  79                         </cd-select-badges>
  80                         <cd-help-text>
  81                           <span i18n>Select the endpoints for the Zonegroup. Endpoints are the URLs or IP addresses from which the rgw gateways in that zonegroup can be accessed. You can select multiple endpoints in case you have multiple rgw gateways in a zonegroup</span>
  82                         </cd-help-text>
  83                       </div>
  84                     </div>
  85                   </div>
  86                 </div>
  87                 <div *ngSwitchCase="'2'"
  88                      class="ms-5">
  89                   <h4 class="title"
  90                       i18n>Create Zone</h4>
  91                   <div class="form-group row">
  92                     <label class="cd-col-form-label required"
  93                            for="zonegroupName"
  94                            i18n>Zone Name</label>
  95                     <div class="cd-col-form-input">
  96                       <input class="form-control"
  97                              type="text"
  98                              placeholder="Zone name..."
  99                              id="zoneName"
 100                              name="zoneName"
 101                              formControlName="zoneName">
 102                       <cd-help-text>
 103                         <span i18n>Enter a unique name for the Zone. A Zone represents a distinct data center or geographical location within a Zonegroup.</span>
 104                       </cd-help-text>
 105                       <span class="invalid-feedback"
 106                             *ngIf="multisiteSetupForm.showError('zoneName', formDir, 'required')"
 107                             i18n>This field is required.</span>
 108                       <span class="invalid-feedback"
 109                             *ngIf="multisiteSetupForm.showError('zoneName', formDir, 'uniqueName')"
 110                             i18n>The chosen zone name is already in use.</span>
 111                     </div>
 112                   </div>
 113                   <div class="form-group row">
 114                     <label class="cd-col-form-label required"
 115                            for="zone_endpoints"
 116                            i18n>Zone Endpoints</label>
 117                     <div class="cd-col-form-input">
 118                       <cd-select-badges id="zone_endpoints"
 119                                         [data]="rgwEndpoints.value"
 120                                         [options]="rgwEndpoints.options"
 121                                         [customBadges]="true">
 122                       </cd-select-badges>
 123                       <cd-help-text>
 124                         <span i18n>Select the endpoints for the Zone. Endpoints are the URLs or IP addresses from which the rgw gateways in that zone can be accessed. You can select multiple endpoints in case you have multiple rgw gateways in a zone</span>
 125                       </cd-help-text>
 126                     </div>
 127                   </div>
 128                   <div class="form-group row">
 129                     <label class="cd-col-form-label required"
 130                            for="username"
 131                            i18n>Username</label>
 132                     <div class="cd-col-form-input">
 133                       <input class="form-control"
 134                              type="text"
 135                              placeholder="Username..."
 136                              id="username"
 137                              name="username"
 138                              formControlName="username"
 139                              ngbTooltip="White spaces at the beginning and end will be trimmed"
 140                              i18n-ngbTooltip
 141                              cdTrim>
 142                       <cd-help-text>
 143                         <span i18n>Specify the username for the system user.</span>
 144                       </cd-help-text>
 145                       <cd-alert-panel type="info"
 146                                       [showTitle]="false">
 147                         <span i18n>This user will be created automatically as part of the process, and it will have the necessary permissions to manage and synchronize resources across zones.</span>
 148                       </cd-alert-panel>
 149                       <span class="invalid-feedback"
 150                             *ngIf="multisiteSetupForm.showError('username', formDir, 'required')"
 151                             i18n>This field is required.</span>
 152                       <span class="invalid-feedback"
 153                             *ngIf="multisiteSetupForm.showError('username', formDir, 'notUnique')"
 154                             i18n>The username already exists.</span>
 155                     </div>
 156                   </div>
 157                 </div>
 158                 <div class="ms-5"
 159                      *ngSwitchCase="'3'">
 160                   <div *ngIf="isMultiClusterConfigured; else exportTokenTemplate">
 161                     <h4 class="title"
 162                         i18n>Select Cluster</h4>
 163                     <div class="form-group row">
 164                       <label class="cd-col-form-label required"
 165                              for="cluster"
 166                              i18n>Cluster</label>
 167                       <div class="cd-col-form-input">
 168                         <select class="form-select"
 169                                 id="cluster"
 170                                 [(ngModel)]="selectedCluster"
 171                                 formControlName="cluster"
 172                                 name="cluster">
 173                           <option *ngFor="let cluster_detail of clusterDetailsArray"
 174                                   [value]="cluster_detail.name">
 175                             {{ cluster_detail.cluster_alias }} - {{ cluster_detail.name }}
 176                           </option>
 177                         </select>
 178                         <cd-help-text>
 179                           <span i18n>Choose the cluster where you want to apply this multisite configuration. The selected cluster will integrate the defined Realm, Zonegroup, and Zones, enabling data synchronization and management across the multisite setup.</span>
 180                         </cd-help-text>
 181                         <cd-alert-panel type="info"
 182                                         [showTitle]="false">
 183                           <span i18n>Before submitting this form, please verify that the selected cluster has an active RGW (Rados Gateway) service running.</span>
 184                         </cd-alert-panel>
 185                       </div>
 186                     </div>
 187                   </div>
 188                   <ng-template #exportTokenTemplate>
 189                     <h4 class="title"
 190                         i18n>Export Token</h4>
 191                     <div *ngFor="let realminfo of realms">
 192                       <div class="form-group row">
 193                         <label class="cd-col-form-label"
 194                                for="realmName"
 195                                i18n>Realm Name</label>
 196                         <div class="cd-col-form-input">
 197                           <input id="realmName"
 198                                  name="realmName"
 199                                  type="text"
 200                                  [value]="realminfo.realm"
 201                                  readonly>
 202                           <cd-help-text>
 203                             <span i18n>Name of the realm that will be involved in replication.</span>
 204                           </cd-help-text>
 205                         </div>
 206                       </div>
 207                       <div class="form-group row">
 208                         <label class="cd-col-form-label"
 209                                for="token"
 210                                i18n>Token</label>
 211                         <div class="cd-col-form-input">
 212                           <input id="realmToken"
 213                                  name="realmToken"
 214                                  type="text"
 215                                  [value]="realminfo.token"
 216                                  class="me-2 mb-4"
 217                                  readonly>
 218                           <cd-copy-2-clipboard-button [source]="realminfo.token"
 219                                                       [byId]="false">
 220                           </cd-copy-2-clipboard-button>
 221                           <cd-help-text>
 222                             <span i18n>This field displays the token needed to import the multisite configuration into a secondary cluster. Copy this token securely and use it on the secondary cluster to replicate the current multisite setup. Ensure that the token is handled securely to prevent unauthorized access.</span>
 223                           </cd-help-text>
 224                         </div>
 225                       </div>
 226                       <hr *ngIf="realms.length > 1">
 227                     </div>
 228                   </ng-template>
 229                 </div>
 230               </ng-container>
 231             </form>
 232           </div>
 233         </div>
 234         <div class="card-footer">
 235           <button class="btn btn-accent m-2 float-end"
 236                   (click)="onNextStep()"
 237                   aria-label="Next"
 238                   i18n>{{ showSubmitButtonLabel() }}
 239             <span *ngIf="loading">
 240               <i [ngClass]="[icons.spinner, icons.spin]"></i>
 241             </span>
 242           </button>
 243           <cd-back-button class="m-2 float-end"
 244                           aria-label="Close"
 245                           (backAction)="onPreviousStep()"
 246                           [name]="showCancelButtonLabel()"
 247                           [disabled]="loading">
 248           </cd-back-button>
 249         </div>
 250       </div>
 251     </ng-container>
 252   </cd-modal>
 253 </div>