[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / nfs / nfs-form / nfs-form.component.html

<div class="cd-col-form"
     *cdFormLoading="loading">
  <form name="nfsForm"
        #formDir="ngForm"
        [formGroup]="nfsForm"
        novalidate>
    <div class="card">
      <div i18n="form title|Example: Create Pool@@formTitle"
           class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>

      <div class="card-body">
        <!-- cluster_id -->
        <div class="form-group row"
             *ngIf="!isDefaultCluster">
          <label class="cd-col-form-label required"
                 for="cluster_id"
                 i18n>Cluster</label>
          <div class="cd-col-form-input">
            <select class="form-control custom-select"
                    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_id">{{ cluster.cluster_id }}</option>
            </select>
            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('cluster_id', formDir, 'required')"
                  i18n>This field is required.</span>
          </div>
        </div>

        <!-- daemons -->
        <div class="form-group row"
             *ngIf="clusterType">
          <label class="cd-col-form-label"
                 for="daemons">
            <ng-container i18n>Daemons</ng-container>
          </label>
          <div class="cd-col-form-input">
            <ng-container *ngFor="let daemon of nfsForm.getValue('daemons'); let i = index">
              <div class="input-group cd-mb">
                <input class="cd-form-control"
                       type="text"
                       [value]="daemon"
                       disabled />
                <span *ngIf="clusterType === 'user'"
                      class="input-group-append">
                  <button class="btn btn-light"
                          type="button"
                          (click)="removeDaemon(i, daemon)">
                    <i [ngClass]="[icons.destroy]"
                       aria-hidden="true"></i>
                  </button>
                </span>
              </div>
            </ng-container>

            <div *ngIf="clusterType === 'user'"
                 class="row">
              <div class="col-md-12">
                <cd-select [data]="nfsForm.get('daemons').value"
                           [options]="daemonsSelections"
                           [messages]="daemonsMessages"
                           (selection)="onDaemonSelection()"
                           elemClass="btn btn-light float-right">
                  <i [ngClass]="[icons.add]"></i>
                  <ng-container i18n>Add daemon</ng-container>
                </cd-select>
              </div>
            </div>

            <div *ngIf="clusterType === 'orchestrator'"
                 class="row">
              <div class="col-md-12">
                <button type="button"
                        class="btn btn-light float-right"
                        (click)="onToggleAllDaemonsSelection()">
                  <i [ngClass]="[icons.add]"></i>
                  <ng-container *ngIf="nfsForm.getValue('daemons').length === 0; else hasDaemons"
                                i18n>Add all daemons</ng-container>
                  <ng-template #hasDaemons>
                    <ng-container i18n>Remove all daemons</ng-container>
                  </ng-template>
                </button>
              </div>
            </div>
          </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 custom-select"
                      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="invalid-feedback"
                    *ngIf="nfsForm.showError('name', formDir, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>

          <!-- RGW user -->
          <div class="form-group row"
               *ngIf="nfsForm.getValue('name') === 'RGW'">
            <label class="cd-col-form-label required"
                   for="rgw_user_id"
                   i18n>Object Gateway User</label>
            <div class="cd-col-form-input">
              <select class="form-control custom-select"
                      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="invalid-feedback"
                    *ngIf="nfsForm.showError('rgw_user_id', formDir, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>

          <!-- CephFS user_id -->
          <div class="form-group row"
               *ngIf="nfsForm.getValue('name') === 'CEPH'">
            <label class="cd-col-form-label required"
                   for="user_id"
                   i18n>CephFS User ID</label>
            <div class="cd-col-form-input">
              <select class="form-control custom-select"
                      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="invalid-feedback"
                    *ngIf="nfsForm.showError('user_id', formDir, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>

          <!-- CephFS fs_name -->
          <div class="form-group row"
               *ngIf="nfsForm.getValue('name') === 'CEPH'">
            <label class="cd-col-form-label required"
                   for="fs_name"
                   i18n>CephFS Name</label>
            <div class="cd-col-form-input">
              <select class="form-control custom-select"
                      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="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 required"
                 for="path"
                 i18n>CephFS Path</label>
          <div class="cd-col-form-input">
            <input type="text"
                   class="form-control"
                   name="path"
                   id="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="form-text text-muted"
                  *ngIf="isNewDirectory && !nfsForm.showError('path', formDir)"
                  i18n>New directory will be created</span>
          </div>
        </div>

        <!-- Bucket -->
        <div class="form-group row"
             *ngIf="nfsForm.getValue('name') === 'RGW'">
          <label class="cd-col-form-label required"
                 for="path"
                 i18n>Path</label>
          <div class="cd-col-form-input">
            <input type="text"
                   class="form-control"
                   name="path"
                   id="path"
                   formControlName="path"
                   [ngbTypeahead]="bucketDataSource"
                   (selectItem)="bucketChangeHandler()"
                   (blur)="bucketChangeHandler()">

            <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 can only be a single '/' or a word</span>

            <span class="form-text text-muted"
                  *ngIf="isNewBucket && !nfsForm.showError('path', formDir)"
                  i18n>New bucket will be created</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"
                     id="protocolNfsv3"
                     name="protocolNfsv3"
                     formControlName="protocolNfsv3">
              <label i18n
                     class="custom-control-label"
                     for="protocolNfsv3">NFSv3</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input type="checkbox"
                     class="custom-control-input"
                     formControlName="protocolNfsv4"
                     name="protocolNfsv4"
                     id="protocolNfsv4">
              <label i18n
                     class="custom-control-label"
                     for="protocolNfsv4">NFSv4</label>
            </div>
            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('protocolNfsv3', formDir, 'required') ||
                  nfsForm.showError('protocolNfsv4', formDir, 'required')"
                  i18n>This field is required.</span>
          </div>
        </div>

        <!-- Tag -->
        <div class="form-group row"
             *ngIf="nfsForm.getValue('protocolNfsv3')">
          <label class="cd-col-form-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="cd-col-form-input">
            <input type="text"
                   class="form-control"
                   name="tag"
                   id="tag"
                   formControlName="tag">
          </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, 'pattern')"
                  i18n>Pseudo needs to start with a '/' and can't contain any of the following: &gt;, &lt;, |, &, ( 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 custom-select"
                    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 *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="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 required"
                 for="squash"
                 i18n>Squash</label>
          <div class="cd-col-form-input">
            <select class="form-control custom-select"
                    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="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>
        </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>
