X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=blobdiff_plain;f=webapp-frontend%2Fsrc%2Fapp%2Fpolicy%2Fpolicy-instance-dialog%2Fpolicy-instance-dialog.component.ts;h=8750d429180dde65547deb4ea4c4b10488175449;hb=HEAD;hp=a703634dfc39960d6d00ad42565611c45d92f2fe;hpb=c43690c45b3f4d08d013ec488b83dea793cca646;p=portal%2Fnonrtric-controlpanel.git diff --git a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts index a703634..8750d42 100644 --- a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts +++ b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts @@ -2,7 +2,7 @@ * ========================LICENSE_START================================= * O-RAN-SC * %% - * Copyright (C) 2019 Nordix Foundation + * Copyright (C) 2020 Nordix Foundation * %% * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -17,244 +17,128 @@ * limitations under the License. * ========================LICENSE_END=================================== */ -import { animate, state, style, transition, trigger } from '@angular/animations'; -import { AfterViewInit, Component, Inject, OnInit, ViewChild } from '@angular/core'; -import { MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; -import { MatMenuTrigger } from '@angular/material/menu'; -import { JsonPointer } from 'angular6-json-schema-form'; -import * as uuid from 'uuid'; -import { CreatePolicyInstance, PolicyInstance, PolicyTypeSchema } from '../../interfaces/policy.types'; -import { PolicyService } from '../../services/policy/policy.service'; -import { ErrorDialogService } from '../../services/ui/error-dialog.service'; -import { NotificationService } from './../../services/ui/notification.service'; -import { UiService } from '../../services/ui/ui.service'; -import { HttpErrorResponse } from '@angular/common/http'; -import { FormGroup, FormControl, Validators } from '@angular/forms'; -import { ChangeDetectorRef } from '@angular/core'; -import { Ric, Rics } from '../../interfaces/ric'; - +import { + AfterViewInit, + ChangeDetectorRef, + Component, + Inject, + OnInit, +} from "@angular/core"; +import { + MatDialogConfig, + MatDialogRef, + MAT_DIALOG_DATA, +} from "@angular/material/dialog"; +import { PolicyService } from "@services/policy/policy.service"; +import { NotificationService } from "@services/ui/notification.service"; +import { UiService } from "@services/ui/ui.service"; +import * as uuid from "uuid"; +import { + CreatePolicyInstance, + PolicyInstance, + PolicyTypeSchema, +} from "@interfaces/policy.types"; @Component({ - selector: 'nrcp-policy-instance-dialog', - templateUrl: './policy-instance-dialog.component.html', - styleUrls: ['./policy-instance-dialog.component.scss'], - animations: [ - trigger('expandSection', [ - state('in', style({ height: '*' })), - transition(':enter', [ - style({ height: 0 }), animate(100), - ]), - transition(':leave', [ - style({ height: '*' }), - animate(100, style({ height: 0 })), - ]), - ]), - ], + selector: "nrcp-policy-instance-dialog", + templateUrl: "./policy-instance-dialog.component.html", + styleUrls: ["./policy-instance-dialog.component.scss"], }) export class PolicyInstanceDialogComponent implements OnInit, AfterViewInit { - instanceForm: FormGroup; - - - formActive = false; - isVisible = { - form: true, - json: false, - schema: false - }; - - jsonFormStatusMessage = 'Loading form...'; - jsonSchemaObject: any = {}; - jsonObject: any = {}; - - - jsonFormOptions: any = { - addSubmit: false, // Add a submit button if layout does not have one - debug: false, // Don't show inline debugging information - loadExternalAssets: true, // Load external css and JavaScript for frameworks - returnEmptyFields: false, // Don't return values for empty input fields - setSchemaDefaults: true, // Always use schema defaults for empty fields - defautWidgetOptions: { feedback: true }, // Show inline feedback icons - }; - - liveFormData: any = {}; - formValidationErrors: any; - formIsValid = false; - - @ViewChild(MatMenuTrigger, { static: true }) menuTrigger: MatMenuTrigger; - - policyInstanceId: string; // null if not yet created - policyTypeName: string; - darkMode: boolean; - ric: string; - allRics: Ric[]; - - private fetchRics() { - console.log('fetchRics ' + this.policyTypeName); - const self: PolicyInstanceDialogComponent = this; - this.dataService.getRics(this.policyTypeName).subscribe( - { - next(value: Rics) { - self.allRics = value.rics; - console.log(value); - } - }); - } - - constructor( - private cdr: ChangeDetectorRef, - private dataService: PolicyService, - private errorService: ErrorDialogService, - private notificationService: NotificationService, - @Inject(MAT_DIALOG_DATA) private data, - private dialogRef: MatDialogRef, - private ui: UiService) { - this.formActive = false; - this.policyInstanceId = data.instanceId; - this.policyTypeName = data.name; - this.jsonSchemaObject = data.createSchema; - this.jsonObject = data.instanceJson; - this.ric = data.ric; - } - - ngOnInit() { - this.jsonFormStatusMessage = 'Init'; - this.formActive = true; - this.ui.darkModeState.subscribe((isDark) => { - this.darkMode = isDark; - }); - this.instanceForm = new FormGroup({ - 'ricSelector': new FormControl(this.ric, [ - Validators.required - ]) - }); - if (!this.policyInstanceId) { - this.fetchRics(); - } - } - - ngAfterViewInit() { - this.cdr.detectChanges(); - } - - get ricSelector() { return this.instanceForm.get('ricSelector'); } - - onSubmit() { - if (this.policyInstanceId == null) { - this.policyInstanceId = uuid.v4(); - } - const policyJson: string = this.prettyLiveFormData; - const self: PolicyInstanceDialogComponent = this; - let createPolicyInstance: CreatePolicyInstance = this.createPolicyInstance(policyJson); - this.dataService.putPolicy(createPolicyInstance).subscribe( - { - next(_) { - self.notificationService.success('Policy ' + self.policyTypeName + ':' + self.policyInstanceId + - ' submitted'); - self.dialogRef.close(); - }, - error(error: HttpErrorResponse) { - self.errorService.displayError('Submit failed: ' + error.error); - }, - complete() { } - }); - } - - private createPolicyInstance(policyJson: string) { - let createPolicyInstance = {} as CreatePolicyInstance; - createPolicyInstance.policy_data = JSON.parse(policyJson); - createPolicyInstance.policy_id = this.policyInstanceId; - createPolicyInstance.policytype_id = this.policyTypeName; - createPolicyInstance.ric_id = (!this.ricSelector.value.ric_id) ? this.ric : this.ricSelector.value.ric_id; - createPolicyInstance.service_id = 'controlpanel'; - return createPolicyInstance; - } - - onClose() { - this.dialogRef.close(); - } - - public onChanges(formData: any) { - this.liveFormData = formData; - } - - get prettyLiveFormData(): string { - return JSON.stringify(this.liveFormData, null, 2); - } - - get schemaAsString(): string { - return JSON.stringify(this.jsonSchemaObject, null, 2); - } - - get jsonAsString(): string { - return JSON.stringify(this.jsonObject, null, 2); - } - - isValid(isValid: boolean): void { - this.formIsValid = isValid; - } - - validationErrors(validationErrors: any): void { - this.formValidationErrors = validationErrors; - } - - get prettyValidationErrors() { - if (!this.formValidationErrors) { return null; } - const errorArray = []; - for (const error of this.formValidationErrors) { - const message = error.message; - const dataPathArray = JsonPointer.parse(error.dataPath); - if (dataPathArray.length) { - let field = dataPathArray[0]; - for (let i = 1; i < dataPathArray.length; i++) { - const key = dataPathArray[i]; - field += /^\d+$/.test(key) ? `[${key}]` : `.${key}`; - } - errorArray.push(`${field}: ${message}`); - } else { - errorArray.push(message); - } - } - return errorArray.join('
'); - } - - private parseJson(str: string): string { - try { - if (str != null) { - return JSON.parse(str); - } - } catch (jsonError) { - this.jsonFormStatusMessage = - 'Invalid JSON\n' + - 'parser returned:\n\n' + jsonError; - } - return null; - } - - public toggleVisible(item: string) { - this.isVisible[item] = !this.isVisible[item]; - } + policyInstance = {} as CreatePolicyInstance; + policyJson: string; + jsonSchemaObject: any; + darkMode: boolean; + allRicIds: string[] = []; + + constructor( + private cdr: ChangeDetectorRef, + public dialogRef: MatDialogRef, + private policySvc: PolicyService, + private notificationService: NotificationService, + @Inject(MAT_DIALOG_DATA) private data, + private ui: UiService + ) { + this.policyInstance.policy_id = data.instanceId; + this.policyInstance.policytype_id = data.name ? data.name : ""; + this.policyInstance.policy_data = data.instanceJson; + this.policyJson = data.instanceJson; + this.jsonSchemaObject = data.createSchema; + this.policyInstance.ric_id = data.ric; + this.policyInstance.service_id = "controlpanel"; + } + + ngOnInit() { + this.ui.darkModeState.subscribe((isDark) => { + this.darkMode = isDark; + }); + } + + // Do not remove! Needed to avoid "Expression has changed after it was checked" warning + ngAfterViewInit() { + this.cdr.detectChanges(); + } + + onSelectedRicChanged(newRic: string): void { + this.policyInstance.ric_id = newRic; + } + + onJsonChanged(newJson: string): void { + this.policyInstance.policy_data = newJson ? JSON.parse(newJson) : null; + } + + onSubmit() { + if (this.policyInstance.policy_id == null) { + this.policyInstance.policy_id = uuid.v4(); + } + const self: PolicyInstanceDialogComponent = this; + this.policySvc.putPolicy(this.policyInstance).subscribe({ + next(_) { + self.notificationService.success( + "Policy " + self.policyInstance.policy_id + " submitted" + ); + self.dialogRef.close("ok"); + }, + complete() {}, + }); + } + + typeHasSchema(): boolean { + return this.jsonSchemaObject.description ? true : false; + } + + isFormValid(): boolean { + return ( + this.policyInstance.ric_id !== null && + this.policyInstance.policy_data !== null + ); + } } -export function getPolicyDialogProperties(policyTypeSchema: PolicyTypeSchema, instance: PolicyInstance, darkMode: boolean): MatDialogConfig { - const createSchema = policyTypeSchema.schemaObject; - const instanceId = instance ? instance.policy_id : null; - const instanceJson = instance ? instance.policy_data : null; - const name = policyTypeSchema.name; - const ric = instance ? instance.ric_id : null; - return { - maxWidth: '1200px', - maxHeight: '900px', - width: '900px', - role: 'dialog', - disableClose: false, - panelClass: darkMode ? 'dark-theme' : '', - data: { - createSchema, - instanceId, - instanceJson, - name, - ric - } - }; +export function getPolicyDialogProperties( + policyTypeSchema: PolicyTypeSchema, + instance: PolicyInstance, + darkMode: boolean +): MatDialogConfig { + const createSchema = policyTypeSchema.schemaObject; + const instanceId = instance ? instance.policy_id : null; + const instanceJson = instance ? instance.policy_data : null; + const name = policyTypeSchema.name; + const ric = instance ? instance.ric_id : null; + const data = { + maxWidth: "1200px", + maxHeight: "900px", + width: "900px", + role: "dialog", + disableClose: false, + panelClass: darkMode ? "dark-theme" : "", + data: { + createSchema, + instanceId, + instanceJson, + name, + ric, + }, + } as MatDialogConfig; + return data; } -