summaryrefslogtreecommitdiffstats
path: root/portal-FE-os/src/app/pages/application-onboarding
diff options
context:
space:
mode:
Diffstat (limited to 'portal-FE-os/src/app/pages/application-onboarding')
-rw-r--r--portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html275
-rw-r--r--portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.scss163
-rw-r--r--portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.spec.ts63
-rw-r--r--portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.ts380
-rw-r--r--portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.html144
-rw-r--r--portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.scss59
-rw-r--r--portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.spec.ts63
-rw-r--r--portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.ts188
8 files changed, 1335 insertions, 0 deletions
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 @@
+<!--
+ ============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============================================
+
+-->
+
+<div class="container">
+ <!--Modal Headers-->
+ <div class="modal-header">
+ <h4 class="modal-title">Application Details</h4>
+ <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
+ <span aria-hidden="true">&times;</span>
+ </button>
+ </div>
+ <!--Modal Body goes here-->
+ <div class="modal-body">
+ <div class="application-details-modal">
+ <div class="app-properties-main" scroll-top="appDetails.scrollApi">
+ <form name="appForm" novalidate autocomplete="off">
+ <div id="app-left-container" class="left-container">
+ <div class="property-label checkbox-label">
+ <mat-checkbox name="isRestrictedApp" type="checkbox" [(ngModel)]="applicationObj.restrictedApp"
+ id="checkbox-app-is-restricted" [disabled]="isEditMode" [checked]="applicationObj.restrictedApp">
+ Hyperlink only application
+ </mat-checkbox>
+ </div>
+
+ <div class="property required">
+ <div class="property-label">Application Name</div>
+ <input id="input-app-name" type="text"
+ [(ngModel)]="applicationObj.name" maxlength="100" name="name"
+ pattern="/^[a-zA-Z0-9_\-\s\&]*$/" required="true" />
+
+ <div id="error-container-conflict" class="error-container" ng-show="appDetails.conflictMessages.name"
+ id="conflictMessages-name">
+ <small id="app-name-error-conflict" class="err-message"
+ ng-bind="appDetails.conflictMessages.name">
+ </small>
+ </div>
+
+ <div id="error-container-edit" class="error-container"
+ *ngIf="(!applicationObj.name || applicationObj.name.length == 0)">
+ <small id="app-name-error-required" class="err-message">
+ Application name is required
+ </small>
+ </div>
+ </div>
+
+ <div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'">
+ <div id="url-property-label" class="property-label">URL</div>
+ <input id="input-app-url" [(ngModel)]="applicationObj.url"
+ maxlength="256" name="url" type="url" placeholder="https://"
+ pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i" required />
+
+ <div id="error-container-edit" class="error-container"
+ *ngIf="(applicationObj.isEnabled && applicationObj.url=='')">
+ <small id="app-name-error-required" class="err-message">
+ Application URL is required
+ </small>
+ </div>
+ </div>
+
+ <div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'"
+ [hidden] ="applicationObj.restrictedApp">
+ <div class="property-label">Rest API URL</div>
+ <input id="input-app-rest-url" [(ngModel)]="applicationObj.restUrl"
+ name="restUrl" type="url" placeholder="https://"
+ pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i" maxlength="256"
+ ng-required="!applicationObj.restrictedApp" />
+
+ <div id="error-container-edit" class="error-container"
+ *ngIf="(applicationObj.isEnabled && applicationObj.restUrl=='')">
+ <small id="app-name-error-required" class="err-message">
+ Rest API URL is required
+ </small>
+ </div>
+ </div>
+
+ <div [ngClass]="(applicationObj.isEnabled || applicationObj.isCentralAuth) ? 'property required' : 'property'"
+ [hidden] ="applicationObj.restrictedApp">
+ <div id="username-property-label" class="property-label">Username</div>
+ <input type="text" id="input-username-property" [(ngModel)]="applicationObj.username" name="username"
+ maxlength="256" ng-required="!appDetails.app.restrictedApp" />
+
+ <div id="error-container-edit" class="error-container"
+ *ngIf="((applicationObj.isEnabled || applicationObj.isCentralAuth) && applicationObj.username =='')">
+ <small id="app-name-error-required" class="err-message">
+ App Username is required
+ </small>
+ </div>
+ </div>
+
+ <div [ngClass]="(applicationObj.isEnabled && !applicationObj.isCentralAuth) ? 'property required' : 'property'"
+ [hidden] ="applicationObj.restrictedApp">
+ <div id="pwd-property-label" class="property-label">Password</div>
+ <input type="password" id="input-mylogins-password"
+ [(ngModel)]="applicationObj.appPassword" autocomplete="new-password"
+ name="appPassword" maxlength="256"/>
+
+ <div id="error-container-edit" class="error-container"
+ *ngIf="(applicationObj.isEnabled && !applicationObj.isCentralAuth && applicationObj.appPassword =='')">
+ <small id="app-name-error-required" class="err-message">
+ Password is required
+ </small>
+ </div>
+ </div>
+ </div>
+
+ <!-- Right container-->
+ <div class="right-container">
+ <div class="property">
+ <div class="property-label">Upload Image</div>
+ <input type="file" id="input-app-image-upload"
+ class="input-file-field input-app-image-upload-ht"
+ accept="image/*" [(ngModel)]="applicationObj.originalImage"
+ name="appImage" image-upload="applicationObj.originalImage"
+ image-upload-resize-max-height="300"
+ image-upload-resize-max-width="360"
+ image-upload-resize-quality="0.7"
+ image-upload-api="appDetails.imageApi"
+ (change)="appImageHandler($event)" />
+
+ <div id="app-error-image-upload-type" class="error-container"
+ *ngIf="appImageTypeError" class="ng-hide">
+ <div class="error-container">
+ <small id="error-app-invalid-image-size" class="err-message">File must be an image</small>
+ </div>
+ </div>
+
+ <div id="app-error-image-upload" class="error-container"
+ *ngIf="(applicationObj.originalImage && applicationObj.originalImage.dirty)">
+ <div ng-messages="appForm.appImage.$error"
+ class="error-container">
+ <small id="error-app-invalid-image-size" class="err-message"
+ ng-message="imageSize">Image file must be smaller than
+ 1MB</small>
+ </div>
+ </div>
+
+ <div class="property-label preview">
+ <span class="left-label">Preview</span>
+ <span class="remove" (click)="removeImage()">Remove</span>
+ </div>
+ <img id="image-app-preview" class="image-preview"
+ src="{{applicationObj.imageLink || applicationObj.thumbnail || emptyImgForPreview}}" />
+
+ <br/>
+ <div id="property-active" class="property-active">
+ <mat-checkbox name="isEnabled" [(ngModel)]="applicationObj.isEnabled"
+ [checked]="applicationObj.isEnabled"
+ id="checkbox-app-is-enabled">Active
+ </mat-checkbox>
+ </div>
+
+ <div id="property-guest-access" class="property-guest-access">
+ <mat-checkbox name="isOpen" [(ngModel)]="applicationObj.isOpen" id="checkbox-app-is-open"
+ [checked]="(applicationObj.isOpen || applicationObj.restrictedApp)"
+ [disabled]="applicationObj.restrictedApp">Allow guest access</mat-checkbox>
+ </div>
+
+ <div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp">
+ <div id="property-is-central-auth" class="property" [hidden] ="applicationObj.restrictedApp">
+ <mat-checkbox name="isCentralAuth" [(ngModel)]="applicationObj.isCentralAuth"
+ id="checkbox-app-is-central-auth" [checked]="applicationObj.isCentralAuth">
+ Centralized
+ </mat-checkbox>
+ </div>
+
+ <div class="centralized-key" aria-haspopup="true" style="padding-left: 150px;">
+ <div b2b-flyout-toggler class="notification-div" >
+ <div id="tooltip" class="icon-primary-flat-info" tabindex="0"
+ b2b-accessibility-click="13,32" aria-label="notifications"
+ aria-haspopup="true"
+ role="button"></div>
+ </div>
+
+ <!--<div id="notification" align="left">
+ <p class="uuid-text"
+ style="font: normal 12px Omnes-ECOMP-W02, Arial;">
+ To convert the non-centralized app to centralized app please
+ follow below steps. <a href="https://wiki.web.att.com/display/ECops/BulkUpload" target="_blank">
+ https://wiki.web.att.com/display/ECops/BulkUpload</a>
+ </p>
+ </div>-->
+ </div>
+ </div>
+
+ <div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp">
+ <div id="property-communication-key" class="property"
+ [hidden] ="applicationObj.restrictedApp" style="width: 250px;">
+ <div id="property-communication-key-label" class="property-label">Application UUID</div>
+ <input type="text" id="input-UEB-communication-key"
+ [(ngModel)]="applicationObj.uebKey" name="uebKey"
+ readonly="readonly" [disabled]="true"/>
+ </div>
+
+ <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;">
+ <div b2b-flyout-toggler class="notification-div">
+ <div id="tooltip" class="icon-primary-flat-info" tabindex="0"
+ b2b-accessibility-click="13,32" aria-label="notifications"
+ aria-haspopup="true"
+ role="button"></div>
+ </div>
+ <!--<div id="notification" align="left">
+ <p class="uuid-text" style="font: normal 12px Omnes-ECOMP-W02, Arial;">Application UUID is used as a communication
+ key between application and portal.Please place this value in
+ portal.properties</p>
+ </div>-->
+ </div>
+ </div>
+
+ <div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp">
+
+ <div [ngClass]="(applicationObj.isCentralAuth) ? 'property required' : 'property'"
+ [hidden] ="applicationObj.restrictedApp" style="width: 250px;">
+ <div id="pwd-property-label" class="property-label" >Name Space</div>
+ <input type="text" id="input-mylogins-auth-namespace"
+ [(ngModel)]="applicationObj.nameSpace" name="appAuthNameSpace"
+ maxlength="256" [disabled]="!applicationObj.isCentralAuth" />
+ </div>
+ <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;">
+
+ <div b2b-flyout-toggler class="notification-div">
+ <div id="tooltip" class="icon-primary-flat-info" tabindex="0"
+ b2b-accessibility-click="13,32" aria-label="notifications"
+ aria-haspopup="true"
+ role="button"></div>
+ </div>
+ <!--<div id="notification" align="left">
+ <p class="nameSpace-text" style="font: normal 12px Omnes-ECOMP-W02, Arial;">NameSpace should be created in AAF and portal mechid should be admin of the given namespace.</p>
+ </div>-->
+ </div>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-primary" [disabled]="(!applicationObj.name || applicationObj.name.length == 0)" (click)="saveChanges()">Save</button> &nbsp;
+ <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>
+ </div>
+</div> \ 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<ApplicationDetailsDialogComponent>;
+
+ 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<any> = 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 @@
+<!--
+ ============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============================================
+
+ -->
+
+<div class="container">
+ <div class="w-ecomp-main-container">
+ <div class="applications-page-main" id="page-content">
+ <div id="microservice-onboarding-title" class="w-ecomp-main-view-title">
+ <h1 class="heading-page"> Application Onboarding</h1>
+ </div>
+
+ <mat-form-field>
+ <input matInput type="text" (keyup)="applyFilter($event.target.value)" placeholder="Search in entire table">
+ </mat-form-field>
+
+ <button type="button" style="float: right;" class="btn btn-primary" (click)="openAddApplicationModal('')">
+ <i class="icon ion-md-person-add"></i>&nbsp;Add App
+ </button>
+
+ <div class="apps-table">
+ <!-- Applications Table goes here-->
+ <table mat-table [dataSource]="dataSource" matSort>
+ <!-- Thumbnail Column -->
+ <ng-container matColumnDef="thumbnail">
+ <th id="col1" mat-header-cell *matHeaderCellDef> Thumbnail </th>
+ <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-thumbnail"
+ mat-cell *matCellDef="let element; let i = index;">
+ <div><img class="small-thumbnail" src={{element.imageLink}}></div>
+ </td>
+ </ng-container>
+
+ <!-- Application Name Column -->
+ <ng-container matColumnDef="applicationName">
+ <th id="col2" mat-header-cell *matHeaderCellDef> Application Name </th>
+ <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-applicationName"
+ mat-cell *matCellDef="let element; let i=index;"> {{element.name}} </td>
+ </ng-container>
+
+ <!-- Active Column -->
+ <ng-container matColumnDef="active">
+ <th id="col2" mat-header-cell *matHeaderCellDef> Active </th>
+ <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-active"
+ mat-cell *matCellDef="let element; let i=index;"> {{(element.isEnabled) ? 'yes' : 'no'}} </td>
+ </ng-container>
+
+ <!-- Integration Type Column -->
+ <ng-container matColumnDef="integrationType">
+ <th id="col2" mat-header-cell *matHeaderCellDef> Integration Type </th>
+ <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-integrationType"
+ mat-cell *matCellDef="let element; let i=index;"> {{(element.restrictedApp) ? 'link' : 'standard'}} </td>
+ </ng-container>
+
+ <!-- Guest Access Column-->
+ <ng-container matColumnDef="guestAccess">
+ <th id="col2" mat-header-cell *matHeaderCellDef> Guest Access </th>
+ <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-guestAccess"
+ mat-cell *matCellDef="let element; let i=index;">{{(element.isOpen) ? 'yes' : 'no'}} </td>
+ </ng-container>
+
+ <!-- url column -->
+ <ng-container matColumnDef="url">
+ <th id="col2" mat-header-cell *matHeaderCellDef> Url </th>
+ <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-url"
+ mat-cell *matCellDef="let element; let i=index;">{{element.url}} </td>
+ </ng-container>
+
+ <!-- rest url column -->
+ <ng-container matColumnDef="restURL">
+ <th id="col2" mat-header-cell *matHeaderCellDef> REST Url </th>
+ <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-restURL"
+ mat-cell *matCellDef="let element; let i=index;">{{element.restUrl}} </td>
+ </ng-container>
+
+ <!-- communicationKey column -->
+ <ng-container matColumnDef="communicationKey">
+ <th id="col2" mat-header-cell *matHeaderCellDef> Communication Key </th>
+ <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-communicationKey"
+ mat-cell *matCellDef="let element; let i=index;">{{element.uebKey}} </td>
+ </ng-container>
+
+ <!-- applicationNamespace column -->
+ <ng-container matColumnDef="applicationNamespace">
+ <th id="col2" mat-header-cell *matHeaderCellDef> Application Namespace </th>
+ <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-applicationNamespace"
+ mat-cell *matCellDef="let element; let i=index;">{{element.nameSpace}} </td>
+ </ng-container>
+
+ <!-- centralAuthAccess column -->
+ <ng-container matColumnDef="centralAuthAccess">
+ <th id="col2" mat-header-cell *matHeaderCellDef> Central Auth Access </th>
+ <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-centralAuthAccess"
+ mat-cell *matCellDef="let element; let i=index;">{{(element.isCentralAuth) ? 'yes' : 'no'}} </td>
+ </ng-container>
+
+ <!-- Delete Column -->
+ <ng-container matColumnDef="delete">
+ <th id="col4" mat-header-cell *matHeaderCellDef> Delete </th>
+ <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let element; let i=index;">
+ <span class="icon-trash" id="{{i}}-button-portal-admin-remove" (click)="deleteApplication(element)">
+ <i class="icon ion-md-trash"></i>
+ </span>
+ </td>
+ </ng-container>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+ </table>
+ <mat-paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>
+ </div>
+ </div>
+ </div>
+ </div> \ 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<ApplicationOnboardingComponent>;
+
+ 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<IApplications> = [];
+ 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<IApplications>){
+ 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;
+ }
+
+}