Added Grafana url setting in config panel

Change-Id: I13be1f49afb53fa4598e25a4234bb0578fb66f23
Signed-off-by: Sebastien Douheret <sebastien.douheret@iot.bzh>

5 files changed, 67 insertions, 284 deletions

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index a4e9342..5aa2a4f 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -3027,259 +3027,9 @@
       }
     },
     "d3": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-4.8.0.tgz",
-      "integrity": "sha1-GtjRiZeGnJC2rWEU6bkkJc7nhGA=",
-      "requires": {
-        "d3-array": "1.2.0",
-        "d3-axis": "1.0.6",
-        "d3-brush": "1.0.4",
-        "d3-chord": "1.0.4",
-        "d3-collection": "1.0.3",
-        "d3-color": "1.0.3",
-        "d3-dispatch": "1.0.3",
-        "d3-drag": "1.0.4",
-        "d3-dsv": "1.0.5",
-        "d3-ease": "1.0.3",
-        "d3-force": "1.0.6",
-        "d3-format": "1.2.0",
-        "d3-geo": "1.6.3",
-        "d3-hierarchy": "1.1.4",
-        "d3-interpolate": "1.1.4",
-        "d3-path": "1.0.5",
-        "d3-polygon": "1.0.3",
-        "d3-quadtree": "1.0.3",
-        "d3-queue": "3.0.5",
-        "d3-random": "1.0.3",
-        "d3-request": "1.0.5",
-        "d3-scale": "1.0.5",
-        "d3-selection": "1.0.5",
-        "d3-shape": "1.0.6",
-        "d3-time": "1.0.6",
-        "d3-time-format": "2.0.5",
-        "d3-timer": "1.0.5",
-        "d3-transition": "1.0.4",
-        "d3-voronoi": "1.1.2",
-        "d3-zoom": "1.1.4"
-      }
-    },
-    "d3-array": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.0.tgz",
-      "integrity": "sha1-FH0mlyDhdMQFen9CvosPPyulMQg="
-    },
-    "d3-axis": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.6.tgz",
-      "integrity": "sha1-3MvCGnPleG3oIL8aIrI39SK4eL4="
-    },
-    "d3-brush": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.4.tgz",
-      "integrity": "sha1-AMLyOAGfJPbAoZSibUGhUw/+e8Q=",
-      "requires": {
-        "d3-dispatch": "1.0.3",
-        "d3-drag": "1.0.4",
-        "d3-interpolate": "1.1.4",
-        "d3-selection": "1.0.5",
-        "d3-transition": "1.0.4"
-      }
-    },
-    "d3-chord": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.4.tgz",
-      "integrity": "sha1-fexPC6iG9xP+ERxF92NBT290yiw=",
-      "requires": {
-        "d3-array": "1.2.0",
-        "d3-path": "1.0.5"
-      }
-    },
-    "d3-collection": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.3.tgz",
-      "integrity": "sha1-AL3qlPvBYo1DWruuL03CFk433TQ="
-    },
-    "d3-color": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz",
-      "integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs="
-    },
-    "d3-dispatch": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.3.tgz",
-      "integrity": "sha1-RuFJHqqbWMNY/OW+TovtYm54cfg="
-    },
-    "d3-drag": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.0.4.tgz",
-      "integrity": "sha1-qcFgnxHdVTCuJ169ZDd+xU77nY8=",
-      "requires": {
-        "d3-dispatch": "1.0.3",
-        "d3-selection": "1.0.5"
-      }
-    },
-    "d3-dsv": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.0.5.tgz",
-      "integrity": "sha1-QZ99tH9ih4n8P9tjbmeESdCCETY=",
-      "requires": {
-        "commander": "2.15.1",
-        "iconv-lite": "0.4.19",
-        "rw": "1.3.3"
-      }
-    },
-    "d3-ease": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.3.tgz",
-      "integrity": "sha1-aL+8NJM4o4DETYrMT7wzBKotjA4="
-    },
-    "d3-force": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.0.6.tgz",
-      "integrity": "sha1-6n4bdzDiZkzTFPWU1nGMV8wTK3k=",
-      "requires": {
-        "d3-collection": "1.0.3",
-        "d3-dispatch": "1.0.3",
-        "d3-quadtree": "1.0.3",
-        "d3-timer": "1.0.5"
-      }
-    },
-    "d3-format": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.0.tgz",
-      "integrity": "sha1-a0gLqohohdRlHcJIqPSsnaFtsHo="
-    },
-    "d3-geo": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.6.3.tgz",
-      "integrity": "sha1-IWg6Q6Bh6rohp/JUtR1ZN+tkB1Y=",
-      "requires": {
-        "d3-array": "1.2.0"
-      }
-    },
-    "d3-hierarchy": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.4.tgz",
-      "integrity": "sha1-lsOULz8hz5l6EbTt8A3eKne0xtA="
-    },
-    "d3-interpolate": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.4.tgz",
-      "integrity": "sha1-pD7Fs77jUNhRbv34GaTAjAU9swI=",
-      "requires": {
-        "d3-color": "1.0.3"
-      }
-    },
-    "d3-path": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.5.tgz",
-      "integrity": "sha1-JB6xhJvZ6egCHA0KeZ+KDo5EF2Q="
-    },
-    "d3-polygon": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.3.tgz",
-      "integrity": "sha1-FoiOkCZGCTPysXllKtN4Ik04LGI="
-    },
-    "d3-quadtree": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.3.tgz",
-      "integrity": "sha1-rHmH4+I/6AWpkPKOG1DTj8uCJDg="
-    },
-    "d3-queue": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/d3-queue/-/d3-queue-3.0.5.tgz",
-      "integrity": "sha1-DO/+HxMcRZsTufafEFa0HfwzwA0="
-    },
-    "d3-random": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.0.3.tgz",
-      "integrity": "sha1-ZSbIRKpefEV+Kd2s1vJzT4RbQsE="
-    },
-    "d3-request": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/d3-request/-/d3-request-1.0.5.tgz",
-      "integrity": "sha1-TarpRtHdDVff4B8CKVY1SVjVHyM=",
-      "requires": {
-        "d3-collection": "1.0.3",
-        "d3-dispatch": "1.0.3",
-        "d3-dsv": "1.0.5",
-        "xmlhttprequest": "1.8.0"
-      }
-    },
-    "d3-scale": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.5.tgz",
-      "integrity": "sha1-QYUG8PsY6wUrOF4ZY5iswqQTSFg=",
-      "requires": {
-        "d3-array": "1.2.0",
-        "d3-collection": "1.0.3",
-        "d3-color": "1.0.3",
-        "d3-format": "1.2.0",
-        "d3-interpolate": "1.1.4",
-        "d3-time": "1.0.6",
-        "d3-time-format": "2.0.5"
-      }
-    },
-    "d3-selection": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.0.5.tgz",
-      "integrity": "sha1-lIxztBpE4o0XQq4v8gfCrryic0s="
-    },
-    "d3-shape": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.0.6.tgz",
-      "integrity": "sha1-sJ4wXPDHxrmpjJDmtC9i2sS8/Vs=",
-      "requires": {
-        "d3-path": "1.0.5"
-      }
-    },
-    "d3-time": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.6.tgz",
-      "integrity": "sha1-pVsT19FdOhYK6RcIIy4INfHV6UU="
-    },
-    "d3-time-format": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.0.5.tgz",
-      "integrity": "sha1-nXeAIE98kRnJFwsaVttN6aivly4=",
-      "requires": {
-        "d3-time": "1.0.6"
-      }
-    },
-    "d3-timer": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.5.tgz",
-      "integrity": "sha1-smbUdscbDSaeesXzUrQQo7b+bvA="
-    },
-    "d3-transition": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.0.4.tgz",
-      "integrity": "sha1-4anrrjhpqdnCh0qwCEH6gxOuXeU=",
-      "requires": {
-        "d3-color": "1.0.3",
-        "d3-dispatch": "1.0.3",
-        "d3-ease": "1.0.3",
-        "d3-interpolate": "1.1.4",
-        "d3-selection": "1.0.5",
-        "d3-timer": "1.0.5"
-      }
-    },
-    "d3-voronoi": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz",
-      "integrity": "sha1-Fodmfo8TotFYyAwUgMWinLDYlzw="
-    },
-    "d3-zoom": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.1.4.tgz",
-      "integrity": "sha1-kD/SyYi1ys5D8A3Peq4JRwycwS0=",
-      "requires": {
-        "d3-dispatch": "1.0.3",
-        "d3-drag": "1.0.4",
-        "d3-interpolate": "1.1.4",
-        "d3-selection": "1.0.5",
-        "d3-transition": "1.0.4"
-      }
+      "version": "3.5.17",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz",
+      "integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g="
     },
     "dargs": {
       "version": "4.1.0",
@@ -11170,11 +10920,6 @@
         "aproba": "1.2.0"
       }
     },
