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' || remoteClusterForm.getValue('showToken')">
  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>
  33               <span>
  34                 <p>Enter the Dashboard API URL. You can retrieve it from the CLI with: <b>{{ clusterApiUrlCmd }} </b>
  35                   <cd-copy-2-clipboard-button [source]="clusterApiUrlCmd"
  36                                               [byId]="false"></cd-copy-2-clipboard-button>
  37                 </p>
  38               </span>
  39             </cd-helper>
  40           </label>
  41           <div class="cd-col-form-input">
  42             <input class="form-control"
  43                    type="text"
  44                    placeholder="https://localhost:4202"
  45                    id="remoteClusterUrl"
  46                    name="remoteClusterUrl"
  47                    formControlName="remoteClusterUrl">
  48             <span class="invalid-feedback"
  49                   *ngIf="remoteClusterForm.showError('remoteClusterUrl', frm, 'required')"
  50                   i18n>This field is required.
  51             </span>
  52             <span class="invalid-feedback"
  53                   *ngIf="remoteClusterForm.showError('remoteClusterUrl', frm, 'endpoint')"
  54                   i18n>Please enter a valid URL.
  55             </span>
  56           </div>
  57         </div>
  58         <div class="form-group row">
  59           <label class="cd-col-form-label required"
  60                  for="clusterAlias"
  61                  i18n>Alias Name
  62           </label>
  63           <div class="cd-col-form-input">
  64             <input id="clusterAlias"
  65                    name="clusterAlias"
  66                    class="form-control"
  67                    type="text"
  68                    placeholder="Name/Text to uniquely identify cluster"
  69                    formControlName="clusterAlias">
  70             <span class="invalid-feedback"
  71                   *ngIf="remoteClusterForm.showError('clusterAlias', frm, 'required')"
  72                   i18n>This field is required.
  73             </span>
  74             <span class="invalid-feedback"
  75                   *ngIf="remoteClusterForm.showError('clusterAlias', frm, 'uniqueName')"
  76                   i18n>The chosen alias name is already in use.
  77             </span>
  78           </div>
  79         </div>
  80         <div class="form-group row"
  81              *ngIf="action !== 'edit'">
  82           <label class="cd-col-form-label required"
  83                  for="username"
  84                  i18n>Username
  85           </label>
  86           <div class="cd-col-form-input">
  87             <input id="username"
  88                    name="username"
  89                    class="form-control"
  90                    type="text"
  91                    formControlName="username">
  92             <span class="invalid-feedback"
  93                   *ngIf="remoteClusterForm.showError('username', frm, 'required')"
  94                   i18n>This field is required.
  95             </span>
  96             <span class="invalid-feedback"
  97                   *ngIf="remoteClusterForm.showError('username', frm, 'uniqueUrlandUser')"
  98                   i18n>A cluster with the chosen user is already connected.
  99             </span>
 100           </div>
 101         </div>
 102         <div class="form-group row"
 103              *ngIf="remoteClusterForm.getValue('showToken') && action !== 'edit'">
 104           <label class="cd-col-form-label required"
 105                  for="clusterFsid"
 106                  i18n>Cluster FSID
 107           </label>
 108           <div class="cd-col-form-input">
 109             <input id="clusterFsid"
 110                    name="clusterFsid"
 111                    class="form-control"
 112                    type="text"
 113                    formControlName="clusterFsid">
 114             <span class="invalid-feedback"
 115                   *ngIf="remoteClusterForm.showError('clusterFsid', frm, 'required')"
 116                   i18n>This field is required.
 117             </span>
 118           </div>
 119         </div>
 120         <div class="form-group row"
 121              *ngIf="remoteClusterForm.getValue('showToken') && action !== 'edit'">
 122           <label class="cd-col-form-label required"
 123                  for="prometheusApiUrl"
 124                  i18n>Prometheus API URL
 125             <cd-helper>
 126               <span>
 127                 <p>Enter the Prometheus API URL. You can retrieve it from the CLI with: <b>{{ prometheusApiUrlCmd }} </b>
 128                   <cd-copy-2-clipboard-button [source]="prometheusApiUrlCmd"
 129                                               [byId]="false"></cd-copy-2-clipboard-button>
 130                 </p>
 131               </span>
 132             </cd-helper>
 133           </label>
 134           <div class="cd-col-form-input">
 135             <input id="prometheusApiUrl"
 136                    name="prometheusApiUrl"
 137                    class="form-control"
 138                    type="text"
 139                    formControlName="prometheusApiUrl">
 140             <span class="invalid-feedback"
 141                   *ngIf="remoteClusterForm.showError('prometheusApiUrl', frm, 'required')"
 142                   i18n>This field is required.
 143             </span>
 144           </div>
 145         </div>
 146         <div class="form-group row"
 147              *ngIf="!remoteClusterForm.getValue('showToken') && !showCrossOriginError && action !== 'edit'">
 148           <label class="cd-col-form-label required"
 149                  for="password"
 150                  i18n>Password
 151           </label>
 152           <div class="cd-col-form-input">
 153             <div class="input-group">
 154               <input id="password"
 155                      name="password"
 156                      class="form-control"
 157                      type="password"
 158                      formControlName="password">
 159               <span class="input-group-button">
 160                 <button type="button"
 161                         class="btn btn-light"
 162                         cdPasswordButton="password">
 163                 </button>
 164                 <cd-copy-2-clipboard-button source="password">
 165                 </cd-copy-2-clipboard-button>
 166               </span>
 167               <span class="invalid-feedback"
 168                     *ngIf="remoteClusterForm.showError('password', frm, 'required')"
 169                     i18n>This field is required.
 170               </span>
 171             </div>
 172           </div>
 173         </div>
 174         <div class="form-group row"
 175              *ngIf="remoteClusterForm.getValue('showToken') && action !== 'edit'">
 176           <label class="cd-col-form-label required"
 177                  for="apiToken"
 178                  i18n>Token
 179           </label>
 180           <div class="cd-col-form-input">
 181             <input id="apiToken"
 182                    name="apiToken"
 183                    class="form-control"
 184                    type="text"
 185                    formControlName="apiToken">
 186             <span class="invalid-feedback"
 187                   *ngIf="remoteClusterForm.showError('apiToken', frm, 'required')"
 188                   i18n>This field is required.</span>
 189           </div>
 190         </div>
 191         <div class="form-group row"
 192              *ngIf="action !== 'edit'">
 193           <div class="cd-col-form-offset">
 194             <div class="custom-control custom-checkbox">
 195               <input class="custom-control-input"
 196                      id="showToken"
 197                      type="checkbox"
 198                      [checked]="showToken"
 199                      (change)="toggleToken()"
 200                      formControlName="showToken">
 201               <label class="custom-control-label"
 202                      for="showToken"
 203                      i18n>Auth with token</label>
 204             </div>
 205           </div>
 206         </div>
 207         <!-- ssl -->
 208         <div class="form-group row">
 209           <div class="cd-col-form-offset">
 210             <div class="custom-control custom-checkbox">
 211               <input class="custom-control-input"
 212                      id="ssl"
 213                      type="checkbox"
 214                      formControlName="ssl">
 215               <label class="custom-control-label"
 216                      for="ssl"
 217                      i18n>SSL</label>
 218             </div>
 219           </div>
 220         </div>
 221
 222         <!-- ssl_cert -->
 223         <div *ngIf="remoteClusterForm.controls.ssl.value"
 224              class="form-group row">
 225           <label class="cd-col-form-label"
 226                  for="ssl_cert">
 227             <span i18n>Certificate</span>
 228             <cd-helper i18n>The SSL certificate in PEM format.</cd-helper>
 229           </label>
 230           <div class="cd-col-form-input">
 231             <textarea id="ssl_cert"
 232                       class="form-control resize-vertical text-monospace text-pre"
 233                       formControlName="ssl_cert"
 234                       rows="5">
 235             </textarea>
 236             <input type="file"
 237                    (change)="fileUpload($event.target.files, 'ssl_cert')">
 238             <span class="invalid-feedback"
 239                   *ngIf="remoteClusterForm.showError('ssl_cert', frm, 'required')"
 240                   i18n>This field is required.</span>
 241             <span class="invalid-feedback"
 242                   *ngIf="remoteClusterForm.showError('ssl_cert', frm, 'pattern')"
 243                   i18n>Invalid SSL certificate.</span>
 244           </div>
 245         </div>
 246       </div>
 247       <div class="modal-footer">
 248         <cd-form-button-panel (submitActionEvent)="onSubmit()"
 249                               [submitText]="(action | titlecase) + ' ' + 'Cluster'"
 250                               [form]="remoteClusterForm">
 251         </cd-form-button-panel>
 252       </div>
 253     </form>
 254   </ng-container>
 255 </cd-modal>