Commit fa5616ed authored by Luca Lamorte's avatar Luca Lamorte

Docker Image + UI updates

:
parent 542434e8
# temporary file for building docker images manually for the testing tool
FROM ubuntu:16.04
MAINTAINER luca.lamorte@uni.lu
RUN apt-get clean
RUN apt-get update
RUN apt-get upgrade -y
RUN apt-get update -y -qq && apt-get -y -qq install python3-dev
RUN apt-get -y install python3-setuptools
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
ENV PATH="/testing_tool_gui:$PATH"
#RUN echo $LANG
#ENV LANG=en_US.utf8
#RUN echo $PATH
#RUN ls /coap_testing_tool
WORKDIR /testing_tool_gui
#py3 requirements
RUN pip3 install -r requirements.txt
## API PORT
EXPOSE 8080 8080
# launch processes
CMD supervisord -c 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
[unix_http_server]
file=/tmp/supervisor.sock ; (the path to the socket file)
[supervisord]
logfile=/tmp/supervisord.log ; (main log file;default $CWD/supervisord.log)
logfile_maxbytes=50MB ; (max main logfile bytes b4 rotation;default 50MB)
logfile_backups=10 ; (num of main logfile rotation backups;default 10)
loglevel=info ; (log level;default info; others: debug,warn,trace)
pidfile=/tmp/supervisord.pid ; (supervisord pidfile;default supervisord.pid)
nodaemon=false ; (start in foreground if true;default false)
minfds=1024 ; (min. avail startup file descriptors;default 1024)
minprocs=200 ; (min. avail process descriptors;default 200)
[rpcinterface:supervisor]
supervisor.rpcinterface_factory = supervisor.rpcinterface:make_main_rpcinterface
[supervisorctl]
serverurl=unix:///tmp/supervisor.sock ; use a unix:// URL for a unix socket
[program:gui]
command = python3 -m testing_tool_gui.gui
autorestart=false
stopsignal=INT
stopasgroup=true
loglevel=debug
redirect_stderr=true
stdout_logfile = /var/log/gui-stdout.log
stdout_logfile_maxbytes = 10MB
stdout_logfile_backups = 5
{"exchange": "default", "url": "amqp://u1:u1@10.41.7.222/demo", "version": "0.0.1", "connected": false, "component": "gui_tt", "orchestrator": "http://finterop2"}
\ No newline at end of file
{"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
......@@ -276,12 +276,12 @@ def verdicts(output):
return ""
else:
response = app.response_class(
response=json.dumps(amqp_listener.get_verdict()),
status=200,
mimetype='application/json'
)
return response
# response = app.response_class(
# response=json.dumps(amqp_listener.get_verdict()),
# status=200,
# mimetype='application/json'
# )
return amqp_listener.get_verdict()
except Exception as error:
logger.debug("Error while sending back the verdict ", error)
response = app.response_class(
......@@ -295,8 +295,8 @@ def verdicts(output):
@app.route('/api_orch', methods=['POST'])
def api_orch():
orchestrator = Orchestrator()
global app_cfg
orchestrator = Orchestrator(url=app_cfg.orchestrator_url)
val = orchestrator.get_cmd(request.form)
print("RESPONSE : %s" % val)
response = app.response_class(
......
......@@ -10,7 +10,6 @@ logger = logging.getLogger(__name__)
class AmqpSniffer(threading.Thread):
def __init__(self, configuration, socketio):
threading.Thread.__init__(self)
......
......@@ -79,6 +79,7 @@ $(document).ready(function() {
console.log("Anomalies:"+ data["anomalies"])
var issues = parseInt(data["anomalies"])
$("#privacy_alert").removeClass("hide");
$("#reset_report").removeClass("hide");
$("#num_issues").html(issues + " Privacy Issues")
}catch (err){
console.log("error reading verdict")
......@@ -112,18 +113,21 @@ $(document).ready(function() {
$("#hide_console").on("click", function(){
var icon = $("<i>").addClass("glyphicon")
if ($("#messages").hasClass("console_show")){
if($("#add_page_here").hasClass("col-lg-9")){
//if ($("#messages").hasClass("console_show")){
icon.addClass("glyphicon-chevron-up")
$("#messages").removeClass("console_show");
$("#messages").addClass("console_hide ");
$("#hide_console").text("Show ").append(icon);
$("#add_page_here").removeClass("col-lg-9").addClass("col-lg-12")
}
else{
icon.addClass("glyphicon-chevron-down")
$("#messages").removeClass("console_hide");
$("#messages").addClass("console_show");
$("#hide_console").text("Hide ").append(icon);
$("#add_page_here").removeClass("col-lg-12").addClass("col-lg-9")
}
})
......@@ -179,18 +183,43 @@ function checkPrivacyMessage(msg){
}
}
// Loads a JSON file
function loadJsonReport(path)
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
renderReport(JSON.parse(xhr.responseText));
} else {
send_alert("Error", "Unable to render the report");
}
}
};
xhr.open("GET", path, true);
xhr.send();
}
function show_verdict(){
$.get( "html/verdict", function( data ) {
console.log("VERDICT:"+data)
$("#add_page_here").html( data );
$.get( "verdict/html", function( data ) {
$("#vedict_secion").html(data);
});
loadJsonReport('/verdict/json')
// $.get( "verdict/html", function( data ) {
// $("#vedict_secion").html(data);
// });
});
}
function resetReport(){
$("#privacy_alert").addClass("hide");
$("#reset_report").addClass("hide");
}
function addTestCase(testcase){
......@@ -488,20 +517,24 @@ function amqpToHtml(data_str){
var badge = $("<span>").addClass("label label-warning").html(index)
var rk_label = $("<span>").addClass("label label-danger").html("RK")
var ty_label = $("<span>").addClass("label label-primary").html("TYPE")
var time_label = $("<span>").addClass("label label-primary").html("TIME")
var pr_label = $("<span>").addClass("glyphicon glyphicon-chevron-down")
var icon_del = $("<span>").addClass("glyphicon glyphicon-trash").append(" ")
var timestamp= $("<div>").append("<span>").addClass("label label-default").text(formatDate(new Date()))
var half_line= $("<hr>").addClass("half-rule")
var p_head = $("<div>").addClass("panel-heading ")
var p_title = $("<h4>").addClass("panel-title")
p_head.append(p_title)
p_title.append(badge).append(" ")
p_title.append(timestamp).append(" ")
p_title.append(rk_label).append(routing_key)
p_title.append(ty_label).append(type)
//p_title.append(timestamp).append("<hr/> ")
p_title.append(rk_label).append(routing_key).append("<br><br>")
p_head.append(ty_label).append(type).append("<br/>")
p_head.append(time_label).append(" ").append(timestamp)
//p_title.append(ty_label).append(type)
var commands = $("<div>").addClass("pull-right")
......
......@@ -21,6 +21,28 @@
"protocol": "eth:ethertype:ip:udp:coap:data-text-lines",
"detected_token": "bbbb::1",
"privacy_tag": "IPv6"
},{
"device": "10.41.7.221",
"pkt_id": "257",
"timestamp": "Mar 6, 2017 18:18:44.051799000 CET",
"protocol": "eth:ethertype:ip:udp:coap:data-text-lines",
"detected_token": "Luxembourg",
"privacy_tag": "LOCATION"
},{
"device": "10.41.7.221",
"pkt_id": "257",
"timestamp": "Mar 6, 2017 18:18:44.051799000 CET",
"protocol": "eth:ethertype:ip:udp:coap:data-text-lines",
"detected_token": "10.41.7.221",
"privacy_tag": "IPv4"
}
,{
"device": "10.41.7.221",
"pkt_id": "257",
"timestamp": "Mar 6, 2017 18:18:44.051799000 CET",
"protocol": "eth:ethertype:ip:udp:coap:data-text-lines",
"detected_token": "bbbb::1",
"privacy_tag": "URI"
}]
}, {
"size": 212.0,
......
......@@ -28,14 +28,17 @@
.console_show{
background: #000000;
height: 300px;
padding-top: 4%;
padding-left: 1%;
background: #222222;
overflow-y:auto;
height:100vh;
border-top-left-radius: 2em;
}
.console_hide{
background: #000000;
background: #222222;
height: 0px;
overflow-y:auto;
}
......@@ -47,6 +50,7 @@
.amqp_msg{
padding-left: 2%;
padding-right: 2%;
}
......@@ -56,7 +60,7 @@ footer {
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
background-color: black;
background-color: #101010;
}
......@@ -136,7 +140,19 @@ footer {
}
.tag_email {
color: orangered !important;
color: #468847 !important;
}
.tag_location {
color: blue !important;
}
.tag_ipv4 {
color: deepskyblue !important;
}
.tag_uri {
color: olive !important;
}
.tag_ipv6 {
......
......@@ -25,11 +25,13 @@
{
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
if (success)
success(JSON.parse(xhr.responseText));
if (success)
success(JSON.parse(xhr.responseText));
//success(xhr.responseText)
} else {
if (error)
error(xhr);
}
}
};
......@@ -38,10 +40,13 @@
}
// Loading JSON
loadJSON('/demo_json',
//loadJSON('/demo_json',
loadJSON('/verdict/json',
function(verdict) {
var newDate = new Date();
newDate.setTime(verdict.timestamp*1000);
var dateString = newDate.toUTCString()
......@@ -56,6 +61,7 @@
output += " This conversation 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>"
output += "</div>"
......@@ -67,7 +73,7 @@
var conversations = verdict.conversation;
var packets = verdict.packets;
for (var c=0; c<conversations.length; c++) {
var conv_size = (conversations[c].size / verdict.byte_exchanged)*100;
......@@ -108,12 +114,13 @@
}
output +="</div><br>";
}
//document.write(output);
document.getElementById('report').innerHTML = output
},
function(xhr) {
console.error(xhr);
alert ("No Report available!")
}
);
</script>
......
<div class="jumbotron">
<div class="container">
<h1> GUI - v.1.0.0 </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut
abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
</p>
<div class="container">
<br>
<div class="jumbotron">
<h1> Develper GUI</h1>
<p> With this gui it is possible to play with the orchestrator (create start stop sessions),
see AMQP messages exchanged in on the event bus use the Privacy Testing Tool </p>
</div>
</div>
<div class="row" id="center-block">
<div class="row">
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Messages</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Orchestrator</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Privacy Testing Tool</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
</div>
</div>
</div> <!-- END ROW-->
</div> <!-- END ROW-->
\ No newline at end of file
......@@ -14,7 +14,7 @@
<script type="text/javascript" src="{{ url_for('static', filename='gui.js')}}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='privacy.js')}}"></script>
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon.ico')}}">
<script type=text/javascript>
<script type=text/javascript>
</script>
......@@ -29,7 +29,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" onclick="showDetails('gui')">GUI</a>
<a class="navbar-brand" href="#" onclick="showDetails('gui')">DevGUI</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
......@@ -67,12 +67,14 @@
<ul class="nav navbar-nav navbar-right">
<li class="show" id="privacy_alert">
<li class="hide" id="privacy_alert">
<a href="#" onClick="show_verdict()" class="yellow" onclick="show_verdict()">
<span class="glyphicon glyphicon-warning-sign"></span>
<span id="num_issues"> </span>
</a>
</li>
<li><a class="hide" href="#" onclick="resetReport()" id="reset_report">Reset Report</a></li>
<li><a href="#" >|</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:lawngreen">
......@@ -119,68 +121,83 @@
<div id="alerts"> </div>
<div id="add_page_here" style="overflow: scroll">
<div class="container" id="info">
<h1>Demo GUI!</h1>
<p>This is a a simple GUI to play with <a href-="http://www.finterop.eu">F-Interop</a> APIs and
Testing Tools (TT) . It includes a Event Bus (RabbitMQ) console and the AMQP Messages Utils.
Use it as a starting point to test your component.
</p>
</div>
<div>
<div class="row">
<div class="col-lg-9" id="add_page_here" style="overflow: scroll"> </div>
<div class="col-lg-3" styles="border:0 ">
<div class="raw">
<p>
<form class="navbar-form" onsubmit="showAll()">
<button type="submit" class="btn btn-primary glyphicon glyphicon-sort-by-attributes"></button>
<div class="form-group">
<input type="text" class="form-control" placeholder="Filter AMQP Messages " id="filter_rk">
</div>
by routing key
</form>
</p>
<div id="messages" class="console_show">
</div>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" styles="color:yellow" href="#">AMQP Console</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">
<span id="amqp_icon" class="glyphicon glyphicon-remove"></span>
<span id="amqp_status">Sniffer OFF</span>
</a>
</li>
<li><a href="#">
<span id="ws_icon" class="glyphicon glyphicon-remove"></span>
<span id="ws_status"> Disconnected</span>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" ><span id="n_events">0 </span> Events <span class="glyphicon glyphicon-tags"></span> </a></li>
<li><a href="#" onclick="cleanall()"><span class="glyphicon glyphicon-trash"></span> Clean all</a></li>
<button id="hide_console" type="button" class="btn btn-primary navbar-btn pull-right">
Hide
<i class="glyphicon glyphicon-chevron-down"></i>
</button>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!--<div id="add_page_here" style="overflow: scroll">-->
<!--</div>-->
<div class="raw force-to-bottom">
<div class="navbar-fixed-bottom" >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" styles="color:white" href="#">AMQP Console</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#" ><span id="n_events">0 </span><span class="glyphicon glyphicon-tags"></span> </a></li>
<li><a href="#" onclick="cleanall()"><span class="glyphicon glyphicon-trash"></span> Clean all</a></li>
</ul>
<form class="navbar-form navbar-left" onsubmit="showAll()">
<button type="submit" class="btn btn-primary glyphicon glyphicon-sort-by-attributes"></button>
<div class="form-group">
<input type="text" class="form-control" placeholder="filter by routing key" id="filter_rk">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">
<span id="amqp_icon" class="glyphicon glyphicon-remove"></span>
<span id="amqp_status">Sniffer OFF</span>
</a>
</li>
<li><a href="#">
<span id="ws_icon" class="glyphicon glyphicon-remove"></span>
<span id="ws_status"> Disconnected</span>
</a>
</li>
<button id="hide_console" type="button" class="btn btn-primary navbar-btn pull-right">
Hide
<i class="glyphicon glyphicon-chevron-down"></i>
</button>
</ul>
</div>
</nav>
<div id="messages" class="console_show"> </div>
</div>
<!--</div>-->
</div>
<!--</div>-->
</body>
</html>
<div class="jumbotron">
<div class="container">
<br>
<div class="container">
<div class="row">
<div class="jumbotron">
<h1> AMQP Messages </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut
abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
</p>
<p>Components of the system communicates with each other using messages.
We use the RabbitMQ as the underlying message-passing mechanism.
Each message contains a routing key which indicates how to route this message to the relevant input queues of the components.</p>
</div>
</div>
</div>
<div class="row" style="overflow-y:scroll; overflow-x:hidden; height:800px">
<div class="row" style="overflow-y:scroll; overflow-x:hidden; height:800px;>
<div class="container">
<div class="row">
......@@ -67,9 +64,11 @@
</div> <!-- END ROW-->
</div> <!-- END ROW-->
</div><!-- /.container -->
</><!-- /.container -->
</div>
</div>
<script>
function clear_message(){
$("#routing_key_input").val("")
......
<div class="jumbotron">
<div class="container">
<div class="container">
<br>
<div class="jumbotron">
<h1> Privacy Testing Tool - v.1.0.0 </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut
abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
<p> Privacy Testing Tool performs privacy analysis of the data exchanged while running different kind of tests,
The tool checks any possible privacy and personal data leakage, providing a full report of the conversation
</p>
</div>
......
<div class="container">
<div class="row">
<div class="col-md-1 ">
<span class="label label-primary"> Test Case 1</span>
<div class="col-md-12 ">
<h3><span class="label label-primary"> Test Case 1 - OnLine Assessment</span></h3>
</div>
<div class="col-md-11">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Preocedure to follow</h3>
......@@ -55,4 +56,5 @@
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
\ No newline at end of file
<div class="container">
<div class="row">
<div class="col-md-1 ">
<span class="label label-primary"> Test Case 2</span>
<div class="col-md-12 ">
<h2><span class="label label-primary"> Test Case 2 - Live Assessment</span></h2>
</div>
<div class="col-md-11">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Preocedure to follow</h3>
......@@ -49,6 +50,7 @@
</div>
</div>
</div>
<script>
......
<div class="jumbotron">
<div class="container" style="overflow:auto;">
<div class="container">
<h1> Privacy Report </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut
abore et dolore magna aliqua.
</p>
<div id="vedict_secion"> </div>
</div>
<div id="report"/>
</div>
<script>
var list_packets
function show_packet_details(id){
var output = JSON.stringify(list_packets[id]["_source"]["layers"]["coap"]["coap.payload"])
var show_form = document.getElementById('show-pkt-detail')
show_form .classList.remove("hide");