xtr-webgui/index.html

135 lines
4.3 KiB
HTML
Raw Normal View History

2019-11-20 02:24:39 +01:00
<html>
<head>
<title>XTR :: xicon trace route</title>
<style>
table {
border-collapse: collapse;
width: 90%;
}
td
{
border:1px solid grey;
font-size: 9pt;
}
</style>
</head>
<body>
<a href="#" onclick="javascript:doit('1');javascript:doit('2');javascript:doit('3');">execute dem all</a>
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="width: 33%; display: table-cell;">
<select name="server1" id="server1">
<option value="nas3000.xicon.eu">xicon-nas</option>
<option value="192.168.99.137:3000">xicon-nas_local</option>
<option value="199.247.22.146:3000">vultr_frankfurt01</option>
</select>
<input name="target1" id="target1" value="8.8.8.8">
<a href="#" onclick="javascript:doit('1');">doit</a> <img src="spinner.gif" id="spinner1" style="visibility: hidden;">
<div id="div1">
<table><tr><td>#empty</td><td>#empty</td><td>#empty</td></tr></table>
</div>
</div>
<div style="width: 33%; display: table-cell;">
<select name="server2" id="server2">
<option value="nas3000.xicon.eu">xicon-nas</option>
<option value="192.168.99.137:3000">xicon-nas_local</option>
<option value="199.247.22.146:3000">vultr_frankfurt01</option>
</select>
<input name="target2" id="target2" value="193.99.144.80">
<a href="#" onclick="javascript:doit('2');">doit</a> <img src="spinner.gif" id="spinner2" style="visibility: hidden;">
<div id="div2">
<table><tr><td>#empty</td><td>#empty</td><td>#empty</td></tr></table>
</div>
</div>
<div style="width: 33%; display: table-cell;">
<select name="server3" id="server3">
<option value="nas3000.xicon.eu">xicon-nas</option>
<option value="192.168.99.137:3000">xicon-nas_local</option>
<option value="199.247.22.146:3000">vultr_frankfurt01</option>
</select>
<input name="target3" id="target3" value="128.65.209.14">
<a href="#" onclick="javascript:doit('3');">doit</a> <img src="spinner.gif" id="spinner3" style="visibility: hidden;">
<div id="div3">
<table><tr><td>#empty</td><td>#empty</td><td>#empty</td><td>#empty</td></tr></table>
</div>
</div>
</div>
</div>
<script src="jquery-3.4.1.min.js"></script>
<script>
function doit(target_div) {
var str1= new Object();
var server=document.getElementById("server"+target_div).value;
var target_ip=document.getElementById("target"+target_div).value;
$.ajax(
{
type: "GET",
url: "http://"+server+"/v3/client/request/"+target_ip,
dataType: "JSON",
beforeSend: function ()
{
document.getElementById("spinner"+target_div).style.visibility="visible";
}
}).done(function( jsonResult )
{
document.getElementById("spinner"+target_div).style.visibility="hidden";
str1=JSON.parse(JSON.stringify(jsonResult));
var tbl=$("<table/>").attr("id","mytable"+target_div);
$("#div"+target_div).empty().append(tbl);
$("#mytable"+target_div).append("<tr><td><b>ip</b></td><td><b>hostname</b></td><td><b>ping</b></td><td><b>as</b></td></tr>");
for(var i=0;i<str1.length;i++)
{
var tr="<tr>";
var td1="<td>"+str1[i][0]+"</td>";
var td2="<td>"+str1[i][1]+"</td>";
var td3="<td>"+str1[i][2]+"</td>";
var td4="<td>"+str1[i][3]+"</td></tr>";
$("#mytable"+target_div).append(tr+td1+td2+td3+td4);
}
});
}
function get_servers()
{
var strServer= new Object();
$.ajax(
{
type: "GET",
url: "http://xtr-master.xicon.eu/v3/server/list/online",
dataType: "JSON",
beforeSend: function ()
{
// nothing for now
}
}).done(function( jsonServerResult )
{
strServer=JSON.parse(JSON.stringify(jsonServerResult));
var list=$("<select>").attr("name","server");
$("select[name*='server']").empty().append(list);
for(var i=0;i<strServer.length;i++)
{
//var strOption = "<option value=\"" + strServer[i][0] + ":" + strServer[i][1] + "\">" + strServer[i][0] + ":" + strServer[i][1] + "(AS" + strServer[i][3] + ")</option>";
var strOption = new Option( strServer[i][0] + ":" + strServer[i][1] + " (AS" + strServer[i][2] + ")" , strServer[i][0] + ":" + strServer[i][1]);
$(strOption).html(strServer[i][0] + ":" + strServer[i][1] + " (AS" + strServer[i][2] + ")");
$("select[name*='server']").append(strOption);
}
$("select[name='server']").append("</select>");
});
}
$(document).ready(function()
{
get_servers();
});
</script>
</body>
</html>