Skip to content
GitLab
Commit 61a27d80 authored by Marcin Prusinski's avatar Marcin Prusinski
Browse files

Merge pull request #47 in MEL/melodic-frontend from rc2.5-gui-features- to rc3.0 

* commit '840938cd':
  display proper messages by uploading many files
  checking if values are not null in nodes (for open stack)
  responsive view for process
parents 40ce4f00 840938cd
Hide whitespace changes
Inline Side-by-side
src/app/application/vm-list/vm-list.component.ts
View file @ 61a27d80
......@@ -110,7 +110,7 @@ export class VmListComponent implements OnInit {
const locationId = vm.originId.split('/')[0];
const location = this.locationList
.find(value => value.id === locationId);
return location ? location.geoLocation.city : 'UNKNOWN';
return (location && location.geoLocation) ? location.geoLocation.city : 'UNKNOWN';
}
userHasPermissionToSshConnection(vm: NodeCloudiator): boolean {
......
src/app/file-uploader/files-queue/files-queue.component.html
View file @ 61a27d80
<ng-content></ng-content>
<button mat-raised-button color="primary" *ngIf="files.length > 0" (click)="uploadAll()" [disabled]="">Upload</button>
<button mat-raised-button color="primary" *ngIf="files.length > 0" (click)="removeAll()" [disabled]="">Remove All
</button>
<button mat-raised-button color="primary" *ngIf="files.length > 0" (click)="uploadAll()">Upload</button>
<button mat-raised-button color="primary" *ngIf="files.length > 0" (click)="removeAll()">Remove All</button>
src/app/file-uploader/files-queue/files-queue.component.ts
View file @ 61a27d80
......@@ -73,6 +73,7 @@ export class FilesQueueComponent implements OnDestroy, AfterViewInit {
this.uploadingInProgress = true;
this.deploymentService.uploadMultipleModels(this.fileUploads).subscribe(value => {
let successfullyUploadedFilesNames = '';
let failedUploadedFilesMessage = '';
console.log('Files uploaded successfully');
this.uploadingInProgress = false;
const numberOfModels = this.fileUploads.length;
......@@ -84,23 +85,28 @@ export class FilesQueueComponent implements OnDestroy, AfterViewInit {
});
let uploadXmiResponseWithSecureVariable: UploadXmiResponse;
value.forEach(uploadedXmiFileResponse => {
console.log(`Uploaded file ${uploadedXmiFileResponse.modelName} with secure variables in number =
if (uploadedXmiFileResponse.httpStatus !== 'CREATED') {
failedUploadedFilesMessage += uploadedXmiFileResponse.message + ';\n';
} else {
console.log(`Uploaded file ${uploadedXmiFileResponse.modelName} with secure variables in number =
${uploadedXmiFileResponse.secureVariables.length}`);
if (uploadedXmiFileResponse.secureVariables.length !== 0) {
uploadXmiResponseWithSecureVariable = uploadedXmiFileResponse;
}
if (uploadedXmiFileResponse.httpStatus === 'CREATED') {
if (uploadedXmiFileResponse.secureVariables.length !== 0) {
uploadXmiResponseWithSecureVariable = uploadedXmiFileResponse;
}
successfullyUploadedFilesNames += uploadedXmiFileResponse.modelName + ', ';
this.secureVariablesService.addUploadedModelToLocalStorage(uploadedXmiFileResponse.modelName,
uploadedXmiFileResponse.secureVariables);
}
});
this.fileUploads.first.getUploadedModelsList();
if (successfullyUploadedFilesNames.length !== 0) {
if (successfullyUploadedFilesNames.length !== 0 && failedUploadedFilesMessage.length === 0) {
successfullyUploadedFilesNames = successfullyUploadedFilesNames.substring(0, successfullyUploadedFilesNames.length - 2);
this.snackBar.open(`Files: ${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:
${failedUploadedFilesMessage}`, 'Close');
} else {
this.snackBar.open('Any files did not uploaded successfully', 'Close');
this.snackBar.open(`No file has been uploaded successfully: ${failedUploadedFilesMessage}`, 'Close');
}
if (uploadXmiResponseWithSecureVariable) {
this.fileUploads.first.openDialog(uploadXmiResponseWithSecureVariable.secureVariables,
......
src/app/process/process-details/deployment/schedule-list/schedule-list.component.ts
View file @ 61a27d80
......@@ -54,8 +54,10 @@ export class ScheduleListComponent implements OnInit {
getTasksList(schedule: ScheduleCloudiator): string[] {
const result = [];
schedule.processes
.forEach(value => result.push(value.task));
if (schedule.processes !== null) {
schedule.processes
.forEach(value => result.push(value.task));
}
return result;
}
}
src/app/process/process-view/process-view.component.css
View file @ 61a27d80
......@@ -49,7 +49,22 @@ mat-grid-list {
overflow: auto;
}
.second-col-mat-card-narrow-window {
height: 80%;
padding: var(--double-margin);
width: inherit;
overflow: auto;
}
.div-with-center {
width: 100%;
text-align: center !important;
}
#main-process-mat-card {
overflow: auto;
}
.full-height {
height: 100%;
}
src/app/process/process-view/process-view.component.html
View file @ 61a27d80
<mat-card>
<mat-card id="main-process-mat-card">
<button button mat-raised-button color="primary" (click)="onAdvancedViewClick()">
Advanced view
</button>
......@@ -38,10 +38,11 @@
</mat-horizontal-stepper>
<mat-grid-list cols="{{getNumberOfCols()}}" rowHeight="{{getRowHeight()}}">
<!--wide window-->
<mat-grid-list *ngIf="!isNarrowWindow()" cols="{{getNumberOfColsForWideWindow()}}" rowHeight="11rem">
<!--first row-->
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-grid-tile *ngIf="!isReconfigurationProcess()" [rowspan]="2">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getFetchingOffersStatus())"
(click)="onFetchingOffersClick()">
......@@ -56,7 +57,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-grid-tile *ngIf="!isReconfigurationProcess()" [rowspan]="2">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getGeneratingConstraintProblemStatus())"
(click)="onGeneratingCPClick()">
......@@ -71,7 +72,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile>
<mat-grid-tile [rowspan]="2">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getReasoningStatus())">
<div class="process-element-title">
......@@ -85,7 +86,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile>
<mat-grid-tile [rowspan]="2">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getDeployingStatus())"
(click)="onDeployingClick()">
......@@ -100,7 +101,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile>
<mat-grid-tile [rowspan]="2">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getProcessFinishedStatus())">
<div class="process-element-title">
......@@ -116,7 +117,7 @@
<!--second row-->
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-grid-tile *ngIf="!isReconfigurationProcess()" [rowspan]="3">
<mat-card class="second-row-mat-card">
<div class="div-with-center">
<p>Current total number of offers:</p>
......@@ -130,7 +131,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-grid-tile *ngIf="!isReconfigurationProcess()" [rowspan]="3">
<mat-card class="second-row-mat-card">
<div class="div-with-center">
<p>Variables:</p>
......@@ -139,7 +140,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile>
<mat-grid-tile [rowspan]="3">
<mat-card class="second-row-mat-card">
<div class="div-with-center">
<p>Solution:</p>
......@@ -148,7 +149,7 @@
</mat-card>
</mat-grid-tile>
<mat-grid-tile colspan="2">
<mat-grid-tile [colspan]="2" [rowspan]="3">
<mat-card class="second-row-mat-card">
<div class="div-with-center">
<p>Deployment difference:</p>
......@@ -159,4 +160,129 @@
</mat-grid-list>
<!--narrow window-->
<mat-grid-list *ngIf="isNarrowWindow()" cols="2" rowHeight="{{getRowHeightForNarrowWindow()}}">
<!--first row - Fetching offers-->
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getFetchingOffersStatus())"
(click)="onFetchingOffersClick()">
<div class="process-element-title">
Fetching offers
<p>
<mat-icon class="process-element-icon">
{{getIconNameForVariable(getFetchingOffersStatus())}}
</mat-icon>
</p>
</div>
</mat-card>
</mat-grid-tile>
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-card class="second-col-mat-card-narrow-window">
<div class="div-with-center">
<p>Current total number of offers:</p>
</div>
<mat-chip-list>
<div class="div-with-center">
<mat-chip color="primary" selected>{{totalNumberOffers}}</mat-chip>
</div>
</mat-chip-list>
</mat-card>
</mat-grid-tile>
<!--second row - Generating CP-->
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getGeneratingConstraintProblemStatus())"
(click)="onGeneratingCPClick()">
<div class="process-element-title">
Generating Constraint Problem
<p>
<mat-icon class="process-element-icon">
{{getIconNameForVariable(getGeneratingConstraintProblemStatus())}}
</mat-icon>
</p>
</div>
</mat-card>
</mat-grid-tile>
<mat-grid-tile *ngIf="!isReconfigurationProcess()">
<mat-card class="second-col-mat-card-narrow-window">
<div class="div-with-center">
<p>Variables:</p>
<app-cp-variables-view></app-cp-variables-view>
</div>
</mat-card>
</mat-grid-tile>
<!--third row - Reasoning-->
<mat-grid-tile>
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getReasoningStatus())">
<div class="process-element-title">
Reasoning
<p>
<mat-icon class="process-element-icon">
{{getIconNameForVariable(getReasoningStatus())}}
</mat-icon>
</p>
</div>
</mat-card>
</mat-grid-tile>
<mat-grid-tile>
<mat-card class="second-col-mat-card-narrow-window">
<div class="div-with-center">
<p>Solution:</p>
<app-cp-solution-view></app-cp-solution-view>
</div>
</mat-card>
</mat-grid-tile>
<!--fourth row - Deploying-->
<mat-grid-tile>
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getDeployingStatus())"
(click)="onDeployingClick()">
<div class="process-element-title">
Deploying
<p>
<mat-icon class="process-element-icon">
{{getIconNameForVariable(getDeployingStatus())}}
</mat-icon>
</p>
</div>
</mat-card>
</mat-grid-tile>
<mat-grid-tile rowspan="2">
<mat-card class="second-col-mat-card-narrow-window">
<div class="div-with-center">
<p>Deployment difference:</p>
<app-deployment-difference></app-deployment-difference>
</div>
</mat-card>
</mat-grid-tile>
<!--fifth row - Updating application state-->
<mat-grid-tile>
<mat-card class="process-element-card"
[ngClass]="getClassForVariable(getProcessFinishedStatus())">
<div class="process-element-title">
Updating application state
<p>
<mat-icon class="process-element-icon">
{{getIconNameForVariable(getProcessFinishedStatus())}}
</mat-icon>
</p>
</div>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
</mat-card>
src/app/process/process-view/process-view.component.ts
View file @ 61a27d80
......@@ -30,6 +30,7 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
processListDialog: MatDialogRef<ActiveProcessListComponent>;
totalNumberOffers = 0;
initialCheckingFetchingOffersState = true;
narrowWindowOnLastCheck = false;
constructor(private route: ActivatedRoute,
private router: Router,
......@@ -41,6 +42,7 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
ngOnInit() {
localStorage.setItem('viewTitle', 'Process');
this.narrowWindowOnLastCheck = this.isNarrowWindow();
const processId = this.route.snapshot.paramMap.get('id');
if (processId !== null) {
localStorage.setItem('processId', processId);
......@@ -74,6 +76,29 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
console.log('Component Process-view destroyed');
}
isNarrowWindow() {
const windowWidth = window.innerWidth;
if (windowWidth < 1350 && !this.narrowWindowOnLastCheck) {
this.narrowWindowOnLastCheck = true;
if (this.deploymentCompleted) {
console.log('First time with narrow - get data');
this.ngAfterViewInit();
}
return true;
} else if (windowWidth < 1350 && this.narrowWindowOnLastCheck) {
return true;
} else if (windowWidth >= 1350 && this.narrowWindowOnLastCheck) {
if (this.deploymentCompleted) {
console.log('First time with wide - get data');
this.ngAfterViewInit();
}
this.narrowWindowOnLastCheck = false;
return false;
} else {
return false;
}
}
onAdvancedViewClick() {
this.router.navigate(['/process/camunda']);
}
......@@ -259,7 +284,7 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
getNumberOfCols(): number {
getNumberOfColsForWideWindow(): number {
if (this.isReconfigurationProcess()) {
return 3;
} else {
......@@ -267,7 +292,7 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
getRowHeight() {
getRowHeightForWideWindow() {
if (this.isReconfigurationProcess()) {
return '1.5:1';
} else {
......@@ -275,6 +300,10 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
getRowHeightForNarrowWindow() {
return '0.8:1';
}
redirectToProperProcessView(existedProcesses: Array<ProcessInstance>) {
const startedProcesses = this.processHelperService.getStartedProcesses(existedProcesses);
const finishedProcesses = this.processHelperService.getFinishedProcesses(existedProcesses);
......@@ -308,7 +337,7 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
}
private updateNumberOfOffers() {
if (!this.isFetchingOffersCompleted() || this.initialCheckingFetchingOffersState) {
if (!this.isReconfigurationProcess() && (!this.isFetchingOffersCompleted() || this.initialCheckingFetchingOffersState)) {
this.processService.getTotalOffersNumber().subscribe(value => {
this.totalNumberOffers = value;
},
......@@ -320,25 +349,29 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
}
private updateSolutionView() {
if (!this.cpSolutionViewComponent.cpSolutionDownloaded && this.isReasoningCompleted()) {
if (!this.cpSolutionViewComponent.cpSolutionDownloaded && this.isReasoningCompleted()
&& this.cpSolutionViewComponent.loadingDataInProgress === false) {
this.cpSolutionViewComponent.downloadCpSolution();
}
}
private updateVariablesView() {
if (!this.cpVariablesViewComponent.cpDownloaded && this.isGeneratingConstraintProblemCompleted()) {
if (!this.isReconfigurationProcess() && (!this.cpVariablesViewComponent.cpDownloaded && this.isGeneratingConstraintProblemCompleted()
&& this.cpVariablesViewComponent.loadingDataInProgress === false)) {
this.cpVariablesViewComponent.downloadCp();
}
}
private updateDeploymentDifferenceViewAfterCreatingSolution() {
if (!this.deploymentDifferenceComponent.differenceAfterSolutionDownloaded && this.isReasoningCompleted()) {
if (!this.deploymentDifferenceComponent.differenceAfterSolutionDownloaded && this.isReasoningCompleted()
&& this.deploymentDifferenceComponent.loadingDataInProgress === false) {
this.deploymentDifferenceComponent.downloadDifference();
}
}
private updateDeploymentDifferenceViewAfterFinishedDeployment() {
if (!this.deploymentDifferenceComponent.differenceAfterDeploymentDownloaded && this.isDeployingCompleted()) {
if (!this.deploymentDifferenceComponent.differenceAfterDeploymentDownloaded && this.isDeployingCompleted()
&& this.deploymentDifferenceComponent.loadingDataInProgress === false) {
this.deploymentDifferenceComponent.downloadDifference();
this.deploymentDifferenceComponent.differenceAfterDeploymentDownloaded = true;
}
......
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