From ee66af78c42c4d7ff33f104415bc09d60dbdc27b Mon Sep 17 00:00:00 2001 From: Sebastien Douheret Date: Mon, 18 Jun 2018 00:42:22 +0200 Subject: Added Supervision/Monitoring support Added new API supervisor/* to control and get status of AGL XDS Supervisor. Also add new panel in dashboard to control and visualized data collected by the supervision (visualiazation is based on Granafa). Change-Id: I093470f6e384e96a0856b233390e85a98911162e Signed-off-by: Sebastien Douheret --- webapp/package.json | 2 +- .../services/@core-xds-services.module.ts | 2 + .../app/@core-xds/services/supervision.service.ts | 61 +++++ .../src/app/@core-xds/services/xdsagent.service.ts | 15 + .../confirm-modal/confirm-modal.component.ts | 2 - webapp/src/app/pages/pages-menu.ts | 31 ++- webapp/src/app/pages/pages-routing.module.ts | 8 + webapp/src/app/pages/pages.module.ts | 2 + .../sdks/sdk-management/sdk-install.component.ts | 2 - .../supervision/supervision-config.component.html | 45 +++ .../supervision/supervision-config.component.scss | 139 ++++++++++ .../supervision/supervision-config.component.ts | 305 +++++++++++++++++++++ .../pages/supervision/supervision.component.html | 69 +++++ .../pages/supervision/supervision.component.scss | 83 ++++++ .../app/pages/supervision/supervision.component.ts | 152 ++++++++++ .../app/pages/supervision/supervision.module.ts | 37 +++ .../target-add-modal/target-add-modal.component.ts | 1 - 17 files changed, 942 insertions(+), 14 deletions(-) create mode 100644 webapp/src/app/@core-xds/services/supervision.service.ts create mode 100644 webapp/src/app/pages/supervision/supervision-config.component.html create mode 100644 webapp/src/app/pages/supervision/supervision-config.component.scss create mode 100644 webapp/src/app/pages/supervision/supervision-config.component.ts create mode 100644 webapp/src/app/pages/supervision/supervision.component.html create mode 100644 webapp/src/app/pages/supervision/supervision.component.scss create mode 100644 webapp/src/app/pages/supervision/supervision.component.ts create mode 100644 webapp/src/app/pages/supervision/supervision.module.ts (limited to 'webapp') diff --git a/webapp/package.json b/webapp/package.json index d79aa91..2df4888 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -52,7 +52,7 @@ "bootstrap": "4.0.0-beta.2", "classlist.js": "1.1.20150312", "core-js": "2.4.1", - "d3": "4.8.0", + "d3": "3.5.17", "font-awesome": "4.7.0", "font-awesome-animation": "0.0.10", "intl": "1.2.5", diff --git a/webapp/src/app/@core-xds/services/@core-xds-services.module.ts b/webapp/src/app/@core-xds/services/@core-xds-services.module.ts index a3a67c5..6a4eb3c 100644 --- a/webapp/src/app/@core-xds/services/@core-xds-services.module.ts +++ b/webapp/src/app/@core-xds/services/@core-xds-services.module.ts @@ -23,6 +23,7 @@ import { AlertService } from './alert.service'; import { ConfigService } from './config.service'; import { ProjectService } from './project.service'; import { SdkService } from './sdk.service'; +import { SupervisionService } from './supervision.service'; import { TargetService } from './target.service'; import { UserService } from './users.service'; import { XDSConfigService } from './xds-config.service'; @@ -33,6 +34,7 @@ const SERVICES = [ ConfigService, ProjectService, SdkService, + SupervisionService, TargetService, UserService, XDSConfigService, diff --git a/webapp/src/app/@core-xds/services/supervision.service.ts b/webapp/src/app/@core-xds/services/supervision.service.ts new file mode 100644 index 0000000..4a9f578 --- /dev/null +++ b/webapp/src/app/@core-xds/services/supervision.service.ts @@ -0,0 +1,61 @@ +/** +* @license +* Copyright (C) 2018 "IoT.bzh" +* Author Sebastien Douheret +* +* 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, SecurityContext, isDevMode } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; + +import { XDSAgentService } from '../services/xdsagent.service'; + +export interface AglTopology { + name: string; + pid: number; + isClient: boolean; + isServer: boolean; + ws_clients: string[]; + ws_servers: string[]; + apis: any; +} + +@Injectable() +export class SupervisionService { + + private curServerID; + + constructor(private xdsSvr: XDSAgentService) { + /* + this.xdsSvr.XdsConfig$.subscribe(cfg => { + if (!cfg || cfg.servers.length < 1) { + return; + } + }); + */ + } + + getTopo(): Observable { + return this.xdsSvr.getTopoSupervisor(); + } + + startTrace(cfg: any): Observable { + return this.xdsSvr.startTraceSupervisor(cfg); + } + + stopTrace(cfg: any): Observable { + return this.xdsSvr.stopTraceSupervisor(cfg); + } + +} diff --git a/webapp/src/app/@core-xds/services/xdsagent.service.ts b/webapp/src/app/@core-xds/services/xdsagent.service.ts index adbee98..002c84b 100644 --- a/webapp/src/app/@core-xds/services/xdsagent.service.ts +++ b/webapp/src/app/@core-xds/services/xdsagent.service.ts @@ -665,6 +665,21 @@ export class XDSAgentService { { cols: cols, rows: rows }); } + /*** + ** Supervision + ***/ + getTopoSupervisor(): Observable { + return this._get('/supervisor/topo'); + } + + startTraceSupervisor(cfg: any): Observable { + return this._post('/supervisor/trace/start', cfg); + } + + stopTraceSupervisor(cfg: any): Observable { + return this._post('/supervisor/trace/stop', cfg); + } + /** ** Private functions ***/ diff --git a/webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts b/webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts index 67a7d87..d3fec86 100644 --- a/webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts +++ b/webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts @@ -17,7 +17,6 @@ */ import { Component, OnInit, Input } from '@angular/core'; -import { DomSanitizer } from '@angular/platform-browser'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; export enum EType { @@ -69,7 +68,6 @@ export class ConfirmModalComponent implements OnInit { constructor( private modalRef: NgbActiveModal, - private sanitizer: DomSanitizer, ) { } ngOnInit() { diff --git a/webapp/src/app/pages/pages-menu.ts b/webapp/src/app/pages/pages-menu.ts index 86884bc..230966d 100644 --- a/webapp/src/app/pages/pages-menu.ts +++ b/webapp/src/app/pages/pages-menu.ts @@ -47,11 +47,6 @@ export const MENU_ITEMS: NbMenuItem[] = [ title: 'DEVELOPMENT', group: true, }, - { - title: 'Projects', - icon: 'nb-keypad', - link: '/pages/projects', - }, { title: 'SDKs', icon: 'fa fa-file-archive-o', @@ -65,6 +60,16 @@ export const MENU_ITEMS: NbMenuItem[] = [ ], */ }, + { + title: 'Projects', + icon: 'nb-keypad', + link: '/pages/projects', + }, + { + title: 'Build', + icon: 'fa fa-cogs', + link: '/pages/build', + }, { title: 'Targets', icon: 'fa fa-microchip', @@ -81,9 +86,19 @@ export const MENU_ITEMS: NbMenuItem[] = [ ], }, { - title: 'Build', - icon: 'fa fa-cogs', - link: '/pages/build', + title: 'Supervision / Monitoring', + icon: 'fa fa-bar-chart', + link: '/pages/supervision', + children: [ + { + title: 'Config', + link: '/pages/supervision/config', + }, + { + title: 'Graph', + link: '/pages/supervision/graph', + }, + ], }, { title: 'MISC', diff --git a/webapp/src/app/pages/pages-routing.module.ts b/webapp/src/app/pages/pages-routing.module.ts index 655dea2..ae2ef4a 100644 --- a/webapp/src/app/pages/pages-routing.module.ts +++ b/webapp/src/app/pages/pages-routing.module.ts @@ -27,6 +27,8 @@ import { SdkManagementComponent } from './sdks/sdk-management/sdk-management.com import { TargetsComponent } from './targets/targets.component'; import { TerminalsComponent } from './targets/terminals/terminals.component'; import { BuildComponent } from './build/build.component'; +import { SupervisionComponent } from './supervision/supervision.component'; +import { SupervisionConfigComponent } from './supervision/supervision-config.component'; const routes: Routes = [{ path: '', @@ -52,6 +54,12 @@ const routes: Routes = [{ }, { path: 'targets/term', component: TerminalsComponent, + }, { + path: 'supervision/config', + component: SupervisionConfigComponent, + }, { + path: 'supervision/graph', + component: SupervisionComponent, }, { path: 'config', loadChildren: './config/config.module#ConfigModule', diff --git a/webapp/src/app/pages/pages.module.ts b/webapp/src/app/pages/pages.module.ts index 55fe61a..5ffa8d6 100644 --- a/webapp/src/app/pages/pages.module.ts +++ b/webapp/src/app/pages/pages.module.ts @@ -26,6 +26,7 @@ import { DashboardModule } from './dashboard/dashboard.module'; import { BuildModule } from './build/build.module'; import { ProjectsModule } from './projects/projects.module'; import { SdksModule } from './sdks/sdks.module'; +import { SupervisionModule } from './supervision/supervision.module'; import { TargetsModule } from './targets/targets.module'; import { PagesRoutingModule } from './pages-routing.module'; import { NotificationsComponent } from './notifications/notifications.component'; @@ -48,6 +49,7 @@ const PAGES_COMPONENTS = [ SdksModule, ToasterModule, TargetsModule, + SupervisionModule, ], declarations: [ ...PAGES_COMPONENTS, diff --git a/webapp/src/app/pages/sdks/sdk-management/sdk-install.component.ts b/webapp/src/app/pages/sdks/sdk-management/sdk-install.component.ts index 1957c8b..c21cb66 100644 --- a/webapp/src/app/pages/sdks/sdk-management/sdk-install.component.ts +++ b/webapp/src/app/pages/sdks/sdk-management/sdk-install.component.ts @@ -17,7 +17,6 @@ */ import { Component, OnInit, Input, ViewChild, AfterViewChecked, ElementRef } from '@angular/core'; -import { DomSanitizer } from '@angular/platform-browser'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { AlertService } from '../../../@core-xds/services/alert.service'; @@ -73,7 +72,6 @@ export class SdkInstallComponent implements OnInit { constructor( private modalRef: NgbActiveModal, - private sanitizer: DomSanitizer, private alert: AlertService, private sdkSvr: SdkService, ) { } diff --git a/webapp/src/app/pages/supervision/supervision-config.component.html b/webapp/src/app/pages/supervision/supervision-config.component.html new file mode 100644 index 0000000..1fbcd70 --- /dev/null +++ b/webapp/src/app/pages/supervision/supervision-config.component.html @@ -0,0 +1,45 @@ +
+

Configuration

+ +
+
+ +
+ + + + + +
+ +
+
+
+
+
+ + +
+
+
+ +
+ {{wsCkx.name}} + +
+
+ +
+ + +
+
+
diff --git a/webapp/src/app/pages/supervision/supervision-config.component.scss b/webapp/src/app/pages/supervision/supervision-config.component.scss new file mode 100644 index 0000000..ea263cc --- /dev/null +++ b/webapp/src/app/pages/supervision/supervision-config.component.scss @@ -0,0 +1,139 @@ +/* FIXME: not working due to workaround (ViewEncapsulation.None) for svg +@import '../../@theme/styles/themes'; +@import '~@nebular/theme/components/card/card.component.theme'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/bootstrap/breakpoints'; +@include nb-install-component() { + nb-card-body { + display: flex; + align-items: center; + } + .action-groups-header { + flex-basis: 20%; + color: nb-theme(card-header-fg-heading); + font-family: nb-theme(card-header-font-family); + font-size: nb-theme(card-header-font-size); + font-weight: nb-theme(card-header-font-weight); + } + .nb-actions { + flex-basis: 80%; + } + .right { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + order: 1; + flex-direction: row-reverse; + } + nb-actions > nb-action { + padding: 0; + } + nb-action { + i { + color: nb-theme(color-fg); + font-size: 1.5rem; + margin-right: 1rem; + } + span { + font-family: nb-theme(font-secondary); + font-weight: nb-theme(font-weight-bold); + color: nb-theme(color-fg-heading); + text-transform: uppercase; + } + button { + margin: 0 auto; + padding: 0; + cursor: pointer; + border: none; + background: none; + display: flex; + align-items: center; + &:focus { + box-shadow: none; + outline: none; + } + } + } + @include media-breakpoint-down(md) { + nb-actions nb-action { + padding: 0 0.75rem; + } + } + @include media-breakpoint-down(sm) { + nb-card-body { + padding: 1rem; + } + nb-action { + font-size: 0.75rem; + i { + font-size: 2rem; + margin-right: 0.5rem; + } + } + } + @include media-breakpoint-down(is) { + nb-action i { + font-size: 1.75rem; + margin: 0; + } + span { + display: none; + } + } +} +*/ + +button#refresh-topo { + color: #a4abb3; + font-size: 1.5rem; + margin-right: 1rem; + margin: 0 auto; + padding: 0; + cursor: pointer; + border: none; + background: none; + display: flex; + align-items: center; + &:focus { + box-shadow: none; + outline: none; + } +} + +button#start-trace { + margin-top: 10px; + margin-left: 10px; +} + +button#stop-trace { + margin-top: 10px; + margin-left: 10px; +} + +svg#graph { + .link { + fill: none; + stroke: #666; + stroke-width: 1.5px; + } + #ws-client { + fill: green; + } + .link.ws-client { + stroke: green; + } + .link.not-connected { + stroke-dasharray: 0, 2 1; + } + circle { + fill: #ccc; + stroke: #333; + stroke-width: 1.5px; + } + text { + font: 1rem sans-serif; + pointer-events: none; + text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; + } +} diff --git a/webapp/src/app/pages/supervision/supervision-config.component.ts b/webapp/src/app/pages/supervision/supervision-config.component.ts new file mode 100644 index 0000000..e96b936 --- /dev/null +++ b/webapp/src/app/pages/supervision/supervision-config.component.ts @@ -0,0 +1,305 @@ +/** +* @license +* Copyright (C) 2017-2018 "IoT.bzh" +* Author Sebastien Douheret +* +* 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, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core'; +import { Injectable, Inject } from '@angular/core'; +import { DOCUMENT } from '@angular/common'; +import * as d3 from 'd3'; + +import { SupervisionService, AglTopology } from '../../@core-xds/services/supervision.service'; +import { AlertService } from '../../@core-xds/services/alert.service'; + +interface WsCheckbox { + name: string; + pid: number; + value: boolean; + disabled: boolean; + tooltip: string; +} + +@Component({ + selector: 'xds-supervision', + styleUrls: ['./supervision-config.component.scss'], + templateUrl: './supervision-config.component.html', + encapsulation: ViewEncapsulation.None, // workaround about https://github.com/angular/angular/issues/7845 +}) +export class SupervisionConfigComponent implements OnInit, AfterViewInit { + + daemonCheckboxes: WsCheckbox[] = []; + starting = false; + stopping = false; + + private graph: any; + private svg: any; + private links = []; + + constructor(@Inject(DOCUMENT) private document: Document, + private supervisorSvr: SupervisionService, + private alert: AlertService, + ) { + + } + + ngOnInit() { + + } + + ngAfterViewInit() { + this.getAGLTopo(); + } + + getAGLTopo() { + this.supervisorSvr.getTopo().subscribe(topo => { + this.graphAGLBindings(topo); + this.updateCheckboxes(topo); + }); + } + + onStartTrace() { + this.starting = true; + + const dmArr = []; + this.daemonCheckboxes.forEach(dm => dm.value && dmArr.push(dm.pid)); + + this.supervisorSvr.startTrace({ pids: dmArr }).subscribe(res => { + this.starting = false; + this.alert.info('Monitoring successfully started'); + }, err => { + this.starting = false; + this.alert.error(err); + }); + } + + onStopTrace() { + this.stopping = true; + this.supervisorSvr.stopTrace({}).subscribe(res => { + this.stopping = false; + this.alert.info('Monitoring successfully stopped'); + }, err => { + this.stopping = false; + this.alert.error(err); + }); + } + + isStartBtnDisable(): boolean { + return this.starting; + } + + isStopBtnDisable(): boolean { + return this.stopping; + } + + private updateCheckboxes(topo: AglTopology[]) { + this.daemonCheckboxes = []; + topo.forEach(elem => { + this.daemonCheckboxes.push({ + name: elem.name, + pid: elem.pid, + value: false, + disabled: false, + tooltip: 'Daemon ' + elem.name + ' (pid ' + elem.pid + ')', + }); + }); + + } + + + // Compute the distinct nodes from the links. + // Based on http://bl.ocks.org/mbostock/1153292 + private graphAGLBindings(topo: AglTopology[]) { + + const ws_link: { [id: string]: string[] } = {}; + let ii = 1; + topo.forEach(elem => { + if (elem.name === 'null') { + elem.name = 'Daemon-' + String(ii++); + } + if (elem.ws_clients && elem.ws_clients instanceof Array) { + elem.ws_clients.forEach((ws: string) => { + if (ws_link[ws]) { + ws_link[ws].push(elem.name); + } else { + ws_link[ws] = [elem.name]; + } + }); + } + if (elem.ws_servers && elem.ws_servers instanceof Array) { + elem.ws_servers.forEach((ws: string) => { + if (ws_link[ws]) { + ws_link[ws].push(elem.name); + } else { + ws_link[ws] = [elem.name]; + } + }); + } + }); + + const nodes = {}; + this.links = []; + ii = 1; + topo.forEach(elem => { + let almostOne = false; + if (elem.ws_clients && elem.ws_clients.length) { + elem.ws_clients.forEach(wsCli => { + ws_link[wsCli].forEach(appName => { + if (appName !== elem.name) { + almostOne = true; + this.links.push({ source: elem.name, target: appName, type: 'ws-client' }); + } + }); + }); + } + if (elem.ws_servers && elem.ws_servers.length) { + elem.ws_servers.forEach(wsSvr => { + ws_link[wsSvr].forEach(appName => { + if (appName !== elem.name) { + almostOne = true; + this.links.push({ source: elem.name, target: appName, type: 'ws-server' }); + } + }); + }); + } + if (!almostOne) { + const name = '???-' + String(ii++); + this.links.push({ + source: elem.isServer ? name : elem.name, + target: elem.isServer ? elem.name : name, + type: 'not-connected', + }); + } + }); + + this.links.forEach(function (link) { + link.source = nodes[link.source] || (nodes[link.source] = { + name: link.source, + }); + link.target = nodes[link.target] || (nodes[link.target] = { + name: link.target, + }); + }); + + const width = this.document.getElementById('graph').clientWidth, + height = this.document.getElementById('graph').clientHeight; + + // Delete previous graph + if (this.svg) { + this.svg.remove(); + } + + // Create new graph + const force = d3.layout.force() + .nodes(d3.values(nodes)) + .links(this.links) + .size([width, height]) + .linkDistance(120) + .charge(-600) + .on('tick', tick) + .start(); + // const force = d3.forceSimulation() + + this.graph = d3.select('#graph'); + this.svg = this.graph.append('svg') + .attr('width', width) + .attr('height', height); + + // Define the div for the tooltip + /* + const divTooltip = d3.select('#graph').append('div') + .attr('class', 'tooltip') + .style('opacity', 0); + */ + + // Per-type markers, as they don't inherit styles. + this.svg.append('defs').selectAll('marker') + .data(['ws-server', 'ws-client', 'not-connected']) + .enter().append('marker') + .attr('id', function (d) { + return d; + }) + .attr('viewBox', '0 -5 10 10') + .attr('refX', 15) + .attr('refY', -1.5) + .attr('markerWidth', 12) + .attr('markerHeight', 12) + .attr('orient', 'auto') + .append('path') + .attr('d', 'M0,-5L10,0L0,5'); + + const path = this.svg.append('g').selectAll('path') + .data(force.links()) + .enter().append('path') + .attr('class', function (d) { + return 'link ' + d.type; + }) + .attr('marker-end', function (d) { + return 'url(#' + d.type + ')'; + }); + + const circle = this.svg.append('g').selectAll('circle') + .data(force.nodes()) + .enter().append('circle') + .attr('r', 12) + .call(force.drag); + + const text = this.svg.append('g').selectAll('text') + .data(force.nodes()) + .enter().append('text') + .attr('x', 20) + .attr('y', '.31em') + .text(function (d) { + return d.name; + }); + + /* TODO - SEB + circle.on('mouseover', d => { + divTooltip.transition() + .duration(200) + .style('opacity', .9); + divTooltip.html('This is a Tooltip
' + d.close) + .style('left', (d3.event.pageX) + 'px') + .style('top', (d3.event.pageY - 28) + 'px'); + }); + + // Tooltip Object + const tooltip = d3.select('body') + .append('div').attr('id', 'tooltip') + .style('position', 'absolute') + .style('z-index', '10') + .style('visibility', 'hidden') + .text('a simple tooltip'); + */ + + // Use elliptical arc path segments to doubly-encode directionally. + function tick() { + path.attr('d', linkArc); + circle.attr('transform', transform); + text.attr('transform', transform); + } + + function linkArc(d) { + const dx = d.target.x - d.source.x, + dy = d.target.y - d.source.y, + dr = Math.sqrt(dx * dx + dy * dy); + return 'M' + d.source.x + ',' + d.source.y + 'A' + dr + ',' + dr + ' 0 0,1 ' + d.target.x + ',' + d.target.y; + } + + function transform(d) { + return 'translate(' + d.x + ',' + d.y + ')'; + } + } +} diff --git a/webapp/src/app/pages/supervision/supervision.component.html b/webapp/src/app/pages/supervision/supervision.component.html new file mode 100644 index 0000000..0db8ec8 --- /dev/null +++ b/webapp/src/app/pages/supervision/supervision.component.html @@ -0,0 +1,69 @@ + + + +
+
+ +
+
diff --git a/webapp/src/app/pages/supervision/supervision.component.scss b/webapp/src/app/pages/supervision/supervision.component.scss new file mode 100644 index 0000000..a125e8d --- /dev/null +++ b/webapp/src/app/pages/supervision/supervision.component.scss @@ -0,0 +1,83 @@ +@import '../../@theme/styles/themes'; +@import '~@nebular/theme/components/card/card.component.theme'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/bootstrap/breakpoints'; +@include nb-install-component() { + nb-card-body { + display: flex; + align-items: center; + } + .action-groups-header { + flex-basis: 20%; + color: nb-theme(card-header-fg-heading); + font-family: nb-theme(card-header-font-family); + font-size: nb-theme(card-header-font-size); + font-weight: nb-theme(card-header-font-weight); + } + .nb-actions { + flex-basis: 80%; + } + .right { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + order: 1; + flex-direction: row-reverse; + } + nb-actions > nb-action { + padding: 0; + } + nb-action { + i { + color: nb-theme(color-fg); + font-size: 1.5rem; + margin-right: 1rem; + } + span { + font-family: nb-theme(font-secondary); + font-weight: nb-theme(font-weight-bold); + color: nb-theme(color-fg-heading); + text-transform: uppercase; + } + button { + margin: 0 auto; + padding: 0; + cursor: pointer; + border: none; + background: none; + display: flex; + align-items: center; + &:focus { + box-shadow: none; + outline: none; + } + } + } + @include media-breakpoint-down(md) { + nb-actions nb-action { + padding: 0 0.75rem; + } + } + @include media-breakpoint-down(sm) { + nb-card-body { + padding: 1rem; + } + nb-action { + font-size: 0.75rem; + i { + font-size: 2rem; + margin-right: 0.5rem; + } + } + } + @include media-breakpoint-down(is) { + nb-action i { + font-size: 1.75rem; + margin: 0; + } + span { + display: none; + } + } +} diff --git a/webapp/src/app/pages/supervision/supervision.component.ts b/webapp/src/app/pages/supervision/supervision.component.ts new file mode 100644 index 0000000..219f28f --- /dev/null +++ b/webapp/src/app/pages/supervision/supervision.component.ts @@ -0,0 +1,152 @@ +/** +* @license +* Copyright (C) 2017-2018 "IoT.bzh" +* Author Sebastien Douheret +* +* 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, OnInit, Input } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import { Subject } from 'rxjs/Subject'; +import { NbThemeService } from '@nebular/theme'; +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; + +import { SupervisionService } from '../../@core-xds/services/supervision.service'; +import { AlertService } from '../../@core-xds/services/alert.service'; + +export interface GrafanaDashboard { + name: string; + shortname: string; + url?: string; + safeUrl?: SafeResourceUrl; +} + +export interface GrafanaPanel { + name: string; + index: string; + url?: string; + safeUrl?: SafeResourceUrl; +} + +@Component({ + selector: 'xds-supervision', + styleUrls: ['./supervision.component.scss'], + templateUrl: './supervision.component.html', +}) + +export class SupervisionComponent implements OnInit { + + @Input() theme = 'light'; + @Input() tm_from = 1528988550450; + @Input() tm_to = 1528988842496; + @Input() scroll_factor = 10000; + @Input() zoom_factor = 100000; + + displayMode = 'dashboard'; + + private dashboards: Map = new Map([ + ['xds_supervisor', { name: 'AGL XDS Supervisor', shortname: 'agl-xds-supervisor' }], + ]); + + private panels: Map = new Map([ + ['table', { name: 'Supervisor traces table', index: '2' }], + ['evt_data_bytes', { name: 'Requests & Events per second', index: '5' }], + ['req_evts_per_sec', { name: 'Events Data bytes', index: '12' }], + ]); + + constructor( + private supervisionSvr: SupervisionService, + private alert: AlertService, + private themeService: NbThemeService, + private sanitizer: DomSanitizer, + ) { + } + + ngOnInit() { + this._initDashboard(); + this._initPanels(); + + this.themeService.onThemeChange().subscribe(tm => { + this.theme = (tm.name === 'cosmic') ? 'dark' : 'light'; + this.themeUpdate(); + }); + } + + getDashboard(name: string): SafeResourceUrl { + return this.dashboards.get(name).safeUrl; + } + + getPanel(name: string): SafeResourceUrl { + return this.panels.get(name).safeUrl; + } + + displayModeChange() { + if (this.displayMode === 'dashboard') { + this.displayMode = 'panels'; + } else { + this.displayMode = 'dashboard'; + } + } + + themeUpdate() { + this._initDashboard(); + this._initPanels(); + } + + timeChange(val: number) { + this.tm_from += val * this.scroll_factor; + this.tm_to += val * this.scroll_factor; + this._initPanels(); + } + + zoomOut() { + this.tm_from -= this.zoom_factor; + this.tm_to += this.zoom_factor; + this._initPanels(); + } + + + private _initDashboard() { + this.dashboards.forEach(dd => { + dd.url = this._buildDashboardUrl(dd.shortname, this.tm_from, this.tm_to, this.theme); + dd.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(dd.url); + }); + } + private _initPanels() { + this.panels.forEach(gg => { + gg.url = this._buildPanelUrl(gg.index, this.tm_from, this.tm_to, this.theme); + gg.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(gg.url); + }); + } + + private _buildDashboardUrl(sname: string, from: number, to: number, theme: string) { + let url = 'http://localhost:3000/d/Lbpwc6Iiz/' + sname; + url += '?orgId=1'; + url += '&from=' + from; + url += '&to=' + to; + url += '&theme=' + theme; + return url; + } + + private _buildPanelUrl(idx: string, from: number, to: number, theme: string) { + let url = 'http://localhost:3000/d-solo/Lbpwc6Iiz/agl-xds-supervisor'; + url += '?panelId=' + idx; + url += '&orgId=1'; + url += '&from=' + from; + url += '&to=' + to; + url += '&theme=' + theme; + url += '&sidemenu=close'; + return url; + } +} diff --git a/webapp/src/app/pages/supervision/supervision.module.ts b/webapp/src/app/pages/supervision/supervision.module.ts new file mode 100644 index 0000000..4c1cb0b --- /dev/null +++ b/webapp/src/app/pages/supervision/supervision.module.ts @@ -0,0 +1,37 @@ +/** +* @license +* Copyright (C) 2017-2018 "IoT.bzh" +* Author Sebastien Douheret +* +* 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 { ThemeModule } from '../../@theme/theme.module'; + +import { SupervisionComponent } from './supervision.component'; +import { SupervisionConfigComponent } from './supervision-config.component'; + + +@NgModule({ + imports: [ + ThemeModule, + ], + declarations: [ + SupervisionComponent, + SupervisionConfigComponent, + ], + entryComponents: [ + ], +}) +export class SupervisionModule { } diff --git a/webapp/src/app/pages/targets/target-add-modal/target-add-modal.component.ts b/webapp/src/app/pages/targets/target-add-modal/target-add-modal.component.ts index fdcb048..6260b87 100644 --- a/webapp/src/app/pages/targets/target-add-modal/target-add-modal.component.ts +++ b/webapp/src/app/pages/targets/target-add-modal/target-add-modal.component.ts @@ -88,7 +88,6 @@ export class TargetAddModalComponent implements OnInit { if (this._isIPstart(n)) { return 'Target_' + n; } -// SEB PB return n; }) .subscribe(value => { -- cgit 1.2.3-korg