Commit	Line	Data
f67539c2 TL	1	<div class="cd-col-form"
f67539c2 TL	2	*cdFormLoading="loading">
11fdf7f2	3	<form name="nfsForm"
11fdf7f2 TL	4	#formDir="ngForm"
	5	[formGroup]="nfsForm"
	6	novalidate>
9f95a23c TL	7	<div class="card">
	8	<div i18n="form title\|Example: Create Pool@@formTitle"
	9	class="card-header">{{ action \| titlecase }} {{ resource \| upperFirst }}</div>
11fdf7f2	10
9f95a23c	11	<div class="card-body">
11fdf7f2	12	<!-- cluster_id -->
9f95a23c	13	<div class="form-group row"
11fdf7f2	14	*ngIf="!isDefaultCluster">
9f95a23c TL	15	<label class="cd-col-form-label required"
	16	for="cluster_id"
	17	i18n>Cluster</label>
	18	<div class="cd-col-form-input">
	19	<select class="form-control custom-select"
11fdf7f2 TL	20	formControlName="cluster_id"
	21	name="cluster_id"
	22	id="cluster_id"
	23	(change)="onClusterChange()">
	24	<option *ngIf="allClusters === null"
	25	value=""
	26	i18n>Loading...</option>
	27	<option *ngIf="allClusters !== null && allClusters.length === 0"
	28	value=""
	29	i18n>-- No cluster available --</option>
	30	<option *ngIf="allClusters !== null && allClusters.length > 0"
	31	value=""
	32	i18n>-- Select the cluster --</option>
	33	<option *ngFor="let cluster of allClusters"
