gridbug/gridbug.html at main · jasonacox/gridbug · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

<html>
	<head>
		<title>GridBug Console</title>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
		<style>
		body {
			font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
        	font-size: 14px;
     	}
		.ts {
			font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
        	font-size: 8px;
		}
		#uptime {
			height: 20px;
			position: fixed;
			bottom: 0%;
			left: 20;
		}
		#cy {
			position: absolute;
			left: 20;
			top: 50;
			bottom: 50;
			right: 20;
			z-index: 999;
		  }
		  </style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js" integrity="sha512-gEWKnYYa1/1c3jOuT9PR7NxiVI1bwn02DeJGsl+lMVQ1fWMNvtjkjxIApTdbJ/wcDjQmbf+McWahXwipdC9bGA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script>
		console.log("script")

		// Get Version
		function showversion() {
			var pwurl = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/stats";
			$.getJSON(pwurl, function(data) {
				var text = `GridBug Console [v${data.GridBug}] - ${data.node_id}`;
				$(".title").html(text);
			});
			// setTimeout(showversion, 10000);
		}

		// Update Time
			function updatetime() {
			var pwurl = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/time";
			$.getJSON(pwurl, function(data) {
				var text = `Time (UTC): ${data.utc} - Uptime: ${data.uptime}`;
				$(".ts").html(text);
			});
			// setTimeout(updatetime, 5000);
		}

		// Update Graph
		function update_graph() {
			// console.log("update_graph");
			var gburl = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/graph";
			console.log(gburl);
			$.getJSON(gburl, function (bugs) {
				// console.log("graph loaded");
				var cy = cytoscape({

					container: document.getElementById('cy'), // container to render

					elements: bugs,

					style: [ // the stylesheet for the graph
						{
							selector: 'node',
							style: {
							'background-color': '#666',
							'label': 'data(id)'
							}
						},
						{
							selector: 'edge',
							style: {
							'width': 3,
							"line-color": "data(color)",
							'target-arrow-color': "data(color)",
							'target-arrow-shape': 'triangle',
							'curve-style': 'bezier'
							}
						}
					],

					layout: {
						name: 'concentric',
						concentric: function(n){ return n.id() === 'j' ? 200 : 0; },
						levelWidth: function(nodes){ return 100; },
						minNodeSpacing: 100
					}

				});
			});
		}

		$(document).ready(function() {
			showversion();
			update_graph();

			// Reload Graph every 5s
			setInterval(function() {
				update_graph();
				updatetime();
			}, 5000);
		});

	</script>
</head>
	<body>
	<h1 class="title">GridBug Console</h1>
	<div id="cy"></div>
	<div id="uptime"><p class="ts">Time:</p></div>
	</body>
</html>