Ticket #12 : Publish a function

Author: habarthierry-hue

src/FaasNet.Website/Program.cs

@@ -0,0 +1,9 @@
+namespace FaasNet.Website
+{
+  public class Program
+    {
+        public static void Main(string[] args)
+        {
+        }
+    }
+}

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

@@ -5,6 +5,7 @@ import { ArrayRenderingComponent } from "./function-rendering/array/array-render
 import { FunctionRenderingComponent } from "./function-rendering/function-rendering.component";
 import { StringRenderingComponent } from "./function-rendering/string/string-rendering.component";
 import { FunctionsRoutes } from "./functions.routes";
+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";
@@ -23,7 +24,8 @@ import { ViewFunctionComponent } from "./view/view.component";
     ArrayRenderingComponent,
     StringRenderingComponent,
     InvokeFunctionComponent,
-    InfoFunctionComponent
+    InfoFunctionComponent,
+    AddFunctionComponent
   ]
 })
 

src/FaasNet.Website/src/app/functions/list/add-function.component.html

@@ -0,0 +1,25 @@
+<h1 mat-dialog-title>{{ 'functions.add' | translate }}</h1>
+<form [formGroup]="addFunctionFormGroup" (ngSubmit)="save()">
+  <div mat-dialog-content>
+    <!-- Name -->
+    <mat-form-field appearance="outline" class="full-width">
+      <mat-label>{{ 'functions.name' | translate }}</mat-label>
+      <input matInput formControlName="name" />
+      <mat-error *ngIf="addFunctionFormGroup.get('name')?.hasError('required')">
+        {{ 'functions.nameRequired' | translate }}
+      </mat-error>
+    </mat-form-field>
+    <!-- Image -->
+    <mat-form-field appearance="outline" class="full-width">
+      <mat-label>{{ 'functions.image' | translate }}</mat-label>
+      <input matInput formControlName="image" />
+      <mat-error *ngIf="addFunctionFormGroup.get('image')?.hasError('required')">
+        {{ 'functions.imageRequired' | translate }}
+      </mat-error>
+    </mat-form-field>
+  </div>
+  <div mat-dialog-actions>
+    <button mat-button color="primary">{{ 'shared.create' | translate }}</button>
+    <button mat-button color="warn" mat-dialog-close>{{ 'shared.close' | translate }}</button>
+  </div>
+</form>

src/FaasNet.Website/src/app/functions/list/add-function.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'addfunction',
+  templateUrl: './add-function.component.html'
+})
+export class AddFunctionComponent{
+  addFunctionFormGroup: FormGroup = new FormGroup({
+    name: new FormControl('', [Validators.required]),
+    image: new FormControl('', [Validators.required])
+  });
+
+  constructor(
+    private translateService: TranslateService,
+    private dialogRef: MatDialogRef<AddFunctionComponent>) {
+  }
+
+  save() {
+    if (!this.addFunctionFormGroup.valid) {
+      return;
+    }
+
+    this.dialogRef.close(this.addFunctionFormGroup.value);
+  }
+}

src/FaasNet.Website/src/app/functions/list/list.component.html

@@ -5,6 +5,9 @@
     </ul>
   </div>
 </div>
+<div class="mb-10">
+  <button mat-raised-button color="primary" (click)="addFunction()">{{ 'functions.add' | translate }}</button>
+</div>
 <div class="mat-elevation-z8 overflow-hidden">
   <mat-table class="full-width" [dataSource]="functions" matSortActive="createDateTime" matSortDirection="desc" matSort>
     <!-- Name -->

src/FaasNet.Website/src/app/functions/list/list.component.ts

