Ticket ## : Display Virtual Memory Size + Threads

Author: habarthierry-hue

src/FaasNet.Website/FaasNet.Website.csproj

@@ -12,6 +12,7 @@
     <None Remove="src\app\functions\function-rendering\function-rendering.component.ts" />
     <None Remove="src\app\shared\material.module.ts" />
     <None Remove="src\app\shared\shared.module.ts" />
+    <None Remove="src\stores\common\prometheus-queryrange-result.model.ts" />
     <None Remove="src\stores\common\search.model.ts" />
     <None Remove="src\stores\functions\models\function.model.ts" />
   </ItemGroup>
@@ -30,6 +31,7 @@
     <TypeScriptCompile Include="src\app\functions\function-rendering\function-rendering.component.ts" />
     <TypeScriptCompile Include="src\app\shared\material.module.ts" />
     <TypeScriptCompile Include="src\app\shared\shared.module.ts" />
+    <TypeScriptCompile Include="src\stores\common\prometheus-queryrange-result.model.ts" />
     <TypeScriptCompile Include="src\stores\common\search.model.ts" />
     <TypeScriptCompile Include="src\stores\functions\models\function.model.ts" />
   </ItemGroup>

src/FaasNet.Website/package-lock.json

@@ -37,12 +37,14 @@
     "@ngx-translate/http-loader": "^6.0.0",
     "@types/jasmine": "~3.8.0",
     "@types/node": "^12.11.1",
+    "chart.js": "^2.9.3",
     "jasmine-core": "~3.8.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
+    "ng2-charts": "^2.4.2",
     "typescript": "~4.3.5"
   }
 }

src/FaasNet.Website/package.json

@@ -10,12 +10,12 @@ import { BaseRenderingComponent } from "../base-rendering.component";
 export class ArrayRenderingComponent extends BaseRenderingComponent {
   children: any[] = [];
   isLoaded: boolean = true;
-  formArr: FormArray = new FormArray([]);
 
   addParameter(evt: any) {
     evt.preventDefault();
     const formGroup = new FormGroup({});
-    this.formArr.push(formGroup);
+    const formArr = this.form?.get(this.option.Name) as FormArray;
+    formArr.push(formGroup);
     this.children.push({
       form: formGroup,
       parameters: this.option.Parameters
@@ -24,8 +24,9 @@ export class ArrayRenderingComponent extends BaseRenderingComponent {
 
   removeParameter(evt: any, child: any) {
     evt.preventDefault();
+    const formArr = this.form?.get(this.option.Name) as FormArray;
     const index = this.children.indexOf(child);
-    this.formArr.removeAt(this.formArr.controls.indexOf(child.form));
+    formArr.removeAt(formArr.controls.indexOf(child.form));
     this.children.splice(index, 1);
   }
 
@@ -34,7 +35,8 @@ export class ArrayRenderingComponent extends BaseRenderingComponent {
       return;
     }
 
+    const formArr = new FormArray([]);
     this.form = form;
-    this.form.addControl(this.option.Name, this.formArr);
+    this.form.addControl(this.option.Name, formArr);
   }
 }

src/FaasNet.Website/src/app/functions/function-rendering/array/array-rendering.component.ts

@@ -1,6 +1,7 @@
 import { NgModule } from "@angular/core";
 import { MaterialModule } from "@app/shared/material.module";
 import { SharedModule } from "@app/shared/shared.module";
+import { ChartsModule } from "ng2-charts";
 import { ArrayRenderingComponent } from "./function-rendering/array/array-rendering.component";
 import { FunctionRenderingComponent } from "./function-rendering/function-rendering.component";
 import { StringRenderingComponent } from "./function-rendering/string/string-rendering.component";
@@ -9,13 +10,15 @@ import { AddFunctionComponent } from "./list/add-function.component";
 import { ListFunctionsComponent } from "./list/list.component";
 import { InfoFunctionComponent } from "./view/info/info.component";
 import { InvokeFunctionComponent } from "./view/invoke/invoke.component";
+import { MonitoringFunctionComponent } from "./view/monitoring/monitoring.component";
 import { ViewFunctionComponent } from "./view/view.component";
 
 @NgModule({
   imports: [
     MaterialModule,
     SharedModule,
-    FunctionsRoutes
+    FunctionsRoutes,
+    ChartsModule
   ],
   declarations: [
     ListFunctionsComponent,
@@ -25,7 +28,8 @@ import { ViewFunctionComponent } from "./view/view.component";
     StringRenderingComponent,
     InvokeFunctionComponent,
     InfoFunctionComponent,
-    AddFunctionComponent
+    AddFunctionComponent,
+    MonitoringFunctionComponent
   ]
 })
 

src/FaasNet.Website/src/app/functions/functions.module.ts

@@ -2,6 +2,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { ListFunctionsComponent } from './list/list.component';
 import { InfoFunctionComponent } from './view/info/info.component';
 import { InvokeFunctionComponent } from './view/invoke/invoke.component';
+import { MonitoringFunctionComponent } from './view/monitoring/monitoring.component';
 import { ViewFunctionComponent } from './view/view.component';
 
 
@@ -24,6 +25,10 @@ const routes: Routes = [
       {
         path: 'invoke',
         component: InvokeFunctionComponent
+      },
+      {
+        path: 'monitoring',
+        component: MonitoringFunctionComponent
       }
     ]
   }

src/FaasNet.Website/src/app/functions/functions.routes.ts

@@ -24,6 +24,5 @@
         <button mat-raised-button color="warn" (click)="delete()">{{ 'functions.delete' | translate }}</button>
       </div>
     </div>
-
   </mat-card-content>
 </mat-card>

src/FaasNet.Website/src/app/functions/view/info/info.component.html

@@ -6,7 +6,7 @@
           <mat-card-content>
             <div>
               <h3>{{ 'functions.configurationParameters' | translate }}</h3>
-              <function-rendering-component [option]="parameter" [form]="form"></ function-rendering-component>
+              <function-rendering-component [option]="parameter" [form]="form"></function-rendering-component>
             </div>
             <div>
               <h3>{{ 'functions.inputParameters' | translate }}</h3>

src/FaasNet.Website/src/app/functions/view/invoke/invoke.component.html

@@ -29,6 +29,8 @@ export class InvokeFunctionComponent implements OnInit, OnDestroy {
     private snackBar: MatSnackBar) { }
 
   ngOnInit(): void {
+    this.form = new FormGroup({});
+    this.inputForm = new FormControl();
     this.actions$.pipe(
       filter((action: any) => action.type === '[Functions] COMPLETE_INVOKE_FUNCTION'))
       .subscribe((e) => {

src/FaasNet.Website/src/app/functions/view/invoke/invoke.component.ts

@@ -0,0 +1,22 @@
+<div fxLayout="row" fxLayoutGap="10px">
+  <mat-card fxFlex="50%">
+    <mat-card-content>
+      <h3>{{ "functions.threads" | translate }}</h3>
+      <canvas baseChart width="350"
+              [datasets]="threadValues"
+              [labels]="threadLabels"
+              [options]="options"
+              chartType="line"></canvas>
+    </mat-card-content>
+  </mat-card>
+  <mat-card fxFlex="50%">
+    <mat-card-content>
+      <h3>{{ "functions.virtualMemoryBytes" | translate }}</h3>
+      <canvas baseChart width="350"
+              [datasets]="virtualMemoryBytesValues"
+              [labels]="virtualMemoryBytesLabels"
+              [options]="options"
+              chartType="line"></canvas>
+    </mat-card-content>
+  </mat-card>
+</div>