Added in panel support - details panels
Change-Id: I2803edd6fe12cb0d97a2d3c45a692ea701786dd2
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav.module.ts b/web/gui2/src/main/webapp/app/fw/nav/nav.module.ts
index d25237f..65f222d 100644
--- a/web/gui2/src/main/webapp/app/fw/nav/nav.module.ts
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav.module.ts
@@ -22,9 +22,6 @@
import { NavComponent } from './nav/nav.component';
import { NavService } from './nav.service';
-import { AppsComponent } from '../../view/apps/apps.component';
-import { DeviceComponent } from '../../view/device/device.component';
-
/**
* ONOS GUI -- Navigation Module
*/
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css
index 3d2f646..5030be8 100644
--- a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.css
@@ -24,7 +24,6 @@
left: 0;
padding: 0;
z-index: 3000;
- visibility: hidden;
}
html[data-platform='iPad'] #nav {
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html
index f61a9ab..cb48492 100644
--- a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.html
@@ -13,13 +13,16 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
-<nav id="nav" [@navState]="ns.showNav?'active':'inactive'">
- <div class="nav-hdr">Platform</div>
+<nav id="nav" [@navState]="ns.showNav">
+ <div class="nav-hdr">{{ lionFn('cat_platform') }}</div>
+
<a (click)="ns.hideNav()" routerLink="/apps" routerLinkActive="active">
- <!--<div onosIcon iconId="nav_apps"></div>
- Using the new IconComponent rather than the directive -->
<onos-icon iconId="nav_apps"></onos-icon>Apps</a>
- <div class="nav-hdr">Network</div>
+
+ <div class="nav-hdr">{{ lionFn('cat_network') }}</div>
+
<a (click)="ns.hideNav()" routerLink="/devices" routerLinkActive="active">
<onos-icon iconId="nav_devs"></onos-icon>Devices</a>
+
+ <div class="nav-hdr">{{ lionFn('cat_other') }}</div>
</nav>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.spec.ts b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.spec.ts
new file mode 100644
index 0000000..e2bd999
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.spec.ts
@@ -0,0 +1,132 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file 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.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { of } from 'rxjs';
+
+import { ConsoleLoggerService } from '../../../consolelogger.service';
+import { FnService } from '../../../fw/util/fn.service';
+import { IconComponent } from '../../svg/icon/icon.component';
+import { IconService } from '../../svg/icon.service';
+import { LionService } from '../../util/lion.service';
+import { LogService } from '../../../log.service';
+import { NavComponent } from './nav.component';
+import { NavService } from '../nav.service';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+class MockNavService {}
+
+class MockIconService {
+ loadIconDef() {}
+}
+
+/**
+ * ONOS GUI -- Util -- Navigation Component - Unit Tests
+ */
+describe('NavComponent', () => {
+ let log: LogService;
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let component: NavComponent;
+ let fixture: ComponentFixture<NavComponent>;
+ const bundleObj = {
+ 'core.view.App': {
+ test: 'test1'
+ }
+ };
+ const mockLion = (key) => {
+ return bundleObj[key] || '%' + key + '%';
+ };
+
+ beforeEach(async(() => {
+ log = new ConsoleLoggerService();
+ ar = new MockActivatedRoute({'debug': 'txrx'});
+
+ windowMock = <any>{
+ location: <any> {
+ hostname: 'foo',
+ host: 'foo',
+ port: '80',
+ protocol: 'http',
+ search: { debug: 'true'},
+ href: 'ws://foo:123/onos/ui/websock/path',
+ absUrl: 'ws://foo:123/onos/ui/websock/path'
+ }
+ };
+ fs = new FnService(ar, log, windowMock);
+
+ TestBed.configureTestingModule({
+ imports: [ BrowserAnimationsModule ],
+ declarations: [ NavComponent, IconComponent ],
+ providers: [
+ { provide: FnService, useValue: fs },
+ { provide: IconService, useClass: MockIconService },
+ { provide: LionService, useFactory: (() => {
+ return {
+ bundle: ((bundleId) => mockLion),
+ ubercache: new Array(),
+ loadCbs: new Map<string, () => void>([])
+ };
+ })
+ },
+ { provide: LogService, useValue: log },
+ { provide: NavService, useClass: MockNavService },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NavComponent);
+ component = fixture.debugElement.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should have a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav'));
+ expect(divDe).toBeTruthy();
+ });
+
+ it('should have a platform div.nav-hdr inside a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav div.nav-hdr'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual('%cat_platform%');
+ });
+
+ it('should have an apps link inside a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav a'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual('Apps');
+ });
+});
diff --git a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts
index 27ae8de..7614e67 100644
--- a/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts
+++ b/web/gui2/src/main/webapp/app/fw/nav/nav/nav.component.ts
@@ -13,10 +13,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+
+import { LionService } from '../../util/lion.service';
import { LogService } from '../../../log.service';
import { NavService } from '../nav.service';
-import { trigger, state, style, animate, transition } from '@angular/animations';
/**
* ONOS GUI -- Navigation Module
@@ -27,30 +29,64 @@
styleUrls: ['./nav.theme.css', './nav.component.css'],
animations: [
trigger('navState', [
- state('inactive', style({
- visibility: 'hidden',
- transform: 'translateX(-100%)'
+ state('false', style({
+ transform: 'translateY(-100%)'
})),
- state('active', style({
- visibility: 'visible',
- transform: 'translateX(0%)'
+ state('true', style({
+ transform: 'translateY(0%)'
})),
- transition('inactive => active', animate('100ms ease-in')),
- transition('active => inactive', animate('100ms ease-out'))
+ transition('0 => 1', animate('100ms ease-in')),
+ transition('1 => 0', animate('100ms ease-out'))
])
]
})
-export class NavComponent implements OnInit {
+export class NavComponent implements OnInit, OnDestroy {
+ lionFn; // Function
- constructor(
- private log: LogService,
- public ns: NavService
- ) {
- this.log.debug('NavComponent constructed');
- }
+ constructor(
+ private log: LogService,
+ private lion: LionService,
+ public ns: NavService
+ ) {
+ this.log.debug('NavComponent constructed');
+ }
- ngOnInit() {
- this.log.debug('NavComponent initialized');
- }
+ /**
+ * If LION is not ready we make do with a dummy function
+ * As soon a lion gets loaded this function will be replaced with
+ * the real thing
+ */
+ ngOnInit() {
+ if (this.lion.ubercache.length === 0) {
+ this.lionFn = this.dummyLion;
+ this.lion.loadCbs.set('nav', () => this.doLion());
+ this.log.debug('LION not available when NavComponent initialized');
+ } else {
+ this.doLion();
+ }
+ }
+
+ /**
+ * Nav component should never be closed, but in case it does, it's
+ * safer to tidy up after itself
+ */
+ ngOnDestroy() {
+ this.lion.loadCbs.delete('nav');
+ }
+
+ /**
+ * Read the LION bundle for App and set up the lionFn
+ */
+ doLion() {
+ this.lionFn = this.lion.bundle('core.fw.Nav');
+ }
+
+ /**
+ * A dummy implementation of the lionFn until the response is received and the LION
+ * bundle is received from the WebSocket
+ */
+ dummyLion(key: string): string {
+ return '%' + key + '%';
+ }
}