improve dashboard UI

[portal/ric-dashboard.git] / webapp-frontend / src / app / ac-xapp / ac-xapp.component.ts

diff --git a/webapp-frontend/src/app/ac-xapp/ac-xapp.component.ts b/webapp-frontend/src/app/ac-xapp/ac-xapp.component.ts
index f85f18e..1f1d61e 100644 (file)
--- a/webapp-frontend/src/app/ac-xapp/ac-xapp.component.ts
+++ b/webapp-frontend/src/app/ac-xapp/ac-xapp.component.ts
@@ -19,21 +19,22 @@
  */
 
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Subscription } from 'rxjs';
 import { ACAdmissionIntervalControl } from '../interfaces/ac-xapp.types';
+import { RicInstance } from '../interfaces/dashboard.types';
 import { ACXappService } from '../services/ac-xapp/ac-xapp.service';
-import { ErrorDialogService } from '../services/ui/error-dialog.service';
-import { NotificationService } from './../services/ui/notification.service';
-import { Subscription } from 'rxjs';
 import { InstanceSelectorService } from '../services/instance-selector/instance-selector.service';
+import { ErrorDialogService } from '../services/ui/error-dialog.service';
+import { NotificationService } from '../services/ui/notification.service';
 
 @Component({
   selector: 'rd-ac-xapp',
   templateUrl: './ac-xapp.component.html',
   styleUrls: ['./ac-xapp.component.scss']
 })
-export class AcXappComponent implements OnInit {
+export class AcXappComponent implements OnInit, OnDestroy {
 
   private acForm: FormGroup;
   private instanceChange: Subscription;
@@ -46,23 +47,21 @@ export class AcXappComponent implements OnInit {
     public instanceSelectorService: InstanceSelectorService, ) { }
 
   ngOnInit() {
-    const windowLengthPattern = /^([0-9]{1}|[1-5][0-9]{1}|60)$/;
-    const blockingRatePattern = /^([0-9]{1,2}|100)$/;
-    const triggerPattern = /^([0-9]+)$/;
-
     this.acForm = new FormGroup({
       // Names must match the ACAdmissionIntervalControl interface
       enforce: new FormControl(true, [Validators.required]),
-      window_length: new FormControl('', [Validators.required, Validators.pattern(windowLengthPattern)]),
-      blocking_rate: new FormControl('', [Validators.required, Validators.pattern(blockingRatePattern)]),
-      trigger_threshold: new FormControl('', [Validators.required, Validators.pattern(triggerPattern)])
+      class: new FormControl('', [Validators.required, Validators.min(1), Validators.max(256)]),
+      window_length: new FormControl('', [Validators.required, Validators.min(15), Validators.max(300)]),
+      blocking_rate: new FormControl('', [Validators.required, Validators.min(0), Validators.max(100)]),
+      trigger_threshold: new FormControl('', [Validators.required, Validators.min(1)])
     });
 
-    this.instanceChange = this.instanceSelectorService.getSelectedInstancekey().subscribe((instanceKey: string) => {
-      if (instanceKey) {
+    this.instanceChange = this.instanceSelectorService.getSelectedInstance().subscribe((instance: RicInstance) => {
+      if (instance.key) {
         // TODO: show pending action indicator
-        this.instanceKey = instanceKey;
-        this.acXappService.getPolicy(instanceKey).subscribe((res: ACAdmissionIntervalControl) => {
+        this.instanceKey = instance.key;
+        this.acXappService.getPolicy(instance.key).subscribe((res: ACAdmissionIntervalControl) => {
+          this.acForm.controls['class'].setValue(res.class);
           this.acForm.controls['enforce'].setValue(res.enforce);
           this.acForm.controls['window_length'].setValue(res.window_length);
           this.acForm.controls['blocking_rate'].setValue(res.blocking_rate);
@@ -74,7 +73,7 @@ export class AcXappComponent implements OnInit {
             this.errorDialogService.displayError(error.message);
           });
       }
-    })
+    });
   }
 
   ngOnDestroy() {
@@ -85,6 +84,7 @@ export class AcXappComponent implements OnInit {
     if (this.acForm.valid) {
       // convert strings to numbers using the plus operator
       const acFormValueConverted = {
+        class: +acFormValue.class,
         enforce: acFormValue.enforce,
         window_length: +acFormValue.window_length,
         blocking_rate: +acFormValue.blocking_rate,