Commit ba9e08ab authored by Luca Lamorte's avatar Luca Lamorte

Improved configuration

parent fa5616ed
......@@ -11,7 +11,7 @@ RUN apt-get install -y apt-utils
RUN apt-get -y install python3-pip
RUN apt-get -y install python-pip
RUN apt-get -y install supervisor
RUN apt-get -y install tcpdump
ADD . /testing_tool_gui
......@@ -23,15 +23,15 @@ ENV PATH="/testing_tool_gui:$PATH"
WORKDIR /testing_tool_gui
RUN pip install --upgrade pip
#py3 requirements
RUN pip3 install -r requirements.txt
## API PORT
EXPOSE 8080 8080
# launch processes
CMD supervisord -c supervisor.conf
CMD supervisord --configuration supervisor.conf
#sudo -E docker run -i --sig-proxy=true --env AMQP_EXCHANGE=default --env AMQP_URL=amqp://u1:u1@10.41.7.222/demo --privileged coap_server
\ No newline at end of file
# Developer Console
This project helps F-Interop developer to easily integrate and test
their components into the orchestrator and the event bus
# Install locally
the application is a written in Pyhton3. It uses:
- Flask : to build the Rest Api
- Pika : to communicate with the event bus
- SocketIO: used as WebSocket library to communcate with the web app
- JQUERY & BOOTSTRAP to render the Web Part
In order to launch it locally you follow these steps:
```bash
pip3 install -r requirements.txt
python3 -m python3 -m testing_tool_gui.gui
```
or launch it using the script gui.sh in the root directory
## Docker build
A dockerfile is available to lunch the gui as docker image.
- To build use the script build.sh
- To execute it use the script start-docker.sh
#!/usr/bin/env bash
NAME="fi-dev-gui"
VERSION="0.2"
docker build -t $NAME:$VERSION --rm .
docker tag $NAME:$VERSION $NAME
\ No newline at end of file
#!/usr/bin/env bash
sudo docker run \
--env AMQP_URL=$AMQP_URL \
--env AMQP_EXCHANGE=$AMQP_EXCHANGE \
--rm --privileged=true --sysctl net.ipv6.conf.all.disable_ipv6=0 \
--name="fi-dev-gui-session" \
-p 8080:8080 \
fi-dev-gui:latest \
supervisord --nodaemon --configuration supervisor.conf
......@@ -24,8 +24,8 @@ stopsignal=INT
stopasgroup=true
loglevel=debug
redirect_stderr=true
stdout_logfile = /var/log/gui-stdout.log
stdout_logfile_maxbytes = 10MB
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stdout_logfile_backups = 5
{"url": "amqp://luca:luca@10.41.7.221/session1", "exchange": "default", "component": "gui_tt", "connected": false, "orchestrator": "http://193.190.127.250/", "version": "0.0.1"}
\ No newline at end of file
{"component": "gui_tt", "url": "amqp://f-interop:Cowabunga@finterop-mq.noc.onelab.eu:443/3a1a9839-fe85-4038-aa8e-a48f3821c3d5", "orchestrator": "http://193.190.127.250/", "connected": false, "exchange": "default", "version": "0.0.1"}
\ No newline at end of file
......@@ -287,7 +287,12 @@ function change_cfg(){
$('#amqp_icon').removeClass("glyphicon-ok").addClass("glyphicon-remove");
$('#amqp_status').text("Sniffer OFF").css('color', 'grey');
console.log("send configuration to server")
socket.emit('change_config', { 'url' : $("#amqp_url").val(),
var amqp_url = "amqp://" + $("#amqp_user").val() + ":"+ $("#amqp_password").val() +
"@" + $("#amqp_server").val() + "/" + $("#amqp_session").val()
console.log(amqp_url)
socket.emit('change_config', { 'url' : amqp_url,
"exchange": $("#amqp_exchange").val(),
"orchestrator": $("#orcherstrator_url").val()});
}
......@@ -349,7 +354,18 @@ function show_amqp_message(message){
function read_configuration(cfg){
configuration = cfg
$("#amqp_url").val(cfg["url"])
//$("#amqp_url").val(cfg["url"])
var url = cfg["url"];
url = url.replace("amqp://", "")
var user_pwd = url.split("@")[0].split(":")
var server_session = url.split("@")[1].split("/")
$("#amqp_user").val(user_pwd[0])
$("#amqp_password").val(user_pwd[1])
$("#amqp_server").val(server_session[0])
$("#amqp_session").val(server_session[1])
$("#amqp_exchange").val(cfg["exchange"])
$("#orcherstrator_url").val(cfg["orchestrator"])
if (cfg["connected"] ){
......
......@@ -49,6 +49,11 @@
/*}*/
#alerts {
box-sizing: border-box;
padding: 8px;
}
.amqp_msg{
padding-left: 2%;
......
......@@ -13,10 +13,27 @@
<div class="container" id="report"> </div>
<script>
function show_packet(pkt){
alert(pkt)
var list_packets
function show_packet_details(id, token){
console.log(token)
var output = JSON.stringify(list_packets[id]["_source"]["layers"]["coap"]["coap.payload"])
output = output.replace(token, "<strong style='color:red'>"+token+"</strong>");
console.log(output)
var show_form = document.getElementById('show-pkt-detail')
show_form .classList.remove("hide");
show_form.innerHTML = output
document.getElementById('close-detail').classList.remove("hide");
}
function closeDetail(){
document.getElementById('show-pkt-detail').classList.add("hide")
document.getElementById('close-detail').classList.add("hide")
}
// Loads a JSON file
function loadJSON(path, success, error)
{
......@@ -27,7 +44,6 @@
if (xhr.status === 200) {
if (success)
success(JSON.parse(xhr.responseText));
//success(xhr.responseText)
} else {
if (error)
error(xhr);
......@@ -40,8 +56,8 @@
}
// Loading JSON
//loadJSON('/demo_json',
loadJSON('/verdict/json',
loadJSON('/demo_json',
//loadJSON('/verdict/json',
function(verdict) {
......@@ -57,8 +73,8 @@
output += "<a href='#'><img class='media-object' src='{{ url_for('static', filename='spy-1.png')}}' alt='...'> </a></div>"
output += "<div class='media-body'>"
output += "<h1 >Privacy Report</h1>";
output += "<h3 class='media-heading'>Protocols under investigation: <strong style='color:red;'>"+verdict.protocols+"</strong></h3>"
output += " This conversation is <strong class='"+verdict.status+"'>" + verdict.status +" </strong> to privacy issue"
output += "<h3 class='media-heading'>Protocols under investigation: <strong style='color:green;'>"+verdict.protocols+"</strong></h3>"
output += " The conversation [ "+verdict.num_packets+" packets ] is <strong class='"+verdict.status+"'>" + verdict.status +" </strong> to privacy issue"
output += "<div> <strong>Created</strong> "+dateString +"</div>"
output += "<div> <strong>Session:</strong>: "+verdict.session_id +"</div></div>"
......@@ -68,11 +84,14 @@
output += "<div class='progress'>" +
"<div class='progress-bar progress-bar-warning progress-bar-striped' style='width: 100%'" +
"role='progressbar' aria-valuemax='100'> Analyzed "+ verdict.byte_exchanged + " bytes - Conversation size</div>" +
"</div></div>"
"</div>"
output += "<div> "+verdict.testing_tool + " v."+verdict.version+"</div></div>"
output += "<button type='button' id='close-detail' class='btn btn-default hide pull-right' onclick='closeDetail()'>Close Payload Details</button>"
output += "<div class='jumbotron hide' id='show-pkt-detail'></div>"
var conversations = verdict.conversation;
var packets = verdict.packets;
list_packets = verdict.packets;
for (var c=0; c<conversations.length; c++) {
......@@ -103,7 +122,7 @@
"<td>CoAP</td>" +
"<td>" + conversations[c].anomalies[a].detected_token + "</td>" +
"<td class='"+color_tag+"'>" + conversations[c].anomalies[a].privacy_tag + "</td>"+
"<td> <a href='#' onclick='show_packet("+conversations[c].anomalies[a].pkt_id+")'>Show</a></td></tr>";
"<td> <a href='#' onclick='show_packet_details("+conversations[c].anomalies[a].pkt_id+", \""+ conversations[c].anomalies[a].detected_token +"\")'>Show Payload</a></td></tr>";
index += 1;
}
......@@ -115,9 +134,12 @@
output +="</div><br>";
}
//document.write(output);
document.getElementById('report').innerHTML = output
},
function(xhr) {
alert ("No Report available!")
......
......@@ -59,10 +59,13 @@
<li><a href="#">Stop Session</a></li>
<li><a href="#">Get Configuration</a></li>
<li><a href="#">Get Status</a></li>
</ul>
</li>
<li id="orchestrator"><a href="#" onclick="showDetails('orchestrator')">Orchestrator API</a></li>
<li><a href="http://doc.f-interop.eu/">Docs</a></li>
<li><a href="http://doc.f-interop.eu/" target="_blank">Docs</a></li>
<li><a href="#">|</a></li>
</ul>
......@@ -101,13 +104,17 @@
</div>
</li>
<li class="divider navbar-login-session-bg"></li>
<li><a href="#">Messages <span class="badge pull-right" id="total_msg"> 0 </span></a></li>
<li><a href="#" class="hide">Messages <span class="badge pull-right" id="total_msg"> 0 </span></a></li>
<li><a href="#">User:<input type="text" class="form-control" aria-label="..." id="amqp_user" style="color:blue"></a></li>
<li><a href="#">Password:<input type="text" type="password" class="form-control" aria-label="..." id="amqp_password" style="color:blue"></a></li>
<li class="divider"></li>
<li><a href="#">Server:<input type="text" class="form-control" aria-label="..." id="amqp_server" style="color:blue"></a></li>
<li class="divider"></li>
<li><a href="#">AMQP_URL<input type="text" class="form-control" aria-label="..." id="amqp_url" style="color:blue"></a></li>
<li><a href="#">Session<input type="text" class="form-control" aria-label="..." id="amqp_session" style="color:blue"></a></li>
<li class="divider"></li>
<li><a href="#"> AMQP_EXCHANGE<input type="text" class="form-control" aria-label="..." id="amqp_exchange" style="color:blue"></a></li>
<li><a href="#"> Exchange<input type="text" class="form-control" aria-label="..." id="amqp_exchange" style="color:blue"></a></li>
<li class="divider"></li>
<li><a href="#"> Orchestrator URL<input type="text" class="form-control" aria-label="..." id="orcherstrator_url" style="color:blue"></a></li>
<li><a href="#"> Orchestrator<input type="text" class="form-control" aria-label="..." id="orcherstrator_url" style="color:blue"></a></li>
<li> &nbsp; </li>
</ul>
......
<div class="jumbotron">
<div class="container">
<div class="container">
<br/>
<div class="jumbotron">
<h2> The ORCHESTRATOR API </h2>
<p> It plays a purely administrative role: it monitors the users that are connected, activates
the rooms currently in use and starts/stops the test sessions. It is also in charge of provisioning
......@@ -9,7 +9,6 @@
the event bus.
</p>
</div>
</div>
......@@ -62,7 +61,7 @@
<div class="row">
<div class="col-lg-12">
<label>Session description (BODY)</label>
<textarea class="form-control" placeholder="JSON Body" id="request_body" rows="8"></textarea>
<textarea class="form-control" placeholder="JSON Body" id="request_body" rows="12"></textarea>
</div>
</div>
</div>
......@@ -91,7 +90,7 @@
<div class="row">
<div class="col-lg-12">
<label>Response</label>
<textarea class="form-control" id="orch_response" readonly rows="8"></textarea>
<textarea class="form-control" id="orch_response" readonly rows="12"></textarea>
</div>
</div>
......
......@@ -11,8 +11,9 @@
var list_packets
function show_packet_details(id){
function show_packet_details(id, token){
var output = JSON.stringify(list_packets[id]["_source"]["layers"]["coap"]["coap.payload"])
output.replaceAll(token, "<strong styles='color:red'>"+token+"</strong>")
var show_form = document.getElementById('show-pkt-detail')
show_form .classList.remove("hide");
show_form.innerHTML = output
......@@ -85,7 +86,7 @@
"<td>CoAP</td>" +
"<td>" + conversations[c].anomalies[a].detected_token + "</td>" +
"<td class='"+color_tag+"'>" + conversations[c].anomalies[a].privacy_tag + "</td>"+
"<td> <a href='#' onclick='show_packet_details("+conversations[c].anomalies[a].pkt_id+")'>Show Payload</a></td></tr>";
"<td> <a href='#' onclick='show_packet_details("+conversations[c].anomalies[a].pkt_id+","+ conversations[c].anomalies[a].detected_token +")'>Show Payload</a></td></tr>";
index += 1;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment