]> git.proxmox.com Git - ceph.git/blobdiff - ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
update sources to ceph Nautilus 14.2.1
[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / nfs / nfs-form / nfs-form.component.html
diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
new file mode 100644 (file)
index 0000000..44a4ace
--- /dev/null
@@ -0,0 +1,522 @@
+<div class="col-sm-12 col-lg-6">
+  <form name="nfsForm"
+        class="form-horizontal"
+        #formDir="ngForm"
+        [formGroup]="nfsForm"
+        novalidate>
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="panel-title"
+            i18n>NFS export {{ export_id ? cluster_id + ':' + export_id : '' }}</h3>
+      </div>
+
+      <div class="panel-body">
+
+        <!-- cluster_id -->
+        <div class="form-group"
+             [ngClass]="{'has-error': nfsForm.showError('cluster_id', formDir)}"
+             *ngIf="!isDefaultCluster">
+          <label class="col-sm-3 control-label"
+                 for="cluster_id">
+            <ng-container i18n>Cluster</ng-container>
+            <span class="required"></span>
+          </label>
+          <div class="col-sm-9">
+            <select class="form-control"
+                    formControlName="cluster_id"
+                    name="cluster_id"
+                    id="cluster_id"
+                    (change)="onClusterChange()">
+              <option *ngIf="allClusters === null"
+                      value=""
+                      i18n>Loading...</option>
+              <option *ngIf="allClusters !== null && allClusters.length === 0"
+                      value=""
+                      i18n>-- No cluster available --</option>
+              <option *ngIf="allClusters !== null && allClusters.length > 0"
+                      value=""
+                      i18n>-- Select the cluster --</option>
+              <option *ngFor="let cluster of allClusters"
+                      [value]="cluster">{{ cluster }}</option>
+            </select>
+            <span class="help-block"
+                  *ngIf="nfsForm.showError('cluster_id', formDir, 'required')"
+                  i18n>Required field</span>
+          </div>
+        </div>
+
+        <!-- daemons -->
+        <div class="form-group"
+             [ngClass]="{'has-error': nfsForm.showError('daemons', formDir)}">
+          <label class="col-sm-3 control-label"
+                 for="daemons">
+            <ng-container i18n>Daemons</ng-container>
+          </label>
+          <div class="col-sm-9">
+            <ng-container *ngFor="let daemon of nfsForm.getValue('daemons'); let i = index">
+              <div class="input-group cd-mb">
+                <input class="form-control"
+                       type="text"
+                       [value]="daemon"
+                       disabled />
+                <span class="input-group-btn">
+                  <button class="btn btn-default"
+                          type="button"
+                          (click)="removeDaemon(i, daemon)">
+                    <i class="fa fa-remove fa-fw"
+                       aria-hidden="true"></i>
+                  </button>
+                </span>
+              </div>
+            </ng-container>
+
+            <div class="row">
+              <div class="col-md-12">
+                <cd-select [data]="nfsForm.get('daemons').value"
+                           [options]="daemonsSelections"
+                           [messages]="daemonsMessages"
+                           (selection)="onDaemonSelection()"
+                           elemClass="btn btn-default pull-right">
+                  <i class="fa fa-fw fa-plus"></i>
+                  <ng-container i18n>Add daemon</ng-container>
+                </cd-select>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- FSAL -->
+        <div formGroupName="fsal">
+          <!-- Name -->
+          <div class="form-group"
+               [ngClass]="{'has-error': nfsForm.showError('name', formDir)}">
+            <label class="col-sm-3 control-label"
+                   for="name">
+              <ng-container i18n>Storage Backend</ng-container>
+              <span class="required"></span>
+            </label>
+            <div class="col-sm-9">
+              <select class="form-control"
+                      formControlName="name"
+                      name="name"
+                      id="name"
+                      (change)="fsalChangeHandler()">
+                <option *ngIf="allFsals === null"
+                        value=""
+                        i18n>Loading...</option>
+                <option *ngIf="allFsals !== null && allFsals.length === 0"
+                        value=""
+                        i18n>-- No data pools available --</option>
+                <option *ngIf="allFsals !== null && allFsals.length > 0"
+                        value=""
+                        i18n>-- Select the storage backend --</option>
+                <option *ngFor="let fsal of allFsals"
+                        [value]="fsal.value">{{ fsal.descr }}</option>
+              </select>
+              <span class="help-block"
+                    *ngIf="nfsForm.showError('name', formDir, 'required')"
+                    i18n>Required field</span>
+            </div>
+          </div>
+
+          <!-- RGW user -->
+          <div class="form-group"
+               [ngClass]="{'has-error': nfsForm.showError('rgw_user_id', formDir)}"
+               *ngIf="nfsForm.getValue('name') === 'RGW'">
+            <label class="col-sm-3 control-label"
+                   for="rgw_user_id">
+              <ng-container i18n>Object Gateway User</ng-container>
+              <span class="required"></span>
+            </label>
+            <div class="col-sm-9">
+              <select class="form-control"
+                      formControlName="rgw_user_id"
+                      name="rgw_user_id"
+                      id="rgw_user_id"
+                      (change)="rgwUserIdChangeHandler()">
+                <option *ngIf="allRgwUsers === null"
+                        value=""
+                        i18n>Loading...</option>
+                <option *ngIf="allRgwUsers !== null && allRgwUsers.length === 0"
+                        value=""
+                        i18n>-- No users available --</option>
+                <option *ngIf="allRgwUsers !== null && allRgwUsers.length > 0"
+                        value=""
+                        i18n>-- Select the object gateway user --</option>
+                <option *ngFor="let rgwUserId of allRgwUsers"
+                        [value]="rgwUserId">{{ rgwUserId }}</option>
+              </select>
+              <span class="help-block"
+                    *ngIf="nfsForm.showError('rgw_user_id', formDir, 'required')"
+                    i18n>Required field</span>
+            </div>
+          </div>
+
+          <!-- CephFS user_id -->
+          <div class="form-group"
+               [ngClass]="{'has-error': nfsForm.showError('user_id', formDir)}"
+               *ngIf="nfsForm.getValue('name') === 'CEPH'">
+            <label class="col-sm-3 control-label"
+                   for="user_id">
+              <ng-container i18n>CephFS User ID</ng-container>
+              <span class="required"></span>
+            </label>
+            <div class="col-sm-9">
+              <select class="form-control"
+                      formControlName="user_id"
+                      name="user_id"
+                      id="user_id">
+                <option *ngIf="allCephxClients === null"
+                        value=""
+                        i18n>Loading...</option>
+                <option *ngIf="allCephxClients !== null && allCephxClients.length === 0"
+                        value=""
+                        i18n>-- No clients available --</option>
+                <option *ngIf="allCephxClients !== null && allCephxClients.length > 0"
+                        value=""
+                        i18n>-- Select the cephx client --</option>
+                <option *ngFor="let client of allCephxClients"
+                        [value]="client">{{ client }}</option>
+              </select>
+              <span class="help-block"
+                    *ngIf="nfsForm.showError('user_id', formDir, 'required')"
+                    i18n>Required field</span>
+            </div>
+          </div>
+
+          <!-- CephFS fs_name -->
+          <div class="form-group"
+               [ngClass]="{'has-error': nfsForm.showError('fs_name', formDir)}"
+               *ngIf="nfsForm.getValue('name') === 'CEPH'">
+            <label class="col-sm-3 control-label"
+                   for="fs_name">
+              <ng-container i18n>CephFS Name</ng-container>
+              <span class="required"></span>
+            </label>
+            <div class="col-sm-9">
+              <select class="form-control"
+                      formControlName="fs_name"
+                      name="fs_name"
+                      id="fs_name"
+                      (change)="rgwUserIdChangeHandler()">
+                <option *ngIf="allFsNames === null"
+                        value=""
+                        i18n>Loading...</option>
+                <option *ngIf="allFsNames !== null && allFsNames.length === 0"
+                        value=""
+                        i18n>-- No CephFS filesystem available --</option>
+                <option *ngIf="allFsNames !== null && allFsNames.length > 0"
+                        value=""
+                        i18n>-- Select the CephFS filesystem --</option>
+                <option *ngFor="let filesystem of allFsNames"
+                        [value]="filesystem.name">{{ filesystem.name }}</option>
+              </select>
+              <span class="help-block"
+                    *ngIf="nfsForm.showError('fs_name', formDir, 'required')"
+                    i18n>Required field</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Secutiry Label -->
+        <div class="form-group"
+             [ngClass]="{'has-error': nfsForm.showError('security_label', formDir)}"
+             *ngIf="nfsForm.getValue('name') === 'CEPH'">
+          <label class="col-sm-3 control-label"
+                 for="security_label">
+            <ng-container i18n>Security Label</ng-container>
+            <span class="required"
+                  *ngIf="nfsForm.getValue('security_label')"></span>
+          </label>
+
+          <div class="col-sm-9">
+            <div class="checkbox checkbox-primary">
+              <input type="checkbox"
+                     formControlName="security_label"
+                     name="security_label"
+                     id="security_label">
+              <label for="security_label"
+                     i18n>Enable security label</label>
+            </div>
+
+            <br>
+
+            <input type="text"
+                   *ngIf="nfsForm.getValue('security_label')"
+                   class="form-control"
+                   name="sec_label_xattr"
+                   id="sec_label_xattr"
+                   formControlName="sec_label_xattr">
+
+            <span class="help-block"
+                  *ngIf="nfsForm.showError('sec_label_xattr', formDir, 'required')"
+                  i18n>Required field</span>
+          </div>
+        </div>
+
+        <!-- Path -->
+        <div class="form-group"
+             [ngClass]="{'has-error': nfsForm.showError('path', formDir)}"
+             *ngIf="nfsForm.getValue('name') === 'CEPH'">
+          <label class="col-sm-3 control-label"
+                 for="path">
+            <ng-container i18n>CephFS Path</ng-container>
+            <span class="required"></span>
+          </label>
+          <div class="col-sm-9">
+            <input type="text"
+                   class="form-control"
+                   name="path"
+                   id="path"
+                   formControlName="path"
+                   [typeahead]="pathDataSource"
+                   (typeaheadOnSelect)="pathChangeHandler()"
+                   (blur)="pathChangeHandler()">
+            <span class="help-block"
+                  *ngIf="nfsForm.showError('path', formDir, 'required')"
+                  i18n>Required field</span>
+
+            <span class="help-block"
+                  *ngIf="nfsForm.showError('path', formDir, 'pattern')"
+                  i18n>Path need to start with a '/' and can be followed by a word</span>
+            <span class="help-block"
+                  *ngIf="isNewDirectory && !nfsForm.showError('path', formDir)"
+                  i18n>New directory will be created</span>
+          </div>
+        </div>
+
+        <!-- Bucket -->
+        <div class="form-group"
+             [ngClass]="{'has-error': nfsForm.showError('path', formDir)}"
+             *ngIf="nfsForm.getValue('name') === 'RGW'">
+          <label class="col-sm-3 control-label"
+                 for="path">
+            <ng-container i18n>Path</ng-container>
+            <span class="required"></span>
+          </label>
+          <div class="col-sm-9">
+            <input type="text"
+                   class="form-control"
+                   name="path"
+                   id="path"
+                   formControlName="path"
+                   [typeahead]="bucketDataSource"
+                   (typeaheadOnSelect)="bucketChangeHandler()"
+                   (blur)="bucketChangeHandler()">
+
+            <span class="help-block"
+                  *ngIf="nfsForm.showError('path', formDir, 'required')"
+                  i18n>Required field</span>
+
+            <span class="help-block"
+                  *ngIf="nfsForm.showError('path', formDir, 'pattern')"
+                  i18n>Path can only be a single '/' or a word</span>
+
+            <span class="help-block"
+                  *ngIf="isNewBucket && !nfsForm.showError('path', formDir)"
+                  i18n>New bucket will be created</span>
+          </div>
+        </div>
+
+        <!-- NFS Protocol -->
+        <div class="form-group"
+             [ngClass]="{'has-error': nfsForm.showError('protocolNfsv3', formDir) || nfsForm.showError('protocolNfsv4', formDir)}">
+          <label class="col-sm-3 control-label"
+                 for="protocols">
+            <ng-container i18n>NFS Protocol</ng-container>
+            <span class="required"></span>
+          </label>
+          <div class="col-sm-9">
+            <div class="checkbox checkbox-primary">
+              <input type="checkbox"
+                     id="protocolNfsv3"
+                     name="protocolNfsv3"
+                     formControlName="protocolNfsv3">
+              <label i18n
+                     for="protocolNfsv3">NFSv3</label>
+            </div>
+            <div class="checkbox checkbox-primary">
+              <input type="checkbox"
+                     formControlName="protocolNfsv4"
+                     name="protocolNfsv4"
+                     id="protocolNfsv4">
+              <label i18n
+                     for="protocolNfsv4">NFSv4</label>
+            </div>
+            <span class="help-block"
+                  *ngIf="nfsForm.showError('protocolNfsv3', formDir, 'required') ||
+                  nfsForm.showError('protocolNfsv4', formDir, 'required')"
+                  i18n>Required field</span>
+          </div>
+        </div>
+
+        <!-- Tag -->
+        <div class="form-group"
+             *ngIf="nfsForm.getValue('protocolNfsv3')">
+          <label class="col-sm-3 control-label"
+                 for="tag">
+            <ng-container i18n>NFS Tag</ng-container>
+            <cd-helper>
+              <p i18n>Alternative access for <strong>NFS v3</strong> mounts (it must not have a leading /).</p>
+              <p i18n>Clients may not mount subdirectories (i.e. if Tag = foo, the client may not mount foo/baz).</p>
+              <p i18n>By using different Tag options, the same Path may be exported multiple times.</p>
+            </cd-helper>
+          </label>
+          <div class="col-sm-9">
+            <input type="text"
+                   class="form-control"
+                   name="tag"
+                   id="tag"
+                   formControlName="tag">
+          </div>
+        </div>
+
+        <!-- Pseudo -->
+        <div class="form-group"
+             [ngClass]="{'has-error': nfsForm.showError('pseudo', formDir)}"
+             *ngIf="nfsForm.getValue('protocolNfsv4')">
+          <label class="col-sm-3 control-label"
+                 for="pseudo">
+            <ng-container i18n>Pseudo</ng-container>
+            <span class="required"></span>
+            <cd-helper>
+              <p i18n>The position that this <strong>NFS v4</strong> export occupies
+                in the <strong>Pseudo FS</strong> (it must be unique).</p>
+              <p i18n>By using different Pseudo options, the same Path may be exported multiple times.</p>
+            </cd-helper>
+          </label>
+          <div class="col-sm-9">
+            <input type="text"
+                   class="form-control"
+                   name="pseudo"
+                   id="pseudo"
+                   formControlName="pseudo">
+            <span class="help-block"
+                  *ngIf="nfsForm.showError('pseudo', formDir, 'required')"
+                  i18n>Required field</span>
+            <span class="help-block"
+                  *ngIf="nfsForm.showError('pseudo', formDir, 'pattern')"
+                  i18n>Wrong format</span>
+          </div>
+        </div>
+
+        <!-- Access Type -->
+        <div class="form-group"
+             [ngClass]="{'has-error': nfsForm.showError('access_type', formDir)}">
+          <label class="col-sm-3 control-label"
+                 for="access_type">
+            <ng-container i18n>Access Type</ng-container>
+            <span class="required"></span>
+          </label>
+          <div class="col-sm-9">
+            <select class="form-control"
+                    formControlName="access_type"
+                    name="access_type"
+                    id="access_type">
+              <option *ngIf="nfsAccessType === null"
+                      value=""
+                      i18n>Loading...</option>
+              <option *ngIf="nfsAccessType !== null && nfsAccessType.length === 0"
+                      value=""
+                      i18n>-- No access type available --</option>
+              <option *ngIf="nfsAccessType !== null && nfsAccessType.length > 0"
+                      value=""
+                      i18n>-- Select the access type --</option>
+              <option *ngFor="let accessType of nfsAccessType"
+                      [value]="accessType.value">{{ accessType.value }}</option>
+            </select>
+            <span class="help-block"
+                  *ngIf="nfsForm.getValue('access_type')">
+              {{ getAccessTypeHelp(nfsForm.getValue('access_type')) }}
+            </span>
+            <span class="help-block"
+                  *ngIf="nfsForm.showError('access_type', formDir, 'required')"
+                  i18n>Required field</span>
+          </div>
+        </div>
+
+        <!-- Squash -->
+        <div class="form-group"
+             [ngClass]="{'has-error': nfsForm.showError('squash', formDir)}">
+          <label class="col-sm-3 control-label"
+                 for="squash">
+            <ng-container i18n>Squash</ng-container>
+            <span class="required"></span>
+          </label>
+          <div class="col-sm-9">
+            <select class="form-control"
+                    name="squash"
+                    formControlName="squash"
+                    id="squash">
+              <option *ngIf="nfsSquash === null"
+                      value=""
+                      i18n>Loading...</option>
+              <option *ngIf="nfsSquash !== null && nfsSquash.length === 0"
+                      value=""
+                      i18n>-- No squash available --</option>
+              <option *ngIf="nfsSquash !== null && nfsSquash.length > 0"
+                      value=""
+                      i18n>--Select what kind of user id squashing is performed --</option>
+              <option *ngFor="let squash of nfsSquash"
+                      [value]="squash">{{ squash }}</option>
+
+            </select>
+            <span class="help-block"
+                  *ngIf="nfsForm.showError('squash', formDir,'required')"
+                  i18n>Required field</span>
+          </div>
+        </div>
+
+        <!-- Transport Protocol -->
+        <div class="form-group"
+             [ngClass]="{'has-error': nfsForm.showError('transportUDP', formDir) || nfsForm.showError('transportTCP', formDir)}">
+          <label class="col-sm-3 control-label"
+                 for="transports">
+            <ng-container i18n>Transport Protocol</ng-container>
+            <span class="required"></span>
+          </label>
+          <div class="col-sm-9">
+            <div class="checkbox checkbox-primary">
+              <input type="checkbox"
+                     formControlName="transportUDP"
+                     name="transportUDP"
+                     id="transportUDP">
+              <label for="transportUDP"
+                     i18n>UDP</label>
+            </div>
+            <div class="checkbox checkbox-primary">
+              <input type="checkbox"
+                     formControlName="transportTCP"
+                     name="transportTCP"
+                     id="transportTCP">
+              <label for="transportTCP"
+                     i18n>TCP</label>
+            </div>
+            <span class="help-block"
+                  *ngIf="nfsForm.showError('transportUDP', formDir, 'required') ||
+                  nfsForm.showError('transportTCP', formDir, 'required')"
+                  i18n>Required field</span>
+            <hr>
+          </div>
+        </div>
+
+        <!-- Clients -->
+        <cd-nfs-form-client [form]="nfsForm"
+                            #nfsClients>
+        </cd-nfs-form-client>
+
+      </div>
+
+      <div class="panel-footer">
+        <div class="button-group text-right">
+          <cd-submit-button [form]="formDir"
+                            type="button"
+                            (submitAction)="submitAction()">
+            <ng-container i18n>Submit</ng-container>
+          </cd-submit-button>
+          <cd-back-button></cd-back-button>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>