From 0c9860192b3e71847ea572637774d38f43a6602d Mon Sep 17 00:00:00 2001 From: Xaver Maierhofer Date: Tue, 14 Nov 2017 17:37:20 +0100 Subject: [PATCH] [TASK] Add multiple links to link infobox --- lib/forcegraph.js | 4 +-- lib/infobox/link.js | 78 ++++++++++++++++++++++------------------ lib/map.js | 2 +- lib/title.js | 2 +- lib/utils/router.js | 2 +- scss/modules/_table.scss | 10 ++++++ 6 files changed, 59 insertions(+), 39 deletions(-) diff --git a/lib/forcegraph.js b/lib/forcegraph.js index b96010c..7c1174b 100644 --- a/lib/forcegraph.js +++ b/lib/forcegraph.js @@ -253,9 +253,9 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'd3-timer', 'd3-ease', self.gotoLink = function gotoLink(d) { moveTo(function calcToLink() { - draw.setHighlight({ type: 'link', id: d.id }); + draw.setHighlight({ type: 'link', id: d[0].id }); var l = intLinks.find(function (link) { - return link.o.id === d.id; + return link.o.id === d[0].id; }); if (l) { return [(l.source.x + l.target.x) / 2, (l.source.y + l.target.y) / 2, (ZOOM_MAX / 2) + ZOOM_MIN]; diff --git a/lib/infobox/link.js b/lib/infobox/link.js index cd8f01d..50b35f8 100644 --- a/lib/infobox/link.js +++ b/lib/infobox/link.js @@ -2,16 +2,21 @@ define(['helper', 'snabbdom'], function (helper, V) { 'use strict'; V = V.default; - function showStatImg(o, d, time) { + function showStatImg(img, o, d, time) { var subst = { '{SOURCE_ID}': d.source.node_id, '{SOURCE_NAME}': d.source.hostname.replace(/[^a-z0-9\-]/ig, '_'), + '{SOURCE_MAC}': d.source_mac, '{TARGET_ID}': d.target.node_id, '{TARGET_NAME}': d.target.hostname.replace(/[^a-z0-9\-]/ig, '_'), + '{TARGET_MAC}': d.target_mac, + '{TYPE}': d.type, '{TIME}': time, '{LOCALE}': _.locale() }; - return helper.showStat(V, o, subst); + + img.push(V.h('h4', helper.listReplace(o.name, subst))); + img.push(helper.showStat(V, o, subst)); } return function (el, d, linkScale) { @@ -25,50 +30,55 @@ define(['helper', 'snabbdom'], function (helper, V) { self.render = function render() { var children = []; - var headers = []; - headers.push(V.h('h2', [ + var img = []; + var time = d[0].target.lastseen.format('DDMMYYYYHmmss'); + + header = V.patch(header, V.h('div', V.h('h2', [ V.h('a', { - props: { href: router.generateLink({ node: d.source.node_id }) } - }, d.source.hostname), + props: { href: router.generateLink({ node: d[0].source.node_id }) } + }, d[0].source.hostname), V.h('span', ' - '), V.h('a', { - props: { href: router.generateLink({ node: d.target.node_id }) } - }, d.target.hostname) - ])); + props: { href: router.generateLink({ node: d[0].target.node_id }) } + }, d[0].target.hostname) + ]))); - header = V.patch(header, V.h('div', headers)); + helper.attributeEntry(V, children, 'node.hardware', (d[0].source.model ? d[0].source.model + ' – ' : '') + + (d[0].target.model ? d[0].target.model : '')); + helper.attributeEntry(V, children, 'node.distance', helper.showDistance(d[0])); - helper.attributeEntry(V, children, 'node.connectionType', d.type); - helper.attributeEntry(V, children, 'node.tq', V.h('span', - { - style: - { - color: linkScale((d.source_tq + d.target_tq) / 2) - } - }, helper.showTq(d.source_tq) + ' - ' + helper.showTq(d.target_tq)) - ); - helper.attributeEntry(V, children, 'node.distance', helper.showDistance(d)); - helper.attributeEntry(V, children, 'node.hardware', (d.source.model ? d.source.model + ' – ' : '') + - (d.target.model ? d.target.model : '')); + d.forEach(function (link) { + children.push(V.h('tr', { props: { className: 'header' } }, [ + V.h('th', _.t('node.connectionType')), + V.h('th', link.type) + ])); + helper.attributeEntry(V, children, 'node.tq', V.h('span', + { style: { color: linkScale((link.source_tq + link.target_tq) / 2) } }, + helper.showTq(link.source_tq) + ' - ' + helper.showTq(link.target_tq)) + ); + + if (config.linkTypeInfos) { + config.linkTypeInfos.forEach(function (o) { + showStatImg(img, o, link, time); + }); + } + }); + + if (config.linkInfos) { + config.linkInfos.forEach(function (o) { + showStatImg(img, o, d[0], time); + }); + } var elNew = V.h('table', children); table = V.patch(table, elNew); table.elm.classList.add('attributes'); - - if (config.linkInfos) { - var time = d.target.lastseen.format('DDMMYYYYHmmss'); - var img = []; - config.linkInfos.forEach(function (linkInfo) { - img.push(V.h('h4', linkInfo.name)); - img.push(showStatImg(linkInfo, d, time)); - }); - images = V.patch(images, V.h('div', img)); - } + images = V.patch(images, V.h('div', img)); }; self.setData = function setData(data) { - d = data.links.find(function (a) { - return a.id === d.id; + d = data.links.filter(function (a) { + return a.id === d[0].id; }); self.render(); }; diff --git a/lib/map.js b/lib/map.js index b021856..d0f6f89 100644 --- a/lib/map.js +++ b/lib/map.js @@ -194,7 +194,7 @@ define(['map/clientlayer', 'map/labellayer', 'map/button', 'leaflet'], self.gotoLink = function gotoLink(d) { button.disableTracking(); - highlight = { type: 'link', o: d }; + highlight = { type: 'link', o: d[0] }; updateView(); }; diff --git a/lib/title.js b/lib/title.js index b161973..812bca3 100644 --- a/lib/title.js +++ b/lib/title.js @@ -21,7 +21,7 @@ define(function () { }; this.gotoLink = function gotoLink(d) { - setTitle((d.source ? d.source.hostname : d.source.id) + ' \u21D4 ' + d.target.hostname); + setTitle(d[0].source.hostname + ' \u21D4 ' + d[0].target.hostname); }; this.gotoLocation = function gotoLocation() { diff --git a/lib/utils/router.js b/lib/utils/router.js index 04ae87c..e2e8259 100644 --- a/lib/utils/router.js +++ b/lib/utils/router.js @@ -24,7 +24,7 @@ define(['Navigo'], function (Navigo) { } function gotoLink(d) { - var link = objects.links.find(function (value) { + var link = objects.links.filter(function (value) { return value.id === d.linkId; }); if (link) { diff --git a/scss/modules/_table.scss b/scss/modules/_table.scss index bb1224c..beba0dc 100644 --- a/scss/modules/_table.scss +++ b/scss/modules/_table.scss @@ -22,6 +22,16 @@ table { } } +tr { + &.header { + font-size: 1.2em; + + th { + padding-top: 1em; + } + } +} + td, th { line-height: 1.41em;