adb31ebb	34	[value]="cluster.cluster_id">{{ cluster.cluster_id }}</option>
11fdf7f2	35	</select>
9f95a23c	36	<span class="invalid-feedback"
11fdf7f2	37	*ngIf="nfsForm.showError('cluster_id', formDir, 'required')"
f6b5b4d7	38	i18n>This field is required.</span>
11fdf7f2 TL	39	</div>
	40	</div>
	41
	42	<!-- daemons -->
adb31ebb TL	43	<div class="form-group row"
adb31ebb TL	44	*ngIf="clusterType">
9f95a23c	45	<label class="cd-col-form-label"
11fdf7f2 TL	46	for="daemons">
	47	<ng-container i18n>Daemons</ng-container>
	48	</label>
9f95a23c	49	<div class="cd-col-form-input">
11fdf7f2 TL	50	<ng-container *ngFor="let daemon of nfsForm.getValue('daemons'); let i = index">
11fdf7f2 TL	51	<div class="input-group cd-mb">
9f95a23c	52	<input class="cd-form-control"
11fdf7f2 TL	53	type="text"
	54	[value]="daemon"
	55	disabled />
adb31ebb TL	56	<span *ngIf="clusterType === 'user'"
adb31ebb TL	57	class="input-group-append">
9f95a23c	58	<button class="btn btn-light"
11fdf7f2 TL	59	type="button"
11fdf7f2 TL	60	(click)="removeDaemon(i, daemon)">
9f95a23c	61	<i [ngClass]="[icons.destroy]"
11fdf7f2 TL	62	aria-hidden="true"></i>
	63	</button>
	64	</span>
	65	</div>
	66	</ng-container>
	67
adb31ebb TL	68	<div *ngIf="clusterType === 'user'"
adb31ebb TL	69	class="row">
11fdf7f2 TL	70	<div class="col-md-12">
	71	<cd-select [data]="nfsForm.get('daemons').value"
	72	[options]="daemonsSelections"
	73	[messages]="daemonsMessages"
	74	(selection)="onDaemonSelection()"
9f95a23c TL	75	elemClass="btn btn-light float-right">
9f95a23c TL	76	<i [ngClass]="[icons.add]"></i>
11fdf7f2 TL	77	<ng-container i18n>Add daemon</ng-container>
	78	</cd-select>
	79	</div>
	80	</div>
adb31ebb TL	81
	82	<div *ngIf="clusterType === 'orchestrator'"
	83	class="row">
	84	<div class="col-md-12">
	85	<button type="button"
	86	class="btn btn-light float-right"
	87	(click)="onToggleAllDaemonsSelection()">
	88	<i [ngClass]="[icons.add]"></i>
	89	<ng-container *ngIf="nfsForm.getValue('daemons').length === 0; else hasDaemons"
	90	i18n>Add all daemons</ng-container>
	91	<ng-template #hasDaemons>
	92	<ng-container i18n>Remove all daemons</ng-container>
	93	</ng-template>
	94	</button>
	95	</div>
	96	</div>
11fdf7f2 TL	97	</div>
	98	</div>
	99
	100	<!-- FSAL -->
	101	<div formGroupName="fsal">
	102	<!-- Name -->
9f95a23c TL	103	<div class="form-group row">
	104	<label class="cd-col-form-label required"
	105	for="name"
	106	i18n>Storage Backend</label>
	107	<div class="cd-col-form-input">
	108	<select class="form-control custom-select"
