Skip to content

GitLab

M
mon_map
Commit 9adfd594 authored by Stauros Kroustouris's avatar Stauros Kroustouris
Browse files
Options

initial

parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 985 additions and 0 deletions
README.md 0 → 100644
View file @ 9adfd594
Api
===
The json can return the following variables:
- pins, an array of pins that will be shown in the map
- url, the url of the page
- coords, the limits of the interestin area in the map
- links, the links from one pin to another
Pins
----
- name, the name of the pin. Required.
- geolat, geolng, the coords of the point. Required.
- location, if the point is a kind of institution. Required.
- image, if an image should be used instead of the pin
- url, the url that is linked with the pin, if the pin is not a child
Coords
------
The limits of the interesting area in the map:
- minlat, minimum latitude
- minlng, minimum longitude
- maxlat, maximum latitude
- maxlng, maximum longitude
Links
-----
- fmloc, from location
- toloc, to location
- fmto, from, to
- fmlat, from latitude
- fmlng, from longitude
- tolat, to latitude
- tolng, from logintude
- fmcity, from city
- tocity, to city
- mrtg_tag, tag
- mrtg_indexuri, uri
- fmnd, from node
- tond, to node
- capacity
- mrtg_type
- mrtg_dayuri, uri to diagram
- toif, to interface
- fromif, from interface
- mrtg_thumb, thumbnail of the diagram(?)
# The view used for peer_ifces
CREATE VIEW `peer_ifces` AS (
select
`node`.`name` AS `name`,
`b`.`ifDescr` AS `interface`,
`db_members`.`location`.`location_id` AS `grnet_device_location`,
`db_members`.`peer_site`.`site_id` AS `site`,
`db_members`.`peer_site`.`peer_site_location` AS `site_location`,
`td`.`member_id` AS peer
from (
(
(
(
(
(
(
(
`observium`.`ports_stack` join `observium`.`ports` `a` on (
(
(
`a`.`ifIndex` = `observium`.`ports_stack`.`port_id_high`
) and (
`a`.`device_id` = `observium`.`ports_stack`.`device_id`
)
)
)
) join `observium`.`ports` `b` on (
(
(
`b`.`ifIndex` = `observium`.`ports_stack`.`port_id_low`
) and (
`b`.`device_id` = `observium`.`ports_stack`.`device_id`
)
)
)
) join `grnetdb`.`tagged_ifce` `ti` on (
(
`ti`.`ifce_id` = `b`.`port_id`
)
)
) join `grnetdb`.`tagged_domain` `td` on (
(
`ti`.`tagged_domain_id` = `td`.`domain_id`
)
)
) join `grnetdb`.`node` on (
(
`node`.`node_id` = `observium`.`ports_stack`.`device_id`
)
)
) left join `db_members`.`location` on (
(
`db_members`.`location`.`location_id` = `node`.`location_id`
)
)
) left join `db_members`.`peer_site` on (
(
`ti`.`site_id` = `db_members`.`peer_site`.`site_id`
)
)
) left join db_members.peer on (
td.member_id = db_members.peer.peer_id
)
) where (
(
`b`.`ifDescr` is not null
) and (
`a`.`ifDescr` is not null
) and (
`ti`.`tagged_domain_id` <> 100
)
) group by `b`.`port_id`
)
__init__.pyc 0 → 100644
View file @ 9adfd594
File added
static/maps/css/maps.css 0 → 100644
View file @ 9adfd594
#main {
margin: 1% 7%;
}
header a.active {
color: orange;
}
.bandwidths, .memo {
float: right;
margin-top: 5px;
}
.memo li {
list-style: none;
}
.bandwidths li {
margin-top: 10px;
list-style: none;
}
.bandwidths li span {
display: inline-block;
width: 20px;
margin-right: 10px;
}
.memo span {
display: inline-block;
padding: 10px;
}
header .grnetlogo {
display: inline-block;
height: 100px;
position: absolute;
top: 10px;
left: 40px;
width: 230px;
height: 50px;
}
header .grnetlogo img {
display: block;
position: absolute;
top: 0;
left: 0;
margin-right: 10px;
}
header .grnetlogo span {
position: absolute;
top: 5px;
right: 0;
float: none;
}
header .title {
position: absolute;
right: 0;
bottom: 0;
font-size: 22px;
margin-top: 27px;
}
.menu {
float: right;
margin-right: 200px;
margin-top: 20px;
position: relative;
}
#info-box {
position: fixed;
display: none;
padding: 10px;
background: white;
border: 1px solid #eeeeee;
}
#info-box.hovering {
display: block;
}
#svg {
position: relative;
padding-top: 5px;
}
#svg text {
fill: black;
}
#svg svg path:hover, #svg svg ellipse:hover {
cursor: pointer;
stroke: black !important;
}
#svg svg ellipse:hover {
fill: black !important;
}
#svg:after {
content: "";
display: block;
background: FireBrick;
width: 0%;
height: 5px;
top: 0%;
left: 0%;
position: absolute;
}
ul.layers li.clicked {
color: red;
}
ul.layers {
width: 10%;
list-style: none;
padding: 0;
margin: 0;
}
ul.layers li {
background: silver;
color: white;
text-align: center;
}
ul.layers li:hover {
cursor: pointer;
background: gray;
}
#timespan input[type=submit] {
display: none;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
margin-top: 20px;
z-index: 100;
}
#reportrange {
background: #eeeeee;
border: 1px solid silver;
padding: 5px;
display: inline-block;
}
#popup.open {
position: absolute;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 1000;
display: block;
padding-bottom: 800px;
}
#popup {
display: none;
}
#popup.open .close-button {
float: right;
color: black;
font-size: 100px;
padding: 80px 40px;
font-weight: 800;
cursor: pointer;
position: fixed;
top: 0;
right: 0;
}
#popup.open .text {
margin: 100px auto;
width: 500px;
}
#popup.open .text img {
width: 100%;
display: block;
margin: 10px 0;
}
#popup.open .text h5 {
display: inline-block;
margin-right: 20px;
}
#popup.open .text h4 {
text-align: center;
}
.hidden {
display: none;
}
static/maps/css/nprogress.css 0 → 100644
View file @ 9adfd594
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #29d;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
static/maps/js/d3.tip.js 0 → 100644
View file @ 9adfd594
// d3.tip
// Copyright (c) 2013 Justin Palmer
//
// Tooltips for d3.js SVG visualizations
// Public - contructs a new tooltip
//
// Returns a tip
d3.tip = function() {
var direction = d3_tip_direction,
offset = d3_tip_offset,
html = d3_tip_html,
node = initNode(),
svg = null,
point = null,
target = null
function tip(vis) {
svg = getSVGNode(vis)
point = svg.createSVGPoint()
document.body.appendChild(node)
}
// Public - show the tooltip on the screen
//
// Returns a tip
tip.show = function() {
var args = Array.prototype.slice.call(arguments)
if(args[args.length - 1] instanceof SVGElement) target = args.pop()
var content = html.apply(this, args),
poffset = offset.apply(this, args),
dir = direction.apply(this, args),
nodel = d3.select(node), i = 0,
coords
nodel.html(content)
.style({ opacity: 1, 'pointer-events': 'all' })
while(i--) nodel.classed(directions[i], false)
coords = direction_callbacks.get(dir).apply(this)
nodel.classed(dir, true).style({
top: (coords.top + poffset[0]) + 'px',
left: (coords.left + poffset[1]) + 'px'
})
return tip
}
// Public - hide the tooltip
//
// Returns a tip
tip.hide = function() {
nodel = d3.select(node)
nodel.style({ opacity: 0, 'pointer-events': 'none' })
return tip
}
// Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value.
//
// n - name of the attribute
// v - value of the attribute
//
// Returns tip or attribute value
tip.attr = function(n, v) {
if (arguments.length < 2 && typeof n === 'string') {
return d3.select(node).attr(n)
} else {
var args = Array.prototype.slice.call(arguments)
d3.selection.prototype.attr.apply(d3.select(node), args)
}
return tip
}
// Public: Proxy style calls to the d3 tip container. Sets or gets a style value.
//
// n - name of the property
// v - value of the property
//
// Returns tip or style property value
tip.style = function(n, v) {
if (arguments.length < 2 && typeof n === 'string') {
return d3.select(node).style(n)
} else {
var args = Array.prototype.slice.call(arguments)
d3.selection.prototype.style.apply(d3.select(node), args)
}
return tip
}
// Public: Set or get the direction of the tooltip
//
// v - One of n(north), s(south), e(east), or w(west), nw(northwest),
// sw(southwest), ne(northeast) or se(southeast)
//
// Returns tip or direction
tip.direction = function(v) {
if (!arguments.length) return direction
direction = v == null ? v : d3.functor(v)
return tip
}
// Public: Sets or gets the offset of the tip
//
// v - Array of [x, y] offset
//
// Returns offset or
tip.offset = function(v) {
if (!arguments.length) return offset
offset = v == null ? v : d3.functor(v)
return tip
}
// Public: sets or gets the html value of the tooltip
//
// v - String value of the tip
//
// Returns html value or tip
tip.html = function(v) {
if (!arguments.length) return html
html = v == null ? v : d3.functor(v)
return tip
}
function d3_tip_direction() { return 'n' }
function d3_tip_offset() { return [0, 0] }
function d3_tip_html() { return ' ' }
var direction_callbacks = d3.map({
n: direction_n,
s: direction_s,
e: direction_e,
w: direction_w,
nw: direction_nw,
ne: direction_ne,
sw: direction_sw,
se: direction_se
}),
directions = direction_callbacks.keys()
function direction_n() {
var bbox = getScreenBBox()
return {
top: bbox.n.y - node.offsetHeight,
left: bbox.n.x - node.offsetWidth / 2
}
}
function direction_s() {
var bbox = getScreenBBox()
return {
top: bbox.s.y,
left: bbox.s.x - node.offsetWidth / 2
}
}
function direction_e() {
var bbox = getScreenBBox()
return {
top: bbox.e.y - node.offsetHeight / 2,
left: bbox.e.x
}
}
function direction_w() {
var bbox = getScreenBBox()
return {
top: bbox.w.y - node.offsetHeight / 2,
left: bbox.w.x - node.offsetWidth
}
}
function direction_nw() {
var bbox = getScreenBBox()
return {
top: bbox.nw.y - node.offsetHeight,
left: bbox.nw.x - node.offsetWidth
}
}
function direction_ne() {
var bbox = getScreenBBox()
return {
top: bbox.ne.y - node.offsetHeight,
left: bbox.ne.x
}
}
function direction_sw() {
var bbox = getScreenBBox()
return {
top: bbox.sw.y,
left: bbox.sw.x - node.offsetWidth
}
}
function direction_se() {
var bbox = getScreenBBox()
return {
top: bbox.se.y,
left: bbox.e.x
}
}
function initNode() {
var node = d3.select(document.createElement('div'))
node.style({
position: 'absolute',
opacity: 0,
pointerEvents: 'none',
boxSizing: 'border-box'
})
return node.node()
}