29 |
28 |
29 |
![](/images/flags/"
14 | source_html += elem[1][)
");
31 | $('.sourcecity').text(data['source_city']);
32 | $('.destinationcountry').html(data['destination_country']+" ![](/images/flags/"+data[)
");
33 | $('.destinationcity').text(data['destination_city']);
34 | $('.latency').text(data['latency_total']+' ms');
35 | });
36 |
37 | function hello(){
38 | console.log('whaetver');
39 | }
40 |
--------------------------------------------------------------------------------
/frontend/public/stylesheets/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font: 14px;
3 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
4 | height: 100%;
5 | min-height: 75rem;
6 | width: 100%;
7 | background-color: black;
8 | }
9 |
10 | .navbar {
11 | margin-bottom: 0px;
12 | }
13 |
14 | div#reannz-logo {
15 | float: left;
16 | margin-left: 20px;
17 | margin-top: 12px;
18 | }
19 |
20 | table#entries {
21 | display: block;
22 | height: 900px;
23 | overflow-y: scroll;
24 | }
25 |
26 | li.search {
27 | float: right;
28 | padding-top: 5px;
29 | }
30 |
31 | div#randomconnectionbar {
32 | padding: 10px;
33 | color: white;
34 | position: fixed;
35 | bottom: 335px;
36 | width: 250px;
37 | left: 10px;
38 | z-index: 99;
39 | font-size: 12px;
40 | background-color:rgba(66, 191, 244, 0.5);
41 | }
42 |
43 | div#animationbuttons {
44 | clear: both;
45 | padding-bottom: 3px;
46 | }
47 |
48 | div#randomdata {
49 | font-size: 16px;
50 | }
51 |
52 | p.randomtext {
53 | margin-top: 8px;
54 | margin-bottom: 0px;
55 | }
56 |
57 | div#statsbar {
58 | padding-right: 5px;
59 | padding-left: 5px;
60 | padding-top: 10px;
61 | color: white;
62 | position: absolute;
63 | top: 65px;
64 | right: 10px;
65 | z-index: 99;
66 | font-size: 12px;
67 | background-color:rgba(66, 191, 244, 0.5);
68 | }
69 |
70 | div#top5bar {
71 | color: white;
72 | position: fixed;
73 | bottom: 15px;
74 | z-index: 99;
75 | font-size: 12px;
76 | background-color:rgba(66, 191, 244, 0.5);
77 | }
78 |
79 | div.tables {
80 | width: 100%;
81 | display: table;
82 | table-layout: fixed;
83 | }
84 |
85 | div.child {
86 | display: table-cell;
87 | padding-bottom: 0px;
88 | }
89 |
90 | .top5_table {
91 | margin-bottom: 0px;
92 | }
93 |
94 | .top5_table>thead>tr>th {
95 | border: 0px;
96 | }
97 |
98 | .table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td{
99 | padding: 2px;
100 | text-align: center;
101 | border: 0px;
102 | }
103 |
104 | .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
105 | background-color: rgba(0, 81, 114, 0.6);
106 | border: 0px;
107 | }
108 |
109 | div.statspage {
110 | padding: 30px;
111 | }
112 |
113 | div#scale {
114 | text-align: center;
115 | padding: 5px;
116 | padding-right: 8px;
117 | padding-left: 8px;
118 | }
119 |
120 | div#gradient {
121 | width: 100%;
122 | height: 10px;
123 | background: red; /* For browsers that do not support gradients */
124 | background: -webkit-linear-gradient(-90deg, red, yellow, green); /* For Safari 5.1 to 6.0 */
125 | background: -o-linear-gradient(-90deg, red, yellow, green); /* For Opera 11.1 to 12.0 */
126 | background: -moz-linear-gradient(-90deg, red, yellow, green); /* For Firefox 3.6 to 15 */
127 | background: linear-gradient(-90deg, red, yellow, green); /* Standard syntax */
128 | }
129 |
130 | div#left {
131 | float: left;
132 | display: inline;
133 | }
134 |
135 | div#right {
136 | float: right;
137 | display: inline;
138 | }
139 |
140 | div.information {
141 | text-align: center;
142 | }
143 |
144 | div.connectionnumber {
145 | font-size: 22px;
146 | text-align: center;
147 | }
148 |
149 | div#map {
150 | /*background-color: black;*/
151 | position: relative;
152 | height: 100%;
153 | width: 100%;
154 | z-index: 0;
155 | cursor: crosshair;
156 | }
157 |
158 | div#stats {
159 | height: 450px;
160 | width: 100%;
161 | }
162 |
163 | div#tooltip {
164 | position: absolute;
165 | padding: 4px;
166 | background-color:rgba(106, 141, 250, 0.8);
167 | color: white;
168 | max-width: 400px;
169 | font-size: 14px;
170 | z-index: 99;
171 | pointer-events: none;
172 | }
173 |
174 |
--------------------------------------------------------------------------------
/frontend/routes/index.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var router = express.Router();
3 | var zmq = require('zmq'), client = zmq.socket('sub');
4 | var stats = require('./stats');
5 | var app = express();
6 |
7 | var server = require('http').Server(app);
8 | server.listen(3001);
9 | var io = require('socket.io').listen(server);
10 |
11 | //Sub on ZMQ sock
12 | client.bindSync('tcp://*:6080');
13 | console.log('Subscribed bound to port 6080');
14 |
15 | /* GET home page. */
16 | router.get('/', function(req, res, next) {
17 | res.render('index', {
18 | title: 'Latency viewer'
19 | });
20 | });
21 |
22 | client.on('error', function (err) {
23 | console.log('Error ' + err)
24 | })
25 |
26 | // Subsribe on the latency channel
27 | client.subscribe('');
28 |
29 | // Connection counter (5 sec resolution)
30 | var counters = [];
31 | var counter = 0;
32 | var tick = 0;
33 |
34 | // Send stats to map page every 5 seconds
35 | setInterval(function() {
36 | counters.push(counter);
37 | counter = 0;
38 | if (counters.length == 12) {
39 | counters.shift();
40 | }
41 | var sum = counters.reduce(function(a, b) { return a + b; }, 0);
42 | io.emit('counter', {sum: sum});
43 | io.emit('mapstats', stats.getTop5Stats());
44 | }, 5000)
45 |
46 |
47 | var previous_source_long;
48 | var previous_destination_long;
49 |
50 | function sendRandomData(m) {
51 | io.emit('randomdata', {
52 | source_country: m['source_country'],
53 | source_countrycode: m['source_countrycode'],
54 | source_city: m['source_city'],
55 | destination_country: m['destination_country'],
56 | destination_countrycode: m['destination_countrycode'],
57 | destination_city: m['destination_city'],
58 | latency_total: m['latency_total']
59 | });
60 | }
61 |
62 | var lastTime = 0
63 | // This is the subscriber part
64 | client.on('message', function(message){
65 | var m = JSON.parse(message);
66 | //console.log("Message: " + m['destination_lat']);
67 |
68 | var source_location_string = m['source_city'] + ' (' + m['source_country'] +')';
69 | var destination_location_string = m['destination_city'] + ' (' + m['destination_country'] +')';
70 |
71 | // Drop records that we did not get geolocation for
72 | if (m['source_country'] == '-' || m['destination_country'] == '-') return;
73 |
74 | // Filter out repeated measurements from display
75 | if (m['source_long'] != previous_source_long || m['destination_long'] != previous_destination_long){
76 |
77 | // Send measurement for the map
78 | io.emit('latency', {
79 | destination_lat: m['destination_lat'],
80 | destination_long: m['destination_long'],
81 | destination_country: m['destination_country'],
82 | destination_city: m['destination_city'],
83 | destination_proxy_type: m['destination_proxy_type'],
84 | destination_as: m['destination_as'],
85 | destination_asn: m['destination_asn'],
86 | source_lat: m['source_lat'],
87 | source_long: m['source_long'],
88 | source_country: m['source_country'],
89 | source_city: m['source_city'],
90 | source_proxy_type: m['source_proxy_type'],
91 | source_as: m['source_as'],
92 | source_asn: m['source_asn'],
93 | latency: m['latency_total']
94 | });
95 |
96 | // If more than 5 seconds passed, we catch one measurement and send it to the random data
97 | var timeDiff = (new Date() - lastTime)/1000;
98 | if (lastTime == 0 || (Math.round(timeDiff%60) > 5)){
99 | sendRandomData(m);
100 | lastTime = new Date();
101 | }
102 | previous_source_long = m['source_long'];
103 | previous_destination_long = m['destination_long'];
104 | }
105 |
106 | counter++;
107 | });
108 |
109 | module.exports = router;
110 |
--------------------------------------------------------------------------------
/frontend/routes/stats.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var router = express.Router();
3 | const Influx = require('influx');
4 |
5 | const influx = new Influx.InfluxDB({
6 | host: process.env.INFLUX_HOST,
7 | database: 'rtt',
8 | schema: [
9 | {
10 | measurement: 'latency',
11 | fields: {
12 | label: Influx.FieldType.STRING,
13 | total: Influx.FieldType.INTEGER
14 | },
15 | tags: [
16 | 'destination_as',
17 | 'destination_asn',
18 | 'destination_city',
19 | 'destination_country',
20 | 'destination_countrycode',
21 | 'destination_lat',
22 | 'destination_long',
23 | 'source_as',
24 | 'source_asn',
25 | 'source_city',
26 | 'source_country',
27 | 'source_countrycode',
28 | 'source_lat',
29 | 'source_long',
30 | ]
31 | }
32 | ]
33 | })
34 |
35 | var stats_destination_countries = {};
36 | var stats_destination_cities = {};
37 | var stats_source_cities = {};
38 | var stats_destination_asn = {};
39 | var stats_source_countries = {};
40 | var stats_source_asn = {};
41 |
42 | // This here repeats and queries stats every 20 second
43 | setInterval(function(){
44 |
45 | influx.query("select min(total), mean(total) as mean, max(total) \
46 | from latency \
47 | where destination_country != '-' \
48 | AND time >= now() - 10m \
49 | group by destination_country, destination_countrycode")
50 | .then(results => {
51 | stats_destination_countries = {};
52 | results.forEach(function(row) {
53 | stats_destination_countries[row['destination_country']] = row;
54 | stats_destination_countries[row['destination_country']]['countrycode'] = row['destination_countrycode'];
55 | });
56 | });
57 |
58 | influx.query("select min(total), mean(total) as mean, max(total) \
59 | from latency \
60 | where source_country != '-' \
61 | AND time >= now() - 10m \
62 | group by source_country, source_countrycode")
63 | .then(results => {
64 | stats_source_countries = {};
65 | results.forEach(function(row) {
66 | stats_source_countries[row['source_country']] = row;
67 | stats_source_countries[row['source_country']]['countrycode'] = row['source_countrycode'];
68 | });
69 | });
70 |
71 | influx.query("select min(total), mean(total) as mean, max(total) \
72 | from latency \
73 | where source_city != '-' \
74 | AND time >= now() - 10m \
75 | group by source_city, source_countrycode")
76 | .then(results => {
77 | stats_source_cities = {};
78 | results.forEach(function(row) {
79 | stats_source_cities[row['source_city']] = row;
80 | stats_source_cities[row['source_city']]['countrycode'] = row['source_countrycode'];
81 | });
82 | });
83 |
84 | influx.query("select min(total), mean(total) as mean, max(total) \
85 | from latency \
86 | where destination_city != '-' \
87 | AND time >= now() - 10m \
88 | group by destination_city, destination_countrycode")
89 | .then(results => {
90 | stats_destination_cities = {};
91 | results.forEach(function(row) {
92 | stats_destination_cities[row['destination_city']] = row;
93 | stats_destination_cities[row['destination_city']]['countrycode'] = row['destination_countrycode'];
94 | });
95 | });
96 |
97 | influx.query("select min(total), mean(total) as mean, max(total) \
98 | from latency \
99 | where destination_as != '-' \
100 | AND time >= now() - 10m \
101 | group by destination_asn, destination_as")
102 | .then(results => {
103 | stats_destination_asn = {};
104 | results.forEach(function(row) {
105 | stats_destination_asn[row['destination_asn']] = row;
106 | stats_destination_asn[row['destination_asn']]['name'] = row['destination_as'];
107 | });
108 | });
109 |
110 | influx.query("select min(total), mean(total) as mean, max(total) \
111 | from latency \
112 | where source_as != '-' \
113 | AND time >= now() - 10m \
114 | group by source_asn, source_as")
115 | .then(results => {
116 | stats_source_asn = {};
117 | results.forEach(function(row) {
118 | stats_source_asn[row['source_asn']] = row;
119 | stats_source_asn[row['source_asn']]['name'] = row['source_as'];
120 | });
121 | });
122 |
123 | //console.log(stats_destination_countries);
124 |
125 | }, 20000);
126 |
127 |
128 | function getTop5Stats () {
129 |
130 | var top5_source = Object.keys(stats_source_cities).map(function(key) {
131 | return [key, stats_source_cities[key]];
132 | });
133 |
134 | var top5_dest = Object.keys(stats_destination_countries).map(function(key) {
135 | return [key, stats_destination_countries[key]];
136 | });
137 |
138 | var top5_source_sorted = top5_source.sort(function(a, b) { return a[1]['mean'] > b[1]['mean'] ? 1 : -1; }).slice(0, 5);
139 | var top5_destination_slow = top5_dest.sort(function(a, b) { return a[1]['mean'] < b[1]['mean'] ? 1 : -1; }).slice(0, 5);
140 | var top5_destination_fast = top5_dest.sort(function(a, b) { return a[1]['mean'] > b[1]['mean'] ? 1 : -1; }).slice(0, 5);
141 |
142 | return [top5_source_sorted, top5_destination_fast, top5_destination_slow];
143 | }
144 |
145 | router.get('/', function(req, res, next) {
146 | res.render('stats', {
147 | title: 'Stats',
148 | stats_destination_cities: stats_destination_cities,
149 | stats_destination_countries: stats_destination_countries,
150 | stats_destination_asn: stats_destination_asn,
151 | stats_source_cities: stats_source_cities,
152 | stats_source_countries: stats_source_countries,
153 | stats_source_asn: stats_source_asn
154 | });
155 | });
156 |
157 | module.exports = {
158 | router:router,
159 | getTop5Stats:getTop5Stats
160 | }
161 |
162 |
--------------------------------------------------------------------------------
/frontend/src/map-utils.js:
--------------------------------------------------------------------------------
1 | import TWEEN from 'tween.js';
2 |
3 | let viewportTween;
4 |
5 | function animate() {
6 | TWEEN.update();
7 | requestAnimationFrame(animate);
8 | }
9 |
10 | // get a linear tween
11 | function ease(fromState, toState, duration) {
12 | return new TWEEN.Tween(fromState).to(toState, duration);
13 | }
14 |
15 | // fly to new viewport
16 | function fly(fromViewport, toViewport, duration, onUpdate) {
17 | const fromState = {};
18 | const nanState = {};
19 | const toState = {};
20 |
21 | Object.keys(toViewport).forEach(key => {
22 | const v0 = fromViewport[key];
23 | const v1 = toViewport[key];
24 | if (isNaN(v0) || isNaN(v1)) {
25 | nanState[key] = v1;
26 | } else {
27 | fromState[key] = v0;
28 | toState[key] = v1;
29 | }
30 | });
31 |
32 | if (viewportTween) {
33 | TWEEN.remove(viewportTween);
34 | }
35 |
36 | viewportTween = new TWEEN.Tween(fromState)
37 | .to(toState, duration)
38 | .onUpdate(function() {
39 | onUpdate({...this, ...nanState});
40 | });
41 |
42 | return viewportTween;
43 | }
44 |
45 | export default {
46 | init: animate,
47 | Easing: TWEEN.Easing,
48 | ease,
49 | fly
50 | };
--------------------------------------------------------------------------------
/frontend/src/react.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable func-style */
2 | /* eslint-disable no-console */
3 | /* global console, process */
4 | /* global document, window */
5 | import 'babel-polyfill';
6 |
7 | import React from 'react';
8 | import ReactDOM from 'react-dom';
9 | import {createStore} from 'redux';
10 | import {Provider, connect} from 'react-redux';
11 | import autobind from 'autobind-decorator';
12 |
13 | import MapboxGLMap from 'react-map-gl';
14 |
15 | import * as request from 'd3-request';
16 | import DeckGL from 'deck.gl/react';
17 | import {ArcLayer} from 'deck.gl';
18 | import ViewportAnimation from './map-utils';
19 |
20 | // ---- Default Settings ---- //
21 | /* eslint-disable no-process-env */
22 | const MAPBOX_ACCESS_TOKEN = process.env.MAPBOX_TOKEN;
23 |
24 | const INITIAL_STATE = {
25 | mapViewState: {
26 | latitude: -1.32000000000005,
27 | longitude: 45.486055552412332,
28 | zoom: 1.7195968941767825,
29 | pitch: 26.57984356290917,
30 | bearing: -1.32000000000005
31 | },
32 | points: null,
33 | arcs: null,
34 | arcStrokeWidth: 3
35 | };
36 |
37 | const GOTO_NZ = {
38 | latitude: -43.97889477772071,
39 | longitude: 171.3568897450038,
40 | zoom: 1.7195968941767825,
41 | pitch: 26.57984356290917,
42 | bearing: -1.32000000000005
43 | };
44 |
45 | const LOOKAT_NZ = {
46 | latitude: -43.97889477772071,
47 | longitude: 171.3568897450038,
48 | zoom: 4.7195968941767825,
49 | pitch: 43.87968924799148,
50 | bearing: -9.688794326241123
51 | };
52 |
53 | const GOTO_EUROPE = {
54 | latitude: 49.97889477772071,
55 | longitude: 12.3568897450038,
56 | zoom: 2.7195968941767825,
57 | pitch: 2.57984356290917,
58 | bearing: -3.32000000000005
59 | };
60 |
61 | const GOTO_US = {
62 | latitude: 40.97889477772071,
63 | longitude: -98.3568897450038,
64 | zoom: 2.7195968941767825,
65 | pitch: 12.57984356290917,
66 | bearing: -15.32000000000005
67 | };
68 |
69 |
70 |
71 | // ---- Action ---- //
72 | function addArc(points) {
73 | return {type: 'ADD_NEW_ARC', points};
74 | }
75 |
76 | function removeArcs() {
77 | return {type: 'REMOVE_ARCS'};
78 | }
79 |
80 | function updateMap(mapViewState) {
81 | //console.log(mapViewState);
82 | return {type: 'UPDATE_MAP', mapViewState};
83 | }
84 |
85 | function loadPoints(points) {
86 | return {type: 'LOAD_POINTS', points};
87 | }
88 |
89 | // Swaps data props when clicked to trigger WebGLBuffer updates
90 | function swapData() {
91 | return {type: 'SWAP_DATA'};
92 | }
93 |
94 | // ---- Reducer ---- //
95 | function reducer(state = INITIAL_STATE, action) {
96 | switch (action.type) {
97 | case 'ADD_NEW_ARC': {
98 | const arcs = action.points;
99 | const points = [];
100 | arcs.forEach(function(elem){
101 | points.push({position: [elem['targetPosition'][0], elem['targetPosition'][1]]});
102 | })
103 | return {...state, arcs: arcs, points: points};
104 | }
105 | case 'REMOVE_ARCS':
106 | return {...state, arcs: []};
107 | case 'UPDATE_MAP':
108 | return {...state, mapViewState: action.mapViewState};
109 | default:
110 | return state;
111 | }
112 | }
113 |
114 | // redux states -> react props
115 | function mapStateToProps(state) {
116 | return {
117 | mapViewState: state.mapViewState,
118 | points: state.points,
119 | arcs: state.arcs,
120 | arcStrokeWidth: 4
121 | };
122 | }
123 |
124 | const MainLayer = props =>
125 | new ArcLayer({
126 | ...props,
127 | id: props.id || 'arcLayer',
128 | data: props.arcs,
129 | strokeWidth: props.arcStrokeWidth,
130 | pickable: true,
131 | onHover: props.onHover
132 | });
133 |
134 | // ---- View ---- //
135 | class MapApp extends React.Component {
136 | constructor(props) {
137 | super(props);
138 | this.state = {
139 | hoveredItem: null
140 | };
141 | }
142 |
143 | componentWillMount() {
144 | this._handleResize();
145 | window.addEventListener('resize', this._handleResize);
146 | }
147 |
148 | componentWillUnmount() {
149 | window.removeEventListener('resize', this._handleResize);
150 | }
151 |
152 | @autobind _handleResize() {
153 | this.setState({width: window.innerWidth, height: window.innerHeight});
154 | }
155 |
156 | @autobind _onHover(info) {
157 | console.log('hover', info);
158 | this.setState({hoveredItem: info});
159 | }
160 |
161 | @autobind _handleViewportChanged(mapViewState) {
162 | if (mapViewState.pitch > 60) {
163 | mapViewState.pitch = 60;
164 | }
165 | this.props.dispatch(updateMap(mapViewState));
166 | }
167 |
168 | @autobind _onWebGLInitialized(gl) {
169 | gl.enable(gl.DEPTH_TEST);
170 | gl.depthFunc(gl.LEQUAL);
171 | }
172 |
173 | _renderLayers() {
174 | const props = {
175 | ...this.props,
176 | ...this.state,
177 | onHover: this._onHover
178 | };
179 | const layers = [];
180 | layers.push(MainLayer(props));
181 |
182 | return layers;
183 | }
184 |
185 | _onToggleLayer(layerName, layer) {
186 | const activeLayers = {...this.state.activeLayers};
187 | activeLayers[layerName] = !activeLayers[layerName];
188 | this.setState({activeLayers});
189 | }
190 |
191 | _renderOverlay() {
192 | const {arcs, points, mapViewState} = this.props;
193 | const {width, height} = this.state;
194 |
195 | // wait until data is ready before rendering
196 | if (!arcs) {
197 | return [];
198 | }
199 |
200 | return (
201 |