Added Help menu with doc link and About modal.

6 files changed, 130 insertions, 6 deletions

diff --git a/webapp/src/app/@theme/components/footer/footer.component.ts b/webapp/src/app/@theme/components/footer/footer.component.ts
index 8e1e825..1e3d704 100644
--- a/webapp/src/app/@theme/components/footer/footer.component.ts
+++ b/webapp/src/app/@theme/components/footer/footer.component.ts
@@ -6,8 +6,6 @@ import { Component } from '@angular/core';
   template: `
     <span class="created-by">Created by
     <b><a href="http://iot.bzh" target="_blank">IoT.bzh</a></b> 2017
-    &nbsp;&nbsp;
-    <span style="font-size: small;">(powered by <a href="https://github.com/akveo/ngx-admin" target="_blank">akveo/ngx-admin</a>)</span>
     </span>
     <!-- MODS_XDS
     <div class="socials">
diff --git a/webapp/src/app/@theme/components/header/header.component.html b/webapp/src/app/@theme/components/header/header.component.html
index 4fa66b8..2cbde26 100644
--- a/webapp/src/app/@theme/components/header/header.component.html
+++ b/webapp/src/app/@theme/components/header/header.component.html
@@ -24,7 +24,8 @@
   </nb-action>
   <nb-action class="control-item" disabled icon="nb-notifications">
   </nb-action>
-  <nb-action icon="fa fa-question-circle-o">
+  <nb-action>
+      <nb-user [menu]="helpMenu" [name]="helpName" [showInitials]="true" [showName]="false" (menuClick)=helpClick($event)></nb-user>
   </nb-action>
 
   <!-- MODS_XDS
diff --git a/webapp/src/app/@theme/components/header/header.component.ts b/webapp/src/app/@theme/components/header/header.component.ts
index e2a84cb..4a9ac0f 100644
--- a/webapp/src/app/@theme/components/header/header.component.ts
+++ b/webapp/src/app/@theme/components/header/header.component.ts
@@ -5,6 +5,9 @@ import { NbMenuService, NbSidebarService } from '@nebular/theme';
 import { UserService } from '../../../@core-xds/services/users.service';
 import { AnalyticsService } from '../../../@core/utils/analytics.service';
 
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { AboutModalComponent } from '../../../pages/about/about-modal/about-modal.component';
+
 @Component({
   selector: 'ngx-header',
   styleUrls: ['./header.component.scss'],
@@ -19,10 +22,23 @@ export class HeaderComponent implements OnInit {
 
   userMenu = [{ title: 'Profile' }, { title: 'Log out' }];
 
+  // XDS_MODS - FIXME: better to define own XDS component instead of reuse nb-user
+  helpName = '?';
+  helpMenu = [
+    {
+      title: 'Online XDS documentation',
+      target: '_blank',
+      url: 'http://docs.automotivelinux.org/docs/devguides/en/dev/#xcross-development-system-user\'s-guide',
+    },
+    { title: 'About' },
+  ];
+
   constructor(private sidebarService: NbSidebarService,
-              private menuService: NbMenuService,
-              private userService: UserService,
-              private analyticsService: AnalyticsService) {
+    private menuService: NbMenuService,
+    private userService: UserService,
+    private analyticsService: AnalyticsService,
+    private modalService: NgbModal,
+  ) {
   }
 
   ngOnInit() {
@@ -48,4 +64,13 @@ export class HeaderComponent implements OnInit {
   startSearch() {
     this.analyticsService.trackEvent('startSearch');
   }
+
+  // XDS_MODS
+  helpClick($event: any) {
+    if ($event.title === 'About') {
+        // FIXME SEB - move code in XDS part
+        const activeModal = this.modalService.open(AboutModalComponent, { size: 'lg', container: 'nb-layout' });
+    }
+
+  }
 }
diff --git a/webapp/src/app/pages/about/about-modal/about-modal.component.ts b/webapp/src/app/pages/about/about-modal/about-modal.component.ts
new file mode 100644
index 0000000..df08461
--- /dev/null
+++ b/webapp/src/app/pages/about/about-modal/about-modal.component.ts
@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { XDSAgentService, IXDSVersions, IXDSVer } from '../../../@core-xds/services/xdsagent.service';
+
+
+@Component({
+  selector: 'xds-about-modal',
+  template: `
+    <div class="modal-header">
+      <span>About <b>X</b>(cross) Development System</span>
+      <button class="close" aria-label="Close" (click)="closeModal()">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+
+    <div class="modal-body row">
+      <div class="col-12">
+        <label class="col-sm-4">Developed by IoT.bzh</label>
+        <span class="col-sm-8"><a href="http://iot.bzh/en/author" target="_blank">http://iot.bzh</a></span>
+      </div>
+      <div class="col-12">
+        <label class="col-sm-4">Powered by</label>
+        <span class="col-sm-8"><a href="https://github.com/akveo/ngx-admin" target="_blank">akveo/ngx-admin</a></span>
+      </div>
+
+      <br><br>
+
+      <div class="col-12">
+          <label class="col-sm-4">XDS Agent ID</label>
+          <span class="col-sm-8">{{agent?.id}}</span>
+      </div>
+      <div class="col-12">
+        <label class="col-sm-4">XDS Agent Version</label>
+        <span class="col-sm-8">{{agent?.version}}</span>
+      </div>
+      <div class="col-12">
+        <label class="col-sm-4">XDS Agent Sub-Version</label>
+        <span class="col-sm-8">{{agent?.gitTag}}</span>
+      </div>
+
+      <div class="col-12">
+        <label class="col-sm-4">XDS Server ID</label>
+        <span class="col-sm-8">{{server?.id}}</span>
+      </div>
+      <div class="col-12">
+        <label class="col-sm-4">XDS Server Version</label>
+        <span class="col-sm-8">{{server?.version}}</span>
+      </div>
+      <div class="col-12">
+        <label class="col-sm-4">XDS Server Sub-Version</label>
+        <span class="col-sm-8">{{server?.gitTag}}</span>
+      </div>
+
+    </div>
+  `,
+})
+
+export class AboutModalComponent implements OnInit {
+
+  agent: IXDSVer;
+  server: IXDSVer;
+
+  constructor(
+    private activeModal: NgbActiveModal,
+    private xdsSvr: XDSAgentService,
+  ) { }
+
+  ngOnInit() {
+    this.xdsSvr.getVersion().subscribe(v => {
+      this.agent = v.client;
+      if (v && v.servers.length > 0 && !v.servers[0].version.startsWith('Cannot retrieve')) {
+        this.server = v.servers[0];
+      }
+    });
+  }
+
+  closeModal() {
+    this.activeModal.close();
+  }
+}
diff --git a/webapp/src/app/pages/about/about.module.ts b/webapp/src/app/pages/about/about.module.ts
new file mode 100644
index 0000000..b7667ff
--- /dev/null
+++ b/webapp/src/app/pages/about/about.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { ThemeModule } from '../../@theme/theme.module';
+
+import { AboutModalComponent } from './about-modal/about-modal.component';
+
+@NgModule({
+  imports: [
+    ThemeModule,
+  ],
+  declarations: [
+    AboutModalComponent,
+  ],
+  entryComponents: [
+    AboutModalComponent,
+  ],
+})
+export class AboutModule { }
diff --git a/webapp/src/app/pages/pages.module.ts b/webapp/src/app/pages/pages.module.ts
index 5e4f3be..3f3be8e 100644
--- a/webapp/src/app/pages/pages.module.ts
+++ b/webapp/src/app/pages/pages.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { ToasterModule } from 'angular2-toaster';
 
 import { PagesComponent } from './pages.component';
+import { AboutModule } from './about/about.module';
 import { DashboardModule } from './dashboard/dashboard.module';
 import { BuildModule } from './build/build.module';
 import { ProjectsModule } from './projects/projects.module';
@@ -19,6 +20,7 @@ const PAGES_COMPONENTS = [
   imports: [
     PagesRoutingModule,
     ThemeModule,
+    AboutModule,
     BuildModule,
     DashboardModule,
     ProjectsModule,