summaryrefslogtreecommitdiffstats
path: root/portal-FE-common/src/app/layout/components/header
diff options
context:
space:
mode:
Diffstat (limited to 'portal-FE-common/src/app/layout/components/header')
-rw-r--r--portal-FE-common/src/app/layout/components/header/header.component.html130
-rw-r--r--portal-FE-common/src/app/layout/components/header/header.component.scss84
-rw-r--r--portal-FE-common/src/app/layout/components/header/header.component.spec.ts63
-rw-r--r--portal-FE-common/src/app/layout/components/header/header.component.ts181
4 files changed, 458 insertions, 0 deletions
diff --git a/portal-FE-common/src/app/layout/components/header/header.component.html b/portal-FE-common/src/app/layout/components/header/header.component.html
new file mode 100644
index 00000000..45b4e9f9
--- /dev/null
+++ b/portal-FE-common/src/app/layout/components/header/header.component.html
@@ -0,0 +1,130 @@
+<!--
+ ============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 style="bottom: tabBottom; display: flex; height: 100%; overflow: hidden">
+ <nav class="navbar navbar-expand-lg fixed-top">
+ <a class="navbar-brand" href=""> <img src="assets/images/global.logo" style="width:14%"/> &nbsp; ONAP Portal</a>
+ <div class="header-menu-display">
+ <app-header-menu></app-header-menu>
+ </div>
+ <button class="navbar-toggler" type="button" (click)="toggleSidebar()">
+ <i class="icon ion-md-menu" style="color:white;"></i>
+ </button>
+ <div class="collapse navbar-collapse">
+ <ul class="navbar-nav ml-auto">
+ <app-global-search></app-global-search>
+ <li class="nav-item dropdown" ngbDropdown>
+ <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
+ <i class="icon ion-md-bulb"></i> <b class="caret"></b><span class="sr-only"></span>
+ </a>
+ <div class="custom-dropdown-item" ngbDropdownMenu>
+
+ <li class="dropdown-divider"></li>
+ </div>
+ </li>
+ <li class="nav-item dropdown" ngbDropdown>
+ <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
+ <i class="icon ion-md-flag"></i> <b class="caret"></b><span class="sr-only"></span>
+ </a>
+ <div class="dropdown-menu-right" ngbDropdownMenu>
+ <a style="margin-left: 8%;" id="application-role" [routerLink]="['/recentNotifications']"
+ href="javascript:void(0);">
+ {{ 'View All Recent Notifications' }} </a>
+ <li class="dropdown-divider"></li>
+</div>
+</li>
+<li class="nav-item dropdown" ngbDropdown>
+ <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
+ <i class="icon ion-md-person"></i> {{firstName}} <b class="caret"></b>
+ </a>
+ <div class="dropdown-menu-right" ngbDropdownMenu>
+<li class="dropdown-item" style="font-weight: lighter">
+ {{firstName}}, {{lastName}}
+</li>
+<li class="dropdown-item">
+ <span class="dropdown-item-name"> {{ 'Email'}}: </span>
+ <div>
+ <span class="dropdown-item-value">
+ {{loginSnippetEmail}}
+ </span>
+ </div>
+</li>
+<li class="dropdown-item">
+ <span class="dropdown-item-name"> {{ 'User Id' }}: </span>
+ <div>
+ <span class="dropdown-item-value">
+ {{loginSnippetUserid}}
+ </span>
+ </div>
+</li>
+<li class="dropdown-item">
+ <span class="dropdown-item-name"> {{ 'Last login' }}: </span>
+ <div>
+ <span class="dropdown-item-value">
+ {{lastLogin | date:'medium'}}
+ </span>
+ </div>
+</li>
+<li class="custom-display-item">
+ <a (click)="getUserApplicationRoles()" href="javascript:void(0);"><span><i class="icon ion-md-add-circle-outline"
+ [ngClass]="{true: 'icon ion-md-add-circle-outline', false: 'icon ion-md-remove-circle-outline'}[ !displayUserAppRoles]"></i>
+ {{ 'Applications and Roles' }} </span></a>
+ <span class="onap-spinner" *ngIf="isLoading"></span>
+</li> <br>
+<div class="custom-display-item approles" [hidden]="!displayUserAppRoles">
+ <div *ngFor="let ua of userapproles ; index as i">
+ <div class="reg-userApp-value">
+ <span class="dropdown-item-name">{{ua.App}}:</span>
+ </div>
+ <div *ngFor="let role of ua.Roles ; index as i" class="reg-userAppRoles-value">
+ <span *ngIf="role.indexOf('global_')!=-1" id="required" style="color: Red;" visible="false">
+ *</span> <span class="dropdown-item-value">{{role}}</span>
+ </div>
+ <br>
+ </div>
+</div>
+<hr>
+<div id="reg-logout-div" >
+<button type="button" class="btn btn-primary" (click)="allAppsLogout()">
+ <i class="icon ion-md-log-out"></i> {{ 'Log Out' }} </button></div>
+</div>
+</li>
+</ul>
+</div>
+</nav>
+</div> \ No newline at end of file
diff --git a/portal-FE-common/src/app/layout/components/header/header.component.scss b/portal-FE-common/src/app/layout/components/header/header.component.scss
new file mode 100644
index 00000000..65a4be04
--- /dev/null
+++ b/portal-FE-common/src/app/layout/components/header/header.component.scss
@@ -0,0 +1,84 @@
+/*
+ * ============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============================================
+ *
+ *
+ */
+$topnav-background-color: #222;
+:host {
+ .navbar {
+ background-color: $topnav-background-color;
+ .navbar-brand {
+ color: #fff;
+ }
+ .nav-item > a {
+ color: #999;
+ &:hover {
+ color: #fff;
+ }
+ }
+ }
+
+ .dropdown-menu-right.dropdown-menu.show{
+ width: 250px;
+ }
+ .dropdown-item-name {
+ font-weight: bold;
+ }
+
+ .dropdown-item-value {
+ font-weight: lighter;
+ }
+
+ .custom-display-item {
+ display: block;
+ width: 100%;
+ padding: 0.25rem 1.5rem;
+ clear: both;
+ font-weight: 400;
+ color: #212529;
+ text-align: inherit;
+ white-space: nowrap;
+ background-color: transparent;
+ border: 0;
+ }
+
+ .custom-display-item.approles {
+ overflow-y: scroll;
+ height: 250px;
+ }
+ .header-menu-display {
+ width: 250px;
+ }
+}
diff --git a/portal-FE-common/src/app/layout/components/header/header.component.spec.ts b/portal-FE-common/src/app/layout/components/header/header.component.spec.ts
new file mode 100644
index 00000000..1bcd2ffb
--- /dev/null
+++ b/portal-FE-common/src/app/layout/components/header/header.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 { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+ let component: HeaderComponent;
+ let fixture: ComponentFixture<HeaderComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ HeaderComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HeaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/portal-FE-common/src/app/layout/components/header/header.component.ts b/portal-FE-common/src/app/layout/components/header/header.component.ts
new file mode 100644
index 00000000..cb6bdd31
--- /dev/null
+++ b/portal-FE-common/src/app/layout/components/header/header.component.ts
@@ -0,0 +1,181 @@
+/*
+ * ============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============================================
+ *
+ *
+ */
+import { Component, OnInit } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { UserProfileService, MenusService } from 'src/app/shared/services';
+import { CookieService } from 'ngx-cookie-service';
+
+@Component({
+ selector: 'app-header',
+ templateUrl: './header.component.html',
+ styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+ public pushRightClass: string;
+ firstName: string;
+ lastName: string;
+ loginSnippetUserid: any;
+ lastLogin: number;
+ loginSnippetEmail: any;
+ userapproles: any[];
+ displayUserAppRoles: any;
+ isLoading: boolean;
+
+ constructor(public router: Router, private userProfileService: UserProfileService, private menusService: MenusService, private cookieService: CookieService) {
+
+ this.router.events.subscribe(val => {
+ if (
+ val instanceof NavigationEnd &&
+ window.innerWidth <= 992 &&
+ this.isToggled()
+ ) {
+ this.toggleSidebar();
+ }
+ });
+ }
+
+ ngOnInit() {
+ this.pushRightClass = 'push-right';
+ this.getUserInformation();
+ }
+
+ getUserInformation() {
+ this.userProfileService.getFunctionalMenuStaticInfo().toPromise().then((res: any) => {
+ if (res == null || res.firstName == null || res.firstName == '' || res.lastName == null || res.lastName == '') {
+ // $log.info('HeaderCtrl: failed to get all required data, trying user profile');
+ this.userProfileService.getUserProfile().toPromise().then((profile: any) => {
+ this.firstName = profile.firstName;
+ this.lastName = profile.lastName;
+ }, (err) => {
+ // $log.error('Header Controller:: getUserProfile() failed: ' + err);
+ });
+ } else {
+ this.firstName = res.firstName;
+ this.lastName = res.lastName;
+ this.loginSnippetEmail = res.email;
+ this.loginSnippetUserid = res.userId;
+ this.lastLogin = Date.parse(res.last_login);
+ }
+ sessionStorage.userId = res.userId;
+ this.menusService.getFunctionalMenuForUser().toPromise().then((jsonHeaderMenu: any) => {
+ // $scope.menuItems = unflatten(jsonHeaderMenu);
+ // $scope.megaMenuDataObject = $scope.menuItems;
+ }, (err) => {
+ // $log.error('HeaderCtrl::GetFunctionalMenuForUser: HeaderCtrl json returned: ' + err);
+ });
+
+ }, (err) => {
+ // $log.error('HeaderCtrl::getFunctionalMenuStaticInfo failed: ' + err);
+ })
+ }
+
+ // unflatten = function( array, parent, tree ){
+
+ // tree = typeof tree !== 'undefined' ? tree : [];
+ // parent = typeof parent !== 'undefined' ? parent : { menuId: null };
+ // var children = _.filter( array, function(child){ return child.parentMenuId == parent.menuId; });
+
+ // if( !_.isEmpty( children ) ){
+ // if( parent.menuId === null ){
+ // tree = children;
+ // }else{
+ // parent['children'] = children
+ // }
+ // _.each( children, function( child ){ unflatten( array, child ) } );
+ // }
+
+ // return tree;
+ // }
+
+ getUserApplicationRoles() {
+ this.userapproles = [];
+ if (this.displayUserAppRoles) {
+ this.displayUserAppRoles = false;
+ } else {
+ this.displayUserAppRoles = true;
+ this.isLoading = true;
+ this.userProfileService.getUserAppRoles(this.loginSnippetUserid)
+ .subscribe((res: any) => {
+ this.isLoading = false;
+ for (var i = 0; i < res.length; i++) {
+ var userapprole = {
+ App: res[i].appName,
+ Roles: res[i].roleNames,
+ };
+ this.userapproles.push(userapprole);
+ }
+ }, (err) => {
+ this.isLoading = false;
+ });
+ }
+ }
+
+ allAppsLogout() {
+ this.firstName="";
+ this.lastName="";
+ this.displayUserAppRoles=false;
+ var cookieTabs = this.cookieService.get("visInVisCookieTabs").toString;
+ if(cookieTabs!=null){
+ for(var t in cookieTabs){
+
+ var url = cookieTabs[t].content;
+ if(url != "") {
+ this.menusService.logout(url);
+ }
+ }
+ }
+ // wait for individual applications to log out before the portal logout
+ setTimeout(function() {
+ window.location.href = "logout.htm";
+ }, 2000);
+ }
+
+ isToggled(): boolean {
+ const dom: Element = document.querySelector('body');
+ return dom.classList.contains(this.pushRightClass);
+ }
+
+ toggleSidebar() {
+ const dom: any = document.querySelector('body');
+ dom.classList.toggle(this.pushRightClass);
+ }
+
+ onLoggedout() {
+ localStorage.removeItem('isLoggedin');
+ }
+}