Merge pull request #23 from mpast/chart-app

Create an evolution chart with the findings in app
mpast · Mar 14, 2021 · 49e2d9b · 49e2d9b
2 parents c564d39 + 6dde3a0
commit 49e2d9b
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,8 @@
 
 Django Web application for performing Static Analysis and detecting malware in Android APKs
 
+![App](app/static/app.png)
+
 ### Components
 
 ![Schema](app/static/schema.png)
@@ -39,6 +41,7 @@ Image is based on python buster. Link to [Docker Hub image](https://hub.docker.c
 
 | Image |  Tags | Base |
 |--------------------|-------|---------------------|
+| mpast/mobile_audit | 1.3.6 | python:3.9.2-buster |
 | mpast/mobile_audit | 1.3.0 | python:3.9.1-buster |
 | mpast/mobile_audit | 1.2.0 | python:3.9.1-buster |
 | mpast/mobile_audit | 1.1.0 | python:3.9.0-buster |

diff --git a/app/static/app.png b/app/static/app.png
diff --git a/app/static/chartjs/Chart.min.css b/app/static/chartjs/Chart.min.css
diff --git a/app/static/chartjs/Chart.min.js b/app/static/chartjs/Chart.min.js
diff --git a/app/templates/app.html b/app/templates/app.html
@@ -1,27 +1,31 @@
-{% extends 'base.html' %} {% load fontawesome_5 %} {% block content %}
-<h4>App</h4>
+{% extends 'base.html' %} {% load fontawesome_5 %} {% load static %} {% block content %}
 {% if app %}
-<ul class="messages">
-    {% for message in messages %}
-    <div class="alert alert-success">
-        <strong>{{ message | escape }}</strong>
+<div class="card">
+    <div class="card-body">
+        <h4 class="card-title">App</h4>
+        <table class="table table-striped table-bordered">
+            <tr>
+                <th>App name</th>
+                <td>{{ app.name }}</td>
+            </tr>
+            <tr>
+                <th>Description</th>
+                <td>{{ app.description }}</td>
+            </tr>
+            <tr>
+                <th>Created by</th>
+                <td>{{ app.user }}</td>
+            </tr>
+        </table>
     </div>
-    {% endfor %}
-</ul>
-<table class="table table-striped table-bordered">
-    <tr>
-        <th>App name</th>
-        <td>{{ app.name }}</td>
-    </tr>
-    <tr>
-        <th>Description</th>
-        <td>{{ app.description }}</td>
-    </tr>
-    <tr>
-        <th>Created by</th>
-        <td>{{ app.user }}</td>
-    </tr>
-</table>
+</div>
+<br>
+<div id="chart" style="height:450px">
+    <h5>Evolution</h4>
+    <link rel="stylesheet" type="text/css" href="{% static 'chartjs/Chart.min.css' %}">
+    <canvas id="myChart" width="400" height="400"></canvas>
+</div>
+<br>
 <h5>Scans</h5>
 <a href="{% url 'create_scan' app_id=app.id %}" class="btn btn-outline-success">New Scan</a> {% if scans %}
 <table class="table table-bordered">
@@ -116,4 +120,58 @@ <h5>Scans</h5>
 
     });
 </script>
-{% endif %} {% endif %} {% endblock %}
+{% endif %} 
+<script type="text/javascript" charset="utf8" src="{% static 'chartjs/Chart.min.js' %}"></script>
+<script>
+var ctx = document.getElementById('myChart').getContext('2d');
+var myChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+        labels: {{ chart_labels|safe }},
+        datasets: [{
+            label: 'Findings',
+            data: {{ chart_data|safe }},
+            backgroundColor: [
+                'rgba(255, 99, 132, 0.2)',
+                'rgba(54, 162, 235, 0.2)',
+                'rgba(255, 206, 86, 0.2)',
+                'rgba(75, 192, 192, 0.2)',
+                'rgba(153, 102, 255, 0.2)',
+                'rgba(255, 159, 64, 0.2)',
+                'rgba(255, 99, 132, 0.2)',
+                'rgba(54, 162, 235, 0.2)',
+                'rgba(255, 206, 86, 0.2)',
+                'rgba(75, 192, 192, 0.2)',
+                'rgba(153, 102, 255, 0.2)',
+                'rgba(255, 159, 64, 0.2)'
+            ],
+            borderColor: [
+                'rgba(255, 99, 132, 1)',
+                'rgba(54, 162, 235, 1)',
+                'rgba(255, 206, 86, 1)',
+                'rgba(75, 192, 192, 1)',
+                'rgba(153, 102, 255, 1)',
+                'rgba(255, 159, 64, 1)',
+                'rgba(255, 99, 132, 1)',
+                'rgba(54, 162, 235, 1)',
+                'rgba(255, 206, 86, 1)',
+                'rgba(75, 192, 192, 1)',
+                'rgba(153, 102, 255, 1)',
+                'rgba(255, 159, 64, 1)'
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        responsive: false,
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero: true
+                }
+            }]
+        }
+    }
+});
+</script>
+{% endif %} {% endblock %}
diff --git a/app/views.py b/app/views.py
@@ -211,11 +211,15 @@ def app(request, id):
     app = Application.objects.get(pk=id)
     scans = Scan.objects.filter(app=app.id).order_by('id')
     scans_data = {}
+    chart_labels = []
+    chart_data = []
     for scan in scans:
         scans_data[scan.id] = {
             'findings': get_findings_by_severity(scan.id),
             'antivirus' : ''
         }
+        chart_labels.append("Scan #" + str(scan.id) + " - " + scan.description)
+        chart_data.append(scan.findings)
         try:
             scans_data[scan.id]['antivirus'] = VirusTotalScan.objects.filter(scan=scan.id).latest('created_on')
         except Exception as e:
@@ -224,6 +228,8 @@ def app(request, id):
         'app': app,
         'scans': scans,
         'scans_data': scans_data,
+        'chart_data': chart_data,
+        'chart_labels': chart_labels,
         'settings': settings,
     })