Added in panel support - details panels
Change-Id: I2803edd6fe12cb0d97a2d3c45a692ea701786dd2
diff --git a/web/gui2/src/main/webapp/app/fw/layer/detailspanel.service.ts b/web/gui2/src/main/webapp/app/fw/layer/detailspanel.service.ts
deleted file mode 100644
index 5699262..0000000
--- a/web/gui2/src/main/webapp/app/fw/layer/detailspanel.service.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright 2017-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 { Injectable } from '@angular/core';
-import { EditableTextService } from '../layer/editabletext.service';
-import { FnService } from '../util/fn.service';
-import { IconService } from '../svg/icon.service';
-import { LogService } from '../../log.service';
-import { MastService } from '../mast/mast.service';
-import { PanelService } from './panel.service';
-import { WebSocketService } from '../remote/websocket.service';
-
-/**
- * ONOS GUI -- Layer -- Details Panel Service
- */
-@Injectable()
-export class DetailsPanelService {
-
- constructor(
- private ets: EditableTextService,
- private fs: FnService,
- private is: IconService,
- private log: LogService,
- private mast: MastService,
- private panel: PanelService,
- private wss: WebSocketService
- ) {
- this.log.debug('DetailsPanelService constructed');
- }
-
-}
diff --git a/web/gui2/src/main/webapp/app/fw/layer/dialog.service.ts b/web/gui2/src/main/webapp/app/fw/layer/dialog.service.ts
index d6c37bb..378cd9b 100644
--- a/web/gui2/src/main/webapp/app/fw/layer/dialog.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/layer/dialog.service.ts
@@ -19,21 +19,21 @@
import { FnService } from '../util/fn.service';
import { KeyService } from '../util/key.service';
import { LogService } from '../../log.service';
-import { PanelService } from './panel.service';
/**
* ONOS GUI -- Layer -- Dialog Service
*
* Builds on the panel service to provide dialog functionality.
*/
-@Injectable()
+@Injectable({
+ providedIn: 'root',
+})
export class DialogService {
constructor(
private fs: FnService,
private ks: KeyService,
private log: LogService,
- private ps: PanelService,
) {
this.log.debug('DialogService constructed');
}
diff --git a/web/gui2/src/main/webapp/app/fw/layer/layer.module.ts b/web/gui2/src/main/webapp/app/fw/layer/layer.module.ts
index b4e39b2..4e8abe7 100644
--- a/web/gui2/src/main/webapp/app/fw/layer/layer.module.ts
+++ b/web/gui2/src/main/webapp/app/fw/layer/layer.module.ts
@@ -17,11 +17,9 @@
import { CommonModule } from '@angular/common';
import { FlashComponent } from './flash/flash.component';
-import { DetailsPanelService } from './detailspanel.service';
import { DialogService } from './dialog.service';
import { EditableTextService } from './editabletext.service';
import { LoadingService } from './loading.service';
-import { PanelService } from './panel.service';
import { QuickHelpService } from './quickhelp.service';
import { VeilComponent } from './veil/veil.component';
@@ -41,12 +39,6 @@
VeilComponent
],
providers: [
- DetailsPanelService,
- DialogService,
- EditableTextService,
- LoadingService,
- PanelService,
- QuickHelpService
]
})
export class LayerModule { }
diff --git a/web/gui2/src/main/webapp/app/fw/layer/panel.service.ts b/web/gui2/src/main/webapp/app/fw/layer/panel.service.ts
deleted file mode 100644
index 7ccb7d9..0000000
--- a/web/gui2/src/main/webapp/app/fw/layer/panel.service.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * 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 { Injectable } from '@angular/core';
-import { FnService } from '../util/fn.service';
-import { LogService } from '../../log.service';
-
-/**
- * ONOS GUI -- Layer -- Panel Service
- */
-@Injectable()
-export class PanelService {
-
- constructor(
- private fs: FnService,
- private log: LogService
- ) {
- this.log.debug('PanelService constructed');
- }
-
-}
diff --git a/web/gui2/src/main/webapp/app/fw/layer/quickhelp.service.ts b/web/gui2/src/main/webapp/app/fw/layer/quickhelp.service.ts
index f433a2b..b515180 100644
--- a/web/gui2/src/main/webapp/app/fw/layer/quickhelp.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/layer/quickhelp.service.ts
@@ -24,7 +24,9 @@
*
* Provides a mechanism to display key bindings and mouse gesture notes.
*/
-@Injectable()
+@Injectable({
+ providedIn: 'root',
+})
export class QuickHelpService {
constructor(
diff --git a/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.spec.ts b/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.spec.ts
index 0ed493f..caa52ec 100644
--- a/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.spec.ts
@@ -18,32 +18,55 @@
ONOS GUI -- Layer -- Veil Service - Unit Tests
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
import { VeilComponent } from './veil.component';
import { ConsoleLoggerService } from '../../../consolelogger.service';
+import { FnService } from '../../../fw/util/fn.service';
import { LogService } from '../../../log.service';
import { KeyService } from '../../util/key.service';
import { GlyphService } from '../../svg/glyph.service';
+import { of } from 'rxjs';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
class MockKeyService {}
class MockGlyphService {}
describe('VeilComponent', () => {
- let log: LogService;
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
- beforeEach(() => {
- log = new ConsoleLoggerService();
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({});
+ windowMock = <any>{
+ location: <any> {
+ hostname: 'foo'
+ }
+ };
+ fs = new FnService(ar, logSpy, windowMock);
TestBed.configureTestingModule({
declarations: [ VeilComponent ],
providers: [
- { provide: LogService, useValue: log },
+ { provide: FnService, useValue: fs },
+ { provide: LogService, useValue: logSpy },
{ provide: KeyService, useClass: MockKeyService },
{ provide: GlyphService, useClass: MockGlyphService },
+ { provide: 'Window', useValue: windowMock },
]
});
- });
+ logServiceSpy = TestBed.get(LogService);
+ }));
it('should create', () => {
const fixture = TestBed.createComponent(VeilComponent);
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast.service.ts b/web/gui2/src/main/webapp/app/fw/mast/mast.service.ts
index d357458..34a3d8b 100644
--- a/web/gui2/src/main/webapp/app/fw/mast/mast.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast.service.ts
@@ -17,7 +17,7 @@
import { FnService } from '../util/fn.service';
import { LogService } from '../../log.service';
-const padMobile = 16;
+const PADMOBILE = 16;
/**
* ONOS GUI -- Masthead Service
@@ -32,7 +32,7 @@
private log: LogService
) {
if (this.fs.isMobile()) {
- this.mastHeight += padMobile;
+ this.mastHeight += PADMOBILE;
}
this.log.debug('MastService constructed');
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.css b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.css
index b5f1e5f..5b2d464 100644
--- a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.css
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.css
@@ -17,10 +17,20 @@
/*
ONOS GUI -- Masthead (layout) -- CSS file
*/
+#mast-top-block {
+ display: block;
+ z-index: -1;
+ height: 48px;
+ width: 100%;
+}
#mast {
+ position: absolute;
+ width: 100%;
+ top: 0px;
height: 48px;
padding: 0;
+ z-index: 10000;
}
#mast a:hover {
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.html b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.html
index e7d0995..72242ba 100644
--- a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.html
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.html
@@ -13,6 +13,12 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
+<div id="mast-top-block"></div>
+<!-- The mast-top-block is an inline display element that pushes any
+ subsequent elements down the page. It has a height of 48px
+ The mast block overlays the mast-top-block. It is is positioned
+ absolutely so that the nav component can slide in behind it when
+ not shown -->
<div id="mast" align="left">
<span class="nav-menu-button clickable" (click)="ns.toggleNav()">
<img src="data/img/nav-menu-mojo.png"/>
@@ -21,17 +27,14 @@
<div id="mast-right">
<nav>
<div class="dropdown-parent">
- <a class="clickable user-menu__name">{{username}} <i class="dropdown-icon"></i></a>
+ <a class="clickable user-menu__name">{{ username }} <i class="dropdown-icon"></i></a>
<div class="dropdown">
- <!--<a href="rs/logout"> {{getLion('logout')}} </a> !!FIXME-->
- <a href="rs/logout">logout</a>
+ <a href="rs/logout"> {{ lionFn('logout') }} </a>
</div>
</div>
<div class="ctrl-btns">
- <div class="active clickable icon"
- tooltip tt-msg="helpTip"
- ng-click="directTo()">
- <onos-icon iconId="query" iconSize="32"></onos-icon>
+ <div class="active clickable icon" (click)="directTo()">
+ <onos-icon iconId="query" iconSize="32" toolTip="{{ lionFn('tt_help') }}"></onos-icon>
</div>
</div>
</nav>
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.spec.ts b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.spec.ts
new file mode 100644
index 0000000..3d061a5
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.spec.ts
@@ -0,0 +1,131 @@
+/*
+ * 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 { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+import { LogService } from '../../../log.service';
+import { ConsoleLoggerService } from '../../../consolelogger.service';
+import { MastComponent } from './mast.component';
+import { IconComponent } from '../../svg/icon/icon.component';
+import { LionService } from '../../util/lion.service';
+import { IconService } from '../../svg/icon.service';
+import { NavService } from '../../nav/nav.service';
+import { WebSocketService } from '../../remote/websocket.service';
+
+class MockNavService {}
+
+class MockIconService {
+ loadIconDef() {}
+}
+
+class MockWebSocketService {
+ createWebSocket() {}
+ isConnected() { return false; }
+ unbindHandlers() {}
+ bindHandlers() {}
+}
+
+/**
+ * ONOS GUI -- Masthead Controller - Unit Tests
+ */
+describe('MastComponent', () => {
+ let log: LogService;
+ let windowMock: Window;
+ let component: MastComponent;
+ let fixture: ComponentFixture<MastComponent>;
+ const bundleObj = {
+ 'core.view.App': {
+ test: 'test1',
+ tt_help: 'Help!'
+ }
+ };
+ const mockLion = (key) => {
+ return bundleObj[key] || '%' + key + '%';
+ };
+
+ beforeEach(async(() => {
+ log = new ConsoleLoggerService();
+ windowMock = <any>{
+ location: <any> {
+ hostname: 'foo',
+ pathname: 'apps',
+ 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'
+ }
+ };
+
+ TestBed.configureTestingModule({
+ declarations: [ MastComponent, IconComponent ],
+ providers: [
+ { provide: LogService, useValue: log },
+ { provide: NavService, useClass: MockNavService },
+ { provide: LionService, useFactory: (() => {
+ return {
+ bundle: ((bundleId) => mockLion),
+ ubercache: new Array(),
+ loadCbs: new Map<string, () => void>([])
+ };
+ })
+ },
+ { provide: IconService, useClass: MockIconService },
+ { provide: WebSocketService, useClass: MockWebSocketService },
+ { provide: 'Window', useValue: windowMock }
+ ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MastComponent);
+ component = fixture.debugElement.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should have a div#mast-top-block', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div#mast-top-block'));
+ expect(divDe).toBeTruthy();
+ });
+
+ it('should have a span.nav-menu-button inside a div#mast', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div#mast span.nav-menu-button'));
+ expect(divDe).toBeTruthy();
+ });
+
+ it('should have a div.dropdown-parent inside a div#mast-right inside a div#mast', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div#mast div#mast-right div.dropdown-parent'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual(' %logout% ');
+ });
+
+ it('should have an onos-icon inside a div#mast-right inside a div#mast', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div#mast div#mast-right div.ctrl-btns div.active onos-icon'));
+ expect(divDe).toBeTruthy();
+ });
+
+});
diff --git a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.ts b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.ts
index a8b85a4..2cb110f 100644
--- a/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.ts
+++ b/web/gui2/src/main/webapp/app/fw/mast/mast/mast.component.ts
@@ -13,12 +13,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Component, OnInit } from '@angular/core';
-import { DialogService } from '../../layer/dialog.service';
+import { Component, Input, OnInit, OnDestroy, Inject } from '@angular/core';
import { LionService } from '../../util/lion.service';
import { LogService } from '../../../log.service';
import { NavService } from '../../nav/nav.service';
-import { WebSocketService } from '../../remote/websocket.service';
/**
* ONOS GUI -- Masthead Component
@@ -28,39 +26,67 @@
templateUrl: './mast.component.html',
styleUrls: ['./mast.component.css', './mast.theme.css']
})
-export class MastComponent implements OnInit {
- public username;
+export class MastComponent implements OnInit, OnDestroy {
+ @Input() username: string;
+
+ lionFn; // Function
+ viewMap = new Map<string, string>([]); // A map of app names
constructor(
- private ds: DialogService,
- private ls: LionService,
+ private lion: LionService,
private log: LogService,
public ns: NavService,
- private wss: WebSocketService
+ @Inject('Window') private window: Window,
) {
- this.log.debug('MastComponent constructed');
-
+ this.viewMap.set('apps', 'https://wiki.onosproject.org/display/ONOS/GUI+Application+View');
+ this.viewMap.set('device', 'https://wiki.onosproject.org/display/ONOS/GUI+Device+View');
+ this.viewMap.set('', 'https://wiki.onosproject.org/display/ONOS/The+ONOS+Web+GUI');
}
ngOnInit() {
- // onosUser is a global set via the index.html generated source
- // TODO: Fix onosuser below to get it from index.html like before
- // TODO: Fix the lionService
- this.username = 'onosUser'; // || this.getLion('unknown_user');
-
+ if (this.lion.ubercache.length === 0) {
+ this.lionFn = this.dummyLion;
+ this.lion.loadCbs.set('mast', () => this.doLion());
+ this.log.debug('LION not available when MastComponent initialized');
+ } else {
+ this.doLion();
+ }
this.log.debug('MastComponent initialized');
}
-
-
- /* In the case of Masthead, we cannot cache the lion bundle, because we
- * call too early (before the lion data is uploaded from the server).
- * So we'll dig into the lion service for each request...
+ /**
+ * Nav component should never be closed, but in case it does, it's
+ * safer to tidy up after itself
*/
- getLion(x: string): string {
- // lion is a function that takes a string and returns a string
- const lion: (string) => string = this.ls.bundle('core.fw.Mast');
- return lion(x);
+ ngOnDestroy() {
+ this.lion.loadCbs.delete('mast');
}
+ /**
+ * Read the LION bundle for App and set up the lionFn
+ */
+ doLion() {
+ this.lionFn = this.lion.bundle('core.fw.Mast');
+ if (this.username === undefined) {
+ this.username = this.lionFn('unknown_user');
+ }
+ }
+
+ /**
+ * 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 + '%';
+ }
+
+ directTo() {
+ const curId = this.window.location.pathname.replace('/', '');
+ let helpUrl: string = this.viewMap.get(curId);
+ if (helpUrl === undefined) {
+ helpUrl = this.viewMap.get('');
+ this.log.warn('No help file linked for view:', curId);
+ }
+ this.window.open(helpUrl);
+ }
}
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 + '%';
+ }
}
diff --git a/web/gui2/src/main/webapp/app/fw/remote/urlfn.service.spec.ts b/web/gui2/src/main/webapp/app/fw/remote/urlfn.service.spec.ts
new file mode 100644
index 0000000..2b07f1c
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/remote/urlfn.service.spec.ts
@@ -0,0 +1,123 @@
+/*
+ * 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 { TestBed, inject } from '@angular/core/testing';
+
+import { LogService } from '../../log.service';
+import { ConsoleLoggerService } from '../../consolelogger.service';
+import { UrlFnService } from './urlfn.service';
+import { FnService } from '../util/fn.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { of } from 'rxjs';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+/**
+ * ONOS GUI -- Remote -- General Functions - Unit Tests
+ */
+describe('UrlFnService', () => {
+ let log: LogService;
+ let ufs: UrlFnService;
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+
+ beforeEach(() => {
+ log = new ConsoleLoggerService();
+ ar = new MockActivatedRoute({'debug': 'TestService'});
+ windowMock = <any>{
+ location: <any> {
+ hostname: '',
+ host: '',
+ port: '',
+ protocol: '',
+ search: { debug: 'true'},
+ href: ''
+ }
+ };
+
+ fs = new FnService(ar, log, windowMock);
+
+ TestBed.configureTestingModule({
+ providers: [UrlFnService,
+ { provide: LogService, useValue: log },
+ { provide: 'Window', useFactory: (() => windowMock ) },
+ ]
+ });
+
+ ufs = TestBed.get(UrlFnService);
+ });
+
+ function setLoc(prot: string, h: string, p: string, ctx: string = '') {
+ windowMock.location.host = h;
+ windowMock.location.hostname = h;
+ windowMock.location.port = p;
+ windowMock.location.protocol = prot;
+ windowMock.location.href = prot + '://' + h + ':' + p +
+ ctx + '/onos/ui/';
+ }
+
+ it('should define UrlFnService', () => {
+ expect(ufs).toBeDefined();
+ });
+
+ it('should define api functions', () => {
+ expect(fs.areFunctions(ufs, [
+ 'rsUrl', 'wsUrl', 'urlBase', 'httpPrefix',
+ 'wsPrefix', 'matchSecure'
+ ])).toBeTruthy();
+ });
+
+ it('should return the correct (http) RS url', () => {
+ setLoc('http', 'foo', '123');
+ expect(ufs.rsUrl('path')).toEqual('http://foo:123/onos/ui/rs/path');
+ });
+
+ it('should return the correct (https) RS url', () => {
+ setLoc('https', 'foo', '123');
+ expect(ufs.rsUrl('path')).toEqual('https://foo:123/onos/ui/rs/path');
+ });
+
+ it('should return the correct (ws) WS url', () => {
+ setLoc('http', 'foo', '123');
+ expect(ufs.wsUrl('path')).toEqual('ws://foo:123/onos/ui/websock/path');
+ });
+
+ it('should return the correct (wss) WS url', () => {
+ setLoc('https', 'foo', '123');
+ expect(ufs.wsUrl('path')).toEqual('wss://foo:123/onos/ui/websock/path');
+ });
+
+ it('should allow us to define an alternate WS port', () => {
+ setLoc('http', 'foo', '123');
+ expect(ufs.wsUrl('xyyzy', '456')).toEqual('ws://foo:456/onos/ui/websock/xyyzy');
+ });
+
+ it('should allow us to define an alternate host', () => {
+ setLoc('http', 'foo', '123');
+ expect(ufs.wsUrl('core', '456', 'bar')).toEqual('ws://bar:456/onos/ui/websock/core');
+ });
+
+ it('should allow us to inject an app context', () => {
+ setLoc('http', 'foo', '123', '/my/app');
+ expect(ufs.wsUrl('path')).toEqual('ws://foo:123/my/app/onos/ui/websock/path');
+ });
+
+});
diff --git a/web/gui2/src/main/webapp/app/fw/remote/websocket.service.spec.ts b/web/gui2/src/main/webapp/app/fw/remote/websocket.service.spec.ts
new file mode 100644
index 0000000..57d8d34
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/remote/websocket.service.spec.ts
@@ -0,0 +1,278 @@
+/*
+ * 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 { TestBed, inject } from '@angular/core/testing';
+
+import { LogService } from '../../log.service';
+import { WebSocketService, WsOptions, Callback, EventType } from './websocket.service';
+import { FnService } from '../util/fn.service';
+import { GlyphService } from '../svg/glyph.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { UrlFnService } from './urlfn.service';
+import { WSock } from './wsock.service';
+import { of } from 'rxjs';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+class MockGlyphService {}
+
+/**
+ * ONOS GUI -- Remote -- Web Socket Service - Unit Tests
+ */
+describe('WebSocketService', () => {
+ let wss: WebSocketService;
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+
+ const noop = () => ({});
+ const send = jasmine.createSpy('send')
+ .and.callFake((ev) => ev);
+ const mockWebSocket = {
+ send: send,
+ onmessage: (msgEvent) => ({}),
+ onopen: () => ({}),
+ onclose: () => ({}),
+ };
+
+ beforeEach(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ 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, logSpy, windowMock);
+
+ TestBed.configureTestingModule({
+ providers: [WebSocketService,
+ { provide: FnService, useValue: fs },
+ { provide: LogService, useValue: logSpy },
+ { provide: GlyphService, useClass: MockGlyphService },
+ { provide: UrlFnService, useValue: new UrlFnService(logSpy, windowMock) },
+ { provide: 'Window', useFactory: (() => windowMock ) },
+ { provide: WSock, useFactory: (() => {
+ return {
+ newWebSocket: (() => mockWebSocket)
+ };
+ })
+ }
+ ]
+ });
+
+ wss = TestBed.get(WebSocketService);
+ logServiceSpy = TestBed.get(LogService);
+ });
+
+ it('should define WebSocketService', () => {
+ expect(wss).toBeDefined();
+ });
+
+ it('should define api functions', () => {
+ expect(fs.areFunctions(wss, ['bootstrap', 'error',
+ 'handleOpen', 'handleMessage', 'handleClose',
+ 'findGuiSuccessor', 'informListeners', 'send',
+ 'noHandlersWarn', 'resetState',
+ 'createWebSocket', 'bindHandlers', 'unbindHandlers',
+ 'addOpenListener', 'removeOpenListener', 'sendEvent',
+ 'setVeilDelegate', 'setLoadingDelegate', 'isConnected',
+ 'closeWebSocket', 'isHandling'
+ ])).toBeTruthy();
+ });
+
+ it('should use the appropriate URL, createWebsocket', () => {
+ const url = wss.createWebSocket();
+ expect(url).toEqual('ws://foo:80/onos/ui/websock/core');
+ });
+
+ it('should use the appropriate URL with modified port, createWebsocket',
+ () => {
+ const url = wss.createWebSocket(<WsOptions>{ wsport: 1243 });
+ expect(url).toEqual('ws://foo:1243/onos/ui/websock/core');
+ });
+
+ it('should verify websocket event handlers, createWebsocket', () => {
+ wss.createWebSocket({ wsport: 1234 });
+ expect(fs.isF(mockWebSocket.onopen)).toBeTruthy();
+ expect(fs.isF(mockWebSocket.onmessage)).toBeTruthy();
+ expect(fs.isF(mockWebSocket.onclose)).toBeTruthy();
+ });
+
+ it('should invoke listener callbacks when websocket is up, handleOpen',
+ () => {
+ let num = 0;
+ function incrementNum(host: string, url: string) {
+ expect(host).toEqual('foo');
+ num++;
+ }
+ wss.addOpenListener(incrementNum);
+ wss.createWebSocket({ wsport: 1234 });
+
+ mockWebSocket.onopen();
+ expect(num).toBe(1);
+ });
+
+ it('should send pending events, handleOpen', () => {
+ const fakeEvent = {
+ event: 'mockEv',
+ payload: { mock: 'thing' }
+ };
+ wss.sendEvent(fakeEvent.event, fakeEvent.payload);
+ // on opening the socket, a single authentication event should have
+ // been sent already...
+ expect(mockWebSocket.send.calls.count()).toEqual(1);
+
+ wss.createWebSocket({ wsport: 1234 });
+ mockWebSocket.onopen();
+ expect(mockWebSocket.send).toHaveBeenCalledWith(JSON.stringify(fakeEvent));
+ });
+
+ it('should handle an incoming bad JSON message, handleMessage', () => {
+ const badMsg = {
+ data: 'bad message'
+ };
+ wss.createWebSocket({ wsport: 1234 });
+ expect(mockWebSocket.onmessage(badMsg)).toBeNull();
+ expect(logServiceSpy.error).toHaveBeenCalled();
+ });
+
+ it('should verify message was handled, handleMessage', () => {
+ let num = 0;
+ function fakeHandler(data1: Object) { num++; }
+ const data = JSON.stringify(<EventType>{
+ event: 'mockEvResp',
+ payload: {}
+ });
+ const event = {
+ data: data
+ };
+
+ wss.createWebSocket({ wsport: 1234 });
+ wss.bindHandlers(new Map<string, (data) => void>([
+ ['mockEvResp', (data2) => fakeHandler(data2)]
+ ]));
+ expect(mockWebSocket.onmessage(event)).toBe(undefined);
+ expect(num).toBe(1);
+ });
+
+ it('should warn if there is an unhandled event, handleMessage', () => {
+ const data = { foo: 'bar', bar: 'baz'};
+ const dataString = JSON.stringify(data);
+ const badEv = {
+ data: dataString
+ };
+ wss.createWebSocket({ wsport: 1234 });
+ mockWebSocket.onmessage(badEv);
+ expect(logServiceSpy.warn).toHaveBeenCalledWith('Unhandled event:', data);
+ });
+
+ it('should not warn if valid input, bindHandlers', () => {
+ expect(wss.bindHandlers(new Map<string, (data) => void>([
+ ['test', noop ],
+ ['bar', noop ]
+ ]))).toBe(undefined);
+
+ expect(logServiceSpy.warn).not.toHaveBeenCalled();
+ });
+
+ it('should warn if no arguments, bindHandlers', () => {
+ expect(wss.bindHandlers(
+ new Map<string, (data) => void>([])
+ )).toBeNull();
+ expect(logServiceSpy.warn).toHaveBeenCalledWith(
+ 'WSS.bindHandlers(): no event handlers'
+ );
+ });
+
+ it('should warn if duplicate handlers were given, bindHandlers',
+ () => {
+ wss.bindHandlers(
+ new Map<string, (data) => void>([
+ ['noop', noop ]
+ ])
+ );
+ expect(wss.bindHandlers(
+ new Map<string, (data) => void>([
+ ['noop', noop ]
+ ])
+ )).toBe(undefined);
+ expect(logServiceSpy.warn).toHaveBeenCalledWith('duplicate bindings ignored:',
+ ['noop']);
+ });
+
+ it('should warn if no arguments, unbindHandlers', () => {
+ expect(wss.unbindHandlers([])).toBeNull();
+ expect(logServiceSpy.warn).toHaveBeenCalledWith(
+ 'WSS.unbindHandlers(): no event handlers'
+ );
+ });
+ // Note: cannot test unbindHandlers' forEach due to it using closure variable
+
+ it('should not warn if valid argument, addOpenListener', () => {
+ let o = wss.addOpenListener(noop);
+ expect(o.id === 1);
+ expect(o.cb === noop);
+ expect(logServiceSpy.warn).not.toHaveBeenCalled();
+ o = wss.addOpenListener(noop);
+ expect(o.id === 2);
+ expect(o.cb === noop);
+ expect(logServiceSpy.warn).not.toHaveBeenCalled();
+ });
+
+ it('should log error if callback not a function, addOpenListener',
+ () => {
+ const o = wss.addOpenListener(null);
+ expect(o.id === 1);
+ expect(o.cb === null);
+ expect(o.error === 'No callback defined');
+ expect(logServiceSpy.error).toHaveBeenCalledWith(
+ 'WSS.addOpenListener(): callback not a function'
+ );
+ });
+
+ it('should not warn if valid listener object, removeOpenListener', () => {
+ expect(wss.removeOpenListener(<Callback>{
+ id: 1,
+ error: 'error',
+ cb: noop
+ })).toBe(undefined);
+ expect(logServiceSpy.warn).not.toHaveBeenCalled();
+ });
+
+ it('should warn if listener is invalid, removeOpenListener', () => {
+ expect(wss.removeOpenListener(<Callback>{})).toBeNull();
+ expect(logServiceSpy.warn).toHaveBeenCalledWith(
+ 'WSS.removeOpenListener(): invalid listener', {}
+ );
+ });
+
+ // Note: handleClose is not currently tested due to all work it does relies
+ // on closure variables that cannot be mocked
+
+});
diff --git a/web/gui2/src/main/webapp/app/fw/remote/websocket.service.ts b/web/gui2/src/main/webapp/app/fw/remote/websocket.service.ts
index 18dd734..b5eeaa6 100644
--- a/web/gui2/src/main/webapp/app/fw/remote/websocket.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/remote/websocket.service.ts
@@ -385,6 +385,10 @@
}
}
+ isHandling(handlerId: string): boolean {
+ return this.handlers.get(handlerId) !== undefined;
+ }
+
/**
* Add a listener function for listening for WebSocket opening.
* The function must give a host and url and return void
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon.service.ts b/web/gui2/src/main/webapp/app/fw/svg/icon.service.ts
index c6a81e9..813589f 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon.service.ts
@@ -191,7 +191,7 @@
*/
loadIconDef(iconCls: string): void {
this.gs.loadDefs(this.ensureIconLibDefs(), [glyphMapping.get(iconCls)], true);
- this.log.debug('icon defintion', iconCls, 'added to defs');
+ this.log.debug('icon definition', iconCls, 'added to defs');
}
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.ts b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.ts
index c851f47..eabf0fd 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.ts
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.ts
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, OnChanges, Input } from '@angular/core';
import { IconService, glyphMapping } from '../icon.service';
import { LogService } from '../../../log.service';
@@ -36,7 +36,7 @@
'./tooltip.css', './tooltip-theme.css'
]
})
-export class IconComponent implements OnInit {
+export class IconComponent implements OnInit, OnChanges {
@Input() iconId: string;
@Input() iconSize: number = 20;
@Input() toolTip: string = undefined;
@@ -53,11 +53,23 @@
this.log.debug('IconComponent constructed');
}
+ /**
+ * Icons are loaded in to the DOM under iconDefs
+ * TODO: Change this to use more standard Angular 6 mechanism
+ */
ngOnInit() {
this.is.loadIconDef(this.iconId);
}
/**
+ * This is needed in case the iconId changes while icon component
+ * is displayed on screen.
+ */
+ ngOnChanges() {
+ this.is.loadIconDef(this.iconId);
+ }
+
+ /**
* Get the corresponding iconTag from the glyphMapping in the iconService
* @returns The iconTag corresponding to the iconId of this instance
*/
diff --git a/web/gui2/src/main/webapp/app/fw/util/lion.service.ts b/web/gui2/src/main/webapp/app/fw/util/lion.service.ts
index 248fe51..2416e7d 100644
--- a/web/gui2/src/main/webapp/app/fw/util/lion.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/util/lion.service.ts
@@ -35,7 +35,7 @@
export class LionService {
ubercache: any[] = [];
- loadCb; // Function
+ loadCbs = new Map<string, () => void>([]); // A map of functions
/**
* Handler for uberlion event from WSS
@@ -51,9 +51,11 @@
this.log.info(' :=> ', p);
}
}
- if (this.loadCb) {
- this.log.debug('Calling the load callback');
- this.loadCb();
+ // If any component had registered a callback, call it now
+ // that LION is loaded
+ for (const cbname of this.loadCbs.keys()) {
+ this.log.debug('Updating', cbname, 'with LION');
+ this.loadCbs.get(cbname)();
}
this.log.debug('LION service: uber-lion bundle received:', data);
diff --git a/web/gui2/src/main/webapp/app/fw/widget/detailspanel.base.ts b/web/gui2/src/main/webapp/app/fw/widget/detailspanel.base.ts
new file mode 100644
index 0000000..d7cf7b8
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/widget/detailspanel.base.ts
@@ -0,0 +1,113 @@
+/*
+ * Copyright 2018-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 { FnService } from '../util/fn.service';
+import { LoadingService } from '../layer/loading.service';
+import { LogService } from '../../log.service';
+import { WebSocketService } from '../remote/websocket.service';
+
+import { PanelBaseImpl } from './panel.base';
+
+/**
+ * A generic model of the data returned from the *DetailsResponse
+ */
+interface DetailsResponse {
+ details: any;
+}
+
+/**
+ * Extends the PanelBase abstract class specifically for showing details
+ *
+ * This makes another call through WSS to the server for specific
+ * details to fill the panel with
+ *
+ * This replaces the detailspanel service in the old gui
+ */
+export abstract class DetailsPanelBaseImpl extends PanelBaseImpl {
+
+ private root: string;
+ private req: string;
+ private resp: string;
+ private handlers: string[] = [];
+ public detailsData: any = {};
+ public closed: boolean = false;
+
+ constructor(
+ protected fs: FnService,
+ protected ls: LoadingService,
+ protected log: LogService,
+ protected wss: WebSocketService,
+ protected tag: string,
+ ) {
+ super(fs, ls, log, wss, {});
+ this.root = tag + 's';
+ this.req = tag + 'DetailsRequest';
+ this.resp = tag + 'DetailsResponse';
+ }
+
+ /**
+ * When the details panel is created set up a listener on
+ * Web Socket for details responses
+ */
+ init() {
+ this.wss.bindHandlers(new Map<string, (data) => void>([
+ [this.resp, (data) => this.detailsPanelResponseCb(data)]
+ ]));
+ this.handlers.push(this.resp);
+ }
+
+ /**
+ * When the details panel is destroyed this should be called to
+ * de-register from the WebSocket
+ */
+ destroy() {
+ this.wss.unbindHandlers(this.handlers);
+ }
+
+ /**
+ * A callback that executes when the details data that was requested
+ * on WebSocketService arrives.
+ */
+ detailsPanelResponseCb(data: DetailsResponse) {
+ this.detailsData = data['details'];
+ }
+
+ /**
+ * Details Panel Data Request - should be called whenever id changes
+ * If id is empty, no request is made
+ */
+ requestDetailsPanelData(id: string) {
+ if (id === '') {
+ return;
+ }
+ this.closed = false;
+ const query = {'id': id};
+
+ // Do not send if the Web Socket hasn't opened
+ if (this.wss.isConnected()) {
+ if (this.fs.debugOn('panel')) {
+ this.log.debug('Details panel data REQUEST:', this.req, query);
+ }
+ this.wss.sendEvent(this.req, query);
+ }
+ }
+
+ /**
+ * this should be called when the details panel close button is clicked
+ */
+ close(): void {
+ this.closed = true;
+ }
+}
diff --git a/web/gui2/src/main/webapp/app/fw/widget/panel-theme.css b/web/gui2/src/main/webapp/app/fw/widget/panel-theme.css
new file mode 100644
index 0000000..6b984ab
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/widget/panel-theme.css
@@ -0,0 +1,66 @@
+/*
+ * 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 -- Panel Service (theme) -- CSS file
+ */
+
+.light .floatpanel {
+ background-color: white;
+ color: #3c3a3a;
+ border: 1px solid #c7c7c0;
+}
+
+.light .floatpanel hr {
+ border: 1px solid #c7c7c0;
+}
+
+.light .floatpanel .bottom tr:nth-child(odd) {
+ background-color: #f4f4f4;
+}
+
+.light .floatpanel .bottom tr:nth-child(even) {
+ background-color: #fbfbfb;
+}
+
+
+/* ========== DARK Theme ========== */
+
+.dark .floatpanel {
+ background-color: #282528;
+ color: #888c8c;
+ border: 1px solid #364144;
+}
+
+.dark .floatpanel th {
+ background-color: #242424;
+}
+
+.dark .floatpanel h2 {
+ color: #dddddd;
+}
+
+.dark .floatpanel hr {
+ border: 1px solid #30303a;
+}
+
+.dark .floatpanel .bottom tr:nth-child(odd) {
+ background-color: #333333;
+}
+
+.dark .floatpanel .bottom tr:nth-child(even) {
+ background-color: #3a3a3a;
+}
diff --git a/web/gui2/src/main/webapp/app/fw/widget/panel.base.ts b/web/gui2/src/main/webapp/app/fw/widget/panel.base.ts
new file mode 100644
index 0000000..703cbf9
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/widget/panel.base.ts
@@ -0,0 +1,167 @@
+/*
+ * Copyright 2018-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 { FnService } from '../util/fn.service';
+import { LoadingService } from '../layer/loading.service';
+import { LogService } from '../../log.service';
+import { WebSocketService } from '../remote/websocket.service';
+
+
+const noop = (): any => undefined;
+
+/**
+ ********* Static functions *********
+ */
+function margin(p) {
+ return p.settings.margin;
+}
+
+function hideMargin(p) {
+ return p.settings.hideMargin;
+}
+
+function noPx(p, what) {
+ return Number(p.el.style(what).replace(/px$/, ''));
+}
+
+function widthVal(p) {
+ return noPx(p, 'width');
+}
+
+function heightVal(p) {
+ return noPx(p, 'height');
+}
+
+function pxShow(p) {
+ return margin(p) + 'px';
+}
+
+function pxHide(p) {
+ return (-hideMargin(p) - widthVal(p) - (noPx(p, 'padding') * 2)) + 'px';
+}
+
+
+/**
+ * Base model of panel view - implemented by Panel components
+ */
+export interface PanelBase {
+ showPanel(cb: any): void;
+ hidePanel(cb: any): void;
+ togglePanel(cb: any): void;
+ emptyPanel(): void;
+ appendPanel(what: any): void;
+ panelWidth(w: number): number;
+ panelHeight(h: number): number;
+ panelBBox(): string;
+ panelIsVisible(): boolean;
+ classed(cls: any, bool: boolean): boolean;
+ panelEl(): any;
+}
+
+/**
+ * ONOS GUI -- Widget -- Panel Base class
+ *
+ * Replacing the panel service in the old implementation
+ */
+export abstract class PanelBaseImpl implements PanelBase {
+
+ protected on: boolean;
+ protected el: any;
+
+ constructor(
+ protected fs: FnService,
+ protected ls: LoadingService,
+ protected log: LogService,
+ protected wss: WebSocketService,
+ protected settings: any
+ ) {
+// this.log.debug('Panel base class constructed');
+ }
+
+ showPanel(cb) {
+ const endCb = this.fs.isF(cb) || noop;
+ this.on = true;
+ this.el.transition().duration(this.settings.xtnTime)
+ .each('end', endCb)
+ .style(this.settings.edge, pxShow(this))
+ .style('opacity', 1);
+ }
+
+ hidePanel(cb) {
+ const endCb = this.fs.isF(cb) || noop;
+ const endOpacity = this.settings.fade ? 0 : 1;
+ this.on = false;
+ this.el.transition().duration(this.settings.xtnTime)
+ .each('end', endCb)
+ .style(this.settings.edge, pxHide(this))
+ .style('opacity', endOpacity);
+ }
+
+ togglePanel(cb): boolean {
+ if (this.on) {
+ this.hidePanel(cb);
+ } else {
+ this.showPanel(cb);
+ }
+ return this.on;
+ }
+
+ emptyPanel(): string {
+ return this.el.text('');
+ }
+
+ appendPanel(what) {
+ return this.el.append(what);
+ }
+
+ panelWidth(w: number): number {
+ if (w === undefined) {
+ return widthVal(this);
+ }
+ this.el.style('width', w + 'px');
+ }
+
+ panelHeight(h: number): number {
+ if (h === undefined) {
+ return heightVal(this);
+ }
+ this.el.style('height', h + 'px');
+ }
+
+ panelBBox(): string {
+ return this.el.node().getBoundingClientRect();
+ }
+
+ panelIsVisible(): boolean {
+ return this.on;
+ }
+
+ classed(cls, bool): boolean {
+ return this.el.classed(cls, bool);
+ }
+
+ panelEl() {
+ return this.el;
+ }
+
+
+ /**
+ * 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/fw/widget/panel.css b/web/gui2/src/main/webapp/app/fw/widget/panel.css
new file mode 100644
index 0000000..34d127f
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/widget/panel.css
@@ -0,0 +1,61 @@
+/*
+ * 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 -- Panel Service (layout) -- CSS file
+ */
+
+.floatpanel {
+ position: absolute;
+ z-index: 100;
+ display: block;
+ top: 120px;
+ width: 500px;
+ right: -505px;
+ opacity: 100;
+
+ padding: 2px;
+ font-size: 10pt;
+}
+
+/* The following 4 are copied here from Theme until we sort out the
+ * theme service
+ */
+.floatpanel {
+ background-color: white;
+ color: #3c3a3a;
+ border: 1px solid #c7c7c0;
+}
+
+.floatpanel hr {
+ border: 1px solid #c7c7c0;
+}
+
+.floatpanel .bottom tr:nth-child(odd) {
+ background-color: #f4f4f4;
+}
+
+.floatpanel .bottom tr:nth-child(even) {
+ background-color: #fbfbfb;
+}
+
+.floatpanel.dialog {
+ top: 180px;
+}
+
+html[data-platform='iPad'] .floatpanel {
+ top: 80px;
+}
diff --git a/web/gui2/src/main/webapp/app/fw/widget/tablebase.ts b/web/gui2/src/main/webapp/app/fw/widget/table.base.ts
similarity index 60%
rename from web/gui2/src/main/webapp/app/fw/widget/tablebase.ts
rename to web/gui2/src/main/webapp/app/fw/widget/table.base.ts
index 807a014..0093f72 100644
--- a/web/gui2/src/main/webapp/app/fw/widget/tablebase.ts
+++ b/web/gui2/src/main/webapp/app/fw/widget/table.base.ts
@@ -1,5 +1,5 @@
/*
- * Copyright 2015-present Open Networking Foundation
+ * Copyright 2018-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.
@@ -13,39 +13,24 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Injectable } from '@angular/core';
import { FnService } from '../util/fn.service';
import { LoadingService } from '../layer/loading.service';
import { LogService } from '../../log.service';
import { WebSocketService } from '../remote/websocket.service';
+import { Observable, of } from 'rxjs';
const REFRESH_INTERVAL = 2000;
+const SEARCH_REGEX = '\\W';
/**
- * Base model of table view - implemented by Table components
+ * Model of table annotations within this table base class
*/
-export interface TableBase {
- annots: TableAnnots;
- autoRefresh: boolean;
- autoRefreshTip: string;
- changedData: any;
- payloadParams: any;
- selId: string;
- sortParams: any;
- tableData: any[];
- toggleRefresh(): void;
- selectCallback(event: any, selRow: any): void;
- parentSelCb(event: any, selRow: any): void;
- sortCallback(): void;
- responseCallback(): void;
-}
-
interface TableAnnots {
noRowsMsg: string;
}
/**
- * A model of data returned in a TableResponse
+ * A model of data returned from Web Socket in a TableResponse
*
* There is an interface extending from this one in the parent component
*/
@@ -56,23 +41,50 @@
}
/**
+ * A criteria for filtering the tableData
+ */
+export interface TableFilter {
+ queryStr: string;
+ queryBy: string;
+ sortBy: string;
+}
+
+/**
+ * Enumerated values for the sort dir
+ */
+export enum SortDir {
+ asc = 'asc', desc = 'desc'
+}
+
+/**
+ * A structure to format sort params for table
+ * This is sent to WebSocket as part of table request
+ */
+export interface SortParams {
+ firstCol: string;
+ firstDir: SortDir;
+ secondCol: string;
+ secondDir: SortDir;
+}
+
+/**
* ONOS GUI -- Widget -- Table Base class
*/
-export class TableBaseImpl implements TableBase {
+export abstract class TableBaseImpl {
// attributes from the interface
- public annots: TableAnnots;
+ protected annots: TableAnnots;
+ protected changedData: string[] = [];
+ protected payloadParams: any;
+ protected sortParams: SortParams;
+ protected selectCallback; // Function
+ protected parentSelCb = null;
+ protected responseCallback; // Function
+ selId: string = undefined;
+ tableData: any[] = [];
+ tableDataFilter: TableFilter;
+ toggleRefresh; // Function
autoRefresh: boolean = true;
autoRefreshTip: string = 'Toggle auto refresh'; // TODO: get LION string
- changedData: string[] = [];
- payloadParams: any;
- selId: string = undefined;
- sortParams: any;
- tableData: any[] = [];
- toggleRefresh; // Function
- selectCallback; // Function
- parentSelCb = null;
- sortCallback; // Function
- responseCallback; // Function
private root: string;
private req: string;
@@ -87,19 +99,24 @@
protected wss: WebSocketService,
protected tag: string,
protected idKey: string = 'id',
- protected query: string = '',
protected selCb = () => ({}) // Function
) {
this.root = tag + 's';
this.req = tag + 'DataRequest';
this.resp = tag + 'DataResponse';
- this.sortCallback = this.requestTableData;
this.selectCallback = this.rowSelectionCb;
this.toggleRefresh = () => {
this.autoRefresh = !this.autoRefresh;
this.autoRefresh ? this.startRefresh() : this.stopRefresh();
};
+
+ // Mapped to the search and searchBy inputs in template
+ // Changes are handled through TableFilterPipe
+ this.tableDataFilter = <TableFilter>{
+ queryStr: '',
+ queryBy: '$',
+ };
}
init() {
@@ -115,8 +132,8 @@
// Now send the WebSocket request and make it repeat every 2 seconds
this.requestTableData();
this.startRefresh();
-
- this.log.debug('TableBase initialized');
+ this.log.debug('TableBase initialized. Calling ', this.req,
+ 'every', REFRESH_INTERVAL, 'ms');
}
destroy() {
@@ -137,7 +154,7 @@
const newTableData: any[] = Array.from(data[this.root]);
this.annots.noRowsMsg = data.annots.no_rows_msg;
- // If the onResp() function is set then call it
+ // If the parents onResp() function is set then call it
if (this.responseCallback) {
this.responseCallback(data);
}
@@ -161,9 +178,12 @@
/**
* Table Data Request
+ * Pass in sort parameters and the set will be returned sorted
+ * In the old GUI there was also a query parameter, but this was not
+ * implemented on the server end
*/
requestTableData() {
- const p = Object.assign({}, this.sortParams, this.payloadParams, this.query);
+ const p = Object.assign({}, this.sortParams, this.payloadParams);
// Allow it to sit in pending events
if (this.wss.isConnected()) {
@@ -178,11 +198,11 @@
/**
* Row Selected
*/
- rowSelectionCb(event: any, selRow: any) {
+ rowSelectionCb(event: any, selRow: any): void {
const selId: string = selRow[this.idKey];
this.selId = (this.selId === selId) ? undefined : selId;
+ this.log.debug('Row', selId, 'selected');
if (this.parentSelCb) {
- this.log.debug('Parent called on Row', selId, 'selected');
this.parentSelCb(event, selRow);
}
}
@@ -212,4 +232,54 @@
isChanged(id: string): boolean {
return (this.fs.inArray(id, this.changedData) === -1) ? false : true;
}
+
+ /**
+ * 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 + '%';
+ }
+
+ /**
+ * Change the sort order of the data returned
+ *
+ * sortParams are passed to the server by WebSocket and the data is
+ * returned sorted
+ *
+ * This is usually assigned to the (click) event on a column, and the column
+ * name passed in e.g. (click)="onSort('origin')
+ * If the column that is passed in is already the firstCol, then reverse its direction
+ * If a new column is passed in, then make the existing col the 2nd sort order
+ */
+ onSort(colName: string) {
+ if (this.sortParams.firstCol === colName) {
+ if (this.sortParams.firstDir === SortDir.desc) {
+ this.sortParams.firstDir = SortDir.asc;
+ return;
+ } else {
+ this.sortParams.firstDir = SortDir.desc;
+ return;
+ }
+ } else {
+ this.sortParams.secondCol = this.sortParams.firstCol;
+ this.sortParams.secondDir = this.sortParams.firstDir;
+ this.sortParams.firstCol = colName;
+ this.sortParams.firstDir = SortDir.desc;
+ }
+ this.log.debug('Sort params', this.sortParams);
+ this.requestTableData();
+ }
+
+ sortIcon(column: string): string {
+ if (this.sortParams.firstCol === column) {
+ if (this.sortParams.firstDir === SortDir.asc) {
+ return 'upArrow';
+ } else {
+ return 'downArrow';
+ }
+ } else {
+ return '';
+ }
+ }
}
diff --git a/web/gui2/src/main/webapp/app/fw/widget/table-theme.css b/web/gui2/src/main/webapp/app/fw/widget/table.theme.css
similarity index 100%
rename from web/gui2/src/main/webapp/app/fw/widget/table-theme.css
rename to web/gui2/src/main/webapp/app/fw/widget/table.theme.css
diff --git a/web/gui2/src/main/webapp/app/fw/widget/tabledetail.service.ts b/web/gui2/src/main/webapp/app/fw/widget/tabledetail.service.ts
deleted file mode 100644
index 76a5764..0000000
--- a/web/gui2/src/main/webapp/app/fw/widget/tabledetail.service.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright 2017-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 { Injectable } from '@angular/core';
-import { FnService } from '../util/fn.service';
-import { LogService } from '../../log.service';
-
-/**
- * ONOS GUI -- Widget -- Table Detail Panel Service
- */
-@Injectable()
-export class TableDetailService {
-
- constructor(
- private fs: FnService,
- private log: LogService,
- ) {
- this.log.debug('TableDetailService constructed');
- }
-
-}
diff --git a/web/gui2/src/main/webapp/app/fw/widget/tablefilter.pipe.spec.ts b/web/gui2/src/main/webapp/app/fw/widget/tablefilter.pipe.spec.ts
new file mode 100644
index 0000000..8832feb
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/widget/tablefilter.pipe.spec.ts
@@ -0,0 +1,104 @@
+/*
+ * Copyright 2018-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 { TableFilterPipe } from './tablefilter.pipe';
+import { TableFilter } from './table.base';
+
+describe('TableFilterPipe', () => {
+
+ const pipe = new TableFilterPipe();
+ const items: any[] = new Array();
+ // Array item 0
+ items.push({
+ id: 'abc',
+ title: 'def',
+ origin: 'ghi'
+ });
+ // Array item 1
+ items.push({
+ id: 'pqr',
+ title: 'stu',
+ origin: 'vwx'
+ });
+ // Array item 2
+ items.push({
+ id: 'dog',
+ title: 'mouse',
+ origin: 'cat'
+ });
+
+
+ it('create an instance', () => {
+ expect(pipe).toBeTruthy();
+ });
+
+ it('expect it to handle empty search', () => {
+ const filteredItems: any[] =
+ pipe.transform(items, <TableFilter>{queryStr: '', queryBy: 'title'});
+ expect(filteredItems).toEqual(items);
+ });
+
+ it('expect it to handle empty items', () => {
+ const filteredItems: any[] =
+ pipe.transform(new Array(), <TableFilter>{queryStr: 'de', queryBy: 'title'});
+ expect(filteredItems).toEqual(new Array());
+ });
+
+
+ it('expect it to match 0 by title', () => {
+ const filteredItems: any[] =
+ pipe.transform(items, <TableFilter>{queryStr: 'de', queryBy: 'title'});
+ expect(filteredItems).toEqual(items.slice(0, 1));
+ });
+
+ it('expect it to match 1 by title', () => {
+ const filteredItems: any[] =
+ pipe.transform(items, <TableFilter>{queryStr: 'st', queryBy: 'title'});
+ expect(filteredItems).toEqual(items.slice(1, 2));
+ });
+
+ it('expect it to match 1 by uppercase title', () => {
+ const filteredItems: any[] =
+ pipe.transform(items, <TableFilter>{queryStr: 'sT', queryBy: 'title'});
+ expect(filteredItems).toEqual(items.slice(1, 2));
+ });
+
+ it('expect it to not match by title', () => {
+ const filteredItems: any[] =
+ pipe.transform(items, <TableFilter>{queryStr: 'pq', queryBy: 'title'});
+ expect(filteredItems.length).toEqual(0);
+ });
+
+ it('expect it to match 1 by all fields', () => {
+ const filteredItems: any[] =
+ pipe.transform(items, <TableFilter>{queryStr: 'pq', queryBy: '$'});
+ expect(filteredItems).toEqual(items.slice(1, 2));
+ });
+
+ it('expect it to not match by all fields', () => {
+ const filteredItems: any[] =
+ pipe.transform(items, <TableFilter>{queryStr: 'yz', queryBy: '$'});
+ expect(filteredItems.length).toEqual(0);
+ });
+
+ /**
+ * Check that items one and two contain a 't' - title=stu and origin=cat
+ */
+ it('expect it to match 1,2 by all fields', () => {
+ const filteredItems: any[] =
+ pipe.transform(items, <TableFilter>{queryStr: 't', queryBy: '$'});
+ expect(filteredItems).toEqual(items.slice(1));
+ });
+});
diff --git a/web/gui2/src/main/webapp/app/fw/widget/tablefilter.pipe.ts b/web/gui2/src/main/webapp/app/fw/widget/tablefilter.pipe.ts
new file mode 100644
index 0000000..5ef048c
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/widget/tablefilter.pipe.ts
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2018-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 { Pipe, PipeTransform } from '@angular/core';
+import { TableFilter } from './table.base';
+
+/**
+ * Only return the tabledata that matches filtering with some queries
+ *
+ * Note: the pipe is marked pure here as we need to filter on the
+ * content of the filter object (it's not a primitive type)
+ */
+@Pipe({
+ name: 'filter',
+ pure: false
+})
+export class TableFilterPipe implements PipeTransform {
+
+ /**
+ * From an array of table items just return those that match the filter
+ */
+ transform(items: any[], tableDataFilter: TableFilter): any[] {
+ if (!items) {
+ return [];
+ }
+ if (!tableDataFilter.queryStr) {
+ return items;
+ }
+
+ const queryStr = tableDataFilter.queryStr.toLowerCase();
+
+ return items.filter( it => {
+ if (tableDataFilter.queryBy === '$') {
+ const t1 = Object.values(it);
+ const t2 = Object.values(it).filter(value => {
+ return (<string>value).toLowerCase().includes(queryStr);
+ });
+ return Object.values(it).filter(value => {
+ return (<string>value).toLowerCase().includes(queryStr);
+ }).length > 0;
+ } else {
+ return it[tableDataFilter.queryBy].toLowerCase().includes(queryStr);
+ }
+ });
+ }
+}
diff --git a/web/gui2/src/main/webapp/app/fw/widget/toolbar.service.ts b/web/gui2/src/main/webapp/app/fw/widget/toolbar.service.ts
index 3681c80..6c1cb94 100644
--- a/web/gui2/src/main/webapp/app/fw/widget/toolbar.service.ts
+++ b/web/gui2/src/main/webapp/app/fw/widget/toolbar.service.ts
@@ -19,7 +19,6 @@
import { FnService } from '../util/fn.service';
import { IconService } from '../svg/icon.service';
import { LogService } from '../../log.service';
-import { PanelService } from '../layer/panel.service';
/**
* ONOS GUI -- Widget -- Toolbar Service
@@ -34,7 +33,6 @@
private bns: ButtonService,
private is: IconService,
private log: LogService,
- private ps: PanelService,
) {
this.log.debug('ToolbarService constructed');
}
diff --git a/web/gui2/src/main/webapp/app/fw/widget/widget.module.ts b/web/gui2/src/main/webapp/app/fw/widget/widget.module.ts
index 50d013c..4a09032 100644
--- a/web/gui2/src/main/webapp/app/fw/widget/widget.module.ts
+++ b/web/gui2/src/main/webapp/app/fw/widget/widget.module.ts
@@ -21,11 +21,11 @@
import { ButtonService } from './button.service';
import { ChartBuilderService } from './chartbuilder.service';
import { ListService } from './list.service';
-import { TableDetailService } from './tabledetail.service';
import { ToolbarService } from './toolbar.service';
import { SortableHeaderDirective } from './sortableheader.directive';
import { TableResizeDirective } from './tableresize.directive';
import { FlashChangesDirective } from './flashchanges.directive';
+import { TableFilterPipe } from './tablefilter.pipe';
/**
* ONOS GUI -- Widgets Module
@@ -39,14 +39,13 @@
declarations: [
SortableHeaderDirective,
TableResizeDirective,
- FlashChangesDirective
+ FlashChangesDirective,
+ TableFilterPipe
+ ],
+ exports: [
+ TableFilterPipe
],
providers: [
- ButtonService,
- ChartBuilderService,
- ListService,
- TableDetailService,
- ToolbarService
]
})
export class WidgetModule { }