GUI2 Framework as a standalone NPM Library
There are a few changes going on here
1) The fw part of GUI has been moved out in to its own project
a) several files are renamed (files 21-83)
b) the project has its own BUILD file (file 5)
c) there are a few files created by Angular CLI here - mostly script generated (files 7-20)
d) package-lock.json is a big generated file that has to be versioned (file 13)
2) The view in the main GUI2 project now refer to this library (see BUILD file 110)
a) some useless files were removed (files 115 - 139)
b) several files are changed to update references (files 140-202)
c) this breaks the BUCK build so I've removed the BUCK file and references to it (file 109)
Change-Id: I48bc3253edfcf5947f1582731ba739a1296012f5
diff --git a/web/gui2/src/main/webapp/app/nav/nav.component.css b/web/gui2/src/main/webapp/app/nav/nav.component.css
new file mode 100644
index 0000000..5030be8
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/nav/nav.component.css
@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+
+/*
+ ONOS GUI -- Navigation (layout) -- CSS file
+ */
+
+#nav {
+ position: absolute;
+ top: 48px;
+ left: 0;
+ padding: 0;
+ z-index: 3000;
+}
+
+html[data-platform='iPad'] #nav {
+ top: 60px;
+}
+
+#nav .nav-hdr {
+ font-weight: bold;
+ font-variant: small-caps;
+ text-transform: uppercase;
+ font-size: 12pt;
+ padding: 8px 15px;
+}
+
+#nav a {
+ text-decoration: none;
+ font-size: 12pt;
+ font-weight: lighter;
+ display: block;
+ padding: 6px 10px;
+ margin: 0 7px;
+}
+
+#nav a div {
+ display: inline-block;
+ vertical-align: middle;
+ padding-right: 4px;
+}
diff --git a/web/gui2/src/main/webapp/app/nav/nav.component.html b/web/gui2/src/main/webapp/app/nav/nav.component.html
new file mode 100644
index 0000000..505dc46
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/nav/nav.component.html
@@ -0,0 +1,52 @@
+<!--
+~ Copyright 2014-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.
+-->
+<nav id="nav" [@navState]="ns.showNav">
+ <div id="platform" class="nav-hdr">{{ lionFn('cat_platform') }}</div>
+
+ <a id="app" (click)="ns.hideNav()" routerLink="/app" routerLinkActive="active">
+ <onos-icon iconId="nav_apps"></onos-icon> Applications</a>
+
+ <a id="settings" (click)="ns.hideNav()" routerLink="/settings" routerLinkActive="active">
+ <onos-icon iconId="nav_settings"></onos-icon> Settings</a>
+
+ <a id="cluster" (click)="ns.hideNav()" routerLink="/cluster" routerLinkActive="active">
+ <onos-icon iconId="nav_cluster"></onos-icon> Cluster Nodes</a>
+
+ <a id="processor" (click)="ns.hideNav()" routerLink="/processor" routerLinkActive="active">
+ <onos-icon iconId="nav_processors"></onos-icon> Packet Processors</a>
+
+ <a id="partition" (click)="ns.hideNav()" routerLink="/partition" routerLinkActive="active">
+ <onos-icon iconId="nav_partitions"></onos-icon> Partitions</a>
+
+ <div id="network" class="nav-hdr">{{ lionFn('cat_network') }}</div>
+
+ <a id="device" (click)="ns.hideNav()" routerLink="/device" routerLinkActive="active">
+ <onos-icon iconId="nav_devs"></onos-icon> Devices</a>
+
+ <a id="link" (click)="ns.hideNav()" routerLink="/link" routerLinkActive="active">
+ <onos-icon iconId="nav_links"></onos-icon> Links</a>
+
+ <a id="host" (click)="ns.hideNav()" routerLink="/host" routerLinkActive="active">
+ <onos-icon iconId="nav_hosts"></onos-icon> Hosts</a>
+
+ <a id="intent" (click)="ns.hideNav()" routerLink="/intent" routerLinkActive="active">
+ <onos-icon iconId="nav_intents"></onos-icon> Intents</a>
+
+ <a id="tunnel" (click)="ns.hideNav()" routerLink="/tunnel" routerLinkActive="active">
+ <onos-icon iconId="nav_tunnels"></onos-icon> Tunnels</a>
+
+ <div id="other" class="nav-hdr">{{ lionFn('cat_other') }}</div>
+</nav>
diff --git a/web/gui2/src/main/webapp/app/nav/nav.component.spec.ts b/web/gui2/src/main/webapp/app/nav/nav.component.spec.ts
new file mode 100644
index 0000000..c5e8c35
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/nav/nav.component.spec.ts
@@ -0,0 +1,203 @@
+/*
+ * 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,
+ FnService,
+ IconComponent,
+ IconService,
+ LionService,
+ LogService,
+ NavService } from 'gui2-fw-lib';
+import { NavComponent } from './nav.component';
+
+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#platform.nav-hdr'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual('%cat_platform%');
+ });
+
+ it('should have an app view link inside a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav a#app'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual(' Applications');
+ });
+
+ it('should have an cluster view link inside a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav a#cluster'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual(' Cluster Nodes');
+ });
+
+ it('should have an processor view link inside a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav a#processor'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual(' Packet Processors');
+ });
+
+ it('should have a settings view link inside a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav a#settings'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual(' Settings');
+ });
+
+ it('should have a partition view link inside a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav a#partition'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual(' Partitions');
+ });
+
+ it('should have a network div.nav-hdr inside a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav div#network.nav-hdr'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual('%cat_network%');
+ });
+
+ it('should have a device view link inside a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav a#device'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual(' Devices');
+ });
+
+ it('should have a link view link inside a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav a#link'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual(' Links');
+ });
+
+ it('should have a host view link inside a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav a#host'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual(' Hosts');
+ });
+
+ it('should have a intent view link inside a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav a#intent'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual(' Intents');
+ });
+
+ it('should have a tunnel view link inside a nav#nav', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('nav#nav a#tunnel'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual(' Tunnels');
+ });
+});
diff --git a/web/gui2/src/main/webapp/app/nav/nav.component.ts b/web/gui2/src/main/webapp/app/nav/nav.component.ts
new file mode 100644
index 0000000..b543049
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/nav/nav.component.ts
@@ -0,0 +1,98 @@
+/*
+ * 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 { Component, OnInit, OnDestroy } from '@angular/core';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+
+import {
+ LionService,
+ LogService,
+ NavService
+} from 'gui2-fw-lib';
+
+/**
+ * ONOS GUI -- Navigation Module
+ *
+ * Note: While this NavComponent could arguably be moved to the gui2-fw-lib
+ * it brings problems in recognizing the "routerlink" directives as being part
+ * of this application. So for that reason Nav must remain here for routing to work
+ */
+@Component({
+ selector: 'onos-nav',
+ templateUrl: './nav.component.html',
+ styleUrls: ['./nav.theme.css', './nav.component.css'],
+ animations: [
+ trigger('navState', [
+ state('false', style({
+ transform: 'translateY(-100%)'
+ })),
+ state('true', style({
+ transform: 'translateY(0%)'
+ })),
+ transition('0 => 1', animate('100ms ease-in')),
+ transition('1 => 0', animate('100ms ease-out'))
+ ])
+ ]
+})
+export class NavComponent implements OnInit, OnDestroy {
+ lionFn; // Function
+
+ constructor(
+ private log: LogService,
+ private lion: LionService,
+ public ns: NavService
+ ) {
+ this.log.debug('NavComponent constructed');
+ }
+
+ /**
+ * 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 + '%';
+ }
+
+}
diff --git a/web/gui2/src/main/webapp/app/nav/nav.theme.css b/web/gui2/src/main/webapp/app/nav/nav.theme.css
new file mode 100644
index 0000000..1a308ac
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/nav/nav.theme.css
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2016-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.
+ */
+
+/*
+ ONOS GUI -- Navigation (theme) -- CSS file
+ */
+
+#nav {
+ background-color: #231f20;
+}
+
+#nav .nav-hdr {
+ color: #716b6a;
+ background-color: #3c3a3a;
+}
+
+#nav a {
+ color: #c7c7c0;
+ border-bottom: solid #3c3a3a 1px;
+}
+
+#nav a:hover {
+ color: #ffffff;
+}
+
+/* With component styles isolation in Angular 6 these no longer work */
+#nav a div svg.embeddedIcon g.icon .glyph {
+ fill: #007dc4;
+}
+
+#nav a:hover div svg.embeddedIcon g.icon .glyph {
+ fill: #20b2ff;
+}