Implemented WebSockets for GUI2
Change-Id: I4776ce392b1e8e94ebee938cf7df22791a1e0b8f
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 e01b004..6292a8d 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
@@ -24,21 +24,23 @@
import { LoadingService } from './loading.service';
import { PanelService } from './panel.service';
import { QuickHelpService } from './quickhelp.service';
-import { VeilService } from './veil.service';
+import { VeilComponent } from './veil/veil.component';
/**
* ONOS GUI -- Layers Module
*/
@NgModule({
exports: [
- FlashComponent
+ FlashComponent,
+ VeilComponent
],
imports: [
CommonModule,
UtilModule
],
declarations: [
- FlashComponent
+ FlashComponent,
+ VeilComponent
],
providers: [
DetailsPanelService,
@@ -46,8 +48,7 @@
EditableTextService,
LoadingService,
PanelService,
- QuickHelpService,
- VeilService
+ QuickHelpService
]
})
export class LayerModule { }
diff --git a/web/gui2/src/main/webapp/app/fw/layer/veil.service.ts b/web/gui2/src/main/webapp/app/fw/layer/veil.service.ts
deleted file mode 100644
index d755e5d..0000000
--- a/web/gui2/src/main/webapp/app/fw/layer/veil.service.ts
+++ /dev/null
@@ -1,42 +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 { GlyphService } from '../svg/glyph.service';
-import { KeyService } from '../util/key.service';
-import { LogService } from '../../log.service';
-import { WebSocketService } from '../remote/websocket.service';
-
-/**
- * ONOS GUI -- Layer -- Veil Service
- *
- * Provides a mechanism to display an overlaying div with information.
- * Used mainly for web socket connection interruption.
- */
-@Injectable()
-export class VeilService {
-
- constructor(
- private fs: FnService,
- private gs: GlyphService,
- private ks: KeyService,
- private log: LogService,
- private wss: WebSocketService
- ) {
- this.log.debug('VeilService constructed');
- }
-
-}
diff --git a/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.css b/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.css
new file mode 100644
index 0000000..851d6e3
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.css
@@ -0,0 +1,35 @@
+/*
+ * 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 -- Veil Service (layout) -- CSS file
+ */
+
+#veil {
+ z-index: 5000;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 60px;
+}
+
+#veil p {
+ display: block;
+ text-align: left;
+ font-size: 14pt;
+ font-style: italic;
+}
diff --git a/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.html b/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.html
new file mode 100644
index 0000000..79d202b
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.html
@@ -0,0 +1,9 @@
+<div id="veil" *ngIf="enabled">
+ <p *ngFor="let msg of messages">{{ msg }}</p>
+ <svg [attr.width]="fs.windowSize().width" [attr.height]="fs.windowSize().height">
+ <use [attr.width]="birdDim" [attr.height]="birdDim" class="glyph"
+ style="opacity: 0.2;"
+ xlink:href = "#bird" [attr.transform]="trans"/>
+
+ </svg>
+</div>
\ No newline at end of file
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
new file mode 100644
index 0000000..0ed493f
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.spec.ts
@@ -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 -- Layer -- Veil Service - Unit Tests
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VeilComponent } from './veil.component';
+import { ConsoleLoggerService } from '../../../consolelogger.service';
+import { LogService } from '../../../log.service';
+import { KeyService } from '../../util/key.service';
+import { GlyphService } from '../../svg/glyph.service';
+
+class MockKeyService {}
+
+class MockGlyphService {}
+
+describe('VeilComponent', () => {
+ let log: LogService;
+
+ beforeEach(() => {
+ log = new ConsoleLoggerService();
+
+ TestBed.configureTestingModule({
+ declarations: [ VeilComponent ],
+ providers: [
+ { provide: LogService, useValue: log },
+ { provide: KeyService, useClass: MockKeyService },
+ { provide: GlyphService, useClass: MockGlyphService },
+ ]
+ });
+ });
+
+ it('should create', () => {
+ const fixture = TestBed.createComponent(VeilComponent);
+ const component = fixture.componentInstance;
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.theme.css b/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.theme.css
new file mode 100644
index 0000000..7a3bded
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.theme.css
@@ -0,0 +1,34 @@
+/*
+ * 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 -- Veil Service (theme) -- CSS file
+ */
+
+.light, #veil {
+ background-color: rgba(0,0,0,0.75);
+}
+.dark, #veil {
+ background-color: rgba(64,64,64,0.75);
+}
+
+#veil p {
+ color: #ddd;
+}
+
+#veil svg .glyph {
+ fill: #222;
+}
diff --git a/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.ts b/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.ts
new file mode 100644
index 0000000..cea6bed
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/veil/veil.component.ts
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2015-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, OnInit } from '@angular/core';
+import { FnService } from '../../util/fn.service';
+import { GlyphService } from '../../svg/glyph.service';
+import { KeyService } from '../../util/key.service';
+import { LogService } from '../../../log.service';
+import { SvgUtilService } from '../../svg/svgutil.service';
+import { WebSocketService } from '../../remote/websocket.service';
+
+const BIRD = 'bird';
+
+/**
+ * ONOS GUI -- Layer -- Veil Component
+ *
+ * Provides a mechanism to display an overlaying div with information.
+ * Used mainly for web socket connection interruption.
+ *
+ * It can be added to an component's template as follows:
+ * <onos-veil #veil></onos-veil>
+ * <p (click)="veil.show(['t1','t2','t3'])">Test Veil</p>
+ */
+@Component({
+ selector: 'onos-veil',
+ templateUrl: './veil.component.html',
+ styleUrls: ['./veil.component.css', './veil.component.theme.css']
+})
+export class VeilComponent implements OnInit {
+ ww: number;
+ wh: number;
+ birdSvg: string;
+ birdDim: number;
+ enabled: boolean = false;
+ trans: string;
+ messages: string[] = [];
+ veilStyle: string;
+
+ constructor(
+ private fs: FnService,
+ private gs: GlyphService,
+ private ks: KeyService,
+ private log: LogService,
+ private sus: SvgUtilService,
+ private wss: WebSocketService
+ ) {
+ const wSize = this.fs.windowSize();
+ this.ww = wSize.width;
+ this.wh = wSize.height;
+ const shrink = this.wh * 0.3;
+ this.birdDim = this.wh - shrink;
+ const birdCenter = (this.ww - this.birdDim) / 2;
+ this.trans = this.sus.translate([birdCenter, shrink / 2]);
+
+ this.log.debug('VeilComponent with ' + BIRD + ' constructed');
+ }
+
+ ngOnInit() {
+ }
+
+ // msg should be an array of strings
+ show(msgs: string[]): void {
+ this.messages = msgs;
+ this.enabled = true;
+// this.ks.enableKeys(false);
+ }
+
+ hide(): void {
+ this.veilStyle = 'display: none';
+// this.ks.enableKeys(true);
+ }
+
+
+}