NOISSUE - integrate Grafana UI

docker/configs/grafana-defaults.ini

@@ -45,10 +45,10 @@ domain = localhost
 enforce_domain = false
 
 # The full public facing url
-root_url = %(protocol)s://%(domain)s:%(http_port)s/
+root_url = %(protocol)s://%(domain)s:%(http_port)s/grafana
 
 # Serve Grafana from subpath specified in `root_url` setting. By default it is set to `false` for compatibility reasons.
-serve_from_sub_path = false
+serve_from_sub_path = true
 
 # Log web requests
 router_logging = false
@@ -202,7 +202,7 @@ cookie_secure = false
 cookie_samesite = lax
 
 # set to true if you want to allow browsers to render Grafana in a <frame>, <iframe>, <embed> or <object>. default is false.
-allow_embedding = false
+allow_embedding = true
 
 # Set to true if you want to enable http strict transport security (HSTS) response header.
 # This is only sent when HTTPS is enabled in this configuration.
@@ -458,11 +458,20 @@ tls_client_ca =
 #################################### Basic Auth ##########################
 [auth.basic]
 enabled = true
+#################################### JWT Auth ##########################
+[auth.jwt]
+# By default, auth.jwt is disabled.
+enabled = true
+
+# HTTP header to look into to get a JWT token.
+header_name = X-JWT-Assertion
+
+jwk_set_file = /usr/share/grafana/conf/jwks.json
 
 #################################### Auth Proxy ##########################
 [auth.proxy]
-enabled = false
-header_name = X-WEBAUTH-USER
+enabled = true
+header_name = X-Auth-Request-User
 header_property = username
 auto_sign_up = true
 # Deprecated, use sync_ttl instead
