Merge pull request #52 in MEL/melodic-frontend from MEL-989-multicloud-optimizer-simulator to rc3.0

* commit '01e4ddf9':
  simulator support, improve in process view for reconfiguration

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/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.html

@@ -74,7 +74,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 +223,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

@@ -118,6 +118,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 +133,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/simulation/model/metrics-names-response.ts

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

src/app/simulation/model/simulation-request.ts

+export class SimulationRequest {
+  applicationId: string;
+  metricValues: {};
+
+
+  constructor(applicationId: string, metricValues: {}) {
+    this.applicationId = applicationId;
+    this.metricValues = metricValues;
+  }
+}

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

+import {SimulationState} from './simulation-state';
+
+export class SimulationResponse {
+  applicationId: string;
+  result: SimulationState;
+}

src/app/simulation/model/simulation-state.ts

+export enum SimulationState {
+  SUCCESS, ERROR
+}

src/app/simulation/route/simulator-routing.module.ts

+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {SimulationFormComponent} from '../simulation-form/simulation-form.component';
+
+const routes: Routes = [
+  {path: '', component: SimulationFormComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SimulatorRoutingModule {
+
+}

src/app/simulation/service/metric-control.service.spec.ts

+import {TestBed} from '@angular/core/testing';
+
+import {MetricControlService} from './metric-control.service';
+
+describe('MetricControlService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: MetricControlService = TestBed.get(MetricControlService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/simulation/service/metric-control.service.ts

+import {Injectable} from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MetricControlService {
+
+  constructor() {
+  }
+
+  toFormGroup(metricNames: Array<string>): FormGroup {
+    const group = {};
+    metricNames.forEach(value => {
+      group[value] = new FormControl('', Validators.required);
+      group[value + 'Label'] = new FormControl({value, disabled: true});
+    });
+    return new FormGroup(group);
+  }
+}