Developing lightweight computation at the DSG edge

neighbours_j.htm 5.34 KB
Newer Older
p4u's avatar
p4u committed
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
<%+header%>
<script type="text/javascript">//<![CDATA[

	var displayExtraInfo = function ( id ) {

		document.getElementById('extra-info').innerHTML = document.getElementById(id).innerHTML;
	}
	XHR.poll(5, '/cgi-bin/bmx6-info', { '$neighbours': '' },
		function(x, st)
		{
			var originators = st.neighbours[0].originators;
			var descriptions = st.neighbours[1].descriptions;

			var tb = document.getElementById('descriptions_table');

			if ( originators.length != descriptions.length )
			{
				var tr = tb.insertRow(-1);
				tr.className = 'cbi-section-table-row';
				var td = tr.insertCell(-1);
				td.colSpan = 7;
				td.innerHTML = '<em><br /><%:Some problem with JSON: lenght of originators and descriptions different. %></em>';
				td.innerHTML += '<em><%: Please perform a manually cache flush from a terminal: bmx6 -c --flushAll %></em>'
				return 1;
			}
26

p4u's avatar
p4u committed
27
28
29
30
31
32
33
34
35
36
37
38
39
			if ( originators && descriptions && tb)
			{
				/* clear all rows */
				while( tb.rows.length > 1 )
					tb.deleteRow(1);

				for( var i = 0; i < descriptions.length; i++ )
				{
					var tr = tb.insertRow(-1);
					var nodename =  descriptions[i].DESC_ADV.globalId.replace(/\.[^\.]+$/,"");
					tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
					tr.insertCell(-1).innerHTML = '<a onclick="displayExtraInfo(\'ip-'+i+'\')"><img src=\"/luci-static/resources/cbi/help.gif\" /></a>';
					tr.insertCell(-1).innerHTML = nodename;
40

p4u's avatar
p4u committed
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
					var extensions = descriptions[i].DESC_ADV.extensions;

					//Looking for the extensions
					var hna6 = [];
					var tun4in6 = [];
					var tun6 = [];
					for( var e = 0; e < extensions.length; e++)
					{
						if( extensions[e].HNA6_EXTENSION )
						{
							hna6 = extensions[e].HNA6_EXTENSION;
						}
						if ( extensions[e].TUN4IN6_NET_EXTENSION )
						{
							tun4in6 = extensions[e].TUN4IN6_NET_EXTENSION;
						}
					}
58

p4u's avatar
p4u committed
59
60
61
62
63
64
65
					var gateways = '<ul>';
					for ( var t = 0; t < tun4in6.length; t++)
					{
						gateways += "<li>"+tun4in6[t].network+'/'+tun4in6[t].networklen + ' | ';
						gateways += tun4in6[t].bandwidth+'</li>';
					}
					gateways += '</ul>';
66

p4u's avatar
p4u committed
67
68
69
70
71
72
73
74
75
76
77
78
79
					//Adding HNAs with prefix=128 as main address
					var ipstxt = '';
					var address;
					var first = 1;
					var ipstxt_hidden = '<ul>';
					var hna6list = '<ul>';

					for( var e = 0; e < hna6.length; e++ )
					{
						address = hna6[e].address;
						prefix = hna6[e].prefixlen;
						if ( prefix == '128' )
							{
80
							if (first)
p4u's avatar
p4u committed
81
82
83
84
								{
								ipstxt += address;
								ipstxt_hidden += '<li><a href="http://['+address+']" >'+address+"</a></li>";
								first = 0;
85
								}
p4u's avatar
p4u committed
86
							else 	{
87
								ipstxt_hidden += '<li><a href="http://['+address+']" >'+address+"</a></li>";
p4u's avatar
p4u committed
88
89
90
								}
							}
						else	{
91
							hna6list += '<li>'+address+'/'+prefix+'</li>';
p4u's avatar
p4u committed
92
93
94
95
96
97
							}
					}
					hna6list += '</ul>';
					ipstxt_hidden += '</ul>';

					tr.insertCell(-1).innerHTML = ipstxt;
98

p4u's avatar
p4u committed
99
100
101
102
103
104
					tr.insertCell(-1).innerHTML = originators[i].viaDev;
					tr.insertCell(-1).innerHTML = originators[i].metric;
					tr.insertCell(-1).innerHTML = originators[i].lastDesc;
					tr.insertCell(-1).innerHTML = originators[i].lastRef;
					tr.insertCell(-1).innerHTML = originators[i].blocked;
					//tr.onclick = displayExtraInfo("ip-"+i);
105

p4u's avatar
p4u committed
106
107
108
109
110
					extrainfo = '<div id="ip-'+ i +'" class="hideme">';
					extrainfo += "<div class='inforow'><br /><br /><h4>"+nodename+'</h4></div>\n';
					extrainfo += "<div class='inforow'><h5>Available IPs</h5>\n<p>" + ipstxt_hidden + "</p></div>\n";
					extrainfo += "<div class='inforow'><h5>Gateways announced</h5>\n<p>" + gateways + "</p></div>\n";
					extrainfo += "<div class='inforow'><h5>Networks announced</h5>\n<p>" + hna6list + "</p></div>\n";
111

p4u's avatar
p4u committed
112
113
114
					extrainfo += "\n</div>";

					tr.insertCell(-1).innerHTML = extrainfo;
115

p4u's avatar
p4u committed
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
				}

				if( tb.rows.length == 1 )
				{
					var tr = tb.insertRow(-1);
						tr.className = 'cbi-section-table-row';

					var td = tr.insertCell(-1);
						td.colSpan = 7;
						td.innerHTML = '<em><br /><%:There are no nodes available.%></em>';
				}
			}
		}
	);
//]]></script>

<style>

	div.hideme{
		display: none;
	}
137

p4u's avatar
p4u committed
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
	div.info{
		background: #FFF;
		border: solid 1px;
		height: 80px;
		display: block;
		overflow: auto;
	}

	div.inforow{
		text-align:left;
		display:inline-block;
		width:20%;
		margin:5px;
		vertical-align:top;

	}

#extra-info ul { list-style: none outside none; margin-left: 0em; }

</style>
<div class="cbi-map">

<h2>Originators</h2>
<div class="cbi-map-descr"></div>
<div id="extra-info" class="info">
	<br />
	Click to the icon <img src="/luci-static/resources/cbi/help.gif" /> to see individual node information
</div>
<fieldset class="cbi-section">
	<legend><%:Mesh nodes%></legend>
	<table class="cbi-section-table" id="descriptions_table">
		<tr class="cbi-section-table-titles">
			<th class="cbi-section-table-cell"></th>
			<th class="cbi-section-table-cell"><%:Hostname%></th>
			<th class="cbi-section-table-cell"><%:Primary IP%></th>
			<th class="cbi-section-table-cell"><%:Via Device%></th>
			<th class="cbi-section-table-cell"><%:Metric%></th>
			<th class="cbi-section-table-cell"><%:Last Desc%></th>
			<th class="cbi-section-table-cell"><%:Last Ref%></th>
			<th class="cbi-section-table-cell"><%:Blocked%></th>
		</tr>
		<tr class="cbi-section-table-row">
			<td colspan="8"><em><br /><%:Collecting data...%></em></td>
		</tr>
	</table>
</fieldset>

</div>
<a href="<%=link_non_js%>">Go to non JavaScript view</a>


<%+footer%>