Initial import of Angular5 components services and modules

Change-Id: I3953f1fbf7d5697a1c6d432808dd17d816ec285a
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
new file mode 100644
index 0000000..dcd33b0
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/detailspanel.service.ts
@@ -0,0 +1,43 @@
+/*
+ * 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 etc: 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
new file mode 100644
index 0000000..880e2bd
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/dialog.service.ts
@@ -0,0 +1,41 @@
+/*
+ *  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.
+ */
+
+import { Injectable } from '@angular/core';
+
+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()
+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/editabletext.service.ts b/web/gui2/src/main/webapp/app/fw/layer/editabletext.service.ts
new file mode 100644
index 0000000..068e0cc
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/editabletext.service.ts
@@ -0,0 +1,35 @@
+/*
+ * 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 { KeyService } from '../util/key.service';
+import { LogService } from '../../log.service';
+import { WebSocketService } from '../remote/websocket.service';
+
+/**
+ * ONOS GUI -- Layer -- Editable Text Service
+ */
+@Injectable()
+export class EditableTextService {
+
+    constructor(
+        private ks: KeyService,
+        private log: LogService,
+        private wss: WebSocketService
+    ) {
+      this.log.debug('EditableTextService constructed');
+    }
+
+}
diff --git a/web/gui2/src/main/webapp/app/fw/layer/flash.service.ts b/web/gui2/src/main/webapp/app/fw/layer/flash.service.ts
new file mode 100644
index 0000000..bd71d28
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/flash.service.ts
@@ -0,0 +1,34 @@
+/*
+ * 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 { LogService } from '../../log.service';
+
+/**
+ * ONOS GUI -- Layer -- Flash Service
+ *
+ * Provides a mechanism to flash short informational messages to the screen
+ * to alert the user of something, e.g. "Hosts visible" or "Hosts hidden".
+ */
+@Injectable()
+export class FlashService {
+
+  constructor(
+    private log: LogService
+  ) {
+    this.log.debug('FlashService 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
new file mode 100644
index 0000000..f5923fc
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/layer.module.ts
@@ -0,0 +1,48 @@
+/*
+ * 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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UtilModule } from '../util/util.module';
+
+import { DetailsPanelService } from './detailspanel.service';
+import { DialogService } from './dialog.service';
+import { EditableTextService } from './editabletext.service';
+import { FlashService } from './flash.service';
+import { LoadingService } from './loading.service';
+import { PanelService } from './panel.service';
+import { QuickHelpService } from './quickhelp.service';
+import { VeilService } from './veil.service';
+
+/**
+ * ONOS GUI -- Layers Module
+ */
+@NgModule({
+  imports: [
+    CommonModule,
+    UtilModule
+  ],
+  providers: [
+    DetailsPanelService,
+    DialogService,
+    EditableTextService,
+    FlashService,
+    LoadingService,
+    PanelService,
+    QuickHelpService,
+    VeilService
+  ]
+})
+export class LayerModule { }
diff --git a/web/gui2/src/main/webapp/app/fw/layer/loading.service.css b/web/gui2/src/main/webapp/app/fw/layer/loading.service.css
new file mode 100644
index 0000000..b787f3b
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/loading.service.css
@@ -0,0 +1,27 @@
+/*
+ *  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 -- Loading Service -- CSS file
+ */
+
+#loading-anim {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
diff --git a/web/gui2/src/main/webapp/app/fw/layer/loading.service.ts b/web/gui2/src/main/webapp/app/fw/layer/loading.service.ts
new file mode 100644
index 0000000..6c31f15
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/loading.service.ts
@@ -0,0 +1,135 @@
+/*
+ *  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';
+import { ThemeService } from '../util/theme.service';
+import { WebSocketService } from '../remote/websocket.service';
+import * as d3 from 'd3';
+
+const id = 'loading-anim';
+const dir = 'data/img/loading/';
+const pfx = '/load-';
+const nImgs = 16;
+const speed = 100;
+const waitDelay = 500;
+
+
+/**
+ * ONOS GUI -- Layer -- Loading Service
+ *
+ * Provides a mechanism to start/stop the loading animation, center screen.
+ */
+@Injectable()
+export class LoadingService {
+    images: any[] = [];
+    idx: number = 0;
+    img: any;
+    theme: string;
+    task: any;
+    wait: number;
+
+    constructor(
+        private fs: FnService,
+        private log: LogService,
+        private ts: ThemeService,
+        private wss: WebSocketService
+    ) {
+        this.preloadImages();
+        this.log.debug('LoadingService constructed');
+    }
+
+    dbg(...args) {
+        this.fs.debug(this.constructor.name, args);
+    }
+
+    preloadImages() {
+        let idx: number;
+
+        this.dbg('preload images start...');
+        for (idx=1; idx<=nImgs; idx++) {
+            this.addImg('light', idx);
+            this.addImg('dark', idx);
+        }
+        this.dbg('preload images DONE!', this.images);
+    }
+
+    addImg(theme: string, idx: number) {
+        let img = new Image();
+        img.src = this.fname(idx, theme);
+        this.images.push(img);
+    }
+
+    fname(i: number, theme: string) {
+        const z = i > 9 ? '' : '0';
+        return dir + theme + pfx + z + i + '.png';
+    }
+
+    nextFrame() {
+        this.idx = this.idx === 16 ? 1 : this.idx + 1;
+        this.img.attr('src', this.fname(this.idx, this.theme));
+    }
+
+    // start displaying 'loading...' animation (idempotent)
+    startAnim() {
+        this.dbg('start ANIMATION');
+        this.theme = this.ts.getTheme();
+        let div = d3.select('#'+id);
+        if (div.empty()) {
+            div = d3.select('body')
+                .append('div')
+                .attr('id', id);
+            this.img = div
+                .append('img')
+                .attr('src', this.fname(1, this.theme));
+            this.idx = 1;
+            this.task = setInterval(() => this.nextFrame(), speed);
+        }
+    }
+
+    // stop displaying 'loading...' animation (idempotent)
+    stopAnim() {
+        this.dbg('*stop* ANIMATION');
+        if (this.task) {
+            clearInterval(this.task);
+            this.task = null;
+        }
+        d3.select('#'+id).remove();
+    }
+
+    // schedule function to start animation in the future
+    start() {
+        this.dbg('start (schedule)');
+        this.wait = setTimeout(this.startAnim(), waitDelay);
+    }
+
+    // cancel future start, if any; stop the animation
+    stop() {
+        if (this.wait) {
+            this.dbg('start CANCELED');
+            clearTimeout(this.wait);
+            this.wait = null;
+        }
+        this.stopAnim();
+    }
+
+    // return true if start() has been called but not stop()
+    waiting() {
+        return !!this.wait;
+    }
+
+
+}
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
new file mode 100644
index 0000000..7ccb7d9
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/panel.service.ts
@@ -0,0 +1,33 @@
+/*
+ * 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
new file mode 100644
index 0000000..f433a2b
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/quickhelp.service.ts
@@ -0,0 +1,39 @@
+/*
+ * 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 { LionService } from '../util/lion.service';
+import { LogService } from '../../log.service';
+import { SvgUtilService } from '../svg/svgutil.service';
+
+/**
+ * ONOS GUI -- Layer -- Quick Help Service
+ *
+ * Provides a mechanism to display key bindings and mouse gesture notes.
+ */
+@Injectable()
+export class QuickHelpService {
+
+  constructor(
+    private fs: FnService,
+    private ls: LionService,
+    private log: LogService,
+    private sus: SvgUtilService
+  ) {
+    this.log.debug('QuickhelpService constructed');
+  }
+
+}
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
new file mode 100644
index 0000000..d755e5d
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/fw/layer/veil.service.ts
@@ -0,0 +1,42 @@
+/*
+ * 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');
+  }
+
+}