-    "rw": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
-    },
     "rxjs": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.0.tgz",
@@ -15011,11 +14756,6 @@
       "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=",
       "dev": true
     },
-    "xmlhttprequest": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
-      "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
-    },
     "xmlhttprequest-ssl": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz",
diff --git a/webapp/src/app/@core-xds/services/config.service.ts b/webapp/src/app/@core-xds/services/config.service.ts
index 168b278..beeeea8 100644
--- a/webapp/src/app/@core-xds/services/config.service.ts
+++ b/webapp/src/app/@core-xds/services/config.service.ts
@@ -26,6 +26,7 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 export interface IConfig {
   language: string;
   theme: string;
+  grafanaDashboardUrl: string;
 }
 
 @Injectable()
@@ -36,6 +37,12 @@ export class ConfigService {
   private confSubject: BehaviorSubject<IConfig>;
   private confStore: IConfig;
 
+  private confDefault: IConfig = {
+    language: 'ENG',
+    theme: 'default',
+    grafanaDashboardUrl: 'http://localhost:3000',
+  };
+
   constructor(
     private cookie: CookieService,
     private themeService: NbThemeService,
@@ -43,17 +50,20 @@ export class ConfigService {
     this.confSubject = <BehaviorSubject<IConfig>>new BehaviorSubject(this.confStore);
     this.Conf$ = this.confSubject.asObservable();
 
-    // Load initial config and apply it
-    this.load();
-    this.themeService.changeTheme(this.confStore.theme);
-
     // Save selected theme in cookie
     this.themeService.onThemeChange().subscribe(tm => {
+      if (typeof this.confStore === 'undefined') {
+        return;
+      }
       if (tm.name !== this.confStore.theme) {
         this.confStore.theme = tm.name;
         this.save();
       }
     });
+
+    // Load initial config and apply it
+    this.load();
+    this.themeService.changeTheme(this.confStore.theme);
   }
 
   // Load config
@@ -62,17 +72,20 @@ export class ConfigService {
     const cookConf = this.cookie.getObject('xds-config');
     if (cookConf != null) {
       this.confStore = <IConfig>cookConf;
+      this.confSubject.next(Object.assign({}, this.confStore));
     } else {
       // Set default config
-      this.confStore = {
-        language: 'ENG',
-        theme: 'default',
-      };
+      this.confStore = this.confDefault;
+      this.save();
     }
   }
 
   // Save config into cookie
-  save() {
+  save(cfg?: IConfig) {
+    if (typeof cfg !== 'undefined') {
+      this.confStore = this.confDefault;
+    }
+
     // Notify subscribers
     this.confSubject.next(Object.assign({}, this.confStore));
 
diff --git a/webapp/src/app/pages/config/config-global/config-global.component.html b/webapp/src/app/pages/config/config-global/config-global.component.html
index 0038510..c3bc8b4 100644
--- a/webapp/src/app/pages/config/config-global/config-global.component.html
+++ b/webapp/src/app/pages/config/config-global/config-global.component.html
@@ -3,35 +3,47 @@
     <nb-card>
       <nb-card-header>Global Configuration</nb-card-header>
       <nb-card-body>
-
-        <form (ngSubmit)="onSubmit()" #ConfigGlobalForm="ngForm">
-          <div class="form-group row">
-            <label class="col-sm-3 col-form-label">Language</label>
-            <div class="col-sm-9">
-              <select class="form-control" (ngModelChange)="configFormChanged=true">
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Language</label>
+          <div class="col-sm-9">
+            <select class="form-control" (ngModelChange)="configFormChanged=true">
                 <option>English</option>
                 <!-- FIXME: implement i18n and add | translate
                 <option>French</option> -->
               </select>
-            </div>
           </div>
+        </div>
+
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Theme</label>
+          <div class="col-sm-9">
+            <ngx-theme-switcher id="theme-switcher"></ngx-theme-switcher>
+          </div>
+        </div>
+      </nb-card-body>
+    </nb-card>
+  </div>
 
+  <div class="col-md-12">
+    <nb-card>
+      <nb-card-header>Supervision Configuration</nb-card-header>
+      <nb-card-body>
+        <form (ngSubmit)="onSubmit()" #ConfigGlobalForm="ngForm">
           <div class="form-group row">
-            <label class="col-sm-3 col-form-label">Theme</label>
-            <div class="col-sm-9">
-              <ngx-theme-switcher id="theme-switcher"></ngx-theme-switcher>
+            <label class="col-sm-3 col-form-label">Grafana Dashboard URL</label>
+            <div class="col-sm-8">
+              <input type="url" class="form-control" id="inputGrafanaDashboardURL" [(ngModel)]="Config.grafanaDashboardUrl" name="grafanaDashboardUrl" (ngModelChange)="configFormChanged=true">
             </div>
           </div>
 
-          <!--
           <div class="form-group row">
             <div class="offset-sm-3 col-sm-9">
               <button type="submit" class="btn btn-primary" [disabled]="!configFormChanged">Apply</button>
             </div>
           </div>
-        -->
         </form>
       </nb-card-body>
     </nb-card>
   </div>
+
 </div>
diff --git a/webapp/src/app/pages/config/config-global/config-global.component.ts b/webapp/src/app/pages/config/config-global/config-global.component.ts
index 1087c3c..35d1e17 100644
--- a/webapp/src/app/pages/config/config-global/config-global.component.ts
+++ b/webapp/src/app/pages/config/config-global/config-global.component.ts
@@ -28,6 +28,7 @@ import { ConfigService, IConfig } from '../../../@core-xds/services/config.servi
 export class ConfigGlobalComponent implements OnInit {
 
   public configFormChanged = false;
+  public Config: IConfig = <IConfig>{};
 
   constructor(
     private configSvr: ConfigService,
@@ -35,9 +36,12 @@ export class ConfigGlobalComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.configSvr.Conf$.subscribe(cfg => this.Config = cfg);
   }
 
   onSubmit() {
+    this.configSvr.save(this.Config);
+    this.configFormChanged = false;
   }
 }
 
diff --git a/webapp/src/app/pages/supervision/supervision.component.ts b/webapp/src/app/pages/supervision/supervision.component.ts
index 219f28f..53fff22 100644
--- a/webapp/src/app/pages/supervision/supervision.component.ts
+++ b/webapp/src/app/pages/supervision/supervision.component.ts
@@ -22,6 +22,7 @@ import { Subject } from 'rxjs/Subject';
 import { NbThemeService } from '@nebular/theme';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
+import { ConfigService, IConfig } from '../../@core-xds/services/config.service';
 import { SupervisionService } from '../../@core-xds/services/supervision.service';
 import { AlertService } from '../../@core-xds/services/alert.service';
 
@@ -70,10 +71,15 @@ export class SupervisionComponent implements OnInit {
     private alert: AlertService,
     private themeService: NbThemeService,
     private sanitizer: DomSanitizer,
+    private configSvr: ConfigService,
   ) {
   }
 
+  Config: IConfig = <IConfig>{};
+
   ngOnInit() {
+    this.configSvr.Conf$.subscribe(cfg => this.Config = cfg);
+
     this._initDashboard();
     this._initPanels();
 
@@ -131,16 +137,24 @@ export class SupervisionComponent implements OnInit {
   }
 
   private _buildDashboardUrl(sname: string, from: number, to: number, theme: string) {
+    // FIXME get sname from config to support several dashboards
     let url = 'http://localhost:3000/d/Lbpwc6Iiz/' + sname;
+    if (this.Config.grafanaDashboardUrl !== '') {
+      url = this.Config.grafanaDashboardUrl;
+    }
     url += '?orgId=1';
     url += '&from=' + from;
     url += '&to=' + to;
     url += '&theme=' + theme;
+    url += '&sidemenu=close';
     return url;
   }
 
   private _buildPanelUrl(idx: string, from: number, to: number, theme: string) {
     let url = 'http://localhost:3000/d-solo/Lbpwc6Iiz/agl-xds-supervisor';
+    if (this.Config.grafanaDashboardUrl !== '') {
+      url = this.Config.grafanaDashboardUrl;
+    }
     url += '?panelId=' + idx;
     url += '&orgId=1';
     url += '&from=' + from;