11fdf7f2 TL	109	formControlName="name"
	110	name="name"
	111	id="name"
	112	(change)="fsalChangeHandler()">
	113	<option *ngIf="allFsals === null"
	114	value=""
	115	i18n>Loading...</option>
	116	<option *ngIf="allFsals !== null && allFsals.length === 0"
	117	value=""
	118	i18n>-- No data pools available --</option>
	119	<option *ngIf="allFsals !== null && allFsals.length > 0"
	120	value=""
	121	i18n>-- Select the storage backend --</option>
	122	<option *ngFor="let fsal of allFsals"
	123	[value]="fsal.value">{{ fsal.descr }}</option>
	124	</select>
9f95a23c	125	<span class="invalid-feedback"
11fdf7f2	126	*ngIf="nfsForm.showError('name', formDir, 'required')"
f6b5b4d7	127	i18n>This field is required.</span>
11fdf7f2 TL	128	</div>
	129	</div>
	130
	131	<!-- RGW user -->
9f95a23c	132	<div class="form-group row"
11fdf7f2	133	*ngIf="nfsForm.getValue('name') === 'RGW'">
9f95a23c TL	134	<label class="cd-col-form-label required"
	135	for="rgw_user_id"
	136	i18n>Object Gateway User</label>
	137	<div class="cd-col-form-input">
	138	<select class="form-control custom-select"
11fdf7f2 TL	139	formControlName="rgw_user_id"
	140	name="rgw_user_id"
	141	id="rgw_user_id"
	142	(change)="rgwUserIdChangeHandler()">
	143	<option *ngIf="allRgwUsers === null"
	144	value=""
	145	i18n>Loading...</option>
	146	<option *ngIf="allRgwUsers !== null && allRgwUsers.length === 0"
	147	value=""
	148	i18n>-- No users available --</option>
	149	<option *ngIf="allRgwUsers !== null && allRgwUsers.length > 0"
	150	value=""
	151	i18n>-- Select the object gateway user --</option>
	152	<option *ngFor="let rgwUserId of allRgwUsers"
	153	[value]="rgwUserId">{{ rgwUserId }}</option>
	154	</select>
9f95a23c	155	<span class="invalid-feedback"
11fdf7f2	156	*ngIf="nfsForm.showError('rgw_user_id', formDir, 'required')"
f6b5b4d7	157	i18n>This field is required.</span>
11fdf7f2 TL	158	</div>
	159	</div>
	160
	161	<!-- CephFS user_id -->
9f95a23c	162	<div class="form-group row"
11fdf7f2	163	*ngIf="nfsForm.getValue('name') === 'CEPH'">
9f95a23c TL	164	<label class="cd-col-form-label required"
	165	for="user_id"
	166	i18n>CephFS User ID</label>
	167	<div class="cd-col-form-input">
	168	<select class="form-control custom-select"
11fdf7f2 TL	169	formControlName="user_id"
	170	name="user_id"
	171	id="user_id">
	172	<option *ngIf="allCephxClients === null"
	173	value=""
	174	i18n>Loading...</option>
	175	<option *ngIf="allCephxClients !== null && allCephxClients.length === 0"
	176	value=""
	177	i18n>-- No clients available --</option>
	178	<option *ngIf="allCephxClients !== null && allCephxClients.length > 0"
	179	value=""
	180	i18n>-- Select the cephx client --</option>
	181	<option *ngFor="let client of allCephxClients"
	182	[value]="client">{{ client }}</option>
	183	</select>
9f95a23c	184	<span class="invalid-feedback"
11fdf7f2	185	*ngIf="nfsForm.showError('user_id', formDir, 'required')"
f6b5b4d7	186	i18n>This field is required.</span>
11fdf7f2 TL	187	</div>
	188	</div>
	189
	190	<!-- CephFS fs_name -->
