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

   1 <cd-modal [modalRef]="activeModal">
   2   <ng-container i18n="form title"
   3                 class="modal-title">Connect 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           </div>
  68         </div>
  69         <div class="form-group row"
  70              *ngIf="!remoteClusterForm.getValue('showToken') && !showCrossOriginError">
  71           <label class="cd-col-form-label required"
  72                  for="apiToken"
  73                  i18n>Username
  74           </label>
  75           <div class="cd-col-form-input">
  76             <input id="username"
  77                    name="username"
  78                    class="form-control"
  79                    type="text"
  80                    formControlName="username">
  81             <span class="invalid-feedback"
  82                   *ngIf="remoteClusterForm.showError('username', frm, 'required')"
  83                   i18n>This field is required.
  84             </span>
  85           </div>
  86         </div>
  87         <div class="form-group row"
  88              *ngIf="!remoteClusterForm.getValue('showToken') && !showCrossOriginError">
  89           <label class="cd-col-form-label required"
  90                  for="password"
  91                  i18n>Password
  92           </label>
  93           <div class="cd-col-form-input">
  94             <input id="password"
  95                    name="password"
  96                    class="form-control"
  97                    type="password"
  98                    formControlName="password">
  99             <span class="invalid-feedback"
 100                   *ngIf="remoteClusterForm.showError('password', frm, 'required')"
 101                   i18n>This field is required.
 102             </span>
 103           </div>
 104         </div>
 105         <div class="form-group row">
 106           <div class="cd-col-form-offset">
 107             <div class="custom-control custom-checkbox">
 108               <input class="custom-control-input"
 109                      id="showToken"
 110                      type="checkbox"
 111                      (click)="showToken = !showToken"
 112                      formControlName="showToken"
 113                      [readonly]="true">
 114               <label class="custom-control-label"
 115                      for="showToken"
 116                      i18n>Auth with token</label>
 117             </div>
 118           </div>
 119         </div>
 120         <div class="form-group row"
 121              *ngIf="remoteClusterForm.getValue('showToken')">
 122           <label class="cd-col-form-label required"
 123                  for="apiToken"
 124                  i18n>Token
 125           </label>
 126           <div class="cd-col-form-input">
 127             <input id="apiToken"
 128                    name="apiToken"
 129                    class="form-control"
 130                    type="text"
 131                    formControlName="apiToken">
 132             <span class="invalid-feedback"
 133                   *ngIf="remoteClusterForm.showError('apiToken', frm, 'required')"
 134                   i18n>This field is required.</span>
 135           </div>
 136         </div>
 137         <div class="form-group row"
 138              *ngIf="!showCrossOriginError">
 139           <div class="cd-col-form-offset">
 140             <div class="custom-control">
 141               <button class="btn btn-primary"
 142                       type="button"
 143                       [disabled]="(remoteClusterForm.getValue('showToken') && remoteClusterForm.getValue('apiToken') === '') || (!remoteClusterForm.getValue('showToken') && (remoteClusterForm.getValue('username') === '' || remoteClusterForm.getValue('password') === ''))"
 144                       (click)="verifyConnection()">
 145                 Verify Connection
 146               </button>
 147             </div>
 148           </div>
 149         </div>
 150       </div>
 151       <div class="modal-footer">
 152         <cd-form-button-panel (submitActionEvent)="onSubmit()"
 153                               [submitText]="actionLabels.CONNECT"
 154                               [disabled]="!connectionVerified && !showCrossOriginError"
 155                               [form]="remoteClusterForm">
 156         </cd-form-button-panel>
 157       </div>
 158     </form>
 159   </ng-container>
 160 </cd-modal>