From 3f7386d4245f9a05db961440ebf80d97d788f902 Mon Sep 17 00:00:00 2001 From: Sudarshan Kumar Date: Fri, 31 Jan 2020 20:08:08 +0530 Subject: Added portal-FE-os components Removed layout from portal-FE-os and added new components in portal-fe-os Issue-ID: PORTAL-795 Change-Id: I3d7f93fa22a7935f9e73ed96802495019aabc129 Signed-off-by: Sudarshan Kumar --- .../application-details-dialog.component.html | 275 +++++++++++++++ .../application-details-dialog.component.scss | 163 +++++++++ .../application-details-dialog.component.spec.ts | 63 ++++ .../application-details-dialog.component.ts | 380 +++++++++++++++++++++ .../application-onboarding.component.html | 144 ++++++++ .../application-onboarding.component.scss | 59 ++++ .../application-onboarding.component.spec.ts | 63 ++++ .../application-onboarding.component.ts | 188 ++++++++++ 8 files changed, 1335 insertions(+) create mode 100644 portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html create mode 100644 portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.scss create mode 100644 portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.spec.ts create mode 100644 portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.ts create mode 100644 portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.html create mode 100644 portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.scss create mode 100644 portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.spec.ts create mode 100644 portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.ts (limited to 'portal-FE-os/src/app/pages/application-onboarding') diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html new file mode 100644 index 00000000..bef37b84 --- /dev/null +++ b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html @@ -0,0 +1,275 @@ + + +
+ +
+

Application Details