@@ -1,12 +1,17 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatSort } from '@angular/material/sort';
-import { select, Store } from '@ngrx/store';
+import { ScannedActionsSubject, select, Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
 import * as fromReducers from '@stores/appstate';
 import { SearchResult } from '@stores/common/search.model';
-import { startSearch } from '@stores/functions/actions/function.actions';
+import { startAdd, startSearch } from '@stores/functions/actions/function.actions';
 import { FunctionResult } from '@stores/functions/models/function.model';
 import { merge } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { AddFunctionComponent } from './add-function.component';
 
 @Component({
   selector: 'list-functions',
@@ -20,9 +25,28 @@ export class ListFunctionsComponent implements OnInit {
   length: number | undefined;
 
   constructor(
-    private store: Store<fromReducers.AppState>) { }
+    private store: Store<fromReducers.AppState>,
+    private dialog: MatDialog,
+    private actions$: ScannedActionsSubject,
+    private translateService: TranslateService,
+    private snackBar: MatSnackBar) { }
 
   ngOnInit(): void {
+    this.actions$.pipe(
+      filter((action: any) => action.type === '[Functions] COMPLETE_ADD_FUNCTION'))
+      .subscribe((e) => {
+        this.snackBar.open(this.translateService.instant('functions.messages.functionAdded'), this.translateService.instant('undo'), {
+          duration: 2000
+        });
+        this.refresh();
+      });
+    this.actions$.pipe(
+      filter((action: any) => action.type === '[Functions] ERROR_ADD_FUNCTION'))
+      .subscribe(() => {
+        this.snackBar.open(this.translateService.instant('functions.messages.errorAddFunction'), this.translateService.instant('undo'), {
+          duration: 2000
+        });
+      });
     this.store.pipe(select(fromReducers.selectFunctionsResult)).subscribe((state: SearchResult<FunctionResult> | null) => {
       if (!state || !state.content) {
         return;
@@ -42,6 +66,20 @@ export class ListFunctionsComponent implements OnInit {
     this.refresh();
   }
 
+  addFunction() {
+    const dialogRef = this.dialog.open(AddFunctionComponent, {
+      width: '800px'
+    });
+    dialogRef.afterClosed().subscribe((opt: any) => {
+      if (!opt) {
+        return;
+      }
+
+      const addFunction = startAdd({ name: opt.name, image: opt.image });
+      this.store.dispatch(addFunction);
+    });
+  }
+
   private refresh() {
     if (!this.paginator || !this.sort) {
       return;

src/FaasNet.Website/src/assets/i18n/en.json

@@ -3,6 +3,7 @@
     "list": "Functions",
     "name": "Function",
     "image": "Docker Image",
+    "add": "Add a function",
     "createDateTime": "Create Datetime",
     "updateDateTime": "Update Datetime",
     "launch": "Launch",
@@ -15,16 +16,22 @@
     "deleteTitle": "Delete this function",
     "delete": "Delete",
     "info": "Information",
+    "nameRequired": "The name is required",
+    "imageRequired": "The image is required",
     "messages": {
       "errorInvokeFunction": "An error occured while trying to invoke the function",
       "functionRemoved": "The function has been removed",
-      "errorRemoveFunction": "An error occured while trying to remove the function"
+      "errorRemoveFunction": "An error occured while trying to remove the function",
+      "functionAdded": "The function has been added",
+      "errorAddFunction": "An error occured while trying to add the function"
     }
   },
   "shared": {
     "add": "Add",
     "remove": "Remove",
     "save": "Save",
-    "parameter": "Parameter N°{{index}}"
+    "parameter": "Parameter N°{{index}}",
+    "create": "Create",
+    "close": "Close"
   }
 }

src/FaasNet.Website/src/stores/functions/actions/function.actions.ts

@@ -17,3 +17,6 @@ export const errorGet = createAction('[Functions] ERROR_GET_FUNCTION');
 export const startDelete = createAction('[Functions] START_DELETE_FUNCTION', props<{ name: string }>());
 export const completeDelete = createAction('[Functions] COMPLETE_DELETE_FUNCTION');
 export const errorDelete = createAction('[Functions] ERROR_DELETE_FUNCTION');
+export const startAdd = createAction('[Functions] START_ADD_FUNCTION', props<{ name: string, image: string }>());
+export const completeAdd = createAction('[Functions] COMPLETE_ADD_FUNCTION', props<{ name: string, image: string }>());
+export const errorAdd = createAction('[Functions] ERROR_ADD_FUNCTION');

src/FaasNet.Website/src/stores/functions/effects/function.effects.ts

@@ -3,11 +3,12 @@ import { Actions, Effect, ofType } from '@ngrx/effects';
 import { of } from 'rxjs';
 import { catchError, map, mergeMap } from 'rxjs/operators';
 import {
+    completeAdd,
     completeDelete,
     completeGet,
     completeGetConfiguration,
     completeInvoke,
-    completeSearch, errorDelete, errorGet, errorGetConfiguration, errorInvoke, errorSearch, startDelete, startGet, startGetConfiguration, startInvoke, startSearch
+    completeSearch, errorAdd, errorDelete, errorGet, errorGetConfiguration, errorInvoke, errorSearch, startAdd, startDelete, startGet, startGetConfiguration, startInvoke, startSearch
 } from '../actions/function.actions';
 import { FunctionService } from '../services/function.service';
 
@@ -86,5 +87,19 @@ export class FunctionEffects {
           );
       }
       )
+  );
+
+  @Effect()
+  addFunction$ = this.actions$
+    .pipe(
+      ofType(startAdd),
+      mergeMap((evt: { name: string, image: string }) => {
+        return this.applicationService.add(evt.name, evt.image)
+          .pipe(
+            map(content => completeAdd({ name: evt.name, image: evt.image })),
+            catchError(() => of(errorAdd()))
+          );
+      }
+      )
     );
 }

src/FaasNet.Website/src/stores/functions/reducers/index.ts

@@ -44,7 +44,7 @@ const functionReducer = createReducer(
       ...state,
       Function: { ...content }
     };
-  }),
+  })
 );
 
 export function getSearchFunctionsReducer(state: SearchFunctionsState | undefined, action: Action) {