GUI2 add in support for Preferences Service
Change-Id: Icdf2165d9f638aeff1b110a64777b93295935ed2
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css
new file mode 100644
index 0000000..26c1643
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css
@@ -0,0 +1,54 @@
+/*
+ * 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 -- Quickhelp Panel -- CSS file
+ */
+
+/*
+ ONOS GUI -- Quick Help Service (layout) -- CSS file
+ */
+
+#quickhelp {
+ top: 100px;
+ z-index: 5000;
+ position: relative;
+}
+
+#quickhelp div.help {
+ background: black;
+ opacity: 0.8;
+}
+
+#quickhelp div.help table {
+ vertical-align: top;
+}
+
+#quickhelp div.help p {
+ text-align: center;
+ color: white;
+ font-weight: bold;
+}
+
+#quickhelp td.key {
+ color: #add;
+ padding-left: 8px;
+ padding-right: 4px;
+}
+
+#quickhelp td.desc {
+ color: white;
+}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html
new file mode 100644
index 0000000..d387284
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html
@@ -0,0 +1,160 @@
+<!--
+~ Copyright 2019-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="quickhelp" [@quickHelpState]="ks.quickHelpShown">
+ <div class="help" *ngIf="ks.quickHelpShown">
+ <p class="title">{{lionFn("qh_title")}}</p>
+ <!-- TODO: drive this through the keys service keyHandler -->
+ <table class="qhrow">
+ <tr>
+ <td class="key">\</td>
+ <td class="desc">Afficher/cacher l'aide rapide</td>
+ </tr>
+ <tr>
+ <td class="key">/</td>
+ <td class="desc">Afficher/cacher l'aide rapide</td>
+ </tr>
+ <tr>
+ <td class="key">Esc</td>
+ <td class="desc">ignorer la boîte de dialogue ou annuler les
+ sélections
+ </td>
+ </tr>
+ <tr>
+ <td class="key">T</td>
+ <td class="desc">basculer de thème</td>
+ </tr>
+ </table>
+ <hr class="qhrowsep">
+ <table class="qhrow">
+ <tr>
+ <td class="key">I</td>
+ <td class="desc">Basculer au panneau de instance
+ ONOS
+ </td>
+ <td class="key">O</td>
+ <td class="desc">Baculer au panneau récapitulatif
+ ONOS
+ </td>
+ <td class="key">D</td>
+ <td class="desc">Basculer le panneau de détails</td>
+ </tr>
+ <tr>
+ <td class="key">H</td>
+ <td class="desc">Basculer la visibilité de l'hôte
+ </td>
+ <td class="key">M</td>
+ <td class="desc">Basculer la visibilité hors-ligne
+ </td>
+ <td class="key">P</td>
+ <td class="desc">Basculer le port mis en évidence
+ </td>
+ </tr>
+ <tr>
+ <td class="key">Dash</td>
+ <td class="desc">Montrer les mauvais liens</td>
+ <td class="key">B</td>
+ <td class="desc">Basculer la carte géo de fond</td>
+ <td class="key">G</td>
+ <td class="desc">Sélectionner la carte géo de fond
+ </td>
+ </tr>
+ <tr>
+ <td class="key">S</td>
+ <td class="desc">Toggle sprite layer</td>
+ <td class="key" y="0">X</td>
+ <td class="desc" y="0" x="33.53125">réinitialiser la
+ carte des noeuds
+ </td>
+ <td class="key">Z</td>
+ <td class="desc">Basculer la vue oblique
+ (expérimental)
+ </td>
+ </tr>
+ <tr>
+ <td class="key">N</td>
+ <td class="desc">cycle couche de noeuds</td>
+ <td class="key">L</td>
+ <td class="desc">Parcourir étiquettes appareils</td>
+ <td class="key">Shift-l</td>
+ <td class="desc">Parcourir étiquettes hôte</td>
+ </tr>
+ <tr>
+ <td class="key">U</td>
+ <td class="desc">survoler avec la souris</td>
+ <td class="key">R</td>
+ <td class="desc">réinitialiser le zoom et le
+ panoramique
+ </td>
+ <td class="key">E</td>
+ <td class="desc">Egaliser les rôles de maîtrises
+ </td>
+ </tr>
+ <tr>
+ <td class="key">Dot</td>
+ <td class="desc">Basculer a la barre d'outils</td>
+ <td class="key">0</td>
+ <td class="desc">Annuler la surveillance du trafic
+ </td>
+ <td class="key">A</td>
+ <td class="desc">Surveiller tout le trafic</td>
+ </tr>
+ <tr>
+ <td class="key">F</td>
+ <td class="desc">Afficher les flux de liaison de périphérique
+ </td>
+ <td class="key">V</td>
+ <td class="desc">Show all related intents</td>
+ <td class="key">L-arrow</td>
+ <td class="desc">Show previous related intent</td>
+ </tr>
+ <tr>
+ <td class="key">R-arrow</td>
+ <td class="desc">Show next related intent</td>
+ <td class="key">W</td>
+ <td class="desc">Monitor traffic of selected intent</td>
+ </tr>
+ </table>
+ <hr>
+ <div class="qhrow">
+ <table class="qh-r4-c0">
+ <tr>
+ <td class="key">cliquer</td>
+ <td class="desc">Sélectionner l'article et montrer les
+ détails
+ </td>
+ </tr>
+ <tr>
+ <td class="key">Cliquer sur MAJ</td>
+ <td class="desc">Basculer l'état de sélection</td>
+ </tr>
+ <tr>
+ <td class="key">Glisser</td>
+ <td class="desc">Repositionner (et épingler) le périphérique
+ / l'hôte
+ </td>
+ </tr>
+ <tr>
+ <td class="key">cmd défiler</td>
+ <td class="desc">Zoom avant/arrière</td>
+ </tr>
+ <tr>
+ <td class="key" y="48">cmd-glisser</td>
+ <td class="desc" y="48" x="74.84375">Pan
+ </tr>
+ </table>
+ </div>
+ </div>
+</div>
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.spec.ts
new file mode 100644
index 0000000..da60a1b
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.spec.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2019-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 { QuickhelpComponent } from './quickhelp.component';
+import {LogService} from '../../log.service';
+import {ConsoleLoggerService} from '../../consolelogger.service';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {FnService} from '../../util/fn.service';
+import {LionService} from '../../util/lion.service';
+import {KeysService} from '../../util/keys.service';
+
+class MockFnService {}
+
+class MockKeysService {
+
+}
+
+/**
+ * ONOS GUI -- Layer -- Quickhelp Component - Unit Tests
+ */
+describe('QuickhelpComponent', () => {
+ let log: LogService;
+ let component: QuickhelpComponent;
+ let fixture: ComponentFixture<QuickhelpComponent>;
+ const bundleObj = {
+ 'core.fw.QuickHelp': {
+ test: 'test1',
+ tt_help: 'Help!'
+ }
+ };
+ const mockLion = (key) => {
+ return bundleObj[key] || '%' + key + '%';
+ };
+
+ beforeEach(async(() => {
+ log = new ConsoleLoggerService();
+ TestBed.configureTestingModule({
+ imports: [ BrowserAnimationsModule ],
+ declarations: [ QuickhelpComponent ],
+ providers: [
+ { provide: LogService, useValue: log },
+ { provide: FnService, useClass: MockFnService },
+ { provide: LionService, useFactory: (() => {
+ return {
+ bundle: ((bundleId) => mockLion),
+ ubercache: new Array(),
+ loadCbs: new Map<string, () => void>([])
+ };
+ })
+ },
+ { provide: KeysService, useClass: MockKeysService }
+ ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(QuickhelpComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts
new file mode 100644
index 0000000..6789e14
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2019-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} from '@angular/core';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {LogService} from '../../log.service';
+import {FnService} from '../../util/fn.service';
+import {KeysService} from '../../util/keys.service';
+import {LionService} from '../../util/lion.service';
+
+
+@Component({
+ selector: 'onos-quickhelp',
+ templateUrl: './quickhelp.component.html',
+ styleUrls: ['./quickhelp.component.css'],
+ animations: [
+ trigger('quickHelpState', [
+ state('true', style({
+ opacity: '1.0',
+ })),
+ state('false', style({
+ opacity: '0.0',
+ })),
+ transition('0 => 1', animate('500ms ease-in')),
+ transition('1 => 0', animate('500ms ease-out'))
+ ])
+ ]
+})
+export class QuickhelpComponent {
+ lionFn; // Function
+
+ constructor(
+ private log: LogService,
+ private fs: FnService,
+ public ks: KeysService,
+ private lion: LionService
+ ) {
+ if (this.lion.ubercache.length === 0) {
+ this.lionFn = this.dummyLion;
+ this.lion.loadCbs.set('quickhelp', () => this.doLion());
+ } else {
+ this.doLion();
+ }
+
+ this.log.debug('Quickhelp component constructed');
+ }
+
+ /**
+ * Read the LION bundle for Toolbar and set up the lionFn
+ */
+ doLion() {
+ this.lionFn = this.lion.bundle('core.fw.QuickHelp');
+ }
+
+ /**
+ * 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 + '%';
+ }
+}