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">{{ 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="!remoteClusterForm.getValue('showToken') && action !== 'edit'">
 193           <label class="cd-col-form-label"
 194                  for="ttl"
 195                  i18n>Login Expiration</label>
 196           <div class="cd-col-form-input">
 197             <select class="form-select"
 198                     id="ttl"
 199                     formControlName="ttl"
 200                     name="ttl">
 201               <option value="1">1 day</option>
 202               <option value="7">1 week</option>
 203               <option value="15"
 204                       [selected]="true">15 days</option>
 205               <option value="30">30 days</option>
 206             </select>
 207           </div>
 208         </div>
 209         <div class="form-group row"
 210              *ngIf="action !== 'edit'">
 211           <div class="cd-col-form-offset">
 212             <div class="custom-control custom-checkbox">
 213               <input class="custom-control-input"
 214                      id="showToken"
 215                      type="checkbox"
 216                      [checked]="showToken"
 217                      (change)="toggleToken()"
 218                      formControlName="showToken">
 219               <label class="custom-control-label"
 220                      for="showToken"
 221                      i18n>Auth with token</label>
 222             </div>
 223           </div>
 224         </div>
 225         <!-- ssl -->
 226         <div class="form-group row">
 227           <div class="cd-col-form-offset">
 228             <div class="custom-control custom-checkbox">
 229               <input class="custom-control-input"
 230                      id="ssl"
 231                      type="checkbox"
 232                      formControlName="ssl">
 233               <label class="custom-control-label"
 234                      for="ssl"
 235                      i18n>SSL</label>
 236             </div>
 237           </div>
 238         </div>
 239
 240         <!-- ssl_cert -->
 241         <div *ngIf="remoteClusterForm.controls.ssl.value"
 242              class="form-group row">
 243           <label class="cd-col-form-label"
 244                  for="ssl_cert">
 245             <span i18n>Certificate</span>
 246             <cd-helper i18n>The SSL certificate in PEM format.</cd-helper>
 247           </label>
 248           <div class="cd-col-form-input">
 249             <textarea id="ssl_cert"
 250                       class="form-control resize-vertical text-monospace text-pre"
 251                       formControlName="ssl_cert"
 252                       rows="5">
 253             </textarea>
 254             <input type="file"
 255                    (change)="fileUpload($event.target.files, 'ssl_cert')">
 256             <span class="invalid-feedback"
 257                   *ngIf="remoteClusterForm.showError('ssl_cert', frm, 'required')"
 258                   i18n>This field is required.</span>
 259             <span class="invalid-feedback"
 260                   *ngIf="remoteClusterForm.showError('ssl_cert', frm, 'pattern')"
 261                   i18n>Invalid SSL certificate.</span>
 262           </div>
 263         </div>
 264       </div>
 265       <div class="modal-footer">
 266         <cd-form-button-panel (submitActionEvent)="onSubmit()"
 267                               [submitText]="(action | titlecase) + ' ' + 'Cluster'"
 268                               [form]="remoteClusterForm">
 269         </cd-form-button-panel>
 270       </div>
 271     </form>
 272   </ng-container>
 273 </cd-modal>