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 { }
diff --git a/web/gui2/src/main/webapp/app/onos-routing.module.ts b/web/gui2/src/main/webapp/app/onos-routing.module.ts
index abc6ee0..5d4af2b 100644
--- a/web/gui2/src/main/webapp/app/onos-routing.module.ts
+++ b/web/gui2/src/main/webapp/app/onos-routing.module.ts
@@ -1,5 +1,5 @@
/*
- * Copyright 2014-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.
@@ -16,6 +16,10 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
+/**
+ * The set of Routes in the application - can be chosen from nav menu or
+ * elsewhere like tabular icon for flows etc
+ */
const onosRoutes: Routes = [
{
path: 'apps',
@@ -27,7 +31,7 @@
},
{
path: '',
- redirectTo: '',
+ redirectTo: 'devices', // Default to devices view - change to topo in future
pathMatch: 'full'
}
];
diff --git a/web/gui2/src/main/webapp/app/onos.component.css b/web/gui2/src/main/webapp/app/onos.component.css
index e57f958..6b7cd6c 100644
--- a/web/gui2/src/main/webapp/app/onos.component.css
+++ b/web/gui2/src/main/webapp/app/onos.component.css
@@ -19,7 +19,7 @@
*/
#view {
- padding: 6px;
+ padding: 0px;
width: 100%;
height: 100%;
}
diff --git a/web/gui2/src/main/webapp/app/onos.component.html b/web/gui2/src/main/webapp/app/onos.component.html
index 3ec1c69..b71bab2 100644
--- a/web/gui2/src/main/webapp/app/onos.component.html
+++ b/web/gui2/src/main/webapp/app/onos.component.html
@@ -14,7 +14,7 @@
~ limitations under the License.
-->
<div id="view" onosDetectBrowser>
- <onos-mast></onos-mast>
+ <onos-mast username="onos"></onos-mast>
<onos-nav></onos-nav>
<onos-veil #veil></onos-veil>
<div>{{ wss.setVeilDelegate(veil) }}</div>
diff --git a/web/gui2/src/main/webapp/app/onos.component.ts b/web/gui2/src/main/webapp/app/onos.component.ts
index c2680b7..514fa91 100644
--- a/web/gui2/src/main/webapp/app/onos.component.ts
+++ b/web/gui2/src/main/webapp/app/onos.component.ts
@@ -13,13 +13,15 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { Observable, Subscription, fromEvent } from 'rxjs';
+import { map, filter } from 'rxjs/operators';
+
import { LionService } from './fw/util/lion.service';
import { LogService } from './log.service';
import { KeyService } from './fw/util/key.service';
import { ThemeService } from './fw/util/theme.service';
import { GlyphService } from './fw/svg/glyph.service';
-import { PanelService } from './fw/layer/panel.service';
import { QuickHelpService } from './fw/layer/quickhelp.service';
import { EeService } from './fw/util/ee.service';
import { WebSocketService, WsOptions } from './fw/remote/websocket.service';
@@ -62,8 +64,9 @@
templateUrl: './onos.component.html',
styleUrls: ['./onos.component.css', './onos.common.css']
})
-export class OnosComponent implements OnInit, OnDestroy {
- public title = 'onos';
+export class OnosComponent implements OnInit, AfterViewInit, OnDestroy {
+ private quickHelpSub: Subscription;
+ private quickHelpHandler: Observable<string>;
// view ID to help page url map.. injected via the servlet
viewMap: View[] = [
@@ -80,7 +83,6 @@
private ks: KeyService,
private ts: ThemeService,
private gs: GlyphService,
- private ps: PanelService,
private qhs: QuickHelpService,
private ee: EeService,
public wss: WebSocketService,
@@ -114,19 +116,62 @@
this.log.debug('OnosComponent initialized');
}
+ /**
+ * Start the listener for keystrokes for QuickHelp
+ *
+ * This creates an observable that listens to the '/','\' and Esc keystrokes
+ * anywhere in the web page - it strips the keyCode out of the keystroke
+ * and passes this to another observable that filters only for these keystrokes
+ * and finally maps these key code to text literals to drive the
+ * quick help feature
+ */
+ ngAfterViewInit() {
+ const keyStrokeHandler =
+ fromEvent(document, 'keyup').pipe(map((x: KeyboardEvent) => x.keyCode));
+ this.quickHelpHandler = keyStrokeHandler.pipe(
+ filter(x => {
+ return [27, 191, 220].includes(x);
+ })
+ ).pipe(
+ map(x => {
+ let direction;
+ switch (x) {
+ case 27:
+ direction = 'esc';
+ break;
+ case 191:
+ direction = 'fwdslash';
+ break;
+ case 220:
+ direction = 'backslash';
+ break;
+ default:
+ direction = 'esc';
+ }
+ return direction;
+ })
+ );
+
+ // TODO: Make a Quick Help component popup
+ this.quickHelpSub = this.quickHelpHandler.subscribe((keyname) => {
+ this.log.debug('Keystroke', keyname);
+ });
+ }
+
ngOnDestroy() {
if (this.wss.isConnected()) {
this.log.debug('Stopping Web Socket connection');
this.wss.closeWebSocket();
}
+ this.quickHelpSub.unsubscribe();
this.log.debug('OnosComponent destroyed');
}
saucy(ee, ks) {
- const map = ee.genMap(sauce);
- Object.keys(map).forEach(function (k) {
- ks.addSeq(k, map[k]);
+ const map1 = ee.genMap(sauce);
+ Object.keys(map1).forEach(function (k) {
+ ks.addSeq(k, map1[k]);
});
}
}
diff --git a/web/gui2/src/main/webapp/app/test.ts b/web/gui2/src/main/webapp/app/test.ts
new file mode 100644
index 0000000..1631789
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/test.ts
@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps-routing.module.ts b/web/gui2/src/main/webapp/app/view/apps/apps-routing.module.ts
index 2fed90d..1d4f483 100644
--- a/web/gui2/src/main/webapp/app/view/apps/apps-routing.module.ts
+++ b/web/gui2/src/main/webapp/app/view/apps/apps-routing.module.ts
@@ -15,7 +15,7 @@
*/
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
-import { AppsComponent } from './apps.component';
+import { AppsComponent } from './apps/apps.component';
const appsRoutes: Routes = [
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps.component.html b/web/gui2/src/main/webapp/app/view/apps/apps.component.html
deleted file mode 100644
index c34694c..0000000
--- a/web/gui2/src/main/webapp/app/view/apps/apps.component.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<!--
-~ 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.
--->
-<div id="ov-app" filedrop on-file-drop="appDropped()">
- <div class="tabular-header">
- <h2>
- {{lionFn('title_apps')}}
- ({{ tableData.length }}
- {{ lionFn('total') }})
- </h2>
- <div class="ctrl-btns">
- <div class="refresh" (click)="toggleRefresh()">
- <onos-icon classes="{{ autoRefresh?'active refresh':'refresh' }}"
- iconId="refresh" iconSize="42" toolTip="{{ autoRefreshTip }}"></onos-icon>
- </div>
- <div class="separator"></div>
-
- <!--<form id="inputFileForm">-->
- <!--<input id="uploadFile"-->
- <!--type="file" size="50" accept=".oar,.jar"-->
- <!--file-model="appFile">-->
- <!--</form>-->
-
- <div class="active" trigger-form>
- <onos-icon classes="{{ 'active upload' }}"
- iconId="upload" iconSize="42" toolTip="{{ uploadTip }}"></onos-icon>
- </div>
- <div (click)="appAction('activate')">
- <onos-icon classes="{{ ctrlBtnState.installed?'active play':'play' }}"
- iconId="play" iconSize="42" toolTip="{{ activateTip }}"></onos-icon>
- </div>
- <div (click)="appAction('deactivate')">
- <onos-icon classes="{{ ctrlBtnState.active?'active stop':'stop' }}"
- iconId="stop" iconSize="42" toolTip="{{ deactivateTip }}"></onos-icon>
- </div>
- <div (click)="appAction('uninstall')">
- <!--[ngClass]="{active: ctrlBtnState.selection}">-->
- <!--tooltip tt-msg="uninstallTip"-->
- <onos-icon classes="{{ ctrlBtnState.selection?'active garbage':'garbage' }}"
- iconId="garbage" iconSize="42" toolTip="{{ uninstallTip }}"></onos-icon>
- </div>
- <div (click)="downloadApp()">
- <onos-icon classes="{{ ctrlBtnState.selection?'active download':'download' }}"
- iconId="download" iconSize="42" toolTip="{{ downloadTip }}"></onos-icon>
- </div>
- </div>
-
- <!--<div class="search">-->
- <!--<input type="text" ng-model="queryTxt" placeholder="Search"/>-->
- <!--<select ng-model="queryBy">-->
- <!--<option value="" disabled>Search By</option>-->
- <!--<option value="$">All Fields</option>-->
- <!--<option value="title">{{lionFn('title')}}</option>-->
- <!--<option value="id">{{lionFn('app_id')}}</option>-->
- <!--<option value="version">{{lionFn('version')}}</option>-->
- <!--<option value="category">{{lionFn('category')}}</option>-->
- <!--<option value="apporiginName">{{lionFn('origin')}}</option>-->
-
- <!--</select>-->
- <!--</div>-->
-
-
- </div>
-
- <div class="summary-list" onos-table-resize>
- <table onos-flash-changes id-prop="id" width="100%">
- <tr class="table-header">
- <th colId="state" class="table-icon" sortable></th>
- <th colId="icon" class="table-icon"></th>
- <th colId="title" [ngClass]="{width: '340'}" sortable> {{lionFn('title')}} </th>
- <th colId="id" [ngClass]="{width: '320px'}"sortable> {{lionFn('app_id')}} </th>
- <th colId="version" [ngClass]="{width: '140px'}"sortable> {{lionFn('version')}} </th>
- <th colId="category" [ngClass]="{width: '136px'}"sortable> {{lionFn('category')}} </th>
- <th colId="origin" sortable> {{lionFn('origin')}} </th>
- </tr>
-
- <tr *ngIf="tableData.length === 0" class="no-data">
- <td colspan="5">
- {{annots.no_rows_msg}}
- </td>
- </tr>
- <!--<!–TODO: Add back in | filter:queryFilter–>-->
- <tr class="table-body" *ngFor="let app of tableData"
- (click)="selectCallback($event, app)"
- [ngClass]="{selected: app.id === selId, 'data-change': isChanged(app.id)}">
- <td class="table-icon">
- <onos-icon iconId="{{app._iconid_state}}"></onos-icon>
- </td>
- <td class="table-icon">
- <!--<img data-ng-src="./rs/applications/{{app.icon}}/icon"-->
- <!--height="24px" width="24px" />-->
- </td>
- <td>{{ app.title }}</td>
- <td>{{ app.id }}</td>
- <td>{{ app.version }}</td>
- <td>{{ app.category }}</td>
- <td>{{ app.origin }}</td>
- </tr>
- </table>
-
- </div>
-
-</div>
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps.module.ts b/web/gui2/src/main/webapp/app/view/apps/apps.module.ts
index 48092a9..0f38dbc 100644
--- a/web/gui2/src/main/webapp/app/view/apps/apps.module.ts
+++ b/web/gui2/src/main/webapp/app/view/apps/apps.module.ts
@@ -15,10 +15,13 @@
*/
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
import { AppsRoutingModule } from './apps-routing.module';
-import { AppsComponent } from './apps.component';
+import { AppsComponent } from './apps/apps.component';
+import { AppsDetailsComponent } from './appsdetails/appsdetails.component';
import { TriggerFormDirective } from './triggerform.directive';
import { SvgModule } from '../../fw/svg/svg.module';
+import { WidgetModule } from '../../fw/widget/widget.module';
/**
* ONOS GUI -- Apps View Module
@@ -31,10 +34,13 @@
imports: [
CommonModule,
AppsRoutingModule,
- SvgModule
+ SvgModule,
+ WidgetModule,
+ FormsModule
],
declarations: [
AppsComponent,
+ AppsDetailsComponent,
TriggerFormDirective
]
})
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.css b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.css
new file mode 100644
index 0000000..5813f30
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.css
@@ -0,0 +1,53 @@
+/*
+ * 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 -- Applications View (layout) -- CSS file
+ */
+
+#ov-app h2 {
+ display: inline-block;
+}
+
+#ov-app div.ctrl-btns {
+ width: 290px;
+}
+
+/* -- Drag-n-Drop oar file upload -- */
+#ov-app form#inputFileForm,
+#ov-app input#uploadFile {
+ display: none;
+}
+
+.dropping {
+
+}
+
+/* -- Confirmation Dialog -- */
+#app-dialog {
+ top: 140px;
+ padding: 12px;
+}
+
+#app-dialog p {
+ font-size: 12pt;
+}
+
+#app-dialog p.strong {
+ font-weight: bold;
+ padding: 8px;
+ text-align: center;
+}
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.html b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.html
new file mode 100644
index 0000000..1c4a22f
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.html
@@ -0,0 +1,137 @@
+<!--
+~ 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.
+-->
+<div id="ov-app" filedrop on-file-drop="appDropped()">
+ <div class="tabular-header">
+ <h2>
+ {{lionFn('title_apps')}}
+ ({{ tableData.length }}
+ {{ lionFn('total') }})
+ </h2>
+ <div class="ctrl-btns">
+ <div class="refresh" (click)="toggleRefresh()">
+ <onos-icon classes="{{ autoRefresh?'active refresh':'refresh' }}"
+ iconId="refresh" iconSize="42" toolTip="{{ autoRefreshTip }}"></onos-icon>
+ </div>
+ <div class="separator"></div>
+
+ <!--<form id="inputFileForm">-->
+ <!--<input id="uploadFile"-->
+ <!--type="file" size="50" accept=".oar,.jar"-->
+ <!--file-model="appFile">-->
+ <!--</form>-->
+
+ <div class="active" trigger-form>
+ <onos-icon classes="{{ 'active upload' }}"
+ iconId="upload" iconSize="42" toolTip="{{ uploadTip }}"></onos-icon>
+ </div>
+ <div (click)="appAction('activate')">
+ <onos-icon classes="{{ ctrlBtnState.installed?'active play':'play' }}"
+ iconId="play" iconSize="42" toolTip="{{ activateTip }}"></onos-icon>
+ </div>
+ <div (click)="appAction('deactivate')">
+ <onos-icon classes="{{ ctrlBtnState.active?'active stop':'stop' }}"
+ iconId="stop" iconSize="42" toolTip="{{ deactivateTip }}"></onos-icon>
+ </div>
+ <div (click)="appAction('uninstall')">
+ <!--[ngClass]="{active: ctrlBtnState.selection}">-->
+ <!--tooltip tt-msg="uninstallTip"-->
+ <onos-icon classes="{{ ctrlBtnState.selection?'active garbage':'garbage' }}"
+ iconId="garbage" iconSize="42" toolTip="{{ uninstallTip }}"></onos-icon>
+ </div>
+ <div (click)="downloadApp()">
+ <onos-icon classes="{{ ctrlBtnState.selection?'active download':'download' }}"
+ iconId="download" iconSize="42" toolTip="{{ downloadTip }}"></onos-icon>
+ </div>
+ </div>
+ <div class="search">
+ <input id="searchinput" [(ngModel)]="tableDataFilter.queryStr" type="search" #search placeholder="Search"/>
+ <!--(keyup)="onSearch(search.value)" (search)="onSearch(search.value)"/>-->
+ <select [(ngModel)]="tableDataFilter.queryBy">
+ <!--(change)="onSearchBy($event)" (change)="search.value = ''">-->
+ <option value="" disabled>Search By</option>
+ <option value="$">All Fields</option>
+ <option value="title">{{lionFn('title')}}</option>
+ <option value="id">{{lionFn('app_id')}}</option>
+ <option value="version">{{lionFn('version')}}</option>
+ <option value="category">{{lionFn('category')}}</option>
+ <option value="origin">{{lionFn('origin')}}</option>
+ </select>
+ </div>
+
+ </div>
+
+ <div class="summary-list" onos-table-resize>
+ <table onos-flash-changes id-prop="id" width="100%">
+ <tr class="table-header">
+ <th colId="state" [ngStyle]="{width: '32px'}" class="table-icon" (click)="onSort('state')">
+ <onos-icon classes="active" [iconId]="sortIcon('state')"></onos-icon>
+ </th>
+ <th colId="icon" [ngStyle]="{width: '32px'}" class="table-icon"></th>
+ <th colId="title" (click)="onSort('title')">{{lionFn('title')}}
+ <onos-icon classes="active" [iconId]="sortIcon('title')"></onos-icon>
+ </th>
+ <th colId="id" (click)="onSort('id')">{{lionFn('app_id')}}
+ <onos-icon classes="active" [iconId]="sortIcon('id')"></onos-icon>
+ </th>
+ <th colId="version" (click)="onSort('version')"> {{lionFn('version')}}
+ <onos-icon classes="active" [iconId]="sortIcon('version')"></onos-icon>
+ </th>
+ <th colId="category" (click)="onSort('category')"> {{lionFn('category')}}
+ <onos-icon classes="active" [iconId]="sortIcon('category')"></onos-icon>
+ </th>
+ <th colId="origin" (click)="onSort('origin')"> {{lionFn('origin')}}
+ <onos-icon classes="active" [iconId]="sortIcon('origin')"></onos-icon>
+ </th>
+ </tr>
+
+ <tr *ngIf="tableData.length === 0" class="no-data">
+ <td colspan="5">
+ {{annots.no_rows_msg}}
+ </td>
+ </tr>
+ <!-- See https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
+ Angular has dropped the filter and order by pipe that were present in
+ AngularJS - filter and sort the data at source instead -->
+ <tr class="table-body" *ngFor="let app of tableData | filter: tableDataFilter"
+ (click)="selectCallback($event, app)"
+ [ngClass]="{selected: app.id === selId, 'data-change': isChanged(app.id)}">
+ <td class="table-icon">
+ <onos-icon iconId="{{app._iconid_state}}"></onos-icon>
+ </td>
+ <td class="table-icon">
+ <!-- The path below gets the app icon from the old GUI path -->
+ <img src="../../ui/rs/applications/{{app.icon}}/icon"
+ height="24px" width="24px" />
+ </td>
+ <td>{{ app.title }}</td>
+ <td>{{ app.id }}</td>
+ <td>{{ app.version }}</td>
+ <td>{{ app.category }}</td>
+ <td>{{ app.origin }}</td>
+ </tr>
+ </table>
+
+ </div>
+ <!-- There are 2 ways this component can be included
+ 1) Insert it in to the ngFor above and have it created as the row is rendered
+ for the row that has a selId != '' OR
+ 2) Include it here and let selId dictate its state
+ The advantage in 2) is that panel can be animated in and out, as it is not
+ killed every time the selection changes.
+ -->
+ <onos-appsdetails class="floatpanels" id="{{ selId }}"></onos-appsdetails>
+
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.spec.ts b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.spec.ts
new file mode 100644
index 0000000..1889a44
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.spec.ts
@@ -0,0 +1,177 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule } from '@angular/forms';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+import { LogService } from '../../../log.service';
+import { AppsComponent } from './apps.component';
+import { AppsDetailsComponent } from '../appsdetails/appsdetails.component';
+import { DialogService } from '../../../fw/layer/dialog.service';
+import { FnService } from '../../../fw/util/fn.service';
+import { IconComponent } from '../../../fw/svg/icon/icon.component';
+import { IconService } from '../../../fw/svg/icon.service';
+import { KeyService } from '../../../fw/util/key.service';
+import { LionService } from '../../../fw/util/lion.service';
+import { LoadingService } from '../../../fw/layer/loading.service';
+import { ThemeService } from '../../../fw/util/theme.service';
+import { TableFilterPipe } from '../../../fw/widget/tablefilter.pipe';
+import { UrlFnService } from '../../../fw/remote/urlfn.service';
+import { WebSocketService } from '../../../fw/remote/websocket.service';
+import { of } from 'rxjs';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+class MockDialogService {}
+
+class MockFnService {}
+
+class MockIconService {
+ loadIconDef() {}
+}
+
+class MockKeyService {}
+
+class MockLoadingService {
+ startAnim() {}
+ stop() {}
+ waiting() {}
+}
+
+class MockThemeService {}
+
+class MockUrlFnService {}
+
+class MockWebSocketService {
+ createWebSocket() {}
+ isConnected() { return false; }
+ unbindHandlers() {}
+ bindHandlers() {}
+}
+
+/**
+ * ONOS GUI -- Apps View -- Unit Tests
+ */
+describe('AppsComponent', () => {
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: AppsComponent;
+ let fixture: ComponentFixture<AppsComponent>;
+ const bundleObj = {
+ 'core.view.App': {
+ test: 'test1'
+ }
+ };
+ const mockLion = (key) => {
+ return bundleObj[key] || '%' + key + '%';
+ };
+
+ beforeEach(async(() => {
+ 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({
+ imports: [ BrowserAnimationsModule, FormsModule ],
+ declarations: [ AppsComponent, IconComponent, AppsDetailsComponent, TableFilterPipe ],
+ providers: [
+ { provide: DialogService, useClass: MockDialogService },
+ { provide: FnService, useValue: fs },
+ { provide: IconService, useClass: MockIconService },
+ { provide: KeyService, useClass: MockKeyService },
+ { provide: LionService, useFactory: (() => {
+ return {
+ bundle: ((bundleId) => mockLion),
+ ubercache: new Array(),
+ loadCbs: new Map<string, () => void>([])
+ };
+ })
+ },
+ { provide: LoadingService, useClass: MockLoadingService },
+ { provide: LogService, useValue: logSpy },
+ { provide: ThemeService, useClass: MockThemeService },
+ { provide: UrlFnService, useClass: MockUrlFnService },
+ { provide: WebSocketService, useClass: MockWebSocketService },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ })
+ .compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AppsComponent);
+ component = fixture.debugElement.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should have a div.tabular-header inside a div#ov-app', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div#ov-app div.tabular-header'));
+ expect(divDe).toBeTruthy();
+ });
+
+ it('should have a h2 inside the div.tabular-header', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div#ov-app div.tabular-header h2'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual(' %title_apps% (0 %total%) ');
+ });
+
+ it('should have a refresh button inside the div.tabular-header', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div#ov-app div.tabular-header div.ctrl-btns div.refresh'));
+ expect(divDe).toBeTruthy();
+ });
+
+ it('should have an active button inside the div.tabular-header', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div#ov-app div.tabular-header div.ctrl-btns div.active'));
+ expect(divDe).toBeTruthy();
+ });
+
+ it('should have a div.summary-list inside a div#ov-app', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div#ov-app div.summary-list'));
+ expect(divDe).toBeTruthy();
+ });
+});
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps.component.ts b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.ts
similarity index 73%
rename from web/gui2/src/main/webapp/app/view/apps/apps.component.ts
rename to web/gui2/src/main/webapp/app/view/apps/apps/apps.component.ts
index ed6d30a..79fa310 100644
--- a/web/gui2/src/main/webapp/app/view/apps/apps.component.ts
+++ b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.ts
@@ -14,17 +14,17 @@
* limitations under the License.
*/
import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
-import { DialogService } from '../../fw/layer/dialog.service';
-import { FnService } from '../../fw/util/fn.service';
-import { IconService } from '../../fw/svg/icon.service';
-import { KeyService } from '../../fw/util/key.service';
-import { LionService } from '../../fw/util/lion.service';
-import { LoadingService } from '../../fw/layer/loading.service';
-import { LogService } from '../../log.service';
-import { PanelService } from '../../fw/layer/panel.service';
-import { TableBaseImpl, TableResponse } from '../../fw/widget/tablebase';
-import { UrlFnService } from '../../fw/remote/urlfn.service';
-import { WebSocketService } from '../../fw/remote/websocket.service';
+import { DialogService } from '../../../fw/layer/dialog.service';
+import { FnService } from '../../../fw/util/fn.service';
+import { IconService } from '../../../fw/svg/icon.service';
+import { KeyService } from '../../../fw/util/key.service';
+import { LionService } from '../../../fw/util/lion.service';
+import { LoadingService } from '../../../fw/layer/loading.service';
+import { LogService } from '../../../log.service';
+import { TableBaseImpl, TableResponse, TableFilter, SortParams, SortDir } from '../../../fw/widget/table.base';
+import { UrlFnService } from '../../../fw/remote/urlfn.service';
+import { WebSocketService } from '../../../fw/remote/websocket.service';
+import { TableFilterPipe } from '../../../fw/widget/tablefilter.pipe';
const INSTALLED = 'INSTALLED';
const ACTIVE = 'ACTIVE';
@@ -36,8 +36,12 @@
const detailsResp = 'appDetailsResponse';
const fileUploadUrl = 'applications/upload';
const activateOption = '?activate=true';
-const appUrlPrefix = 'rs/applications/';
-const iconUrlSuffix = '/icon';
+
+/** Prefix to access the REST service for applications */
+export const APPURLPREFIX = '../../ui/rs/applications/'; // TODO: This is a hack to work off GUIv1 URL
+/** Suffix to access the icon of the application - gives back an image */
+export const ICONURLSUFFIX = '/icon';
+
const downloadSuffix = '/download';
const dialogId = 'app-dialog';
const dialogOpts = {
@@ -49,20 +53,26 @@
};
const propOrder = ['id', 'state', 'category', 'version', 'origin', 'role'];
+/**
+ * Model of the data returned through the Web Socket about apps.
+ */
interface AppTableResponse extends TableResponse {
- apps: Apps[];
+ apps: App[];
}
-interface Apps {
+/**
+ * Model of the data returned through Web Socket for a single App
+ */
+export interface App {
category: string;
desc: string;
- features: string;
+ features: string[];
icon: string;
id: string;
origin: string;
- permissions: string;
+ permissions: string[];
readme: string;
- required_apps: string;
+ required_apps: string[];
role: string;
state: string;
title: string;
@@ -71,6 +81,9 @@
_iconid_state: string;
}
+/**
+ * Model of the Control Button
+ */
interface CtrlBtnState {
installed: boolean;
selection: string;
@@ -85,7 +98,7 @@
templateUrl: './apps.component.html',
styleUrls: [
'./apps.component.css', './apps.theme.css',
- '../../fw/widget/table.css', '../../fw/widget/table-theme.css'
+ '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css'
]
})
export class AppsComponent extends TableBaseImpl implements OnInit, OnDestroy {
@@ -94,7 +107,6 @@
lionFn; // Function
warnDeactivate: string;
warnOwnRisk: string;
- friendlyProps: string[];
ctrlBtnState: CtrlBtnState;
detailsPanel: any;
appFile: any;
@@ -114,43 +126,49 @@
private lion: LionService,
protected ls: LoadingService,
protected log: LogService,
- private ps: PanelService,
private ufs: UrlFnService,
protected wss: WebSocketService,
@Inject('Window') private window: Window,
) {
super(fs, null, log, wss, 'app');
this.responseCallback = this.appResponseCb;
+ // pre-populate sort so active apps are at the top of the list
this.sortParams = {
firstCol: 'state',
- firstDir: 'desc',
+ firstDir: SortDir.desc,
secondCol: 'title',
- secondDir: 'asc',
+ secondDir: SortDir.asc,
};
- // We want doLion() to be called only after the Lion service is populated (from the WebSocket)
- this.lion.loadCb = (() => this.doLion());
+ // We want doLion() to be called only after the Lion
+ // service is populated (from the WebSocket)
+ // 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
+ if (this.lion.ubercache.length === 0) {
+ this.lionFn = this.dummyLion;
+ this.lion.loadCbs.set('apps', () => this.doLion());
+ } else {
+ this.doLion();
+ }
+
this.ctrlBtnState = <CtrlBtnState>{
installed: false,
active: false
};
- if (this.lion.ubercache.length === 0) {
- this.lionFn = this.dummyLion;
- } else {
- this.doLion();
- }
- this.uploadTip = this.lionFn('tt_ctl_upload');
- this.activateTip = this.lionFn('tt_ctl_activate');
- this.deactivateTip = this.lionFn('tt_ctl_deactivate');
- this.uninstallTip = this.lionFn('tt_ctl_uninstall');
- this.downloadTip = this.lionFn('tt_ctl_download');
}
+ /**
+ * Initialize querying the WebSocket for App table details
+ */
ngOnInit() {
this.init();
- this.log.debug('AppComponent initialized');
}
+ /**
+ * Stop sending queries to WebSocket
+ */
ngOnDestroy() {
+ this.lion.loadCbs.delete('apps');
this.destroy();
this.log.debug('AppComponent destroyed');
}
@@ -199,8 +217,8 @@
this.wss.sendEvent(appMgmtReq, {
action: action,
name: itemId,
- sortCol: spar.sortCol,
- sortDir: spar.sortDir,
+ sortCol: spar.firstCol,
+ sortDir: spar.firstDir,
});
if (action === 'uninstall') {
this.detailsPanel.hide();
@@ -229,13 +247,12 @@
downloadApp() {
if (this.ctrlBtnState.selection) {
- (<any>this.window).location = appUrlPrefix + this.selId + downloadSuffix;
+ (<any>this.window).location = APPURLPREFIX + this.selId + ICONURLSUFFIX;
}
}
/**
- * Read the LION bundle for App - this should replace the dummyLion implementation
- * of lionFn with a function from the LION Service
+ * Read the LION bundle for App and set up the lionFn
*/
doLion() {
this.lionFn = this.lion.bundle('core.view.App');
@@ -243,19 +260,11 @@
this.warnDeactivate = this.lionFn('dlg_warn_deactivate');
this.warnOwnRisk = this.lionFn('dlg_warn_own_risk');
- this.friendlyProps = [
- this.lionFn('app_id'), this.lionFn('state'),
- this.lionFn('category'), this.lionFn('version'),
- this.lionFn('origin'), this.lionFn('role'),
- ];
- }
-
- /**
- * 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 + '%';
+ this.uploadTip = this.lionFn('tt_ctl_upload');
+ this.activateTip = this.lionFn('tt_ctl_activate');
+ this.deactivateTip = this.lionFn('tt_ctl_deactivate');
+ this.uninstallTip = this.lionFn('tt_ctl_uninstall');
+ this.downloadTip = this.lionFn('tt_ctl_download');
}
appDropped() {
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps.theme.css b/web/gui2/src/main/webapp/app/view/apps/apps/apps.theme.css
similarity index 100%
rename from web/gui2/src/main/webapp/app/view/apps/apps.theme.css
rename to web/gui2/src/main/webapp/app/view/apps/apps/apps.theme.css
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps.component.css b/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.css
similarity index 82%
rename from web/gui2/src/main/webapp/app/view/apps/apps.component.css
rename to web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.css
index a1963c0..bfa8d08 100644
--- a/web/gui2/src/main/webapp/app/view/apps/apps.component.css
+++ b/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.css
@@ -15,44 +15,8 @@
*/
/*
- ONOS GUI -- Applications View (layout) -- CSS file
+ ONOS GUI -- Applications Details Panel (layout) -- CSS file
*/
-
-#ov-app h2 {
- display: inline-block;
-}
-
-#ov-app div.ctrl-btns {
- width: 290px;
-}
-
-/* -- Drag-n-Drop oar file upload -- */
-#ov-app form#inputFileForm,
-#ov-app input#uploadFile {
- display: none;
-}
-
-.dropping {
-
-}
-
-/* -- Confirmation Dialog -- */
-#app-dialog {
- top: 140px;
- padding: 12px;
-}
-
-#app-dialog p {
- font-size: 12pt;
-}
-
-#app-dialog p.strong {
- font-weight: bold;
- padding: 8px;
- text-align: center;
-}
-
-/* -- Details Panel -- */
#application-details-panel.floatpanel {
z-index: 0;
}
@@ -151,4 +115,3 @@
padding: 6px 6px;
text-align: left;
}
-
diff --git a/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.html b/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.html
new file mode 100644
index 0000000..a78bdd9
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.html
@@ -0,0 +1,99 @@
+<!--
+~ 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.
+-->
+<div id="application-details-panel" class="floatpanel" [@appDetailsState]="id!=='' && !closed">
+ <!--<div *ngIf="visible" class="container">-->
+ <div class="container">
+ <div class="top">
+ <onos-icon class="close-btn" iconId="close" iconSize="20" (click)="close()"></onos-icon>
+ <div class="top-content">
+ <div class="app-title">{{ detailsData.title }}</div>
+ <div class="left app-icon">
+ <img src="{{ iconUrl(id) }}">
+ </div>
+ <div class="right">
+ <table class="app-props">
+ <tbody>
+ <tr>
+ <td class="label">{{ lionFn('app_id') }}:</td>
+ <td class="value">{{ id }}</td>
+ </tr>
+ <tr>
+ <td class="label">{{ lionFn('state') }}:</td>
+ <td class="value">{{ detailsData.state }}</td>
+ </tr>
+ <tr>
+ <td class="label">{{ lionFn('category') }}:</td>
+ <td class="value">{{ detailsData.category }}</td>
+ </tr>
+ <tr>
+ <td class="label">{{ lionFn('version') }}:</td>
+ <td class="value">{{ detailsData.version }}</td>
+ </tr>
+ <tr>
+ <td class="label">{{ lionFn('origin') }}:</td>
+ <td class="value">{{ detailsData.origin }}</td>
+ </tr>
+ <tr>
+ <td class="label">{{ lionFn('role') }}:</td>
+ <td class="value">{{ detailsData.role }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="app-url">
+ <a href="{{ detailsData.url }}" target="_blank">{{ detailsData.url }}</a>
+ </div>
+ </div>
+ </div>
+ <hr>
+ <div class="middle">
+ <div class="app-readme">{{ detailsData.readme }}</div>
+ </div>
+ <hr>
+ <div class="bottom">
+ <h2>{{ lionFn('dp_features') }}</h2>
+ <div class="features">
+ <table>
+ <tbody>
+ <tr *ngFor="let feat of detailsData.features">
+ <td>{{ feat }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <h2>{{ lionFn('dp_required_apps') }}</h2>
+ <div class="required-apps">
+ <table>
+ <tbody>
+ <tr *ngFor="let reqd of detailsData.required_apps">
+ <td>{{ reqd }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <h2>{{ lionFn('dp_permissions') }}</h2>
+ <div class="permissions">
+ <table>
+ <tbody>
+ <tr *ngFor="let perm of detailsData.permissions">
+ <td>{{ perm }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.spec.ts b/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.spec.ts
new file mode 100644
index 0000000..f890cde
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.spec.ts
@@ -0,0 +1,172 @@
+/*
+ * 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 { 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 { LogService } from '../../../log.service';
+import { AppsDetailsComponent } from './appsdetails.component';
+import { FnService } from '../../../../app/fw/util/fn.service';
+import { IconComponent } from '../../../../app/fw/svg/icon/icon.component';
+import { IconService } from '../../../../app/fw/svg/icon.service';
+import { LionService } from '../../../../app/fw/util/lion.service';
+import { UrlFnService } from '../../../fw/remote/urlfn.service';
+import { WebSocketService } from '../../../fw/remote/websocket.service';
+import { of } from 'rxjs';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+class MockFnService {}
+
+class MockIconService {
+ loadIconDef() {}
+}
+
+class MockUrlFnService {}
+
+class MockWebSocketService {
+ createWebSocket() {}
+ isConnected() { return false; }
+ unbindHandlers() {}
+ bindHandlers() {}
+}
+
+/**
+ * ONOS GUI -- Apps Detail Panel View -- Unit Tests
+ */
+describe('AppsDetailsComponent', () => {
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: AppsDetailsComponent;
+ let fixture: ComponentFixture<AppsDetailsComponent>;
+ const bundleObj = {
+ 'core.view.App': {
+ }
+ };
+ const mockLion = (key) => {
+ return bundleObj[key] || '%' + key + '%';
+ };
+
+ beforeEach(async(() => {
+ const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+ ar = new MockActivatedRoute({'debug': 'panel'});
+
+ 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({
+ imports: [ BrowserAnimationsModule ],
+ declarations: [ AppsDetailsComponent, 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: logSpy },
+ { provide: UrlFnService, useClass: MockUrlFnService },
+ { provide: WebSocketService, useClass: MockWebSocketService },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ })
+ .compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AppsDetailsComponent);
+ component = fixture.debugElement.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should have an onos-icon.close-btn inside a div.top inside a div.container', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div.container div.top onos-icon.close-btn'));
+ expect(divDe).toBeTruthy();
+ });
+
+ it('should have a div.top-content inside a div.top inside a div.container', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div.container div.top div.top-content'));
+ expect(divDe).toBeTruthy();
+ });
+
+ it('should have a div.app-title inside a div.top-content', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div.top-content div.app-title'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual('');
+ });
+
+ it('should have an img inside a div.left div.top-content', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div.top-content div.left.app-icon img'));
+ expect(divDe).toBeTruthy();
+ });
+
+ it('should have a table.app-props inside a div.right inside a div.top-content', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div.top-content div.right table.app-props'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual('%app_id%:%state%:%category%:%version%:%origin%:%role%:');
+ });
+
+ it('should have an a inside an div.app-url inside a div.top-content', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div.top-content div.app-url a'));
+ expect(divDe).toBeTruthy();
+ });
+
+ it('should have a div.app-readme inside a div.middle inside a div.container', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div.container div.middle div.app-readme'));
+ expect(divDe).toBeTruthy();
+ });
+
+ it('should have a div.features inside a div.bottom inside a div.container', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('div.container div.bottom div.features'));
+ expect(divDe).toBeTruthy();
+ });
+});
diff --git a/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.ts b/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.ts
new file mode 100644
index 0000000..1e6ed29
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/apps/appsdetails/appsdetails.component.ts
@@ -0,0 +1,119 @@
+/*
+ * 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 { Component, Input, OnInit, OnDestroy, OnChanges } from '@angular/core';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+
+import { FnService } from '../../../fw/util/fn.service';
+import { LionService } from '../../../fw/util/lion.service';
+import { LoadingService } from '../../../fw/layer/loading.service';
+import { LogService } from '../../../log.service';
+import { WebSocketService } from '../../../fw/remote/websocket.service';
+
+import { DetailsPanelBaseImpl } from '../../../fw/widget/detailspanel.base';
+import { App, APPURLPREFIX, ICONURLSUFFIX } from '../apps/apps.component';
+
+/**
+ * The details view when an app is clicked from the apps view
+ *
+ * This is expected to be passed an 'id' and it makes a call
+ * to the WebSocket with an appDetailsRequest, and gets back an
+ * appDetailsResponse.
+ *
+ * The animated fly-in is controlled by the animation below
+ * The appDetailsState is attached to application-details-panel
+ * and is false (flies out) when id='' and true (flies in) when
+ * id has a value
+ */
+@Component({
+ selector: 'onos-appsdetails',
+ templateUrl: './appsdetails.component.html',
+ styleUrls: [
+ './appsdetails.component.css',
+ '../../../fw/widget/panel.css', '../../../fw/widget/panel-theme.css'
+ ],
+ animations: [
+ trigger('appDetailsState', [
+ state('true', style({
+ transform: 'translateX(-100%)',
+ opacity: '100'
+ })),
+ state('false', style({
+ transform: 'translateX(0%)',
+ opacity: '0'
+ })),
+ transition('0 => 1', animate('100ms ease-in')),
+ transition('1 => 0', animate('100ms ease-out'))
+ ])
+ ]
+})
+export class AppsDetailsComponent extends DetailsPanelBaseImpl implements OnInit, OnDestroy, OnChanges {
+ @Input() id: string;
+
+ lionFn; // Function
+ constructor(
+ protected fs: FnService,
+ protected ls: LoadingService,
+ protected log: LogService,
+ protected wss: WebSocketService,
+ protected lion: LionService,
+ ) {
+ super(fs, ls, log, wss, 'app');
+ if (this.lion.ubercache.length === 0) {
+ this.lionFn = this.dummyLion;
+ this.lion.loadCbs.set('appsdetails', () => this.doLion());
+ } else {
+ this.doLion();
+ }
+ }
+
+ /**
+ * There is a possibility that a previous selection
+ * is already registered for call - if so wait 100ms
+ * for it to deregister - this is because in the list of
+ * apps we might have selected one higher up the list and
+ * it is now being processed here before an older selection
+ * farther down the list has been removed
+ */
+ ngOnInit() {
+ this.init();
+ this.log.debug('App Details Component initialized:', this.id);
+ }
+
+ /**
+ * Stop listening to appDetailsResponse on WebSocket
+ */
+ ngOnDestroy() {
+ this.lion.loadCbs.delete('appsdetails');
+ this.destroy();
+ this.log.debug('App Details Component destroyed');
+ }
+
+ ngOnChanges() {
+ this.requestDetailsPanelData(this.id);
+ }
+
+ iconUrl(appId: string): string {
+ return APPURLPREFIX + appId + ICONURLSUFFIX;
+ }
+
+ /**
+ * Read the LION bundle for App and set up the lionFn
+ */
+ doLion() {
+ this.lionFn = this.lion.bundle('core.view.App');
+ }
+
+}
diff --git a/web/gui2/src/main/webapp/app/view/device/device.component.spec.ts b/web/gui2/src/main/webapp/app/view/device/device.component.spec.ts
new file mode 100644
index 0000000..066a636
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/device/device.component.spec.ts
@@ -0,0 +1,141 @@
+/*
+ * 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 { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { LogService } from '../../log.service';
+import { DeviceComponent } from './device.component';
+
+import { FnService, WindowSize } from '../../fw/util/fn.service';
+import { IconService } from '../../fw/svg/icon.service';
+import { GlyphService } from '../../fw/svg/glyph.service';
+import { IconComponent } from '../../fw/svg/icon/icon.component';
+import { KeyService } from '../../fw/util/key.service';
+import { LoadingService } from '../../fw/layer/loading.service';
+import { NavService } from '../../fw/nav/nav.service';
+import { MastService } from '../../fw/mast/mast.service';
+import { SvgUtilService } from '../../fw/svg/svgutil.service';
+import { ThemeService } from '../../fw/util/theme.service';
+import { WebSocketService } from '../../fw/remote/websocket.service';
+import { of } from 'rxjs';
+
+class MockActivatedRoute extends ActivatedRoute {
+ constructor(params: Params) {
+ super();
+ this.queryParams = of(params);
+ }
+}
+
+class MockDetailsPanelService {}
+
+class MockFnService {}
+
+class MockIconService {
+ loadIconDef() {}
+}
+
+class MockGlyphService {}
+
+class MockKeyService {}
+
+class MockLoadingService {
+ startAnim() {}
+ stop() {}
+}
+
+class MockNavService {}
+
+class MockMastService {}
+
+class MockTableBuilderService {}
+
+class MockTableDetailService {}
+
+class MockThemeService {}
+
+class MockWebSocketService {
+ createWebSocket() {}
+ isConnected() { return false; }
+ unbindHandlers() {}
+ bindHandlers() {}
+}
+
+/**
+ * ONOS GUI -- Device View Module - Unit Tests
+ */
+describe('DeviceComponent', () => {
+ let fs: FnService;
+ let ar: MockActivatedRoute;
+ let windowMock: Window;
+ let logServiceSpy: jasmine.SpyObj<LogService>;
+ let component: DeviceComponent;
+ let fixture: ComponentFixture<DeviceComponent>;
+
+ beforeEach(async(() => {
+ 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({
+ declarations: [ DeviceComponent, IconComponent ],
+ providers: [
+ { provide: FnService, useValue: fs },
+ { provide: IconService, useClass: MockIconService },
+ { provide: GlyphService, useClass: MockGlyphService },
+ { provide: KeyService, useClass: MockKeyService },
+ { provide: LoadingService, useClass: MockLoadingService },
+ { provide: MastService, useClass: MockMastService },
+ { provide: NavService, useClass: MockNavService },
+ { provide: LogService, useValue: logSpy },
+ { provide: ThemeService, useClass: MockThemeService },
+ { provide: WebSocketService, useClass: MockWebSocketService },
+ { provide: 'Window', useValue: windowMock },
+ ]
+ })
+ .compileComponents();
+ logServiceSpy = TestBed.get(LogService);
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DeviceComponent);
+ component = fixture.debugElement.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should have .table-header with "Friendly Name..."', () => {
+ const appDe: DebugElement = fixture.debugElement;
+ const divDe = appDe.query(By.css('.table-header'));
+ const div: HTMLElement = divDe.nativeElement;
+ expect(div.textContent).toEqual('Friendly Name Device ID Master Ports Vendor H/W Version S/W Version Protocol ');
+ });
+});
diff --git a/web/gui2/src/main/webapp/app/view/device/device.component.ts b/web/gui2/src/main/webapp/app/view/device/device.component.ts
index 99564d0..ecccc34 100644
--- a/web/gui2/src/main/webapp/app/view/device/device.component.ts
+++ b/web/gui2/src/main/webapp/app/view/device/device.component.ts
@@ -14,7 +14,6 @@
* limitations under the License.
*/
import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
-import { DetailsPanelService } from '../../fw/layer/detailspanel.service';
import { FnService } from '../../fw/util/fn.service';
import { IconService } from '../../fw/svg/icon.service';
import { KeyService } from '../../fw/util/key.service';
@@ -22,15 +21,19 @@
import { LogService } from '../../log.service';
import { MastService } from '../../fw/mast/mast.service';
import { NavService } from '../../fw/nav/nav.service';
-import { PanelService } from '../../fw/layer/panel.service';
-import { TableBaseImpl, TableResponse } from '../../fw/widget/tablebase';
-import { TableDetailService } from '../../fw/widget/tabledetail.service';
+import { TableBaseImpl, TableResponse } from '../../fw/widget/table.base';
import { WebSocketService } from '../../fw/remote/websocket.service';
+/**
+ * Model of the response from WebSocket
+ */
interface DeviceTableResponse extends TableResponse {
devices: Device[];
}
+/**
+ * Model of the devices returned from the WebSocket
+ */
interface Device {
available: boolean;
chassisid: string;
@@ -54,7 +57,7 @@
@Component({
selector: 'onos-device',
templateUrl: './device.component.html',
- styleUrls: ['./device.component.css', './device.theme.css', '../../fw/widget/table.css', '../../fw/widget/table-theme.css']
+ styleUrls: ['./device.component.css', './device.theme.css', '../../fw/widget/table.css', '../../fw/widget/table.theme.css']
})
export class DeviceComponent extends TableBaseImpl implements OnInit, OnDestroy {
@@ -66,7 +69,6 @@
pipeconfTip = 'Show pipeconf view for selected device';
constructor(
- private dps: DetailsPanelService,
protected fs: FnService,
protected ls: LoadingService,
private is: IconService,
@@ -74,8 +76,6 @@
protected log: LogService,
private mast: MastService,
private nav: NavService,
- private ps: PanelService,
- private tds: TableDetailService,
protected wss: WebSocketService,
@Inject('Window') private window: Window,
) {