Commit 9adfd594 authored by Stauros Kroustouris's avatar Stauros Kroustouris

initial

parents
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`
)
File added
#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;
}
/* 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); }
}
// 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()
}
function getSVGNode(el) {
el = el.node()
if(el.tagName.toLowerCase() == 'svg')
return el
return el.ownerSVGElement
}
// Private - gets the screen coordinates of a shape
//
// Given a shape on the screen, will return an SVGPoint for the directions
// n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
// sw(southwest).
//
// +-+-+
// | |
// + +
// | |
// +-+-+
//
// Returns an Object {n, s, e, w, nw, sw, ne, se}
function getScreenBBox() {
var targetel = target || d3.event.target,
bbox = {},
matrix = targetel.getScreenCTM(),
tbbox = targetel.getBBox(),
width = tbbox.width,
height = tbbox.height,
x = tbbox.x,
y = tbbox.y,
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
point.x = x + scrollLeft
point.y = y + scrollTop
bbox.nw = point.matrixTransform(matrix)
point.x += width
bbox.ne = point.matrixTransform(matrix)
point.y += height
bbox.se = point.matrixTransform(matrix)
point.x -= width
bbox.sw = point.matrixTransform(matrix)
point.y -= height / 2
bbox.w = point.matrixTransform(matrix)
point.x += width
bbox.e = point.matrixTransform(matrix)
point.x -= width / 2
point.y -= height / 2
bbox.n = point.matrixTransform(matrix)
point.y += height
bbox.s = point.matrixTransform(matrix)
return bbox
}
return tip
};
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
$(function(){
var networkLoadDiv = $('#network-load');
if (networkLoadDiv.length) {
var initialized = false;
function updateChart(max3) {
for (var i=0; i < max3.length; i++) {
if (initialized) {
var chart = $('#container-network .gauge' + i);
var point = chart.series[0].points[0];
point.update(parseFloat(max3[i].load.toFixed(1)))
} else {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: max3[i].name,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',