Commit 6214ed1f authored by Alicja Reniewicz's avatar Alicja Reniewicz
Browse files

node group validation, block UI during uploading/deleting xmi and saving secure variables

parent 61a27d80
......@@ -6681,6 +6681,14 @@
"integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==",
"dev": true
},
"ng-block-ui": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/ng-block-ui/-/ng-block-ui-2.1.8.tgz",
"integrity": "sha512-BBcjUn9b/m3+wPlXkYExuy6ko+5oK7pte79gGUVo6a3HqpLnvPQXFgKV1kUpIM97NYfKKtR/+dPj7Xhh/GSV4w==",
"requires": {
"tslib": "^1.9.0"
}
},
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
......
......@@ -13,6 +13,7 @@ import {CloudDefinitionFormComponent} from '../provider/cloud-definition-form/cl
import {ProviderModule} from '../provider/provider.module';
import {FileUploaderModule} from '../file-uploader/file-uploader.module';
import {SensitiveVariablesDialogComponent} from '../file-uploader/sensitive-variables-dialog/sensitive-variables-dialog.component';
import {BlockUIModule} from 'ng-block-ui';
@NgModule({
declarations: [
......@@ -30,7 +31,8 @@ import {SensitiveVariablesDialogComponent} from '../file-uploader/sensitive-vari
FormsModule,
ReactiveFormsModule,
ProviderModule,
FileUploaderModule
FileUploaderModule,
BlockUIModule.forRoot()
],
exports: [
UploaderXmiComponent,
......
<div id="xmi-uploader-div">
<mat-card>
<block-ui>
<div id="xmi-uploader-div">
<mat-card>
<mat-card-header>
<mat-card-title>
XMI uploading
</mat-card-title>
</mat-card-header>
<mat-card-header>
<mat-card-title>
XMI uploading
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div [fileUploadInputFor]="fileUploadQueue" class="upload-drop-zone">
Just drag and drop xmi files here
</div>
<mat-card-content>
<div [fileUploadInputFor]="fileUploadQueue" class="upload-drop-zone">
Just drag and drop xmi files here
</div>
<mat-progress-bar *ngIf="uploadInProgress" color="primary" mode="indeterminate"></mat-progress-bar>
<mat-progress-bar *ngIf="uploadInProgress" color="primary" mode="indeterminate"></mat-progress-bar>
<div class="uploaded-files-list">
<app-files-queue #fileUploadQueue
[fileExtension]="'xmi'"
[notAllowedNames]="uploadedModels"
multiple>
<app-file-uploader (uploadEvent)="onFileUploadEvent($event)"
*ngFor="let file of fileUploadQueue.files; let i = index" [fileAlias]="'file'"
[file]="file"
[httpUrl]="uploadXmiUrl"
[id]="i">
</app-file-uploader>
</app-files-queue>
</div>
<div class="uploaded-files-list">
<app-files-queue #fileUploadQueue
[fileExtension]="'xmi'"
[notAllowedNames]="uploadedModels"
multiple>
<app-file-uploader (uploadEvent)="onFileUploadEvent($event)"
*ngFor="let file of fileUploadQueue.files; let i = index" [fileAlias]="'file'"
[file]="file"
[httpUrl]="uploadXmiUrl"
[id]="i">
</app-file-uploader>
</app-files-queue>
</div>
</mat-card-content>
</mat-card>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-header>
<mat-card-subtitle>
<h3>Your uploaded models</h3>
</mat-card-subtitle>
</mat-card-header>
<mat-card>
<mat-card-header>
<mat-card-subtitle>
<h3>Your uploaded models</h3>
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<mat-progress-bar *ngIf="deletingInProgress || secureVariablesUploadingInProgress"
mode="indeterminate"></mat-progress-bar>
<mat-card-content>
<mat-progress-bar *ngIf="deletingInProgress || secureVariablesUploadingInProgress"
mode="indeterminate"></mat-progress-bar>
<mat-spinner *ngIf="downloadingModelsListInProgress"></mat-spinner>
<mat-spinner *ngIf="downloadingModelsListInProgress"></mat-spinner>
<div *ngFor="let model of uploadedModels">
<mat-card>
<mat-card-title>
<span>{{model.name}}</span>
<button (click)="onDefineSecureVariablesClick(model)" *ngIf="variablesForDefiningExist(model)"
[disabled]="deletingInProgress" class="model-button"
color="primary" mat-raised-button>
Define secure variables
</button>
<button (click)="onDeleteModelClick(model)" [disabled]="deletingInProgress" color="warn" mat-button
class="model-button">
<mat-icon>cancel</mat-icon>
</button>
</mat-card-title>
<mat-card-subtitle>{{getInformationForModel(model)}}</mat-card-subtitle>
</mat-card>
</div>
<div *ngFor="let model of uploadedModels">
<mat-card>
<mat-card-title>
<span>{{model.name}}</span>
<button (click)="onDefineSecureVariablesClick(model)" *ngIf="variablesForDefiningExist(model)"
[disabled]="deletingInProgress" class="model-button"
color="primary" mat-raised-button>
Define secure variables
</button>
<button (click)="onDeleteModelClick(model)" [disabled]="deletingInProgress" color="warn" mat-button
class="model-button">
<mat-icon>cancel</mat-icon>
</button>
</mat-card-title>
<mat-card-subtitle>{{getInformationForModel(model)}}</mat-card-subtitle>
</mat-card>
</div>
</mat-card-content>
</mat-card>
</div>
</mat-card-content>
</mat-card>
</div>
</block-ui>
......@@ -6,6 +6,7 @@ import {SecureVariablesExistence, UploadedModel} from '../model/uploaded-model';
import {SensitiveVariablesDialogComponent} from '../../file-uploader/sensitive-variables-dialog/sensitive-variables-dialog.component';
import {SecureVariablesService} from '../../file-uploader/service/secure-variables.service';
import {SecureVariable} from '../../file-uploader/model/secure-variable';
import {BlockUI, NgBlockUI} from 'ng-block-ui';
@Component({
......@@ -16,6 +17,7 @@ import {SecureVariable} from '../../file-uploader/model/secure-variable';
})
export class UploaderXmiComponent implements OnInit {
@BlockUI() blockUI: NgBlockUI;
sensitiveVariablesDialog: MatDialogRef<SensitiveVariablesDialogComponent>;
title = 'Upload xmi';
......@@ -38,7 +40,6 @@ export class UploaderXmiComponent implements OnInit {
onFileUploadEvent(event) {
this.uploadInProgress = true;
this.snackBar.open(`Validating of your model from ${event.file.name} and storing in database in progress ...`, 'Close');
console.log('Received event: ', event);
if (event.event.hasOwnProperty('status')) {
console.log(`Response from uploading status: ${event.event.status}`);
......@@ -92,14 +93,16 @@ export class UploaderXmiComponent implements OnInit {
const modelName = model.name;
console.log(`Delete click for model with name: ${modelName}`);
this.deletingInProgress = true;
this.snackBar.open(`Deleting your model ${modelName} from CDO in progress...`, 'Close');
this.blockUI.start(`Deleting model ${modelName} in progress...`);
this.deploymentService.deleteModel(modelName).subscribe(() => {
this.blockUI.stop();
console.log(`Model ${modelName} successfully deleted`);
this.snackBar.open(`Model ${modelName} successfully deleted from CDO.`, 'Close', {duration: 10000});
this.deletingInProgress = false;
this.getUploadedModelsList();
},
error1 => {
this.blockUI.stop();
console.log(`Problem by deleting model ${modelName}`);
this.snackBar.open(`Problem by deleting model ${modelName} from CDO.`, 'Close', {duration: 10000});
this.deletingInProgress = false;
......@@ -148,19 +151,24 @@ export class UploaderXmiComponent implements OnInit {
this.informAboutSavingSecureVariables(modelName);
this.secureVariablesService.saveSecureVariables(result).subscribe(value => {
console.log(`Sensitive variables successfully stored`);
this.secureVariablesUploadingInProgress = false;
this.setSavingSecureVariablesAsFinished();
this.snackBar.open(`Sensitive variables successfully saved. Your model is ready for deployment`, 'Close');
this.secureVariablesService.removeSecureExistenceFromModelInLocalStorage(modelName);
this.getUploadedModelsList();
},
error1 => {
this.secureVariablesUploadingInProgress = false;
this.setSavingSecureVariablesAsFinished();
this.snackBar.open(`${error1.error.message}`, 'Close');
});
}
informAboutSavingSecureVariables(modelName: string) {
this.secureVariablesUploadingInProgress = true;
this.snackBar.open(`Saving secure variables for model ${modelName} in progress...`, 'Close');
this.blockUI.start(`Saving secure variables for model ${modelName} in progress...`);
}
setSavingSecureVariablesAsFinished() {
this.secureVariablesUploadingInProgress = false;
this.blockUI.stop();
}
}
......@@ -101,9 +101,9 @@ export class FilesQueueComponent implements OnDestroy, AfterViewInit {
this.fileUploads.first.getUploadedModelsList();
if (successfullyUploadedFilesNames.length !== 0 && failedUploadedFilesMessage.length === 0) {
successfullyUploadedFilesNames = successfullyUploadedFilesNames.substring(0, successfullyUploadedFilesNames.length - 2);
this.snackBar.open(`Files: ${successfullyUploadedFilesNames} uploaded successfully`, 'Close');
this.snackBar.open(`Models: ${successfullyUploadedFilesNames} uploaded successfully`, 'Close');
} else if (successfullyUploadedFilesNames.length !== 0 && failedUploadedFilesMessage.length !== 0) {
this.snackBar.open(`Files: ${successfullyUploadedFilesNames} uploaded successfully, but uploading of other files failed:
this.snackBar.open(`Models: ${successfullyUploadedFilesNames} uploaded successfully, but uploading of other files failed:
${failedUploadedFilesMessage}`, 'Close');
} else {
this.snackBar.open(`No file has been uploaded successfully: ${failedUploadedFilesMessage}`, 'Close');
......
......@@ -64,6 +64,8 @@ export class FileUploaderComponent implements OnDestroy {
public upload(): void {
this.isUploading = true;
this.uploaderXmiComponent.blockUI
.start(`Validating of your model from ${this.uploadingFile.name} and storing in database in progress ...`);
const formData = new FormData();
formData.set(this.fileAlias, this.uploadingFile, this.uploadingFile.name);
this.fileUploadSubscription = this.deploymentService.uploadModel(formData)
......@@ -77,7 +79,7 @@ export class FileUploaderComponent implements OnDestroy {
if (event.type === HttpEventType.Response) {
const secureVariables: Array<SecureVariable> = event.body.secureVariables;
console.log('File uploaded, removing from uploading list', event.body.secureVariables);
const modelName = this.uploadingFile.name.slice(0, this.uploadingFile.name.length - 4);
const modelName = event.body.modelName;
this.secureVariablesService.addUploadedModelToLocalStorage(modelName, secureVariables);
if (secureVariables.length !== 0) {
console.log(`Open dialog for sensitive variables. The first one: ${secureVariables[0]}`);
......@@ -85,10 +87,12 @@ export class FileUploaderComponent implements OnDestroy {
} else {
console.log(`List of sensitive variables for ${modelName} is empty`);
}
this.setUploadingAsFinished();
this.remove();
}
}, (error: any) => {
this.setUploadingAsFinished();
console.log(`Error by uploading`, error);
console.log(`Error message: ${error.error.message}`);
if (this.fileUploadSubscription) {
......@@ -135,37 +139,21 @@ export class FileUploaderComponent implements OnDestroy {
this.sensitiveVariablesDialog.afterClosed().subscribe(result => {
console.log(`Secure variables dialog closed with result`, result);
this.saveSensitiveVariables(result, modelName);
this.uploaderXmiComponent.saveSensitiveVariables(result, modelName);
});
}
saveSensitiveVariables(result: any, modelName: string) {
this.uploaderXmiComponent.informAboutSavingSecureVariables(modelName);
this.secureVariablesService.saveSecureVariables(result).subscribe(value => {
console.log(`Sensitive variables successfully stored`);
this.uploaderXmiComponent.uploadInProgress = false;
this.uploaderXmiComponent.secureVariablesUploadingInProgress = false;
this.snackBar.open(`Sensitive variables successfully saved. Your model is ready for deployment`, 'Close');
this.secureVariablesService.removeSecureExistenceFromModelInLocalStorage(modelName);
this.uploaderXmiComponent.getUploadedModelsList();
},
error1 => {
this.isUploading = false;
this.uploaderXmiComponent.secureVariablesUploadingInProgress = false;
this.uploaderXmiComponent.uploadInProgress = false;
this.snackBar.open(`${error1.error.message}`, 'Close');
});
}
public getUploadedModelsList() {
this.uploaderXmiComponent.getUploadedModelsList();
}
public setUploadingInProgress() {
this.uploaderXmiComponent.uploadInProgress = true;
this.uploaderXmiComponent.blockUI.start('Validating of your models and storing in database in progress ..');
}
public setUploadingAsFinished() {
this.uploaderXmiComponent.uploadInProgress = false;
this.uploaderXmiComponent.blockUI.stop();
}
}
......@@ -73,11 +73,16 @@
<mat-card>
<form [formGroup]="cloudConfigurationForm">
<mat-form-field>
<input matInput formControlName="nodeGroup" placeholder="node group" required>
<input matInput formControlName="nodeGroup" placeholder="node group" required
pattern="{{this.nodeGroupPattern}}">
<mat-error
*ngIf="cloudConfigurationFormControl.nodeGroup.hasError('required') && (cloudConfigurationFormControl.nodeGroup.dirty || cloudConfigurationFormControl.nodeGroup.touched)">
{{getRequiredMsg()}}
</mat-error>
<mat-error
*ngIf="cloudConfigurationFormControl.nodeGroup.hasError('pattern') && (cloudConfigurationFormControl.nodeGroup.dirty || cloudConfigurationFormControl.nodeGroup.touched)">
{{getNodeGroupPatternMsg()}}
</mat-error>
</mat-form-field>
<mat-card-subtitle><h3>Cloud properties</h3></mat-card-subtitle>
......
......@@ -33,6 +33,7 @@ export class CloudDefinitionFormComponent implements OnInit {
cloudType = CloudType.PUBLIC;
cloudTypeEnum = CloudType;
providerNames = ['aws-ec2', 'openstack4j', 'azure', 'oktawave'];
nodeGroupPattern = '^[a-z0-9]{3,}$';
data: MatTableDataSource<ParentProperty>;
displayedColumns: string[] = ['name', 'properties', 'edit', 'delete'];
......@@ -67,7 +68,7 @@ export class CloudDefinitionFormComponent implements OnInit {
this.cloudConfigurationForm = this.formBuilder.group({
id: this.cloudData ? this.cloudData.cloudConfiguration.id : null,
nodeGroup: this.cloudData ? new FormControl({value: this.cloudData.cloudConfiguration.nodeGroup, disabled: this.isReadMode})
: ['', Validators.required],
: ['', [Validators.required, Validators.pattern(this.nodeGroupPattern)]],
properties: this.cloudData ? this.cloudData.cloudConfiguration.properties : this.cloudProperties
});
this.cloudDefinitionForm = this.formBuilder.group({
......@@ -121,6 +122,10 @@ export class CloudDefinitionFormComponent implements OnInit {
return 'Required field for private provider';
}
getNodeGroupPatternMsg() {
return 'Required min 3 sings length. Only lowercase and digits are allowed.';
}
saveCloudDefinition(cloudForm: NgForm) {
this.cloudConfigurationFormControl.properties.setValue(this.cloudProperties);
const cloudDefinition = <CloudDefinition> cloudForm.value;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment