Merge pull request #54 in MEL/melodic-frontend from rc3.0 to master

* commit '0f28a767':
  kibanaUrl in appConfig.json
  button for redirection to Kibana
  simulator support, improve in process view for reconfiguration
  information about sg in cloud def
  Allow model upload via file dialog

src/app/app-config/model/app-config.ts

@@ -3,4 +3,5 @@ export interface AppConfig {
   camundaUrl: string;
   grafanaUrl: string;
   webSshUrl: string;
+  kibanaUrl: string;
 }

src/app/app-config/service/app-config.service.ts

@@ -36,6 +36,7 @@ export class AppConfigService {
           camundaUrl = environment.camundaUrl;
           grafanaUrl = environment.grafanaUrl;
           webSshUrl = environment.webSshUrl;
+          kibanaUrl = environment.kibanaUrl;
         }();
         resolve();
       }

src/app/app-routing.module.ts

@@ -30,6 +30,11 @@ const routes: Routes = [
     canActivate: [CommonUserAdminRoleGuard]
   },
 
+  {
+    path: 'simulation', loadChildren: './simulation/simulation.module#SimulationModule',
+    canActivate: [CommonUserAdminRoleGuard]
+  },
+
   {path: '**', loadChildren: './user/user.module#UserModule'},
 ];
 

src/app/common-template/menu/menu.component.html

@@ -27,6 +27,8 @@
           <a mat-list-item routerLink="/provider/cloud-definition"><i class="material-icons">settings_applications</i>&nbsp;Providers Settings</a>
           <a mat-list-item routerLink="/byon"><i class="material-icons">settings_applications</i>&nbsp;BYON Settings</a>
           <a mat-list-item routerLink="/process/details/offer"><i class="material-icons">local_offer</i>&nbsp;Offers</a>
+          <a mat-list-item routerLink="/simulation"><i class="material-icons">toys</i>&nbsp;Simulation
+          </a>
           <a *ngIf="isAdmin()" mat-list-item routerLink="/user"><i class="material-icons">supervisor_account</i>&nbsp;Manage Users</a>
           <a mat-list-item routerLink="/user/password"><i class="material-icons">visibility</i>&nbsp;Change Password</a>
           <a mat-list-item (click)="onLogOutClick(); snav.close()"><i class="material-icons">eject</i>&nbsp;Log Out</a>

src/app/deploying-application/deploying-form/deploying-form.component.css

@@ -18,3 +18,7 @@ mat-form-field {
 mat-card {
   height: 100%;
 }
+
+.slide-toggle-with-margin {
+  margin-bottom: var(--triple-margin);
+}

src/app/deploying-application/deploying-form/deploying-form.component.html

@@ -22,6 +22,14 @@
           </mat-form-field>
         </div>
 
+        <mat-card-subtitle>
+          <mat-icon color="primary">info</mat-icon>
+          In simulation mode real VMs or functions won't be created.
+        </mat-card-subtitle>
+        <mat-slide-toggle formControlName="isSimulation" class="slide-toggle-with-margin" color="primary">
+          Simulation mode
+        </mat-slide-toggle>
+
         <mat-divider></mat-divider>
 
         <div class="card-div">

src/app/deploying-application/deploying-form/deploying-form.component.ts

@@ -35,6 +35,7 @@ export class DeployingFormComponent implements OnInit {
     this.deploymentForm = this.formBuilder.group({
       username: [this.userService.currentUser.username, Validators.required],
       applicationId: ['', Validators.required],
+      isSimulation: [false, Validators.required],
       cloudDefinitions: new Array<CloudDefinitionForRead>(),
     });
   }

src/app/deploying-application/model/deployment-request.ts

@@ -2,6 +2,7 @@ import {CloudDefinition} from '../../provider/model/cloud-definition';
 
 export class DeploymentRequest {
   applicationId: string;
+  isSimulation: boolean;
   username: string;
   password: string;
   cloudDefinitions: Array<CloudDefinition>;

src/app/deploying-application/service/deployment.service.ts

@@ -36,9 +36,9 @@ export class DeploymentService {
     };
     return this.http.post(requestUrl, JSON.stringify(deploymentRequest), httpDeploymentProcessHeader).pipe(
       tap(() => console.log(
-        `Deployment request sent`
+        `Deployment request for application ${deploymentRequest.applicationId} in simulation mode = ${deploymentRequest.isSimulation} sent`
         ),
-        e => console.log(`Error by creating deployment process: ${e}`)
+        e => console.log(`Error by creating deployment process: `, e)
       ));
   }
 

src/app/deploying-application/uploader-xmi/uploader-xmi.component.html

@@ -12,6 +12,11 @@
           Just drag and drop xmi files here
         </div>
 
+        <div>
+            <input [fileUploadInputFor]="fileUploadQueue" type="file"
+                   id="fileUploadDialog">
+        </div>
+
         <mat-progress-bar *ngIf="uploadInProgress" color="primary" mode="indeterminate"></mat-progress-bar>
 
         <div class="uploaded-files-list">

src/app/process/model/process-instance.ts

@@ -6,4 +6,5 @@ export class ProcessInstance {
   processState: ProcessState;
   finishDate: Date;
   startDate: Date;
+  simulation: boolean;
 }

src/app/process/model/process-variables.ts

@@ -8,6 +8,7 @@ export class ProcessVariables {
   processState: VariableStatus;
   reconfigurationProcess: boolean;
   applicationId: string;
+  simulation: boolean;
 
   constructor() {
     this.discoveryServiceResult = VariableStatus.UNKNOWN;
@@ -17,5 +18,6 @@ export class ProcessVariables {
     this.processState = VariableStatus.UNKNOWN;
     this.reconfigurationProcess = false;
     this.applicationId = '';
+    this.simulation = false;
   }
 }

src/app/process/process-view/process-view.component.css

@@ -68,3 +68,7 @@ mat-grid-list {
 .full-height {
   height: 100%;
 }
+
+.monitoring-button {
+  margin-right: var(--triple-margin);
+}

src/app/process/process-view/process-view.component.html

 <mat-card id="main-process-mat-card">
-  <button button mat-raised-button color="primary" (click)="onAdvancedViewClick()">
+  <button button mat-raised-button color="primary" (click)="onAdvancedViewClick()" class="monitoring-button">
+    <mat-icon class="mat-18">developer_board</mat-icon>
     Advanced view
   </button>
 
+  <button button mat-raised-button color="primary" (click)="onComponentsLogsClick()">
+    <mat-icon class="mat-18">data_usage</mat-icon>
+    Components logs
+  </button>
+
   <button button mat-raised-button color="primary"
           class="button-on-right-side" (click)="onProcessesHistoryClick()">
     <mat-icon class="mat-18">history</mat-icon>
@@ -74,7 +80,8 @@
 
     <mat-grid-tile [rowspan]="2">
       <mat-card class="process-element-card"
-                [ngClass]="getClassForVariable(getReasoningStatus())">
+                [ngClass]="getClassForVariable(getReasoningStatus())"
+                (click)="onReasoningClick()">
         <div class="process-element-title">
           Reasoning
           <p>
@@ -222,7 +229,8 @@
     <!--third row - Reasoning-->
     <mat-grid-tile>
       <mat-card class="process-element-card"
-                [ngClass]="getClassForVariable(getReasoningStatus())">
+                [ngClass]="getClassForVariable(getReasoningStatus())"
+                (click)="onReasoningClick()">
         <div class="process-element-title">
           Reasoning
           <p>

src/app/process/process-view/process-view.component.ts

@@ -10,6 +10,7 @@ import {ActiveProcessListComponent} from '../active-process-list/active-process-
 import {CpSolutionViewComponent} from '../cp-solution-view/cp-solution-view.component';
 import {CpVariablesViewComponent} from '../cp-variables-view/cp-variables-view.component';
 import {DeploymentDifferenceComponent} from '../deployment-difference/deployment-difference.component';
+import {AppConfigService} from '../../app-config/service/app-config.service';
 
 @Component({
   selector: 'app-process-view',
@@ -103,6 +104,11 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
     this.router.navigate(['/process/camunda']);
   }
 
+  onComponentsLogsClick() {
+    console.log(`Click for Kibana redirection`);
+    window.open(AppConfigService.settings.kibanaUrl);
+  }
+
   onProcessesHistoryClick() {
     console.log('History of processes click');
     this.router.navigate(['/process/list']);
@@ -118,6 +124,11 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
     this.router.navigate(['/process/details/cp']);
   }
 
+  onReasoningClick() {
+    console.log('Reasoning click');
+    this.router.navigate(['/process/details/cp']);
+  }
+
   onDeployingClick() {
     console.log('Deploying click');
     this.router.navigate(['/process/details/deployment']);
@@ -128,13 +139,19 @@ export class ProcessViewComponent implements OnInit, AfterViewInit, OnDestroy {
       .subscribe(value => {
           console.log(`Info about process`, value);
           this.currentProcessVariables = value;
-          localStorage.setItem('viewTitle', `Process for '${value.applicationId}'`);
+          if (this.currentProcessVariables.simulation) {
+            localStorage.setItem('viewTitle', `Process for '${value.applicationId}' in simulation mode`);
+          } else {
+            localStorage.setItem('viewTitle', `Process for '${value.applicationId}'`);
+          }
           this.checkErrorsExistence();
           this.updateNumberOfOffers();
           this.updateVariablesView();
           this.updateSolutionView();
-          // this.updateDeploymentDifferenceViewAfterCreatingSolution();
-          // this.updateDeploymentDifferenceViewAfterFinishedDeployment();
+          if (this.currentProcessVariables.simulation) {
+            this.updateDeploymentDifferenceViewAfterCreatingSolution();
+            this.updateDeploymentDifferenceViewAfterFinishedDeployment();
+          }
           if (!this.errorInVariable && !this.stopMonitoring) {
             if (value.processState.toString() === VariableStatus[VariableStatus.SUCCESS]) {
               console.log(`Process finished`);

src/app/process/service/process.service.ts

@@ -34,7 +34,7 @@ export class ProcessService {
   getProcessesList(): Observable<Array<ProcessInstance>> {
     return this.http.get(this.apiUrl, httpOptions).pipe(
       tap((response: Array<ProcessInstance>) => console.log(`Response with processes list: `, response),
-        e => console.log(`Error by getting processes list`))
+        e => console.log(`Error by getting processes list: `, e))
     );
   }
 

src/app/provider/cloud-property-form/cloud-property-form.component.html

@@ -21,6 +21,16 @@
           <form #singlePropertyFormId="ngForm" [formGroup]="singlePropertyForm">
             <mat-card-subtitle>{{singlePropertyFormTitle}}</mat-card-subtitle>
             <mat-card-content>
+
+              <mat-card>
+                <mat-icon color="primary">info</mat-icon>
+                Security group definition
+                <p> In order to have open specific ports on your instances, please define own security group (with
+                  proper rules) on your cloud provider.
+                  In that form, please add property with key: <strong>{{propertiesNameForSG}}</strong>, as value use id
+                  of this security group.</p>
+              </mat-card>
+
               <mat-form-field class="wide-input">
                 <input matInput formControlName="key" placeholder="Key" required>
                 <mat-error *ngIf="form.key.errors && form.key.errors.invalidKey">

src/app/provider/cloud-property-form/cloud-property-form.component.ts

@@ -22,6 +22,7 @@ export class CloudPropertyFormComponent implements OnInit {
   singlePropertyFormTitle: string;
   data: MatTableDataSource<SingleProperty>;
   propertyData: ParentProperty;
+  propertiesNameForSG = 'sword.default.securityGroup';
 
   editedPropertyKey: string;
 

src/app/simulation/model/metrics-names-response.ts

+export class MetricsNamesResponse {
+  metricsNames: Array<string>;
+}