diff options
Diffstat (limited to 'src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html')
| -rw-r--r-- | src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html | 400 |
1 files changed, 400 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html new file mode 100644 index 000000000..7313ea69b --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html @@ -0,0 +1,400 @@ +<div class="cd-col-form" + *cdFormLoading="loading"> + <form name="nfsForm" + #formDir="ngForm" + [formGroup]="nfsForm" + novalidate> + <div class="card"> + <div i18n="form title" + class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div> + + <div class="card-body"> + <!-- cluster_id --> + <div class="form-group row"> + <label class="cd-col-form-label" + for="cluster_id"> + <span class="required" + i18n>Cluster</span> + <cd-helper> + <p i18n>This is the ID of an NFS Service.</p> + </cd-helper> + </label> + <div class="cd-col-form-input"> + <select class="form-control" + formControlName="cluster_id" + name="cluster_id" + id="cluster_id"> + <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_id">{{ cluster.cluster_id }}</option> + </select> + <span class="invalid-feedback" + *ngIf="nfsForm.showError('cluster_id', formDir, 'required') || allClusters?.length === 0" + i18n>This field is required. + To create a new NFS cluster, <a [routerLink]="['/services', {outlets: {modal: ['create']}}]" + class="btn-link">add a new NFS Service</a>.</span> + </div> + </div> + + <!-- FSAL --> + <div formGroupName="fsal"> + <!-- Name --> + <div class="form-group row"> + <label class="cd-col-form-label required" + for="name" + i18n>Storage Backend</label> + <div class="cd-col-form-input"> + <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" + [disabled]="fsal.disabled">{{ fsal.descr }}</option> + </select> + <span class="invalid-feedback" + *ngIf="nfsForm.showError('name', formDir, 'required')" + i18n>This field is required.</span> + <span class="invalid-feedback" + *ngIf="fsalAvailabilityError" + i18n>{{ fsalAvailabilityError }}</span> + </div> + </div> + + <!-- CephFS Volume --> + <div class="form-group row" + *ngIf="nfsForm.getValue('name') === 'CEPH'"> + <label class="cd-col-form-label required" + for="fs_name" + i18n>Volume</label> + <div class="cd-col-form-input"> + <select class="form-control" + formControlName="fs_name" + name="fs_name" + id="fs_name" + (change)="pathChangeHandler()"> + <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="invalid-feedback" + *ngIf="nfsForm.showError('fs_name', formDir, 'required')" + i18n>This field is required.</span> + </div> + </div> + </div> + + <!-- Security Label --> + <div class="form-group row" + *ngIf="nfsForm.getValue('name') === 'CEPH'"> + <label class="cd-col-form-label" + [ngClass]="{'required': nfsForm.getValue('security_label')}" + for="security_label" + i18n>Security Label</label> + + <div class="cd-col-form-input"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + formControlName="security_label" + name="security_label" + id="security_label"> + <label for="security_label" + class="custom-control-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="invalid-feedback" + *ngIf="nfsForm.showError('sec_label_xattr', formDir, 'required')" + i18n>This field is required.</span> + </div> + </div> + + <!-- Path --> + <div class="form-group row" + *ngIf="nfsForm.getValue('name') === 'CEPH'"> + <label class="cd-col-form-label" + for="path"> + <span class="required" + i18n>CephFS Path</span> + <cd-helper> + <p i18n>A path in a CephFS file system.</p> + </cd-helper> + </label> + <div class="cd-col-form-input"> + <input type="text" + class="form-control" + name="path" + id="path" + data-testid="fs_path" + formControlName="path" + [ngbTypeahead]="pathDataSource" + (selectItem)="pathChangeHandler()" + (blur)="pathChangeHandler()"> + <span class="invalid-feedback" + *ngIf="nfsForm.showError('path', formDir, 'required')" + i18n>This field is required.</span> + + <span class="invalid-feedback" + *ngIf="nfsForm.showError('path', formDir, 'pattern')" + i18n>Path need to start with a '/' and can be followed by a word</span> + <span class="invalid-feedback" + *ngIf="nfsForm.showError('path', formDir, 'pathNameNotAllowed')" + i18n>The path does not exist in the selected volume.</span> + </div> + </div> + + <!-- Bucket --> + <div class="form-group row" + *ngIf="nfsForm.getValue('name') === 'RGW'"> + <label class="cd-col-form-label" + for="path"> + <span class="required" + i18n>Bucket</span> + </label> + <div class="cd-col-form-input"> + <input type="text" + class="form-control" + name="path" + id="path" + data-testid="rgw_path" + formControlName="path" + [ngbTypeahead]="bucketDataSource"> + + <span class="invalid-feedback" + *ngIf="nfsForm.showError('path', formDir, 'required')" + i18n>This field is required.</span> + <span class="invalid-feedback" + *ngIf="nfsForm.showError('path', formDir, 'bucketNameNotAllowed')" + i18n>The bucket does not exist or is not in the default realm (if multiple realms are configured). + To continue, <a routerLink="/rgw/bucket/create" + class="btn-link">create a new bucket</a>.</span> + </div> + </div> + + <!-- NFS Protocol --> + <div class="form-group row"> + <label class="cd-col-form-label required" + for="protocols" + i18n>NFS Protocol</label> + <div class="cd-col-form-input"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + formControlName="protocolNfsv4" + name="protocolNfsv4" + id="protocolNfsv4" + disabled> + <label i18n + class="custom-control-label" + for="protocolNfsv4">NFSv4</label> + </div> + <span class="invalid-feedback" + *ngIf="nfsForm.showError('protocolNfsv4', formDir, 'required')" + i18n>This field is required.</span> + </div> + </div> + + <!-- Pseudo --> + <div class="form-group row" + *ngIf="nfsForm.getValue('protocolNfsv4')"> + <label class="cd-col-form-label" + for="pseudo"> + <span class="required" + i18n>Pseudo</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="cd-col-form-input"> + <input type="text" + class="form-control" + name="pseudo" + id="pseudo" + formControlName="pseudo"> + <span class="invalid-feedback" + *ngIf="nfsForm.showError('pseudo', formDir, 'required')" + i18n>This field is required.</span> + <span class="invalid-feedback" + *ngIf="nfsForm.showError('pseudo', formDir, 'pseudoAlreadyExists')" + i18n>The pseudo is already in use by another export.</span> + <span class="invalid-feedback" + *ngIf="nfsForm.showError('pseudo', formDir, 'pattern')" + i18n>Pseudo needs to start with a '/' and can't contain any of the following: >, <, |, &, ( or ).</span> + </div> + </div> + + <!-- Access Type --> + <div class="form-group row"> + <label class="cd-col-form-label required" + for="access_type" + i18n>Access Type</label> + <div class="cd-col-form-input"> + <select class="form-control" + formControlName="access_type" + name="access_type" + id="access_type" + (change)="accessTypeChangeHandler()"> + <option *ngIf="nfsAccessType === null" + value="" + i18n>Loading...</option> + <option *ngIf="nfsAccessType !== null && nfsAccessType.length === 0" + value="" + i18n>-- No access type available --</option> + <option *ngFor="let accessType of nfsAccessType" + [value]="accessType.value">{{ accessType.value }}</option> + </select> + <span class="form-text text-muted" + *ngIf="nfsForm.getValue('access_type')"> + {{ getAccessTypeHelp(nfsForm.getValue('access_type')) }} + </span> + <span class="form-text text-warning" + *ngIf="nfsForm.getValue('access_type') === 'RW' && nfsForm.getValue('name') === 'RGW'" + i18n>The Object Gateway NFS backend has a number of + limitations which will seriously affect applications writing to + the share. Please consult the <cd-doc section="rgw-nfs"></cd-doc> + for details before enabling write access.</span> + <span class="invalid-feedback" + *ngIf="nfsForm.showError('access_type', formDir, 'required')" + i18n>This field is required.</span> + </div> + </div> + + <!-- Squash --> + <div class="form-group row"> + <label class="cd-col-form-label" + for="squash"> + <span i18n>Squash</span> + <ng-container *ngTemplateOutlet="squashHelper"></ng-container> + </label> + <div class="cd-col-form-input"> + <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 *ngFor="let squash of nfsSquash" + [value]="squash">{{ squash }}</option> + + </select> + <span class="invalid-feedback" + *ngIf="nfsForm.showError('squash', formDir,'required')" + i18n>This field is required.</span> + </div> + </div> + + <!-- Transport Protocol --> + <div class="form-group row"> + <label class="cd-col-form-label required" + for="transports" + i18n>Transport Protocol</label> + <div class="cd-col-form-input"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + formControlName="transportUDP" + name="transportUDP" + id="transportUDP"> + <label for="transportUDP" + class="custom-control-label" + i18n>UDP</label> + </div> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + formControlName="transportTCP" + name="transportTCP" + id="transportTCP"> + <label for="transportTCP" + class="custom-control-label" + i18n>TCP</label> + </div> + <span class="invalid-feedback" + *ngIf="nfsForm.showError('transportUDP', formDir, 'required') || + nfsForm.showError('transportTCP', formDir, 'required')" + i18n>This field is required.</span> + <hr> + </div> + </div> + + <!-- Clients --> + <cd-nfs-form-client [form]="nfsForm" + [clients]="clients" + #nfsClients> + <ng-template #squashHelper> + <cd-helper> + <ul class="squash-helper"> + <li> + <span class="squash-helper-item-value">no_root_squash: </span> + <span i18n>No user id squashing is performed.</span> + </li> + <li> + <span class="squash-helper-item-value">root_id_squash: </span> + <span i18n>uid 0 and gid 0 are squashed to the Anonymous_Uid and Anonymous_Gid gid 0 in alt_groups lists is also squashed.</span> + </li> + <li> + <span class="squash-helper-item-value">root_squash: </span> + <span i18n>uid 0 and gid of any value are squashed to the Anonymous_Uid and Anonymous_Gid alt_groups lists is discarded.</span> + </li> + <li> + <span class="squash-helper-item-value">all_squash: </span> + <span i18n>All users are squashed.</span> + </li> + </ul> + </cd-helper> + </ng-template> + </cd-nfs-form-client> + + </div> + + <div class="card-footer"> + <cd-form-button-panel (submitActionEvent)="submitAction()" + [form]="nfsForm" + [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)" + wrappingClass="text-right"></cd-form-button-panel> + </div> + </div> + </form> +</div> |