9f95a23c	191	<div class="form-group row"
11fdf7f2	192	*ngIf="nfsForm.getValue('name') === 'CEPH'">
9f95a23c TL	193	<label class="cd-col-form-label required"
	194	for="fs_name"
	195	i18n>CephFS Name</label>
	196	<div class="cd-col-form-input">
	197	<select class="form-control custom-select"
11fdf7f2 TL	198	formControlName="fs_name"
	199	name="fs_name"
	200	id="fs_name"
	201	(change)="rgwUserIdChangeHandler()">
	202	<option *ngIf="allFsNames === null"
	203	value=""
	204	i18n>Loading...</option>
	205	<option *ngIf="allFsNames !== null && allFsNames.length === 0"
	206	value=""
	207	i18n>-- No CephFS filesystem available --</option>
	208	<option *ngIf="allFsNames !== null && allFsNames.length > 0"
	209	value=""
	210	i18n>-- Select the CephFS filesystem --</option>
	211	<option *ngFor="let filesystem of allFsNames"
	212	[value]="filesystem.name">{{ filesystem.name }}</option>
	213	</select>
9f95a23c	214	<span class="invalid-feedback"
11fdf7f2	215	*ngIf="nfsForm.showError('fs_name', formDir, 'required')"
f6b5b4d7	216	i18n>This field is required.</span>
11fdf7f2 TL	217	</div>
	218	</div>
	219	</div>
	220
f67539c2	221	<!-- Security Label -->
9f95a23c	222	<div class="form-group row"
11fdf7f2	223	*ngIf="nfsForm.getValue('name') === 'CEPH'">
9f95a23c TL	224	<label class="cd-col-form-label"
	225	[ngClass]="{'required': nfsForm.getValue('security_label')}"
	226	for="security_label"
	227	i18n>Security Label</label>
11fdf7f2	228
9f95a23c TL	229	<div class="cd-col-form-input">
9f95a23c TL	230	<div class="custom-control custom-checkbox">
11fdf7f2	231	<input type="checkbox"
9f95a23c	232	class="custom-control-input"
11fdf7f2 TL	233	formControlName="security_label"
	234	name="security_label"
	235	id="security_label">
	236	<label for="security_label"
9f95a23c	237	class="custom-control-label"
11fdf7f2 TL	238	i18n>Enable security label</label>
	239	</div>
	240
	241	<br>
	242
	243	<input type="text"
	244	*ngIf="nfsForm.getValue('security_label')"
	245	class="form-control"
	246	name="sec_label_xattr"
	247	id="sec_label_xattr"
	248	formControlName="sec_label_xattr">
	249
9f95a23c	250	<span class="invalid-feedback"
11fdf7f2	251	*ngIf="nfsForm.showError('sec_label_xattr', formDir, 'required')"
f6b5b4d7	252	i18n>This field is required.</span>
11fdf7f2 TL	253	</div>
	254	</div>
	255
	256	<!-- Path -->
9f95a23c	257	<div class="form-group row"
11fdf7f2	258	*ngIf="nfsForm.getValue('name') === 'CEPH'">
9f95a23c TL	259	<label class="cd-col-form-label required"
	260	for="path"
	261	i18n>CephFS Path</label>
	262	<div class="cd-col-form-input">
11fdf7f2 TL	263	<input type="text"
	264	class="form-control"
	265	name="path"
	266	id="path"
	267	formControlName="path"
f67539c2 TL	268	[ngbTypeahead]="pathDataSource"
f67539c2 TL	269	(selectItem)="pathChangeHandler()"
11fdf7f2	270	(blur)="pathChangeHandler()">
9f95a23c	271	<span class="invalid-feedback"
11fdf7f2	272	*ngIf="nfsForm.showError('path', formDir, 'required')"
f6b5b4d7	273	i18n>This field is required.</span>
11fdf7f2	274
9f95a23c	275	<span class="invalid-feedback"
11fdf7f2 TL	276	*ngIf="nfsForm.showError('path', formDir, 'pattern')"
11fdf7f2 TL	277	i18n>Path need to start with a '/' and can be followed by a word</span>
9f95a23c	278	<span class="form-text text-muted"
11fdf7f2 TL	279	*ngIf="isNewDirectory && !nfsForm.showError('path', formDir)"
	280	i18n>New directory will be created</span>
	281	</div>
	282	</div>
	283
	284	<!-- Bucket -->
