git.apps.os.sepia.ceph.com Git - ceph.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         i18n>Set up Multi-site Replication</h3>
   9   </cds-modal-header>
  10
  11   <div cdsModalContent>
  12     <div cdsRow>
  13       <div cdsCol
  14            [columnNumbers]="{'lg': 2, 'md': 2, 'sm': 2}"
  15            class="indicator-wrapper">
  16         <cd-wizard [stepsTitle]="stepTitles"></cd-wizard>
  17       </div>
  18
  19       <div cdsCol
  20            [columnNumbers]="{'lg': 14, 'md': 14, 'sm': 14}">
  21         <form [formGroup]="multisiteSetupForm"
  22               #formDir="ngForm"
  23               novalidate>
  24           <ng-container [ngSwitch]="currentStep?.stepIndex">
  25             <cd-alert-panel *ngIf="loading"
  26                             spacingClass="mb-3"
  27                             type="info">
  28               <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>
  29             </cd-alert-panel>
  30             <div *ngSwitchCase="'0'"
  31                  class="ms-5">
  32               <div class="form-group row">
  33                 <label class="cd-col-form-label required"
  34                        for="realmName"
  35                        i18n>Realm Name</label>
  36                 <div class="cd-col-form-input">
  37                   <input class="form-control"
  38                          type="text"
  39                          placeholder="Realm name..."
  40                          id="realmName"
  41                          name="realmName"
  42                          formControlName="realmName"
  43                          modal-primary-focus>
  44                   <cd-help-text>
  45                     <span i18n>Enter a unique name for the Realm. The Realm is a logical grouping of all your Zonegroups.</span>
  46                   </cd-help-text>
  47                   <span class="invalid-feedback"
  48                         *ngIf="multisiteSetupForm.showError('realmName', formDir, 'required')"
  49                         i18n>This field is required.</span>
  50                   <span class="invalid-feedback"
  51                         *ngIf="multisiteSetupForm.showError('realmName', formDir, 'uniqueName')"
  52                         i18n>The chosen realm name is already in use.</span>
  53                 </div>
  54               </div>
  55               <div class="form-group row">
  56                 <label class="cd-col-form-label required"
  57                        for="zonegroupName"
  58                        i18n>Zone Group Name</label>
  59                 <div class="cd-col-form-input">
  60                   <input class="form-control"
  61                          type="text"
  62                          placeholder="Zone group name..."
  63                          id="zonegroupName"
  64                          name="zonegroupName"
  65                          formControlName="zonegroupName">
  66                   <cd-help-text>
  67                     <span i18n>Enter a name for the Zonegroup. Zonegroup will help you identify and manage the group of zones.</span>
  68                   </cd-help-text>
  69                   <span class="invalid-feedback"
  70                         *ngIf="multisiteSetupForm.showError('zonegroupName', formDir, 'required')"
  71                         i18n>This field is required.</span>
  72                   <span class="invalid-feedback"
  73                         *ngIf="multisiteSetupForm.showError('zonegroupName', formDir, 'uniqueName')"
  74                         i18n>The chosen zone group name is already in use.</span>
  75                 </div>
  76               </div>
  77               <div class="form-group row">
  78                 <label class="cd-col-form-label required"
  79                        for="zonegroup_endpoints"
  80                        i18n>Zonegroup Endpoints</label>
  81                 <div class="cd-col-form-input">
  82                   <cd-select-badges id="zonegroup_endpoints"
  83                                     [data]="rgwEndpoints.value"
  84                                     [options]="rgwEndpoints.options"
  85                                     [customBadges]="true">
  86                   </cd-select-badges>
  87                   <cd-help-text>
  88                     <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>
  89                   </cd-help-text>
  90                 </div>
  91               </div>
  92             </div>
  93             <div *ngSwitchCase="'1'"
  94                  class="ms-5">
  95               <h4 class="title"
  96                   i18n>Create Zone</h4>
  97               <div class="form-group row">
  98                 <label class="cd-col-form-label required"
  99                        for="zonegroupName"
 100                        i18n>Zone Name</label>
 101                 <div class="cd-col-form-input">
 102                   <input class="form-control"
 103                          type="text"
 104                          placeholder="Zone name..."
 105                          id="zoneName"
 106                          name="zoneName"
 107                          formControlName="zoneName">
 108                   <cd-help-text>
 109                     <span i18n>Enter a unique name for the Zone. A Zone represents a distinct data center or geographical location within a Zonegroup.</span>
 110                   </cd-help-text>
 111                   <span class="invalid-feedback"
 112                         *ngIf="multisiteSetupForm.showError('zoneName', formDir, 'required')"
 113                         i18n>This field is required.</span>
 114                   <span class="invalid-feedback"
 115                         *ngIf="multisiteSetupForm.showError('zoneName', formDir, 'uniqueName')"
 116                         i18n>The chosen zone name is already in use.</span>
 117                 </div>
 118               </div>
 119               <div class="form-group row">
 120                 <label class="cd-col-form-label required"
 121                        for="zone_endpoints"
 122                        i18n>Zone Endpoints</label>
 123                 <div class="cd-col-form-input">
 124                   <cd-select-badges id="zone_endpoints"
 125                                     [data]="rgwEndpoints.value"
 126                                     [options]="rgwEndpoints.options"
 127                                     [customBadges]="true">
 128                   </cd-select-badges>
 129                   <cd-help-text>
 130                     <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>
 131                   </cd-help-text>
 132                 </div>
 133               </div>
 134               <div class="form-group row">
 135                 <label class="cd-col-form-label required"
 136                        for="username"
 137                        i18n>Username</label>
 138                 <div class="cd-col-form-input">
 139                   <input class="form-control"
 140                          type="text"
 141                          placeholder="Username..."
 142                          id="username"
 143                          name="username"
 144                          formControlName="username"
 145                          ngbTooltip="White spaces at the beginning and end will be trimmed"
 146                          i18n-ngbTooltip
 147                          cdTrim>
 148                   <cd-help-text>
 149                     <span i18n>Specify the username for the system user.</span>
 150                   </cd-help-text>
 151                   <cd-alert-panel type="info"
 152                                   [showTitle]="false">
 153                     <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>
 154                   </cd-alert-panel>
 155                   <span class="invalid-feedback"
 156                         *ngIf="multisiteSetupForm.showError('username', formDir, 'required')"
 157                         i18n>This field is required.</span>
 158                   <span class="invalid-feedback"
 159                         *ngIf="multisiteSetupForm.showError('username', formDir, 'notUnique')"
 160                         i18n>The username already exists.</span>
 161                 </div>
 162               </div>
 163             </div>
 164             <div class="ms-5"
 165                  *ngSwitchCase="'2'">
 166               <div *ngIf="isMultiClusterConfigured; else exportTokenTemplate">
 167                 <h4 class="title"
 168                     i18n>Select Cluster</h4>
 169                 <div class="form-group row">
 170                   <label class="cd-col-form-label required"
 171                          for="cluster"
 172                          i18n>Cluster</label>
 173                   <div class="cd-col-form-input">
 174                     <select class="form-select"
 175                             id="cluster"
 176                             [(ngModel)]="selectedCluster"
 177                             formControlName="cluster"
 178                             name="cluster">
 179                       <option *ngFor="let cluster_detail of clusterDetailsArray"
 180                               [value]="cluster_detail.name">
 181                         {{ cluster_detail.cluster_alias }} - {{ cluster_detail.name }}
 182                       </option>
 183                     </select>
 184                     <cd-help-text>
 185                       <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>
 186                     </cd-help-text>
 187                     <cd-alert-panel type="info"
 188                                     [showTitle]="false">
 189                       <span i18n>Before submitting this form, please verify that the selected cluster has an active RGW (Rados Gateway) service running.</span>
 190                     </cd-alert-panel>
 191                   </div>
 192                 </div>
 193               </div>
 194               <ng-template #exportTokenTemplate>
 195                 <h4 class="title"
 196                     i18n>Export Token</h4>
 197                 <div *ngFor="let realminfo of realms">
 198                   <div class="form-group row">
 199                     <label class="cd-col-form-label"
 200                            for="realmName"
 201                            i18n>Realm Name</label>
 202                     <div class="cd-col-form-input">
 203                       <input id="realmName"
 204                              name="realmName"
 205                              type="text"
 206                              [value]="realminfo.realm"
 207                              readonly>
 208                       <cd-help-text>
 209                         <span i18n>Name of the realm that will be involved in replication.</span>
 210                       </cd-help-text>
 211                     </div>
 212                   </div>
 213                   <div class="form-group row">
 214                     <label class="cd-col-form-label"
 215                            for="token"
 216                            i18n>Token</label>
 217                     <div class="cd-col-form-input">
 218                       <input id="realmToken"
 219                              name="realmToken"
 220                              type="text"
 221                              [value]="realminfo.token"
 222                              class="me-2 mb-4"
 223                              readonly>
 224                       <cd-copy-2-clipboard-button [source]="realminfo.token"
 225                                                   [byId]="false">
 226                       </cd-copy-2-clipboard-button>
 227                       <cd-help-text>
 228                         <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>
 229                       </cd-help-text>
 230                     </div>
 231                   </div>
 232                   <hr *ngIf="realms.length > 1">
 233                 </div>
 234               </ng-template>
 235             </div>
 236           </ng-container>
 237         </form>
 238       </div>
 239     </div>
 240   </div>
 241   <cds-modal-footer>
 242     <button cdsButton="secondary"
 243             (click)="onPreviousStep()"
 244             [attr.aria-label]="showCancelButtonLabel()"
 245             [disabled]="loading"
 246             i18n>{{ showCancelButtonLabel() }}</button>
 247     <button cdsButton="primary"
 248             (click)="onNextStep()"
 249             aria-label="Next"
 250             i18n>{{ showSubmitButtonLabel() }}
 251       <cds-loading [isActive]="loading"
 252                    [overlay]="false"
 253                    size="sm"
 254                    *ngIf="loading"></cds-loading>
 255     </button>
 256   </cds-modal-footer>
 257 </cds-modal>