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

   1 <cd-modal [modalRef]="activeModal">
   2   <ng-container i18n="form title"
   3                 class="modal-title">{{ action | titlecase }} Cluster
   4   </ng-container>
   5   <ng-container class="modal-content">
   6     <form name="remoteClusterForm"
   7           #frm="ngForm"
   8           [formGroup]="remoteClusterForm">
   9       <div class="modal-body">
  10         <cd-alert-panel *ngIf="connectionVerified !== undefined && !connectionVerified && connectionMessage !== 'Connection refused'"
  11                         type="error"
  12                         spacingClass="mb-3"
  13                         i18n>{{ connectionMessage }}
  14         </cd-alert-panel>
  15         <cd-alert-panel *ngIf="connectionVerified !== undefined && connectionVerified"
  16                         type="success"
  17                         spacingClass="mb-3"
  18                         i18n>{{ connectionMessage }}
  19         </cd-alert-panel>
  20         <cd-alert-panel type="info"
  21                         spacingClass="mb-3"
  22                         i18n
  23                         *ngIf="connectionVerified !== undefined && !connectionVerified && connectionMessage === 'Connection refused'">
  24         <p>You need to set this cluster's url as the cross origin url in the remote cluster you are trying to connect.
  25           You can do it by running this CLI command in your remote cluster and proceed with authentication via token.</p>
  26           <cd-code-block [codes]="[crossOriginCmd]"></cd-code-block>
  27         </cd-alert-panel>
  28         <div class="form-group row">
  29           <label class="cd-col-form-label required"
  30                  for="remoteClusterUrl"
  31                  i18n>Cluster API URL
  32             <cd-helper>Enter the Dashboard API URL. You can retrieve it from the CLI with: <b>ceph mgr services</b></cd-helper>
  33           </label>
  34           <div class="cd-col-form-input">
  35             <input class="form-control"
  36                    type="text"
  37                    placeholder="https://localhost:4202"
  38                    id="remoteClusterUrl"
  39                    name="remoteClusterUrl"
  40                    formControlName="remoteClusterUrl">
  41             <span class="invalid-feedback"
  42                   *ngIf="remoteClusterForm.showError('remoteClusterUrl', frm, 'required')"
  43                   i18n>This field is required.
  44             </span>
  45             <span class="invalid-feedback"
  46                   *ngIf="remoteClusterForm.showError('remoteClusterUrl', frm, 'endpoint')"
  47                   i18n>Please enter a valid URL.
  48             </span>
  49           </div>
  50         </div>
  51         <div class="form-group row">
  52           <label class="cd-col-form-label required"
  53                  for="clusterAlias"
  54                  i18n>Alias Name
  55           </label>
  56           <div class="cd-col-form-input">
  57             <input id="clusterAlias"
  58                    name="clusterAlias"
  59                    class="form-control"
  60                    type="text"
  61                    placeholder="Name/Text to uniquely identify cluster"
  62                    formControlName="clusterAlias">
  63             <span class="invalid-feedback"
  64                   *ngIf="remoteClusterForm.showError('clusterAlias', frm, 'required')"
  65                   i18n>This field is required.
  66             </span>
  67             <span class="invalid-feedback"
  68                   *ngIf="remoteClusterForm.showError('clusterAlias', frm, 'uniqueName')"
  69                   i18n>The chosen alias name is already in use.
  70             </span>
  71           </div>
  72         </div>
  73         <div class="form-group row"
  74              *ngIf="action !== 'edit'">
  75           <label class="cd-col-form-label required"
  76                  for="username"
  77                  i18n>Username
  78           </label>
  79           <div class="cd-col-form-input">
  80             <input id="username"
  81                    name="username"
  82                    class="form-control"
  83                    type="text"
  84                    formControlName="username">
  85             <span class="invalid-feedback"
  86                   *ngIf="remoteClusterForm.showError('username', frm, 'required')"
  87                   i18n>This field is required.
  88             </span>
  89             <span class="invalid-feedback"
  90                   *ngIf="remoteClusterForm.showError('username', frm, 'uniqueUrlandUser')"
  91                   i18n>A cluster with the chosen user is already connected.
  92             </span>
  93           </div>
  94         </div>
  95         <div class="form-group row"
  96              *ngIf="remoteClusterForm.getValue('showToken') && action !== 'edit'">
  97           <label class="cd-col-form-label required"
  98                  for="clusterFsid"
  99                  i18n>Cluster FSID
 100           </label>
 101           <div class="cd-col-form-input">
 102             <input id="clusterFsid"
 103                    name="clusterFsid"
 104                    class="form-control"
 105                    type="text"
 106                    formControlName="clusterFsid">
 107             <span class="invalid-feedback"
 108                   *ngIf="remoteClusterForm.showError('clusterFsid', frm, 'required')"
 109                   i18n>This field is required.
 110             </span>
 111           </div>
 112         </div>
 113         <div class="form-group row"
 114              *ngIf="!remoteClusterForm.getValue('showToken') && !showCrossOriginError && action !== 'edit'">
 115           <label class="cd-col-form-label required"
 116                  for="password"
 117                  i18n>Password
 118           </label>
 119           <div class="cd-col-form-input">
 120             <div class="input-group">
 121               <input id="password"
 122                      name="password"
 123                      class="form-control"
 124                      type="password"
 125                      formControlName="password">
 126               <span class="input-group-button">
 127                 <button type="button"
 128                         class="btn btn-light"
 129                         cdPasswordButton="password">
 130                 </button>
 131                 <cd-copy-2-clipboard-button source="password">
 132                 </cd-copy-2-clipboard-button>
 133               </span>
 134               <span class="invalid-feedback"
 135                     *ngIf="remoteClusterForm.showError('password', frm, 'required')"
 136                     i18n>This field is required.
 137               </span>
 138             </div>
 139           </div>
 140         </div>
 141         <div class="form-group row"
 142              *ngIf="remoteClusterForm.getValue('showToken') && action !== 'edit'">
 143           <label class="cd-col-form-label required"
 144                  for="apiToken"
 145                  i18n>Token
 146           </label>
 147           <div class="cd-col-form-input">
 148             <input id="apiToken"
 149                    name="apiToken"
 150                    class="form-control"
 151                    type="text"
 152                    formControlName="apiToken">
 153             <span class="invalid-feedback"
 154                   *ngIf="remoteClusterForm.showError('apiToken', frm, 'required')"
 155                   i18n>This field is required.</span>
 156           </div>
 157         </div>
 158         <div class="form-group row"
 159              *ngIf="action !== 'edit'">
 160           <div class="cd-col-form-offset">
 161             <div class="custom-control custom-checkbox">
 162               <input class="custom-control-input"
 163                      id="showToken"
 164                      type="checkbox"
 165                      [checked]="showToken"
 166                      (change)="toggleToken()"
 167                      formControlName="showToken">
 168               <label class="custom-control-label"
 169                      for="showToken"
 170                      i18n>Auth with token</label>
 171             </div>
 172           </div>
 173         </div>
 174         <!-- ssl -->
 175         <div class="form-group row">
 176           <div class="cd-col-form-offset">
 177             <div class="custom-control custom-checkbox">
 178               <input class="custom-control-input"
 179                      id="ssl"
 180                      type="checkbox"
 181                      formControlName="ssl">
 182               <label class="custom-control-label"
 183                      for="ssl"
 184                      i18n>SSL</label>
 185             </div>
 186           </div>
 187         </div>
 188
 189         <!-- ssl_cert -->
 190           <div *ngIf="remoteClusterForm.controls.ssl.value"
 191                class="form-group row">
 192             <label class="cd-col-form-label"
 193                    for="ssl_cert">
 194               <span i18n>Certificate</span>
 195               <cd-helper i18n>The SSL certificate in PEM format.</cd-helper>
 196             </label>
 197             <div class="cd-col-form-input">
 198               <textarea id="ssl_cert"
 199                         class="form-control resize-vertical text-monospace text-pre"
 200                         formControlName="ssl_cert"
 201                         rows="5">
 202               </textarea>
 203               <input type="file"
 204                      (change)="fileUpload($event.target.files, 'ssl_cert')">
 205               <span class="invalid-feedback"
 206                     *ngIf="remoteClusterForm.showError('ssl_cert', frm, 'required')"
 207                     i18n>This field is required.</span>
 208               <span class="invalid-feedback"
 209                     *ngIf="remoteClusterForm.showError('ssl_cert', frm, 'pattern')"
 210                     i18n>Invalid SSL certificate.</span>
 211             </div>
 212           </div>
 213         <div class="form-group row"
 214              *ngIf="!showCrossOriginError && action !== 'edit' && !remoteClusterForm.getValue('showToken')">
 215           <div class="cd-col-form-offset">
 216             <div class="custom-control">
 217               <button class="btn btn-primary"
 218                       type="button"
 219                       [disabled]="(remoteClusterForm.getValue('showToken') && remoteClusterForm.getValue('apiToken') === '') || (!remoteClusterForm.getValue('showToken') && (remoteClusterForm.getValue('username') === '' || remoteClusterForm.getValue('password') === ''))"
 220                       (click)="verifyConnection()">
 221                 Verify Connection
 222               </button>
 223             </div>
 224           </div>
 225         </div>
 226       </div>
 227       <div class="modal-footer">
 228         <cd-form-button-panel (submitActionEvent)="onSubmit()"
 229                               [submitText]="(action | titlecase) + ' ' + 'Cluster'"
 230                               [form]="remoteClusterForm">
 231         </cd-form-button-panel>
 232       </div>
 233     </form>
 234   </ng-container>
 235 </cd-modal>