<div cdsCol
[columnNumbers]="{ md: 4 }">
- <form name="smbShareForm"
- #formDir="ngForm"
- [formGroup]="smbShareForm"
- novalidate>
- <div i18n="form title"
- class="form-header">
- {{ action | titlecase }} {{ resource | upperFirst }}
- </div>
+ <ng-container *cdFormLoading="loading">
+ <form name="smbShareForm"
+ #formDir="ngForm"
+ [formGroup]="smbShareForm"
+ novalidate>
+ <div i18n="form title"
+ class="form-header">
+ {{ action | titlecase }} {{ resource | upperFirst }}
+ </div>
- <!-- Share Id -->
- <div class="form-item">
- <cds-text-label
- labelInputID="share_id"
- i18n
- helperText="Unique share identifier"
- i18n-helperText
- cdRequiredField="Share Name"
- [invalid]="smbShareForm.controls.share_id.invalid && smbShareForm.controls.share_id.dirty"
- [invalidText]="shareError"
- >Share Name
- <input
- cdsText
- type="text"
- id="share_id"
- formControlName="share_id"
- [invalid]="smbShareForm.controls.share_id.invalid && smbShareForm.controls.share_id.dirty"
- />
- </cds-text-label>
- <ng-template #shareError>
- <span
- class="invalid-feedback"
- *ngIf="smbShareForm.showError('share_id', formDir, 'required')"
+ <!-- Share Id -->
+ <div class="form-item">
+ <cds-text-label
+ labelInputID="share_id"
i18n
- >This field is required.</span
- >
- </ng-template>
- </div>
+ helperText="Unique share identifier"
+ i18n-helperText
+ cdRequiredField="Share Name"
+ [invalid]="smbShareForm.controls.share_id.invalid && smbShareForm.controls.share_id.dirty"
+ [invalidText]="shareError"
+ >Share Name
+ <input
+ cdsText
+ type="text"
+ id="share_id"
+ formControlName="share_id"
+ [invalid]="smbShareForm.controls.share_id.invalid && smbShareForm.controls.share_id.dirty"
+ />
+ </cds-text-label>
+ <ng-template #shareError>
+ <span
+ class="invalid-feedback"
+ *ngIf="smbShareForm.showError('share_id', formDir, 'required')"
+ i18n
+ >This field is required.</span
+ >
+ </ng-template>
+ </div>
- <!-- Volume -->
- <div class="form-item">
- <cds-select
- formControlName="volume"
- label="Volume"
- cdRequiredField="Volume"
- id="volume"
- (change)="volumeChangeHandler()"
- [invalid]="smbShareForm.controls.volume.invalid && smbShareForm.controls.volume.dirty"
- [invalidText]="volumeError"
- i18n-label>
- <option *ngIf="allFsNames?.length === 0"
- value=""
- i18n>
- -- No filesystem available --
- </option>
- <option *ngIf="allFsNames !== null && allFsNames?.length > 0"
- value=""
- i18n>
- -- Select the filesystem --
- </option>
- <option *ngFor="let filesystem of allFsNames"
- [value]="filesystem.name"
- i18n>
- {{ filesystem.name }}
- </option>
- </cds-select>
- <ng-template #volumeError>
- <span
- class="invalid-feedback"
- *ngIf="smbShareForm.showError('volume', formDir, 'required')"
- i18n
- >This field is required.</span
- >
- </ng-template>
- </div>
+ <!-- Volume -->
+
<div class="form-item">
+ <cds-select
+ formControlName="volume"
+ label="Volume"
+ cdRequiredField="Volume"
+ id="volume"
+ (change)="volumeChangeHandler()"
+ [invalid]="smbShareForm.controls.volume.invalid && smbShareForm.controls.volume.dirty"
+ [invalidText]="volumeError"
+ i18n-label>
+ <option *ngIf="allFsNames?.length === 0"
+ value=""
+ i18n>
+ -- No filesystem available --
+ </option>
+ <option *ngIf="allFsNames !== null && allFsNames?.length > 0"
+ value=""
+ i18n>
+ -- Select the filesystem --
+ </option>
+ <option *ngFor="let filesystem of allFsNames"
+ [value]="filesystem.name"
+ i18n>
+ {{ filesystem.name }}
+ </option>
+ </cds-select>
+ <ng-template #volumeError>
+ <span
+ class="invalid-feedback"
+ *ngIf="smbShareForm.showError('volume', formDir, 'required')"
+ i18n
+ >This field is required.</span
+ >
+ </ng-template>
+ </div>
- <div class="form-item"
- *ngIf="smbShareForm.getValue('volume')">
- <cds-select
- formControlName="subvolume_group"
- label="Subvolume Group"
- id="subvolume_group"
- (change)="getSubVol()"
- [skeleton]="allsubvolgrps === null"
- i18n-label>
- <option *ngIf="allsubvolgrps === null"
- value=""
- i18n>Loading...</option>
- <option *ngIf="allsubvolgrps !== null && allsubvolgrps.length >= 0"
- value=""
- i18n>
- -- Select the CephFS subvolume group --
- </option>
- <option
- *ngFor="let subvol_grp of allsubvolgrps"
- [value]="subvol_grp.name"
- [selected]="subvol_grp.name === smbShareForm.get('subvolume_group').value"
- i18n
- >
- {{ subvol_grp.name }}
- </option>
- </cds-select>
- </div>
+ *ngIf="smbShareForm.getValue('volume')">
+ <cds-select
+ formControlName="subvolume_group"
+ label="Subvolume Group"
+ id="subvolume_group"
+ (change)="getSubVol()"
+ [skeleton]="allsubvolgrps === null"
+ i18n-label>
+ <option *ngIf="allsubvolgrps === null"
+ value=""
+ i18n>Loading...</option>
+ <option *ngIf="allsubvolgrps !== null && allsubvolgrps.length >= 0"
+ value=""
+ i18n>
+ -- Select the CephFS subvolume group --
+ </option>
+ <option
+ *ngFor="let subvol_grp of allsubvolgrps"
+ [value]="subvol_grp.name"
+ [selected]="subvol_grp.name === smbShareForm.get('subvolume_group').value"
+ i18n
+ >
+ {{ subvol_grp.name }}
+ </option>
+ </cds-select>
+ </div>
- <div class="form-group row"
- *ngIf="smbShareForm.getValue('volume')">
- <cds-select
- formControlName="subvolume"
- label="Subvolume"
- id="subvolume"
- (change)="setSubVolPath()"
- [skeleton]="allsubvols === null"
- >
- <option *ngIf="allsubvols === null"
- value=""
- i18n>Loading...</option>
- <option *ngIf="allsubvols !== null && allsubvols.length === 0"
- value=""
- i18n>
- -- No SMB subvolume available --
- </option>
- <option *ngIf="allsubvols !== null && allsubvols.length > 0"
- value=""
- i18n>
- -- Select the SMB subvolume --
- </option>
- <option
- *ngFor="let subvolume of allsubvols"
- [value]="subvolume.name"
- [selected]="subvolume.name === smbShareForm.get('subvolume').value"
- i18n
+ <div class="form-group row"
+ *ngIf="smbShareForm.getValue('volume')">
+ <cds-select
+ formControlName="subvolume"
+ label="Subvolume"
+ id="subvolume"
+ (change)="setSubVolPath()"
+ [skeleton]="allsubvols === null"
>
- {{ subvolume.name }}
- </option>
- </cds-select>
- </div>
+ <option *ngIf="allsubvols === null"
+ value=""
+ i18n>Loading...</option>
+ <option *ngIf="allsubvols !== null && allsubvols.length === 0"
+ value=""
+ i18n>
+ -- No SMB subvolume available --
+ </option>
+ <option *ngIf="allsubvols !== null && allsubvols.length > 0"
+ value=""
+ i18n>
+ -- Select the SMB subvolume --
+ </option>
+ <option
+ *ngFor="let subvolume of allsubvols"
+ [value]="subvolume.name"
+ [selected]="subvolume.name === smbShareForm.get('subvolume').value"
+ i18n
+ >
+ {{ subvolume.name }}
+ </option>
+ </cds-select>
+ </div>
- <!-- Path -->
- <div class="form-item form-item-append"
- cdsRow>
- <div cdsCol>
- <cds-text-label labelInputID="prefixedPath"
- i18n
- helperText="A path is a relative path.">Prefixed Path
- <input cdsText
- type="text"
- id="prefixedPath"
- formControlName="prefixedPath" />
- </cds-text-label>
- </div>
- <div cdsCol>
- <cds-text-label
- labelInputID="inputPath"
- i18n
- [invalid]="
- smbShareForm.controls.inputPath.invalid && smbShareForm.controls.inputPath.dirty
- "
- [invalidText]="pathError"
- helperText="A relative path in a cephFS file system."
- cdRequiredField="Path"
- >Input Path
- <input
- cdsText
- type="text"
- id="inputPath"
- formControlName="inputPath"
+ <!-- Path -->
+ <div class="form-item form-item-append"
+ cdsRow>
+ <div cdsCol>
+ <cds-text-label labelInputID="prefixedPath"
+ i18n
+ helperText="A path is a relative path.">Prefixed Path
+ <input cdsText
+ type="text"
+ id="prefixedPath"
+ formControlName="prefixedPath" />
+ </cds-text-label>
+ </div>
+ <div cdsCol>
+ <cds-text-label
+ labelInputID="inputPath"
+ i18n
[invalid]="
smbShareForm.controls.inputPath.invalid && smbShareForm.controls.inputPath.dirty
"
- />
- </cds-text-label>
- <ng-template #pathError>
- <span
- class="invalid-feedback"
- *ngIf="smbShareForm.showError('inputPath', formDir, 'required')"
- i18n
- >This field is required.</span
- >
- <span
- class="invalid-feedback"
- *ngIf="smbShareForm.showError('inputPath', formDir, 'pattern')"
- i18n
- >Path need to start with a '/' and can be followed by a word</span
- >
- </ng-template>
+ [invalidText]="pathError"
+ helperText="A relative path in a cephFS file system."
+ cdRequiredField="Path"
+ >Input Path
+ <input
+ cdsText
+ type="text"
+ id="inputPath"
+ formControlName="inputPath"
+ [invalid]="
+ smbShareForm.controls.inputPath.invalid && smbShareForm.controls.inputPath.dirty
+ "
+ />
+ </cds-text-label>
+ <ng-template #pathError>
+ <span
+ class="invalid-feedback"
+ *ngIf="smbShareForm.showError('inputPath', formDir, 'required')"
+ i18n
+ >This field is required.</span
+ >
+ </ng-template>
+ </div>
</div>
- </div>
- <!-- Browseable -->
- <div class="form-item">
- <cds-checkbox id="browseable"
- formControlName="browseable"
- i18n>Browseable
- <cd-help-text
- >If selected the share will be included in share listings visible to
- clients.</cd-help-text
- >
- </cds-checkbox>
- </div>
+ <!-- Browseable -->
+
<div class="form-item">
+ <cds-checkbox id="browseable"
+ formControlName="browseable"
+ i18n>Browseable
+ <cd-help-text
+ >If selected the share will be included in share listings visible to
+ clients.</cd-help-text
+ >
+ </cds-checkbox>
+ </div>
- <!-- Readonly -->
- <div class="form-item">
- <cds-checkbox id="readonly"
- formControlName="readonly"
- i18n>Readonly
- <cd-help-text>If selected no clients are permitted to write to the share.</cd-help-text>
- </cds-checkbox>
- </div>
- <cd-form-button-panel
- (submitActionEvent)="submitAction()"
- [form]="smbShareForm"
- [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
- wrappingClass="text-right"
- ></cd-form-button-panel>
- </form>
+ <!-- Readonly -->
+ <div class="form-item">
+ <cds-checkbox id="readonly"
+ formControlName="readonly"
+ i18n>Readonly
+ <cd-help-text>If selected no clients are permitted to write to the share.</cd-help-text>
+ </cds-checkbox>
+ </div>
+ <cd-form-button-panel
+ (submitActionEvent)="submitAction()"
+ [form]="smbShareForm"
+ [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+ wrappingClass="text-right"
+ ></cd-form-button-panel>
+ </form>
+ </ng-container>
</div>
import { ActionLabelsI18n, URLVerbs } from '~/app/shared/constants/app.constants';
import { FinishedTask } from '~/app/shared/models/finished-task';
-import { Filesystem, PROVIDER, SHARE_RESOURCE, ShareRequestModel } from '../smb.model';
+import {
+ Filesystem,
+ PROVIDER,
+ SHARE_RESOURCE,
+ SHARE_URL,
+ ShareRequestModel,
+ SMBShare
+} from '../smb.model';
import { CephfsSubvolumeGroup } from '~/app/shared/models/cephfs-subvolume-group.model';
import { CephfsSubvolume } from '~/app/shared/models/cephfs-subvolume.model';
allsubvolgrps: CephfsSubvolumeGroup[] = [];
allsubvols: CephfsSubvolume[] = [];
clusterId: string;
+ isEdit = false;
+ share_id: string;
+ shareResponse: SMBShare;
constructor(
private formBuilder: CdFormBuilder,
) {
super();
this.resource = $localize`Share`;
+ this.isEdit = this.router.url.startsWith(`${SHARE_URL}${URLVerbs.EDIT}`);
+ this.action = this.isEdit ? this.actionLabels.EDIT : this.actionLabels.CREATE;
}
ngOnInit() {
- this.action = this.actionLabels.CREATE;
- this.route.params.subscribe((params: { clusterId: string }) => {
+ this.route.params.subscribe((params: any) => {
+ this.share_id = params.shareId;
this.clusterId = params.clusterId;
});
this.nfsService.filesystems().subscribe((data: Filesystem[]) => {
this.allFsNames = data;
});
this.createForm();
+ if (this.isEdit) {
+ this.smbService.getShare(this.clusterId, this.share_id).subscribe((resp: SMBShare) => {
+ this.shareResponse = resp;
+ this.smbShareForm.get('share_id').setValue(this.shareResponse.share_id);
+ this.smbShareForm.get('share_id').disable();
+ this.smbShareForm.get('volume').setValue(this.shareResponse.cephfs.volume);
+ this.smbShareForm.get('subvolume_group').setValue(this.shareResponse.cephfs.subvolumegroup);
+ this.smbShareForm.get('subvolume').setValue(this.shareResponse.cephfs.subvolume);
+ this.smbShareForm.get('inputPath').setValue(this.shareResponse.cephfs.path);
+ if (this.shareResponse.readonly) {
+ this.smbShareForm.get('readonly').setValue(this.shareResponse.readonly);
+ }
+ if (this.shareResponse.browseable) {
+ this.smbShareForm.get('browseable').setValue(this.shareResponse.browseable);
+ }
+
+ this.getSubVolGrp(this.shareResponse.cephfs.volume);
+ });
+ }
+ this.loadingReady();
}
createForm() {
if (volume) {
this.subvolgrpService.get(volume).subscribe((data: CephfsSubvolumeGroup[]) => {
this.allsubvolgrps = data;
+ if (this.isEdit) {
+ const selectedSubVolGrp = this.shareResponse.cephfs.subvolumegroup;
+ if (selectedSubVolGrp && volume === this.shareResponse.cephfs.volume) {
+ const subvolGrp = this.allsubvolgrps.find((group) => group.name === selectedSubVolGrp);
+ if (subvolGrp) {
+ this.smbShareForm.get('subvolume_group').setValue(subvolGrp.name);
+ this.getSubVol();
+ }
+ }
+ }
});
}
}
await this.setSubVolPath();
this.subvolService.get(volume, subvolgrp, false).subscribe((data: CephfsSubvolume[]) => {
this.allsubvols = data;
+ if (this.isEdit) {
+ const selectedSubVol = this.shareResponse.cephfs.subvolume;
+ if (selectedSubVol && this.shareResponse.cephfs.subvolumegroup) {
+ const subvol = this.allsubvols.find((s) => s.name === selectedSubVol);
+ if (subvol) {
+ this.smbShareForm.get('subvolume').setValue(subvol.name);
+ this.setSubVolPath();
+ }
+ }
+ }
});
}
}
buildRequest() {
const rawFormValue = _.cloneDeep(this.smbShareForm.value);
const correctedPath = rawFormValue.inputPath;
+ const shareId = this.smbShareForm.get('share_id')?.value;
const requestModel: ShareRequestModel = {
share_resource: {
resource_type: SHARE_RESOURCE,
cluster_id: this.clusterId,
- share_id: rawFormValue.share_id,
+ share_id: shareId,
cephfs: {
volume: rawFormValue.volume,
path: correctedPath,
}
submitAction() {
- const component = this;
+ if (this.isEdit) {
+ this.handleTaskRequest(URLVerbs.EDIT);
+ } else {
+ this.handleTaskRequest(URLVerbs.CREATE);
+ }
+ }
+
+ handleTaskRequest(urlVerb: string) {
const requestModel = this.buildRequest();
const BASE_URL = 'smb/share';
+ const component = this;
const share_id = this.smbShareForm.get('share_id').value;
- const taskUrl = `${BASE_URL}/${URLVerbs.CREATE}`;
+
this.taskWrapperService
.wrapTaskAroundCall({
- task: new FinishedTask(taskUrl, { share_id }),
+ task: new FinishedTask(`${BASE_URL}/${urlVerb}`, { share_id }),
call: this.smbService.createShare(requestModel)
})
.subscribe({
complete: () => {
this.router.navigate([`cephfs/smb`]);
},
- error() {
+ error: () => {
component.smbShareForm.setErrors({ cdSubmitButton: true });
}
});
projects / ceph-ci.git / commitdiff