9f95a23c	285	<div class="form-group row"
11fdf7f2	286	*ngIf="nfsForm.getValue('name') === 'RGW'">
9f95a23c TL	287	<label class="cd-col-form-label required"
	288	for="path"
	289	i18n>Path</label>
	290	<div class="cd-col-form-input">
11fdf7f2 TL	291	<input type="text"
	292	class="form-control"
	293	name="path"
	294	id="path"
	295	formControlName="path"
f67539c2 TL	296	[ngbTypeahead]="bucketDataSource"
f67539c2 TL	297	(selectItem)="bucketChangeHandler()"
11fdf7f2 TL	298	(blur)="bucketChangeHandler()">
11fdf7f2 TL	299
9f95a23c	300	<span class="invalid-feedback"
11fdf7f2	301	*ngIf="nfsForm.showError('path', formDir, 'required')"
f6b5b4d7	302	i18n>This field is required.</span>
11fdf7f2	303
9f95a23c	304	<span class="invalid-feedback"
11fdf7f2 TL	305	*ngIf="nfsForm.showError('path', formDir, 'pattern')"
	306	i18n>Path can only be a single '/' or a word</span>
	307
9f95a23c	308	<span class="form-text text-muted"
11fdf7f2 TL	309	*ngIf="isNewBucket && !nfsForm.showError('path', formDir)"
	310	i18n>New bucket will be created</span>
	311	</div>
	312	</div>
	313
	314	<!-- NFS Protocol -->
9f95a23c TL	315	<div class="form-group row">
	316	<label class="cd-col-form-label required"
	317	for="protocols"
	318	i18n>NFS Protocol</label>
	319	<div class="cd-col-form-input">
	320	<div class="custom-control custom-checkbox">
11fdf7f2	321	<input type="checkbox"
9f95a23c	322	class="custom-control-input"
11fdf7f2 TL	323	id="protocolNfsv3"
	324	name="protocolNfsv3"
	325	formControlName="protocolNfsv3">
	326	<label i18n
9f95a23c	327	class="custom-control-label"
11fdf7f2 TL	328	for="protocolNfsv3">NFSv3</label>
11fdf7f2 TL	329	</div>
9f95a23c	330	<div class="custom-control custom-checkbox">
11fdf7f2	331	<input type="checkbox"
9f95a23c	332	class="custom-control-input"
11fdf7f2 TL	333	formControlName="protocolNfsv4"
	334	name="protocolNfsv4"
	335	id="protocolNfsv4">
	336	<label i18n
9f95a23c	337	class="custom-control-label"
11fdf7f2 TL	338	for="protocolNfsv4">NFSv4</label>
11fdf7f2 TL	339	</div>
9f95a23c	340	<span class="invalid-feedback"
11fdf7f2 TL	341	*ngIf="nfsForm.showError('protocolNfsv3', formDir, 'required') \|\|
11fdf7f2 TL	342	nfsForm.showError('protocolNfsv4', formDir, 'required')"
f6b5b4d7	343	i18n>This field is required.</span>
11fdf7f2 TL	344	</div>
	345	</div>
	346
	347	<!-- Tag -->
9f95a23c	348	<div class="form-group row"
11fdf7f2	349	*ngIf="nfsForm.getValue('protocolNfsv3')">
9f95a23c	350	<label class="cd-col-form-label"
11fdf7f2 TL	351	for="tag">
	352	<ng-container i18n>NFS Tag</ng-container>
	353	<cd-helper>
	354	<p i18n>Alternative access for <strong>NFS v3</strong> mounts (it must not have a leading /).</p>
	355	<p i18n>Clients may not mount subdirectories (i.e. if Tag = foo, the client may not mount foo/baz).</p>
	356	<p i18n>By using different Tag options, the same Path may be exported multiple times.</p>
	357	</cd-helper>
	358	</label>