@@ -509,7 +518,7 @@ templates_pattern = emails/*.html
 mode = console file
 
 # Either "debug", "info", "warn", "error", "critical", default is "info"
-level = info
+level = debug
 
 # optional settings to set different levels for specific loggers. Ex filters = sqlstore:debug
 filters =

docker/docker-compose.yml

@@ -433,7 +433,7 @@ services:
       - ./config.toml:/config.toml
 
   grafana:
-    image: grafana/grafana:7.3.7
+    image: grafana/grafana:8.3.0
     container_name: mainflux-grafana
     depends_on:
       - influxdb
@@ -445,7 +445,7 @@ services:
     volumes:
       - mainflux-grafana-volume:/var/lib/grafana
       - ./configs/grafana-defaults.ini:/usr/share/grafana/conf/defaults.ini
-
+      - ./configs/jwks.json:/usr/share/grafana/conf/jwks.json
   influxdb-reader:
     image: mainflux/influxdb-reader:latest
     container_name: mainflux-influxdb-reader

docker/nginx/nginx-key.conf

@@ -42,7 +42,7 @@ http {
         include snippets/ssl.conf;
 
         add_header Strict-Transport-Security "max-age=63072000; includeSubdomains";
-        add_header X-Frame-Options DENY;
+        # add_header X-Frame-Options DENY;
         add_header X-Content-Type-Options nosniff;
         add_header Access-Control-Allow-Origin '*';
         add_header Access-Control-Allow-Methods '*';
@@ -141,6 +141,10 @@ http {
             proxy_pass http://certs:${MF_CERTS_HTTP_PORT};
         }
 
+        location ~ ^/(grafana) {
+            proxy_pass http://grafana:3000;
+        }
+
         location / {
             include snippets/proxy-headers.conf;
             proxy_pass http://ui:${MF_UI_PORT};

docker/nginx/nginx-x509.conf

@@ -148,6 +148,10 @@ http {
             include snippets/proxy-headers.conf;
             proxy_pass http://certs:${MF_CERTS_HTTP_PORT};
         }
+
+        location ~ ^/(grafana) {
+            proxy_pass http://grafana:3000;
+        }
 
         location / {
             include snippets/proxy-headers.conf;

proxy-config.json

@@ -27,6 +27,10 @@
     "target": "http://localhost:8182",
     "secure": false
   },
+  "/grafana/*": {
+    "target": "http://localhost:3001",
+    "secure": false
+  },
   "/connect": {
     "target": "http://localhost:8182",
     "secure": false

src/app/auth/auth.token.interceptor.service.ts

@@ -39,11 +39,13 @@ export class TokenInterceptor implements HttpInterceptor {
           !request.url.startsWith(environment.httpAdapterUrl) &&
           !request.url.startsWith(environment.readerUrl) &&
           !request.url.startsWith(environment.bootstrapUrl) &&
-          !request.url.startsWith(environment.browseUrl)
+          !request.url.startsWith(environment.browseUrl) &&
+          !request.url.startsWith('/grafana')
         ) {
           request = request.clone({
             setHeaders: {
               'Authorization': token.getValue(),
+              'X-WEBAUTH-USER': token.getName(),
             },
           });
         }

src/app/common/interfaces/mainflux.interface.ts

@@ -87,8 +87,7 @@ export interface PageFilters {
   offset?: number;
   limit?: number;
   name?: string;
-  type?: string;
-  metadata?: string;
+  metadata?: any;
 }
 
 export interface MsgFilters {

src/app/common/services/channels/channels.service.ts

@@ -72,15 +72,9 @@ export class ChannelsService {
       .set('offset', filters.offset.toString())
       .set('limit', filters.limit.toString())
       .set('order', 'name')
-      .set('dir', 'asc');
-
-    if (filters.type) {
-      if (filters.metadata) {
-        params = params.append('metadata', `{"${filters.type}": ${filters.metadata}}`);
-      } else {
-        params = params.append('metadata', `{"type":"${filters.type}"}`);
-      }
-    }
+      .set('dir', 'asc')
+      .set('metadata', filters.metadata);
+
 
     if (filters.name) {
       params = params.append('name', filters.name);

src/app/common/services/gateways/gateways.service.ts

@@ -28,7 +28,7 @@ export class GatewaysService {
   ) { }
 
   getGateways(filters: PageFilters) {
-    filters.type = typeGateway;
+    filters.metadata = {"type":typeGateway}
     return this.thingsService.getThings(filters);
   }
 

src/app/common/services/things/things.service.ts

@@ -5,6 +5,7 @@ import { throwError } from 'rxjs';
 import { environment } from 'environments/environment';
 import { Thing, PageFilters } from 'app/common/interfaces/mainflux.interface';
 import { NotificationsService } from 'app/common/services/notifications/notifications.service';
+import { filter } from 'rxjs-compat/operator/filter';
 
 const defLimit: number = 10;
 
@@ -78,13 +79,9 @@ export class ThingsService {
       .set('order', 'name')
       .set('dir', 'asc');
 
-    if (filters.type) {
-      if (filters.metadata) {
-        params = params.append('metadata', `{"${filters.type}": ${filters.metadata}}`);
-      } else {
-        params = params.append('metadata', `{"type":"${filters.type}"}`);
+      if (filters.metadata){
+        params = params.append('metadata', JSON.stringify(filters.metadata));
       }
-    }
 
     if (filters.name) {
       params = params.append('name', filters.name);

src/app/pages/grafana/grafana/grafana.details.component.html

@@ -0,0 +1,15 @@
+<div class="row">
+    <div class="col-8">
+        <div class="col-1 form-key">
+            Thing:
+        </div>
+        <div class="col-6">
+          <nb-select fullWidth [(selected)]="thing" size="tiny" (selectedChange)="getThings()">
+            <nb-option *ngFor="let th of this.page.rows" [value]="th">{{th.name}}</nb-option>
+          </nb-select>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <iframe [src]="iframeGrafana" frameborder = "0"></iframe>
+</div>

src/app/pages/grafana/grafana/grafana.details.component.scss

@@ -0,0 +1,4 @@
+iframe {
+    height: 720px;
+    width: 100%;
+  }

src/app/pages/grafana/grafana/grafana.details.component.ts

@@ -0,0 +1,102 @@
+import { Component, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
+import {  HttpClient, HttpHeaders } from '@angular/common/http';
+import { NotificationsService } from 'app/common/services/notifications/notifications.service';
+import { PageFilters, TablePage, Thing } from '../../../common/interfaces/mainflux.interface';
+import { ThingsService } from '../../../common/services/things/things.service';
+
+@Component({
+  selector: 'ngx-grafana-details',
+  templateUrl: './grafana.details.component.html',
+  styleUrls: ['./grafana.details.component.scss'],
+})
+export class GrafanaDetailsComponent implements OnInit {
+  iframeGrafana: any;
+  page: TablePage = {};
+  pageFilters: PageFilters = {};
+  thing: Thing;
+
+
+  constructor(
+    private domSanitizer: DomSanitizer,
+    private http: HttpClient,
+    private notificationsService: NotificationsService,
+    private thingsService: ThingsService,
+  ) { }
+
+
+  loginGrafana(){
+    const headers = new HttpHeaders({
+      'Content-type': 'application/json; charset=UTF-8',
+      'X-Auth-Request-User' : '[email protected]',
+    });
+    // const creds = {
+    //   user: "[email protected]",
+    //   email: "",
+    // };
+    return this.http.get('/grafana/profile' , { observe: 'response', headers: headers })
+    .map(
+      resp => {
+        console.log(resp)
+        return resp
+      },
+      err => {
+        this.notificationsService.error(
+          'Failed to login to grafana',
+          `Error: ${err.status} - ${err.statusText}`);
+      },
+    );
+  }
+
+
+  getThings(name?: string): void {
+    this.page = {};
+
+    this.pageFilters.name = name;
+
+    this.pageFilters.metadata = {
+                    "dashboard":"grafana"
+                  };
+
+    this.thingsService.getThings(this.pageFilters).subscribe(
+      (resp: any) => {
+        this.page = {
+          offset: resp.offset,
+          limit: resp.limit,
+          total: resp.total,
+          rows: resp.things,
+        };
+
+        // Check if there is a type defined in the metadata
+        this.page.rows.forEach( (thing: Thing) => {
+          thing.type = thing.metadata ? thing.metadata.type : '';
+        });
+      },
+    );
+
+    if (this.thing.metadata&& this.thing.metadata.dashboard == 'grafana'){
+      this.iframeGrafana = this.domSanitizer.bypassSecurityTrustResourceUrl(`${this.thing.metadata.dashboardURL}&kiosk&var-publisher=${this.thing.id}`);
+    }
+
+
+  }
+
+  ngOnInit() {
+    // const id = this.route.snapshot.paramMap.get('id');
+    //   const headers = new HttpHeaders({
+    //     'Content-type': 'application/json; charset=UTF-8',
+    //     ''
+    //   });
+    this.getThings()
+    this.thing = this.page.rows[0] as Thing
+    this.loginGrafana().subscribe(
+      (resp:any) =>{
+        console.log(resp)
+      }
+    );
+    if (this.thing.metadata&& this.thing.metadata.dashboard == 'grafana'){
+      this.iframeGrafana = this.domSanitizer.bypassSecurityTrustResourceUrl(`${this.thing.metadata.dashboardURL}&kiosk&var-publisher=${this.thing.id}`);
+    }
+  }
+}

src/app/pages/pages-menu.ts

@@ -15,6 +15,11 @@ export const MENU_ITEMS: NbMenuItem[] = environment.production ?
       icon: 'film-outline',
       link: appPrefix + '/pages/things',
     },
+    {
+      title: 'Grafana',
+      icon: 'film-outline',
+      link: appPrefix + '/pages/grafana',
+    },
     {
       title: 'Channels',
       icon: 'flip-2-outline',
@@ -43,6 +48,11 @@ export const MENU_ITEMS: NbMenuItem[] = environment.production ?
       icon: 'film-outline',
       link: appPrefix + '/pages/things',
     },
+    {
+      title: 'Grafana',
+      icon: 'film-outline',
+      link: appPrefix + '/pages/grafana',
+    },
     {
       title: 'Channels',
       icon: 'flip-2-outline',

src/app/pages/pages-routing.module.ts

@@ -19,6 +19,7 @@ import { ThingsDetailsComponent } from './things/details/things.details.componen
 // Mainflux - Channels
 import { ChannelsComponent } from './channels/channels.component';
 import { ChannelsDetailsComponent } from './channels/details/channels.details.component';
+import { GrafanaDetailsComponent } from './grafana/grafana/grafana.details.component';
 
 const children = environment.production ?
 [
@@ -47,6 +48,10 @@ const children = environment.production ?
       path: 'channels/details/:id',
       component: ChannelsDetailsComponent,
     },
+    {
+      path: 'grafana',
+      component: GrafanaDetailsComponent,
+    },
     {
       path: 'profile',
       component: ProfileComponent,
@@ -89,6 +94,10 @@ const children = environment.production ?
       path: 'channels',
       component: ChannelsComponent,
     },
+    {
+      path: 'grafana',
+      component: GrafanaDetailsComponent,
+    },
     {
       path: 'channels/details/:id',
       component: ChannelsDetailsComponent,

src/app/pages/pages.module.ts

@@ -41,6 +41,7 @@ import { ChannelsComponent } from 'app/pages/channels/channels.component';
 import { ChannelsAddComponent } from 'app/pages/channels/add/channels.add.component';
 import { ChannelsDetailsComponent } from 'app/pages/channels/details/channels.details.component';
 import { NgJsonEditorModule } from 'ang-jsoneditor';
+import { GrafanaDetailsComponent } from './grafana/grafana/grafana.details.component';
 
 @NgModule({
   imports: [
@@ -86,6 +87,7 @@ import { NgJsonEditorModule } from 'ang-jsoneditor';
     ThingsAddComponent,
     ThingsCertComponent,
     ThingsDetailsComponent,
+    GrafanaDetailsComponent,
     // Channels
     ChannelsComponent,
     ChannelsAddComponent,