diff --git a/app/graph/applications/persistenceGraph.js b/app/graph/applications/persistenceGraph.js
index 8aaadc2..1f36d25 100644
--- a/app/graph/applications/persistenceGraph.js
+++ b/app/graph/applications/persistenceGraph.js
@@ -1,41 +1,41 @@
-'use strict';
-
-const _ = require('lodash');
-
-const DPersistenceServices = require('core/services/PersistenceServices');
-const UploadHTML = require('graph/services/uploadHTML');
-
-
-const ApplicationAnalytics = (Entity, PersistenceServices = DPersistenceServices) => {
-
-
- return {
- create(req, res, next) {
- const port = process.env.MAESTRO_PORT;
- const hostname = `${req.protocol}://${req.hostname}:${port}`;
-
- const data = Object.assign({}, req.body, req.user, {hostname});
-
- if (_.has(data, 'graph_id') && _.has(data, 'owner_id')) {
- res.render('index', data, (err, out) => {
- if (err)
- next(err);
-
- const post = {'status': 'finished', 'msg': 'Finish'};
- const owner = {'_id': _.get(data, 'owner_id')};
- const _id = _.get(data, 'graph_id')
-
- UploadHTML(Entity)(out, req.user)()
- .then(() => {
- return PersistenceServices(Entity)
- .patch(_id, post, owner);
- })
- .then(e => res.json(e))
- .catch(next);
- });
- }
- }
- };
-};
-
-module.exports = _.curry(ApplicationAnalytics);
+'use strict';
+
+const _ = require('lodash');
+
+const DPersistenceServices = require('core/services/PersistenceServices');
+const UploadHTML = require('graph/services/uploadHTML');
+
+
+const ApplicationAnalytics = (Entity, PersistenceServices = DPersistenceServices) => {
+
+
+ return {
+ create(req, res, next) {
+ const port = process.env.MAESTRO_PORT;
+ const hostname = `${req.protocol}://${req.hostname}:${port}`;
+
+ const data = Object.assign({}, req.body, req.user, {hostname});
+
+ if (_.has(data, 'graph_id') && _.has(data, 'owner_id')) {
+ res.render('index', data, (err, out) => {
+ if (err)
+ next(err);
+
+ const post = {'status': 'finished', 'msg': 'Finish'};
+ const owner = {'_id': _.get(data, 'owner_id')};
+ const _id = _.get(data, 'graph_id')
+
+ UploadHTML(Entity)(out, req.user)()
+ .then(() => {
+ return PersistenceServices(Entity)
+ .patch(_id, post, owner);
+ })
+ .then(e => res.json(e))
+ .catch(next);
+ });
+ }
+ }
+ };
+};
+
+module.exports = _.curry(ApplicationAnalytics);
diff --git a/app/templates/index.dust b/app/templates/index.dust
index a3d1c95..ced58af 100644
--- a/app/templates/index.dust
+++ b/app/templates/index.dust
@@ -1,67 +1,87 @@
-
-
-
-
- Maestro Server - Cloud Inventory
-
-
-
-
-
-
-
-
-
-
-
- {payload|s}
-
-
-
-
- -
-
MyTitle
-
-
- -
-
Histograms
-
-
- -
-
Density
-
-
- -
-
Systems (21)
-
-
-
- -
-
Clients (21)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ Maestro Server - Cloud Inventory
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {payload|s}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/css/main.css b/public/css/main.css
index 87531c4..1b05c11 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,212 +1,272 @@
-/* http://meyerweb.com/eric/tools/css/reset/
- v2.0 | 20110126
- License: none (public domain)
-
- Reset
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
-}
-
-body {
- line-height: 1;
-}
-
-ol, ul {
- list-style: none;
-}
-
-blockquote, q {
- quotes: none;
-}
-
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
-}
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-/*
- ===================== Structure
-*/
-body {
- background: #eaeaea;
- padding: 10px;
-}
-
-svg {
- max-width: 100%;
- max-height: 100%;
- height: 100vh;
- width: 100vw;
-}
-
-#info {
- top: 0;
- right: 0;
- height: 100vh;
- position: fixed;
-
- background-color: rgba(91, 91, 91, 0.6);
-}
-
-.footer {
- text-align: right;
- font-size: 12px;
- padding: 5px;
-}
-
-/*
- ===================== Layout
-*/
-p, a, b, li, span {
- font-size: 12px;
- font-family:Arial, Helvetica, sans-serif; fill: #672064;
-}
-
-a {
- color: #672064;
- text-decoration: none;
-}
-
-/*
- ===================== TooltipApps
-*/
-.apptlp {
- border: 1px solid #a0a0a0;
- background: rgba(0, 0, 0, 0.6);
- padding: 10px 15px 15px;
- border-radius: 3px;
- display: inline-block;
- color: #fff;
-}
-
-.apptlp ul {
- position: relative;
- display: inline-block;
- max-width: 400px;
-}
-
-.apptlp ul li {
- padding: 6px 0;
- border-bottom: 1px solid #fff;
-}
-
-.apptlp ul li span {
- color: #e0e0e0;
-}
-
-.apptlp ul li:first-child {
- border-bottom: 1px solid #fff;
- margin-bottom: 5px;
-}
-
-.apptlp ul li:first-child b {
- display: none
-}
-
-.apptlp ul li:first-child span {
- font-size: 14px;
- font-weight: bold;
-}
-
-.apptlp ul li b {
- text-transform: capitalize;
-}
-
-.tb-btn a {
- border-top: 1px solid #a0a0a0;
- border-bottom: 1px solid #a0a0a0;
- border-right: 1px solid #a0a0a0;
-
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
-
- position: absolute;
- display: inline-block;
- background: rgba(0, 0, 0, 0.8);
- height: 100%;
- width: 20px;
- text-align: center;
- right: -20px;
- top: -1px;
-
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- color: #fff;
- font-weight: bold;
-}
-
-
-
-/*
- ===================== connector
-*/
-.conector_h, .conector {
- cursor: crosshair;
-}
-
-.mini-ell {
- pointer-events: none;
-}
-
-.boundaries {
- cursor: pointer;
-}
-
-
-/*
- ===================== Mini tooltip
-*/
-.minitlp {
- background: #672064;
- border-radius: 4px;
- padding: 10px;
- color: #fff;
- display: inline;
- text-transform: capitalize;
- font-size: 14px;
- pointer-events: none;
-}
-
-.noshow {
- visibility: hidden;
- opacity: 0;
- transition: opacity 0.5s;
-}
-
-.show {
- opacity: 1;
- visibility: visible;
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+
+ Reset
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+
+body {
+ line-height: 1;
+}
+
+ol, ul {
+ list-style: none;
+}
+
+blockquote, q {
+ quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+/*
+ ===================== Layout
+*/
+p, a, b, li, span, h1, h2, h3, h4, h5, h6 {
+ font-size: 12px;
+ font-family:Arial, Helvetica, sans-serif; fill: #672064;
+}
+
+a {
+ color: #672064;
+ text-decoration: none;
+}
+
+/*
+ ===================== Structure
+*/
+body {
+ background: #eaeaea;
+ padding: 10px;
+}
+
+#viewer {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 0;
+
+ max-width: 100%;
+ max-height: 100%;
+ height: 100vh;
+ width: 100vw;
+ overflow: hidden;
+}
+
+#viewer svg {
+ max-width: 100%;
+ max-height: 100%;
+ height: 100vh;
+ width: 100vw;
+}
+
+#info {
+ top: 0;
+ left: 0;
+ height: 100vh;
+ position: fixed;
+
+ background-color: rgba(91, 91, 91, 0.6);
+ padding: 10px 16px 10px;
+
+ min-width: 120px;
+ max-width: 120px;
+}
+
+#info h1 {
+ font-weight: bold;
+ color: #fff;
+ font-size: 16px;
+ padding: 5px 0;
+}
+
+#info ul li {
+ border-bottom: 1px solid #a0a0a0;
+ padding: 5px 0;
+ margin-bottom: 5px;
+}
+
+#info ul li h2 {
+ color: #fff;
+ font-size: 14px;
+ padding: 4px 0;
+}
+
+#info ul li ul {
+ padding: 2px 0;
+ display: none;
+ position: relative;
+ overflow: hidden;
+}
+
+#info ul li ul li {
+ color: #dddbdb;
+ font-size: 12px;
+ padding: 2px 0;
+ border: none;
+}
+
+.number {
+ color: #fff;
+ font-size: 24px;
+ text-align: center;
+ display: inline;
+}
+
+
+/*
+ ===================== TooltipApps
+*/
+.apptlp {
+ border: 1px solid #767676;
+ background: rgba(0, 0, 0, 0.6);
+ padding: 10px 15px 15px;
+ border-radius: 3px;
+ display: inline-block;
+ color: #fff;
+}
+
+.apptlp ul {
+ position: relative;
+ display: inline-block;
+ max-width: 280px;
+}
+
+.apptlp ul li {
+ padding: 6px 0;
+ border-bottom: 1px solid #fff;
+}
+
+.apptlp ul li span {
+ color: #e0e0e0;
+}
+
+.apptlp ul li:first-child {
+ border-bottom: 1px solid #fff;
+ margin-bottom: 5px;
+}
+
+.apptlp ul li:first-child b {
+ display: none
+}
+
+.apptlp ul li:first-child span {
+ font-size: 14px;
+ font-weight: bold;
+ color: #fff;
+}
+
+.apptlp ul li b {
+ text-transform: capitalize;
+}
+
+.tb-btn a {
+ border-top: 1px solid #a0a0a0;
+ border-bottom: 1px solid #a0a0a0;
+ border-right: 1px solid #a0a0a0;
+
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+
+ position: absolute;
+ display: inline-block;
+ background: rgba(0, 0, 0, 0.8);
+ height: 100%;
+ width: 20px;
+ text-align: center;
+ right: -20px;
+ top: -1px;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ color: #fff;
+ font-weight: bold;
+}
+
+.glowing {
+ filter: url(#glow);
+}
+
+
+/*
+ ===================== connector
+*/
+.conector_h, .conector {
+ cursor: crosshair;
+}
+
+.mini-ell {
+ pointer-events: none;
+}
+
+.boundaries {
+ cursor: pointer;
+}
+
+
+/*
+ ===================== Mini tooltip
+*/
+.minitlp {
+ background: #672064;
+ border-radius: 4px;
+ padding: 10px;
+ color: #fff;
+ display: inline;
+ text-transform: capitalize;
+ font-size: 14px;
+ pointer-events: none;
+}
+
+.noshow {
+ visibility: hidden;
+ opacity: 0;
+ transition: opacity 0.5s;
+}
+
+.show {
+ opacity: 1;
+ visibility: visible;
+}
+
+.footer {
+ font-size: 10px;
}
\ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
index 25467a7..fd35f64 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,194 +1,204 @@
-'use strict';
-
-function AnimateLines(app, color="#6b2626") {
- this.name = "AnimateLines";
- var actived = false;
-
- var tooltip = $('#conn-tooltip');
-
- function animateMinis(path) {
- var length = path.length();
- var c = app.ellipse(5, 4).fill(color).addClass('mini-ell');
-
- var vel = 500 + length
-
- c.animate(vel, '<>').during(function (pos, morph, eased) {
- var p = path.pointAt(eased * length)
-
- c.move(p.x - 2.5, p.y - 2)
- }).after(function () {
- c.remove();
- });
- }
-
- function startAnimation(target) {
- var path = SVG.adopt(target);
- animateMinis(path);
-
- var timer = setInterval(function() {
- if (actived) {
- animateMinis(path);
-
- if (!actived)
- clearInterval(timer);
- } else {
- clearInterval(timer);
- }
- }, 100);
- }
-
- function transfPath(target, stk, stkw) {
- var obj = $(target).parent().find('.conector')[0];
- var path = SVG.adopt(obj);
-
- path.attr({
- stroke: stk,
- 'stroke-width': stkw
- });
- }
-
- function showLabel(target, e) {
- var txt = $(target).parent().find('text');
-
- tooltip
- .offset({ top : e.pageY, left: e.pageX})
- .text(txt.text())
- .addClass('show');
- }
-
- function hideLabel() {
- tooltip
- .offset({ top : 0, left: 0})
- .removeClass('show');
- }
-
- this.setup = function() {
- $('svg').find('.conector_h')
- .mouseover(this.actived)
- .mouseleave(this.desactived);
- };
-
- this.actived = function(e) {
- actived = true
-
- showLabel(this, e);
- transfPath(this, color, 2);
- startAnimation(this);
- };
-
- this.desactived = function() {
- actived = false
-
- hideLabel();
- transfPath(this, '#000', 1);
- };
-}
-
-
-function AppTooltip(app) {
- this.name = "AppTooltip";
-
- var tooltip = $('#app-tooltip');
-
- function showTool(target, e) {
- var ul = tooltip.find('ul');
- ul.empty();
-
- $(target).find('tspan').each(function() {
- var vl = $(this).text();
- var ky = $(this).attr('class');
-
- var apd = ""+ky+": "+vl+"";
-
- ul.append(""+apd+"");
- });
-
- tooltip
- .offset({ top : e.pageY, left: e.pageX})
- .addClass('show');
- }
-
- function hiddenTool(target) {
- tooltip
- .removeClass('show');
- }
-
- function getIdTool(id) {
- return '#tool-'+id;
- }
-
- this.setup = function() {
- $('.boundaries')
- .mouseover(this.actived)
- .mouseleave(this.desactived);
- };
-
- this.actived = function(e) {
- var id = $(this).attr('id');
- var elID = getIdTool(id);
- var obj = $(elID)
-
- console.log(obj)
- showTool(obj, e);
- };
-
- this.desactived = function(e) {
- if ($(e.toElement).hasClass('apptlp')) {
- $(e.toElement).mouseleave(function() {
- hiddenTool();
- $(this).off('mouseleave');
- })
- } else {
- hiddenTool();
- }
- };
-}
-
-function AppSVG(svg) {
- this.app = null;
-
- this.setup = function() {
- this.setupZoom();
- this.setupSVGObject();
-
- var AToolTips = new AppTooltip(this.root);
- AToolTips.setup();
-
- var ALines = new AnimateLines(this.app);
- ALines.setup();
- },
-
- this.setupSVGObject = function() {
- var qapp = document.querySelector("svg .svg-pan-zoom_viewport");
- this.app = SVG.adopt(qapp);
-
- var qobj = document.querySelector("svg");
- this.root = SVG.adopt(qobj);
- },
-
- this.setupZoom = function () {
- var panZoom = svgPanZoom('#graph', {
- zoomEnabled: true,
- controlIconsEnabled: true,
- fit: true,
- center: true,
- dblClickZoomEnabled: false,
- maxZoom:4
- });
-
- $(window).resize(function() {
- panZoom.resize();
- panZoom.fit();
- panZoom.center();
- });
- }
-
-}
-
-
-
-
-$(document).ready(function() {
- var app = new AppSVG();
- app.setup();
+'use strict';
+
+function AnimateLines(app, color="#6b2626") {
+ this.name = "AnimateLines";
+ var actived = false;
+
+ var tooltip = $('#conn-tooltip');
+
+ function animateMinis(path) {
+ var length = path.length();
+ var c = app.ellipse(5, 4).fill(color).addClass('mini-ell');
+
+ var vel = 500 + length
+
+ c.animate(vel, '<>').during(function (pos, morph, eased) {
+ var p = path.pointAt(eased * length)
+
+ c.move(p.x - 2.5, p.y - 2)
+ }).after(function () {
+ c.remove();
+ });
+ }
+
+ function startAnimation(target) {
+ var path = SVG.adopt(target);
+ animateMinis(path);
+
+ var timer = setInterval(function() {
+ if (actived) {
+ animateMinis(path);
+
+ if (!actived)
+ clearInterval(timer);
+ } else {
+ clearInterval(timer);
+ }
+ }, 100);
+ }
+
+ function transfPath(target, stk, stkw) {
+ var obj = $(target).parent().find('.conector')[0];
+ var path = SVG.adopt(obj);
+
+ path.attr({
+ stroke: stk,
+ 'stroke-width': stkw
+ });
+ }
+
+ function showLabel(target, e) {
+ var txt = $(target).parent().find('text');
+
+ tooltip
+ .offset({ top : e.pageY, left: e.pageX})
+ .text(txt.text())
+ .addClass('show');
+ }
+
+ function hideLabel() {
+ tooltip
+ .offset({ top : 0, left: 0})
+ .removeClass('show');
+ }
+
+ this.setup = function() {
+ $('svg').find('.conector_h')
+ .mouseover(this.actived)
+ .mouseleave(this.desactived);
+ };
+
+ this.actived = function(e) {
+ actived = true
+
+ showLabel(this, e);
+ transfPath(this, color, 2);
+ startAnimation(this);
+ };
+
+ this.desactived = function() {
+ actived = false
+
+ hideLabel();
+ transfPath(this, '#000', 1);
+ };
+}
+
+
+function AppTooltip(app) {
+ this.name = "AppTooltip";
+
+ var tooltip = $('#app-tooltip');
+
+ function showTool(target, e) {
+ var ul = tooltip.find('ul');
+ ul.empty();
+
+ $(target).find('tspan').each(function() {
+ var vl = $(this).text();
+ var ky = $(this).attr('class');
+
+ var apd = ""+ky+": "+vl+"";
+
+ ul.append(""+apd+"");
+ });
+
+ tooltip
+ .offset({ top : e.pageY, left: e.pageX})
+ .addClass('show');
+ }
+
+ function hiddenTool(target) {
+ target.removeClass('glowing');
+
+ tooltip
+ .removeClass('show');
+ }
+
+ function getIdTool(id) {
+ return '#tool-'+id;
+ }
+
+ this.setup = function() {
+ $('.boundaries')
+ .mouseover(this.actived)
+ .mouseleave(this.desactived);
+ };
+
+ this.actived = function(e) {
+ var id = $(this).attr('id');
+ var elID = getIdTool(id);
+ var obj = $(elID)
+
+ showTool(obj, e);
+ $(this).addClass('glowing');
+ };
+
+ this.desactived = function(e) {
+ var that = $(this);
+
+ if ($(e.toElement).hasClass('apptlp')) {
+ $(e.toElement).mouseleave(function() {
+ hiddenTool(that);
+ $(this).off('mouseleave');
+ });
+ } else {
+ hiddenTool(that);
+ }
+
+
+ };
+}
+
+function AppSVG(svg) {
+ this.app = null;
+
+ this.setup = function() {
+ this.setupZoom();
+ this.setupSVGObject();
+
+ var AToolTips = new AppTooltip(this.root);
+ AToolTips.setup();
+
+ var ALines = new AnimateLines(this.app);
+ ALines.setup();
+ },
+
+ this.setupSVGObject = function() {
+ var qapp = document.querySelector("svg .svg-pan-zoom_viewport");
+ this.app = SVG.adopt(qapp);
+
+ var qobj = document.querySelector("svg");
+ this.root = SVG.adopt(qobj);
+ },
+
+ this.setupZoom = function () {
+ var panZoom = svgPanZoom('#graph', {
+ zoomEnabled: true,
+ controlIconsEnabled: true,
+ fit: true,
+ center: true,
+ dblClickZoomEnabled: false,
+ maxZoom:4
+ });
+
+ $(window).resize(function() {
+ panZoom.resize();
+ panZoom.fit();
+ panZoom.center();
+ });
+ }
+
+}
+
+
+
+
+$(document).ready(function() {
+ var app = new AppSVG();
+ app.setup();
+
+ $('.menu li').hover(function(){
+ $(this).find('ul').slideToggle('fast');
+ });
});
\ No newline at end of file