9f95a23c	359	<div class="cd-col-form-input">
11fdf7f2 TL	360	<input type="text"
	361	class="form-control"
	362	name="tag"
	363	id="tag"
	364	formControlName="tag">
	365	</div>
	366	</div>
	367
	368	<!-- Pseudo -->
9f95a23c	369	<div class="form-group row"
11fdf7f2	370	*ngIf="nfsForm.getValue('protocolNfsv4')">
9f95a23c	371	<label class="cd-col-form-label"
11fdf7f2	372	for="pseudo">
9f95a23c TL	373	<span class="required"
9f95a23c TL	374	i18n>Pseudo</span>
11fdf7f2 TL	375	<cd-helper>
	376	<p i18n>The position that this <strong>NFS v4</strong> export occupies
	377	in the <strong>Pseudo FS</strong> (it must be unique).</p>
	378	<p i18n>By using different Pseudo options, the same Path may be exported multiple times.</p>
	379	</cd-helper>
	380	</label>
9f95a23c	381	<div class="cd-col-form-input">
11fdf7f2 TL	382	<input type="text"
	383	class="form-control"
	384	name="pseudo"
	385	id="pseudo"
	386	formControlName="pseudo">
9f95a23c	387	<span class="invalid-feedback"
11fdf7f2	388	*ngIf="nfsForm.showError('pseudo', formDir, 'required')"
f6b5b4d7	389	i18n>This field is required.</span>
9f95a23c	390	<span class="invalid-feedback"
11fdf7f2	391	*ngIf="nfsForm.showError('pseudo', formDir, 'pattern')"
9f95a23c	392	i18n>Pseudo needs to start with a '/' and can't contain any of the following: >, <, \|, &, ( or ).</span>
11fdf7f2 TL	393	</div>
	394	</div>
	395
	396	<!-- Access Type -->
9f95a23c TL	397	<div class="form-group row">
	398	<label class="cd-col-form-label required"
	399	for="access_type"
	400	i18n>Access Type</label>
	401	<div class="cd-col-form-input">
	402	<select class="form-control custom-select"
11fdf7f2 TL	403	formControlName="access_type"
11fdf7f2 TL	404	name="access_type"
eafe8130 TL	405	id="access_type"
eafe8130 TL	406	(change)="accessTypeChangeHandler()">
11fdf7f2 TL	407	<option *ngIf="nfsAccessType === null"
	408	value=""
	409	i18n>Loading...</option>
	410	<option *ngIf="nfsAccessType !== null && nfsAccessType.length === 0"
	411	value=""
	412	i18n>-- No access type available --</option>
	413	<option *ngIf="nfsAccessType !== null && nfsAccessType.length > 0"
	414	value=""
	415	i18n>-- Select the access type --</option>
	416	<option *ngFor="let accessType of nfsAccessType"
	417	[value]="accessType.value">{{ accessType.value }}</option>
	418	</select>
9f95a23c	419	<span class="form-text text-muted"
11fdf7f2 TL	420	*ngIf="nfsForm.getValue('access_type')">
	421	{{ getAccessTypeHelp(nfsForm.getValue('access_type')) }}
	422	</span>
9f95a23c	423	<span class="form-text text-warning"
eafe8130 TL	424	*ngIf="nfsForm.getValue('access_type') === 'RW' && nfsForm.getValue('name') === 'RGW'"
	425	i18n>The Object Gateway NFS backend has a number of
	426	limitations which will seriously affect applications writing to
