web-app: convert .svg figures to javascript plots (#966)

* web-app: convert .svg figures to javascript plots

Signed-off-by: David Korczynski <[email protected]>

* make modelling right

Signed-off-by: David Korczynski <[email protected]>

---------

Signed-off-by: David Korczynski <[email protected]>

Author: DavidKorczynski

tools/web-fuzzing-introspection/app/site/models.py

@@ -12,6 +12,13 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
+import datetime
+
+def get_date_at_offset_as_str(day_offset=-1):
+    datestr = (datetime.date.today() +
+               datetime.timedelta(day_offset)).strftime("%Y-%m-%d")
+    return datestr
+
 class DBSummary:
     def __init__(self, all_projects, total_number_of_projects, total_fuzzers, total_functions, language_count):
         self.all_projects = all_projects
@@ -28,6 +35,26 @@ def __init__(self, name, language, fuzz_count, reach, runtime_cov):
         self.reach = reach
         self.runtime_cov = runtime_cov
 
+        # Line coverage history
+        self.code_coverage_line_history = []
+        for i in range(100):
+            self.code_coverage_line_history.append((get_date_at_offset_as_str(i-100), i))
+
+        # Function coverage history
+        self.code_coverage_functions_history = []
+        for i in range(100):
+            self.code_coverage_functions_history.append((get_date_at_offset_as_str(i-100), i*2))
+
+        # Static reachability history
+        self.code_reachability_history = []
+        for i in range(100):
+            self.code_reachability_history.append((get_date_at_offset_as_str(i-100), i*1.5))
+
+        # Fuzzer count history
+        self.fuzzer_count_history = []
+        for i in range(100):
+            self.fuzzer_count_history.append((get_date_at_offset_as_str(i-100), 3))
+
 class Function:
     def __init__(self, name, project, is_reached=False, runtime_code_coverage = 32.4):
         self.name = name

tools/web-fuzzing-introspection/app/site/routes.py

@@ -35,7 +35,6 @@ def get_frontpage_summary_stats():
     db_summary = models.DBSummary(all_projects, total_number_of_projects, total_fuzzers, total_functions, language_count)
     return db_summary
 
-
 @site.route('/')
 def index():
     db_summary = get_frontpage_summary_stats()

tools/web-fuzzing-introspection/app/site/templates/project-profile.html

@@ -42,36 +42,35 @@ <h2>Project: <a href="#"> {{ project.name }}</a></h2>
             </div>
           </div>
           <!-- project profile table -->
+
+
           <div class="project__progress">
             <h2>Historical progression</h2>
             <div class="progress__graph">
               <!-- single graph -->
               <div class="single__graph">
+
                 <div class="graph__chart">
-                    <img src="{{url_for('static', filename='assets/img/progress-chart-1.svg')}}" alt="chart" />
+                    <div id="codeCoverageLinesOverTimePlot" style="width:100%;max-width:500px"></div>
                 </div>
-                <p>Code coverage (lines)</p>
               </div>
               <!-- single graph -->
               <div class="single__graph">
                 <div class="graph__chart">
-                    <img src="{{url_for('static', filename='assets/img/progress-chart-2.svg')}}" alt="chart" />
+                    <div id="codeCoverageFunctionsOverTimePlot" style="width:100%;max-width:500px"></div>
                 </div>
-                <p>Code coverage (functions)</p>
               </div>
               <!-- single graph -->
               <div class="single__graph">
                 <div class="graph__chart">
-                    <img src="{{url_for('static', filename='assets/img/progress-chart-3.svg')}}" alt="chart" />
+                    <div id="staticReachabilityOverTimePlot" style="width:100%;max-width:500px"></div>
                 </div>
-                <p>Static reachability</p>
               </div>
               <!-- single graph -->
               <div class="single__graph">
                 <div class="graph__chart">
-                    <img src="{{url_for('static', filename='assets/img/progress-chart-4.svg')}}" alt="chart" />
+                    <div id="fuzzerCountOverTimePlot" style="width:100%;max-width:500px"></div>
                 </div>
-                <p>Fuzzer count</p>
               </div>
             </div>
           </div>
@@ -80,5 +79,108 @@ <h2>Historical progression</h2>
     </main>
     <!-- end main content -->
     <!-- footer -->
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+<script>
+
+// Plot for code coverage in terms of lines over time
+const code_coverage_lines_x = [
+  {% for x_cord, y_cord in project.code_coverage_line_history %}
+    "{{ x_cord }}",
+  {% endfor %}
+];
+const code_coverage_lines_y = [
+  {% for x_cord, y_cord in project.code_coverage_line_history %}
+    {{ y_cord }},
+  {% endfor %}
+];
+const code_coverage_lines_data = [{
+  x: code_coverage_lines_x,
+  y: code_coverage_lines_y,
+  mode:"lines"
+}];
+const code_coverage_lines_layout = {
+  xaxis: {title: "Date"},
+  yaxis: {title: "Coverage"},  
+  title: "Code Coverage (lines)",
+  type: "scatter"
+};
+Plotly.newPlot("codeCoverageLinesOverTimePlot", code_coverage_lines_data, code_coverage_lines_layout);
+
+
+// Plot for code coverage in terms of functions over time
+const code_coverage_functions_x = [
+  {% for x_cord, y_cord in project.code_coverage_functions_history %}
+    "{{ x_cord }}",
+  {% endfor %}
+];
+const code_coverage_functions_y = [
+  {% for x_cord, y_cord in project.code_coverage_functions_history %}
+    {{ y_cord }},
+  {% endfor %}
+];
+const code_coverage_functions_data = [{
+  x: code_coverage_functions_x,
+  y: code_coverage_functions_y,
+  mode:"lines"
+}];
+const code_coverage_functions_layout = {
+  xaxis: {title: "Date"},
+  yaxis: {title: "Coverage"},  
+  title: "Code Coverage (lines)",
+  type: "scatter"
+};
+Plotly.newPlot("codeCoverageFunctionsOverTimePlot", code_coverage_functions_data, code_coverage_functions_layout);
+
+
+// Plot for static rachability over time
+const code_reachability_x = [
+  {% for x_cord, y_cord in project.code_reachability_history %}
+    "{{ x_cord }}",
+  {% endfor %}
+];
+const code_reachability_y = [
+  {% for x_cord, y_cord in project.code_reachability_history %}
+    {{ y_cord }},
+  {% endfor %}
+];
+const code_reachability_data = [{
+  x: code_reachability_x,
+  y: code_reachability_y,
+  mode:"lines"
+}];
+const code_reachability_layout = {
+  xaxis: {title: "Date"},
+  yaxis: {title: "Coverage"},  
+  title: "Code Coverage (lines)",
+  type: "scatter"
+};
+Plotly.newPlot("staticReachabilityOverTimePlot", code_reachability_data, code_reachability_layout);
+
+
+// Plot for fuzzer counter over time
+const fuzzer_count_x = [
+  {% for x_cord, y_cord in project.fuzzer_count_history %}
+    "{{ x_cord }}",
+  {% endfor %}
+];
+const fuzzer_count_y = [
+  {% for x_cord, y_cord in project.fuzzer_count_history %}
+    {{ y_cord }},
+  {% endfor %}
+];
+const fuzzer_count_data = [{
+  x: fuzzer_count_x,
+  y: fuzzer_count_y,
+  mode:"lines"
+}];
+const fuzzer_count_layout = {
+  xaxis: {title: "Date"},
+  yaxis: {title: "Coverage"},  
+  title: "Code Coverage (lines)",
+  type: "scatter"
+};
+Plotly.newPlot("fuzzerCountOverTimePlot", fuzzer_count_data, fuzzer_count_layout);
+
+</script>
 
 {% endblock %}