+ +
+ +
+
+
+
+
+
+ + Hyperlink only application + +
+ +
+
Application Name
+ + +
+ + +
+ +
+ + Application name is required + +
+
+ +
+
URL
+ + +
+ + Application URL is required + +
+
+ +
+
Rest API URL
+ + +
+ + Rest API URL is required + +
+
+ +
+
Username
+ + +
+ + App Username is required + +
+
+ +
+
Password
+ + +
+ + Password is required + +
+
+
+ + +
+
+
Upload Image
+ + +
+
+ File must be an image +
+
+ +
+
+ Image file must be smaller than + 1MB +
+
+ +
+ Preview + Remove +
+ + +
+
+ Active + +
+ +
+ Allow guest access +
+ +
+
+ + Centralized + +
+ +
+
+
+
+ + +
+
+ +
+
+
Application UUID
+ +
+ +
+
+
+
+ +
+
+ +
+ +
+
Name Space
+ +
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+   + +
+
\ No newline at end of file diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.scss b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.scss new file mode 100644 index 00000000..0e042a96 --- /dev/null +++ b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.scss @@ -0,0 +1,163 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ + +.application-details-modal .app-properties-mainapp-properties-main{ + padding-left: 40px; + padding-top: 16px; + padding-bottom: 16px; +} + +.application-details-modal .app-properties-main .left-container{ + display: inline-block; + width: 48%; + +} + +.application-details-modal .app-properties-main .right-container{ + display: inline-block; + width: 48%; + float: right; + margin-right:10px; + +} + +.application-details-modal .app-properties-main .property{ + position: relative; + margin-bottom: 18px; +} +.application-details-modal .app-properties-main .checkbox-label{ + display: inline-block; + padding-left: 3px; +} +.application-details-modal .app-properties-main .checkbox-field{ + padding: 0; + margin: 0; + vertical-align: middle; + position: relative; + top: -1px; +} +.application-details-modal .app-properties-main .preview{ + width: 220px; + margin-top: 22px; + display: block; +} + +.application-details-modal .app-properties-main .left-label{ + display:inline-block; + float: left; +} +.application-details-modal .app-properties-main .remove{ + cursor: pointer; + display: inline-block; + float: right; +} + +.application-details-modal .app-properties-main .input-field{ + width: 220px; +} + +.application-details-modal .app-properties-main .input-file-field{ + width: 220px; + border: 0px solid #d2d2d2; + box-shadow: 0px 0px 2px -2px rgba(0, 0, 0, 0.08) inset; + padding-left: 2px; +} + +.application-details-modal .app-properties-main .image-preview{ + background: gray; + background-size: cover; + width: 220px; + height: 184px; + margin-top: 10px; + border: 2px solid #e8e8e8; + border-radius: 4px; +} + +.application-details-modal .app-properties-main .error-container{ + position: absolute; + width: 220px; + display: block; + height: 12px; + line-height: 12px; +} + +.application-details-modal .app-properties-main .err-message{ + font-size: 10px; +} + +.application-details-modal .app-properties-main .checkbox .skin { + left: 0px; + top: 0px; +} + +.application-details-modal input[type="text"] { + width: 16em; +} + +.application-details-modal input[type="url"] { + width: 16em; +} + +.application-details-modal input[type="number"] { + width: 16em; +} + +.application-details-modal input[type="password"] { + width: 16em; +} + +::ng-deep .modal-dialog { + max-width: 700px; + width: 630px; + overflow-x: auto; + overflow-y: auto; +} + +.required::before { + color: rgb(207, 42, 42); + margin-right: 2px; + content: "* "; + position: absolute; + top: 28px; + left: -10px; +} +.remove{ + cursor: pointer; + color: #007bff; +} + \ No newline at end of file diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.spec.ts b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.spec.ts new file mode 100644 index 00000000..0ea27629 --- /dev/null +++ b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.spec.ts @@ -0,0 +1,63 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ApplicationDetailsDialogComponent } from './application-details-dialog.component'; + +describe('ApplicationDetailsDialogComponent', () => { + let component: ApplicationDetailsDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ApplicationDetailsDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ApplicationDetailsDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.ts b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.ts new file mode 100644 index 00000000..60654461 --- /dev/null +++ b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.ts @@ -0,0 +1,380 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ + +import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; +import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { IApplications } from 'src/app/shared/model/applications-onboarding/applications'; +import { ApplicationsService } from 'src/app/shared/services'; +import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component'; +import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component'; + +@Component({ + selector: 'app-application-details-dialog', + templateUrl: './application-details-dialog.component.html', + styleUrls: ['./application-details-dialog.component.scss'], +}) +export class ApplicationDetailsDialogComponent implements OnInit { + + emptyImg = null; + emptyImgForPreview:string; + conflictMessages = {}; + result: any; + isEditMode: boolean = false; + appImageTypeError: boolean = false; + isSaving: boolean = false; + originalImage: any; + ECOMP_URL_REGEX = "/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i"; + + constructor(public activeModal: NgbActiveModal, public ngbModal: NgbModal, + public applicationsService : ApplicationsService) { } + + @Input() applicationObj: IApplications; + @Output() passEntry: EventEmitter = new EventEmitter(); + + newAppModel = { + 'id': null, + 'name': null, + 'imageUrl': null, + 'description': null, + 'notes': null, + 'url': null, + 'alternateUrl': null, + 'restUrl': null, + 'isOpen': false, + 'username': null, + 'appPassword': null, + 'thumbnail': this.emptyImg, + 'isEnabled': false, + 'restrictedApp': false, + 'nameSpace':null, + 'isCentralAuth': false, + 'uebTopicName':null, + 'uebKey': null, + 'uebSecret': null, + 'imageLink': null + }; + + + ngOnInit() { + if(this.applicationObj.id){ + this.isEditMode = true; + }else{ + this.isEditMode = false; + } + //console.log("isEditMode :: ",this.isEditMode); + this.originalImage = null + this.emptyImgForPreview = '../../../assets/images/default_app_image.gif'; + } + + appImageHandler(event: any){ + var reader = new FileReader(); + if(event.target.files && event.target.files[0]){ + reader.readAsDataURL(event.target.files[0]); // read file as data url + var fileName = event.target.files[0].name; + var validFormats = ['jpg', 'jpeg', 'bmp', 'gif', 'png']; + //Get file extension + var ext = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase(); + //console.log("fileName::>>",fileName ,ext) + //console.log("fileExtetion::>>",ext) + //Check for valid format + if(validFormats.indexOf(ext) == -1){ + this.newAppModel.thumbnail = this.emptyImg; + this.originalImage = null; + this.applicationObj.imageUrl = null; + this.applicationObj.imageLink = null; + this.applicationObj.thumbnail = null; + if(!this.isEditMode){ + this.newAppModel.imageUrl = null; + this.newAppModel.imageLink = null; + this.newAppModel.thumbnail = null; + } + this.appImageTypeError=true; + }else{ + reader.onload = (event: any) => { // called once readAsDataURL is completed + this.applicationObj.imageLink = event.target.result; + this.applicationObj.imageUrl = event.target.result; + this.applicationObj.thumbnail = event.target.result; + this.originalImage = event.target.result; + if(!this.isEditMode){ + this.newAppModel.imageLink = event.target.result; + this.newAppModel.imageUrl = event.target.result; + this.newAppModel.thumbnail = event.target.result; + this.originalImage = event.target.result; + } + } + } + } + } + + removeImage(){ + let confirmationMsg = 'Are you sure you want to remove the image?'; + this.openInformationModal("Confirmation",confirmationMsg).result.then((result) => { + if (result === 'Ok') { + //this.imageApi.clearFile(); + this.applicationObj.thumbnail = this.emptyImg; + this.originalImage = null; + this.applicationObj.imageUrl = null; + this.applicationObj.imageLink = null; + this.emptyImgForPreview = '../../../assets/images/default_app_image.gif'; + } + }, (resut) => { + return; + }) + } + + /** Add/Edit Application Method*/ + saveChanges() { + //console.log("addNewApplication getting called.."); + if(this.applicationObj.isCentralAuth){ + //if valid. + if(!this.applicationObj.isEnabled){ + if(((this.applicationObj.name == 'undefined' || !this.applicationObj.name)||(this.applicationObj.nameSpace == 'undefined' + || !this.applicationObj.nameSpace) ||(this.applicationObj.username == 'undefined' || !this.applicationObj.username))) { + this.openConfirmationModal('','Please fill in all required fields(*) for centralized application'); + return; + } + } + if(this.applicationObj.isEnabled){ + if(((this.applicationObj.name == 'undefined' || !this.applicationObj.name) + ||(this.applicationObj.url == 'undefined'|| !this.applicationObj.url) + ||(this.applicationObj.username == 'undefined' || !this.applicationObj.username)||(this.applicationObj.nameSpace == 'undefined' + || !this.applicationObj.nameSpace))) { + + this.openConfirmationModal('','Please fill in all required fields(*) for centralized active application'); + return; + } + } + }else{ + if(!this.applicationObj.isEnabled) { + if((this.applicationObj.name == 'undefined' || !this.applicationObj.name)){ + this.openConfirmationModal('','Please fill in all required field(*) ApplicationName to Save the applictaion'); + return; + } + }else if(this.applicationObj.isEnabled && !this.applicationObj.restrictedApp){ + if((this.applicationObj.name == 'undefined' || !this.applicationObj.name) + ||(this.applicationObj.url == 'undefined'|| !this.applicationObj.url) + ||(this.applicationObj.username == 'undefined' || !this.applicationObj.username)|| + (this.applicationObj.appPassword== 'undefined' || !this.applicationObj.appPassword)) { + + this.openConfirmationModal('','Please fill in all required fields(*) along with password as the app is not centralized'); + return; + } + }else if(this.applicationObj.isEnabled && this.applicationObj.restrictedApp){ + if((this.applicationObj.name == 'undefined' || !this.applicationObj.name) ||(this.applicationObj.url == 'undefined' + || !this.applicationObj.url)){ + this.openConfirmationModal('','Please fill in all required fields(*)'); + return; + } + } + } + + //URL Validation + if(this.applicationObj.isEnabled){ + if(this.applicationObj.url && this.applicationObj.url !='undefined' && this.applicationObj.url != ''){ + let isValidURL = this.isUrlValid(this.applicationObj.url); + if(!isValidURL){ + this.openConfirmationModal('Error','Application URL must be a valid URL.'); + return; + } + }else{ + this.openConfirmationModal('Error','Application URL is required.'); + return; + } + } + + + this.isSaving = true; + // For a restricted app, null out all irrelevant fields + if(this.applicationObj.restrictedApp) { + this.newAppModel.restUrl = null; + this.newAppModel.isOpen = true; + this.newAppModel.username = null; + this.newAppModel.appPassword = null; + this.newAppModel.uebTopicName = null; + this.newAppModel.uebKey = null; + this.newAppModel.uebSecret = null; + + /**Need to set below fields values based on input provided in the dialog */ + this.newAppModel.restrictedApp = this.applicationObj.restrictedApp; + this.newAppModel.name = this.applicationObj.name; + this.newAppModel.url = this.applicationObj.url; + if(this.applicationObj.isEnabled){ + this.newAppModel.isEnabled = this.applicationObj.isEnabled; + }else{ + this.newAppModel.isEnabled = false; + } + + }else{ + + /**Need to set below fields values based on input provided in the dialog */ + this.newAppModel.restrictedApp = false; + this.newAppModel.name = this.applicationObj.name; + this.newAppModel.url = this.applicationObj.url; + this.newAppModel.restUrl = this.applicationObj.restUrl; + this.newAppModel.username = this.applicationObj.username; + this.newAppModel.appPassword = this.applicationObj.appPassword; + + if(this.applicationObj.isEnabled){ + this.newAppModel.isEnabled = this.applicationObj.isEnabled; + }else{ + this.newAppModel.isEnabled = false; + } + + if(this.applicationObj.isOpen){ + this.newAppModel.isOpen = this.applicationObj.isOpen; + }else{ + this.newAppModel.isOpen = false; + } + //console.log("this.applicationObj.isOpen",this.applicationObj.isOpen); + + if(this.applicationObj.isCentralAuth){ + this.newAppModel.isCentralAuth = this.applicationObj.isCentralAuth; + }else{ + this.newAppModel.isCentralAuth = false; + } + + } + + if (this.applicationObj.nameSpace=="") { + this.newAppModel.nameSpace = null; + } + + if(this.isEditMode){ + this.applicationsService.updateOnboardingApp(this.applicationObj) + .subscribe( _data => { + this.result = _data; + //console.log("update application response :: ",this.result); + if(this.result !=null && this.result.httpStatusCode ==200){ + this.passEntry.emit(this.result); + this.ngbModal.dismissAll(); + }else{ + this.openConfirmationModal('Error','There was a problem updating the application changes. Please try again. If the problem persists, then try again later. Error: '+this.result); + return + } + }, error => { + console.log(error); + if(error.status == 409){ + this.openConfirmationModal('Error', 'There was a problem updating the application changes. ' + + 'The Application Name and URL should be unique. Error: ' + + error.status); + return; + }else if(error.status == 500){ + this.openConfirmationModal('Error', 'There was a problem updating the application information. ' + + 'Please try again later. Error: ' +error.status); + return; + }else if(error.status == 404 || error.status == 403){ + this.openConfirmationModal('Error', 'There was a problem updating the application information. ' + + 'Invalid namespace. Error: ' +error.status); + return; + }else if(error.status == 401){ + this.openConfirmationModal('Error', 'There was a problem updating the application information. ' + + 'Portal Mechid is unauthorized to access the given namespace. Error: ' +error.status); + return; + }else if(error.status == 400){ + this.openConfirmationModal('Error','Bad Request Error: ' + error.status); + return; + } else{ + this.openConfirmationModal('Error', 'There was a problem updating the application changes. ' + + 'Please try again. If the problem persists, then try again later. Error: ' + + error.status); + return; + } + }); + + }else{ + //console.log("Coming inside add application",this.newAppModel); + + this.applicationsService.addOnboardingApp(this.newAppModel) + .subscribe( _data => { + this.result = _data; + //console.log("Add application response :: ",this.result); + if(this.result !=null && this.result.httpStatusCode ==200){ + this.passEntry.emit(this.result); + this.ngbModal.dismissAll(); + }else{ + this.openConfirmationModal('Error','There was a problem adding the application changes. Please try again. If the problem persists, then try again later. Error: '+this.result); + return + } + }, error => { + console.log(error); + if(error.status == 409){ + this.openConfirmationModal('Error', 'There was a problem adding the application changes. ' + + 'The Application Name and URL should be unique. Error: ' + + error.status); + return; + } else if(error.status == 500){ + this.openConfirmationModal('Error', 'There was a problem adding the application information. ' + + 'Please try again later. Error: ' +error.status); + return; + }else if(error.status == 400){ + this.openConfirmationModal('Error','Bad Request Error: ' + error.status); + return; + } else{ + this.openConfirmationModal('Error', 'There was a problem adding the application changes. ' + + 'Please try again. If the problem persists, then try again later. Error: ' + + error.status); + return; + } + }); + } + } + + isUrlValid(userInput){ + //let regexQuery = "/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i"; + let regexQuery = "https?://.+"; + let res = userInput.match(regexQuery); + if(res == null){ + return false; + }else{ + return true; + } + } + + openConfirmationModal(_title: string, _message: string) { + const modalInfoRef = this.ngbModal.open(ConfirmationModalComponent); + modalInfoRef.componentInstance.title = _title; + modalInfoRef.componentInstance.message = _message; + } + + openInformationModal(_title: string, _message: string){ + const modalInfoRef = this.ngbModal.open(InformationModalComponent); + modalInfoRef.componentInstance.title = _title; + modalInfoRef.componentInstance.message = _message; + return modalInfoRef; + } +} diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.html b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.html new file mode 100644 index 00000000..8a678917 --- /dev/null +++ b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.html @@ -0,0 +1,144 @@ + + +
+
+
+
+

Application Onboarding

+
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Thumbnail +
+ 		Application Name {{element.name}} Active {{(element.isEnabled) ? 'yes' : 'no'}} Integration Type {{(element.restrictedApp) ? 'link' : 'standard'}} Guest Access {{(element.isOpen) ? 'yes' : 'no'}} Url {{element.url}} REST Url {{element.restUrl}} Communication Key {{element.uebKey}} Application Namespace {{element.nameSpace}} Central Auth Access {{(element.isCentralAuth) ? 'yes' : 'no'}} Delete + + + +
+ +
+
+
+
\ No newline at end of file diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.scss b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.scss new file mode 100644 index 00000000..6bca524d --- /dev/null +++ b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.scss @@ -0,0 +1,59 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ + + +.container{ + overflow-y: auto; +} + +.container .apps-table .small-thumbnail { + width: 72px; + height: 60px; + border: 1px solid#d2d2d2; + border-radius: 2px; +} + +.container .apps-table th{ + padding-bottom: 15px; + padding-right: 40px; + font-weight: bold; +} + +.ion-md-trash{ + cursor: pointer; +} \ No newline at end of file diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.spec.ts b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.spec.ts new file mode 100644 index 00000000..8e198387 --- /dev/null +++ b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.spec.ts @@ -0,0 +1,63 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ApplicationOnboardingComponent } from './application-onboarding.component'; + +describe('ApplicationOnboardingComponent', () => { + let component: ApplicationOnboardingComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ApplicationOnboardingComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ApplicationOnboardingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.ts b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.ts new file mode 100644 index 00000000..8cbf1d28 --- /dev/null +++ b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.ts @@ -0,0 +1,188 @@ +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. + * =================================================================== + * + * Unless otherwise specified, all software contained herein is licensed + * under the Apache License, Version 2.0 (the "License"); + * you may not use this software except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * Unless otherwise specified, all documentation contained herein is licensed + * under the Creative Commons License, Attribution 4.0 Intl. (the "License"); + * you may not use this documentation except in compliance with the License. + * You may obtain a copy of the License at + * + * https://creativecommons.org/licenses/by/4.0/ + * + * Unless required by applicable law or agreed to in writing, documentation + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * ============LICENSE_END============================================ + * + * + */ + +import { Component, OnInit, ViewChild, Input} from '@angular/core'; +import { MatTableDataSource } from '@angular/material'; +import { MatSort, MatPaginator } from '@angular/material'; +import { ApplicationsService } from '../../shared/services/index'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { IApplications } from 'src/app/shared/model/applications-onboarding/applications'; +import { environment } from '../../../environments/environment'; +import { ApplicationDetailsDialogComponent } from './application-details-dialog/application-details-dialog.component'; +import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component'; +import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component'; + +@Component({ + selector: 'app-application-onboarding', + templateUrl: './application-onboarding.component.html', + styleUrls: ['./application-onboarding.component.scss'] +}) +export class ApplicationOnboardingComponent implements OnInit { + + api = environment.api; + appsList: Array = []; + result: any; + isEditMode: boolean = false; + emptyImgForPreview: string; + isUserSuperAdmin: boolean = false; + displayedColumns: string[] = ['thumbnail', 'applicationName','active', + 'integrationType', 'guestAccess', 'url','restURL', + 'communicationKey', 'applicationNamespace', 'centralAuthAccess']; + dataSource = new MatTableDataSource(this.appsList); + @ViewChild(MatSort) sort: MatSort; + @ViewChild(MatPaginator) paginator: MatPaginator; + + constructor(public applicationsService: ApplicationsService, public ngbModal: NgbModal) { } + + ngOnInit() { + this.emptyImgForPreview = '../../../assets/images/default_app_image.gif'; + this.checkIfUserIsSuperAdmin(); + this.getOnboardingApps(); + } + + getOnboardingApps(){ + //console.log("getOnboardingApps called"); + this.applicationsService.getOnboardingApps() + .subscribe(_data => { + this.result = _data; + if (this.result == null || this.result == 'undefined') { + console.log('WidgetOnboardingService::getOnboardingWidgets Failed: Result or result.data is null'); + }else { + this.appsList = _data; + for (var i = 0; i < this.appsList.length; i++) { + this.appsList[i].imageLink = ''; + if (this.appsList[i].imageUrl){ + this.appsList[i].imageLink = this.api.appThumbnail.replace(':appId', this.appsList[i].id); + this.appsList[i].imageLink = this.appsList[i].imageLink+'?' + new Date().getTime(); + }else{ + this.appsList[i].imageLink = this.emptyImgForPreview; + } + } + this.populateTableData(this.appsList); + } + }, error =>{ + console.log(error); + this.openConfirmationModal('Error', error.message); + }); + } + + applyFilter(filterValue: string) { + this.dataSource.filter = filterValue.trim().toLowerCase(); + }; + + + populateTableData(appsList: Array){ + this.dataSource = new MatTableDataSource(appsList); + this.dataSource.sort = this.sort; + this.dataSource.paginator = this.paginator; + }; + + openAddApplicationModal(rowData: any) { + const modalRef = this.ngbModal.open(ApplicationDetailsDialogComponent, { size: 'lg' }); + modalRef.componentInstance.title = 'Application Details'; + //console.log("selectedData in parent",rowData); + if(rowData != 'undefined' && rowData){ + modalRef.componentInstance.applicationObj = rowData; + this.isEditMode = true; + }else{ + modalRef.componentInstance.applicationObj = {}; + this.isEditMode = false; + } + modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => { + //console.log("receivedEntry >>> ",receivedEntry); + if(receivedEntry){ + this.appsList.push(receivedEntry); + //this.populateTableData(this.appsList); + this.getOnboardingApps(); + } + }); + } + + deleteApplication(application: IApplications){ + let confirmationMsg = 'You are about to delete this App : ' + application.name+ '. Click OK to continue.'; + this.openInformationModal("Confirmation",confirmationMsg).result.then((result) => { + if (result === 'Ok') { + if(!application || application == null){ + console.log('ApplicationOnboardingCtrl::deleteApplication: No apllication or ID... cannot delete'); + return; + } + this.appsList.splice(this.appsList.indexOf(application), 1); + this.applicationsService.deleteOnboardingApp(application.id) + .subscribe( data => { + this.result = data; + this.getOnboardingApps(); + }, error => { + console.log(error); + this.openConfirmationModal('Error', error); + }); + } + }, (resut) => { + return; + }) + } + + checkIfUserIsSuperAdmin(){ + this.applicationsService.checkIfUserIsSuperAdmin() + .subscribe(res => { + if(res) { + this.isUserSuperAdmin = true; + this.displayedColumns = ['thumbnail', 'applicationName','active', + 'integrationType', 'guestAccess', 'url','restURL', + 'communicationKey', 'applicationNamespace', 'centralAuthAccess', 'delete']; + } + //console.log("isUserSuperAdmin :: ",this.isUserSuperAdmin); + }, error =>{ + console.log(error); + this.openConfirmationModal('Error', 'ApplicationsCtrl.checkIfUserIsSuperAdmin:: Failed '+error.message); + }); + } + + openConfirmationModal(_title: string, _message: string) { + const modalInfoRef = this.ngbModal.open(ConfirmationModalComponent); + modalInfoRef.componentInstance.title = _title; + modalInfoRef.componentInstance.message = _message; + } + + openInformationModal(_title: string, _message: string){ + const modalInfoRef = this.ngbModal.open(InformationModalComponent); + modalInfoRef.componentInstance.title = _title; + modalInfoRef.componentInstance.message = _message; + return modalInfoRef; + } + +} -- cgit