f6b5b4d7 TL	427	the share. Please consult the <cd-doc section="rgw-nfs"></cd-doc>
f6b5b4d7 TL	428	for details before enabling write access.</span>
9f95a23c	429	<span class="invalid-feedback"
11fdf7f2	430	*ngIf="nfsForm.showError('access_type', formDir, 'required')"
f6b5b4d7	431	i18n>This field is required.</span>
11fdf7f2 TL	432	</div>
	433	</div>
	434
	435	<!-- Squash -->
9f95a23c TL	436	<div class="form-group row">
	437	<label class="cd-col-form-label required"
	438	for="squash"
	439	i18n>Squash</label>
	440	<div class="cd-col-form-input">
	441	<select class="form-control custom-select"
11fdf7f2 TL	442	name="squash"
	443	formControlName="squash"
	444	id="squash">
	445	<option *ngIf="nfsSquash === null"
	446	value=""
	447	i18n>Loading...</option>
	448	<option *ngIf="nfsSquash !== null && nfsSquash.length === 0"
	449	value=""
	450	i18n>-- No squash available --</option>
	451	<option *ngIf="nfsSquash !== null && nfsSquash.length > 0"
	452	value=""
	453	i18n>--Select what kind of user id squashing is performed --</option>
	454	<option *ngFor="let squash of nfsSquash"
	455	[value]="squash">{{ squash }}</option>
	456
	457	</select>
9f95a23c	458	<span class="invalid-feedback"
11fdf7f2	459	*ngIf="nfsForm.showError('squash', formDir,'required')"
f6b5b4d7	460	i18n>This field is required.</span>
11fdf7f2 TL	461	</div>
	462	</div>
	463
	464	<!-- Transport Protocol -->
9f95a23c TL	465	<div class="form-group row">
	466	<label class="cd-col-form-label required"
	467	for="transports"
	468	i18n>Transport Protocol</label>
	469	<div class="cd-col-form-input">
	470	<div class="custom-control custom-checkbox">
11fdf7f2	471	<input type="checkbox"
9f95a23c	472	class="custom-control-input"
11fdf7f2 TL	473	formControlName="transportUDP"
	474	name="transportUDP"
	475	id="transportUDP">
	476	<label for="transportUDP"
9f95a23c	477	class="custom-control-label"
11fdf7f2 TL	478	i18n>UDP</label>
11fdf7f2 TL	479	</div>
9f95a23c	480	<div class="custom-control custom-checkbox">
11fdf7f2	481	<input type="checkbox"
9f95a23c	482	class="custom-control-input"
11fdf7f2 TL	483	formControlName="transportTCP"
	484	name="transportTCP"
	485	id="transportTCP">
	486	<label for="transportTCP"
9f95a23c	487	class="custom-control-label"
11fdf7f2 TL	488	i18n>TCP</label>
11fdf7f2 TL	489	</div>
9f95a23c	490	<span class="invalid-feedback"
11fdf7f2 TL	491	*ngIf="nfsForm.showError('transportUDP', formDir, 'required') \|\|
11fdf7f2 TL	492	nfsForm.showError('transportTCP', formDir, 'required')"
f6b5b4d7	493	i18n>This field is required.</span>
11fdf7f2 TL	494	<hr>
	495	</div>
	496	</div>
	497
	498	<!-- Clients -->
	499	<cd-nfs-form-client [form]="nfsForm"
f67539c2	500	[clients]="clients"
11fdf7f2 TL	501	#nfsClients>
	502	</cd-nfs-form-client>
	503
	504	</div>
	505
9f95a23c	506	<div class="card-footer">
f67539c2 TL	507	<cd-form-button-panel (submitActionEvent)="submitAction()"
	508	[form]="nfsForm"
	509	[submitText]="(action \| titlecase) + ' ' + (resource \| upperFirst)"
	510	wrappingClass="text-right"></cd-form-button-panel>
11fdf7f2 TL	511	</div>
	512	</div>
	513	</form>
	514	</div>