diff options
Diffstat (limited to 'portal-FE-common/src/app/pages')
28 files changed, 3448 insertions, 0 deletions
diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.html b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.html new file mode 100644 index 00000000..31f28615 --- /dev/null +++ b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.html @@ -0,0 +1,132 @@ +<!-- + ============LICENSE_START========================================== + ONAP Portal + =================================================================== + Copyright (C) 2017 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">Account Details</h4> + <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')"> + <span aria-hidden="true">×</span> + </button> + </div> + + <!--Modal Body goes here--> + <div class="modal-body"> + <!-- Add Account Popup code goes here--> + <div class="account-properties-main"> + <form id="account-details-form" name="accountDetailsForm" novalidate autocomplete="off" method="post"> + <div class="item required"> + <div class="item-label">Account Name</div> + <input id="account-onboarding-details-input-name" class="table-search-field" + type="text" ng-change="accountAddDetails.updateAccountName()" name="accountname" + [(ngModel)]="accountOnboarding.applicationName" + ng-pattern="/^[\w -]*$/" maxlength="100" required /> + </div> + + <div class="item required"> + <div class="item-label">Username</div> + <input id="account-onboarding-details-input-username" class="table-search-field" + type="text" + ng-change="accountAddDetails.updateUsername()" name="username" + [(ngModel)]="accountOnboarding.username"/> + </div> + + <div class="item"> + <div class="item-label">Password</div> + <input id="account-onboarding-details-input-password" class="table-search-field" + type="password" name="password" [(ngModel)]="accountOnboarding.password" + maxlength="100" autocomplete="off"/> + </div> + + <div class="item"> + <div class="item-label">Retype Password</div> + <input id="account-onboarding-details-input-repassword" class="table-search-field" + type="password" name="repassword" + [(ngModel)]="accountOnboarding.repassword" maxlength="100"/> + </div> + + <div class="add-endpoint-item"> + <div class="item-label add-label-left">Add Endpoint</div> + <div class="add-label-right" id="accountAddDetails-button-accordion" + (click)="addEndpoint()"><i class="icon ion-ios-add-circle-outline"></i> + </div> + </div> + + <div class="item"> + <div class="item-label" *ngIf="accountOnboarding.endpointList && accountOnboarding.endpointList.length > 0"> + Account endpoint + </div> + + <div id="account-details-user-paramters" *ngFor="let endpoint of accountOnboarding.endpointList"> + <div class="endpoint-item-left"> + <input id="account-details-input-endpoint-name" + type="text" name="endpointName" + maxlength="200" ng-model="endpoint.name" + ng-change="accountAddDetails.updateAccountEndpoint(endpoint)"/> + </div> + + <div class="icon-circle-action-remove endpoint-item-middle" + (click)="removeEndpointItem(endpoint)"><span><i class="icon ion-ios-remove-circle-outline"></i></span> + </div> + + <div class="error-container endpoint-item-right" + *ngIf="endpoint.valid == false"> + <small id="accounts-details-input-invalid-endpoint" + class="err-message">Invalid end point format + </small> + </div> + </div> + + <div class="account-property"> + <div class="property-label checkbox-label"> + <mat-checkbox name="isActive" type="checkbox" [(ngModel)]="accountOnboarding.isActive" + id="accounts-checkbox-app-is-enabled" [checked]="accountOnboarding.isActive"> + Active + </mat-checkbox> + </div> + </div> + </div> + </form> + </div> + </div> + <!--Modal Footer goes Here--> + <div class="modal-footer"> + <button type="button" class="btn btn-primary" (click)="saveChanges()">Save</button> + <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-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.scss b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.scss new file mode 100644 index 00000000..4a490b1c --- /dev/null +++ b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.scss @@ -0,0 +1,77 @@ +/*- + * ============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============================================ + * + * + */ + +.account-properties-main { + padding-left: 20px; + padding-right: 20px; + margin-bottom: 50px; + height: 320px; + width: 100%; + overflow-x: auto; +} + +.required:before { + color: #cf2a2a; + margin-right: 2px; + content: "* "; + position: absolute; + top: 45px; + left: 28px; +} + +.account-properties-main input[type="text"] { + width: 20em; + margin-bottom: 10px; +} + +.account-properties-main input[type="password"] { + width: 20em; + margin-bottom: 10px; +} + +.add-endpoint-item .add-label-right{ + margin-left: 13em; +} + +.add-endpoint-item{ + display: inline-flex; +} + +.account-property{ + margin-top: 8px; +}
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.spec.ts b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.spec.ts new file mode 100644 index 00000000..fd568194 --- /dev/null +++ b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.spec.ts @@ -0,0 +1,62 @@ +/*- + * ============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 { AccountAddDetailsComponent } from './account-add-details.component'; + +describe('AccountAddDetailsComponent', () => { + let component: AccountAddDetailsComponent; + let fixture: ComponentFixture<AccountAddDetailsComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AccountAddDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AccountAddDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.ts b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.ts new file mode 100644 index 00000000..e2c408a1 --- /dev/null +++ b/portal-FE-common/src/app/pages/account-onboarding/account-add-details/account-add-details.component.ts @@ -0,0 +1,159 @@ +/*- + * ============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 { BasicAuthAccountService } from 'src/app/shared/services'; +import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component'; + +@Component({ + selector: 'app-account-add-details', + templateUrl: './account-add-details.component.html', + styleUrls: ['./account-add-details.component.scss'] +}) +export class AccountAddDetailsComponent implements OnInit { + + result: any; + isEditMode: boolean = false; + dupliateName: boolean = false; + emptyAccountName: boolean = false; + emptyAccountUsername: boolean = false; + passwordMatched: boolean = false; + + @Input() accountOnboarding: any; + @Output() passEntry: EventEmitter<any> = new EventEmitter(); + + constructor(public basicAuthAccountService: BasicAuthAccountService, public activeModal: NgbActiveModal, public ngbModal: NgbModal) { } + + ngOnInit() { + this.passwordMatched = true; + this.dupliateName = false; + this.emptyAccountName = false; + this.emptyAccountUsername = false; + + if(this.accountOnboarding.applicationName){ + this.isEditMode = true; + }else{ + this.isEditMode = false; + this.accountOnboarding.isActive = true; + this.accountOnboarding.endpointList = []; + } + //console.log("IsEditMode in Add account Dialog :: ",this.isEditMode) + + } + + addEndpoint(){ + const modalRef = this.ngbModal.open(ConfirmationModalComponent); + modalRef.componentInstance.title = ""; + modalRef.componentInstance.message = 'Please add the roles to this Username/MechId through AAF Screen'; + modalRef.result.then((result) => { }, (resut) => {return;}); + + /*this.accountOnboarding.endpointList.push({ + valid: true + });*/ + } + + //Add Or Update Account. + saveChanges(){ + var isValid = true; + //console.log("saveChanges called Account Onboarding"); + + if(this.accountOnboarding.applicationName == '' + || this.accountOnboarding.applicationName == undefined){ + this.emptyAccountName = true; + isValid = false; + } + + if(this.accountOnboarding.username == '' + || this.accountOnboarding.username == undefined){ + this.emptyAccountUsername = true; + isValid = false; + } + + if(this.dupliateName == true){ + isValid = false; + } + + if(this.dupliateName == true){ + isValid = false; + } + + if(this.accountOnboarding.password != this.accountOnboarding.repassword){ + this.passwordMatched = false; + isValid = false; + } + //console.log("isValid....",isValid) + if(!isValid) + return; + + var active = 'N'; + if(this.accountOnboarding.isActive == true) + active = 'Y'; + + var newAccount = { + applicationName: this.accountOnboarding.applicationName, + username: this.accountOnboarding.username, + password: this.accountOnboarding.password, + endpoints: this.accountOnboarding.endpoints, + isActive: active + }; + + if(this.isEditMode){ + var message = "Are you sure you want to change '" + this.accountOnboarding.applicationName + "'?" + this.basicAuthAccountService.updateAccount(this.accountOnboarding.id, newAccount) + .subscribe( _data => { + this.result = _data; + //console.log("updateAccount response :: ",this.result); + this.passEntry.emit(this.result); + this.ngbModal.dismissAll(); + }, error => { + console.log(error); + }); + }else{ + this.basicAuthAccountService.createAccount(newAccount) + .subscribe( _data => { + this.result = _data; + //console.log("createAccount response :: ",this.result); + this.passEntry.emit(this.result); + this.ngbModal.dismissAll(); + }, error => { + console.log(error); + }); + } + } +} diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.html b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.html new file mode 100644 index 00000000..31f631eb --- /dev/null +++ b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.html @@ -0,0 +1,78 @@ +<!-- + ============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="ecomp-main-view-title"> + <h1 class="heading-page">App Account Management</h1> + </div> + <button type="button" style="float: right;" class="btn btn-primary" (click)="openAddNewAccountModal('')"> + <i class="icon ion-md-person-add"></i>Add Account + </button> + <div> + <table mat-table [dataSource]="dataSource" matSort> + <!-- Account Name Column --> + <ng-container matColumnDef="accountName"> + <th id="col1" mat-header-cell *matHeaderCellDef> Account Name </th> + <td (click)="openAddNewAccountModal(element)" id="rowheader_t1_{{i}}-accountName" + mat-cell *matCellDef="let element; let i = index;"> {{element.applicationName}} + </td> + </ng-container> + + <!-- Username Column --> + <ng-container matColumnDef="userName"> + <th id="col2" mat-header-cell *matHeaderCellDef> Username </th> + <td (click)="openAddNewAccountModal(element)" id="rowheader_t1_{{i}}-userName" + mat-cell *matCellDef="let element; let i=index;"> {{element.username}} </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)="deleteAccount(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> diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.scss b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.scss new file mode 100644 index 00000000..05d0cd22 --- /dev/null +++ b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.scss @@ -0,0 +1,46 @@ +/*- + * ============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 th{ + padding-bottom: 15px; + font-weight: bold; +} + +.ion-md-trash{ + cursor: pointer; +}
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.spec.ts b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.spec.ts new file mode 100644 index 00000000..8e6e79ea --- /dev/null +++ b/portal-FE-common/src/app/pages/account-onboarding/account-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 { AccountOnboardingComponent } from './account-onboarding.component'; + +describe('AccountOnboardingComponent', () => { + let component: AccountOnboardingComponent; + let fixture: ComponentFixture<AccountOnboardingComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AccountOnboardingComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AccountOnboardingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.ts b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.ts new file mode 100644 index 00000000..9ed4f9da --- /dev/null +++ b/portal-FE-common/src/app/pages/account-onboarding/account-onboarding.component.ts @@ -0,0 +1,153 @@ +/*- + * ============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 { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { BasicAuthAccountService } from '../../shared/services/index'; +import { IAccountOnboarding } from 'src/app/shared/model/account-onboarding/accountOnboarding'; +import { AccountAddDetailsComponent } from './account-add-details/account-add-details.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-account-onboarding', + templateUrl: './account-onboarding.component.html', + styleUrls: ['./account-onboarding.component.scss'] +}) +export class AccountOnboardingComponent implements OnInit { + + accountList: Array<IAccountOnboarding> = []; + result: any; + isEditMode: boolean = false; + displayedColumns: string[] = ['accountName', 'userName','delete']; + dataSource = new MatTableDataSource(this.accountList); + @ViewChild(MatSort) sort: MatSort; + @ViewChild(MatPaginator) paginator: MatPaginator; + + constructor(public basicAuthAccountService: BasicAuthAccountService, public ngbModal: NgbModal) { } + + ngOnInit() { + this.getOnboardingAccounts(); + } + + populateTableData(wigetList: Array<IAccountOnboarding>){ + this.dataSource = new MatTableDataSource(wigetList); + this.dataSource.sort = this.sort; + this.dataSource.paginator = this.paginator; + }; + + getOnboardingAccounts(){ + //console.log("getOnboardingAccounts called"); + this.basicAuthAccountService.getAccountList() + .subscribe(_data => { + this.result = _data; + //console.log("getOnboardingAccounts Data :: ", _data); + if (this.result == null || this.result == 'undefined') { + //console.log('BasicAuthAccountService::getOnboardingAccounts Failed: Result or result.data is null'); + }else { + this.accountList = this.result.response; + this.populateTableData(this.accountList); + } + }, error =>{ + console.log(error); + }); + + }; + + openAddNewAccountModal(rowData: any){ + //console.log("openAddNewAccountModal getting called..."); + const modalRef = this.ngbModal.open(AccountAddDetailsComponent, { size: 'lg' }); + modalRef.componentInstance.title = 'Account Details'; + if(rowData != 'undefined' && rowData){ + rowData.repassword = rowData.password; + modalRef.componentInstance.accountOnboarding = rowData; + this.isEditMode = true; + }else{ + modalRef.componentInstance.accountOnboarding = {}; + this.isEditMode = false; + } + modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => { + //console.log("receivedEntry >>> ",receivedEntry); + if(receivedEntry){ + this.accountList = []; + this.getOnboardingAccounts(); + } + }); + } + + deleteAccount(selectedAccount : any){ + let confirmationMsg = 'You are about to delete this account : ' + selectedAccount.applicationName + '. Click OK to continue.'; + this.openInformationModal("Confirmation",confirmationMsg).result.then((result) => { + if (result === 'Ok') { + //console.log("deleteAccount called Account Onboarding"); + if(!selectedAccount || selectedAccount == null || selectedAccount =='undefined'){ + console.log('AccountOnboardingCtrl::deleteAccount: No Account or ID... cannot delete'); + return; + } + //console.log("deleteAccount>>id",selectedAccount.id) + this.basicAuthAccountService.deleteAccount(selectedAccount.id) + .subscribe( _data => { + this.result = _data; + //console.log("deleteAccount response :: ",this.result); + this.accountList.splice(this.accountList.indexOf(selectedAccount), 1); + this.getOnboardingAccounts(); + }, error => { + console.log(error); + }); + } + }, (resut) => { + return; + }) + } + + 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-common/src/app/pages/application-catalog/application-catalog.component.html b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.html new file mode 100644 index 00000000..af54d276 --- /dev/null +++ b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.html @@ -0,0 +1,143 @@ +<!-- + ============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> + <div id="page-content"> + <div id="title"> + <h1>{{'Application Catalog'}}</h1> + </div> + <div> + <div> + <div id="container" class="simulateCatGridHeader"> + <span class="simulateCatGridHeaderDetails"> Click the check + boxes below to choose which applications are shown on the <a [routerLink]="['/applicationsHome']">home + page</a>. + </span> <br> <br> + <div> + <div class="catalog-radio-div"> + <label class="radio"> + <span>{{'Filter'}}: </span> + </label> + </div> + <div class="catalog-radio-div"> + <label class="radio"> + <input type="radio" [(ngModel)]="radioValue" id="radio-button-all" name="All" value="All"> + <i class="skin"></i> + <span>{{'All'}}</span> + </label> + </div> + <div class="catalog-radio-div"> + <label class="radio"> + <input type="radio" [(ngModel)]="radioValue" id="radio-button-accessible" name="Accessible" + value="Accessible"> + <i class="skin"></i> + <span>{{'Accessible'}}</span> + </label> + </div> + <div class="catalog-radio-div"> + <label class="radio"> + <input type="radio" [(ngModel)]="radioValue" id="radio-button-homepage" name="Selected" + value="Selected"> + <i class="skin"></i> + <span>{{'On Home Page'}}</span> + </label> + </div> + + </div> + </div> + <div> + <div> + <gridster [options]="options" class="appCatalogue-boarder"> + + + <div *ngFor="let item of layout"> + <gridster-item [item]="item" *ngIf="(item.select && radioValue=='Selected') || (item.access && radioValue=='Accessible') || (radioValue == 'All')"> + <div class="gridster-box" [ngStyle]="{'color': !item.access ? 'lightgray':''}"> + <div class="gridster-box-header"> + + <mat-icon class="icon-content-gridguide">drag_handle</mat-icon> + <h3>{{ item.name | elipsis: 13}}</h3> + <span style="position: absolute;right:1em" *ngIf="item.access || isUserSuperAdmin"> + <label id="widget-checkbox-label" class="checkbox"> + + <input type="checkbox" id="{{item.name.split(' ').join('-')}}-checkbox" + [(ngModel)]="item.select" (ngModelChange)="storeSelection(item)" /> + + + <i class="skin"></i> + </label> + </span> + + + </div> + <div class="gridster-box-content" [ngStyle]="{'cursor':'pointer', + 'background-image': 'url('+(item.imageLink)+')', + 'order': item.order, + 'background-color':'white', + 'background-repeat': 'no-repeat', + 'background-size': '168px 118px', + 'height': '80%'}" (click)="openAddRoleModal(item)"> + </div> + + </div> + </gridster-item> + </div> + + + + </gridster> + </div> + </div> + + </div> + + <div id="widgets-disclaimer" class="w-ecomp-main-disclaimer"> + To request access to an application widget, please visit the <a>Get Access</a> page. + </div> + </div> + </div> +</div> + +<div> + <div> + + </div> + <div> + <div></div> + <div></div> + </div> +</div>
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.scss b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.scss new file mode 100644 index 00000000..29198a52 --- /dev/null +++ b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.scss @@ -0,0 +1,174 @@ +/* + * ============LICENSE_START========================================== + * ONAP Portal SDK + * =================================================================== + * Copyright © 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============================================ + * + * + */ + + + + :host { .toolbar { + height: 100px; + display: flex; +} gridster { + display: flex; + height: calc(100vh - 115px); + flex-direction: column; +}} +.icon-content-gridguide{ + cursor:move; + font-size: 14px; + } + .form-row { + margin-top: -14px; +} +.griditem-header{ + + + border-bottom: 1px; + border-bottom-color: solid gray; + + + +} + +.checkbox, .radio { +min-height: 10px; +padding-left: 0px; +} + +.simulateCatGridHeader{ + position: relative; + height: 70px !important; + border: 1px solid #d3d3d3; + border-bottom: 0; + background-color: #E5E5E5; + white-space: nowrap; + text-overflow: ellipsis; + z-index: 1; +} + +.simulateCatGridHeaderTitle{ + line-height: 20px; + margin-top: 10px; + margin-left: 26px; + font-family: "Omnes-ECOMP-W02", Arial; + font-size: 18px; + color: #444444; + float: left; +} + +.simulateCatGridHeaderRadio{ + line-height: 20px; + margin-top: 10px; + margin-left: 10px; + font-family: "Omnes-ECOMP-W02", Arial; + font-size: 12px; + color: #444444; + float: left; +} + +.simulateCatGridHeaderDetails{ + line-height: 20px; + margin-left: 10px; + font-family: "Omnes-ECOMP-W02", Arial; + font-size: 12px; + color: #444444; + float: left; +} + +.simulateGridHeaderHandle{ + cursor: move; + margin: 12px; + position: absolute; + top: 0; + left: 0; + border: 0; + vertical-align: middle; + -ms-interpolation-mode: bicubic; + display: block; +} + +.catalog-radio-div{ + display:inline-block; + margin-right:5px; +} + +.appCatalogue-boarder{ + background-color: #eee; + border: 1px dashed white; + + overflow-y: auto; + overflow-x: hidden; + } + + .gridster-box { + height: 100%; + border: 1px solid #ccc; + background-color: #fff; + transition: transform 0.5s ease-out; +} +.gridster-box-header { + background-color: #fff; + padding: 0 0px 0 10px; + border-bottom: 1px solid #ccc; + position: relative; + height: 50px !important; +} +.gridster-box-header h3 { + margin-top: 15px; + display: inline-block; + font-size: 70%; + font-family: "Omnes-ECOMP-W02", Arial; +} +.gridster-box-content { + padding: 59px; +} +.gridster-box:hover{ + transform: scale(1.1); +} +.gridster-box-header-btns { + top: 15px; + right: 10px; + position: absolute; +} +.checkbox input{ + margin: 6px; + left: 112px; + top: -20px; + } +.checkbox .skin { + left: 125px; + top: -18px; +} diff --git a/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.spec.ts b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.spec.ts new file mode 100644 index 00000000..1967d254 --- /dev/null +++ b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.spec.ts @@ -0,0 +1,62 @@ +/*- + * ============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 { ApplicationCatalogComponent } from './application-catalog.component'; + +describe('ApplicationCatalogComponent', () => { + let component: ApplicationCatalogComponent; + let fixture: ComponentFixture<ApplicationCatalogComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ApplicationCatalogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ApplicationCatalogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.ts b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.ts new file mode 100644 index 00000000..f571dcaa --- /dev/null +++ b/portal-FE-common/src/app/pages/application-catalog/application-catalog.component.ts @@ -0,0 +1,179 @@ +/*- + * ============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 } from '@angular/core'; +import { GridsterConfig, GridsterItem } from 'angular-gridster2'; +import { ApplicationCatalogService } from '../../shared/services/application-catalog/application-catalog.service'; +import { IApplicationCatalog } from '../../shared/model/application-catalog.model'; +import { IWidgetCatalog } from '../../shared/model/widget-catalog.model'; +import { environment } from 'src/environments/environment'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { CatalogModalComponent } from '../catalog-modal/catalog-modal.component'; +import { ExternalRequestAccessService } from 'src/app/shared/services/external-request-access-service/external-request-access.service'; +import { UsersService } from 'src/app/shared/services/users/users.service'; + +@Component({ + selector: 'app-application-catalog', + templateUrl: './application-catalog.component.html', + styleUrls: ['./application-catalog.component.scss'] +}) +export class ApplicationCatalogComponent implements OnInit { + widgetCatalogData: IWidgetCatalog[]; + appCatalogData: IApplicationCatalog[]; + resultAccessValue: string; + orgUserId: string; + firstName: string; + lastName: string; + radioValue: any; + isUserSuperAdmin: boolean; + + get options(): GridsterConfig { + return this.applicationCatalogService.options; + } get layout(): GridsterItem[] { + return this.applicationCatalogService.layout; + } constructor(private applicationCatalogService: ApplicationCatalogService, private externalRequestAccessService: ExternalRequestAccessService, private userService: UsersService, private modal: NgbModal) { } + + ngOnInit() { + this.applicationCatalogService.clearCatalog(); + this.radioValue = 'All'; + this.callAppCatalogExecutor(); + } + + callAppCatalogExecutor() { + //Check whether Admin is Super Admin + this.checkAdminIsSuperAdmin(); + //To fetch ML value + this.getExternalAccess(); + + //Call user profile service + this.getUserProfile(); + + //Call Application Catalog services + this.getAppCatalogService(); + } + + checkAdminIsSuperAdmin() { + this.applicationCatalogService.checkIfUserIsSuperAdmin().subscribe(data => { + this.isUserSuperAdmin = data; + }, error => { + console.log('checkAdminIsSuperAdmin Error Object' + error); + }); + } + + getAppCatalogService() { + //console.log("getAppCatalogServices called"); + this.applicationCatalogService.getAppCatalog().subscribe(data => { + //console.log("Response data" + data); + this.appCatalogData = data; + for (let entry of this.appCatalogData) { + //console.log("Check the URL" + environment.api.appThumbnail); + var appCatalog = { + x: -1, + y: -1, + id: entry.id, + name: entry.name, + mlAppName: entry.mlAppName, + imageLink: environment.api.appThumbnail.replace(':appId', <string><any>entry.id), + restricted: entry.restricted, + select: entry.select, + access: entry.access, + pending: entry.pending, + mlproperty: this.resultAccessValue + }; + this.applicationCatalogService.addItem(appCatalog); + } + }, error => { + console.log('getAppCatalogServices Error Object' + error); + }); + }; + + storeSelection(appCatalogData: any) { + //console.log("Store selection called " + appCatalogData.name); + var pendingFlag: boolean = false; + if (appCatalogData.access) + pendingFlag = false; + else + pendingFlag = appCatalogData.pending; + + var appData = { + appId: appCatalogData.id, + select: appCatalogData.select, + pending: pendingFlag + }; + this.applicationCatalogService.updateManualAppSort(appData).subscribe(data => { + //console.log("Update App sort data" + data); + }, error => { + console.log('Update App sort error' + error); + }); + + this.applicationCatalogService.updateAppCatalog(appData).subscribe(data => { + //console.log("Update App Catalog data" + data); + }, error => { + console.log('Update App Catalog error' + error); + }); + }; + openAddRoleModal(item: any) { + //console.log("OpenModal check" + item.id); + if ((!item.restricted) && (item.mlproperty)) { + this.modal.open(CatalogModalComponent); + } + } + + getExternalAccess() { + //console.log("getExternalAccess service called"); + this.externalRequestAccessService.getExternalRequestAccessServiceInfo().subscribe(data => { + //console.log("Response data" + data); + if (data) + this.resultAccessValue = data.accessValue; + }, error => { + console.log('getExternalAccess Error object' + error); + }); + } + + getUserProfile() { + const userProfileObservable = this.userService.getUserProfile(); + userProfileObservable.subscribe((userProfile: any) => { + //console.log('UserProfile is ' + userProfile); + if (userProfile) { + this.orgUserId = userProfile.orgUserId; + this.firstName = userProfile.firstName; + this.lastName = userProfile.lastName; + } + }); + + } +} diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.html b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.html new file mode 100644 index 00000000..0d710f98 --- /dev/null +++ b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.html @@ -0,0 +1,156 @@ +<!-- + ============LICENSE_START========================================== + ONAP Portal + =================================================================== + Copyright (C) 2017 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">Manage Contact Us</h4> + <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')"> + <span aria-hidden="true">×</span> + </button> + </div> + + <!--Modal Body goes here--> + <div class="modal-body"> + <div class="c-ecomp-portal-abs-table contactus-manage-table"> + <table b2b-table id="table-main" table-data="contactUsList" current-page="ignoredCurrentPage"> + <thead b2b-table-row type="header"> + <tr> + <th id="th-users-0" b2b-table-header key="ecomp_function" default-sort="a">App Name</th> + <th id="th-users-1" b2b-table-header key="app_name" sortable="true">Contact Name</th> + <th id="th-users-2" b2b-table-header key="app_name" sortable="true">Contact Email</th> + <th id="th-users-3" b2b-table-header key="role_name" sortable="true">Contact URL</th> + <th id="th-users-4" b2b-table-header key="role_name" sortable="true">Description</th> + <th id="th-users-5" b2b-table-header key="role_name" sortable="true">Edit</th> + <th id="th-users-6" b2b-table-header key="role_name" sortable="true">Delete</th> + </tr> + </thead> + <!-- Use track-by="UNIQUE KEY HERE" or leave out if no unique keys in data --> + <tbody b2b-table-row type="body" class="table-body" track-by="$index" *ngFor="let rowData of contactUsList; index as i"> + <tr id="tr-rowData" ng-click=""> + <td b2b-table-body> + <div id="users-page-td-appName" [innerHtml]="rowData.appName"></div> + </td> + <td b2b-table-body> + <div id="users-page-td-name" [hidden]="showEdit" [innerHtml]="rowData.contactName"></div> + <input class="input-inline-edit-text" type="text" *ngIf="showEdit" [(ngModel)]="rowData.contactName" /> + </td> + <td b2b-table-body> + <div id="users-page-td-email" [hidden]="showEdit" [innerHtml]="rowData.contactEmail"></div> + <input class="input-inline-edit-text" type="text" *ngIf="showEdit" [(ngModel)]="rowData.contactEmail" /> + </td> + <td b2b-table-body> + <div id="users-page-td-url" [hidden]="showEdit" [innerHtml]="rowData.url"></div> + <input class="input-inline-edit-text" type="text" *ngIf="showEdit" [(ngModel)]="rowData.url" /> + </td> + <td b2b-table-body> + <div id="users-page-td-descr" [hidden]="showEdit" [innerHtml]=" rowData.description"></div> + <input class="input-inline-edit-text" type="text" *ngIf="showEdit" [(ngModel)]="rowData.description" /> + </td> + <td b2b-table-body> + <div class="edit-contact-us" [hidden]="showEdit"> + <span class="icon-edit" (click)="showEdit=true"> + <i class="icon ion-md-create"></i> + </span> + </div> + <span *ngIf="showEdit" (click)="editContactUs(rowData)"> + <i class="icon ion-md-save"></i> + </span> + </td> + <td b2b-table-body> + <div class="delete-contact-us"> + <span class="icon-trash" (click)="delContactUs(rowData)"> + <i class="icon ion-md-trash"></i> + </span> + </div> + </td> + </tr> + </tbody> + </table> + </div> + + <div class="divider-line"></div> + + <div class="contactus-addWidgetHeader"> + <div id="addWidgetHeader" class="contact-us-margin"> + <p class="edit-contactus-title">Add Application Contact Information</p> + </div> + <div id="addWidget" class="contact-us-margin"> + <div> + <form name="contactForm" novalidate autocomplete="off"> + <div id="add-contact-us-field-appname" class="add-contact-us-field"> + <mat-form-field class="contact-us-applications-select"> + <mat-label> <span id="required" class="mots-property-label-spn" visible="false"> *</span>Application Name </mat-label> + <mat-select name="contact-us-applications-select" id="application" + name="applicationName" [(ngModel)]="selectedApp" [(value)]="selected"> + <mat-option *ngFor="let d of contactUsAllAppList" [value]="d" >{{d.title}}</mat-option> + </mat-select> + </mat-form-field> + <div id="mots-property-label-required" *ngIf="selectedApp==null || selectedApp==''"> + <small class="mandatory-categories">App Name is Required</small> + </div> + </div> + <br> + <div class="addApplicationContactInfo"> + <div id="add-contact-us-field-contactname" class="add-contact-us-field"> + <div id="property-label-name" class="property-label">Contact Name</div> + <input id="property-input-name" name="name" class="input-text-area" type="text" [(ngModel)]="newContactUs.contactName" /> + </div> + <div id="add-contact-us-field-email" class="add-contact-us-field"> + <div id="property-label-email" class="property-label">Contact Email</div> + <input id="property-input-email" name="email" class="input-text-area" type="text" [(ngModel)]="newContactUs.contactEmail" /> + </div> + <div id="add-contact-us-field-url" class="add-contact-us-field"> + <div id="property-label-url" class="property-label">Contact URL</div> + <input id="property-input-url" name="url" class="input-text-area" type="text" [(ngModel)]="newContactUs.url" /> + </div> + </div> + <div id="add-contact-us-field-desc" class="add-contact-us-field-des"> + <div id="property-label-desc" class="property-label">Description</div> + <textarea id="property-input-desc" name="description" class="property-label-desc-txtarea" [(ngModel)]="newContactUs.description"></textarea> + </div> + </form> + </div> + </div> + </div> + </div> + <!--Modal Footer goes Here--> + <div class="modal-footer"> + <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Close</button> + <button type="button" class="btn btn-primary" (click)="addNewContactUs()">Add New</button> + </div> +</div>
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.scss b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.scss new file mode 100644 index 00000000..bff240e2 --- /dev/null +++ b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.scss @@ -0,0 +1,79 @@ +/*- + * ============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============================================ + * + * + */ + ::ng-deep .modal-dialog { + max-width: 1200px; + width: 1200px; + overflow-x: auto; + overflow-y: auto; +} + +.addApplicationContactInfo{ + display: inline-flex; +} + +.addApplicationContactInfo input[type="text"] { + width: 22em; + margin-right: 8px; +} + +.property-label-desc-txtarea { + overflow: auto; + resize: vertical; + width: 67em; +} + +.divider-line{ + border-bottom-style: solid; + border-bottom-width: 1px; + padding-bottom: 50px; +} + +.edit-contactus-title { + margin-top: 28px; + margin-bottom: 1rem; + font-size: 23px; +} + +.required:before { + color: #cf2a2a; + margin-right: 2px; + content: "* "; + position: absolute; + top: 45px; + left: 28px; +} diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.spec.ts b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.spec.ts new file mode 100644 index 00000000..06b6995a --- /dev/null +++ b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.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 { ContactUsManageComponent } from './contact-us-manage.component'; + +describe('ContactUsManageComponent', () => { + let component: ContactUsManageComponent; + let fixture: ComponentFixture<ContactUsManageComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ContactUsManageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ContactUsManageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.ts b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.ts new file mode 100644 index 00000000..e04ccb77 --- /dev/null +++ b/portal-FE-common/src/app/pages/contact-us/contact-us-manage/contact-us-manage.component.ts @@ -0,0 +1,182 @@ +/*- + * ============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} from '@angular/core'; +import { ContactUsService } from '../../../shared/services/index'; +import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'; + +@Component({ + selector: 'app-contact-us-manage', + templateUrl: './contact-us-manage.component.html', + styleUrls: ['./contact-us-manage.component.scss'] +}) +export class ContactUsManageComponent implements OnInit { + + contactUsList = []; + contactUsAllAppList = []; + result: any; + selectedApp: any; + showEdit: boolean = false; + newContactUs ={ + appId:'', + appName:'', + description:'', + contactName:'', + contactEmail:'', + url:'' , + activeYN:'' + }; + + + constructor(public activeModal: NgbActiveModal, public ngbModal: NgbModal, public contactUsService: ContactUsService) { } + + ngOnInit() { + + this.getContactUsList(); + this.getListOfApp(); + } + + getContactUsList(){ + console.log("getContactUsList called..."); + this.contactUsService.getContactUs() + .subscribe( _data => { + this.result = _data; + console.log("getContactUsList Data :: ", _data); + if (this.result.response == null || this.result.response == 'undefined') { + console.log('ContactUsService::getContactUsList Failed: Result or result.data is null'); + }else{ + for(var i=0; i<this.result.response.length;i++){ + if(this.result.response[i].appId!=1) + this.contactUsList.push(this.result.response[i]); + } + } + },error =>{ + console.log(error); + }); + } + + getListOfApp(){ + console.log("getListOfApp called..."); + this.contactUsService.getListOfApp() + .subscribe( _data => { + this.result = _data; + console.log("getListOfApp Data :: ", _data); + if (this.result == null || this.result == 'undefined') { + console.log('ContactUsService::getListOfApp Failed: Result or result.data is null'); + }else{ + let res1 = this.result; + let realAppIndex = 0; + this.contactUsAllAppList.length=0; + console.log("this.contactUsList ",this.contactUsList) + for (var i = 1; i <= res1.length; i++) { + if (!res1[i - 1].restrictedApp) { + var okToAdd = true; + for(var j =0; j<this.contactUsList.length;j++){ + if(res1[i - 1].title == this.contactUsList[j].appName){ + okToAdd=false; + console.log("okToAdd=false res1[i - 1].title ",res1[i - 1].title); + } + } + // not allowed to add(duplicate) another entry if the app is already available in the table + if(okToAdd){ + if(res1[i - 1].title){ + this.contactUsAllAppList.push({ + index: realAppIndex, + title: res1[i - 1].title, + value: res1[i - 1].index + }); + } + realAppIndex = realAppIndex + 1; + } + } + } + } + },error =>{ + console.log(error); + }); + } + + addNewContactUs(){ + console.log("Calling addNewContactUs"); + let selectedApplication = this.selectedApp; + this.newContactUs.appId = selectedApplication.value; + this.newContactUs.appName = selectedApplication.title; + console.log("newContactUsObj ",this.newContactUs); + this.contactUsService.addContactUs(this.newContactUs) + .subscribe( _data => { + this.result = _data; + console.log("addContactUs response :: ", _data); + this.contactUsList.push(this.newContactUs); + },error =>{ + console.log(error); + }); + } + + editContactUs(contactObj: any){ + + var contactUsObj={ + appId:contactObj.appId, + appName:contactObj.appName, + description:contactObj.description, + contactName:contactObj.contactName, + contactEmail:contactObj.contactEmail, + url:contactObj.url, + }; + + this.contactUsService.modifyContactUs(contactUsObj) + .subscribe( _data => { + this.result = _data; + console.log("editContactUsFun response :: ", _data); + this.showEdit=false; + },error =>{ + console.log(error); + }); + } + + delContactUs(appObj: any){ + this.contactUsService.removeContactUs(appObj.appId) + .subscribe( _data => { + this.result = _data; + console.log("delContactUsFun response :: ", _data); + this.contactUsList.splice(appObj, 1); + },error =>{ + console.log(error); + }); + } + +} diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us.component.html b/portal-FE-common/src/app/pages/contact-us/contact-us.component.html new file mode 100644 index 00000000..5930c382 --- /dev/null +++ b/portal-FE-common/src/app/pages/contact-us/contact-us.component.html @@ -0,0 +1,163 @@ +<!-- + ============LICENSE_START========================================== + ONAP Portal + =================================================================== + Copyright (C) 2017 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 id="contact-us-title" class="w-ecomp-main-view-title"> + <h1 class="heading-page">Contact Us</h1> + </div> + <button type="button" style="float: right;" class="btn btn-primary" (click)="editContactUsModal()"> + <i class="icon ion-md-person-add"></i>Edit Contact Us + </button> + <div class="w-ecomp-contactUs-home"> + <div class="contactUs-home-container" id="page-content"> + <div class="admins-page-main"> + <div class="contactUs-general-div"> + <span class="contactUs-txt"> + To report an issue with ECOMP Portal, open a ticket at the + <a href="{{ush_TicketInfoUrl}}" target="_blank">User Self Help system</a>. + </span><br /> + </div> + + <div class="contactUs-general-div"> + <span class="contactUs-txt"> + To give feedback to the ECOMP Portal team, send email to + <a href="mailto:{{portalInfo_Address}}" target="_top">{{portalInfo_Address}}</a>. + </span><br /> + </div> + + <div class="contactUs-general-div"> + <span class="contactUs-txt"> + To learn more about ECOMP Portal, visit the + <a href="{{feedback_Url}}" target="_blank">ECOMP Portal wiki</a> (may need to request access). + </span><br /> + </div> + + <!-- Function Categories --> + <div id="appFunctionInfo" class="w-ecomp-main-view-title"> Application Functions + <br /> + <div b2b-table table-data="contact.functionalTableData" class="b2b-table-div"> + <table mat-table [dataSource]="dataSource" matSort> + <!-- Category --> + <ng-container matColumnDef="category"> + <th id="col1" mat-header-cell *matHeaderCellDef> Category </th> + <td id="rowheader_t1_{{i}}-category" + mat-cell *matCellDef="let element; let i = index;"> {{element.category}} + </td> + </ng-container> + + <!-- Application Name Column --> + <ng-container matColumnDef="eCOMPFunctions"> + <th id="col2" mat-header-cell *matHeaderCellDef> ECOMP Functions </th> + <td id="rowheader_t1_{{i}}-eCOMPFunctions" + mat-cell *matCellDef="let element; let i=index;"> {{element.functions}} </td> + </ng-container> + + <!-- Application Name Column --> + <ng-container matColumnDef="eCOMPApplications"> + <th id="col2" mat-header-cell *matHeaderCellDef> ECOMP Applications </th> + <td id="rowheader_t1_{{i}}-eCOMPApplications" + mat-cell *matCellDef="let element; let i=index;"> + <a href="javascript:void(0)" (click)="showApplicationInfo(element.app_Id)"> + {{element.app_Name}} + </a> + </td> + </ng-container> + + <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> + <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> + </table> + </div> + </div><br /> + + <!-- Display applicationInfo panels --> + <div id="allAppInfo"> + <div class="w-ecomp-main-view-title"> All Applications</div> <br /> + <div class="contactUs-general-div"> + <div class="contact-us-table"> + <div class="c-ecomp-portal-abs-table default contactUs-table-ht"> + <div *ngFor="let rowData of appTable; index as i" class="contactUs-collapsible-panel"> + <div id="{{rowData.app_Id}}" class="contactUs-table-ht" class="contactUs-panel-header" (click)="showApplicationInfo(rowData.app_Id)"> + <span id="appId{{i}}" class="contactUs-table-spn">{{rowData.app_name}}</span> + <span class="contactUs-table-title-sp"> + <span id="arrowup{{rowData.app_Id}}" [hidden]="showUp" title="Collapse app contact section" class="icon-controls-upPRIMARY"> + <i class="fa fa-2x fa-angle-up" aria-hidden="true"></i> + </span> + + <span id="arrowdown{{rowData.app_Id}}" [hidden]="showDown" title="Expand app contact section" class="icon-controls-down"> + <i class="fa fa-2x fa-angle-down" aria-hidden="true"></i> + </span> + </span> + </div> + <div id="collapse{{rowData.app_Id}}" [hidden]="true" class="contactUs-collapsible-panel"> + <div class="contactUs-txt" [hidden]="rowData.contact_name || rowData.contact_email || rowData.url_Info || rowData.desc"> + <span class="contactUs-collapsible-panel-spn"> + No application information is available. Please use the links above to contact the ECOMP Portal team. + </span> + </div> + <div class="contactUs-txt" *ngIf="rowData.contact_name || rowData.contact_email || rowData.url_Info || rowData.desc"> + <table class="contactUs-main-table"> + <tr> + <td class="contactUs-panel-labels contactUs-main-panel-labels">Contact:</td> + <td class="contactUs-panel-labels contactUs-main-panel-value">{{rowData.contact_name}}</td> + </tr> + <tr> + <td class="contactUs-panel-labels">Email:</td> + <td class="contactUs-panel-labels"><a href="mailto:{{rowData.contact_email}}" target="_top">{{rowData.contact_email}}</a></td> + </tr> + <tr> + <td class="contactUs-panel-labels">Info URL:</td> + <td class="contactUs-panel-labels"><a href="{{rowData.url_Info}}" target="_blank">{{rowData.url_Info}}</a></td> + </tr> + <tr> + <td class="contactUs-panel-labels">Description:</td> + <td class="contactUs-panel-labels">{{rowData.desc}}</td> + </tr> + <tr> + <td class="contactUs-panel-labels">Get access:</td> + <td class="contactUs-panel-labels"><a href="javascript:void(0)" (click)="goGetAccess(rowData.app_name);">Click for application and role information</a></td> + </tr> + </table> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us.component.scss b/portal-FE-common/src/app/pages/contact-us/contact-us.component.scss new file mode 100644 index 00000000..b3fb8d6a --- /dev/null +++ b/portal-FE-common/src/app/pages/contact-us/contact-us.component.scss @@ -0,0 +1,74 @@ + +/*- + * ============LICENSE_START========================================== + * ONAP Portal + * =================================================================== + * Copyright (C) 2017 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============================================ + * + * + */ +.w-ecomp-contactUs-home .contactUs-txt { + font-weight: 400; + color: #666; + font-size: 15px; + font-family: Omnes-ECOMP-W02-Medium,Arial; + margin: 10px; +} + +.w-ecomp-contactUs-home .contactUs-home-container .contactUs-general-div { + margin: auto!important; + padding-top: 15px; + padding-bottom: 15px; + margin-top: 0; + margin-right: 0; + margin-left: 0; + margin-bottom: 0; + width: 1170px; +} + +.w-ecomp-contactUs-home .w-ecomp-main-view-title { + font-family: Omnes-ECOMP-W02,Arial; + font-size: 20px; +} + +button#edit-button-contact-us { + float: right; +} + +.container th{ + padding-bottom: 15px; + font-weight: bold; +} + +.w-ecomp-contactUs-home .contactUs-collapsible-panel { + margin: auto; +} diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us.component.spec.ts b/portal-FE-common/src/app/pages/contact-us/contact-us.component.spec.ts new file mode 100644 index 00000000..db77e078 --- /dev/null +++ b/portal-FE-common/src/app/pages/contact-us/contact-us.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 { ContactUsComponent } from './contact-us.component'; + +describe('ContactUsComponent', () => { + let component: ContactUsComponent; + let fixture: ComponentFixture<ContactUsComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ContactUsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ContactUsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-common/src/app/pages/contact-us/contact-us.component.ts b/portal-FE-common/src/app/pages/contact-us/contact-us.component.ts new file mode 100644 index 00000000..d58733bd --- /dev/null +++ b/portal-FE-common/src/app/pages/contact-us/contact-us.component.ts @@ -0,0 +1,196 @@ +/*- + * ============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 { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { ContactUsService } from '../../shared/services/index'; +import { ContactUsManageComponent } from './contact-us-manage/contact-us-manage.component'; + +@Component({ + selector: 'app-contact-us', + templateUrl: './contact-us.component.html', + styleUrls: ['./contact-us.component.scss'] +}) +export class ContactUsComponent implements OnInit { + + contactUsList: Array<Object> = []; + appTable: Array<Object> = []; + functionalTableData: Array<Object> = []; + + ush_TicketInfoUrl: string; + portalInfo_Address: string; + feedback_Url: string; + showUp: boolean = true; + showDown: boolean = false; + + result: any; + isEditMode: boolean = false; + displayedColumns: string[] = ['category', 'eCOMPFunctions','eCOMPApplications']; + dataSource = new MatTableDataSource(this.functionalTableData); + @ViewChild(MatSort) sort: MatSort; + @ViewChild(MatPaginator) paginator: MatPaginator; + + constructor(public contactUsService: ContactUsService, public ngbModal: NgbModal) { } + + ngOnInit() { + this.appTable=[]; + this.functionalTableData=[]; + + this.getContactUSPortalDetails(); + this.updateContactUsTable(); + this.getAppCategoryFunctions() + } + + getContactUSPortalDetails(){ + console.log("getContactUSPortalDetails called..."); + this.contactUsService.getContactUSPortalDetails() + .subscribe( _data => { + this.result = _data; + console.log("getContactUSPortalDetails Data :: ", _data); + if (this.result.response == null || this.result.response == 'undefined') { + console.log('ContactUsService::getContactUSPortalDetails Failed: Result or result.data is null'); + }else{ + var source = JSON.parse(this.result.response); + this.ush_TicketInfoUrl = source.ush_ticket_url; + this.portalInfo_Address = source.feedback_email_address; + this.feedback_Url = source.portal_info_url; + } + },error =>{ + console.log(error); + }); + } + + updateContactUsTable(){ + console.log("updateContactUsTable called..."); + this.contactUsService.getAppsAndContacts() + .subscribe( _data => { + this.result = _data; + console.log("getAppsAndContacts Data :: ", _data); + if (this.result.response == null || this.result.response == 'undefined') { + console.log('ContactUsService::getAppsAndContacts Failed: Result or result.data is null'); + }else{ + var tableData=[]; + var source = this.result.response; + for(var i=0; i<source.length; i++) { + var dataArr = source[i]; + if ( !dataArr.appName || dataArr.appId == 1) { + continue; + } + + var dataTemp={ + app_name: dataArr.appName, + contact_name: dataArr.contactName, + contact_email: dataArr.contactEmail, + desc: dataArr.description, + url_Info: dataArr.url, + app_Id: dataArr.appId, + } + + tableData.push(dataTemp); + } + + this.appTable=tableData; + } + },error =>{ + console.log(error); + }); + } + + getAppCategoryFunctions(){ + console.log("getAppCategoryFunctions called"); + this.contactUsService.getAppCategoryFunctions() + .subscribe( _data => { + this.result = _data; + console.log("getAppCategoryFunctions Data :: ", _data); + if (this.result.response == null || this.result.response == 'undefined') { + console.log('ContactUsService::getAppCategoryFunctions Failed: Result or result.data is null'); + }else{ + var tablefunctionalData=[]; + var source = this.result.response; + for(var i=0;i<source.length; i++) { + var datafunctionalArr = source[i]; + var datafuntionalTemp={ + category: datafunctionalArr.category, + app_Name: datafunctionalArr.application, + functions: datafunctionalArr.functions, + app_Id: datafunctionalArr.appId, + } + tablefunctionalData.push(datafuntionalTemp); + } + this.functionalTableData = tablefunctionalData; + this.populateTableData(this.functionalTableData); + } + },error =>{ + console.log(error); + }); + } + + populateTableData(functionalTableData: Array<Object>){ + this.dataSource = new MatTableDataSource(functionalTableData); + this.dataSource.sort = this.sort; + this.dataSource.paginator = this.paginator; + } + + editContactUsModal() { + const modalRef = this.ngbModal.open(ContactUsManageComponent, { size: 'lg' }); + } + + showApplicationInfo(appId: any){ + console.log("AppId Contact US...",appId); + let appInfoDiv = document.getElementById('collapse'+appId); + let uparrowDiv = document.getElementById('arrowup'+appId); + let downarrowDiv = document.getElementById('arrowdown'+appId); + + if(!appInfoDiv.getAttribute('hidden')){ + appInfoDiv.setAttribute("hidden","true"); + uparrowDiv.setAttribute("hidden", "true"); + downarrowDiv.removeAttribute("hidden"); + }else if(appInfoDiv.getAttribute('hidden')){ + appInfoDiv.removeAttribute("hidden"); + uparrowDiv.removeAttribute("hidden"); + downarrowDiv.setAttribute("hidden","true"); + } + } + + goGetAccess(app_name: any){ + console.log("Get Access :: goGetAccess method implemetation is pending... appName : ",app_name); + } + +} diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.html b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.html new file mode 100644 index 00000000..4ec8ae3d --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.html @@ -0,0 +1,214 @@ +<!-- + ============LICENSE_START========================================== + ONAP Portal + =================================================================== + Copyright (C) 2017 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"> + <form name="form" (ngSubmit)="f.form.valid && saveChanges()" #f="ngForm" novalidate autocomplete="off"> + + <!--Modal Headers--> + <div class="modal-header"> + <h4 class="modal-title">Microservice Onboarding</h4> + <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')"> + <span aria-hidden="true">×</span> + </button> + </div> + + <!--Modal Body goes here--> + <div class="modal-body"> + <div id="microservices" class="microservice-add-details-model"> + <div class="microservice-properties-main"> + <div class="item required"> + <div class="item-label">Microservice Name</div> + <input id="microservice-details-input-name" class="table-search-field" + type="text" name="name" #name="ngModel" ng-pattern="/^[\w -]*$/" maxlength="100" + [(ngModel)]="ms.name" + ng-change="microserviceAddDetails.updateServiceName()" + [ngClass]="{'is-invalid': f.submitted && name.invalid}" required /> + + <div class="error-container" *ngIf="f.submitted && name.invalid"> + <div class="error-container"> + <small id="microservices-details-input-name-required" class="err-message"> + Microservice Name is required + </small> + </div> + </div> + </div> + + + <div class="item required"> + <div class="item-label">Microservice Description</div> + <textarea b2b-reset b2b-reset-textarea id="widgets-details-input-desc" + name="desc" [(ngModel)]="ms.desc" #desc="ngModel" class="microservice-desc" + ng-change="microserviceAddDetails.updateDesc()" + [ngClass]="{'is-invalid': f.submitted && desc.invalid}" required> + </textarea> + + <div class="error-container" *ngIf="f.submitted && desc.invalid"> + <div class="error-container"> + <small id="microservices-details-input-desc-required" class="err-message"> + Microservice Description is required + </small> + </div> + </div> + </div> + + <div class="item required"> + <div class="service-select"> + <mat-form-field> + <mat-label>Applications Name</mat-label> + <mat-select name="microservice-details-application-select" + [(ngModel)]="ms.appId" #appId="ngModel" [(value)]="selected" + [ngClass]="{'is-invalid': f.submitted && appId.invalid}" required> + <mat-option *ngFor="let d of applicationList" [value]="d.value" >{{d.title}}</mat-option> + </mat-select> + </mat-form-field> + </div> + + <div class="error-container" *ngIf="f.submitted && appId.invalid"> + <div class="error-container"> + <small id="microservices-details-input-appid-required" class="err-message"> + Please select microservice Application + </small> + </div> + </div> + </div> + + <div class="item required"> + <div class="item-label">Microservice Endpoint URL</div> + <input id="microservice-details-input-endpoint-url" + [(ngModel)]="ms.url" #url="ngModel" ng-change="microserviceAddDetails.updateURL()" type="text" + name="url" maxlength="200" [ngClass]="{'is-invalid': f.submitted && url.invalid}" required /> + + <div class="error-container" *ngIf="f.submitted && url.invalid"> + <div class="error-container"> + <small id="microservices-details-input-url-required" class="err-message"> + Microservice Endpoint URL is required + </small> + </div> + </div> + </div> + + <div class="item"> + <div class="service-select"> + <mat-form-field> + <mat-label>Security Type</mat-label> + <mat-select name="microservice-details-input-security-type" [(ngModel)]="ms.securityType" [(value)]="selected"> + <mat-option *ngFor="let d of availableSecurityTypes" [value]="d.name" >{{d.name}}</mat-option> + </mat-select> + </mat-form-field> + </div> + </div> + + <div class="item" *ngIf="ms.securityType == 'Basic Authentication'"> + <div class="item-label">Username</div> + <input id="microservice-details-input-username" class="table-search-field" + type="text" name="username" maxlength="100" + [(ngModel)]="ms.username" /> + </div> + + <div class="item" *ngIf="ms.securityType == 'Basic Authentication'"> + <div class="item-label">Password</div> + <input id="microservice-details-input-password" class="table-search-field" + type="password" name="password" maxlength="100" + [(ngModel)]="ms.password" /> + </div> + + <div class="item" *ngIf="isEditMode"> + <div class="left-test-item"> + <div class="item-label">Test Microservice</div> + </div> + <div class="right-test-item"> + <div id="microservice-details-test-button" class="test-button" + (click)="testServiceURL()">Test</div> + </div> + </div> + + <div class="item" *ngIf="isEditMode"> + <div class="item-label">JSON output</div> + <textarea id="microservice-details-input-json" class="json-field" + name="json"></textarea> + </div> + + <div class="add-para-item"> + <div class="item-label add-label-left">Add User Parameter</div> + <div class="icon-primary-accordion-plus" (click)="addParameter()"> + <i class="icon ion-ios-add-circle-outline"></i> + </div> + </div> + + <div class="item"> + <div class="param-label-item-left" + *ngIf="ms.parameterList.length > 0"> + Parameter Key + </div> + <div class="para-label-item-right" + *ngIf="ms.parameterList.length > 0"> + Parameter Default Value + </div> + + <div id="microservice-details-user-paramters" *ngFor="let parameter of ms.parameterList; let i=index"> + <div class="param-item-left"> + <input id="microservice-details-input-user-parameter-key" + class="table-search-field" type="text" name="param-key" maxlength="200" + [(ngModel)]="parameter.para_key" /> + <input id="microservice-details-input-user-parameter-value" + class="table-search-fields" type="text" name="param-value" + maxlength="200" [(ngModel)]="parameter.para_value" /> + </div> + + <div (click)="removeParamItem(parameter)"> + <i class="icon ion-ios-remove-circle-outline"></i> + </div> + </div> + + <div class="microservice-property"> + <mat-checkbox name="active" type="checkbox" [(ngModel)]="ms.active" + id="microservices-checkbox-app-is-enabled" [checked]="ms.active"> + Active + </mat-checkbox> + </div> + </div> + </div> + </div> + </div> + <!--Modal Footer goes Here--> + <div class="modal-footer"> + <button type="submit" class="btn btn-primary">Save</button> + <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button> + </div> + </form> +</div>
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.scss b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.scss new file mode 100644 index 00000000..1ea39095 --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.scss @@ -0,0 +1,211 @@ +/*- + * ============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============================================ + * + * + */ + +::ng-deep .modal-dialog { + max-width: 600px; + width: 600px; + overflow-x: auto; + overflow-y: auto; +} + +::ng-deep .modal-body { + padding: -1rem; +} + +::ng-deep .mat-form-field-infix { + width: 400px; +} + +.microservice-add-details-model .microservice-properties-main { + padding-left: 20px; + padding-right: 20px; + margin-bottom: 50px; + height: 430px; + width: 100%; + overflow-x: auto; +} + +.microservice-add-details-model .microservice-properties-main .item { + position: relative; + margin-bottom: 15px; + width: 400px; +} + +.microservice-add-details-model .microservice-properties-main .item .error-container { + position: absolute; + width: 280px; + display: block; + height: 12px; + line-height: 12px; +} + +.microservice-add-details-model .microservice-properties-main .item .error-container .err-message { + color: #cf2a2a; + font-size: 10px; +} + +.microservice-add-details-model .microservice-properties-main .item .item-label { + color: #5a5a5a; + font-family: Omnes-ECOMP-W02,Arial; + font-size: 14px; +} + +.microservice-add-details-model .microservice-properties-main .item .left-test-item { + display: inline-block; + width: 85%; + background: #fff; +} + +.microservice-add-details-model .microservice-properties-main .item .right-test-item { + position: relative; + display: inline-block; + width: 15%; + float: right; +} + +.microservice-add-details-model .microservice-properties-main .item .test-button { + color: #fff; + font-family: Omnes-ECOMP-W02-Medium,Arial; + font-size: 14px; + border-style: solid; + border-width: 1px; + border-radius: 6px; + box-shadow: 0 1px 0.99px 0.01px rgba(2,60,89,.004); + height: 29px; + line-height: 29px; + cursor: pointer; + text-align: center; + background: #067ab4; +} + +.microservice-add-details-model .microservice-properties-main .item { + position: relative; + margin-bottom: 15px; + width: 400px; +} + +.microservice-add-details-model .microservice-properties-main .add-para-item { + position: relative; + display: inline-flex; +} + +.microservice-add-details-model .microservice-properties-main .add-para-item .add-label-left { + line-height: 25px; + height: 30px; + vertical-align: middle; + display: inline-block; + margin-right: 10px; + background: #fff; + color: #5a5a5a; + font-family: Omnes-ECOMP-W02,Arial; + font-size: 14px; +} + +.microservice-add-details-model .microservice-properties-main .microservice-property { + margin-top: 10px; + position: relative; +} + +.icon-primary-accordion-minus, .icon-primary-expanded, .icon-primary-accordion-plus, .icon-primary-collapsed { + font-size: 20px !important; +} + +#microservice-details-input-name{ + width: 16em; +} + +#widgets-details-input-desc{ + width: 25em; +} + +.microservice-desc { + overflow: auto; + resize: vertical; + width: 29em; +} + +.json-field { + overflow: auto; + resize: vertical; + width: 25em; +} + +#microservice-details-input-app{ + width: 25em; + height: 32px; +} + +#microservice-details-input-endpoint-url{ + width: 25em; +} + +#microservice-details-input-security-type{ + width: 25em; + height: 32px; +} + +.microservice-add-details-model .microservice-properties-main .item .para-label-item-right { + margin-left: 201px!important; + position: absolute!important; + margin-top: -19px!important; + width: 50%!important; +} + +.microservice-add-details-model .microservice-properties-main .item .para-item-right { + margin-top: -27px; + position: absolute; + margin-left: 500px; +} + +.table-search-field { + width: 48% !important; + margin-bottom: 5px; +} + +#microservice-details-user-paramters{ + display: inline-flex; +} + +.required:before { + color: #cf2a2a; + margin-right: 2px; + content: "* "; + position: absolute; + top: 28px; + left: -10px; +}
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.spec.ts b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.spec.ts new file mode 100644 index 00000000..5589854c --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.spec.ts @@ -0,0 +1,62 @@ +/*- + * ============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 { MicroserviceAddDetailsComponent } from './microservice-add-details.component'; + +describe('MicroserviceAddDetailsComponent', () => { + let component: MicroserviceAddDetailsComponent; + let fixture: ComponentFixture<MicroserviceAddDetailsComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MicroserviceAddDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MicroserviceAddDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.ts b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.ts new file mode 100644 index 00000000..5e359dd4 --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.ts @@ -0,0 +1,303 @@ +/*- + * ============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 { IMircroservies } from 'src/app/shared/model/microservice-onboarding/microservices'; +import { MicroserviceService, WidgetOnboardingService } from '../../../shared/services/index'; +import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'; + +@Component({ + selector: 'app-microservice-add-details', + templateUrl: './microservice-add-details.component.html', + styleUrls: ['./microservice-add-details.component.scss'] +}) +export class MicroserviceAddDetailsComponent implements OnInit { + + @Input() public ms: IMircroservies; + @Output() passEntry: EventEmitter<any> = new EventEmitter(); + result: any; + selected: any; + isEditMode: any; + originalName: string; + dupliateName = false; + emptyServiceName = false; + emptyServiceDesc = false; + emptyServiceURL = false; + emptyServiceApp = false; + availableSecurityTypes = []; + availableWidgets = []; + applicationList: Array<Object> = []; + + constructor(public microservice: MicroserviceService, public widgetOnboardingService: WidgetOnboardingService, + public activeModal: NgbActiveModal, public ngbModal: NgbModal) { } + + ngOnInit() { + if(this.ms.name){ + this.isEditMode = true; + }else{ + this.isEditMode = false; + } + this.ms.parameterList = []; + this.ms.active = true; + this.populateAvailableApps(); + this.getAvailableSecurityTypes(); + } + + getAvailableWidgets(serviceId){ + console.log("getAvailableWidgets called"); + this.microservice.getWidgetListByService(serviceId) + .subscribe(data => { + this.result = data; + if (this.result == null || this.result) { + console.log('MicroserviceService::getServiceList Failed: Result or result.data is null'); + }else { + this.availableWidgets = []; + for(var i = 0; i < data.length; i++){ + this.availableWidgets.push({ + name: data[i] + }) + } + } + }, error =>{ + console.log(error); + }); + }; + + getAvailableSecurityTypes(): Array<String> { + this.availableSecurityTypes = []; + this.availableSecurityTypes.push({ + id: 0, + name: 'No Authentication' + }); + this.availableSecurityTypes.push({ + id: 1, + name: 'Basic Authentication' + }); + this.availableSecurityTypes.push({ + id: 2, + name: 'Cookie based Authentication' + }); + + return this.availableSecurityTypes; + }; + + populateAvailableApps(){ + this.widgetOnboardingService.populateAvailableApps() + .subscribe( _data => { + let allPortalsFilterObject = {index: 0, title: 'Select Application', value: ''}; + this.applicationList = [allPortalsFilterObject]; + var realAppIndex = 1; + for (let i = 1; i <= _data.length; i++) { + if (!_data[i-1].restrictedApp) { + this.applicationList.push({ + index: realAppIndex, + title: _data[i - 1].name, + value: _data[i - 1].id + }) + realAppIndex = realAppIndex + 1; + } + } + }, error => { + console.log(error); + }); + }; + + addParameter() { + this.ms.parameterList.push({}); + } + + testServiceURL(){ + console.log("testServiceURL called id is :: ",this.ms.id) + this.microservice.getServiceJSON(this.ms.id) + .subscribe( _data => { + this.result = _data; + console.log("testServiceURL response :: ",this.result); + document.getElementById("microservice-details-input-json").innerHTML = (JSON.stringify(this.result)); + }, error => { + document.getElementById("microservice-details-input-json").innerHTML = "Something went wrong. Please go back to the previous page or try again later."; + console.log(error); + }); + } + + removeParamItem(parameter: any){ + console.log("removeParamItem called", parameter); + this.ms.parameterList.splice(parameter.para_key, 1); + this.microservice.getUserParameterById(parameter) + .subscribe(data => { + this.result = data; + if (this.result == null || this.result) { + console.log('MicroserviceService::removeParamItem Failed: Result or result.data is null'); + }else if(this.result && this.result.length > 0) { + this.microservice.deleteUserParameterById(parameter.id) + .subscribe(__data => { + for(var i = 0; i < this.ms.parameterList.length; i++){ + if(this.ms.parameterList[i].para_key == parameter.para_key + && this.ms.parameterList[i].para_value == parameter.para_value){ + this.ms.parameterList.splice(i, 1); + return; + } + } + + }, error =>{ + console.log(error); + }); + }else{ + for(var i = 0; i < this.ms.parameterList.length; i++){ + if(this.ms.parameterList[i].para_key == parameter.para_key + && this.ms.parameterList[i].para_value == parameter.para_value){ + this.ms.parameterList.splice(i, 1); + return; + } + } + } + }, error =>{ + console.log(error); + }); + } + + //Add Or Update Microservices. + saveChanges(){ + console.log("saveChanges..",this.ms); + if(this.ms && this.ms.id && this.ms.id !='undefined'){ + this.isEditMode = true; + } + var isValid = true; + + if(this.ms.name == '' + || this.ms.name == undefined){ + this.emptyServiceName = true; + isValid = false; + } + console.log("a >",isValid); + if(this.dupliateName == true){ + isValid = false; + } + console.log("b> ",isValid); + if(this.ms.desc == '' + || this.ms.desc == undefined){ + this.emptyServiceDesc = true; + isValid = false; + } + console.log("c> ",isValid); + + if(this.ms.url == '' + || this.ms.url == undefined){ + this.emptyServiceURL = true; + isValid = false; + } + console.log("d> ",isValid); + + if(this.ms.appId == undefined + || this.ms.appId == null){ + this.emptyServiceApp = true; + isValid = false; + } + + console.log("IsValid flag add/update microservices ",isValid ) + + if(!isValid) + return; + /* + * Check the parameter list, delete those parameters that don't + * have key + */ + if(this.ms && this.ms.parameterList){ + for(var i = 0; i < this.ms.parameterList.length; i++){ + if(this.ms.parameterList[i].para_key == undefined + || this.ms.parameterList[i].para_key == null + || this.ms.parameterList[i].para_key == ""){ + this.ms.parameterList.splice(i, 1); + i--; + } + } + } + if(this.ms.securityType == undefined || + this.ms.securityType == null) + this.ms.securityType = "No Authentication"; + else{ + this.ms.securityType = this.ms.securityType; + this.ms.username = this.ms.username; + this.ms.password = this.ms.password; + } + + var active = 'N'; + if(this.ms.active == true) + active = 'Y'; + + let paramList = []; + if(this.ms.parameterList && this.ms.parameterList.length >0){ + paramList = this.ms.parameterList; + } + var newService = { + name: this.ms.name, + desc: this.ms.desc, + appId: this.ms.appId, + url: this.ms.url, + securityType: this.ms.securityType, + username: this.ms.username, + password: this.ms.password, + active: active, + parameterList: paramList + }; + + if(this.isEditMode){ + console.log("Edit microservice mode called"); + this.microservice.updateService(this.ms.id , newService) + .subscribe( data => { + this.result = data; + console.log("update microservice response :: ",this.result); + this.passEntry.emit(this.result); + this.ngbModal.dismissAll(); + }, error => { + console.log(error); + this.ngbModal.dismissAll(); + }); + }else{ + console.log("Add microservice mode called") + this.microservice.createService(newService) + .subscribe( data => { + this.result = data; + console.log("add microservice response :: ",this.result); + this.passEntry.emit(this.result); + this.ngbModal.dismissAll(); + }, error => { + this.ngbModal.dismissAll(); + console.log(error); + }); + } + } +} diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.html b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.html new file mode 100644 index 00000000..45a68650 --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.html @@ -0,0 +1,89 @@ +<!-- + ============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 id="microservice-onboarding-title" class="w-ecomp-main-view-title"> + <h1 class="heading-page"> Microservice 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)="openAddNewMicroserviceModal('')"> + <i class="icon ion-md-person-add"></i>Add Microservice + </button> + + <table mat-table [dataSource]="dataSource" matSort> + <!-- Microservice Name Column --> + <ng-container matColumnDef="microserviceName"> + <th id="col1" mat-header-cell *matHeaderCellDef mat-sort-header> Microservice Name </th> + <td (click)="openAddNewMicroserviceModal(element)" id="rowheader_t1_{{i}}-microserviceName" + mat-cell *matCellDef="let element; let i = index;"> {{element.name}} + </td> + </ng-container> + + <!-- Microservice serviceEndPointURL Column --> + <ng-container matColumnDef="serviceEndPointURL"> + <th id="col2" mat-header-cell *matHeaderCellDef> Service End Point URL </th> + <td (click)="openAddNewMicroserviceModal(element)" id="rowheader_t1_{{i}}-serviceEndPointURL" + mat-cell *matCellDef="let element; let i=index;"> {{element.url}} </td> + </ng-container> + + <!-- Microservice securityType Column --> + <ng-container matColumnDef="securityType"> + <th id="col2" mat-header-cell *matHeaderCellDef> Security Type </th> + <td (click)="openAddNewMicroserviceModal(element)" id="rowheader_t1_{{i}}-securityType" + mat-cell *matCellDef="let element; let i=index;"> {{element.securityType}} </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)="deleteService(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>
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.scss b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.scss new file mode 100644 index 00000000..135fbda2 --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.scss @@ -0,0 +1,46 @@ +/*- + * ============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 th{ + padding-bottom: 15px; + font-weight: bold; +} + +.ion-md-trash{ + cursor: pointer; +}
\ No newline at end of file diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.spec.ts b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.spec.ts new file mode 100644 index 00000000..09d30a14 --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-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 { MicroserviceOnboardingComponent } from './microservice-onboarding.component'; + +describe('MicroserviceOnboardingComponent', () => { + let component: MicroserviceOnboardingComponent; + let fixture: ComponentFixture<MicroserviceOnboardingComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MicroserviceOnboardingComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MicroserviceOnboardingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.ts b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.ts new file mode 100644 index 00000000..d2d66974 --- /dev/null +++ b/portal-FE-common/src/app/pages/microservice-onboarding/microservice-onboarding.component.ts @@ -0,0 +1,156 @@ +/*- + * ============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 { MicroserviceService, WidgetOnboardingService } from '../../shared/services/index' +import { IMircroservies } from 'src/app/shared/model/microservice-onboarding/microservices'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { MatTableDataSource } from '@angular/material'; +import { MatSort, MatPaginator } from '@angular/material'; +import { MicroserviceAddDetailsComponent } from './microservice-add-details/microservice-add-details.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-microservice-onboarding', + templateUrl: './microservice-onboarding.component.html', + styleUrls: ['./microservice-onboarding.component.scss'] +}) +export class MicroserviceOnboardingComponent implements OnInit { + + showSpinner = true; + microServiceList: Array<IMircroservies> = []; + result: any; + isEditMode: boolean = false; + + displayedColumns: string[] = ['microserviceName', 'serviceEndPointURL', 'securityType','delete']; + dataSource = new MatTableDataSource(this.microServiceList); + @ViewChild(MatSort) sort: MatSort; + @ViewChild(MatPaginator) paginator: MatPaginator; + + constructor(public microservice: MicroserviceService, public ngbModal: NgbModal ) { } + + ngOnInit() { + this.getOnboardingServices(); + } + + getOnboardingServices(){ + //console.log("getOnboardingServices called"); + this.microservice.getServiceList() + .subscribe(_data => { + this.result = _data; + if (this.result == null || this.result == 'undefined') { + console.log('MicroserviceService::getServiceList Failed: Result or result.data is null'); + }else { + this.microServiceList = this.result; + this.populateTableData(this.microServiceList); + } + }, error =>{ + console.log(error); + }); + } + + deleteService(microserviceObj: IMircroservies, isConfirmed: boolean): void { + let confirmationMsg = 'You are about to delete this Microservice : ' + microserviceObj.name+ '. Click OK to continue.'; + this.openInformationModal("Confirmation",confirmationMsg).result.then((result) => { + if (result === 'Ok') { + if(!microserviceObj || microserviceObj == null){ + console.log('MicroserviceOnboardingCtrl::deleteService: No service or ID... cannot delete'); + return; + } + //console.log("service id to delete", microserviceObj.id) + this.microServiceList.splice(this.microServiceList.indexOf(microserviceObj), 1); + this.populateTableData(this.microServiceList); + this.microservice.deleteService(microserviceObj.id) + .subscribe( data => { + this.result = data; + this.microServiceList = []; + this.getOnboardingServices(); + }, error => { + console.log(error); + }); + } + }, (resut) => { + return; + }) + } + + + openAddNewMicroserviceModal(rowData: any){ + //console.log("openAddNewMicroserviceModal getting called..."); + const modalRef = this.ngbModal.open(MicroserviceAddDetailsComponent, { size: 'lg' }); + modalRef.componentInstance.title = 'Microservice Onboarding'; + if(rowData != 'undefined' && rowData){ + modalRef.componentInstance.ms = rowData; + this.isEditMode = true; + }else{ + modalRef.componentInstance.ms = {}; + this.isEditMode = false; + } + modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => { + //console.log("receivedEntry >>> ",receivedEntry); + if(receivedEntry){ + this.microServiceList = []; + this.getOnboardingServices(); + } + }); + } + + populateTableData(microServiceList: Array<IMircroservies>){ + this.dataSource = new MatTableDataSource(microServiceList); + this.dataSource.sort = this.sort; + this.dataSource.paginator = this.paginator; + } + + applyFilter(filterValue: string) { + this.dataSource.filter = filterValue.trim().toLowerCase(); + } + + 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; + } +} |