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

   1
   2 <cds-modal size="lg"
   3            [open]="open"
   4            [hasScrollingContent]="true"
   5            (overlaySelected)="closeModal()">
   6   <cds-modal-header (closeSelect)="closeModal()">
   7     <h3 cdsModalHeaderHeading
   8         data-testid="rgw-multisite-wizard-header"
   9         i18n>Set up Multi-site Replication</h3>
  10   </cds-modal-header>
  11
  12   <div cdsModalContent>
  13     <div cdsRow>
  14       <div cdsCol
  15            [columnNumbers]="{'lg': 2, 'md': 2, 'sm': 2}"
  16            class="indicator-wrapper">
  17         <cd-wizard [stepsTitle]="stepTitles"></cd-wizard>
  18       </div>
  19
  20       <div cdsCol
  21            [columnNumbers]="{'lg': 14, 'md': 14, 'sm': 14}">
  22         <form [formGroup]="multisiteSetupForm"
  23               #formDir="ngForm"
  24               novalidate>
  25           <ng-container [ngSwitch]="currentStep?.stepIndex">
  26             <div *ngSwitchCase="0"
  27                  class="ms-5">
  28               <cd-alert-panel type="info"
  29                               spacingClass="mb-3">
  30                   This wizard enables you to set up multi-site replication within your
  31                   Ceph environment.If you have already added another cluster to your
  32                   multi-cluster setup, you can select that cluster in the wizard to
  33                   automate the replication process.If no additional cluster is currently
  34                   added, the wizard will guide you through creating the necessary realm,
  35                   zonegroup, and zone, and provide a realm token.This token can be used
  36                   later to manually import into a desired cluster to establish replication
  37                   between the clusters.
  38               </cd-alert-panel>
  39               <div class="form-group row">
  40                 <label class="cd-col-form-label required"
  41                        for="realmName"
  42                        i18n>Realm Name</label>
  43                 <div class="cd-col-form-input">
  44                   <input class="form-control"
  45                          type="text"
  46                          placeholder="Realm name..."
  47                          id="realmName"
  48                          name="realmName"
  49                          formControlName="realmName">
  50                   <cd-help-text>
  51                     <span i18n>Enter a unique name for the Realm. The Realm is a logical grouping of all your Zonegroups.</span>
  52                   </cd-help-text>
  53                   <span class="invalid-feedback"
  54                         *ngIf="multisiteSetupForm.showError('realmName', formDir, 'required')"
  55                         i18n>This field is required.</span>
  56                   <span class="invalid-feedback"
  57                         *ngIf="multisiteSetupForm.showError('realmName', formDir, 'uniqueName')"
  58                         i18n>The chosen realm name is already in use.</span>
  59                 </div>
  60               </div>
  61               <div class="form-group row">
  62                 <label class="cd-col-form-label required"
  63                        for="zonegroupName"
  64                        i18n>Zone Group Name</label>
  65                 <div class="cd-col-form-input">
  66                   <input class="form-control"
  67                          type="text"
  68                          placeholder="Zone group name..."
  69                          id="zonegroupName"
  70                          name="zonegroupName"
  71                          formControlName="zonegroupName">
  72                   <cd-help-text>
  73                     <span i18n>Enter a name for the Zonegroup. Zonegroup will help you identify and manage the group of zones.</span>
  74                   </cd-help-text>
  75                   <span class="invalid-feedback"
  76                         *ngIf="multisiteSetupForm.showError('zonegroupName', formDir, 'required')"
  77                         i18n>This field is required.</span>
  78                   <span class="invalid-feedback"
  79                         *ngIf="multisiteSetupForm.showError('zonegroupName', formDir, 'uniqueName')"
  80                         i18n>The chosen zone group name is already in use.</span>
  81                 </div>
  82               </div>
  83               <div class="form-group row">
  84                 <label class="cd-col-form-label required"
  85                        for="zonegroup_endpoints"
  86                        i18n>Zonegroup Endpoints</label>
  87                 <div class="cd-col-form-input">
  88                   <cd-select-badges id="zonegroup_endpoints"
  89                                     [data]="rgwEndpoints.value"
  90                                     [options]="rgwEndpoints.options"
  91                                     [customBadges]="true">
  92                   </cd-select-badges>
  93                   <cd-help-text>
  94                     <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>
  95                   </cd-help-text>
  96                 </div>
  97               </div>
  98             </div>
  99             <div *ngSwitchCase="1"
 100                  class="ms-5">
 101               <div class="form-group row">
 102                 <label class="cd-col-form-label required"
 103                        for="zonegroupName"
 104                        i18n>Zone Name</label>
 105                 <div class="cd-col-form-input">
 106                   <input class="form-control"
 107                          type="text"
 108                          placeholder="Zone name..."
 109                          id="zoneName"
 110                          name="zoneName"
 111                          formControlName="zoneName">
 112                   <cd-help-text>
 113                     <span i18n>Enter a unique name for the Zone. A Zone represents a distinct data center or geographical location within a Zonegroup.</span>
 114                   </cd-help-text>
 115                   <span class="invalid-feedback"
 116                         *ngIf="multisiteSetupForm.showError('zoneName', formDir, 'required')"
 117                         i18n>This field is required.</span>
 118                   <span class="invalid-feedback"
 119                         *ngIf="multisiteSetupForm.showError('zoneName', formDir, 'uniqueName')"
 120                         i18n>The chosen zone name is already in use.</span>
 121                 </div>
 122               </div>
 123               <div class="form-group row">
 124                 <label class="cd-col-form-label required"
 125                        for="zone_endpoints"
 126                        i18n>Zone Endpoints</label>
 127                 <div class="cd-col-form-input">
 128                   <cd-select-badges id="zone_endpoints"
 129                                     [data]="rgwEndpoints.value"
 130                                     [options]="rgwEndpoints.options"
 131                                     [customBadges]="true">
 132                   </cd-select-badges>
 133                   <cd-help-text>
 134                     <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>
 135                   </cd-help-text>
 136                 </div>
 137               </div>
 138               <div class="form-group row">
 139                 <label class="cd-col-form-label required"
 140                        for="username"
 141                        i18n>Username</label>
 142                 <div class="cd-col-form-input">
 143                   <input class="form-control"
 144                          type="text"
 145                          placeholder="Username..."
 146                          id="username"
 147                          name="username"
 148                          formControlName="username"
 149                          ngbTooltip="White spaces at the beginning and end will be trimmed"
 150                          i18n-ngbTooltip
 151                          cdTrim>
 152                   <cd-help-text>
 153                     <span i18n>Specify the username for the system user.</span>
 154                   </cd-help-text>
 155                   <cd-alert-panel type="info"
 156                                   [showTitle]="false">
 157                     <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>
 158                   </cd-alert-panel>
 159                   <span class="invalid-feedback"
 160                         *ngIf="multisiteSetupForm.showError('username', formDir, 'required')"
 161                         i18n>This field is required.</span>
 162                   <span class="invalid-feedback"
 163                         *ngIf="multisiteSetupForm.showError('username', formDir, 'notUnique')"
 164                         i18n>The username already exists.</span>
 165                 </div>
 166               </div>
 167             </div>
 168             <div cass="ms-5"
 169                  *ngSwitchCase="2">
 170               <div *ngIf="isMultiClusterConfigured; else nonMultiClusterTemplate">
 171                 <div class="form-group row">
 172                   <label class="cd-col-form-label required"
 173                          for="cluster"
 174                          i18n>Replication Cluster</label>
 175                   <div class="cd-col-form-input">
 176                     <select class="form-select"
 177                             id="cluster"
 178                             [(ngModel)]="selectedCluster"
 179                             formControlName="cluster"
 180                             name="cluster">
 181                       <option *ngFor="let cluster_detail of clusterDetailsArray"
 182                               [value]="cluster_detail.name">
 183                         {{ cluster_detail.cluster_alias }} - {{ cluster_detail.name }}
 184                       </option>
 185                     </select>
 186                     <cd-help-text>
 187                       <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>
 188                     </cd-help-text>
 189                     <cd-alert-panel type="info"
 190                                     [showTitle]="false">
 191                       <span i18n>Before submitting this form, please verify that the selected cluster has an active RGW (Rados Gateway) service running.</span>
 192                     </cd-alert-panel>
 193                   </div>
 194                 </div>
 195                 <div class="form-group row">
 196                   <label class="cd-col-form-label required"
 197                          for="zonegroupName"
 198                          i18n>Replication Zone Name</label>
 199                   <div class="cd-col-form-input">
 200                     <input class="form-control"
 201                            type="text"
 202                            placeholder="Zone name..."
 203                            id="replicationZoneName"
 204                            name="replicationZoneName"
 205                            formControlName="replicationZoneName">
 206                     <cd-help-text>
 207                       <span i18n>Replication zone represents the zone to be created in the replication cluster where your data will be replicated.</span>
 208                     </cd-help-text>
 209                     <span class="invalid-feedback"
 210                           *ngIf="multisiteSetupForm.showError('replicationZoneName', formDir, 'required')"
 211                           i18n>This field is required.</span>
 212                   </div>
 213                 </div>
 214               </div>
 215             </div>
 216             <div *ngSwitchCase="3"
 217                  class="ms-5">
 218               <div *ngIf="isMultiClusterConfigured">
 219                 <ng-container *ngIf="!loading; else loadingTemplate">
 220                   <ng-container *ngIf="!setupCompleted; else progressCompleteTemplate">
 221                     <ng-container *ngTemplateOutlet="reviewTemplate"></ng-container>
 222                   </ng-container>
 223                 </ng-container>
 224               </div>
 225             </div>
 226           </ng-container>
 227         </form>
 228       </div>
 229     </div>
 230   </div>
 231   <cds-modal-footer>
 232     <button cdsButton="secondary"
 233             name="skip-cluster-selection"
 234             aria-label="Skip"
 235             (click)="onSkip()"
 236             *ngIf="stepTitles[currentStep.stepIndex]['label'] === 'Select Cluster'"
 237             i18n>Skip</button>
 238     <button cdsButton="secondary"
 239             (click)="onPreviousStep()"
 240             [attr.aria-label]="showCancelButtonLabel()"
 241             [disabled]="loading"
 242             i18n>{{ showCancelButtonLabel() }}</button>
 243     <button cdsButton="primary"
 244             (click)="onNextStep()"
 245             aria-label="Next"
 246             [disabled]="loading"
 247             i18n>{{ showSubmitButtonLabel() }}
 248       <cds-loading [isActive]="loading"
 249                    [overlay]="false"
 250                    size="sm"
 251                    *ngIf="loading"></cds-loading>
 252     </button>
 253   </cds-modal-footer>
 254 </cds-modal>
 255
 256 <ng-template #nonMultiClusterTemplate>
 257   <ng-container *ngIf="!loading; else loadingTemplate">
 258     <ng-container *ngIf="!setupCompleted else exportTokenTemplate">
 259       <ng-container *ngTemplateOutlet="reviewTemplate"></ng-container>
 260     </ng-container>
 261   </ng-container>
 262 </ng-template>
 263
 264 <ng-template #loadingTemplate>
 265   <ng-container *ngTemplateOutlet="progressTemplate"></ng-container>
 266 </ng-template>
 267
 268 <ng-template #progressCompleteTemplate>
 269   <div *ngIf="isMultiClusterConfigured && !stepsToSkip['Select Cluster']; else exportTokenTemplate">
 270     <div class="text-center text-success"
 271          i18n>
 272       Multi-site replication setup is complete.
 273     </div>
 274   </div>
 275 </ng-template>
 276
 277 <ng-template #progressTemplate>
 278   <cd-progress [value]="executingTask?.progress"
 279                [description]="executingTask?.name?.replace('progress/Multisite-Setup:', '')">
 280   </cd-progress>
 281 </ng-template>
 282
 283 <ng-template #exportTokenTemplate>
 284   <div *ngFor="let realminfo of realms">
 285     <div class="form-group row">
 286       <label class="cd-col-form-label"
 287              for="realmName"
 288              i18n>Realm Name</label>
 289       <div class="cd-col-form-input">
 290         <input id="realmName"
 291                name="realmName"
 292                type="text"
 293                [value]="realminfo.realm"
 294                readonly>
 295         <cd-help-text>
 296           <span i18n>Name of the realm that will be involved in replication.</span>
 297         </cd-help-text>
 298       </div>
 299     </div>
 300     <div class="form-group row">
 301       <label class="cd-col-form-label"
 302              for="token"
 303              i18n>Token</label>
 304       <div class="cd-col-form-input">
 305         <input id="realmToken"
 306                name="realmToken"
 307                type="text"
 308                [value]="realminfo.token"
 309                class="me-2 mb-4"
 310                readonly>
 311         <cd-copy-2-clipboard-button [source]="realminfo.token"
 312                                     [byId]="false">
 313         </cd-copy-2-clipboard-button>
 314         <cd-help-text>
 315           <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>
 316         </cd-help-text>
 317       </div>
 318     </div>
 319     <hr *ngIf="realms.length > 1">
 320   </div>
 321 </ng-template>
 322
 323 <ng-template #reviewTemplate>
 324   <div class="form-group row">
 325     <label class="cd-col-form-label"
 326            i18n>Realm Name:</label>
 327     <div class="cd-col-form-input mt-2 text-muted"
 328          id="realmName">
 329       <b>{{ multisiteSetupForm.get('realmName').value }}</b>
 330     </div>
 331   </div>
 332   <div class="form-group row">
 333     <label class="cd-col-form-label"
 334            i18n>Zonegroup Name:</label>
 335     <div class="cd-col-form-input mt-2 text-muted"
 336          id="zonegroupName">
 337       <b>{{ multisiteSetupForm.get('zonegroupName').value }}</b>
 338     </div>
 339   </div>
 340   <div class="form-group row">
 341     <label class="cd-col-form-label"
 342            i18n>Zonegroup Endpoints:</label>
 343     <div class="cd-col-form-input mt-2 text-muted">
 344       <b>{{ rgwEndpoints.value.join(', ') }}</b>
 345     </div>
 346   </div>
 347   <div class="form-group row">
 348     <label class="cd-col-form-label"
 349            i18n>Zone Name:</label>
 350     <div class="cd-col-form-input mt-2 text-muted"
 351          id="zoneName">
 352       <b>{{ multisiteSetupForm.get('zoneName').value }}</b>
 353     </div>
 354   </div>
 355   <div class="form-group row">
 356     <label class="cd-col-form-label"
 357            i18n>Zone Endpoints:</label>
 358     <div class="cd-col-form-input mt-2 text-muted">
 359       <b>{{ rgwEndpoints.value.join(', ') }}</b>
 360     </div>
 361   </div>
 362   <div class="form-group row">
 363     <label class="cd-col-form-label"
 364            i18n>Username:</label>
 365     <div class="cd-col-form-input mt-2 text-muted">
 366       <b>{{ multisiteSetupForm.get('username').value }}</b>
 367     </div>
 368   </div>
 369   <div *ngIf="isMultiClusterConfigured && !stepsToSkip['Select Cluster']">
 370     <div class="form-group row">
 371       <label class="cd-col-form-label"
 372              i18n>Selected Replication Cluster:</label>
 373       <div class="cd-col-form-input mt-2 text-muted">
 374         <b>{{ selectedCluster }}</b>
 375       </div>
 376     </div>
 377     <div class="form-group row">
 378       <label class="cd-col-form-label"
 379              i18n>Replication Zone Name:</label>
 380       <div class="cd-col-form-input mt-2 text-muted">
 381         <b>{{ multisiteSetupForm.get('replicationZoneName').value }}</b>
 382       </div>
 383     </div>
 384   </div>
 385 </ng-template>