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 --- .vscode/settings.json | 106 +++---- lib/agent/agent.go | 11 +- lib/agent/apiv1-supervisor.go | 114 ++++++++ lib/agent/apiv1.go | 3 + lib/agent/xdsserver.go | 2 +- lib/agent/xdssupervior.go | 230 ++++++++++++++++ lib/xdsconfig/config.go | 6 + lib/xdsconfig/configfile.go | 10 + 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 - 25 files changed, 1370 insertions(+), 68 deletions(-) create mode 100644 lib/agent/apiv1-supervisor.go create mode 100644 lib/agent/xdssupervior.go 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 diff --git a/.vscode/settings.json b/.vscode/settings.json index 47bcd75..c1d3b4d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,8 @@ // Place your settings in this file to overwrite default and user settings. { + // Specify GOPATH here to override the one that is set as environment variable. The inferred GOPATH from workspace root overrides this, if go.inferGopath is set to true. + "go.gopath": "${workspaceRoot}/../../../../../..", + // Controls the rendering size of tabs in characters. // If set to auto, the value will be guessed based on the opened file. "editor.tabSize": 2, @@ -31,67 +34,74 @@ ], // Words to add to dictionary for a workspace. "cSpell.words": [ - "apiv", - "gonic", - "devel", - "csrffound", - "Syncthing", - "STID", + "CIFS", + "Checkboxes", + "EVTSDK", + "EXEPATH", + "Flds", + "Grafana", + "IPROJECT", "ISTCONFIG", - "socketio", - "ldflags", - "SThg", - "stconfig", - "Intf", - "dismissible", - "rpath", - "WSID", - "sess", "IXDS", - "golib", - "xdsapi", - "xdsconfig", - "xdsserver", - "xdsagent", - "nbsp", "Inot", - "inotify", - "cmdi", - "sdkid", - "Flds", - "prjs", - "iosk", - "CIFS", - "IPROJECT", - "unregister", - "conv", + "Intf", "PATHMAP", - "nospace", - "graphx", + "STID", + "SThg", + "Sillyf", + "Syncthing", "Truthy", + "WSID", + "XDSSUPERV", + "abortinstall", + "apiv", + "cmdi", + "conv", + "csrffound", "darkviolet", + "devel", + "dismissible", "dwnl", - "topnav", - "leftbar", - "urfave", - "unmarshall", - "sebd", - "priv", "evts", + "franciscocpg", "gdbserver", - "tabset", + "gerrit", + "golib", + "gonic", + "graphx", + "inotify", + "iosk", + "ldflags", + "leftbar", + "nbsp", + "nospace", "pageview", - "subpath", "prebuild", + "priv", + "prjs", "reflectme", - "franciscocpg", - "xsapiv", - "xaapiv", - "Sillyf", + "rpath", + "sdkid", + "sebd", + "sess", + "socketio", + "stconfig", + "subpath", "tabindex", - "EVTSDK", - "gerrit", - "tgts" + "tabset", + "tgts", + "topnav", + "topo", + "unmarshall", + "unregister", + "urfave", + "xaapiv", + "xdsagent", + "xdsapi", + "xdsconfig", + "xdspvr", + "xdsserver", + "xsapiv" ], // codelyzer "tslint.rulesDirectory": "./webapp/node_modules/codelyzer", diff --git a/lib/agent/agent.go b/lib/agent/agent.go index 3aa89a8..58f336c 100644 --- a/lib/agent/agent.go +++ b/lib/agent/agent.go @@ -47,11 +47,12 @@ type Context struct { SThgCmd *exec.Cmd SThgInotCmd *exec.Cmd - webServer *WebServer - xdsServers map[string]*XdsServer - sessions *Sessions - events *Events - projects *Projects + webServer *WebServer + xdsServers map[string]*XdsServer + XdsSupervisor *XdsSupervisor + sessions *Sessions + events *Events + projects *Projects Exit chan os.Signal } diff --git a/lib/agent/apiv1-supervisor.go b/lib/agent/apiv1-supervisor.go new file mode 100644 index 0000000..a34a913 --- /dev/null +++ b/lib/agent/apiv1-supervisor.go @@ -0,0 +1,114 @@ +/* + * 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. + */ + +package agent + +import ( + "net/http" + + common "gerrit.automotivelinux.org/gerrit/src/xds/xds-common.git/golib" + "github.com/gin-gonic/gin" +) + +// getSupervisorTopo : return current AGL daemons topology using supervisor +func (s *APIService) getSupervisorTopo(c *gin.Context) { + + xdspvr, err := s._initXdsSupervisor() + if err != nil { + common.APIError(c, err.Error()) + return + } + + var res XdsSuperVReply + if err = xdspvr.GetTopo(&res); err != nil { + common.APIError(c, err.Error()) + return + } + + if res.Request.Status != "success" { + common.APIError(c, res.Request.Info) + return + } + + c.JSON(http.StatusOK, res.Response) +} + +// startSupervisor : resquest to supervisor to start tracing +func (s *APIService) startSupervisor(c *gin.Context) { + + xdspvr, err := s._initXdsSupervisor() + if err != nil { + common.APIError(c, err.Error()) + return + } + + var cfg XdsSuperVTraceConfig + if c.BindJSON(&cfg) != nil { + common.APIError(c, "Invalid config argument") + return + } + s.Log.Debugf("Start Supervisor cfgArg %v\n", cfg) + + var res XdsSuperVReply + if err = xdspvr.StartTrace(cfg, &res); err != nil { + common.APIError(c, err.Error()) + return + } + + if res.Request.Status != "success" { + common.APIError(c, res.Request.Info) + return + } + + c.JSON(http.StatusOK, res.Response) +} + +// stopSupervisor : resquest to supervisor to stop tracing +func (s *APIService) stopSupervisor(c *gin.Context) { + + xdspvr, err := s._initXdsSupervisor() + if err != nil { + common.APIError(c, err.Error()) + return + } + + var res XdsSuperVReply + if err = xdspvr.StopTrace(&res); err != nil { + common.APIError(c, err.Error()) + return + } + + if res.Request.Status != "success" { + common.APIError(c, res.Request.Info) + return + } + + c.JSON(http.StatusOK, res.Response) +} + +// _initXdsSupervisor . +func (s *APIService) _initXdsSupervisor() (*XdsSupervisor, error) { + + if s.XdsSupervisor == nil { + xs := NewXdsSupervisor(s.Context) + if err := xs.Connect(); err != nil { + return nil, err + } + s.XdsSupervisor = xs + } + return s.XdsSupervisor, nil +} diff --git a/lib/agent/apiv1.go b/lib/agent/apiv1.go index 97165b3..504558e 100644 --- a/lib/agent/apiv1.go +++ b/lib/agent/apiv1.go @@ -67,6 +67,9 @@ func NewAPIV1(ctx *Context) *APIService { s.apiRouter.POST("/events/register", s.eventsRegister) s.apiRouter.POST("/events/unregister", s.eventsUnRegister) + s.apiRouter.GET("/supervisor/topo", s.getSupervisorTopo) + s.apiRouter.POST("/supervisor/trace/start", s.startSupervisor) + s.apiRouter.POST("/supervisor/trace/stop", s.stopSupervisor) return s } diff --git a/lib/agent/xdsserver.go b/lib/agent/xdsserver.go index f74e3ba..24e51d7 100644 --- a/lib/agent/xdsserver.go +++ b/lib/agent/xdsserver.go @@ -157,7 +157,7 @@ func (xs *XdsServer) SetLoggerOutput(out io.Writer) { xs.logOut = out } -// GetConfig +// GetConfig return the current server config func (xs *XdsServer) GetConfig() xaapiv1.ServerCfg { return xaapiv1.ServerCfg{ ID: xs.ID, diff --git a/lib/agent/xdssupervior.go b/lib/agent/xdssupervior.go new file mode 100644 index 0000000..bbe2500 --- /dev/null +++ b/lib/agent/xdssupervior.go @@ -0,0 +1,230 @@ +/* + * 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. + */ + +package agent + +import ( + "fmt" + "io" + "strings" + "time" + + common "gerrit.automotivelinux.org/gerrit/src/xds/xds-common.git/golib" + uuid "github.com/satori/go.uuid" +) + +// XdsSupervisor . +type XdsSupervisor struct { + *Context + ID string + BaseURL string + ConnRetry int + Connected bool + Disabled bool + + // Private fields + client *common.HTTPClient + logOut io.Writer + cbOnConnect OnConnectedXdsSupervCB +} + +// XdsSuperVRequest Resquest field of a reply +type XdsSuperVRequest struct { + Status string `json:"status"` + Info string `json:"info"` +} + +// XdsSuperVReply Reply structure of XDS Supervision Daemon +type XdsSuperVReply struct { + JType string `json:"jtype"` + Request XdsSuperVRequest `json:"request"` + Response interface{} `json:"response"` +} + +// XdsSuperVTraceConfig +type XdsSuperVTraceConfig struct { + Pid int `json:"pid"` + Pids []int `json:"pids"` + WsName string `json:"ws"` +} + +// OnConnectedXdsSupervCB connect callback +type OnConnectedXdsSupervCB func(svr *XdsSupervisor) error + +// NewXdsSupervisor creates an instance of XdsSupervisor +func NewXdsSupervisor(ctx *Context) *XdsSupervisor { + return &XdsSupervisor{ + Context: ctx, + ID: "XdsSupervisor-" + uuid.NewV1().String(), + BaseURL: ctx.Config.FileConf.ProfileConf.XDSBinder.URL, + ConnRetry: ctx.Config.FileConf.ProfileConf.XDSBinder.ConnRetry, + Connected: false, + Disabled: false, + + logOut: ctx.Log.Out, + } +} + +// Connect Establish HTTP connection with XDS Supervisor Dameon +func (xs *XdsSupervisor) Connect() error { + var err error + var retry int + + xs.Disabled = false + xs.Connected = false + + err = nil + for retry = xs.ConnRetry; retry > 0; retry-- { + if err = xs._CreateConnectHTTP(); err == nil { + break + } + if retry == xs.ConnRetry { + // Notify only on the first conn error + // doing that avoid 2 notifs (conn false; conn true) on startup + xs._NotifyState() + } + xs.Log.Infof("Establishing connection to XDS Supervisor daemon (retry %d/%d)", retry, xs.ConnRetry) + time.Sleep(time.Second) + } + if retry == 0 { + // FIXME: re-use _Reconnect to wait longer in background + return fmt.Errorf("Connection to XDS Supervisor daemon failure") + } + if err != nil { + return err + } + + // Check HTTP connection and establish WS connection + err = xs._Connect(false) + + return err +} + +// ConnectOn Register a callback on events reception +func (xs *XdsSupervisor) ConnectOn(f OnConnectedXdsSupervCB) error { + xs.cbOnConnect = f + return nil +} + +// GetVersion Send Get request to retrieve XDS Supervision version +func (xs *XdsSupervisor) GetVersion(res interface{}) error { + // FIXME add suffix URLSuffix in common HTTP client lib instead of _BuildURL + return xs.client.Get(xs._BuildURL("/version"), &res) +} + +// GetTopo Send Get request to retrieve Services/Daemons topology +func (xs *XdsSupervisor) GetTopo(res interface{}) error { + return xs.client.Get(xs._BuildURL("/list"), &res) +} + +// StartTrace Send Supervisor config and start tracing +func (xs *XdsSupervisor) StartTrace(cfg XdsSuperVTraceConfig, res interface{}) error { + return xs.client.Post(xs._BuildURL("/trace/start"), cfg, &res) +} + +// StopTrace Send Supervisor stop tracing +func (xs *XdsSupervisor) StopTrace(res interface{}) error { + var cfg interface{} + return xs.client.Post(xs._BuildURL("/trace/stop"), cfg, res) +} + +/*** +** Private functions +***/ + +// _BuildURL . +func (xs *XdsSupervisor) _BuildURL(url string) string { + return url + "?token=HELLO&uuid=magic" +} + +// Create HTTP client +func (xs *XdsSupervisor) _CreateConnectHTTP() error { + var err error + // FIXME SEB - Client key not in header but in cookie + // temporary workaround: used _BuildURL to append uuid=magic in URL + // map[Set-Cookie:[x-afb-uuid-5678=2b185cc3-276b-4097-91fa-d607eaf937e6; Path=/api; Max-Age=32000000; ... + //port := strings.Split(xs.BaseURL, ":")[2] + //"x-afb-uuid-" + port + + xs.client, err = common.HTTPNewClient(xs.BaseURL, + common.HTTPClientConfig{ + //HeaderClientKeyName: "Xds-Sid", + HeaderAPIKeyName: "token", + Apikey: "HELLO", + URLPrefix: "/api/xds", + CsrfDisable: true, + LogOut: xs.logOut, + LogPrefix: "XDSSUPERV: ", + LogLevel: common.HTTPLogLevelWarning, + }) + + xs.client.SetLogLevel(xs.Log.Level.String()) + + if err != nil { + msg := ": " + err.Error() + if strings.Contains(err.Error(), "connection refused") { + msg = fmt.Sprintf("(url: %s)", xs.BaseURL) + } + return fmt.Errorf("ERROR: cannot connect to XDS Supervisor %s", msg) + } + if xs.client == nil { + return fmt.Errorf("ERROR: cannot connect to XDS Supervisor (null client)") + } + + return nil +} + +// _Connect Established HTTP and WS connection +func (xs *XdsSupervisor) _Connect(reConn bool) error { + + var res interface{} + if err := xs.client.Get(xs._BuildURL("/ping"), &res); err != nil { + xs.Connected = false + if !reConn { + xs._NotifyState() + } + return err + } + + xs.Connected = true + + // Call OnConnect callback + if xs.cbOnConnect != nil { + xs.cbOnConnect(xs) + } + + xs._NotifyState() + return nil +} + +// _NotifyState Send event to notify changes +func (xs *XdsSupervisor) _NotifyState() { + + /* TODO + evSts := xaapiv1.ServerCfg{ + ID: xs.ID, + URL: xs.BaseURL, + APIURL: xs.APIURL, + PartialURL: xs.PartialURL, + ConnRetry: xs.ConnRetry, + Connected: xs.Connected, + } + if err := xs.events.Emit(xaapiv1.EVTServerConfig, evSts, ""); err != nil { + xs.Log.Warningf("Cannot notify XdsServer state change: %v", err) + } + */ +} diff --git a/lib/xdsconfig/config.go b/lib/xdsconfig/config.go index b7bf57b..352ba84 100644 --- a/lib/xdsconfig/config.go +++ b/lib/xdsconfig/config.go @@ -91,6 +91,12 @@ func Init(ctx *cli.Context, log *logrus.Logger) (*Config, error) { SThgConf: &SyncThingConf{ Home: defaultSTHomeDir, }, + ProfileConf: ProfileConfT{ + XDSBinder: XDSBinderConf{ + URL: "http://localhost:5678", + ConnRetry: 10, + }, + }, }, Log: log, } diff --git a/lib/xdsconfig/configfile.go b/lib/xdsconfig/configfile.go index 009517f..1390456 100644 --- a/lib/xdsconfig/configfile.go +++ b/lib/xdsconfig/configfile.go @@ -43,6 +43,15 @@ type XDSServerConf struct { APIPartialURL string `json:"-"` } +type XDSBinderConf struct { + URL string `json:"url"` + ConnRetry int `json:"connRetry"` +} + +type ProfileConfT struct { + XDSBinder XDSBinderConf `json:"xdsBinder"` +} + type FileConfig struct { HTTPPort string `json:"httpPort"` WebAppDir string `json:"webAppDir"` @@ -50,6 +59,7 @@ type FileConfig struct { XDSAPIKey string `json:"xds-apikey"` ServersConf []XDSServerConf `json:"xdsServers"` SThgConf *SyncThingConf `json:"syncthing"` + ProfileConf ProfileConfT `json:"profileConf"` } // readGlobalConfig reads configuration from a config file. 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