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

<div class="cd-col-form">
  <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 }}</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">
          <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 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 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>
        </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>

        <!-- Secutiry 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"
                   [typeahead]="pathDataSource"
                   (typeaheadOnSelect)="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"
                   [typeahead]="bucketDataSource"
                   (typeaheadOnSelect)="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"
                            #nfsClients>
        </cd-nfs-form-client>

      </div>

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